Skip to content

Use destination field in choice cards #14621

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tomrf1 merged 5 commits into from
Oct 8, 2025
Merged

Use destination field in choice cards #14621

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e57f8d0
Use destination field in choice cards
tomrf1 Oct 6, 2025
60093d7
fix storybook
tomrf1 Oct 6, 2025
f580cb6
fix storybook
tomrf1 Oct 6, 2025
c2a4da9
remove dead code, unit tests
tomrf1 Oct 8, 2025
7f9d3aa
test names
tomrf1 Oct 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion dotcom-rendering/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
"@guardian/shimport": "1.0.2",
"@guardian/source": "11.3.0",
"@guardian/source-development-kitchen": "18.1.1",
"@guardian/support-dotcom-components": "7.8.1",
"@guardian/support-dotcom-components": "7.9.0",
"@guardian/tsconfig": "0.2.0",
"@playwright/test": "1.52.0",
"@sentry/browser": "10.10.0",
Expand Down
1 change: 1 addition & 0 deletions dotcom-rendering/src/components/marketing/banners/common/BannerWrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -338,6 +338,7 @@ const withBannerData =
tracking,
submitComponentEvent,
design,
promoCodes,
};

return (
Expand Down
1 change: 1 addition & 0 deletions dotcom-rendering/src/components/marketing/banners/common/types.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,4 +80,5 @@ export interface BannerRenderProps {
tracking: Tracking;
submitComponentEvent?: (componentEvent: ComponentEvent) => void;
design?: ConfigurableDesign;
promoCodes?: string[];
Copy link
Member Author

@tomrf1 tomrf1 Oct 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we now have to pass this field through to the banner component for use by enrichSupportUrl

}
17 changes: 12 additions & 5 deletions dotcom-rendering/src/components/marketing/banners/designableBanner/DesignableBanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ import {
} from '../../../../lib/useMatchMedia';
import { getChoiceCards } from '../../lib/choiceCards';
import type { ReactComponent } from '../../lib/ReactComponent';
import { getChoiceCardUrl } from '../../lib/tracking';
import { enrichSupportUrl, getChoiceCardUrl } from '../../lib/tracking';
import { ThreeTierChoiceCards } from '../../shared/ThreeTierChoiceCards';
import { bannerWrapper, validatedBannerWrapper } from '../common/BannerWrapper';
import type { BannerRenderProps } from '../common/types';
Expand Down Expand Up @@ -132,6 +132,8 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
submitComponentEvent,
tracking,
design,
countryCode,
promoCodes,
}: BannerRenderProps): JSX.Element => {
const isTabletOrAbove = useMatchMedia(removeMediaRulePrefix(from.tablet));

Expand Down Expand Up @@ -480,10 +482,15 @@ const DesignableBanner: ReactComponent<BannerRenderProps> = ({
)}
<div css={styles.ctaContainer(isCollapsed)}>
<LinkButton
href={getChoiceCardUrl(
Copy link
Member Author

@tomrf1 tomrf1 Oct 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Previously we were not adding tracking params to the url if the choice card had destinationUrl set. This is fixed here, because we now call enrichSupportUrl as well

selectedChoiceCard,
mainOrMobileContent.primaryCta.ctaUrl,
)}
href={enrichSupportUrl({
baseUrl:
getChoiceCardUrl(
selectedChoiceCard,
),
tracking,
promoCodes: promoCodes ?? [],
countryCode,
})}
onClick={onCtaClick}
priority="primary"
cssOverrides={styles.linkButtonStyles}
Expand Down
36 changes: 4 additions & 32 deletions ...ng/src/components/marketing/banners/designableBanner/stories/DesignableBanner.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@ import type { Meta, StoryObj } from '@storybook/react';
import lzstring from 'lz-string';
import {
choiceCardsSettings,
choiceCardsWithDestinationUrl,
choiceCardsWithDestinationUrlTwoCards,
choiceCardsWithMixedDestinations,
} from '../../../lib/storybook';
import {
contentNoHeading,
Expand Down Expand Up @@ -286,7 +285,7 @@ export const NoChoiceCardOrImage: Story = {
},
};

export const WithDestinationUrlAllCards: Story = {
export const WithMixedDestinations: Story = {
name: 'With destinationUrl on all choice cards',
args: {
...meta.args,
Expand All @@ -302,39 +301,12 @@ export const WithDestinationUrlAllCards: Story = {
abTestVariant: 'THREE_TIER_CHOICE_CARDS',
},
choiceCardAmounts: regularChoiceCardAmounts,
choiceCardsSettings: choiceCardsWithDestinationUrl,
choiceCardsSettings: choiceCardsWithMixedDestinations,
},
parameters: {
docs: {
description: {
story: 'All choice cards have a destinationUrl configured. The banner should use these custom URLs instead of constructing URLs with product parameters.',
},
},
},
};

export const WithDestinationUrlTwoCards: Story = {
name: 'With destinationUrl in two choice cards',
args: {
...meta.args,
design: {
...design,
visual: {
kind: 'ChoiceCards',
buttonColour: stringToHexColour('E5E5E5'),
},
},
tracking: {
...tracking,
abTestVariant: 'THREE_TIER_CHOICE_CARDS',
},
choiceCardAmounts: regularChoiceCardAmounts,
choiceCardsSettings: choiceCardsWithDestinationUrlTwoCards,
},
parameters: {
docs: {
description: {
story: 'All choice cards have a destinationUrl configured. The banner should use these custom URLs instead of constructing URLs with product parameters.',
story: 'Two out of three choice cards have destination set to checkout.',
},
},
},
Expand Down
8 changes: 4 additions & 4 deletions dotcom-rendering/src/components/marketing/epics/ContributionsEpic.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import lzstring from 'lz-string';
import React from 'react';
import {
choiceCardsSettings,
choiceCardsWithDestinationUrl,
choiceCardsWithMixedDestinations,
} from '../lib/storybook';
import { ContributionsEpicUnvalidated as ContributionsEpic } from './ContributionsEpic';
import { props } from './utils/storybook';
Expand Down Expand Up @@ -385,16 +385,16 @@ export const WithParagraphLinks: Story = {
},
};

export const WithThreeTierChoiceCardsAndCustomDestinationUrl: Story = {
name: 'ContributionsEpic with three tier choice cards and custom destination URL',
export const WithThreeTierChoiceCardsAndMixedDestinations: Story = {
name: 'ContributionsEpic with three tier choice cards and mixed destinations',
args: {
...meta.args,
variant: {
...props.variant,
name: 'THREE_TIER_CHOICE_CARDS',
secondaryCta: undefined,
showChoiceCards: true,
choiceCardsSettings: choiceCardsWithDestinationUrl,
choiceCardsSettings: choiceCardsWithMixedDestinations,
},
},
};
2 changes: 1 addition & 1 deletion dotcom-rendering/src/components/marketing/epics/ctas/ContributionsEpicButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,7 @@ export const ContributionsEpicButtons = ({

return {
text: cta.text,
baseUrl: getChoiceCardUrl(threeTierSelectedChoiceCard, cta.baseUrl),
baseUrl: getChoiceCardUrl(threeTierSelectedChoiceCard),
};
};

Expand Down
66 changes: 4 additions & 62 deletions dotcom-rendering/src/components/marketing/lib/storybook.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export const choiceCardsSettings: ChoiceCardsSettings = {
],
};

export const choiceCardsWithDestinationUrl: ChoiceCardsSettings = {
export const choiceCardsWithMixedDestinations: ChoiceCardsSettings = {
choiceCards: [
{
product: {
Expand All @@ -106,8 +106,7 @@ export const choiceCardsWithDestinationUrl: ChoiceCardsSettings = {
},
label: 'Support £5/month',
isDefault: false,
destinationUrl:
'https://support.theguardian.com/contribute/monthly?custom-destination=contribution',
destination: 'LandingPage',
benefits: [
{
copy: 'Give to the Guardian every month with Support',
Expand All @@ -121,8 +120,7 @@ export const choiceCardsWithDestinationUrl: ChoiceCardsSettings = {
},
label: 'Support £12/month',
isDefault: true,
destinationUrl:
'https://support.theguardian.com/subscribe/monthly?custom-destination=supporter-plus',
destination: 'Checkout',
benefitsLabel:
'Unlock <strong>All-access digital</strong> benefits:',
benefits: [
Expand All @@ -142,63 +140,7 @@ export const choiceCardsWithDestinationUrl: ChoiceCardsSettings = {
},
label: 'One-time support',
isDefault: false,
destinationUrl:
'https://support.theguardian.com/contribute/one-time?custom-destination=one-off',
benefits: [
{
copy: 'Support the Guardian with a one-time contribution',
},
],
},
],
};

export const choiceCardsWithDestinationUrlTwoCards: ChoiceCardsSettings = {
choiceCards: [
{
product: {
supportTier: 'Contribution',
ratePlan: 'Monthly',
},
label: 'Support £5/month',
isDefault: false,
destinationUrl: null,
benefits: [
{
copy: 'Give to the Guardian every month with Support',
},
],
},
{
product: {
supportTier: 'SupporterPlus',
ratePlan: 'Monthly',
},
label: 'Support £12/month',
isDefault: true,
destinationUrl:
'https://support.theguardian.com/subscribe/monthly?custom-destination=supporter-plus',
benefitsLabel:
'Unlock <strong>All-access digital</strong> benefits:',
benefits: [
{
copy: '<strong>Unlimited</strong> access to the Guardian app',
},
{ copy: 'Unlimited access to our new Feast App' },
{ copy: 'Ad-free reading on all your devices' },
{
copy: 'Exclusive newsletters for subscribers',
},
],
},
{
product: {
supportTier: 'OneOff',
},
label: 'One-time support',
isDefault: false,
destinationUrl:
'https://support.theguardian.com/contribute/one-time?custom-destination=one-off',
destination: 'Checkout',
benefits: [
{
copy: 'Support the Guardian with a one-time contribution',
Expand Down
122 changes: 97 additions & 25 deletions dotcom-rendering/src/components/marketing/lib/tracking.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,5 @@
import type { Tracking } from '@guardian/support-dotcom-components/dist/shared/types';
import { addChoiceCardsParams, enrichSupportUrl } from './tracking';

describe('addChoiceCardsParams', () => {
Copy link
Member Author

@tomrf1 tomrf1 Oct 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removed tests for an unused function

it('adds choice cards params to url without existing querystring', () => {
const result = addChoiceCardsParams(
'https://support.theguardian.com/contribute',
'ONE_OFF',
5,
);
expect(result).toEqual(
'https://support.theguardian.com/contribute?selected-contribution-type=ONE_OFF&selected-amount=5',
);
});

it('adds choice cards params to url with existing querystring', () => {
const result = addChoiceCardsParams(
'https://support.theguardian.com/contribute?test=test',
'ONE_OFF',
5,
);
expect(result).toEqual(
'https://support.theguardian.com/contribute?test=test&selected-contribution-type=ONE_OFF&selected-amount=5',
);
});
});
import { enrichSupportUrl, getChoiceCardUrl } from './tracking';

describe('enrichSupportUrl', () => {
const tracking: Tracking = {
Expand Down Expand Up @@ -81,3 +57,99 @@ describe('enrichSupportUrl', () => {
);
});
});

describe('getChoiceCardUrl', () => {
// One-time
it('builds landing page url for one-time choice', () => {
const url = getChoiceCardUrl({
benefits: [],
isDefault: false,
label: 'label',
product: {
supportTier: 'OneOff',
},
destination: 'LandingPage',
});
expect(url).toEqual(
'https://support.theguardian.com/contribute?oneTime',
);
});
it('builds checkout page url for one-time choice', () => {
const url = getChoiceCardUrl({
benefits: [],
isDefault: false,
label: 'label',
product: {
supportTier: 'OneOff',
},
destination: 'Checkout',
});
expect(url).toEqual(
'https://support.theguardian.com/one-time-checkout',
);
});

// Recurring contribution
it('builds landing page url for one-time choice', () => {
const url = getChoiceCardUrl({
benefits: [],
isDefault: false,
label: 'label',
product: {
supportTier: 'Contribution',
ratePlan: 'Monthly',
},
destination: 'LandingPage',
});
expect(url).toEqual(
'https://support.theguardian.com/contribute?product=Contribution&ratePlan=Monthly',
);
});
it('builds checkout page url for one-time choice', () => {
const url = getChoiceCardUrl({
benefits: [],
isDefault: false,
label: 'label',
product: {
supportTier: 'Contribution',
ratePlan: 'Monthly',
},
destination: 'Checkout',
});
expect(url).toEqual(
'https://support.theguardian.com/checkout?product=Contribution&ratePlan=Monthly',
);
});

// SupporterPlus
it('builds landing page url for one-time choice', () => {
const url = getChoiceCardUrl({
benefits: [],
isDefault: false,
label: 'label',
product: {
supportTier: 'SupporterPlus',
ratePlan: 'Annual',
},
destination: 'LandingPage',
});
expect(url).toEqual(
'https://support.theguardian.com/contribute?product=SupporterPlus&ratePlan=Annual',
);
});
it('builds checkout page url for one-time choice', () => {
const url = getChoiceCardUrl({
benefits: [],
isDefault: false,
label: 'label',
product: {
supportTier: 'SupporterPlus',
ratePlan: 'Annual',
},
destination: 'Checkout',
});
expect(url).toEqual(
'https://support.theguardian.com/checkout?product=SupporterPlus&ratePlan=Annual',
);
});
});
Loading
Loading