Skip to content

Commit

Permalink
add the feast app cta banner to the cancellation offer confirmation p…
Browse files Browse the repository at this point in the history
…age alongside the news app cta. There are also some minor page related styling changes here as well.
  • Loading branch information
Richard Bangay committed Sep 9, 2024
1 parent e65d310 commit 116f407
Show file tree
Hide file tree
Showing 5 changed files with 232 additions and 31 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,11 @@ import {
textEgyptianBold17,
textSansBold17,
} from '@guardian/source/foundations';
import { Button, LinkButton } from '@guardian/source/react-components';
import {
Button,
LinkButton,
SvgInfoRound,
} from '@guardian/source/react-components';
import { useContext, useEffect } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { measure } from '@/client/styles/typography';
Expand All @@ -17,7 +21,9 @@ import { getMaxNonDiscountedPrice } from '@/client/utilities/discountPreview';
import { DATE_FNS_LONG_OUTPUT_FORMAT, parseDate } from '@/shared/dates';
import type { PaidSubscriptionPlan } from '@/shared/productResponse';
import { getMainPlan } from '@/shared/productResponse';
import { BenefitsSection } from '../../../shared/benefits/BenefitsSection';
import { DownloadAppCta } from '../../../shared/DownloadAppCta';
import { DownloadFeastAppCta } from '../../../shared/DownloadFeastAppCta';
import { Heading } from '../../../shared/Heading';
import type {
CancellationContextInterface,
Expand All @@ -40,10 +46,7 @@ const standfirstCss = css`
`;

const nextStepsCss = css`
border-top: 1px solid ${palette.neutral[86]};
border-bottom: 1px solid ${palette.neutral[86]};
padding: ${space[5]}px 0 ${space[6]}px;
margin: ${space[5]}px 0 ${space[6]}px;
margin: ${space[4]}px 0 ${space[8]}px;
h4 {
${textEgyptianBold17};
margin: 0;
Expand All @@ -56,8 +59,7 @@ const nextStepsCss = css`
line-height: 1.8rem;
}
${from.desktop} {
padding-bottom: ${space[8]}px;
margin-bottom: ${space[8]}px;
margin: ${space[6]}px 0 ${space[8]}px;
}
`;

Expand All @@ -71,10 +73,7 @@ const benefitsCss = css`
margin: 0;
}
ul {
padding: 0;
padding-inline-start: 14px;
margin: ${space[3]}px 0 0;
line-height: 1.8rem;
margin-top: ${space[4]}px;
}
${from.desktop} {
flex-direction: row;
Expand Down Expand Up @@ -122,21 +121,27 @@ const appAdCss = css`
`;

const dontForgetCss = css`
${textEgyptian17};
margin: ${space[6]}px 0 0;
padding-top: ${space[5]}px;
border-top: 1px solid ${palette.neutral[86]};
display: flex;
gap: ${space[2]}px;
margin-top: ${space[6]}px;
border: 1px solid ${palette.neutral[86]};
padding: ${space[4]}px ${space[4]}px ${space[4]}px ${space[3]}px;
svg {
flex-shrink: 0;
}
p {
margin: 0;
}
${from.desktop} {
margin-top: ${space[8]}px;
padding-top: ${space[6]}px;
padding: ${space[4]}px ${space[4]}px ${space[4]}px ${space[5]}px;
}
`;

const onwardJourneyBtnsContainerCss = css`
display: flex;
flex-direction: column;
gap: ${space[5]}px;
margin-top: ${space[8]}px;
margin-top: ${space[12]}px;
${from.phablet} {
flex-direction: row;
gap: ${space[4]}px;
Expand Down Expand Up @@ -210,6 +215,7 @@ export const SupporterPlusOfferConfirmed = () => {
</h3>
<div css={nextStepsCss}>
<h4>What happens next?</h4>

<ul>
<li>
You will receive an email confirming the details of your
Expand Down Expand Up @@ -243,21 +249,40 @@ export const SupporterPlusOfferConfirmed = () => {
<div css={mobileHeroHRCss}></div>
<div css={benefitsLeftSideCss}>
<h4>With your offer, you will continue to enjoy:</h4>
<ul>
<li>Unlimited access to the Guardian app</li>
<li>Ad-free reading across all your devices</li>
<li>Exclusive supporter newsletter</li>
<li>
Far fewer asks for support when you're signed in
</li>
</ul>
<BenefitsSection
small
benefits={[
{
description:
'Unlimited access to the Guardian app',
},
{
description:
'Ad-free reading across all your devices',
},
{
description: 'Exclusive supporter newsletter',
},
{
description:
"Far fewer asks for support when you're signed in",
},
]}
/>
</div>
</div>
<DownloadAppCta additionalCss={appAdCss} />
<p css={dontForgetCss}>
Don't forget to sign in on all your devices to enjoy your
benefits.
</p>
<DownloadFeastAppCta additionalCss={appAdCss} />
<div css={dontForgetCss}>
<SvgInfoRound
size="small"
theme={{ fill: palette.brand[400] }}
/>
<p>
Don't forget to sign in on all your devices to enjoy your
benefits.
</p>
</div>
<div css={onwardJourneyBtnsContainerCss}>
<LinkButton
href="https://theguardian.com"
Expand Down
7 changes: 6 additions & 1 deletion client/components/mma/shared/DownloadAppCta.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const appAdCss = css`
margin: ${space[1]}px ${space[5]}px 0 0;
}
${from.tablet} {
padding: ${space[6]}px;
padding: ${space[6]}px ${space[12]}px ${space[6]}px ${space[6]}px;
}
`;

Expand All @@ -43,6 +43,11 @@ const appIconContainerCss = css`
height: 55px;
border-radius: 10px;
background-color: ${palette.brand[400]};
${from.tablet} {
width: 70px;
min-width: 70px;
height: 70px;
}
`;

export const DownloadAppCta = (props: DownloadAppCtaProps) => {
Expand Down
78 changes: 78 additions & 0 deletions client/components/mma/shared/DownloadFeastAppCta.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import type { SerializedStyles } from '@emotion/react';
import { css } from '@emotion/react';
import { from, space, textSansBold17 } from '@guardian/source/foundations';
import { androidFeastAppUrl, iosFeastAppUrl } from '@/shared/externalLinks';
import { AndroidPlayStoreButton } from './assets/AndroidPlayStoreButton';
import { AppleAppStoreButton } from './assets/AppleAppStoreButton';
import { FeastAppIcon } from './assets/FeastAppIcon';

interface DownloadFeastAppCtaProps {
additionalCss?: SerializedStyles;
}

const appAdCss = css`
background-color: #e1e5d5;
padding: ${space[3]}px ${space[3]}px ${space[5]}px;
h4 {
${textSansBold17};
margin: 0 ${space[5]}px 0 0;
}
p {
margin: ${space[1]}px ${space[5]}px 0 0;
}
${from.tablet} {
padding: ${space[6]}px ${space[12]}px ${space[6]}px ${space[6]}px;
}
`;

const inlineContentsCss = css`
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: ${space[4]}px;
`;

const appIconContainerCss = css`
width: 55px;
min-width: 55px;
height: 55px;
border-radius: 10px;
${from.tablet} {
width: 70px;
min-width: 70px;
height: 70px;
}
`;

export const DownloadFeastAppCta = (props: DownloadFeastAppCtaProps) => {
return (
<div css={[appAdCss, props.additionalCss]}>
<div css={inlineContentsCss}>
<div>
<h4>If you haven't already, download the Feast App</h4>
<p>
Make a feast out of anything with the Guardian's new
recipe app - Feast.
</p>
</div>
<i css={appIconContainerCss}>
<FeastAppIcon />
</i>
</div>
<div>
<AppleAppStoreButton
link={iosFeastAppUrl}
overrideButtonHeight="36px"
additionalCss={css`
margin-right: ${space[3]}px;
`}
/>
<AndroidPlayStoreButton
link={androidFeastAppUrl}
overrideButtonHeight="36px"
/>
</div>
</div>
);
};
89 changes: 89 additions & 0 deletions client/components/mma/shared/assets/FeastAppIcon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import type { SerializedStyles } from '@emotion/react';

interface FeastAppIconProps {
additionalCss?: SerializedStyles;
}

export const FeastAppIcon = (props: FeastAppIconProps) => (
<svg viewBox="0 0 300 300" fill="none" css={props.additionalCss}>
<g clipPath="url(#a)">
<mask
id="b"
width="300"
height="300"
x="0"
y="0"
maskUnits="userSpaceOnUse"
>
<path
fill="#fff"
d="M260 0H40A40 40 0 0 0 0 40v220a40 40 0 0 0 40 40h220a40 40 0 0 0 40-40V40a40 40 0 0 0-40-40Z"
/>
</mask>
<g mask="url(#b)">
<path fill="#F2F2E9" d="M300 0H0v300h300V0Z" />
<mask
id="c"
width="215"
height="307"
x="42"
y="-35"
maskUnits="userSpaceOnUse"
>
<path fill="#fff" d="M257-34.8H42v306.09h215v-306.1Z" />
</mask>
<g mask="url(#c)">
<path
fill="#5FA7BE"
d="M183.95 200.2c.94-3.22 1.68-6.67 2.72-9.51 1.03-2.81 2.4-5.44 4-7.93.19-3.86.35-7.72.54-11.53.53-11.42.97-23 .98-34.48.03-21.56.78-49.82 1.61-70.44-2.26-1.62-5.58 1.05-5.72-1.85-.08-1.84 3.28-.82 4.97-1.98.83-3.4 1.66-8.07 1.31-11.63-1.12-.62-3.36.73-5.03.2-3.59-1.13-4.72-9.18-4.43-14.07.18-2.98 1.25-7.65 2.22-11.08 3.07-10.84 9.21-21.19 8.34-36.26-.4-6.83-2.7-12.77-6.3-16.38-4.63-4.62-19.6-9.93-25.02-1.96a97.26 97.26 0 0 0-1.02 19.05c.5 12.5.06 25.36.66 38.27.59 12.68-1.2 25.56.33 37.7 1.23 9.8.79 20.89.67 31.44-.1 9.73.09 19.54 0 29.1-.2 18.63-1.3 37.35-1.85 55.43 5.87 14.83 9.28 31.16 3.58 48.63a82.86 82.86 0 0 1-4.42 11.19c0 7.49.15 14.93.21 22.33 4.96-1.24 6.84-4.72 9.46-8.4 3.26-4.6 6.09-10.17 8.4-15.62.09-9.33-.11-19.4 1.42-29.7.5-3.4 1.4-7.17 2.37-10.52Zm-16.9-134.6c-.24-.24-.34-.64-.34-1.17 1.72-.32 4.59.03 6.83.03 4.41 0 9.21-1.15 12.21.99-5.59 1.3-13.2.17-18.7.16Z"
/>
<path
fill="#5FA7BE"
d="M162.48 224.65c-.2 4-.3 8-.35 11.98a52.3 52.3 0 0 0 4.06-16.75c.8-10.4.03-22.3-3.4-32.22-.18 12.48.31 24.79-.31 36.99Z"
/>
<path
fill="#BB3B80"
d="M256.65 215.13c.36-17.94-3.61-30.72-11.9-39.75-4.3-4.7-10.72-8.63-13.93-14.26-2.13-3.77-2.64-9.74-3.06-15.29-1.46-19.56.11-42.1.67-61.14.42-.3 3.43.37 4.41-.35a14.55 14.55 0 0 0 2.26-4.86c-.47-7.6-.2-15.24.36-22.89-.17-2.67-.3-5.24-.25-7.58.3-14.72 1.55-30.4 2.45-45.27.05-1.88.09-3.76.1-5.64-.18-4.04-.37-8.08-.52-12.15a128.6 128.6 0 0 1-.09-6.52 30.83 30.83 0 0 1-5.33-4.1c-6.9-2.4-16.47-1.88-23.32.34-.14 4.7-.06 9.43-.58 14.05-.04 3.24-.2 6.51-.23 9.7-.3 23.97-.81 45.67-1.69 66.59-.24 5.9-1.47 11.53-.67 16.98 1.97 1.82 4.55 2.23 6.8 3.06 1.74 26.17 1.62 55.9-6.1 78.8-4.74 5.06-10.9 10.89-15.36 17.9-.93 18.4-2.46 36.99-8.72 53.28-.55 1.44-1.15 2.9-1.78 4.38-.04 5.23-.17 10.24-.74 14.92-.58 4.74 2.87 5.52 4.97 8.63 4.74 7.08 15 3.73 25.37 4.6 6.1-.96 6.35-.89 19.5-.4 2.05.08 6.47-.34 8.38-.72 19.28-3.74 19.3-13.26 19.35-31.85.02-6.72-.48-13.77-.34-20.46Zm-56.6 34.66c-.4.06-.61-.07-.69-.33-2.58-9.12-1.56-19.72.34-28.88 2.03 2.44 2 6.75 2.04 9.85a99.67 99.67 0 0 1-1.7 19.37Zm6.1-41.44c-3.82-6.38-.75-15.42.67-22.08 3.53 5.57.9 17.2-.67 22.08Zm8.84 38.38c-.38 4.14-1.17 7.81-2.72 10.88-.27-.18-.55-.36-1.02-.34-4.72-11.34-.72-28.09 2.37-38.73 1.97 6.95 2.22 18.94 1.36 28.2Zm4.4-37.36c-4.28-6.02-2.38-18.21.34-24.8 2.57 6.3 2.72 18.65-.34 24.8Zm6.13 46.88h-.68c-1.85-1.57-2.44-5.08-2.72-7.48-1.15-10.03 1.41-21.6 4.07-29.89 1.64 2.83 1.64 6.85 1.7 10.53.14 9.17-.63 19.5-2.37 26.84Zm7.8-48.59c-4.9-6.16-2.07-17.88-.69-25.47 3.23 6.83 1.87 17.88.7 25.47Zm4.09 42.8c-.4.06-.61-.07-.69-.33a52.23 52.23 0 0 1-1.36-14.95c.4-6.58.95-13.96 4.07-18.34.74 12.75 1.16 22.05-2.02 33.62Z"
/>
<path
fill="#462861"
d="M190.66 182.76a40.4 40.4 0 0 0-3.99 7.93c-1.04 2.84-1.78 6.3-2.71 9.5a82.5 82.5 0 0 0-2.38 10.54c-1.53 10.3-1.33 20.36-1.4 29.7.62-1.49 1.22-2.96 1.77-4.4 6.26-16.28 7.8-34.87 8.72-53.28v.01Z"
/>
<path
fill="#BED01E"
d="M130.08 264.11c-1.37-1.88-5.41-1.14-6.77-3.04.39-1 1.19.48 2.97.45 5.34-.06 12.56-6.74 15.4-10.89 10.25-14.96 14.26-36.18 9.08-58.94-1-4.38-2.5-7.6-3.69-13.2-4.45-20.89-12.6-41.23-12.58-59.17 2.53 21.56 13.5 36.13 21.13 53.3 1.75 3.92 4.16 7.67 5.84 11.52.49 1.14.93 2.3 1.34 3.5.03-1.43.05-2.86.1-4.3l.03-1.05c-4.05-10.24-9.28-19.75-13.5-28.43-7.13-14.68-12.31-29.4-13.54-47.27.59-.68 3.2.74 4.25-.39.04-3.08.57-7.7-.3-11.47 1.01-2.27 2.63-4.15 1.76-7.2 17.4-33.48 13.2-90-2.18-121.92-5.66.1-14.1-2.17-17.45 2.8-1.53 2.28-1.42 6.47-2.64 9.74-.6 1.62-1.77 2.93-2.16 4.23-7.6 24.94-7.84 58.22-5.55 87.02.3 3.77.78 8.18 1.6 11.48.94 3.83 3.2 7.16 3.28 11.08.1 4.63-2.02 9.86-2.26 13.56 1.35 2.1 4.03-1.26 5.1.9-1.95 18.44-9.26 34.67-16.64 49.1a36.95 36.95 0 0 1-3.16 4.99c.79.5 1.56 1.02 2.32 1.53a42 42 0 0 0 3.38-5.2c1.69-3.22 2.94-7.19 4.78-10.58 5.39-9.97 9.12-24.23 11.4-36.41-.73 19.97-5.77 39.87-11.57 58.7a35 35 0 0 1 2.12 2.38c5.93-19.68 11.7-40.52 12.45-64.03.11-2.49-2.48-.43-2.52-2.15.07-1.78 3.26-.39 4.68-.8-.76 11.08-3.35 21.88-4.58 33.51-.7 6.52-.15 13.84-.64 21.23-.53 8.13-1.87 16.47-3.17 24.83a55.52 55.52 0 0 1 1.6 12.52c.27-2.39.55-4.78.85-7.2 3.5-28.27 3.1-57.27 7.61-82.31 1.05-1.11-1.08-2.79 1.3-2.54 2.22.65 1.56 6.91-.07 7.64-1.9 16.87-3.8 32.63-3.04 49.24.5 11.16 3.43 22.03 4.77 32.75 1.38 11.05 2.6 21.95 2.23 32.72-.4 11.61-5.12 23.1-9.67 33.04-.35-.09-.42-.43-.85-.43-.38-8.42-3.06-16.54-4-25.1-.63-5.67-.79-11.45-.63-17.34l-.25 1.7a99.35 99.35 0 0 1-2.14 10.33c.72 10 1.82 20.06 4.5 27.83.22.34.43.7.4 1.28l-.84-.01c-4.12-.09-6.36-4.44-8.42-7.31-.8-1.1-1.69-2.27-2.57-3.46l-.26.51c-.44.84-.84 1.7-1.23 2.57a70.82 70.82 0 0 0 8.63 10.19c1.5.77 4.44.13 5.94.9-1.16.97-2.96 1.27-3.85 2.52-6.83.68-12.57-.58-17.24-3.05-.67.77-1.38 1.55-2.12 2.31a22.36 22.36 0 0 0 8.3 3.18c5.46.9 9.89-.6 16.15-1.11 3.62-.3 4.65.82 8.49.5 12.21-.97 24.98-13.99 29.52-21.79.27-.46.54-.96.81-1.5 0-1.82.01-3.65.03-5.47-5.95 13.8-17.7 23.55-32.04 27.47l-.02.01Zm.6-146.1c3.27 22.63 7.7 45.1 14.63 66.41 1.8 5.52 4.38 10.1 5.36 16.62.6 3.97-.86 9.46-.56 14 .37 5.7.37 11.66-1.88 17.83a55.14 55.14 0 0 1-20.65 26.98c-.37.07-.4-.17-.42-.43 22.83-38.5-6.18-92.8 3.53-141.4h-.01Z"
/>
<path
fill="#438629"
d="m162.93 182.3-.04 1.06c-.04 1.43-.06 2.86-.09 4.3 3.42 9.92 4.2 21.82 3.4 32.21a52.42 52.42 0 0 1-4.07 16.76l-.03 5.48a82.8 82.8 0 0 0 4.41-11.2c5.7-17.46 2.3-33.8-3.58-48.61Z"
/>
<path
fill="#F59100"
d="M119.8 196.04a244.5 244.5 0 0 0-1.52 20.47c.98-6.74 1.69-13.77 1.52-20.47ZM100.9 208.19c-1.44 10.5-.2 24.91 4.35 33.17a50.16 50.16 0 0 0 3.71 5.52 90.3 90.3 0 0 0 6.93-18.34c-.24-3.38-.44-6.74-.64-10.01-.7-11.27 1.08-23.15 2.94-35.01a33.53 33.53 0 0 0-3.65-8.94 31.48 31.48 0 0 0-2.57-3.65c-1.2 4-2.41 7.94-3.6 11.85-2.58 8.6-6.35 17.27-7.46 25.4v.01Z"
/>
<path
fill="#F59100"
d="M91.82 182.19c-3.95 9.3-7.34 19.05-8.37 30.5-1.46 16.2 2.36 33.8 10.62 42.57a26.5 26.5 0 0 0 6.89 5.26 53.4 53.4 0 0 0 3.6-4.6c1.01-1.49 1.9-3.7 2.92-5.96-6.87-9.93-11.21-22.26-10.43-37.99.48-9.52 4.07-16.41 6.61-24.14 2.06-6.27 4.17-12.7 6.2-19.27a51.44 51.44 0 0 0-8-6.5c-1.5 2.07-3.08 4.06-4.37 6.18-2.6 4.23-3.66 9.25-5.66 13.96l-.01-.01Z"
/>
<path
fill="#F59100"
d="M87.73 251.38c-1.5-2.15-3.42-4.25-4.18-6.84-4.9-16.85-3.56-33.75.05-48 1.36-5.32 3.35-9.83 5.25-14.8 1.94-5.09 2.92-10.19 5.66-14.39 1.54-2.36 3.35-4.52 5.03-6.82-1.17-.76-2.38-1.51-3.6-2.27-4.78-6.7-5.49-14.63-5.38-25.1.21-18.2-.18-37.33.92-55.19.63-.92 3.35.13 4.01-.77-.37-1.71 1.92-3.79 2.21-5.44.5-2.83-.53-7.6-.62-11.09-.1-3.72.1-7.37.06-10.76-.19-15.67-1.6-41.8-.2-58.53.9-10.7 1.95-21.27-5.3-23.07-6.21-1.55-11.22.17-15.8.75-2.26.29-4.58-.26-6.03.83-1.23 24.7-.78 55.08 1.75 79.67-1.52 8.39-.29 19.28 1.07 27.9 1.53.8 3.63 1 5.42 1.54 1.13 22.75 3.07 58.23-7.07 76.88-8.18 4.13-14.53 7.26-19.49 13.97a47.39 47.39 0 0 0-9.41 25.8c-.67 12.54 2.54 28.44 6.46 41.21 3.08 10.06 7.4 20.92 12.46 26.59 5.18 5.78 16.77 9.58 26.76 7.03 3.61-.92 7.66-4.15 11.05-7.64-4.5-2.82-8.02-7.03-11.09-11.46h.01Z"
/>
<path
fill="#AF6D08"
d="M97.04 211.97c-.78 15.73 3.56 28.06 10.43 37.99.4-.86.8-1.73 1.23-2.56l.25-.52a50.77 50.77 0 0 1-3.7-5.52c-4.56-8.26-5.8-22.67-4.35-33.17 1.12-8.14 4.89-16.81 7.47-25.41 1.17-3.9 2.39-7.85 3.6-11.84a35 35 0 0 0-2.13-2.38c-2.02 6.56-4.13 13-6.19 19.27-2.53 7.72-6.14 14.62-6.61 24.14Z"
/>
<path
fill="#AF6D08"
d="M94.07 255.26c-8.26-8.78-12.08-26.36-10.62-42.58 1.03-11.44 4.42-21.18 8.37-30.5 2-4.7 3.08-9.72 5.66-13.95 1.3-2.11 2.86-4.1 4.38-6.18-.75-.52-1.53-1.02-2.32-1.53-1.68 2.3-3.49 4.46-5.03 6.82-2.74 4.21-3.72 9.3-5.66 14.38-1.9 4.98-3.9 9.49-5.25 14.82-3.61 14.25-4.95 31.14-.05 48 .75 2.58 2.69 4.68 4.19 6.83 3.06 4.43 6.58 8.64 11.09 11.46.74-.77 1.45-1.55 2.12-2.31a26.48 26.48 0 0 1-6.88-5.26ZM115.25 218.53c.2 3.27.4 6.64.64 10.02a100.95 100.95 0 0 0 2.4-12.04c.16-6.69.74-13.51 1.5-20.47-.1-4.36-.6-8.59-1.6-12.51-1.86 11.86-3.65 23.73-2.94 35Z"
/>
</g>
</g>
</g>
<defs>
<clipPath id="a">
<path fill="#fff" d="M0 0h300v300H0z" />
</clipPath>
</defs>
</svg>
);
4 changes: 4 additions & 0 deletions shared/externalLinks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,7 @@ export const iosAppUrl =
'https://apps.apple.com/app/the-guardian-live-world-news/id409128287';
export const androidAppUrl =
'https://play.google.com/store/apps/details?id=com.guardian';
export const iosFeastAppUrl =
'https://apps.apple.com/us/app/guardian-feast/id6468674686';
export const androidFeastAppUrl =
'https://play.google.com/store/apps/details?id=uk.co.guardian.feast';

0 comments on commit 116f407

Please sign in to comment.