One last step ...
-
-
- Activate full app access now
-
-
+
+ Activate full app access now
+
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
index 1bba5c567..5649a6ef6 100644
--- 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}
>
-
-
-
+
diff --git a/client/components/mma/switch/review/SwitchReview.tsx b/client/components/mma/switch/review/SwitchReview.tsx
index 6030a212e..eec2ddf4e 100644
--- a/client/components/mma/switch/review/SwitchReview.tsx
+++ b/client/components/mma/switch/review/SwitchReview.tsx
@@ -1,11 +1,11 @@
-import { css, ThemeProvider } from '@emotion/react';
+import { css } from '@emotion/react';
import { from, palette, space, textSans } from '@guardian/source-foundations';
import {
Button,
- buttonThemeReaderRevenueBrand,
Stack,
SvgClock,
SvgCreditCard,
+ themeButtonReaderRevenueBrand,
} from '@guardian/source-react-components';
import { useContext, useState } from 'react';
import { Navigate, useLocation, useNavigate } from 'react-router';
@@ -296,20 +296,19 @@ export const SwitchReview = () => {
-
-
-
+
)}
-
-
-
+
{confirmationError && (
diff --git a/client/components/mma/upgrade/UpgradeSupportAmountForm.tsx b/client/components/mma/upgrade/UpgradeSupportAmountForm.tsx
index f735e124f..8a9466614 100644
--- a/client/components/mma/upgrade/UpgradeSupportAmountForm.tsx
+++ b/client/components/mma/upgrade/UpgradeSupportAmountForm.tsx
@@ -1,12 +1,12 @@
-import { css, ThemeProvider } from '@emotion/react';
+import { css } from '@emotion/react';
import { space } from '@guardian/source-foundations';
import {
Button,
- buttonThemeReaderRevenueBrand,
ChoiceCard,
ChoiceCardGroup,
Stack,
TextInput,
+ themeButtonReaderRevenueBrand,
} from '@guardian/source-react-components';
import type { Dispatch, SetStateAction } from 'react';
import { useContext, useEffect, useState } from 'react';
@@ -235,21 +235,18 @@ export const UpgradeSupportAmountForm = ({
!errorMessage &&
!!chosenAmount && (
- {
+ setContinuedToConfirmation(true);
+ scrollToConfirmChange();
+ }}
>
-
-
+ Continue with {currencySymbol}
+ {formatAmount(chosenAmount)}/
+ {mainPlan.billingPeriod}
+
)}
diff --git a/client/components/shared/SupportTheGuardianButton.tsx b/client/components/shared/SupportTheGuardianButton.tsx
index 6a9d42b3a..5935fbb13 100644
--- a/client/components/shared/SupportTheGuardianButton.tsx
+++ b/client/components/shared/SupportTheGuardianButton.tsx
@@ -1,11 +1,10 @@
import url from 'url';
-import { ThemeProvider } from '@emotion/react';
import {
- buttonThemeDefault,
- buttonThemeReaderRevenueBrand,
- buttonThemeReaderRevenueBrandAlt,
LinkButton,
SvgArrowRightStraight,
+ themeButton,
+ themeButtonReaderRevenueBrand,
+ themeButtonReaderRevenueBrandAlt,
} from '@guardian/source-react-components';
import { conf } from '../../../server/config';
import { trackEvent } from '../../utilities/analytics';
@@ -56,31 +55,30 @@ export const SupportTheGuardianButton = (
props: SupportTheGuardianButtonProps,
) => {
const mapThemes = {
- default: buttonThemeDefault,
- brand: buttonThemeReaderRevenueBrand,
- brandAlt: buttonThemeReaderRevenueBrandAlt,
+ default: themeButton,
+ brand: themeButtonReaderRevenueBrand,
+ brandAlt: themeButtonReaderRevenueBrandAlt,
};
const theme = mapThemes[props.theme ?? 'default'];
return (
-
- }
- iconSide="right"
- nudgeIcon={true}
- size={props.size}
- onClick={() => {
- trackEvent({
- eventCategory: 'href',
- eventAction: 'support_the_guardian',
- eventLabel: 'support_from_' + props.supportReferer,
- });
- }}
- >
- {props.alternateButtonText || 'Support the Guardian'}
-
-
+ }
+ iconSide="right"
+ nudgeIcon={true}
+ size={props.size}
+ onClick={() => {
+ trackEvent({
+ eventCategory: 'href',
+ eventAction: 'support_the_guardian',
+ eventLabel: 'support_from_' + props.supportReferer,
+ });
+ }}
+ >
+ {props.alternateButtonText || 'Support the Guardian'}
+
);
};
diff --git a/package.json b/package.json
index ee4575f87..bc7875bc9 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
"@emotion/jest": "11.9.1",
"@guardian/eslint-config-typescript": "9.0.2",
"@guardian/eslint-plugin-source-foundations": "17.0.1",
- "@guardian/eslint-plugin-source-react-components": "21.0.1",
+ "@guardian/eslint-plugin-source-react-components": "24.0.1",
"@guardian/node-riffraff-artifact": "0.2.2",
"@guardian/prettier": "1.0.0",
"@guardian/tsconfig": "0.1.6",
@@ -149,9 +149,9 @@
"@guardian/ab-react": "2.0.1",
"@guardian/commercial": "17.9.0",
"@guardian/libs": "16.1.0",
- "@guardian/source-foundations": "13.2.0",
- "@guardian/source-react-components": "16.0.1",
- "@guardian/source-react-components-development-kitchen": "14.0.2",
+ "@guardian/source-foundations": "16.0.0",
+ "@guardian/source-react-components": "25.0.0",
+ "@guardian/source-react-components-development-kitchen": "21.0.0",
"@okta/jwt-verifier": "3.0.1",
"@sentry/browser": "5.22.3",
"@sentry/node": "5.22.3",
diff --git a/yarn.lock b/yarn.lock
index 3e897c719..d331836e5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2978,13 +2978,13 @@
"@typescript-eslint/parser" "6.18.0"
eslint-plugin-import "2.29.1"
-"@guardian/eslint-plugin-source-react-components@21.0.1":
- version "21.0.1"
- resolved "https://registry.yarnpkg.com/@guardian/eslint-plugin-source-react-components/-/eslint-plugin-source-react-components-21.0.1.tgz#d709a9a559e3b68aae0a8de67414266316707840"
- integrity sha512-erMqLMhgGbzJAjViZMNtE8DjrpJuRurreBBeuttbaxrIE3eKX2p3QTYJKxE0fqAyIRhTCV3/M+sil9RTifN1Xw==
+"@guardian/eslint-plugin-source-react-components@24.0.1":
+ version "24.0.1"
+ resolved "https://registry.yarnpkg.com/@guardian/eslint-plugin-source-react-components/-/eslint-plugin-source-react-components-24.0.1.tgz#e70ce2b8e249bb6790d10be2e3c91223a6c802d1"
+ integrity sha512-2opgruOKoCp1tAW2vdhl+UpHq2osoN4DAQqrtNsWUCqXtdqAxsXLM9jWqwUzTY68EjFoqg3whxJrbFYWByILCQ==
dependencies:
- "@typescript-eslint/eslint-plugin" "6.18.0"
- "@typescript-eslint/parser" "6.18.0"
+ "@typescript-eslint/eslint-plugin" "6.21.0"
+ "@typescript-eslint/parser" "6.21.0"
"@guardian/libs@16.1.0":
version "16.1.0"
@@ -3043,22 +3043,22 @@
resolved "https://registry.yarnpkg.com/@guardian/prettier/-/prettier-1.0.0.tgz#a5dd832e2ce31c6f723f0af77fe116b32b4695ff"
integrity sha512-srnhPn3hcSv14mDotFQN0CfN3k8MaGsXdK8BXAG95QQxM69Ybi16o4/Xqe361fwDEp7m+9jf03sETcMi8WsDlA==
-"@guardian/source-foundations@13.2.0":
- version "13.2.0"
- resolved "https://registry.yarnpkg.com/@guardian/source-foundations/-/source-foundations-13.2.0.tgz#ef2da59a089f83606b9afd333d5f02c77cd882b5"
- integrity sha512-HKgpuzk00+JiqLB2cMln5gJXvu1lQ2OcfqX8s7w0kPdnC3cSBw/emziM3bx4ib3GXs5CMjQb6g3rhGy/DCjLKg==
+"@guardian/source-foundations@16.0.0":
+ version "16.0.0"
+ resolved "https://registry.yarnpkg.com/@guardian/source-foundations/-/source-foundations-16.0.0.tgz#dd4821dffa8aabcfb21d3fc76b0f416bf67aa577"
+ integrity sha512-bdRcJTEJ6tGmibGRwhQcY70NMACHCcsnNsiWRwW1fSPpvcAuR4xvXmn3UlaL1U/RO4Yk1YvJjPiV/n9WHnjbjQ==
dependencies:
mini-svg-data-uri "1.4.4"
-"@guardian/source-react-components-development-kitchen@14.0.2":
- version "14.0.2"
- resolved "https://registry.yarnpkg.com/@guardian/source-react-components-development-kitchen/-/source-react-components-development-kitchen-14.0.2.tgz#c8bab2cf21717b5c857dad075bca8a12112c0b13"
- integrity sha512-F5nDwRuekC9ZUSEy+FdXMnke/q/rYi4Mple2t1rv6d61oHsOnnGxReQtfPYyVnYv5zGYo8phlOtLGstSQg3DRQ==
+"@guardian/source-react-components-development-kitchen@21.0.0":
+ version "21.0.0"
+ resolved "https://registry.yarnpkg.com/@guardian/source-react-components-development-kitchen/-/source-react-components-development-kitchen-21.0.0.tgz#8f428c9506289fd8e26dd6381f9f82158547f8f4"
+ integrity sha512-rhh9wv9PsNqkOJGWWc7iqoGvhvPPYaKDA3TF6xIpV6KVQAuESIkBmL7NrbEyBO2btStJ6UMTtGd0kpCZPrRr5Q==
-"@guardian/source-react-components@16.0.1":
- version "16.0.1"
- resolved "https://registry.yarnpkg.com/@guardian/source-react-components/-/source-react-components-16.0.1.tgz#24d4c4081e6a293a101b3217b598fccf151b04bd"
- integrity sha512-M/zrs+G5NqykicECNf803B9815tVkPfazwmYsGfrDdKGptBmLhcofGlpC/MGdKiJ9lTlOQBieUyZ2y6i2mBJyQ==
+"@guardian/source-react-components@25.0.0":
+ version "25.0.0"
+ resolved "https://registry.yarnpkg.com/@guardian/source-react-components/-/source-react-components-25.0.0.tgz#c4c8ac53b92a7ed4ebde6823c8f7d80151f8375a"
+ integrity sha512-9llnT6DUiLmdhklciMO75SBC9DbBqLw+jBWxhu60J+uAyw7B2WqG9Bmk8wPBCSrRe4hNvsosJyVMI+KiRb48Bw==
"@guardian/tsconfig@0.1.6":
version "0.1.6"
@@ -5575,6 +5575,23 @@
semver "^7.5.4"
ts-api-utils "^1.0.1"
+"@typescript-eslint/eslint-plugin@6.21.0":
+ version "6.21.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz#30830c1ca81fd5f3c2714e524c4303e0194f9cd3"
+ integrity sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==
+ dependencies:
+ "@eslint-community/regexpp" "^4.5.1"
+ "@typescript-eslint/scope-manager" "6.21.0"
+ "@typescript-eslint/type-utils" "6.21.0"
+ "@typescript-eslint/utils" "6.21.0"
+ "@typescript-eslint/visitor-keys" "6.21.0"
+ debug "^4.3.4"
+ graphemer "^1.4.0"
+ ignore "^5.2.4"
+ natural-compare "^1.4.0"
+ semver "^7.5.4"
+ ts-api-utils "^1.0.1"
+
"@typescript-eslint/parser@6.18.0":
version "6.18.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-6.18.0.tgz#d494161d64832e869f0a6acc6000a2cdff858383"
@@ -5586,6 +5603,17 @@
"@typescript-eslint/visitor-keys" "6.18.0"
debug "^4.3.4"
+"@typescript-eslint/parser@6.21.0":
+ version "6.21.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-6.21.0.tgz#af8fcf66feee2edc86bc5d1cf45e33b0630bf35b"
+ integrity sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==
+ dependencies:
+ "@typescript-eslint/scope-manager" "6.21.0"
+ "@typescript-eslint/types" "6.21.0"
+ "@typescript-eslint/typescript-estree" "6.21.0"
+ "@typescript-eslint/visitor-keys" "6.21.0"
+ debug "^4.3.4"
+
"@typescript-eslint/scope-manager@5.60.0":
version "5.60.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.60.0.tgz#ae511967b4bd84f1d5e179bb2c82857334941c1c"
@@ -5602,6 +5630,14 @@
"@typescript-eslint/types" "6.18.0"
"@typescript-eslint/visitor-keys" "6.18.0"
+"@typescript-eslint/scope-manager@6.21.0":
+ version "6.21.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz#ea8a9bfc8f1504a6ac5d59a6df308d3a0630a2b1"
+ integrity sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==
+ dependencies:
+ "@typescript-eslint/types" "6.21.0"
+ "@typescript-eslint/visitor-keys" "6.21.0"
+
"@typescript-eslint/type-utils@6.18.0":
version "6.18.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-6.18.0.tgz#a492da599da5c38c70aa9ff9bfb473961b8ae663"
@@ -5612,6 +5648,16 @@
debug "^4.3.4"
ts-api-utils "^1.0.1"
+"@typescript-eslint/type-utils@6.21.0":
+ version "6.21.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-6.21.0.tgz#6473281cfed4dacabe8004e8521cee0bd9d4c01e"
+ integrity sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==
+ dependencies:
+ "@typescript-eslint/typescript-estree" "6.21.0"
+ "@typescript-eslint/utils" "6.21.0"
+ debug "^4.3.4"
+ ts-api-utils "^1.0.1"
+
"@typescript-eslint/types@5.60.0":
version "5.60.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.60.0.tgz#3179962b28b4790de70e2344465ec97582ce2558"
@@ -5622,6 +5668,11 @@
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.18.0.tgz#ffce610a1540c17cf7d8ecf2bb34b8b0e2e77101"
integrity sha512-/RFVIccwkwSdW/1zeMx3hADShWbgBxBnV/qSrex6607isYjj05t36P6LyONgqdUrNLl5TYU8NIKdHUYpFvExkA==
+"@typescript-eslint/types@6.21.0":
+ version "6.21.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.21.0.tgz#205724c5123a8fef7ecd195075fa6e85bac3436d"
+ integrity sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==
+
"@typescript-eslint/typescript-estree@5.60.0":
version "5.60.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.60.0.tgz#4ddf1a81d32a850de66642d9b3ad1e3254fb1600"
@@ -5649,6 +5700,20 @@
semver "^7.5.4"
ts-api-utils "^1.0.1"
+"@typescript-eslint/typescript-estree@6.21.0":
+ version "6.21.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz#c47ae7901db3b8bddc3ecd73daff2d0895688c46"
+ integrity sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==
+ dependencies:
+ "@typescript-eslint/types" "6.21.0"
+ "@typescript-eslint/visitor-keys" "6.21.0"
+ debug "^4.3.4"
+ globby "^11.1.0"
+ is-glob "^4.0.3"
+ minimatch "9.0.3"
+ semver "^7.5.4"
+ ts-api-utils "^1.0.1"
+
"@typescript-eslint/utils@6.18.0":
version "6.18.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-6.18.0.tgz#4d07c9c08f84b9939a1aca7aef98c8f378936142"
@@ -5662,6 +5727,19 @@
"@typescript-eslint/typescript-estree" "6.18.0"
semver "^7.5.4"
+"@typescript-eslint/utils@6.21.0":
+ version "6.21.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-6.21.0.tgz#4714e7a6b39e773c1c8e97ec587f520840cd8134"
+ integrity sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==
+ dependencies:
+ "@eslint-community/eslint-utils" "^4.4.0"
+ "@types/json-schema" "^7.0.12"
+ "@types/semver" "^7.5.0"
+ "@typescript-eslint/scope-manager" "6.21.0"
+ "@typescript-eslint/types" "6.21.0"
+ "@typescript-eslint/typescript-estree" "6.21.0"
+ semver "^7.5.4"
+
"@typescript-eslint/utils@^5.10.0":
version "5.60.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.60.0.tgz#4667c5aece82f9d4f24a667602f0f300864b554c"
@@ -5692,6 +5770,14 @@
"@typescript-eslint/types" "6.18.0"
eslint-visitor-keys "^3.4.1"
+"@typescript-eslint/visitor-keys@6.21.0":
+ version "6.21.0"
+ resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz#87a99d077aa507e20e238b11d56cc26ade45fe47"
+ integrity sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==
+ dependencies:
+ "@typescript-eslint/types" "6.21.0"
+ eslint-visitor-keys "^3.4.1"
+
"@webassemblyjs/ast@1.11.1":
version "1.11.1"
resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"