From 116f407b8972200c4e13a762dd7a3bc1c0829856 Mon Sep 17 00:00:00 2001 From: Richard Bangay Date: Mon, 9 Sep 2024 12:51:29 +0100 Subject: [PATCH] add the feast app cta banner to the cancellation offer confirmation page alongside the news app cta. There are also some minor page related styling changes here as well. --- .../SupporterPlusOfferConfirmed.tsx | 85 +++++++++++------- .../components/mma/shared/DownloadAppCta.tsx | 7 +- .../mma/shared/DownloadFeastAppCta.tsx | 78 ++++++++++++++++ .../mma/shared/assets/FeastAppIcon.tsx | 89 +++++++++++++++++++ shared/externalLinks.ts | 4 + 5 files changed, 232 insertions(+), 31 deletions(-) create mode 100644 client/components/mma/shared/DownloadFeastAppCta.tsx create mode 100644 client/components/mma/shared/assets/FeastAppIcon.tsx diff --git a/client/components/mma/cancel/cancellationSaves/supporterplus/SupporterPlusOfferConfirmed.tsx b/client/components/mma/cancel/cancellationSaves/supporterplus/SupporterPlusOfferConfirmed.tsx index fdaf485a7..51f6f9b85 100755 --- a/client/components/mma/cancel/cancellationSaves/supporterplus/SupporterPlusOfferConfirmed.tsx +++ b/client/components/mma/cancel/cancellationSaves/supporterplus/SupporterPlusOfferConfirmed.tsx @@ -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'; @@ -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, @@ -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; @@ -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; } `; @@ -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; @@ -122,13 +121,19 @@ 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; } `; @@ -136,7 +141,7 @@ 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; @@ -210,6 +215,7 @@ export const SupporterPlusOfferConfirmed = () => {

What happens next?

+
-

- Don't forget to sign in on all your devices to enjoy your - benefits. -

+ +
+ +

+ Don't forget to sign in on all your devices to enjoy your + benefits. +

+
{ diff --git a/client/components/mma/shared/DownloadFeastAppCta.tsx b/client/components/mma/shared/DownloadFeastAppCta.tsx new file mode 100644 index 000000000..6ef56b4aa --- /dev/null +++ b/client/components/mma/shared/DownloadFeastAppCta.tsx @@ -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 ( +
+
+
+

If you haven't already, download the Feast App

+

+ Make a feast out of anything with the Guardian's new + recipe app - Feast. +

+
+ + + +
+
+ + +
+
+ ); +}; diff --git a/client/components/mma/shared/assets/FeastAppIcon.tsx b/client/components/mma/shared/assets/FeastAppIcon.tsx new file mode 100644 index 000000000..07ce7b23b --- /dev/null +++ b/client/components/mma/shared/assets/FeastAppIcon.tsx @@ -0,0 +1,89 @@ +import type { SerializedStyles } from '@emotion/react'; + +interface FeastAppIconProps { + additionalCss?: SerializedStyles; +} + +export const FeastAppIcon = (props: FeastAppIconProps) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/shared/externalLinks.ts b/shared/externalLinks.ts index c7122e027..b46632e90 100644 --- a/shared/externalLinks.ts +++ b/shared/externalLinks.ts @@ -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';