wip : route attempt to get window.guardian.productCatalog to gain Dig…

…italSubscription Annual Price
guardian · Jan 31, 2025 · 495bab0 · 495bab0
1 parent 0dc4073
commit 495bab0
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 5 deletions.
diff --git a/support-frontend/app/controllers/DigitalSubscriptionController.scala b/support-frontend/app/controllers/DigitalSubscriptionController.scala
@@ -100,4 +100,52 @@ class DigitalSubscriptionController(
     }
   }
 
+  def digitalSubscription(countryCode: String): Action[AnyContent] = {
+    MaybeAuthenticatedAction { implicit request =>
+      implicit val settings: AllSettings = settingsProvider.getAllSettings()
+
+      val title = "Support the Guardian | Get a Subscription"
+
+      val js = "subscriptionsLandingPage.js"
+      val css = "subscriptionsLandingPage.css"
+      val csrf = CSRF.getToken.value
+      val testMode = testUsers.isTestUser(request)
+      val promoCodes = request.queryString.get("promoCode").map(_.toList).getOrElse(Nil)
+      val v2recaptchaConfigPublicKey = recaptchaConfigProvider.get(testMode).v2PublicKey
+      val readerType = Direct
+      val defaultPromos = priceSummaryServiceProvider.forUser(isTestUser = false).getDefaultPromoCodes(DigitalPack)
+      val maybePromotionCopy = {
+        landingCopyProvider.promotionCopy(promoCodes ++ defaultPromos, DigitalPack, "uk")
+      }
+      val mainElement = assets.getSsrCacheContentsAsHtml(
+        divId = s"subscriptions-landing-page-$countryCode",
+        file = "ssr-holding-content.html",
+      )
+
+      val isTestUser = testUserService.isTestUser(request)
+      val productCatalog = cachedProductCatalogServiceProvider.fromStage(stage, isTestUser).get()
+
+      Ok(
+        views.html.subscriptionCheckout(
+          title = title,
+          mainElement = mainElement,
+          js = js,
+          css = css,
+          csrf = Some(csrf),
+          idUser = request.user,
+          testMode = testMode,
+          productPrices = priceSummaryServiceProvider.forUser(testMode).getPrices(DigitalPack, promoCodes, readerType),
+          maybePromotionCopy = maybePromotionCopy,
+          defaultStripeConfig = stripeConfigProvider.get(),
+          testStripeConfig = stripeConfigProvider.get(true),
+          defaultPayPalConfig = payPalConfigProvider.get(),
+          testPayPalConfig = payPalConfigProvider.get(true),
+          v2recaptchaConfigPublicKey = v2recaptchaConfigPublicKey,
+          homeDeliveryPostcodes = None,
+          productCatalog = productCatalog,
+          noIndex = stage != PROD,
+        ),
+      )
+    }
+  }
 }
diff --git a/support-frontend/assets/pages/digital-subscriber-checkout/digitalSubscriptionRouter.tsx b/support-frontend/assets/pages/digital-subscriber-checkout/digitalSubscriptionRouter.tsx
@@ -2,12 +2,17 @@
 import { Provider } from 'react-redux';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { countryGroups } from 'helpers/internationalisation/countryGroup';
-import { setUpTrackingAndConsents } from 'helpers/page/page';
+import {
+	getAbParticipations,
+	setUpTrackingAndConsents,
+} from 'helpers/page/page';
 import { isDetailsSupported, polyfillDetails } from 'helpers/polyfills/details';
 import { initReduxForContributions } from 'helpers/redux/contributionsStore';
 import { renderPage } from 'helpers/rendering/render';
 import { DigitalSubscriptionLandingPage } from 'pages/digital-subscriber-checkout/digitalSubscriptionLandingPage';
 import { DigitalSubscriptionThankYou } from 'pages/digital-subscriber-thank-you/digitalSubscriptionThankYou';
