diff --git a/packages/modules/src/modules/epics/ContributionsEpic.stories.tsx b/packages/modules/src/modules/epics/ContributionsEpic.stories.tsx index 40706ca49..618129a6f 100644 --- 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 index b89630765..4524eb844 100644 --- a/packages/modules/src/modules/epics/ContributionsEpic.tsx +++ b/packages/modules/src/modules/epics/ContributionsEpic.tsx @@ -250,7 +250,7 @@ const ContributionsEpic: ReactComponent = ({ 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 = ({ 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 index 2713010f9..6af311362 100644 --- a/packages/modules/src/modules/epics/ContributionsEpicButtons.tsx +++ b/packages/modules/src/modules/epics/ContributionsEpicButtons.tsx @@ -44,6 +44,7 @@ const PrimaryCtaButton = ({ amountsTestName, amountsVariantName, numArticles, + showApplePay, }: { cta?: Cta; tracking: Tracking; @@ -51,12 +52,13 @@ const PrimaryCtaButton = ({ 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 (
); @@ -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 && ( = submitComponentEvent, onReminderOpen, fetchEmail, + showApplePay, showChoiceCards, choiceCardSelection, amountsTestName, @@ -69,6 +71,7 @@ export const ContributionsEpicCtas: ReactComponent = 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 index f283cc61e..6528d5fcf 100644 --- 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';