cleaned up stories and code

Adyen · Nov 25, 2024 · 0b5a750 · 0b5a750
1 parent 697fae5
commit 0b5a750
Show file tree

Hide file tree

Showing 10 changed files with 127 additions and 81 deletions.
diff --git a/packages/lib/src/components/PayPalFastlane/FastlaneSDK.ts b/packages/lib/src/components/PayPalFastlane/FastlaneSDK.ts
@@ -1,14 +1,15 @@
 import { resolveEnvironments } from '../../core/Environment';
 import requestFastlaneToken from './services/request-fastlane-token';
+import { convertAdyenLocaleToFastlaneLocale } from './utils';
 import Script from '../../utils/Script';
 
-import type { Fastlane, AuthenticatedCustomerResult, ShowShippingAddressSelectorResult } from './types';
+import type { Fastlane, FastlaneAuthenticatedCustomerResult, FastlaneShippingAddressSelectorResult } from './types';
 import type { FastlaneTokenData } from './services/request-fastlane-token';
 import type { CoreConfiguration } from '../../core/types';
 
 export interface FastlaneSDKConfiguration {
     clientKey: string;
-    locale?: 'en_us' | 'es_us' | 'fr_rs' | 'zh_us';
+    locale?: 'en-US' | 'es-US' | 'fr-RS' | 'zh-US';
     environment?: CoreConfiguration['environment'];
 }
 
