update source-react-components dependancy and theme usage

guardian · May 22, 2024 · e125729 · e125729
1 parent 56515fc
commit e125729
Show file tree

Hide file tree

Showing 14 changed files with 264 additions and 203 deletions.
diff --git a/client/components/mma/accountoverview/ProductCard.tsx b/client/components/mma/accountoverview/ProductCard.tsx
@@ -1,10 +1,10 @@
-import { css, ThemeProvider } from '@emotion/react';
+import { css } from '@emotion/react';
 import { palette, textSans } from '@guardian/source-foundations';
 import {
 	Button,
-	buttonThemeReaderRevenueBrand,
 	Stack,
 	SvgInfoRound,
+	themeButtonReaderRevenueBrand,
 } from '@guardian/source-react-components';
 import { InfoSummary } from '@guardian/source-react-components-development-kitchen';
 import { useNavigate } from 'react-router';
@@ -352,27 +352,23 @@ export const ProductCard = ({
 								</Button>
 							)}
 							{showSwitchButton && (
-								<ThemeProvider
-									theme={buttonThemeReaderRevenueBrand}
+								<Button
+									theme={themeButtonReaderRevenueBrand}
+									size="small"
+									cssOverrides={css`
+										justify-content: center;
+									`}
+									onClick={() =>
+										navigate(`/switch`, {
+											state: {
+												productDetail: productDetail,
+												user: user,
+											},
+										})
+									}
 								>
-									<Button
-										size="small"
-										cssOverrides={css`
-											justify-content: center;
-										`}
-										onClick={() =>
-											navigate(`/switch`, {
-												state: {
-													productDetail:
-														productDetail,
-													user: user,
-												},
-											})
-										}
-									>
-										Change to all-access digital
-									</Button>
-								</ThemeProvider>
+									Change to all-access digital
+								</Button>
 							)}
 						</div>
 					</div>
