Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@jamesgorrie
jamesgorrie committed Sep 18, 2024
1 parent a32877d commit ae37cc4
Show file tree
Hide file tree
Showing 6 changed files with 95 additions and 73 deletions.
12 changes: 6 additions & 6 deletions dotcom-rendering/src/components/marketing/epics/ThreeTierChoiceCardData.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import type { ChoiceInfo } from './ThreeTierChoiceCards';

export const ChoiceCardTestData_REGULAR: ChoiceInfo[] = [
{
supportTier: 'support',
supportTier: 'Contribution',
label: (amount: number, currencySymbol: string): string =>
`Support ${currencySymbol}${amount}/month`,
benefitsLabel: 'Support',
Expand All @@ -12,7 +12,7 @@ export const ChoiceCardTestData_REGULAR: ChoiceInfo[] = [
recommended: false,
},
{
supportTier: 'allAccess',
supportTier: 'SupporterPlus',
label: (amount: number, currencySymbol: string): string =>
`Support ${currencySymbol}${amount}/month`,
benefitsLabel: 'All-access digital',
Expand All @@ -25,7 +25,7 @@ export const ChoiceCardTestData_REGULAR: ChoiceInfo[] = [
recommended: true,
},
{
supportTier: 'other',
supportTier: 'OneOff',
label: (): string => 'Support with another amount',
benefitsLabel: undefined,
benefits: () => ['We welcome support of any size, any time'],
Expand All @@ -35,7 +35,7 @@ export const ChoiceCardTestData_REGULAR: ChoiceInfo[] = [

export const ChoiceCardTestData_US: ChoiceInfo[] = [
{
supportTier: 'support',
supportTier: 'Contribution',
label: (amount: number, currencySymbol: string): string =>
`Support ${currencySymbol}${amount}/month`,
benefitsLabel: 'Support',
Expand All @@ -45,7 +45,7 @@ export const ChoiceCardTestData_US: ChoiceInfo[] = [
recommended: false,
},
{
supportTier: 'allAccess',
supportTier: 'SupporterPlus',
label: (amount: number, currencySymbol: string): string =>
`Support ${currencySymbol}${amount}/month`,
benefitsLabel: 'All-access digital',
Expand All @@ -58,7 +58,7 @@ export const ChoiceCardTestData_US: ChoiceInfo[] = [
recommended: true,
},
{
supportTier: 'other',
supportTier: 'OneOff',
label: (amount: number, currencySymbol: string): string =>
`Support once from just ${currencySymbol}1`,
benefitsLabel: undefined,
Expand Down
16 changes: 8 additions & 8 deletions dotcom-rendering/src/components/marketing/epics/ThreeTierChoiceCards.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,8 +140,8 @@ const RecommendedPill = () => {
};

type ThreeTierChoiceCardsProps = {
selectedAmount: number;
setSelectedAmount: Dispatch<SetStateAction<number>>;
selectedProduct: SupportTier;
setSelectedProduct: Dispatch<SetStateAction<SupportTier>>;
countryCode?: string;
variantOfChoiceCard: string;
};
Expand All @@ -157,8 +157,8 @@ const getChoiceCardData = (choiceCardVariant: string): ChoiceInfo[] => {

export const ThreeTierChoiceCards = ({
countryCode,
selectedAmount,
setSelectedAmount,
selectedProduct,
setSelectedProduct,
variantOfChoiceCard,
}: ThreeTierChoiceCardsProps) => {
const currencySymbol = getLocalCurrencySymbol(countryCode);
Expand All @@ -185,7 +185,7 @@ export const ThreeTierChoiceCards = ({
supportTier,
countryGroupId,
);
const selected = selectedAmount === choiceAmount;
const selected = selectedProduct === supportTier;

return (
<div
Expand Down Expand Up @@ -219,9 +219,9 @@ export const ThreeTierChoiceCards = ({
) : undefined
}
checked={selected}
onChange={() =>
setSelectedAmount(choiceAmount)
}
onChange={() => {
setSelectedProduct(supportTier);
}}
/>
</div>
</div>
Expand Down
48 changes: 31 additions & 17 deletions dotcom-rendering/src/components/marketing/epics/ctas/ContributionsEpicButtons.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
import type { SerializedStyles } from '@emotion/react';
import { css } from '@emotion/react';
import type { OphanComponentEvent } from '@guardian/libs';
import { isUndefined } from '@guardian/libs';
import { space } from '@guardian/source/foundations';
import { SecondaryCtaType } from '@guardian/support-dotcom-components';
import type { EpicVariant } from '@guardian/support-dotcom-components/dist/shared/src/types/abTests/epic';
Expand All @@ -19,6 +18,7 @@ import { useIsInView } from '../../../../lib/useIsInView';
import { hasSetReminder } from '../../lib/reminders';
import {
addChoiceCardsParams,
addChoiceCardsProductParams,
addRegionIdAndTrackingParamsToSupportUrl,
isSupportUrl,
} from '../../lib/tracking';
Expand All @@ -27,6 +27,7 @@ import {
OPHAN_COMPONENT_EVENT_CTAS_VIEW,
OPHAN_COMPONENT_EVENT_REMINDER_OPEN,
} from '../utils/ophan';
import type { SupportTier } from '../utils/threeTierChoiceCardAmounts';
import { EpicButton } from './EpicButton';

const paymentImageStyles = css`
Expand Down Expand Up @@ -138,10 +139,10 @@ interface ContributionsEpicButtonsProps {
submitComponentEvent?: (event: OphanComponentEvent) => void;
isReminderActive: boolean;
isSignedIn: boolean;
threeTierChoiceCardSelectedProduct: SupportTier;
showChoiceCards?: boolean;
amountsTestName?: string;
amountsVariantName?: string;
threeTierChoiceCardSelectedAmount?: number;
numArticles: number;
variantOfChoiceCard?: string;
}
Expand All @@ -155,7 +156,7 @@ export const ContributionsEpicButtons = ({
isReminderActive,
isSignedIn,
showChoiceCards,
threeTierChoiceCardSelectedAmount,
threeTierChoiceCardSelectedProduct,
amountsTestName,
amountsVariantName,
numArticles,
Expand Down Expand Up @@ -184,39 +185,52 @@ export const ContributionsEpicButtons = ({
const getChoiceCardCta = (cta: Cta): Cta => {
if (
showChoiceCards &&
variantOfChoiceCard === 'US_THREE_TIER_CHOICE_CARDS' &&
!isUndefined(threeTierChoiceCardSelectedAmount)
variantOfChoiceCard === 'US_THREE_TIER_CHOICE_CARDS'
) {
if (threeTierChoiceCardSelectedAmount === 0) {
if (threeTierChoiceCardSelectedProduct === 'OneOff') {
/** OneOff payments are not supported by the generic checkout yet */
return {
text: cta.text,
baseUrl: addChoiceCardsParams(
'https://support.theguardian.com/contribute/checkout?selected-contribution-type=one_off',
'https://support.theguardian.com/contribute/checkout',
'ONE_OFF',
threeTierChoiceCardSelectedAmount,
),
};
}

return {
text: cta.text,
baseUrl: addChoiceCardsParams(
'https://support.theguardian.com/contribute/checkout',
'MONTHLY',
threeTierChoiceCardSelectedAmount,
baseUrl: addChoiceCardsProductParams(
'https://support.theguardian.com/checkout',
threeTierChoiceCardSelectedProduct,
'Monthly',
),
};
}

/** Not in the US - direct taffic to the landing page */
if (
showChoiceCards &&
variantOfChoiceCard === 'THREE_TIER_CHOICE_CARDS' &&
!isUndefined(threeTierChoiceCardSelectedAmount)
variantOfChoiceCard === 'THREE_TIER_CHOICE_CARDS'
) {
if (threeTierChoiceCardSelectedProduct === 'OneOff') {
/**
* OneOff payments are not supported by the generic checkout yet.
* We also have no way of highlighting to a contributor that "OneOff"
* was selected, so we just send them to the homepage.
*/
return {
text: cta.text,
baseUrl: 'https://support.theguardian.com/contribute',
};
}

return {
text: cta.text,
baseUrl: addChoiceCardsParams(
baseUrl: addChoiceCardsProductParams(
cta.baseUrl,
'MONTHLY',
threeTierChoiceCardSelectedAmount,
threeTierChoiceCardSelectedProduct,
'Monthly',
),
};
}
Expand Down
21 changes: 12 additions & 9 deletions dotcom-rendering/src/components/marketing/epics/ctas/ContributionsEpicCtasContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import type { EpicProps } from '@guardian/support-dotcom-components/dist/shared/
import { useState } from 'react';
import type { ReactComponent } from '../../lib/ReactComponent';
import { ThreeTierChoiceCards } from '../ThreeTierChoiceCards';
import { getDefaultThreeTierAmount } from '../utils/threeTierChoiceCardAmounts';
import type { SupportTier } from '../utils/threeTierChoiceCardAmounts';
import { ContributionsEpicButtons } from './ContributionsEpicButtons';
import { ContributionsEpicReminder } from './ContributionsEpicReminder';

Expand Down Expand Up @@ -43,11 +43,14 @@ export const ContributionsEpicCtasContainer: ReactComponent<Props> = ({
const showChoiceCards =
variant.showChoiceCards && !isNonVatCompliantCountry;

const defaultThreeTierAmount = getDefaultThreeTierAmount(countryCode);
/**
* This corresponds to the products in the Product API
* @see https://product-catalog.guardianapis.com/product-catalog.json
*/
const [
threeTierChoiceCardSelectedAmount,
setThreeTierChoiceCardSelectedAmount,
] = useState<number>(defaultThreeTierAmount);
threeTierChoiceCardSelectedProduct,
setThreeTierChoiceCardSelectedProduct,
] = useState<SupportTier>('SupporterPlus');

const variantOfChoiceCard =
countryCode === 'US'
Expand All @@ -59,8 +62,8 @@ export const ContributionsEpicCtasContainer: ReactComponent<Props> = ({
{showChoiceCards && (
<ThreeTierChoiceCards
countryCode={countryCode}
selectedAmount={threeTierChoiceCardSelectedAmount}
setSelectedAmount={setThreeTierChoiceCardSelectedAmount}
selectedProduct={threeTierChoiceCardSelectedProduct}
setSelectedProduct={setThreeTierChoiceCardSelectedProduct}
variantOfChoiceCard={variantOfChoiceCard}
/>
)}
Expand Down Expand Up @@ -96,8 +99,8 @@ export const ContributionsEpicCtasContainer: ReactComponent<Props> = ({
isReminderActive={isReminderActive}
isSignedIn={Boolean(fetchedEmail)}
showChoiceCards={showChoiceCards}
threeTierChoiceCardSelectedAmount={
threeTierChoiceCardSelectedAmount
threeTierChoiceCardSelectedProduct={
threeTierChoiceCardSelectedProduct
}
amountsTestName={amountsTestName}
amountsVariantName={amountsVariantName}
Expand Down
54 changes: 23 additions & 31 deletions dotcom-rendering/src/components/marketing/epics/utils/threeTierChoiceCardAmounts.ts
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,42 @@
import {
countryCodeToCountryGroupId,
type CountryGroupId,
} from '@guardian/support-dotcom-components';
import { type CountryGroupId } from '@guardian/support-dotcom-components';

export type SupportTier = 'support' | 'allAccess' | 'other';
export type SupportTier = 'Contribution' | 'SupporterPlus' | 'OneOff';

// ToDo: fetch this in a way that isn't hardcoded
export const threeTierChoiceCardAmounts = {
GBPCountries: {
support: 4,
allAccess: 12,
other: 0,
Contribution: 4,
SupporterPlus: 12,
OneOff: 0,
},
UnitedStates: {
support: 5,
allAccess: 15,
other: 0,
Contribution: 5,
SupporterPlus: 15,
OneOff: 0,
},
AUDCountries: {
support: 10,
allAccess: 20,
other: 0,
Contribution: 10,
SupporterPlus: 20,
OneOff: 0,
},
EURCountries: {
support: 4,
allAccess: 12,
other: 0,
Contribution: 4,
SupporterPlus: 12,
OneOff: 0,
},
NZDCountries: {
support: 10,
allAccess: 20,
other: 0,
Contribution: 10,
SupporterPlus: 20,
OneOff: 0,
},
Canada: {
support: 5,
allAccess: 15,
other: 0,
Contribution: 5,
SupporterPlus: 15,
OneOff: 0,
},
International: {
support: 3,
allAccess: 15,
other: 0,
Contribution: 3,
SupporterPlus: 15,
OneOff: 0,
},
} as const satisfies Record<CountryGroupId, Record<SupportTier, number>>;

export function getDefaultThreeTierAmount(countryCode?: string): number {
const countryGroupId = countryCodeToCountryGroupId(countryCode);
return threeTierChoiceCardAmounts[countryGroupId].allAccess;
}
17 changes: 15 additions & 2 deletions dotcom-rendering/src/components/marketing/lib/tracking.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -253,9 +253,22 @@ export const addProfileTrackingParams = (
export const addChoiceCardsParams = (
url: string,
frequency: ContributionFrequency,
amount: number | 'other',
amount?: number | 'other',
): string => {
const newParams = `selected-contribution-type=${frequency}&selected-amount=${amount}`;
const newParams = `selected-contribution-type=${frequency}${
amount !== undefined ? `&selected-amount=${amount}` : ''
}`;
const alreadyHasQueryString = url.includes('?');
return `${url}${alreadyHasQueryString ? '&' : '?'}${newParams}`;
};

export const addChoiceCardsProductParams = (
url: string,
product: string,
ratePlan: string,
): string => {
const newParams = `product=${product}&ratePlan=${ratePlan}`;

const alreadyHasQueryString = url.includes('?');
return `${url}${alreadyHasQueryString ? '&' : '?'}${newParams}`;
};
Expand Down

0 comments on commit ae37cc4

Please sign in to comment.