@@ -24,7 +25,7 @@ class FastlaneSDK {
 
         this.checkoutShopperURL = apiUrl;
         this.clientKey = configuration.clientKey;
-        this.locale = configuration.locale || 'en_us';
+        this.locale = convertAdyenLocaleToFastlaneLocale(configuration.locale || 'en-US');
     }
 
     public async initialize(): Promise<FastlaneSDK> {
@@ -34,7 +35,7 @@ class FastlaneSDK {
         return this;
     }
 
-    public async authenticate(email: string): Promise<AuthenticatedCustomerResult> {
+    public async authenticate(email: string): Promise<FastlaneAuthenticatedCustomerResult> {
         const { customerContextId } = await this.fastlaneSdk.identity.lookupCustomerByEmail(email);
 
         if (customerContextId) {
@@ -47,12 +48,12 @@ class FastlaneSDK {
         }
     }
 
-    public showShippingAddressSelector(): Promise<ShowShippingAddressSelectorResult> {
+    public showShippingAddressSelector(): Promise<FastlaneShippingAddressSelectorResult> {
         if (!this.fastlaneSdk.profile) return null;
         return this.fastlaneSdk.profile.showShippingAddressSelector();
     }
 
-    public async mountWatermark(container: HTMLElement | string, options?) {
+    public async mountWatermark(container: HTMLElement | string, options = { includeAdditionalInfo: false }): Promise<void> {
         const component = await this.fastlaneSdk.FastlaneWatermarkComponent(options);
         component.render(container);
     }
@@ -61,7 +62,7 @@ class FastlaneSDK {
         return requestFastlaneToken(this.checkoutShopperURL, this.clientKey);
     }
 
-    private async fetchSdk(clientToken: string, clientId: string) {
+    private async fetchSdk(clientToken: string, clientId: string): Promise<void> {
         const url = `https://www.paypal.com/sdk/js?client-id=${clientId}&components=buttons,fastlane`;
         const script = new Script(url, 'body', {}, { sdkClientToken: clientToken });
 
@@ -72,7 +73,7 @@ class FastlaneSDK {
         }
     }
 
-    private async initializeFastlane() {
+    private async initializeFastlane(): Promise<void> {
         this.fastlaneSdk = await window.paypal.Fastlane({});
         this.fastlaneSdk.setLocale(this.locale);
     }

diff --git a/packages/lib/src/components/PayPalFastlane/services/request-fastlane-token.ts b/packages/lib/src/components/PayPalFastlane/services/request-fastlane-token.ts
@@ -15,7 +15,7 @@ function requestFastlaneToken(url: string, clientKey: string): Promise<FastlaneT
         id: '2747bd08-783a-45c6-902b-3efbda5497b7',
         clientId: 'AXy9hIzWB6h_LjZUHjHmsbsiicSIbL4GKOrcgomEedVjduUinIU4C2llxkW5p0OG0zTNgviYFceaXEnj',
         merchantId: 'C3UCKQHMW4948',
-        value: 'eyJraWQiOiJkMTA2ZTUwNjkzOWYxMWVlYjlkMTAyNDJhYzEyMDAwMiIsInR5cCI6IkpXVCIsImFsZyI6IkVTMjU2In0.eyJpc3MiOiJodHRwczovL2FwaS5zYW5kYm94LnBheXBhbC5jb20iLCJhdWQiOlsiaHR0cHM6Ly9hcGkuYnJhaW50cmVlZ2F0ZXdheS5jb20iLCJjaGVja291dC1wbGF5Z3JvdW5kLm5ldGxpZnkuYXBwIl0sInN1YiI6Ik02VE5BRVNaNUZHTk4iLCJhY3IiOlsiY2xpZW50Il0sInNjb3BlIjpbIkJyYWludHJlZTpWYXVsdCJdLCJvcHRpb25zIjp7fSwiYXoiOiJjY2cxOC5zbGMiLCJleHRlcm5hbF9pZCI6WyJQYXlQYWw6QzNVQ0tRSE1XNDk0OCIsIkJyYWludHJlZTozZGI4aG5rdHJ0bXpzMmd0Il0sImV4cCI6MTczMDg5Nzk4NSwiaWF0IjoxNzMwODk3MDg1LCJqdGkiOiJVMkFBS05JdjBkbjZxaWtEQUMweVctdmJKSWhra3VPYTVSQ2MwMlJNdXVMWWVFUUQ2NE85UjJ1eWtRcFpucjZPanhyT3I3OVdLd0ZadGtwdi1LdUZiWHBHWkxFLU9uUEJEXzdUb1Z0RzI2dE9rM2ZNeHEyaVNna2RUd3UzRk5wQSJ9.p2lVHnIM29OsQQq4Q6N5UeHAs3AWDWs9OZ0DmYG-aMng_Dul6j1zdK4T5WoyWMu8eoM3DXHuRSQfZvD4eUPjLA',
+        value: 'eyJraWQiOiJkMTA2ZTUwNjkzOWYxMWVlYjlkMTAyNDJhYzEyMDAwMiIsInR5cCI6IkpXVCIsImFsZyI6IkVTMjU2In0.eyJpc3MiOiJodHRwczovL2FwaS5zYW5kYm94LnBheXBhbC5jb20iLCJhdWQiOlsiaHR0cHM6Ly9hcGkuYnJhaW50cmVlZ2F0ZXdheS5jb20iLCJjaGVja291dC1wbGF5Z3JvdW5kLm5ldGxpZnkuYXBwIl0sInN1YiI6Ik02VE5BRVNaNUZHTk4iLCJhY3IiOlsiY2xpZW50Il0sInNjb3BlIjpbIkJyYWludHJlZTpWYXVsdCJdLCJvcHRpb25zIjp7fSwiYXoiOiJjY2cxOC5zbGMiLCJleHRlcm5hbF9pZCI6WyJQYXlQYWw6QzNVQ0tRSE1XNDk0OCIsIkJyYWludHJlZTozZGI4aG5rdHJ0bXpzMmd0Il0sImV4cCI6MTczMDk4ODQ5MSwiaWF0IjoxNzMwOTg3NTkxLCJqdGkiOiJVMkFBTHJkX3lOb3lMM2tqNzNYZndXTWtFdHBDdFA4aklJZkhtV1dMRFJ1UlYyR0U2M1A2b2RDNmZoTjF3Nmg1YUhQWFFUWFkzTzhuZG16ZmtuZmJJWC1zRGx0R2FRamt0RDd2cVVya2NNZkxlbEFIa1ZYSVptZkpNb0JVNWtRZyJ9.sRKQXrQjRn2CEOIeBwXsspd8Z7axRdMYjY95ga6mfYemcQrKZxBe3ASDCuWrCpbUvm04VTxXs80bR4V7hDAHoQ',
         expiresAt: '2024-11-01T13:34:01.804+00:00'
     });
     // return httpPost<FastlaneTokenData>({ loadingContext: url, path, errorLevel: 'fatal' });

diff --git a/packages/lib/src/components/PayPalFastlane/types.ts b/packages/lib/src/components/PayPalFastlane/types.ts
@@ -12,19 +12,16 @@ export interface FastlaneOptions {}
 export interface Fastlane {
     identity: {
         lookupCustomerByEmail: (email: string) => Promise<{ customerContextId: string }>;
-        triggerAuthenticationFlow: (customerContextId: string, options?: AuthenticationFlowOptions) => Promise<AuthenticatedCustomerResult>;
+        triggerAuthenticationFlow: (customerContextId: string, options?: AuthenticationFlowOptions) => Promise<FastlaneAuthenticatedCustomerResult>;
     };
     profile: {
-        showShippingAddressSelector: () => Promise<ShowShippingAddressSelectorResult>;
+        showShippingAddressSelector: () => Promise<FastlaneShippingAddressSelectorResult>;
         showCardSelector: () => ShowCardSelectorResult;
     };
     setLocale: (locale: string) => void;
-    FastlaneWatermarkComponent: (options: FastlaneWatermarkOptions) => Promise<FastlaneWatermarkComponent>;
+    FastlaneWatermarkComponent: (options: { includeAdditionalInfo: boolean }) => Promise<FastlaneWatermarkComponent>;
 }
 
-interface FastlaneWatermarkOptions {
-    includeAdditionalInfo: boolean;
-}
 interface FastlaneWatermarkComponent {
     render: (container) => null;
 }
@@ -36,10 +33,6 @@ interface AuthenticationFlowOptions {}
 /**
  * The AuthenticatedCustomerResult object type is returned from the identity.triggerAuthenticationFlow() call.
  */
-export interface AuthenticatedCustomerResult {
-    authenticationState: 'succeeded' | 'failed' | 'canceled' | 'not_found';
-    profileData: FastlaneProfile;
-}
 interface FastlaneProfile {
     name: Name;
     shippingAddress: FastlaneShipping;
@@ -89,15 +82,19 @@ interface CardPaymentSource {
     billingAddress: FastlaneAddress;
 }
 
+interface ShowCardSelectorResult {
+    selectionChanged: boolean;
+    selectedCard: PaymentToken;
+}
+
 /**
- * Profile method reference types
+ * External types
  */
-export interface ShowShippingAddressSelectorResult {
+export interface FastlaneShippingAddressSelectorResult {
     selectionChanged: boolean;
     selectedAddress: FastlaneShipping;
 }
-
-interface ShowCardSelectorResult {
-    selectionChanged: boolean;
-    selectedCard: PaymentToken;
+export interface FastlaneAuthenticatedCustomerResult {
+    authenticationState: 'succeeded' | 'failed' | 'canceled' | 'not_found';
+    profileData: FastlaneProfile;
 }
diff --git a/packages/lib/src/components/PayPalFastlane/utils.ts b/packages/lib/src/components/PayPalFastlane/utils.ts
@@ -0,0 +1,3 @@
+export function convertAdyenLocaleToFastlaneLocale(locale: string) {
+    return locale.replace('-', '_').toLowerCase();
+}
diff --git a/packages/lib/storybook/stories/wallets/Fastlane/FastlaneInSinglePageApp.tsx b/packages/lib/storybook/stories/wallets/Fastlane/FastlaneInSinglePageApp.tsx
@@ -1,5 +1,6 @@
 import { h } from 'preact';
 import { useState } from 'preact/hooks';
+import { GlobalStoryProps } from '../../types';
 
 import Dropin from '../../../../src/components/Dropin';
 import Card from '../../../../src/components/Card';
@@ -8,9 +9,6 @@ import PayPal from '../../../../src/components/PayPal';
 import { Checkout } from '../../Checkout';
 import { ComponentContainer } from '../../ComponentContainer';
 import { GuestShopperForm } from './components/GuestShopperForm';
-import './components/FastlaneStory.scss';
-
-import { GlobalStoryProps } from '../../types';
 
 interface Props {
     checkoutConfig: GlobalStoryProps;
@@ -19,7 +17,8 @@ interface Props {
 export const FastlaneInSinglePageApp = ({ checkoutConfig }: Props) => {
     const [fastlaneData, setFastlaneData] = useState<any>(null);
 
-    const handleOnCheckoutStep = (fastlaneSdk, fastlaneData) => {
+    const handleOnCheckoutStep = (fastlaneSdk, fastlaneData, shippingAddress) => {
+        console.log('FastlaneInSinglePageApp', fastlaneSdk, fastlaneData, shippingAddress);
         setFastlaneData(fastlaneData);
     };
 

diff --git a/packages/lib/storybook/stories/wallets/Fastlane/components/CollectEmail.tsx b/packages/lib/storybook/stories/wallets/Fastlane/components/CollectEmail.tsx
@@ -2,11 +2,11 @@ import { h } from 'preact';
 import { useEffect, useState } from 'preact/hooks';
 
 import FastlaneSDK from '../../../../../src/components/PayPalFastlane/FastlaneSDK';
-import type { AuthenticatedCustomerResult } from '../../../../../src/components/PayPalFastlane/types';
+import type { FastlaneAuthenticatedCustomerResult } from '../../../../../src/components/PayPalFastlane/types';
 
 interface CollectEmailProps {
     fastlaneSdk: FastlaneSDK;
-    onFastlaneLookup: (authResult: AuthenticatedCustomerResult) => void;
+    onFastlaneLookup: (authResult: FastlaneAuthenticatedCustomerResult) => void;
     onEditEmail: () => void;
 }
 
@@ -15,9 +15,7 @@ export const CollectEmail = ({ fastlaneSdk, onFastlaneLookup, onEditEmail }: Col
     const [viewOnly, setViewOnly] = useState<boolean>(false);
 
     const renderWatermark = async () => {
-        await fastlaneSdk.mountWatermark('#watermark-container', {
-            includeAdditionalInfo: true
-        });
+        await fastlaneSdk.mountWatermark('#watermark-container');
     };
 
     const handleEmailInput = event => {
@@ -40,7 +38,7 @@ export const CollectEmail = ({ fastlaneSdk, onFastlaneLookup, onEditEmail }: Col
     }, []);
 
     return (
-        <>
+        <section>
             <div className="section_header">
                 <h3>Customer</h3>
                 {viewOnly && (
@@ -53,7 +51,7 @@ export const CollectEmail = ({ fastlaneSdk, onFastlaneLookup, onEditEmail }: Col
                 <div className="email-input-wrapper">
                     <input
                         disabled={viewOnly}
-                        className="email-input"
+                        className="input-field"
                         value={email}
                         name="email"
                         type="email"
@@ -71,6 +69,6 @@ export const CollectEmail = ({ fastlaneSdk, onFastlaneLookup, onEditEmail }: Col
                 )}
             </div>
             {!viewOnly && <button onClick={() => setEmail('[email protected]')}>Fill in valid email</button>}
-        </>
+        </section>
     );
 };
diff --git a/packages/lib/storybook/stories/wallets/Fastlane/components/FastlaneStory.scss b/packages/lib/storybook/stories/wallets/Fastlane/components/FastlaneStory.scss
@@ -11,7 +11,7 @@
   align-self: end;
 }
 
-.email-input {
+.input-field {
   background-color: white;
   border: #aab2bc 1px solid;
   border-radius: 4px;
@@ -23,6 +23,17 @@
   margin-right: 12px;
 }
 
+.shipping-section {
+  .input-field {
+    margin-bottom: 12px;
+  }
+
+  .shipping-checkbox {
+    margin-bottom: 20px;
+  }
+}
+
+
 .form-container {
   background-color: white;
   padding: 20px;
@@ -39,6 +50,7 @@
   border: 1px solid #2d7fec;
   background-color: #0551b5;
   color: white;
+  margin-bottom: 12px;
 }
 
 .button:hover {

diff --git a/packages/lib/storybook/stories/wallets/Fastlane/components/GuestShopperForm.tsx b/packages/lib/storybook/stories/wallets/Fastlane/components/GuestShopperForm.tsx
@@ -1,22 +1,22 @@
 import { h } from 'preact';
 import { useEffect, useState } from 'preact/hooks';
-import './FastlaneStory.scss';
-
-import initializeFastlane from '../../../../../src/components/PayPalFastlane/initializeFastlane';
-import FastlaneSDK from '../../../../../src/components/PayPalFastlane/FastlaneSDK';
-import type { AuthenticatedCustomerResult } from '../../../../../src/components/PayPalFastlane/types';
 
 import { CollectEmail } from './CollectEmail';
 import { Shipping } from './Shipping';
 import { ShippingWithFastlane } from './ShippingWithFastlane';
+import './FastlaneStory.scss';
+
+import initializeFastlane from '../../../../../src/components/PayPalFastlane/initializeFastlane';
+import FastlaneSDK from '../../../../../src/components/PayPalFastlane/FastlaneSDK';
+import type { FastlaneAuthenticatedCustomerResult } from '../../../../../src/components/PayPalFastlane/types';
 
 interface GuestShopperFormProps {
-    onCheckoutStep(fastlane: FastlaneSDK, data: any): void;
+    onCheckoutStep(fastlane: FastlaneSDK, fastlaneData: any, shippingAddress: any): void;
 }
 
 export const GuestShopperForm = ({ onCheckoutStep }: GuestShopperFormProps) => {
     const [fastlane, setFastlane] = useState<FastlaneSDK>(null);
-    const [fastlaneLookupData, setFastlaneLookupData] = useState<AuthenticatedCustomerResult>(null);
+    const [fastlaneLookupData, setFastlaneLookupData] = useState<FastlaneAuthenticatedCustomerResult>(null);
 
     const loadFastlane = async () => {
         const sdk = await initializeFastlane({
@@ -31,12 +31,11 @@ export const GuestShopperForm = ({ onCheckoutStep }: GuestShopperFormProps) => {
     };
 
     const handleFastlaneLookup = data => {
-        console.log(data);
         setFastlaneLookupData(data);
     };
 
-    const handleOnCheckoutClick = shippingAddress => {
-        onCheckoutStep(fastlane, fastlaneLookupData);
+    const handleOnCheckoutClick = (shippingAddress?: any) => {
+        onCheckoutStep(fastlane, fastlaneLookupData, shippingAddress);
     };
 
     useEffect(() => {
@@ -51,6 +50,7 @@ export const GuestShopperForm = ({ onCheckoutStep }: GuestShopperFormProps) => {
 
     return (
         <div className="form-container">
+            <h2>Merchant Checkout Page</h2>
             <CollectEmail fastlaneSdk={fastlane} onFastlaneLookup={handleFastlaneLookup} onEditEmail={handleOnEditEmail} />
             <hr />