Added CustomCard story to Storybook

packages/lib/src/components/CustomCard/CustomCard.tsx

@@ -6,10 +6,9 @@ import collectBrowserInfo from '../../utils/browserInfo';
 import triggerBinLookUp from '../internal/SecuredFields/binLookup/triggerBinLookUp';
 import { CbObjOnBinLookup, CbObjOnFocus } from '../internal/SecuredFields/lib/types';
 import { BrandObject } from '../Card/types';
-import { getCardImageUrl } from '../internal/SecuredFields/utils';
+import { getCardImageUrl, fieldTypeToSnakeCase } from '../internal/SecuredFields/utils';
 import { TxVariants } from '../tx-variants';
 import { CustomCardConfiguration } from './types';
-import { fieldTypeToSnakeCase } from '../internal/SecuredFields/utils';
 import { ANALYTICS_FOCUS_STR, ANALYTICS_UNFOCUS_STR } from '../../core/Analytics/constants';
 import { SendAnalyticsObject } from '../../core/Analytics/types';
 
@@ -47,7 +46,8 @@ export class CustomCard extends UIElement<CustomCardConfiguration> {
                 ...this.state.data,
                 ...(sfBrand && { brand: sfBrand })
             },
-            browserInfo: this.browserInfo
+            browserInfo: this.browserInfo,
+            origin: !!window && window.location.origin
         };
     }
 

packages/lib/src/components/internal/SecuredFields/lib/constants.ts

@@ -17,7 +17,7 @@ export const ENCRYPTED_SECURITY_CODE_4_DIGITS = 'encryptedSecurityCode4digits';
 
 export const GIFT_CARD = 'giftcard';
 
-export const SF_VERSION = '5.2.1';
+export const SF_VERSION = '5.3.0';
 
 export const DEFAULT_CARD_GROUP_TYPES = ['amex', 'mc', 'visa'];
 

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

@@ -0,0 +1,40 @@
+import { CustomCardStoryConfiguration, MetaConfiguration } from '../types';
+import { CustomCardConfiguration } from '../../../src/components/CustomCard/types';
+import './customCardHelpers/customCard.style.scss';
+import { styles, setFocus, onBrand, onConfigSuccess, onBinLookup, onChange, setCCErrors } from './customCardHelpers/customCard.config';
+import { CustomCardHelper } from './customCardHelpers/CustomCardHelper';
+
+type customCardStory = CustomCardStoryConfiguration<CustomCardConfiguration>;
+
+const meta: MetaConfiguration<CustomCardConfiguration> = {
+    title: 'Cards/Custom Card'
+};
+
+export const Default: customCardStory = {
+    render: args => {
+        return <CustomCardHelper contextArgs={args} />;
+    },
+    args: {
+        componentConfiguration: {
+            brands: ['mc', 'visa', 'amex', 'bcmc', 'maestro', 'cartebancaire', 'synchrony_plcc'],
+            styles,
+            onConfigSuccess,
+            onBrand,
+            // onBinValue: cbObj => {
+            //     if (cbObj.encryptedBin) {
+            //         console.log('onBinValue', cbObj);
+            //     }
+            // },
+            onFocus: setFocus,
+            onBinLookup,
+            onChange,
+            onValidationError: errors => {
+                errors.forEach(setCCErrors);
+            }
+        },
+        useSessions: false,
+        force3DS2Redirect: false
+    }
+};
+
+export default meta;

packages/lib/storybook/stories/cards/customCardHelpers/CustomCardHelper.tsx