+import { SubscriptionsLandingPage } from 'pages/subscriptions-landing/subscriptionsLanding';
+import { subscriptionsLandingProps } from 'pages/subscriptions-landing/subscriptionsLandingProps';
 import { setUpRedux } from './setup/setUpRedux';
 
 if (!isDetailsSupported) {
@@ -34,6 +39,8 @@ window.guardian.settings = {
 
 setUpRedux(store);
 
+const abParticipations = getAbParticipations();
+setUpTrackingAndConsents(abParticipations);
 const thankYouRoute = 'thankyou';
 const countryIds = Object.values(countryGroups).map(
 	(group) => group.supportInternationalisationId,
@@ -60,6 +67,14 @@ const router = () => {
 								path={`/${countryId}/subscribe/digitaledition/thankyou`}
 								element={<DigitalSubscriptionThankYou />}
 							/>
+							<Route
+								path={`/${countryId}/subscribe`}
+								element={
+									<SubscriptionsLandingPage
+										{...subscriptionsLandingProps(abParticipations)}
+									/>
+								}
+							/>
 						</>
 					))}
 				</Routes>

diff --git a/support-frontend/assets/pages/subscriptions-landing/copy/subscriptionCopy.tsx b/support-frontend/assets/pages/subscriptions-landing/copy/subscriptionCopy.tsx
@@ -9,16 +9,21 @@ import type { CountryGroupId } from 'helpers/internationalisation/countryGroup';
 import { GBPCountries } from 'helpers/internationalisation/countryGroup';
 import { currencies, detect } from 'helpers/internationalisation/currency';
 import type { ProductBenefit } from 'helpers/productCatalog';
-import { productCatalogDescription } from 'helpers/productCatalog';
+import {
+	// productCatalog,
+	productCatalogDescription,
+} from 'helpers/productCatalog';
 import type { BillingPeriod } from 'helpers/productPrice/billingPeriods';
-import { Monthly } from 'helpers/productPrice/billingPeriods';
+import { /* Annual, */ Monthly } from 'helpers/productPrice/billingPeriods';
 import {
 	DigitalPack,
 	fixDecimals,
 	GuardianWeekly,
 	Paper,
 	sendTrackingEventsOnClick,
 } from 'helpers/productPrice/subscriptions';
+// import { getSubscriptionPrices } from 'helpers/redux/checkout/product/selectors/subscriptionPrice';
+// import { useContributionsSelector } from 'helpers/redux/storeHooks';
 import type { Option } from 'helpers/types/option';
 import {
 	digitalSubscriptionLanding,
@@ -57,6 +62,47 @@ const getDisplayPrice = (
 	return `${currency}${fixDecimals(price)}/${billingPeriod}`;
 };
 
+/*
+  FAILS : No productCatalog on window.guardian using Router
+          digitalSubscriptionRouter.tsx for a Redux setup
+*/
+// const getDigitialEditionPricesNoRedux = (
+// 	countryGroupId: CountryGroupId,
+// 	price: number,
+// ): string => {
+// 	const currencyKey = detect(countryGroupId);
+// 	const currency = currencies[currencyKey].glyph;
+// 	const product = productCatalog['DigitalSubscription'];
+// 	if (
+// 		product?.ratePlans[Monthly]?.pricing[currencyKey] &&
+// 		product.ratePlans[Annual]?.pricing[currencyKey]
+// 	) {
+// 		const price = {
+// 			Monthly: product.ratePlans[Monthly].pricing[currencyKey],
+// 			Annual: product.ratePlans[Annual].pricing[currencyKey],
+// 		};
+// 		return `${currency}${fixDecimals(
+// 			price.Monthly,
+// 		)}/${Monthly} ${currency}${fixDecimals(price.Annual)}/${Annual}`;
+// 	}
+// 	return getDisplayPrice(countryGroupId, price);
+// };
+
+/*
+  FAILS :  web-client-content-script.js:2 Uncaught (in promise) Error: Access to storage is not allowed from this context.
+           suspect No productCatalog on window.guardian using Router
+*/
+// const getDigitialEditionPricesRedux = (
+// 	countryGroupId: CountryGroupId,
+// ): string => {
+// 	const currencyKey = detect(countryGroupId);
+// 	const currency = currencies[currencyKey].glyph;
+// 	const { monthlyPrice, annualPrice } = useContributionsSelector(
+// 		getSubscriptionPrices,
+// 	);
+// 	return `${currency}${monthlyPrice}/${Monthly} ${currency}${annualPrice}/${Annual}`;
+// };
+
 function getGuardianWeeklyOfferCopy(discountCopy: string) {
 	if (discountCopy !== '') {
 		return discountCopy;
@@ -96,6 +142,9 @@ function digitalCheckout(
 ): ProductCopy {
 	return {
 		...digitalEdition(countryGroupId, priceCopy),
+		//subtitle: getDigitialEditionPricesNoRedux(countryGroupId, priceCopy.price),
+		//subtitle: getDigitialEditionPricesRedux(countryGroupId),
+		subtitle: `${getDisplayPrice(countryGroupId, priceCopy.price)} £149/Annual`,
 		buttons: [
 			{
 				ctaButtonText: 'Subscribe Monthly',

diff --git a/support-frontend/assets/pages/subscriptions-landing/subscriptionsLanding.tsx b/support-frontend/assets/pages/subscriptions-landing/subscriptionsLanding.tsx
@@ -13,12 +13,12 @@ import type { SubscriptionsLandingPropTypes } from './subscriptionsLandingProps'
 import { subscriptionsLandingProps } from './subscriptionsLandingProps';
 
 // ----- Render ----- //
-function SubscriptionsLandingPage({
+export function SubscriptionsLandingPage({
 	countryGroupId,
 	participations,
 	pricingCopy,
 	referrerAcquisitions,
-}: SubscriptionsLandingPropTypes) {
+}: SubscriptionsLandingPropTypes): JSX.Element {
 	return (
 		<Page
 			header={<Header countryGroupId={countryGroupId} />}

diff --git a/support-frontend/conf/routes b/support-frontend/conf/routes
@@ -104,6 +104,7 @@ POST /identity/signin-url                                          controllers.I
 
 GET  /subscribe                                                    controllers.SubscriptionsController.geoRedirect()
 GET  /$country<(uk|us|au|eu|int|nz|ca)>/subscribe                  controllers.SubscriptionsController.landing(country: String)
+# GET  /$country<(uk|us|au|eu|int|nz|ca)>/subscribe                  controllers.DigitalSubscriptionController.digitalSubscription(country: String)
 
 # Events
 GET  /$countryGroupId<(uk|us|au|eu|int|nz|ca)>/events/:eventId     controllers.Application.eventsRouter(countryGroupId: String, eventId: String)