feat(payments-next): Cancellation flow: Create page - Interstitial Offer

Because:

* We need a cancel interstitial offer page as part of the churn intervention epic.

This commit:

* Creates /[locale]/subscriptions/[subscription_id]/offer page

Closes #PAY-3371

Author: elizabeth-ilina

apps/payments/next/app/[locale]/subscriptions/offer/page.tsx

@@ -0,0 +1,47 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { headers } from 'next/headers';
+import { /*notFound,*/ redirect } from 'next/navigation';
+
+//import { InterstitialOffer, InterstitialOfferProps } from '@fxa/payments/ui';
+import { getInterstitialOfferContentAction } from '@fxa/payments/ui/actions';
+import { auth } from 'apps/payments/next/auth';
+import { config } from 'apps/payments/next/config';
+import { SubplatInterval } from '@fxa/payments/customer';
+
+export default async function InterstitialOfferPage({
+  params,
+  searchParams,
+}: {
+  params: {
+    locale: string;
+    subscriptionId: string;
+  };
+  searchParams: Record<string, string> | undefined;
+}) {
+  const { locale, subscriptionId } = params;
+  const acceptLanguage = headers().get('accept-language');
+  const session = await auth();
+  if (!session?.user?.id) {
+    const redirectToUrl = new URL(
+      `${config.paymentsNextHostedUrl}/${locale}/subscriptions/landing`
+    );
+    redirectToUrl.search = new URLSearchParams(searchParams).toString();
+    redirect(redirectToUrl.href);
+  }
+
+  const uid = session.user.id;
+
+  const pageContent = await getInterstitialOfferContentAction(
+    uid,
+    subscriptionId,
+    'vpn', // hardcoded offeringApiIdentifier for now
+    SubplatInterval.Monthly,  // hardcoded for now
+    SubplatInterval.Yearly,
+    acceptLanguage,
+    locale
+  );
+  console.log('these are pageContent: ', pageContent)
+}

libs/payments/ui/src/index.ts

@@ -14,6 +14,7 @@ export * from './lib/client/components/CheckoutForm';
 export * from './lib/client/components/CheckoutCheckbox';
 export * from './lib/client/components/CouponForm';
 export * from './lib/client/components/Header';
+export * from './lib/client/components/InterstitialOffer';
 export * from './lib/client/components/LoadingSpinner';
 export * from './lib/client/components/PageNotFound';
 export * from './lib/client/components/PaymentStateObserver';

libs/payments/ui/src/lib/actions/getInterstitialOfferContent.ts

@@ -0,0 +1,30 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+'use server';
+
+import { getApp } from '../nestapp/app';
+import { SubplatInterval } from '@fxa/payments/customer';
+
+export const getInterstitialOfferContentAction = async (
+  uid: string,
+  subscriptionId: string,
+  offeringApiIdentifier: string,
+  currentInterval: SubplatInterval,
+  upgradeInterval: SubplatInterval,
+  acceptLanguage?: string | null,
+  selectedLanguage?: string
+) => {
+  const result = await getApp().getActionsService().getInterstitialOfferContent({
+    uid,
+    subscriptionId,
+    offeringApiIdentifier,
+    currentInterval,
+    upgradeInterval,
+    acceptLanguage,
+    selectedLanguage,
+  });
+
+  return result;
+};

libs/payments/ui/src/lib/actions/index.ts

@@ -13,6 +13,7 @@ export { determineCancellationInterventionAction } from './determineCancellation
 export { fetchCMSData } from './fetchCMSData';
 export { getCartAction } from './getCart';
 export { getCartOrRedirectAction } from './getCartOrRedirect';
+export { getInterstitialOfferContentAction } from './getInterstitialOfferContent';
 export { getMetricsFlowAction } from './getMetricsFlow';
 export { getPayPalCheckoutToken } from './getPayPalCheckoutToken';
 export { getPayPalBillingAgreementId } from './getPayPalBillingAgreementId';

libs/payments/ui/src/lib/client/components/InterstitialOffer/en.ftl

@@ -0,0 +1 @@
+## InterstitialOffer

libs/payments/ui/src/lib/client/components/InterstitialOffer/index.tsx