@@ -385,7 +381,7 @@ export const ProductCard = ({
 							</h4>
 							<div>
 								<dl css={keyValueCss}>
-									<dt>{atob('TFBQRlJFRTZHTFRY')}</dt>
+									<dt>{window.atob('TFBQRlJFRTZHTFRY')}</dt>
 									<dd>
 										gives you 6 free tickets each year (1
 										per event)
@@ -394,7 +390,7 @@ export const ProductCard = ({
 							</div>
 							<div>
 								<dl css={keyValueCss}>
-									<dt>{atob('TFBQMjAyR0xUWA==')}</dt>
+									<dt>{window.atob('TFBQMjAyR0xUWA==')}</dt>
 									<dd>
 										gives you 20% off an extra 2 tickets per
 										event

diff --git a/client/components/mma/accountoverview/updateAmount/SupporterPlusUpdateAmountForm.tsx b/client/components/mma/accountoverview/updateAmount/SupporterPlusUpdateAmountForm.tsx
@@ -1,14 +1,14 @@
-import { css, ThemeProvider } from '@emotion/react';
+import { css } from '@emotion/react';
 import { palette, space, textSans, until } from '@guardian/source-foundations';
 import {
 	Button,
-	buttonThemeReaderRevenueBrand,
 	ChoiceCard,
 	ChoiceCardGroup,
 	InlineError,
 	Link,
 	SvgInfoRound,
 	TextInput,
+	themeButtonReaderRevenueBrand,
 } from '@guardian/source-react-components';
 import { useEffect, useState } from 'react';
 import type { PaidSubscriptionPlan } from '../../../../../shared/productResponse';
@@ -323,17 +323,14 @@ export const SupporterPlusUpdateAmountForm = (
 								buttonContainerCss,
 							]}
 						>
-							<ThemeProvider
-								theme={buttonThemeReaderRevenueBrand}
+							<Button
+								theme={themeButtonReaderRevenueBrand}
+								cssOverrides={buttonCentredCss}
+								onClick={changeAmountClick}
+								size="small"
 							>
-								<Button
-									cssOverrides={buttonCentredCss}
-									onClick={changeAmountClick}
-									size="small"
-								>
-									Change amount
-								</Button>
-							</ThemeProvider>
+								Change amount
+							</Button>
 						</section>
 						<div
 							css={css`

diff --git a/client/components/mma/cancel/cancellationSaves/digipack/DigiSubThankYouOffer.tsx b/client/components/mma/cancel/cancellationSaves/digipack/DigiSubThankYouOffer.tsx
@@ -1,10 +1,10 @@
-import { css, ThemeProvider } from '@emotion/react';
+import { css } from '@emotion/react';
 import { from, headline, space, textSans } from '@guardian/source-foundations';
 import {
 	Button,
-	buttonThemeReaderRevenueBrand,
 	Stack,
 	SvgTickRound,
+	themeButtonReaderRevenueBrand,
 } from '@guardian/source-react-components';
 import { ErrorSummary } from '@guardian/source-react-components-development-kitchen';
 import { useContext, useEffect, useState } from 'react';
@@ -103,15 +103,14 @@ const DiscountOffer = ({
 			</ul>
 		</div>
 		<div css={buttonContainerCss}>
-			<ThemeProvider theme={buttonThemeReaderRevenueBrand}>
-				<Button
-					cssOverrides={buttonCentredCss}
-					onClick={handleDiscountOfferClick}
-					isLoading={isDiscountLoading}
-				>
-					Keep support with discount
-				</Button>
-			</ThemeProvider>
+			<Button
+				theme={themeButtonReaderRevenueBrand}
+				cssOverrides={buttonCentredCss}
+				onClick={handleDiscountOfferClick}
+				isLoading={isDiscountLoading}
+			>
+				Keep support with discount
+			</Button>
 		</div>
 		{hasDiscountFailed && (
 			<ErrorSummary

diff --git a/client/components/mma/cancel/cancellationSaves/membership/MembershipSwitch.tsx b/client/components/mma/cancel/cancellationSaves/membership/MembershipSwitch.tsx
@@ -1,11 +1,11 @@
-import { css, ThemeProvider } from '@emotion/react';
+import { css } from '@emotion/react';
 import { palette, space, textSans } from '@guardian/source-foundations';
 import {
 	Button,
-	buttonThemeReaderRevenueBrand,
 	Stack,
 	SvgClock,
 	SvgCreditCard,
+	themeButtonReaderRevenueBrand,
 } from '@guardian/source-react-components';
 import { ErrorSummary } from '@guardian/source-react-components-development-kitchen';
 import { useContext, useEffect, useState } from 'react';
@@ -307,15 +307,14 @@ export const MembershipSwitch = () => {
 			)}
 
 			<section css={[sectionSpacing, stackedButtonLayoutCss]}>
-				<ThemeProvider theme={buttonThemeReaderRevenueBrand}>
-					<Button
-						cssOverrides={[buttonCentredCss, wideButtonCss]}
-						isLoading={isSwitching}
-						onClick={confirmSwitch}
-					>
-						Confirm change
-					</Button>
-				</ThemeProvider>
+				<Button
+					theme={themeButtonReaderRevenueBrand}
+					cssOverrides={[buttonCentredCss, wideButtonCss]}
+					isLoading={isSwitching}
+					onClick={confirmSwitch}
+				>
+					Confirm change
+				</Button>
 				<Button
 					priority="tertiary"
 					cssOverrides={[buttonCentredCss, buttonMutedCss]}

diff --git a/client/components/mma/cancel/cancellationSaves/membership/SaveOptions.tsx b/client/components/mma/cancel/cancellationSaves/membership/SaveOptions.tsx
@@ -1,4 +1,4 @@
-import { css, ThemeProvider } from '@emotion/react';
+import { css } from '@emotion/react';
 import {
 	from,
 	palette,
@@ -8,8 +8,8 @@ import {
 } from '@guardian/source-foundations';
 import {
 	Button,
-	buttonThemeReaderRevenueBrand,
 	Stack,
+	themeButtonReaderRevenueBrand,
 } from '@guardian/source-react-components';
 import { useContext } from 'react';
 import { Navigate, useLocation, useNavigate } from 'react-router';
@@ -150,18 +150,15 @@ export const SaveOptions = () => {
 							benefits={benefitsConfiguration['membership']}
 						/>
 						<section css={[cardSectionCss, buttonContainerCss]}>
-							<ThemeProvider
-								theme={buttonThemeReaderRevenueBrand}
+							<Button
+								theme={themeButtonReaderRevenueBrand}
+								cssOverrides={buttonCentredCss}
+								size="small"
+								onClick={() => navigate('../thank-you')}
 							>
-								<Button
-									cssOverrides={buttonCentredCss}
-									size="small"
-									onClick={() => navigate('../thank-you')}
-								>
-									Keep my Membership for {newPriceDisplay}/
-									{billingPeriod}
-								</Button>
-							</ThemeProvider>
+								Keep my Membership for {newPriceDisplay}/
+								{billingPeriod}
+							</Button>
 						</section>
 					</Card.Section>
 				</Card>
@@ -194,21 +191,18 @@ export const SaveOptions = () => {
 							benefits={benefitsConfiguration['contributions']}
 						/>
 						<section css={[cardSectionCss, buttonContainerCss]}>
-							<ThemeProvider
-								theme={buttonThemeReaderRevenueBrand}
+							<Button
+								theme={themeButtonReaderRevenueBrand}
+								cssOverrides={buttonCentredCss}
+								size="small"
+								onClick={() =>
+									navigate('../switch-offer', {
+										state: { ...routerState },
+									})
+								}
 							>
-								<Button
-									cssOverrides={buttonCentredCss}
-									size="small"
-									onClick={() =>
-										navigate('../switch-offer', {
-											state: { ...routerState },
-										})
-									}
-								>
-									Become a recurring contributor
-								</Button>
-							</ThemeProvider>
+								Become a recurring contributor
+							</Button>
 						</section>
 					</Card.Section>
 				</Card>

diff --git a/client/components/mma/paymentUpdate/PaymentDetailUpdateConfirmation.tsx b/client/components/mma/paymentUpdate/PaymentDetailUpdateConfirmation.tsx
@@ -1,4 +1,4 @@
-import { css, ThemeProvider } from '@emotion/react';
+import { css } from '@emotion/react';
 import {
 	from,
 	headline,
@@ -9,8 +9,8 @@ import {
 } from '@guardian/source-foundations';
 import {
 	Button,
-	buttonThemeReaderRevenueBrand,
 	LinkButton,
+	themeButtonReaderRevenueBrand,
 } from '@guardian/source-react-components';
 import { InfoSummary } from '@guardian/source-react-components-development-kitchen';
 import { useContext } from 'react';
@@ -388,14 +388,13 @@ export const PaymentMethodUpdated = ({
 			<span> You are helping to support independent journalism.</span>
 			<div css={{ marginTop: `${space[9]}px` }}>
 				{isFromApp ? (
-					<ThemeProvider theme={buttonThemeReaderRevenueBrand}>
-						<LinkButton
-							href="x-gu://mma/payment-update?success"
-							cssOverrides={buttonCentredCss}
-						>
-							Return to the app
-						</LinkButton>
-					</ThemeProvider>
+					<LinkButton
+						theme={themeButtonReaderRevenueBrand}
+						href="x-gu://mma/payment-update?success"
+						cssOverrides={buttonCentredCss}
+					>
+						Return to the app
+					</LinkButton>
 				) : (
 					<MMALinkButton
 						to="/"

diff --git a/client/components/mma/switch/complete/SwitchComplete.tsx b/client/components/mma/switch/complete/SwitchComplete.tsx
@@ -1,4 +1,4 @@
-import { css, ThemeProvider } from '@emotion/react';
+import { css } from '@emotion/react';
 import {
 	from,
 	headline,
@@ -8,12 +8,12 @@ import {
 	until,
 } from '@guardian/source-foundations';
 import {
-	buttonThemeReaderRevenueBrand,
 	LinkButton,
 	Stack,
 	SvgCalendar,
 	SvgClock,
 	SvgEnvelope,
+	themeButtonReaderRevenueBrand,
 } from '@guardian/source-react-components';
 import { useContext } from 'react';
 import { Navigate, useLocation } from 'react-router';
@@ -161,14 +161,13 @@ const AppThankYouBanner = (props: {
 			</h2>
 			<p css={thankYouBannerSubheadingCss}>One last step ...</p>
 			<div css={thankYouBannerButtonCss}>
-				<ThemeProvider theme={buttonThemeReaderRevenueBrand}>
-					<LinkButton
-						href="x-gu://mma/success"
-						cssOverrides={buttonCentredCss}
-					>
-						Activate full app access now
-					</LinkButton>
-				</ThemeProvider>
+				<LinkButton
+					theme={themeButtonReaderRevenueBrand}
+					href="x-gu://mma/success"
+					cssOverrides={buttonCentredCss}
+				>
+					Activate full app access now
+				</LinkButton>
 			</div>
 			<p css={thankYouBannerCopyCss}>
 				If you don’t complete this step, you may be unable to access the

diff --git a/client/components/mma/switch/options/SwitchOptions.tsx b/client/components/mma/switch/options/SwitchOptions.tsx
@@ -1,9 +1,9 @@
-import { css, ThemeProvider } from '@emotion/react';
+import { css } from '@emotion/react';
 import { palette, space, textSans, until } from '@guardian/source-foundations';
 import {
 	Button,
-	buttonThemeReaderRevenueBrand,
 	Stack,
+	themeButtonReaderRevenueBrand,
 } from '@guardian/source-react-components';
 import { ErrorSummary } from '@guardian/source-react-components-development-kitchen';
 import { useContext, useEffect, useRef, useState } from 'react';
@@ -259,21 +259,20 @@ export const SwitchOptions = () => {
 				css={[buttonContainerCss, buttonIsStuck && buttonStuckCss]}
 				ref={buttonContainerRef}
 			>
-				<ThemeProvider theme={buttonThemeReaderRevenueBrand}>
-					<Button
-						size="small"
-						cssOverrides={buttonCentredCss}
-						onClick={() =>
-							navigate('review', {
-								state: routerState,
-							})
-						}
-					>
-						{isAboveThreshold
-							? 'Add extras'
-							: `Upgrade to ${mainPlan.currency}${threshold} per ${mainPlan.billingPeriod}`}
-					</Button>
-				</ThemeProvider>
+				<Button
+					theme={themeButtonReaderRevenueBrand}
+					size="small"
+					cssOverrides={buttonCentredCss}
+					onClick={() =>
+						navigate('review', {
+							state: routerState,
+						})
+					}
+				>
+					{isAboveThreshold
+						? 'Add extras'
+						: `Upgrade to ${mainPlan.currency}${threshold} per ${mainPlan.billingPeriod}`}
+				</Button>
 			</section>
 
 			<section>