added mocked story. button link.

Adyen · Dec 3, 2024 · 2812f4c · 2812f4c
1 parent 5687ba4
commit 2812f4c
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 30 deletions.
diff --git a/packages/lib/src/components/Dropin/components/DropinComponent.scss b/packages/lib/src/components/Dropin/components/DropinComponent.scss
@@ -4,9 +4,14 @@
 .adyen-checkout__dropin {
     display: flex;
     flex-direction: column;
-    gap: token(spacer-100);
+    gap: token(spacer-070);
+}
+
+.adyen-checkout__button--dropin-show-paymentmethods {
+    align-self: start;
 }
 
+
 .adyen-checkout-payment-methods-container {
     display: flex;
     flex-direction: column;
@@ -33,6 +38,7 @@
     }
 }
 
+
 .adyen-checkout__instant-payment-methods-list {
     $instant-pm-gap: token(spacer-070);
 

diff --git a/packages/lib/src/components/Dropin/components/DropinComponent.tsx b/packages/lib/src/components/Dropin/components/DropinComponent.tsx
@@ -211,7 +211,14 @@ export class DropinComponent extends Component<DropinComponentProps, DropinCompo
                                     // showRemovePaymentMethodButton={this.props.showRemovePaymentMethodButton}
                                     showRadioButton={this.props.showRadioButton}
                                 />
-                                <Button variant="primary" label="Other payment methods" onClick={this.onShowPaymentMethodListClick} />
+
+                                <Button
+                                    classNameModifiers={['dropin-show-paymentmethods']}
+                                    variant="link"
+                                    inline
+                                    label="Other payment methods"
+                                    onClick={this.onShowPaymentMethodListClick}
+                                />
                             </Fragment>
                         )}
 

