Adding config props to stories

packages/lib/src/components/Card/types.ts

@@ -249,7 +249,7 @@ export interface CardConfiguration extends UIElementProps {
      *
      * - merchant set config option
      */
-    minimumExpiryDate?: string[];
+    minimumExpiryDate?: string;
 
     /**
      * When in Dropin this is the name shown in the paymentMethods list

packages/lib/storybook/config/paymentsConfig.ts

@@ -12,7 +12,21 @@ const paymentsConfig = {
     additionalData: {
         // Force response code. See https://docs.adyen.com/development-resources/test-cards/result-code-testing/adyen-response-codes
         // RequestedTestAcquirerResponseCode: 2,
-        allow3DS2: true
+        // allow3DS2: true,
+        /**
+         * To force threeds2InMDFlow:
+         *  comment out "allow3DS2" & comment in the following 2 lines:
+         */
+        // threeDS2InMDFlow: true,
+        // executeThreeD: true
+    },
+    // Ready for v69+ - lose any additionalData 3DS2 related lines e.g. allow3DS2: true
+    authenticationData: {
+        attemptAuthentication: 'always',
+        // To force MDFlow: comment out below, and just keep line above
+        threeDSRequestData: {
+            nativeThreeDS: 'preferred'
+        }
     },
     shopperEmail: 'test-shopper@storytel.com',
     shopperIP: '172.30.0.1',

packages/lib/storybook/helpers/create-sessions-checkout.ts

@@ -22,7 +22,7 @@ async function createSessionsCheckout({ showPayButton, countryCode, shopperLocal
 
     const checkout = await AdyenCheckout({
         clientKey: process.env.CLIENT_KEY,
-        environment: process.env.CLIENT_ENV,
+        environment: process.env.CLIENT_ENV as any,
         session,
         showPayButton,
 

packages/lib/storybook/stories/cards/Bancontact.stories.tsx

@@ -23,7 +23,8 @@ export const Default: BancontactStory = {
     args: {
         componentConfiguration: {
             _disableClickToPay: true
-        }
+        },
+        countryCode: 'BE'
     }
 };
 

packages/lib/storybook/stories/cards/Card.stories.tsx

@@ -3,6 +3,7 @@ import { getStoryContextCheckout } from '../../utils/get-story-context-checkout'
 import { CardConfiguration } from '../../../src/components/Card/types';
 import { Card } from '../../../src';
 import { Container } from '../Container';
+import { searchFunctionExample } from '../../../../playground/src/utils';
 
 type CardStory = StoryConfiguration<CardConfiguration>;
 
@@ -22,7 +23,35 @@ export const Default: CardStory = {
     render: createComponent,
     args: {
         componentConfiguration: {
-            _disableClickToPay: true
+            _disableClickToPay: true,
+            autoFocus: true,
+            // brands: ['mc'],
+            // brandsConfiguration: { visa: { icon: 'http://localhost:3000/nocard.svg', name: 'altVisa' } },
+            challengeWindowSize: '02',
+            // configuration: {socialSecurityNumberMode: 'auto'}
+            // data: {
+            //     holderName: 'J. Smith'
+            // },
+            disableIOSArrowKeys: false,
+            // disclaimerMessage,
+            // doBinLookup: false,
+            enableStoreDetails: false,
+            // exposeExpiryDate: true,
+            forceCompat: false,
+            hasHolderName: false,
+            holderNameRequired: false,
+            hideCVC: false,
+            // keypadFix: false,
+            legacyInputMode: false,
+            maskSecurityCode: false,
+            minimumExpiryDate: null, // e.g. '11/24'
+            // name: '', // Affects Dropin only
+            placeholders: {}, // e.g. { holderName: 'B Bob' }
+            positionHolderNameOnTop: false,
+            showBrandIcon: true,
+            showContextualElement: true
+            // showPayButton: false,
+            // styles: { base: { fontWeight: 300 } },
         }
     }
 };
@@ -34,6 +63,7 @@ export const WithAVS: CardStory = {
             _disableClickToPay: true,
             billingAddressRequired: true,
             billingAddressAllowedCountries: ['US', 'CA', 'GB'],
+            // billingAddressRequiredFields: ['postalCode', 'country'],
             data: {
                 billingAddress: {
                     street: 'Virginia Street',
@@ -59,6 +89,17 @@ export const WithPartialAVS: CardStory = {
     }
 };
 
+export const WithAVSAddressLookup: CardStory = {
+    render: createComponent,
+    args: {
+        componentConfiguration: {
+            _disableClickToPay: true,
+            billingAddressRequired: true,
+            onAddressLookup: searchFunctionExample
+        }
+    }
+};
+
 export const WithInstallments: CardStory = {
     render: createComponent,
     args: {
@@ -82,6 +123,7 @@ export const KCP: CardStory = {
     render: createComponent,
     args: {
         componentConfiguration: {
+            ...{ brands: ['mc', 'visa', 'amex', 'bcmc', 'maestro', 'korean_local_card'] },
             _disableClickToPay: true,
             // Set koreanAuthenticationRequired AND countryCode so KCP fields show at start
             // Just set koreanAuthenticationRequired if KCP fields should only show if korean_local_card entered

packages/lib/storybook/stories/dropin/Dropin.stories.tsx

@@ -18,6 +18,7 @@ const meta: MetaConfiguration<DropinConfiguration> = {
         componentConfiguration: {
             showRadioButton: false,
             instantPaymentTypes: ['googlepay'],
+            showRemovePaymentMethodButton: false,
             paymentMethodsConfiguration: {
                 googlepay: {
                     buttonType: 'plain'

packages/lib/storybook/stories/issuer-lists/Dotpay.stories.tsx → packages/lib/storybook/stories/issuer-lists/OnlineBankingPL.stories.tsx

@@ -2,20 +2,20 @@ import { MetaConfiguration, PaymentMethodStoryProps, StoryConfiguration } from '
 import { getStoryContextCheckout } from '../../utils/get-story-context-checkout';
 import { Container } from '../Container';
 import { IssuerListConfiguration } from '../../../src/components/helpers/IssuerListContainer/types';
-import { Dotpay } from '../../../src';
+import { OnlineBankingPL } from '../../../src';
 
-type DotpayStory = StoryConfiguration<IssuerListConfiguration>;
+type OnlineBankingPLStory = StoryConfiguration<IssuerListConfiguration>;
 
 const meta: MetaConfiguration<IssuerListConfiguration> = {
-    title: 'IssuerList/Dotpay'
+    title: 'IssuerList/OnlineBankingPL'
 };
 
-export const Default: DotpayStory = {
+export const Default: OnlineBankingPLStory = {
     render: (args: PaymentMethodStoryProps<IssuerListConfiguration>, context) => {
         const { componentConfiguration } = args;
         const checkout = getStoryContextCheckout(context);
-        const dotpay = new Dotpay(checkout, componentConfiguration);
-        return <Container element={dotpay} />;
+        const onlineBankingPL = new OnlineBankingPL(checkout, componentConfiguration);
+        return <Container element={onlineBankingPL} />;
     },
     args: {
         countryCode: 'PL'