@@ -0,0 +1,113 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { createAdvancedFlowCheckout } from '../../../helpers/create-advanced-checkout';
+import { createSessionsCheckout } from '../../../helpers/create-sessions-checkout';
+import { CustomCard } from '../../../../src';
+import { setUpUtils, createPayButton } from './customCard.utils';
+
+export const CustomCardHelper = ({ contextArgs }) => {
+    const container = useRef(null);
+    const checkout = useRef(null);
+    const [element, setElement] = useState(null);
+    const [errorMessage, setErrorMessage] = useState(null);
+
+    const createCheckout = async () => {
+        const { useSessions, showPayButton, countryCode, shopperLocale, amount } = contextArgs;
+
+        checkout.current = useSessions
+            ? await createSessionsCheckout({ showPayButton, countryCode, shopperLocale, amount })
+            : await createAdvancedFlowCheckout({
+                  showPayButton,
+                  countryCode,
+                  shopperLocale,
+                  amount
+              });
+
+        const customCard = new CustomCard(checkout.current, { ...contextArgs.componentConfiguration });
+
+        setElement(customCard);
+
+        // Custom card specific
+        globalThis.customCard = customCard; // customCard..config & customCard.utils access the component through Storybook's globalThis
+        globalThis.parent.window['customCard'] = customCard; // expose to top level window, so a user can access window.customCard
+
+        setUpUtils(contextArgs, container);
+        globalThis.payBtn = createPayButton('.secured-fields', customCard, 'customcard');
+    };
+
+    useEffect(() => {
+        void createCheckout();
+    }, [contextArgs]);
+
+    useEffect(() => {
+        if (element?.isAvailable) {
+            element
+                .isAvailable()
+                .then(() => {
+                    element.mount(container.current);
+                })
+                .catch(error => {
+                    setErrorMessage(error.toString());
+                });
+        } else if (element) {
+            element.mount(container.current);
+        }
+    }, [element]);
+
+    return (
+        <div>
+            {errorMessage ? (
+                <div>{errorMessage}</div>
+            ) : (
+                <div id={'topLevelHolder'}>
+                    <div
+                        ref={container}
+                        id="component-root"
+                        className="component-wrapper secured-fields"
+                        // @ts-ignore just hiding for better UX experience
+                        style={'display:none;'}
+                    >
+                        <span className="pm-image">
+                            <img
+                                className="pm-image-1"
+                                width="40"
+                                src="https://checkoutshopper-test.adyen.com/checkoutshopper/images/logos/nocard.svg"
+                                alt="card"
+                            />
+                        </span>
+                        <span className="pm-image-dual">
+                            <img className="pm-image-dual-1" width="40" alt="" />
+                            <img className="pm-image-dual-2" width="40" alt="" />
+                        </span>
+                        <div className="pm-form-label">
+                            <span className="pm-form-label__text">Card number:</span>
+                            <span className="pm-input-field" data-cse="encryptedCardNumber" data-uid="adyen-checkout-encryptedCardNumber-1"></span>
+                            <span className="pm-form-label__error-text">Please enter a valid credit card number</span>
+                        </div>
+                        <div className="pm-form-label pm-form-label--exp-month">
+                            <span className="pm-form-label__text">Expiry month:</span>
+                            <span className="pm-input-field" data-cse="encryptedExpiryMonth" data-uid="adyen-checkout-encryptedExpiryMonth-2"></span>
+                            <span className="pm-form-label__error-text">Date error text</span>
+                        </div>
+                        <div className="pm-form-label pm-form-label--exp-year">
+                            <span className="pm-form-label__text">Expiry year:</span>
+                            <span className="pm-input-field" data-cse="encryptedExpiryYear" data-uid="adyen-checkout-encryptedExpiryYear-3"></span>
+                            <span className="pm-form-label__error-text">Date error text</span>
+                        </div>
+                        <div className="pm-form-label pm-form-label--cvc">
+                            <span className="pm-form-label__text">CVV/CVC:</span>
+                            <span className="pm-input-field" data-cse="encryptedSecurityCode"></span>
+                            <span className="pm-form-label__error-text">CVC Error text</span>
+                        </div>
+                    </div>
+                    <div className="card-input__spinner__holder">
+                        <div className="card-input__spinner card-input__spinner--active">
+                            <div className="adyen-checkout__spinner__wrapper ">
+                                <div className="adyen-checkout__spinner adyen-checkout__spinner--large"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};