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)}. +

+

+ +

+
); } 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..fadbc61edf 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()}
); @@ -271,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'; @@ -335,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)} +
+ )} + ); }