Skip to content
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

Digital Editions: Ts&Cs align copy to original LandingPage #6761

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Digital Editions: Ts&Cs align copy to original LandingPage #6761

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
be5c556
feat: Digital Edition Payment Ts&Cs
paul-daniel-dempsey Feb 6, 2025
3b6f408
feat: Checkout mid SummaryTs&C's hidden for (UK) digital edition (onl…
paul-daniel-dempsey Feb 6, 2025
e286cb6
bug: TierThree unused & duplicated DirectDebit TsCs code removed
paul-daniel-dempsey Feb 6, 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
19 changes: 7 additions & 12 deletions support-frontend/assets/components/subscriptionCheckouts/directDebit/directDebitTerms.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<div css={directDebitTerms(isThreeTier)}>
<div css={directDebitTerms}>
<p>
<strong>Payments by GoCardless</strong>
<br />
Expand Down
75 changes: 30 additions & 45 deletions support-frontend/assets/components/subscriptionCheckouts/tierThreeTerms.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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 (
<>
<FormSection>
<div css={tierThreeTerms}>
<p>
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&nbsp;
{ManageMyAccountLink} or see our {productName}{' '}
{termsLink('Terms', tierThreeTermsLink)}.
</p>
<p>
By proceeding, you are agreeing to the {productName}{' '}
{termsLink('Terms', tierThreeTermsLink)}.
</p>
<p>
To find out what personal data we collect and how we use it, please
visit our {termsLink('Privacy Policy', privacyLink)}.
</p>
<p>
<StripeDisclaimer />
</p>
</div>
</FormSection>
{props.paymentMethod === DirectDebit && (
<FormSection>
<DirectDebitTerms isThreeTier />
</FormSection>
)}
</>
<div css={tierThreeTerms}>
<p>
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&nbsp;
{ManageMyAccountLink} or see our {productName}{' '}
{termsLink('Terms', tierThreeTermsLink)}.
</p>
<p>
By proceeding, you are agreeing to the {productName}{' '}
{termsLink('Terms', tierThreeTermsLink)}.
</p>
<p>
To find out what personal data we collect and how we use it, please
visit our {termsLink('Privacy Policy', privacyLink)}.
</p>
<p>
<StripeDisclaimer />
</p>
</div>
);
}
46 changes: 39 additions & 7 deletions support-frontend/assets/pages/supporter-plus-landing/components/paymentTsAndCs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,14 +145,15 @@ export function PaymentTsAndCs({
productKey,
promotion,
}: PaymentTsAndCsProps): JSX.Element {
const inDigitalEdition = productKey === 'DigitalSubscription';
const inAdLite = productKey === 'GuardianAdLite';
const inAllAccessDigital =
productKey === 'SupporterPlus' && amountIsAboveThreshold;
const inDigitalPlusPrint =
productKey === 'TierThree' && amountIsAboveThreshold;
const inSupport =
productKey === 'Contribution' ||
!(inAllAccessDigital || inDigitalPlusPrint || inAdLite);
!(inAllAccessDigital || inDigitalPlusPrint || inAdLite || inDigitalEdition);

const frequencyPlural = (contributionType: ContributionType) =>
contributionType === 'MONTHLY' ? 'monthly' : 'annual';
Expand Down Expand Up @@ -247,6 +248,31 @@ export function PaymentTsAndCs({
);
};

const copyDigitalEdition = () => {
return (
<>
<div>
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{' '}
<a href={'http://manage.theguardian.com/'}>Manage My Account</a> or
see our{' '}
<a href="https://www.theguardian.com/info/2014/aug/06/guardian-observer-digital-subscriptions-terms-conditions">
Terms
</a>
.
</div>
<TsAndCsFooterLinks
countryGroupId={countryGroupId}
amountIsAboveThreshold={amountIsAboveThreshold}
/>
</>
);
};

return (
<div css={container}>
<FinePrint mobileTheme={mobileTheme}>
Expand All @@ -259,6 +285,7 @@ export function PaymentTsAndCs({
copyAboveThreshold(contributionType, productKey, promotion)}
{inAdLite && copyAdLite(contributionType, productKey)}
{(inSupport || inAdLite) && copyBelowThreshold(countryGroupId)}
{inDigitalEdition && copyDigitalEdition()}
</FinePrint>
</div>
);
Expand All @@ -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';
Expand Down Expand Up @@ -335,11 +363,15 @@ export function SummaryTsAndCs({
};

return (
<div css={[containerSummaryTsCs, cssOverrides]}>
{inSupport && copyTier1(contributionType)}
{inAllAccessDigital && copyTier2(contributionType, productKey)}
{inDigitalPlusPrint && copyTier3(contributionType, productKey, true)}
{inAdLite && copyTier3(contributionType, productKey, false)}
</div>
<>
{!inDigitalEdition && (
<div css={[containerSummaryTsCs, cssOverrides]}>
{inSupport && copyTier1(contributionType)}
{inAllAccessDigital && copyTier2(contributionType, productKey)}
{inDigitalPlusPrint && copyTier3(contributionType, productKey, true)}
{inAdLite && copyTier3(contributionType, productKey, false)}
</div>
)}
</>
);
}