Merge pull request #6743 from guardian/pd/guardian-adlite-checkout-re…

…visions

Guardian Ad-Lite: Checkout Revisions

support-frontend/assets/components/orderSummary/contributionsOrderSummaryContainer.tsx

@@ -36,6 +36,7 @@ export function getTermsConditions(
 	const period = contributionType === 'MONTHLY' ? 'month' : 'year';
 	const isSupporterPlus = productId === 'SupporterPlus';
 	const isTier3 = productId === 'TierThree';
+	const isAdLite = productId === 'GuardianAdLite';
 
 	if (isSupporterPlus || isTier3) {
 		return (
@@ -68,10 +69,13 @@ export function getTermsConditions(
 			</div>
 		);
 	}
+	const cancelCopy = isAdLite
+		? 'Cancel anytime.'
+		: 'Cancel or change your support anytime.';
 	return (
 		<div css={containerSummaryTsCs}>
 			<p>Auto renews every {period} until you cancel.</p>
-			<p>Cancel or change your support anytime.</p>
+			<p>{cancelCopy}</p>
 		</div>
 	);
 }

support-frontend/assets/helpers/legal.ts

@@ -1,5 +1,6 @@
 // ----- Imports ----- //
 import type { CountryGroupId } from 'helpers/internationalisation/countryGroup';
+import { getBaseDomain } from './urls/url';
 // ----- Terms & Conditions ----- //
 const defaultContributionTermsLink =
 	'https://www.theguardian.com/info/2016/apr/04/contribution-terms-and-conditions';
@@ -33,6 +34,8 @@ const supporterPlusTermsLink =
 	'https://www.theguardian.com/info/2022/oct/28/the-guardian-supporter-plus-terms-and-conditions';
 const tierThreeTermsLink =
 	'https://www.theguardian.com/info/article/2024/jul/19/digital-print-terms-and-conditions';
+// Placeholder, awaiting Ts&Cs location
+const guardianAdLiteTermsLink = `https://manage.${getBaseDomain()}/help-centre`;
 // ----- Exports ----- //
 export {
 	contributionsTermsLinks,
@@ -42,4 +45,5 @@ export {
 	guardianLiveTermsLink,
 	supporterPlusTermsLink,
 	tierThreeTermsLink,
+	guardianAdLiteTermsLink,
 };

support-frontend/assets/helpers/urls/externalLinks.ts

@@ -23,10 +23,6 @@ const androidDailyUrl =
 const myAccountUrl = `${profileUrl}/account/edit`;
 const manageSubsUrl = `${manageUrl}/subscriptions`;
 const helpCentreUrl = `${manageUrl}/help-centre`;
-
-// Awaiting Ts&Cs location
-const guardianAdLiteConditionsUrl = `${manageUrl}/help-centre`;
-
 // ----- Functions ----- //
 
 function getPatronsLink(
@@ -98,5 +94,4 @@ export {
 	homeDeliveryUrl,
 	helpCentreUrl,
 	feastAppUrl,
-	guardianAdLiteConditionsUrl,
 };

support-frontend/assets/pages/[countryGroupId]/components/checkoutComponent.tsx

@@ -121,7 +121,12 @@ import {
 } from '../validation';
 import { BackButton } from './backButton';
 import { CheckoutLayout } from './checkoutLayout';
-import { FormSection, Legend, shorterBoxMargin } from './form';
+import {
+	FormSection,
+	Legend,
+	lengthenBoxMargin,
+	shorterBoxMargin,
+} from './form';
 import {
 	checkedRadioLabelColour,
 	defaultRadioLabelColour,
@@ -667,6 +672,7 @@ export function CheckoutComponent({
 		abParticipations.abandonedBasket === 'variant',
 	);
 
+	const isAdLite = productKey === 'GuardianAdLite';
 	const returnParam = returnLink ? '?returnAddress=' + returnLink : '';
 	const returnToLandingPage =
 		productKey === 'GuardianAdLite'
@@ -764,10 +770,7 @@ export function CheckoutComponent({
 							promotion,
 						)}
 						headerButton={
-							<BackButton
-								path={returnToLandingPage}
-								buttonText={productKey === 'GuardianAdLite' ? 'Back' : 'Change'}
-							/>
+							<BackButton path={returnToLandingPage} buttonText={'Change'} />
 						}
 					/>
 				</BoxContents>
@@ -784,7 +787,12 @@ export function CheckoutComponent({
 					return false;
 				}}
 			>
-				<Box cssOverrides={shorterBoxMargin}>
+				<Box
+					cssOverrides={[
+						shorterBoxMargin,
+						isAdLite ? lengthenBoxMargin : css``,
+					]}
+				>
 					<BoxContents>
 						{useStripeExpressCheckout && (
 							<div
@@ -1435,8 +1443,18 @@ export function CheckoutComponent({
 					</BoxContents>
 				</Box>
 			</form>
-			<PatronsMessage countryGroupId={countryGroupId} mobileTheme={'light'} />
-			<GuardianTsAndCs mobileTheme={'light'} displayPatronsCheckout={false} />
+			{!isAdLite && (
+				<>
+					<PatronsMessage
+						countryGroupId={countryGroupId}
+						mobileTheme={'light'}
+					/>
+					<GuardianTsAndCs
+						mobileTheme={'light'}
+						displayPatronsCheckout={false}
+					/>
+				</>
+			)}
 			{isProcessingPayment && (
 				<LoadingOverlay>
 					<p>Processing transaction</p>

support-frontend/assets/pages/[countryGroupId]/components/form.tsx

@@ -41,6 +41,13 @@ export const shorterBoxMargin = css`
 	}
 `;
 
+export const lengthenBoxMargin = css`
+	margin-bottom: ${space[6]}px;
+	${from.tablet} {
+		margin-bottom: ${space[24]}px;
+	}
+`;
+
 type LegendProps = {
 	children: ReactNode;
 };

support-frontend/assets/pages/[countryGroupId]/guardianAdLiteLanding/components/accordianComponent.tsx

@@ -13,10 +13,8 @@ import {
 import { Accordion, AccordionRow } from '@guardian/source/react-components';
 import { useState } from 'react';
 import { Container } from 'components/layout/container';
-import {
-	guardianAdLiteConditionsUrl,
-	helpCentreUrl,
-} from 'helpers/urls/externalLinks';
+import { guardianAdLiteTermsLink } from 'helpers/legal';
+import { helpCentreUrl } from 'helpers/urls/externalLinks';
 
 const container = css`
 	background-color: ${palette.neutral[97]};
@@ -133,7 +131,7 @@ const rows = [
 			<div css={rowSpacing}>
 				To cancel, go to Manage my account, and for further information on your
 				Guardian Ad-Lite subscription, see{' '}
-				<a href={guardianAdLiteConditionsUrl}>here</a>.
+				<a href={guardianAdLiteTermsLink}>here</a>.
 			</div>
 		),
 	},

support-frontend/assets/pages/supporter-plus-landing/components/paymentTsAndCs.tsx

@@ -21,6 +21,7 @@ import {
 } from 'helpers/internationalisation/currency';
 import {
 	contributionsTermsLinks,
+	guardianAdLiteTermsLink,
 	privacyLink,
 	supporterPlusTermsLink,
 } from 'helpers/legal';
@@ -81,6 +82,9 @@ interface SummaryTsAndCsProps {
 const termsSupporterPlus = (linkText: string) => (
 	<a href={supporterPlusTermsLink}>{linkText}</a>
 );
+const termsGuardianAdLite = (linkText: string) => (
+	<a href={guardianAdLiteTermsLink}>{linkText}</a>
+);
 
 const frequencySingular = (contributionType: ContributionType) =>
 	contributionType === 'MONTHLY' ? 'month' : 'year';
@@ -141,11 +145,14 @@ export function PaymentTsAndCs({
 	productKey,
 	promotion,
 }: PaymentTsAndCsProps): JSX.Element {
-	const inSupporterPlus =
+	const inAdLite = productKey === 'GuardianAdLite';
+	const inAllAccessDigital =
 		productKey === 'SupporterPlus' && amountIsAboveThreshold;
-	const inTier3 = productKey === 'TierThree' && amountIsAboveThreshold;
+	const inDigitalPlusPrint =
+		productKey === 'TierThree' && amountIsAboveThreshold;
 	const inSupport =
-		productKey === 'Contribution' || !(inSupporterPlus || inTier3);
+		productKey === 'Contribution' ||
+		!(inAllAccessDigital || inDigitalPlusPrint || inAdLite);
 
 	const frequencyPlural = (contributionType: ContributionType) =>
 		contributionType === 'MONTHLY' ? 'monthly' : 'annual';
@@ -216,17 +223,42 @@ export function PaymentTsAndCs({
 		);
 	};
 
+	const copyAdLite = (
+		contributionType: RegularContributionType,
+		productKey: ActiveProductKey,
+	) => {
+		const productLabel = productCatalogDescription[productKey].label;
+		return (
+			<div>
+				Your {productLabel} will auto-renew each{' '}
+				{frequencySingular(contributionType)} unless cancelled. Your first
+				payment will be taken on day 15 after signing up but you will start to
+				receive your {productLabel} benefits when you sign up. Unless you
+				cancel, subsequent monthly payments will be taken on this date using
+				your chosen payment method. You can cancel your subscription at any time
+				before your next renewal date. If you cancel your Guardian Ad-Lite
+				subscription within 14 days of signing up, your subscription will stop
+				immediately and we will not take the first payment from you.
+				Cancellation of your subscription after 14 days will take effect at the
+				end of your current monthly payment period. To cancel, go to{' '}
+				{ManageMyAccountLink} or see our {productLabel}{' '}
+				{termsGuardianAdLite('Terms')}.
+			</div>
+		);
+	};
+
 	return (
 		<div css={container}>
 			<FinePrint mobileTheme={mobileTheme}>
-				{inTier3 && (
+				{inDigitalPlusPrint && (
 					<TierThreeTerms
 						paymentFrequency={contributionType === 'ANNUAL' ? 'year' : 'month'}
 					/>
 				)}
-				{inSupporterPlus &&
+				{inAllAccessDigital &&
 					copyAboveThreshold(contributionType, productKey, promotion)}
-				{inSupport && copyBelowThreshold(countryGroupId)}
+				{inAdLite && copyAdLite(contributionType, productKey)}
+				{(inSupport || inAdLite) && copyBelowThreshold(countryGroupId)}
 			</FinePrint>
 		</div>
 	);
@@ -239,9 +271,12 @@ export function SummaryTsAndCs({
 	productKey,
 	cssOverrides,
 }: SummaryTsAndCsProps): JSX.Element {
-	const inTier3 = productKey === 'TierThree';
-	const inTier2 = productKey === 'SupporterPlus';
-	const inTier1 = productKey === 'Contribution' || !(inTier2 || inTier3);
+	const inAdLite = productKey === 'GuardianAdLite';
+	const inDigitalPlusPrint = productKey === 'TierThree';
+	const inAllAccessDigital = productKey === 'SupporterPlus';
+	const inSupport =
+		productKey === 'Contribution' ||
+		!(inAllAccessDigital || inDigitalPlusPrint || inAdLite);
 
 	const amountCopy = ` of ${formatAmount(
 		currencies[currency],
@@ -284,24 +319,27 @@ export function SummaryTsAndCs({
 	const copyTier3 = (
 		contributionType: ContributionType,
 		productKey: ActiveProductKey,
+		plural: boolean,
 	) => {
 		return (
 			<>
 				<div>
-					The {productCatalogDescription[productKey].label} subscriptions will
-					auto-renew each {frequencySingular(contributionType)}. You will be
-					charged the subscription amount using your chosen payment method at
-					each renewal, at the rate then in effect, unless you cancel.
+					The {productCatalogDescription[productKey].label} subscription
+					{plural ? 's' : ''} will auto-renew each{' '}
+					{frequencySingular(contributionType)}. You will be charged the
+					subscription amount using your chosen payment method at each renewal,
+					at the rate then in effect, unless you cancel.
 				</div>
 			</>
 		);
 	};
 
 	return (
 		<div css={[containerSummaryTsCs, cssOverrides]}>
-			{inTier1 && copyTier1(contributionType)}
-			{inTier2 && copyTier2(contributionType, productKey)}
-			{inTier3 && copyTier3(contributionType, productKey)}
+			{inSupport && copyTier1(contributionType)}
+			{inAllAccessDigital && copyTier2(contributionType, productKey)}
+			{inDigitalPlusPrint && copyTier3(contributionType, productKey, true)}
+			{inAdLite && copyTier3(contributionType, productKey, false)}
 		</div>
 	);
 }