@@ -0,0 +1,38 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+'use client';
+
+import { SubplatInterval } from '@fxa/payments/customer';
+
+export interface InterstitialOfferProps {  //update pageContent properly
+  userId: string;
+  subscriptionId: string;
+  offeringApiIdentifier: string;
+  currentInterval: SubplatInterval;
+  upgradeInterval: SubplatInterval;
+  locale: string;
+  pageContent: {
+    offeringApiIdentifier: string;
+    currentInterval: SubplatInterval;
+    upgradeInterval: SubplatInterval;
+    advertisedSavings: number;
+    ctaMessage: string;
+    modalHeading1: string;
+    modalHeading2: string;
+    modalMessage: string;
+    productPageUrl: string;
+    upgradeButtonLabel: string;
+    upgradeButtonUrl: string;
+  };
+}
+
+export function InterstitialOffer({
+  userId,
+  subscriptionId,
+  locale,
+  pageContent,
+}: InterstitialOfferProps) {
+
+}

libs/payments/ui/src/lib/nestapp/nextjs-actions.service.ts

@@ -46,6 +46,8 @@ import { GetChurnInterventionDataActionArgs } from './validators/GetChurnInterve
 import { GetPayPalCheckoutTokenArgs } from './validators/GetPayPalCheckoutTokenArgs';
 import { GetSubManPageContentActionArgs } from './validators/GetSubManPageContentActionArgs';
 import { GetSubManPageContentActionResult } from './validators/GetSubManPageContentActionResult';
+import { GetInterstitialOfferContentActionArgs } from './validators/GetInterstitialOfferContentActionArgs';//
+import { GetInterstitialOfferContentActionResult } from './validators/GetInterstitialOfferContentActionResult';
 import { RestartCartActionArgs } from './validators/RestartCartActionArgs';
 import { SetupCartActionArgs } from './validators/SetupCartActionArgs';
 import { UpdateCartActionArgs } from './validators/UpdateCartActionArgs';
@@ -693,6 +695,38 @@ export class NextJSActionsService {
     return result;
   }
 
+  @SanitizeExceptions()
+  @NextIOValidator(
+    GetInterstitialOfferContentActionArgs,
+    GetInterstitialOfferContentActionResult
+  )
+  @WithTypeCachableAsyncLocalStorage()
+  @CaptureTimingWithStatsD()
+  async getInterstitialOfferContent(args: {
+    uid: string;
+    subscriptionId: string;
+    offeringApiIdentifier: string;
+    currentInterval: SubplatInterval;
+    upgradeInterval: SubplatInterval;
+    acceptLanguage?: string | null;
+    selectedLanguage?: string;
+  }) {
+    const result =
+      await this.churnInterventionService.determineCancelInterstitialOfferEligibility({   //reuse? or make a separate func?
+        uid: args.uid,
+        subscriptionId: args.subscriptionId,
+        offeringApiIdentifier: args.offeringApiIdentifier,
+        currentInterval: args.currentInterval,
+        upgradeInterval: args.upgradeInterval,
+        acceptLanguage: args.acceptLanguage,
+        selectedLanguage: args.selectedLanguage
+      });
+
+    return {
+      cancelInterstitialOfferResult: result.cmsCancelInterstitialOfferResult
+    };
+  }
+
   @SanitizeExceptions()
   @NextIOValidator(DetermineCurrencyActionArgs, DetermineCurrencyActionResult)
   @WithTypeCachableAsyncLocalStorage()

libs/payments/ui/src/lib/nestapp/validators/GetInterstitialOfferContentActionArgs.ts

@@ -0,0 +1,31 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { IsString, IsOptional } from 'class-validator';
+import { SubplatInterval } from '@fxa/payments/customer';
+
+export class GetInterstitialOfferContentActionArgs {
+  @IsString()
+  uid!: string;
+
+  @IsString()
+  subscriptionId!: string;
+
+  @IsString()
+  offeringApiIdentifier!: string;
+
+  @IsString()
+  currentInterval!: SubplatInterval;
+
+  @IsString()
+  upgradeInterval!: SubplatInterval;
+
+  @IsString()
+  @IsOptional()
+  acceptLanguage?: string;
+
+  @IsString()
+  @IsOptional()
+  selectedLanguage?: string;
+}

libs/payments/ui/src/lib/nestapp/validators/GetInterstitialOfferContentActionResult.ts

@@ -0,0 +1,15 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import {
+  ValidateNested,
+} from 'class-validator';
+import { Type } from 'class-transformer';
+import { CmsCancelInterstitialOfferResult } from './DetermineCancellationInterventionActionResult';
+
+export class GetInterstitialOfferContentActionResult {
+  @ValidateNested()
+  @Type(() => CmsCancelInterstitialOfferResult)
+  cancelInterstitialOfferResult!: CmsCancelInterstitialOfferResult | null;
+}