reminder shown below applePay below desktop size

guardian · Oct 17, 2023 · a187bff · a187bff
1 parent 9dde5a1
commit a187bff
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 7 deletions.
diff --git a/packages/modules/src/modules/epics/Button.tsx b/packages/modules/src/modules/epics/Button.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from '@emotion/react';
+import { SerializedStyles, css } from '@emotion/react';
 import { palette } from '@guardian/src-foundations';
 import { ThemeProvider } from '@emotion/react';
 import { Button as DSButton, LinkButton } from '@guardian/src-button';
@@ -36,6 +36,7 @@ type Props = {
     priority?: 'primary' | 'secondary';
     showArrow?: boolean;
     isTertiary?: boolean;
+    cssOverrides?: SerializedStyles;
 };
 
 // Overrides for tertiary button
@@ -56,6 +57,7 @@ export const Button: ReactComponent<Props> = (allProps: Props) => {
         showArrow = false,
         priority = 'primary',
         isTertiary,
+        cssOverrides,
         ...props
     } = allProps;
 
@@ -72,7 +74,7 @@ export const Button: ReactComponent<Props> = (allProps: Props) => {
                     target="_blank"
                     rel="noopener noreferrer"
                     priority={isTertiary ? 'primary' : priority}
-                    css={isTertiary ? tertiaryButtonOverrides : undefined}
+                    css={isTertiary ? [tertiaryButtonOverrides, cssOverrides] : cssOverrides}
                     {...props}
                 >
                     {children}
@@ -87,7 +89,7 @@ export const Button: ReactComponent<Props> = (allProps: Props) => {
                 icon={showArrow ? <SvgArrowRightStraight /> : undefined}
                 onClick={(): void => onClickAction()}
                 priority={isTertiary ? 'primary' : priority}
-                css={isTertiary ? tertiaryButtonOverrides : undefined}
+                css={isTertiary ? [tertiaryButtonOverrides, cssOverrides] : cssOverrides}
                 {...props}
             >
                 {children}

diff --git a/packages/modules/src/modules/epics/ContributionsEpic.stories.tsx b/packages/modules/src/modules/epics/ContributionsEpic.stories.tsx
@@ -303,6 +303,47 @@ WithChoiceCardsAndSignInLink.args = {
     },
 };
 
+export const WithReminderChoiceCardsAndApplePay = Template.bind({});
+WithReminderChoiceCardsAndApplePay.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,
+                },
+            },
+        },
+        secondaryCta: {
+            type: SecondaryCtaType.ContributionsReminder,
+        },
+        showReminderFields: {
+            reminderCta: 'Remind me in May',
+            reminderPeriod: '2020-05-01',
+            reminderLabel: 'May',
+        },
+    },
+};
+
 export const WithChoiceCardsAndApplePay = Template.bind({});
 WithChoiceCardsAndApplePay.args = {
     variant: {

diff --git a/packages/modules/src/modules/epics/ContributionsEpic.tsx b/packages/modules/src/modules/epics/ContributionsEpic.tsx
@@ -251,9 +251,13 @@ const ContributionsEpic: ReactComponent<EpicProps> = ({
     hasConsentForArticleCount,
     stage,
 }: EpicProps) => {
-    const { image, tickerSettings, showChoiceCards, choiceCardAmounts, showApplePay } = variant;
+    const { image, tickerSettings, showChoiceCards, choiceCardAmounts, showApplePay, name } =
+        variant;
 
-    const showValidApplePay = showApplePay && isValidApplePaySession();
+    /** Pre-defined storybook Epic variant name with either
+    1. showApplePay overide (storybook)
+    2. valid ApplePay browser https session  */
+    const showValidApplePay = name === 'V1_APPLE_PAY' && (showApplePay || isValidApplePaySession());
 
     const [choiceCardSelection, setChoiceCardSelection] = useState<
         ChoiceCardSelection | undefined

diff --git a/packages/modules/src/modules/epics/ContributionsEpicButtons.tsx b/packages/modules/src/modules/epics/ContributionsEpicButtons.tsx
@@ -48,6 +48,14 @@ const buttonMarginStyles = (showApplePay?: boolean): SerializedStyles => css`
         : `margin: ${space[1]}px ${space[2]}px ${space[1]}px 0;`};
 `;
 
+const reminderDesktopHideStyle = (showApplePay?: boolean): SerializedStyles => css`
+    ${showApplePay ? `${from.desktop} {display: none;}` : ``};
+`;
+
+const buttonFullWidthStyle = (showApplePay?: boolean): SerializedStyles => css`
+    ${showApplePay ? `width: 100%;justify-content: center;` : ``};
+`;
+
 const PrimaryCtaButton = ({
     cta,
     tracking,
@@ -223,9 +231,19 @@ export const ContributionsEpicButtons = ({
                         countryCode={countryCode}
                         showApplePay={showApplePay}
                     />
+                    {showApplePay && (
+                        <SecondaryCtaButton
+                            cta={getCta(cta)}
+                            tracking={tracking}
+                            countryCode={countryCode}
+                            numArticles={numArticles}
+                            showApplePay={showApplePay}
+                        />
+                    )}
 
                     {secondaryCta?.type === SecondaryCtaType.Custom &&
                     secondaryCta.cta.baseUrl &&
+                    !showApplePay &&
                     secondaryCta.cta.text ? (
                         <SecondaryCtaButton
                             cta={secondaryCta.cta}
@@ -238,8 +256,17 @@ export const ContributionsEpicButtons = ({
                         secondaryCta?.type === SecondaryCtaType.ContributionsReminder &&
                         showReminderFields &&
                         !hasSetReminder() && (
-                            <div css={buttonMarginStyles(showApplePay)}>
-                                <Button onClickAction={openReminder} isTertiary>
+                            <div
+                                css={[
+                                    buttonMarginStyles(showApplePay),
+                                    reminderDesktopHideStyle(showApplePay),
+                                ]}
+                            >
+                                <Button
+                                    onClickAction={openReminder}
+                                    isTertiary
+                                    cssOverrides={buttonFullWidthStyle(showApplePay)}
+                                >
                                     {showReminderFields.reminderCta}
                                 </Button>
                             </div>