feat: moved session Storage to own file

guardian · Jan 29, 2025 · 738cc37 · 738cc37
1 parent 2f4ec22
commit 738cc37
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 58 deletions.
diff --git a/support-frontend/assets/pages/[countryGroupId]/checkout/helpers/sessionStorage.ts b/support-frontend/assets/pages/[countryGroupId]/checkout/helpers/sessionStorage.ts
@@ -0,0 +1,47 @@
+import { storage } from '@guardian/libs';
+import { type InferInput, object, picklist, safeParse, string } from 'valibot';
+
+/**
+ * The Guardian Ad-Lite Landing Page sets the returnLink in sessionStorage
+ * And the thank-you page reads it.
+ */
+export const ReturnAddressSchema = object({
+	link: string(),
+});
+export function setReturnAddress(link: InferInput<typeof ReturnAddressSchema>) {
+	storage.session.set('returnAddress', link);
+}
+export function getReturnAddress() {
+	const sessionStorageReturnAddress = storage.session.get('returnAddress');
+	const parsedReturnAddress = safeParse(
+		ReturnAddressSchema,
+		sessionStorageReturnAddress,
+	);
+	return parsedReturnAddress.success
+		? parsedReturnAddress.output.link
+		: 'https://www.theguardian.com';
+}
+
+/**
+ * The checkout page sets the order in sessionStorage
+ * And the thank-you page reads it.
+ */
+export const OrderSchema = object({
+	firstName: string(),
+	email: string(),
+	paymentMethod: picklist([
+		'Stripe',
+		'StripeExpressCheckoutElement',
+		'PayPal',
+		'DirectDebit',
+		'Sepa',
+		'None',
+	]),
+	status: picklist(['success', 'pending']),
+});
+export function setThankYouOrder(order: InferInput<typeof OrderSchema>) {
+	storage.session.set('thankYouOrder', order);
+}
+export function unsetThankYouOrder() {
+	storage.session.remove('thankYouOrder');
+}
diff --git a/support-frontend/assets/pages/[countryGroupId]/components/checkoutComponent.tsx b/support-frontend/assets/pages/[countryGroupId]/components/checkoutComponent.tsx
@@ -112,6 +112,10 @@ import {
 	paypalOneClickCheckout,
 	setupPayPalPayment,
 } from '../checkout/helpers/paypal';
