worked on review comments. forced types in drop-in render fn

Adyen · Dec 16, 2024 · 3a92c58 · 3a92c58
1 parent 4f6dc07
commit 3a92c58
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 28 deletions.
diff --git a/packages/lib/src/components/Dropin/components/DropinComponent.tsx b/packages/lib/src/components/Dropin/components/DropinComponent.tsx
@@ -2,14 +2,13 @@ import { Component, Fragment, h } from 'preact';
 import PaymentMethodList from './PaymentMethod/PaymentMethodList';
 import Status from './status';
 import getOrderStatus from '../../../core/Services/order-status';
-import { DropinComponentProps, DropinComponentState, DropinStatusProps, onOrderCancelData } from '../types';
 import './DropinComponent.scss';
-import { UIElementStatus } from '../../internal/UIElement/types';
 import { sanitizeOrder } from '../../internal/UIElement/utils';
 import { PaymentAmount } from '../../../types/global-types';
 import { ANALYTICS_RENDERED_STR } from '../../../core/Analytics/constants';
 import AdyenCheckoutError from '../../../core/Errors/AdyenCheckoutError';
 import Button from '../../internal/Button';
+import type { DropinComponentProps, DropinComponentState, DropinStatus, DropinStatusProps, onOrderCancelData } from '../types';
 
 export class DropinComponent extends Component<DropinComponentProps, DropinComponentState> {
     public state: DropinComponentState = {
@@ -64,7 +63,7 @@ export class DropinComponent extends Component<DropinComponentProps, DropinCompo
         };
     }
 
