From be5c556f8da316082898ad7b61f19dd78307bcb8 Mon Sep 17 00:00:00 2001 From: Paul Dempsey <76729591+paul-daniel-dempsey@users.noreply.github.com> Date: Thu, 6 Feb 2025 15:36:14 +0000 Subject: [PATCH 1/3] feat: Digital Edition Payment Ts&Cs --- .../components/paymentTsAndCs.tsx | 29 ++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/support-frontend/assets/pages/supporter-plus-landing/components/paymentTsAndCs.tsx b/support-frontend/assets/pages/supporter-plus-landing/components/paymentTsAndCs.tsx index 354aa0d641..9a81d070d7 100644 --- a/support-frontend/assets/pages/supporter-plus-landing/components/paymentTsAndCs.tsx +++ b/support-frontend/assets/pages/supporter-plus-landing/components/paymentTsAndCs.tsx @@ -145,6 +145,7 @@ export function PaymentTsAndCs({ productKey, promotion, }: PaymentTsAndCsProps): JSX.Element { + const inDigitalEdition = productKey === 'DigitalSubscription'; const inAdLite = productKey === 'GuardianAdLite'; const inAllAccessDigital = productKey === 'SupporterPlus' && amountIsAboveThreshold; @@ -152,7 +153,7 @@ export function PaymentTsAndCs({ productKey === 'TierThree' && amountIsAboveThreshold; const inSupport = productKey === 'Contribution' || - !(inAllAccessDigital || inDigitalPlusPrint || inAdLite); + !(inAllAccessDigital || inDigitalPlusPrint || inAdLite || inDigitalEdition); const frequencyPlural = (contributionType: ContributionType) => contributionType === 'MONTHLY' ? 'monthly' : 'annual'; @@ -247,6 +248,31 @@ export function PaymentTsAndCs({ ); }; + const copyDigitalEdition = () => { + return ( + <> +
+ Payment taken after the first 14 day free trial. At the end of the + free trial period your subscription will auto-renew, and you will be + charged, each month at the full price of £14.99 per month or £149 per + year unless you cancel. You can cancel at any time before your next + renewal date. Cancellation will take effect at the end of your current + subscription month. To cancel, go to{' '} + Manage My Account or see + our{' '} + + Terms + + . +
+ + + ); + }; + return (
@@ -259,6 +285,7 @@ export function PaymentTsAndCs({ copyAboveThreshold(contributionType, productKey, promotion)} {inAdLite && copyAdLite(contributionType, productKey)} {(inSupport || inAdLite) && copyBelowThreshold(countryGroupId)} + {inDigitalEdition && copyDigitalEdition()}
); From 3b6f408a7fcc49e262c353cc353f18fcdc91a6cf Mon Sep 17 00:00:00 2001 From: Paul Dempsey <76729591+paul-daniel-dempsey@users.noreply.github.com> Date: Thu, 6 Feb 2025 16:25:39 +0000 Subject: [PATCH 2/3] feat: Checkout mid SummaryTs&C's hidden for (UK) digital edition (only) in favour of bottom PaymentTs&C's --- .../components/paymentTsAndCs.tsx | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/support-frontend/assets/pages/supporter-plus-landing/components/paymentTsAndCs.tsx b/support-frontend/assets/pages/supporter-plus-landing/components/paymentTsAndCs.tsx index 9a81d070d7..fadbc61edf 100644 --- a/support-frontend/assets/pages/supporter-plus-landing/components/paymentTsAndCs.tsx +++ b/support-frontend/assets/pages/supporter-plus-landing/components/paymentTsAndCs.tsx @@ -258,8 +258,8 @@ export function PaymentTsAndCs({ year unless you cancel. You can cancel at any time before your next renewal date. Cancellation will take effect at the end of your current subscription month. To cancel, go to{' '} - Manage My Account or see - our{' '} + Manage My Account or + see our{' '} Terms @@ -298,6 +298,7 @@ export function SummaryTsAndCs({ productKey, cssOverrides, }: SummaryTsAndCsProps): JSX.Element { + const inDigitalEdition = productKey === 'DigitalSubscription'; const inAdLite = productKey === 'GuardianAdLite'; const inDigitalPlusPrint = productKey === 'TierThree'; const inAllAccessDigital = productKey === 'SupporterPlus'; @@ -362,11 +363,15 @@ export function SummaryTsAndCs({ }; return ( -
- {inSupport && copyTier1(contributionType)} - {inAllAccessDigital && copyTier2(contributionType, productKey)} - {inDigitalPlusPrint && copyTier3(contributionType, productKey, true)} - {inAdLite && copyTier3(contributionType, productKey, false)} -
+ <> + {!inDigitalEdition && ( +
+ {inSupport && copyTier1(contributionType)} + {inAllAccessDigital && copyTier2(contributionType, productKey)} + {inDigitalPlusPrint && copyTier3(contributionType, productKey, true)} + {inAdLite && copyTier3(contributionType, productKey, false)} +
+ )} + ); } From e286cb69a3b3909d1817fcd9d0fce7534a91d56a Mon Sep 17 00:00:00 2001 From: Paul Dempsey <76729591+paul-daniel-dempsey@users.noreply.github.com> Date: Thu, 6 Feb 2025 17:52:06 +0000 Subject: [PATCH 3/3] bug: TierThree unused & duplicated DirectDebit TsCs code removed --- .../directDebit/directDebitTerms.tsx | 19 ++--- .../subscriptionCheckouts/tierThreeTerms.tsx | 75 ++++++++----------- 2 files changed, 37 insertions(+), 57 deletions(-) diff --git a/support-frontend/assets/components/subscriptionCheckouts/directDebit/directDebitTerms.tsx b/support-frontend/assets/components/subscriptionCheckouts/directDebit/directDebitTerms.tsx index 8d7bba0182..1caa2dfa6b 100644 --- a/support-frontend/assets/components/subscriptionCheckouts/directDebit/directDebitTerms.tsx +++ b/support-frontend/assets/components/subscriptionCheckouts/directDebit/directDebitTerms.tsx @@ -1,26 +1,21 @@ import { css } from '@emotion/react'; -import { textSans12, textSans14 } from '@guardian/source/foundations'; - -const directDebitTerms = (isThreeTier?: true) => css` - ${isThreeTier ? textSans12 : textSans14}; +import { textSans14 } from '@guardian/source/foundations'; +const directDebitTerms = css` + ${textSans14}; a, a:visited { - color: ${isThreeTier ? '#606060' : 'inherit'}; + color: inherit; } p { margin-top: 10px; - color: ${isThreeTier ? '#606060' : 'inherit'}; + color: inherit; } `; -interface DirectDebitTermsProps { - isThreeTier?: true; -} - -function DirectDebitTerms({ isThreeTier }: DirectDebitTermsProps) { +function DirectDebitTerms() { return ( -
+

Payments by GoCardless
diff --git a/support-frontend/assets/components/subscriptionCheckouts/tierThreeTerms.tsx b/support-frontend/assets/components/subscriptionCheckouts/tierThreeTerms.tsx index 9c8b4ed0eb..1053a834dc 100644 --- a/support-frontend/assets/components/subscriptionCheckouts/tierThreeTerms.tsx +++ b/support-frontend/assets/components/subscriptionCheckouts/tierThreeTerms.tsx @@ -1,10 +1,6 @@ import { css } from '@emotion/react'; import { textSans12 } from '@guardian/source/foundations'; -import { FormSection } from 'components/checkoutForm/checkoutForm'; import { StripeDisclaimer } from 'components/stripe/stripeDisclaimer'; -import DirectDebitTerms from 'components/subscriptionCheckouts/directDebit/directDebitTerms'; -import type { PaymentMethod } from 'helpers/forms/paymentMethods'; -import { DirectDebit } from 'helpers/forms/paymentMethods'; import { privacyLink, tierThreeTermsLink } from 'helpers/legal'; import { ManageMyAccountLink } from '../../pages/supporter-plus-landing/components/manageMyAccountLink'; @@ -29,52 +25,41 @@ const termsLink = (linkText: string, url: string) => ( export default function TierThreeTerms(props: { paymentFrequency: 'month' | 'year'; - paymentMethod?: PaymentMethod; }): JSX.Element { const paymentFrequencyName = props.paymentFrequency === 'year' ? 'annual' : 'monthly'; const productName = 'Digital + print'; return ( - <> - -

-

- By signing up, you are taking out a {productName} subscription. Your{' '} - {productName} subscription will auto-renew each{' '} - {props.paymentFrequency} unless cancelled. Your first payment will - be taken on the publication date of your first Guardian Weekly - magazine (as shown in the checkout) but you will start to receive - your digital benefits when you sign up. Unless you cancel, - subsequent {paymentFrequencyName} payments will be taken on this - date using your chosen payment method. You can cancel your Digital + - print subscription at any time before your next renewal date. If you - cancel your {productName} 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{' '} - {paymentFrequencyName} payment period. To cancel go to  - {ManageMyAccountLink} or see our {productName}{' '} - {termsLink('Terms', tierThreeTermsLink)}. -

-

- By proceeding, you are agreeing to the {productName}{' '} - {termsLink('Terms', tierThreeTermsLink)}. -

-

- To find out what personal data we collect and how we use it, please - visit our {termsLink('Privacy Policy', privacyLink)}. -

-

- -

-
- - {props.paymentMethod === DirectDebit && ( - - - - )} - +
+

+ By signing up, you are taking out a {productName} subscription. Your{' '} + {productName} subscription will auto-renew each {props.paymentFrequency}{' '} + unless cancelled. Your first payment will be taken on the publication + date of your first Guardian Weekly magazine (as shown in the checkout) + but you will start to receive your digital benefits when you sign up. + Unless you cancel, subsequent {paymentFrequencyName} payments will be + taken on this date using your chosen payment method. You can cancel your + Digital + print subscription at any time before your next renewal date. + If you cancel your {productName} 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 {paymentFrequencyName}{' '} + payment period. To cancel go to  + {ManageMyAccountLink} or see our {productName}{' '} + {termsLink('Terms', tierThreeTermsLink)}. +

+

+ By proceeding, you are agreeing to the {productName}{' '} + {termsLink('Terms', tierThreeTermsLink)}. +

+

+ To find out what personal data we collect and how we use it, please + visit our {termsLink('Privacy Policy', privacyLink)}. +

+

+ +

+
); }