From 6a28354c66cd2ec8580c73c5bfc365aa97052f6f Mon Sep 17 00:00:00 2001 From: nicholas Date: Wed, 28 Aug 2024 13:56:51 +0200 Subject: [PATCH] Replacing CustomCardContainer.tsx with CustomCardHelper.tsx --- .../storybook/stories/CustomCardContainer.tsx | 69 ----------- .../stories/cards/CustomCard.stories.tsx | 21 +--- .../customCardHelpers/CustomCardHelper.tsx | 113 ++++++++++++++++++ .../customCardHelpers/customCard.config.js | 36 +++--- 4 files changed, 136 insertions(+), 103 deletions(-) delete mode 100644 packages/lib/storybook/stories/CustomCardContainer.tsx create mode 100644 packages/lib/storybook/stories/cards/customCardHelpers/CustomCardHelper.tsx diff --git a/packages/lib/storybook/stories/CustomCardContainer.tsx b/packages/lib/storybook/stories/CustomCardContainer.tsx deleted file mode 100644 index d5a5eec957..0000000000 --- a/packages/lib/storybook/stories/CustomCardContainer.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { useEffect, useRef } from 'preact/hooks'; - -import { setUpUtils, createPayButton } from './cards/customCardHelpers/customCard.utils'; - -export const CustomCardContainer = ({ element, contextArgs }) => { - const container = useRef(null); - - useEffect(() => { - if (!element) return; - - element.mount(container.current); - - setUpUtils(contextArgs, container); - - globalThis.payBtn = createPayButton('.secured-fields', globalThis.customCard, 'customcard'); - }, [element]); - - return ( -
-
- - card - - - - - -
- Card number: - - Please enter a valid credit card number -
-
- Expiry month: - - Date error text -
-
- Expiry year: - - Date error text -
-
- CVV/CVC: - - CVC Error text -
-
-
-
-
-
-
-
-
-
- ); -}; diff --git a/packages/lib/storybook/stories/cards/CustomCard.stories.tsx b/packages/lib/storybook/stories/cards/CustomCard.stories.tsx index b7bdfdad58..49e3f308c7 100644 --- a/packages/lib/storybook/stories/cards/CustomCard.stories.tsx +++ b/packages/lib/storybook/stories/cards/CustomCard.stories.tsx @@ -1,10 +1,8 @@ -import { MetaConfiguration, PaymentMethodStoryProps, StoryConfiguration } from '../types'; -import { getStoryContextCheckout } from '../../utils/get-story-context-checkout'; +import { MetaConfiguration, StoryConfiguration } from '../types'; import { CustomCardConfiguration } from '../../../src/components/CustomCard/types'; -import { CustomCard } from '../../../src'; -import { CustomCardContainer } from '../CustomCardContainer'; import './customCardHelpers/customCard.style.scss'; import { styles, setFocus, onBrand, onConfigSuccess, onBinLookup, onChange, setCCErrors } from './customCardHelpers/customCard.config'; +import { CustomCardHelper } from './customCardHelpers/CustomCardHelper'; type customCardStory = StoryConfiguration; @@ -12,19 +10,10 @@ const meta: MetaConfiguration = { title: 'Cards/Custom Card' }; -const createComponent = (args: PaymentMethodStoryProps, context) => { - const { componentConfiguration } = args; - const checkout = getStoryContextCheckout(context); - const customCard = new CustomCard(checkout, componentConfiguration); - - globalThis.customCard = customCard; - globalThis.parent.window['customCard'] = customCard; // expose to top level window, so a user can access window.customCard - - return ; -}; - export const Default: customCardStory = { - render: createComponent, + render: args => { + return ; + }, args: { componentConfiguration: { brands: ['mc', 'visa', 'amex', 'bcmc', 'maestro', 'cartebancaire', 'synchrony_plcc'], diff --git a/packages/lib/storybook/stories/cards/customCardHelpers/CustomCardHelper.tsx b/packages/lib/storybook/stories/cards/customCardHelpers/CustomCardHelper.tsx new file mode 100644 index 0000000000..b7723119e6 --- /dev/null +++ b/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 ( +
+ {errorMessage ? ( +
{errorMessage}
+ ) : ( +
+
+ + card + + + + + +
+ Card number: + + Please enter a valid credit card number +
+
+ Expiry month: + + Date error text +
+
+ Expiry year: + + Date error text +
+
+ CVV/CVC: + + CVC Error text +
+
+
+
+
+
+
+
+
+
+ )} +
+ ); +}; diff --git a/packages/lib/storybook/stories/cards/customCardHelpers/customCard.config.js b/packages/lib/storybook/stories/cards/customCardHelpers/customCard.config.js index 9d74c54607..e47b2b88a0 100644 --- a/packages/lib/storybook/stories/cards/customCardHelpers/customCard.config.js +++ b/packages/lib/storybook/stories/cards/customCardHelpers/customCard.config.js @@ -69,23 +69,23 @@ export function onConfigSuccess(pCallbackObj) { globalThis.customCard.setFocusOn('encryptedCardNumber'); }, 100); - // window.customCard.updateStyles({ - // base: { - // color: '#000', - //// fontSize: '18px', - //// lineHeight: '18px' - // }, - // error: { - // color: 'orange' - // }, - // validated: { - // color: 'blue', - // fontWeight: 'bold' - // }, - // placeholder: { - // color: 'green' - // } - // }); + // globalThis.customCard.updateStyles({ + // base: { + // color: '#000' + // // fontSize: '18px', + // // lineHeight: '18px' + // }, + // error: { + // color: 'orange' + // }, + // validated: { + // color: 'blue', + // fontWeight: 'bold' + // }, + // placeholder: { + // color: 'green' + // } + // }); } export function setCCErrors(pCallbackObj) { @@ -194,7 +194,7 @@ export function onBrand(pCallbackObj) { } function dualBrandListener(e) { - window.customCard.dualBrandingChangeHandler(e); + globalThis.customCard.dualBrandingChangeHandler(e); } function resetDualBranding(rootNode) {