-    public setStatus = (status: UIElementStatus, props: DropinStatusProps = {}) => {
+    public setStatus = (status: DropinStatus['type'], props: DropinStatusProps = {}) => {
         this.setState({ status: { type: status, props } });
     };
 
@@ -77,6 +76,7 @@ export class DropinComponent extends Component<DropinComponentProps, DropinCompo
 
     componentDidUpdate(prevProps, prevState) {
         if (prevState.status.type !== this.state.status.type && this.state.activePaymentMethod) {
+            // @ts-ignore TODO: Drop-in has its own 'status' values ('custom' for ex) which differs from regular UIElementStatus. Need to investigate best way to define/use this status variable
             this.state.activePaymentMethod.setStatus(this.state.status.type);
         }
 
@@ -154,9 +154,8 @@ export class DropinComponent extends Component<DropinComponentProps, DropinCompo
 
     private onOrderCancel: (data: onOrderCancelData) => void;
 
-    render(
-        props,
-        {
+    render() {
+        const {
             elements,
             fastlanePaymentElement,
             instantPaymentElements,
@@ -165,17 +164,15 @@ export class DropinComponent extends Component<DropinComponentProps, DropinCompo
             activePaymentMethod,
             cachedPaymentMethods,
             showDefaultPaymentMethodList
-        }
-    ) {
+        } = this.state;
+
         const isLoading = status.type === 'loading';
         const isRedirecting = status.type === 'redirect';
-        const hasPaymentMethodsToBeDisplayed = elements?.length || instantPaymentElements?.length || storedPaymentElements?.length;
-
-        const showFastlane = !!fastlanePaymentElement && !showDefaultPaymentMethodList;
+        const hasPaymentMethodsToBeDisplayed = !!(elements?.length || instantPaymentElements?.length || storedPaymentElements?.length);
 
         switch (status.type) {
             case 'success':
-                return <Status.Success message={props?.amount?.value === 0 ? 'resultMessages.preauthorized' : status.props?.message} />;
+                return <Status.Success message={this.props?.amount?.value === 0 ? 'resultMessages.preauthorized' : status.props?.message} />;
 
             case 'error':
                 return <Status.Error message={status.props?.message} />;
@@ -189,7 +186,7 @@ export class DropinComponent extends Component<DropinComponentProps, DropinCompo
                         {isRedirecting && status.props.component && status.props.component.render()}
                         {isLoading && status.props && status.props.component && status.props.component.render()}
 
-                        {showFastlane && (
+                        {!showDefaultPaymentMethodList && (
                             <Fragment>
                                 <PaymentMethodList
                                     isLoading={isLoading}
@@ -200,17 +197,20 @@ export class DropinComponent extends Component<DropinComponentProps, DropinCompo
                                     openFirstPaymentMethod
                                     showRadioButton={this.props.showRadioButton}
                                 />
-                                <Button
-                                    classNameModifiers={['dropin-show-paymentmethods']}
-                                    variant="link"
-                                    inline
-                                    label="Other payment methods"
-                                    onClick={this.onShowDefaultPaymentMethodListClick}
-                                />
+
+                                {hasPaymentMethodsToBeDisplayed && (
+                                    <Button
+                                        classNameModifiers={['dropin-show-paymentmethods']}
+                                        variant="link"
+                                        inline
+                                        label="Other payment methods"
+                                        onClick={this.onShowDefaultPaymentMethodListClick}
+                                    />
+                                )}
                             </Fragment>
                         )}
 
-                        {!!hasPaymentMethodsToBeDisplayed && !showFastlane && (
+                        {hasPaymentMethodsToBeDisplayed && showDefaultPaymentMethodList && (
                             <PaymentMethodList
                                 isLoading={isLoading || isRedirecting}
                                 isDisablingPaymentMethod={this.state.isDisabling}

diff --git a/packages/lib/src/components/Dropin/types.ts b/packages/lib/src/components/Dropin/types.ts
@@ -1,5 +1,5 @@
 import type { Order, OrderStatus, PaymentActionsType, PaymentAmount } from '../../types/global-types';
-import type { UIElementProps, UIElementStatus } from '../internal/UIElement/types';
+import { StatusFromAction, UIElementProps, UIElementStatus } from '../internal/UIElement/types';
 import type { NewableComponent } from '../../core/core.registry';
 import type { ICore } from '../../core/types';
 
@@ -150,23 +150,24 @@ export interface DropinComponentProps extends DropinConfiguration {
     onOrderCancel?: onOrderCancelType;
 }
 
-interface DropinStatus {
-    type: UIElementStatus;
+export interface DropinStatus {
+    type: UIElementStatus | StatusFromAction;
     props?: DropinStatusProps;
 }
 
 export interface DropinStatusProps {
     component?: UIElement;
+    message?: string;
 }
 
 export interface DropinComponentState {
-    elements: any[];
+    elements: UIElement[];
     fastlanePaymentElement: UIElement[];
     instantPaymentElements: UIElement[];
     storedPaymentElements: UIElement[];
     status: DropinStatus;
     activePaymentMethod: UIElement;
-    cachedPaymentMethods: object;
+    cachedPaymentMethods: Record<string, boolean>;
     showDefaultPaymentMethodList: boolean;
     isDisabling: boolean;
     orderStatus: OrderStatus;

diff --git a/packages/lib/src/components/PayPalFastlane/components/Fastlane.scss b/packages/lib/src/components/PayPalFastlane/components/Fastlane.scss
@@ -30,3 +30,7 @@
   justify-content: center;
   margin-top: token(spacer-070);
 }
+
+.adyen-checkout-fastlane__brand img {
+  width: 95px;
+}
diff --git a/packages/lib/src/components/PayPalFastlane/components/FastlaneComponent.tsx b/packages/lib/src/components/PayPalFastlane/components/FastlaneComponent.tsx
@@ -37,7 +37,7 @@ const FastlaneComponent = ({ lastFour, brand, payButton, setComponentRef, showPa
             {showPayButton && payButton({ status, icon: getImage({ imageFolder: 'components/' })(`${PREFIX}lock`) })}
 
             <div className="adyen-checkout-fastlane__brand">
-                <Img width="95px" src={getImage({ imageFolder: 'components/' })(`paypal_fastlane_gray`)} alt="Fastlane logo" />
+                <Img src={getImage({ imageFolder: 'components/' })(`paypal_fastlane_gray`)} alt="Fastlane logo" />
             </div>
         </div>
     );

diff --git a/packages/lib/src/components/internal/UIElement/types.ts b/packages/lib/src/components/internal/UIElement/types.ts
@@ -25,6 +25,8 @@ type CoreCallbacks = Pick<
     | 'onEnterKeyPressed'
 >;
 
+export type StatusFromAction = 'redirect' | 'loading' | 'custom';
+
 export type UIElementProps = BaseElementProps &
     CoreCallbacks & {
         environment?: string;
@@ -57,7 +59,7 @@ export type UIElementProps = BaseElementProps &
          * Status set when creating the Component from action
          * @internal
          */
-        statusType?: 'redirect' | 'loading' | 'custom';
+        statusType?: StatusFromAction;
 
         type?: string;
         name?: string;