diff --git a/packages/lib/src/components/PayPalFastlane/Fastlane.tsx b/packages/lib/src/components/PayPalFastlane/Fastlane.tsx
@@ -11,6 +11,7 @@ interface FastlaneConfiguration extends UIElementProps {
     lastFour: string;
     brand: string;
     email: string;
+    sessionId: string;
     /**
      * List of brands accepted by the component
      * @internal
@@ -38,6 +39,7 @@ class Fastlane extends UIElement<FastlaneConfiguration> {
                 type: Fastlane.type,
                 fastlaneData: btoa(
                     JSON.stringify({
+                        sessionId: this.props.sessionId,
                         tokenId: this.props.tokenId,
                         customerId: this.props.customerId
                     })

diff --git a/packages/lib/src/components/PayPalFastlane/services/request-fastlane-token.ts b/packages/lib/src/components/PayPalFastlane/services/request-fastlane-token.ts
@@ -9,19 +9,19 @@ export interface FastlaneTokenData {
 }
 
 function requestFastlaneToken(url: string, clientKey: string): Promise<FastlaneTokenData> {
-    // const path = `utility/v1/payPalFastlane/tokens?clientKey=${clientKey}`;
-    // return httpPost<FastlaneTokenData>({ loadingContext: url, path, errorLevel: 'fatal' });
+    const path = `utility/v1/payPalFastlane/tokens?clientKey=${clientKey}`;
+    return httpPost<FastlaneTokenData>({ loadingContext: url, path, errorLevel: 'fatal' });
 
     /**
      * TODO: Endpoint is not ready. The only way to test right now is mocking the response here
      */
-    return Promise.resolve({
-        id: '2747bd08-783a-45c6-902b-3efbda5497b7',
-        clientId: 'AXy9hIzWB6h_LjZUHjHmsbsiicSIbL4GKOrcgomEedVjduUinIU4C2llxkW5p0OG0zTNgviYFceaXEnj',
-        merchantId: 'C3UCKQHMW4948',
-        value: 'eyJraWQiOiJkMTA2ZTUwNjkzOWYxMWVlYjlkMTAyNDJhYzEyMDAwMiIsInR5cCI6IkpXVCIsImFsZyI6IkVTMjU2In0.eyJpc3MiOiJodHRwczovL2FwaS5zYW5kYm94LnBheXBhbC5jb20iLCJhdWQiOlsiaHR0cHM6Ly9hcGkuYnJhaW50cmVlZ2F0ZXdheS5jb20iLCJjaGVja291dC1wbGF5Z3JvdW5kLm5ldGxpZnkuYXBwIl0sInN1YiI6Ik02VE5BRVNaNUZHTk4iLCJhY3IiOlsiY2xpZW50Il0sInNjb3BlIjpbIkJyYWludHJlZTpWYXVsdCJdLCJvcHRpb25zIjp7fSwiYXoiOiJjY2cxOC5zbGMiLCJleHRlcm5hbF9pZCI6WyJQYXlQYWw6QzNVQ0tRSE1XNDk0OCIsIkJyYWludHJlZTozZGI4aG5rdHJ0bXpzMmd0Il0sImV4cCI6MTczMzE2MTgwNiwiaWF0IjoxNzMzMTYwOTA2LCJqdGkiOiJVMkFBSXBGY25XbEJQNEwwaWJlSk14SmR1ZTFodG0yUGFXNzlMeDRzMktVZkJXYl8wWUw4S1BIOEFQUC0yNnhISm5WRmFPQWxObGVMVzdCRktlcGRVaERMOEJMWVBHdXRkMEFBVUZEc0V1UDRUOUlzNzc2WHNyUG9BMXBxN0ZQZyJ9.VN6t5fDUJknJf6RZO9LSYVSMmkITU5XOl0VVeFeVeJiMeU-1w5S8J0vPROv4_vBrDflWtx-YRs6bcvXTDq1NHg',
-        expiresAt: '2024-11-01T13:34:01.804+00:00'
-    });
+    // return Promise.resolve({
+    //     id: '2747bd08-783a-45c6-902b-3efbda5497b7',
+    //     clientId: 'AXy9hIzWB6h_LjZUHjHmsbsiicSIbL4GKOrcgomEedVjduUinIU4C2llxkW5p0OG0zTNgviYFceaXEnj',
+    //     merchantId: 'C3UCKQHMW4948',
+    //     value: 'eyJraWQiOiJkMTA2ZTUwNjkzOWYxMWVlYjlkMTAyNDJhYzEyMDAwMiIsInR5cCI6IkpXVCIsImFsZyI6IkVTMjU2In0.eyJpc3MiOiJodHRwczovL2FwaS5zYW5kYm94LnBheXBhbC5jb20iLCJhdWQiOlsiaHR0cHM6Ly9hcGkuYnJhaW50cmVlZ2F0ZXdheS5jb20iLCJjaGVja291dC1wbGF5Z3JvdW5kLm5ldGxpZnkuYXBwIl0sInN1YiI6Ik02VE5BRVNaNUZHTk4iLCJhY3IiOlsiY2xpZW50Il0sInNjb3BlIjpbIkJyYWludHJlZTpWYXVsdCJdLCJvcHRpb25zIjp7fSwiYXoiOiJjY2cxOC5zbGMiLCJleHRlcm5hbF9pZCI6WyJQYXlQYWw6QzNVQ0tRSE1XNDk0OCIsIkJyYWludHJlZTozZGI4aG5rdHJ0bXpzMmd0Il0sImV4cCI6MTczMzIyODY5MSwiaWF0IjoxNzMzMjI3NzkxLCJqdGkiOiJVMkFBTGM5a2VYdFByRTh6OHZPTEptUDI2cV94akcyN24tNHJHdUhCMHB1XzE1aHY0bGlrdmFobmlXdjJzbmN0UWFEdjFscFhxTlk0U1VmYkhwR0tnTjNYTlM5OGpaUnB0WWlFbkhZN1JxS21TQUpXZVFIRFdPc3AxRllaVUd3ZyJ9.3Aw31ttXYSCmUcklNi6BrGqWPTw2Z42XDZW_r4SFTZBXz9aUXu3uy6k2cG7WChGx0vss7qFq_3XYswS8t7T9CQ',
+    //     expiresAt: '2024-11-01T13:34:01.804+00:00'
+    // });
 }
 
 export default requestFastlaneToken;
