intial wiring

guardian · Oct 13, 2023 · d676ad2 · d676ad2
1 parent 26ab393
commit d676ad2
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 4 deletions.
diff --git a/packages/modules/src/modules/epics/ContributionsEpic.stories.tsx b/packages/modules/src/modules/epics/ContributionsEpic.stories.tsx
@@ -303,6 +303,39 @@ WithChoiceCardsAndSignInLink.args = {
     },
 };
 
+export const WithChoiceCardsAndApplePay = Template.bind({});
+WithChoiceCardsAndApplePay.args = {
+    variant: {
+        ...props.variant,
+        name: 'V1_APPLE_PAY',
+        showChoiceCards: true,
+        showApplePay: true,
+        choiceCardAmounts: {
+            testName: 'Storybook_test',
+            variantName: 'Control',
+            defaultContributionType: 'MONTHLY',
+            displayContributionType: ['ONE_OFF', 'MONTHLY', 'ANNUAL'],
+            amountsCardData: {
+                ONE_OFF: {
+                    amounts: [5, 10, 15, 20],
+                    defaultAmount: 5,
+                    hideChooseYourAmount: false,
+                },
+                MONTHLY: {
+                    amounts: [6, 12],
+                    defaultAmount: 12,
+                    hideChooseYourAmount: true,
+                },
+                ANNUAL: {
+                    amounts: [50, 100, 150, 200],
+                    defaultAmount: 100,
+                    hideChooseYourAmount: true,
+                },
+            },
+        },
+    },
+};
+
 export const WithSignInLink = Template.bind({});
 WithSignInLink.args = {
     variant: {

diff --git a/packages/modules/src/modules/epics/ContributionsEpic.tsx b/packages/modules/src/modules/epics/ContributionsEpic.tsx
@@ -250,7 +250,7 @@ const ContributionsEpic: ReactComponent<EpicProps> = ({
     hasConsentForArticleCount,
     stage,
 }: EpicProps) => {
-    const { image, tickerSettings, showChoiceCards, choiceCardAmounts } = variant;
+    const { image, tickerSettings, showChoiceCards, choiceCardAmounts, showApplePay } = variant;
 
     const [choiceCardSelection, setChoiceCardSelection] = useState<
         ChoiceCardSelection | undefined
@@ -427,6 +427,7 @@ const ContributionsEpic: ReactComponent<EpicProps> = ({
                     onReminderOpen={onReminderOpen}
                     fetchEmail={fetchEmail}
                     submitComponentEvent={submitComponentEvent}
+                    showApplePay={showApplePay}
                     showChoiceCards={showChoiceCards}
                     amountsTestName={choiceCardAmounts?.testName}
                     amountsVariantName={choiceCardAmounts?.variantName}

diff --git a/packages/modules/src/modules/epics/ContributionsEpicButtons.tsx b/packages/modules/src/modules/epics/ContributionsEpicButtons.tsx
@@ -44,19 +44,21 @@ const PrimaryCtaButton = ({
     amountsTestName,
     amountsVariantName,
     numArticles,
+    showApplePay,
 }: {
     cta?: Cta;
     tracking: Tracking;
     countryCode?: string;
     amountsTestName?: string;
     amountsVariantName?: string;
     numArticles: number;
+    showApplePay?: boolean;
 }): JSX.Element | null => {
     if (!cta) {
         return null;
     }
 
-    const buttonText = cta.text || 'Support The Guardian';
+    const buttonText = showApplePay ? 'Support With ' : cta.text || 'Support The Guardian';
     const baseUrl = cta.baseUrl || 'https://support.theguardian.com/contribute';
     const urlWithRegionAndTracking = addRegionIdAndTrackingParamsToSupportUrl(
         baseUrl,
@@ -85,12 +87,15 @@ const SecondaryCtaButton = ({
     tracking,
     numArticles,
     countryCode,
+    showApplePay,
 }: {
     cta: Cta;
     tracking: Tracking;
     countryCode?: string;
     numArticles: number;
+    showApplePay?: boolean;
 }): JSX.Element | null => {
+    const buttonText = showApplePay ? 'Support With ' : cta.text;
     const url = addRegionIdAndTrackingParamsToSupportUrl(
         cta.baseUrl,
         tracking,
@@ -101,7 +106,7 @@ const SecondaryCtaButton = ({
     return (
         <div css={buttonMargins}>
             <Button onClickAction={url} showArrow priority="secondary">
-                {cta.text}
+                {buttonText}
             </Button>
         </div>
     );
@@ -120,6 +125,7 @@ interface ContributionsEpicButtonsProps {
     amountsVariantName?: string;
     choiceCardSelection?: ChoiceCardSelection;
     numArticles: number;
+    showApplePay?: boolean;
 }
 
 export const ContributionsEpicButtons = ({
@@ -135,6 +141,7 @@ export const ContributionsEpicButtons = ({
     amountsTestName,
     amountsVariantName,
     numArticles,
+    showApplePay,
 }: ContributionsEpicButtonsProps): JSX.Element | null => {
     const [hasBeenSeen, setNode] = useHasBeenSeen({}, true);
     const { cta, secondaryCta, showReminderFields } = variant;
@@ -183,6 +190,7 @@ export const ContributionsEpicButtons = ({
                         amountsTestName={amountsTestName}
                         amountsVariantName={amountsVariantName}
                         countryCode={countryCode}
+                        showApplePay={showApplePay}
                     />
 
                     {secondaryCta?.type === SecondaryCtaType.Custom &&
@@ -193,6 +201,7 @@ export const ContributionsEpicButtons = ({
                             tracking={tracking}
                             countryCode={countryCode}
                             numArticles={numArticles}
+                            showApplePay={showApplePay}
                         />
                     ) : (
                         secondaryCta?.type === SecondaryCtaType.ContributionsReminder &&
@@ -206,7 +215,7 @@ export const ContributionsEpicButtons = ({
                         )
                     )}
 
-                    {hasSupportCta && (
+                    {hasSupportCta && !showApplePay && (
                         <img
                             width={422}
                             height={60}

diff --git a/packages/modules/src/modules/epics/ContributionsEpicCtas.tsx b/packages/modules/src/modules/epics/ContributionsEpicCtas.tsx
@@ -10,6 +10,7 @@ interface OnReminderOpen {
 }
 
 type ContributionsEpicCtasProps = EpicProps & {
+    showApplePay?: boolean;
     showChoiceCards?: boolean;
     choiceCardSelection?: ChoiceCardSelection;
     amountsTestName?: string;
@@ -24,6 +25,7 @@ export const ContributionsEpicCtas: ReactComponent<ContributionsEpicCtasProps> =
     submitComponentEvent,
     onReminderOpen,
     fetchEmail,
+    showApplePay,
     showChoiceCards,
     choiceCardSelection,
     amountsTestName,
@@ -69,6 +71,7 @@ export const ContributionsEpicCtas: ReactComponent<ContributionsEpicCtasProps> =
                 submitComponentEvent={submitComponentEvent}
                 isReminderActive={isReminderActive}
                 isSignedIn={Boolean(fetchedEmail)}
+                showApplePay={showApplePay}
                 showChoiceCards={showChoiceCards}
                 choiceCardSelection={choiceCardSelection}
                 amountsTestName={amountsTestName}

diff --git a/packages/shared/src/types/abTests/epic.ts b/packages/shared/src/types/abTests/epic.ts
@@ -63,6 +63,7 @@ export interface EpicVariant extends Variant {
     // with lower priority.
     maxViews?: MaxViews;
     showSignInLink?: boolean;
+    showApplePay?: boolean;
 }
 
 export type ContributionFrequency = 'ONE_OFF' | 'MONTHLY' | 'ANNUAL';