+import {
+	setThankYouOrder,
+	unsetThankYouOrder,
+} from '../checkout/helpers/sessionStorage';
 import {
 	stripeCreateSetupIntentPrb,
 	stripeCreateSetupIntentRecaptcha,
@@ -131,7 +135,6 @@ import {
 	PaymentMethodSelector,
 } from './paymentMethod';
 import { retryPaymentStatus } from './retryPaymentStatus';
-import { setThankYouOrder, unsetThankYouOrder } from './thankYouComponent';
 
 /**
  * We have not added StripeExpressCheckoutElement to the old PaymentMethod

diff --git a/support-frontend/assets/pages/[countryGroupId]/components/oneTimeCheckoutComponent.tsx b/support-frontend/assets/pages/[countryGroupId]/components/oneTimeCheckoutComponent.tsx
@@ -81,6 +81,7 @@ import { FinePrint } from 'pages/supporter-plus-landing/components/finePrint';
 import { GuardianTsAndCs } from 'pages/supporter-plus-landing/components/guardianTsAndCs';
 import { PatronsMessage } from 'pages/supporter-plus-landing/components/patronsMessage';
 import { TsAndCsFooterLinks } from 'pages/supporter-plus-landing/components/paymentTsAndCs';
+import { setThankYouOrder } from '../checkout/helpers/sessionStorage';
 import {
 	doesNotContainExtendedEmojiOrLeadingSpace,
 	preventDefaultValidityMessage,
@@ -95,7 +96,6 @@ import {
 	PaymentMethodRadio,
 	PaymentMethodSelector,
 } from './paymentMethod';
-import { setThankYouOrder } from './thankYouComponent';
 
 /**
  * We have not added StripeExpressCheckoutElement to the old PaymentMethod

diff --git a/support-frontend/assets/pages/[countryGroupId]/components/thankYouComponent.tsx b/support-frontend/assets/pages/[countryGroupId]/components/thankYouComponent.tsx
@@ -3,8 +3,7 @@ import { storage } from '@guardian/libs';
 import { from, space, sport } from '@guardian/source/foundations';
 import { Container, LinkButton } from '@guardian/source/react-components';
 import { FooterWithContents } from '@guardian/source-development-kitchen/react-components';
-import type { InferInput } from 'valibot';
-import { object, picklist, safeParse, string } from 'valibot';
+import { safeParse } from 'valibot';
 import { Header } from 'components/headers/simpleHeader/simpleHeader';
 import { PageScaffold } from 'components/page/pageScaffold';
 import type { ThankYouModuleType } from 'components/thankYou/thankYouModule';
@@ -37,7 +36,10 @@ import ThankYouFooter from 'pages/supporter-plus-thank-you/components/thankYouFo
 import ThankYouHeader from 'pages/supporter-plus-thank-you/components/thankYouHeader/thankYouHeader';
 import { getGuardianAdLiteDate } from 'pages/weekly-subscription-checkout/helpers/deliveryDays';
 import { ThankYouModules } from '../../../components/thankYou/thankyouModules';
-import { ReturnAddressSchema } from '../guardianAdLiteLanding/guardianAdLiteLanding';
+import {
+	getReturnAddress,
+	OrderSchema,
+} from '../checkout/helpers/sessionStorage';
 
 const checkoutContainer = css`
 	${from.tablet} {
@@ -56,30 +58,6 @@ const buttonContainer = css`
 	padding: ${space[12]}px 0;
 `;
 
-/**
- * The checkout page sets the order in sessionStorage
- * And the thank-you page reads it.
- */
-const OrderSchema = object({
-	firstName: string(),
-	email: string(),
-	paymentMethod: picklist([
-		'Stripe',
-		'StripeExpressCheckoutElement',
-		'PayPal',
-		'DirectDebit',
-		'Sepa',
-		'None',
-	]),
-	status: picklist(['success', 'pending']),
-});
-export function setThankYouOrder(order: InferInput<typeof OrderSchema>) {
-	storage.session.set('thankYouOrder', order);
-}
-export function unsetThankYouOrder() {
-	storage.session.remove('thankYouOrder');
-}
-
 type CheckoutComponentProps = {
 	geoId: GeoId;
 	appConfig: AppConfig;
@@ -111,16 +89,6 @@ export function ThankYouComponent({
 	const csrf = { token: window.guardian.csrf.token };
 
 	const { countryGroupId, currencyKey } = getGeoIdConfig(geoId);
-
-	// Session storage returnAddress (from GuardianAdLiteLanding)
-	const sessionStorageReturnAddress = storage.session.get('returnAddress');
-	const parsedReturnAddress = safeParse(
-		ReturnAddressSchema,
-		sessionStorageReturnAddress,
-	);
-	const returnLink = parsedReturnAddress.success
-		? parsedReturnAddress.output.link
-		: 'https://www.theguardian.com';
 	// Session storage order (from Checkout)
 	const sessionStorageOrder = storage.session.get('thankYouOrder');
 	const parsedOrder = safeParse(OrderSchema, sessionStorageOrder);
@@ -265,7 +233,7 @@ export function ThankYouComponent({
 		undefined,
 		payment.finalAmount,
 		formatUserDate(getGuardianAdLiteDate()),
-		returnLink,
+		getReturnAddress(), // Session storage returnAddress (from GuardianAdLiteLanding)
 		isSignedIn,
 	);
 	const maybeThankYouModule = (

diff --git a/...rt-frontend/assets/pages/[countryGroupId]/guardianAdLiteLanding/guardianAdLiteLanding.tsx b/...rt-frontend/assets/pages/[countryGroupId]/guardianAdLiteLanding/guardianAdLiteLanding.tsx
@@ -1,25 +1,20 @@
 import { css } from '@emotion/react';
-import { storage } from '@guardian/libs';
 import { textSans24 } from '@guardian/source/foundations';
-import { type InferInput, object, safeParse, string } from 'valibot';
 import type { CountryGroupSwitcherProps } from 'components/countryGroupSwitcher/countryGroupSwitcher';
 import { GBPCountries } from 'helpers/internationalisation/countryGroup';
 import { isProd } from 'helpers/urls/url';
 import { getUser } from 'helpers/user/user';
 import type { GeoId } from 'pages/geoIdConfig';
 import { getGeoIdConfig } from 'pages/geoIdConfig';
+import {
+	getReturnAddress,
+	setReturnAddress,
+} from '../checkout/helpers/sessionStorage';
 import { AccordianComponent } from './components/accordianComponent';
 import { HeaderCards } from './components/headerCards';
 import { LandingPageLayout } from './components/landingPageLayout';
 import { PosterComponent } from './components/posterComponent';
 
-export const ReturnAddressSchema = object({
-	link: string(),
-});
-function setReturnAddress(link: InferInput<typeof ReturnAddressSchema>) {
-	storage.session.set('returnAddress', link);
-}
-
 type GuardianAdLiteLandingProps = {
 	geoId: GeoId;
 };
@@ -45,21 +40,13 @@ export function GuardianAdLiteLanding({
 	if (urlSearchParamsReturn) {
 		setReturnAddress({ link: urlSearchParamsReturn });
 	}
-	const sessionStorageReturnAddress = storage.session.get('returnAddress');
-	const parsedOrder = safeParse(
-		ReturnAddressSchema,
-		sessionStorageReturnAddress,
-	);
-	const returnLink = parsedOrder.success
-		? parsedOrder.output.link
-		: 'https://www.theguardian.com'; // defaults to urlSearchParamsReturn if available
 	return (
 		<LandingPageLayout countrySwitcherProps={countrySwitcherProps}>
 			{!isProd() ? (
 				<>
 					<HeaderCards
 						geoId={geoId}
-						returnLink={returnLink}
+						returnLink={getReturnAddress()} // defaults to urlSearchParamsReturn if available
 						isSignedIn={user.isSignedIn}
 					/>
 					<PosterComponent />