diff --git a/packages/lib/src/components/internal/Button/types.ts b/packages/lib/src/components/internal/Button/types.ts
@@ -1,6 +1,4 @@
-import { h } from 'preact';
-
-export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'action';
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'action' | 'link';
 
 export interface ButtonProps {
     status?: string;

diff --git a/packages/lib/storybook/helpers/create-advanced-checkout.ts b/packages/lib/storybook/helpers/create-advanced-checkout.ts
@@ -33,7 +33,9 @@ async function createAdvancedFlowCheckout({
               paymentMethods: paymentMethodsOverride.paymentMethods ? paymentMethodsOverride.paymentMethods : []
           };
 
-    paymentMethodsResponse.paymentMethods = paymentMethodsResponse.paymentMethods.filter(pm => allowedPaymentTypes.includes(pm.type));
+    if (allowedPaymentTypes.length > 0) {
+        paymentMethodsResponse.paymentMethods = paymentMethodsResponse.paymentMethods.filter(pm => allowedPaymentTypes.includes(pm.type));
+    }
 
     const checkout = await AdyenCheckout({
         clientKey: process.env.CLIENT_KEY,

diff --git a/packages/lib/storybook/stories/wallets/Fastlane/Fastlane.stories.tsx b/packages/lib/storybook/stories/wallets/Fastlane/Fastlane.stories.tsx
@@ -1,5 +1,13 @@
+import { h } from 'preact';
 import { MetaConfiguration, StoryConfiguration } from '../../types';
 import { FastlaneInSinglePageApp } from './FastlaneInSinglePageApp';
+import { ComponentContainer } from '../../ComponentContainer';
+
+import Dropin from '../../../../src/components/Dropin/Dropin';
+import Card from '../../../../src/components/Card/Card';
+import PayPal from '../../../../src/components/PayPal/Paypal';
+import Fastlane from '../../../../src/components/PayPalFastlane';
+import { Checkout } from '../../Checkout';
 
 type FastlaneStory = StoryConfiguration<{}>;
 
@@ -9,8 +17,32 @@ const meta: MetaConfiguration<FastlaneStory> = {
 
 export const Default: FastlaneStory = {
     render: checkoutConfig => {
-        const allowedPaymentTypes = ['scheme', 'paypal', 'fastlane'];
+        const paymentMethodsOverride = {
+            paymentMethods: [
+                {
+                    type: 'scheme',
+                    name: 'Card',
+                    brands: ['mc', 'visa']
+                },
+                {
+                    configuration: { merchantId: 'QSXMR9W7GV8NY', intent: 'capture' },
+                    name: 'PayPal',
+                    type: 'paypal'
+                },
+                {
+                    name: 'Fastlane',
+                    type: 'fastlane',
+                    brands: ['mc', 'visa']
+                }
+            ]
+        };
+
+        return <FastlaneInSinglePageApp checkoutConfig={{ paymentMethodsOverride, ...checkoutConfig }} />;
+    }
+};
 
+export const WithMockedRecognizedFlow: FastlaneStory = {
+    render: checkoutConfig => {
         const paymentMethodsOverride = {
             paymentMethods: [
                 {
@@ -31,7 +63,23 @@ export const Default: FastlaneStory = {
             ]
         };
 
-        return <FastlaneInSinglePageApp checkoutConfig={{ allowedPaymentTypes, paymentMethodsOverride, ...checkoutConfig }} />;
+        return (
+            <Checkout checkoutConfig={{ ...checkoutConfig, paymentMethodsOverride }}>
+                {checkout => (
+                    <ComponentContainer
+                        element={
+                            new Dropin(checkout, {
+                                showStoredPaymentMethods: false,
+                                paymentMethodComponents: [Card, PayPal, Fastlane],
+                                paymentMethodsConfiguration: {
+                                    fastlane: { tokenId: 'xxx', customerId: 'sss', lastFour: '1111', brand: 'visa', email: '[email protected]' }
+                                }
+                            })
+                        }
+                    />
+                )}
+            </Checkout>
+        );
     }
 };
 

diff --git a/packages/lib/storybook/stories/wallets/Fastlane/FastlaneInSinglePageApp.tsx b/packages/lib/storybook/stories/wallets/Fastlane/FastlaneInSinglePageApp.tsx
@@ -16,16 +16,16 @@ interface Props {
 }
 
 export const FastlaneInSinglePageApp = ({ checkoutConfig }: Props) => {
-    // const [componentConfig, setComponentConfig] = useState<any>(null);
-    //
-    // const handleOnCheckoutStep = config => {
-    //     console.log('Component config:', config);
-    //     setComponentConfig(config);
-    // };
-    //
-    // if (!componentConfig) {
-    //     return <GuestShopperForm onCheckoutStep={handleOnCheckoutStep} />;
-    // }
+    const [componentConfig, setComponentConfig] = useState<any>(null);
+
+    const handleOnCheckoutStep = config => {
+        console.log('Component config:', config);
+        setComponentConfig(config);
+    };
+
+    if (!componentConfig) {
+        return <GuestShopperForm onCheckoutStep={handleOnCheckoutStep} />;
+    }
 
     return (
         <Checkout checkoutConfig={checkoutConfig}>

diff --git a/packages/lib/storybook/stories/wallets/Fastlane/components/GuestShopperForm.tsx b/packages/lib/storybook/stories/wallets/Fastlane/components/GuestShopperForm.tsx
@@ -35,15 +35,13 @@ export const GuestShopperForm = ({ onCheckoutStep }: GuestShopperFormProps) => {
     };
 
     const handleOnCheckoutClick = (shippingAddress?: any) => {
-        console.log('Shipping address', shippingAddress);
-
         const componentConfig = fastlane.getComponentConfiguration(fastlaneAuthResult);
         onCheckoutStep(componentConfig);
     };
 
     useEffect(() => {
         void loadFastlane().catch(error => {
-            console.log(error);
+            alert('Failed to initialize: Fetch the token using Postman');
         });
     }, []);