Merge pull request #18745 from mozilla/fxa-11508-allow-active-loc-change

feat(next): allow location change on active sub

Author: StaberindeZA

apps/payments/next/app/[locale]/[offeringId]/[interval]/checkout/[cartId]/layout.tsx

@@ -111,10 +111,28 @@ export default async function CheckoutLayout({
               <SelectTaxLocation
                 saveAction={async (countryCode, postalCode) => {
                   'use server';
-                  return updateTaxAddressAction(cart.id, cart.version, {
-                    countryCode,
-                    postalCode,
-                  });
+                  const result = await updateTaxAddressAction(
+                    cart.id,
+                    cart.version,
+                    params.offeringId,
+                    {
+                      countryCode,
+                      postalCode,
+                    },
+                    session?.user?.id
+                  );
+
+                  if (result.ok) {
+                    return {
+                      ok: true,
+                      data: result.taxAddress,
+                    };
+                  } else {
+                    return {
+                      ok: false,
+                      error: result.error,
+                    };
+                  }
                 }}
                 cmsCountries={cms.countries}
                 locale={locale.substring(0, 2)}
@@ -124,6 +142,8 @@ export default async function CheckoutLayout({
                 }
                 countryCode={cart.taxAddress?.countryCode}
                 postalCode={cart.taxAddress?.postalCode}
+                currentCurrency={cart.currency}
+                showNewTaxRateInfoMessage={cart.hasActiveSubscriptions}
               />
             </div>
           )}

apps/payments/next/app/[locale]/[offeringId]/[interval]/location/en.ftl

@@ -2,3 +2,4 @@
 location-header = Select your country and enter your postal code <p>to continue to checkout for { $productName }</p>
 location-banner-info = We weren’t able to detect your location automatically
 location-required-disclaimer = We only use this information to calculate taxes and currency.
+location-banner-currency-change = Currency change not supported. To continue, select a country that matches your current billing currency.

apps/payments/next/app/[locale]/[offeringId]/[interval]/location/page.tsx

@@ -14,14 +14,13 @@ import {
   IsolatedSelectTaxLocation,
   buildRedirectUrl,
 } from '@fxa/payments/ui';
-import {
-  fetchCMSData,
-  getProductAvailabilityForLocation,
-} from '@fxa/payments/ui/actions';
+import { fetchCMSData, validateLocationAction } from '@fxa/payments/ui/actions';
 import { getApp, TermsAndPrivacy } from '@fxa/payments/ui/server';
 import locationIcon from '@fxa/shared/assets/images/confirm-pairing.svg';
 import type { PageContentOfferingTransformed } from '@fxa/shared/cms';
 import { config } from 'apps/payments/next/config';
+import { auth } from 'apps/payments/next/auth';
+import { TaxChangeAllowedStatus } from '@fxa/payments/cart';
 
 export const dynamic = 'force-dynamic';
 
@@ -35,26 +34,30 @@ export default async function Location({
   const acceptLanguage = headers().get('accept-language');
   const l10n = getApp().getL10n(acceptLanguage, params.locale);
   const emitterService = getApp().getEmitterService();
+  const session = await auth();
+  const providedCountryCode = searchParams['countryCode'];
+  const providedPostalCode = searchParams['postalCode'];
+  const taxAddress =
+    providedCountryCode && providedPostalCode
+      ? {
+          countryCode: providedCountryCode,
+          postalCode: providedPostalCode,
+        }
+      : undefined;
+
+  const fxaUid = session?.user?.id;
 
   let cms: PageContentOfferingTransformed | undefined;
-  let locationStatus: LocationStatus | undefined;
+  let locationStatus: LocationStatus | TaxChangeAllowedStatus | undefined;
+  let customerCurrency: string | undefined;
   try {
-    const cmsDataPromise = fetchCMSData(
-      params.offeringId,
-      acceptLanguage,
-      params.locale
-    );
-    const locationPromise = await getProductAvailabilityForLocation(
-      params.offeringId,
-      searchParams['countryCode']
-    );
-
-    const [cmsData, locationData] = await Promise.all([
-      cmsDataPromise,
-      locationPromise,
+    const [cmsData, validateLocationResults] = await Promise.all([
+      fetchCMSData(params.offeringId, acceptLanguage, params.locale),
+      validateLocationAction(params.offeringId, taxAddress, fxaUid),
     ]);
     cms = cmsData;
-    locationStatus = locationData.status;
+    locationStatus = validateLocationResults.status;
+    customerCurrency = validateLocationResults.currentCurrency;
 
     emitterService.emit('locationView', locationStatus);
   } catch (error) {
@@ -105,14 +108,22 @@ export default async function Location({
             'Your current location is not supported according to our Terms of Service.'
           )}
         </Banner>
-      ) : locationStatus === LocationStatus.ProductNotAvailable ? (
+      ) : locationStatus === LocationStatus.ProductNotAvailable ||
+        locationStatus === TaxChangeAllowedStatus.CurrencyNotFound ? (
         <Banner variant={BannerVariant.Error} showCloseButton={true}>
           {l10n.getString(
             'select-tax-location-product-not-available',
             { productName: purchaseDetails.productName },
             `${purchaseDetails.productName} is not available in this location.`
           )}
         </Banner>
+      ) : locationStatus === TaxChangeAllowedStatus.CurrencyChange ? (
+        <Banner variant={BannerVariant.Error} showCloseButton={true}>
+          {l10n.getString(
+            'location-banner-currency-change',
+            'Currency change not supported. To continue, select a country that matches your current billing currency.'
+          )}
+        </Banner>
       ) : (
         <Banner variant={BannerVariant.Info} showCloseButton={true}>
           {l10n.getString(
@@ -127,12 +138,30 @@ export default async function Location({
           cmsCountries={cms.countries}
           locale={params.locale.substring(0, 2)}
           productName={purchaseDetails.productName}
+          showNewTaxRateInfoMessage={false}
           unsupportedLocations={
             config.location.subscriptionsUnsupportedLocations
           }
+          currentCurrency={customerCurrency}
           saveAction={async (countryCode: string, postalCode: string) => {
             'use server';
 
+            if (fxaUid) {
+              // call server Action here to validate if tax location change is allowed
+              const result = await validateLocationAction(
+                params.offeringId,
+                { countryCode, postalCode },
+                fxaUid
+              );
+
+              if (!result.isValid) {
+                return {
+                  ok: false,
+                  error: result.status,
+                };
+              }
+            }
+
             searchParams['countryCode'] = countryCode;
             searchParams['postalCode'] = postalCode;
             const redirectUrl = new URL(

apps/payments/next/app/[locale]/[offeringId]/[interval]/new/page.tsx

@@ -4,9 +4,8 @@
 
 import { auth } from 'apps/payments/next/auth';
 import { notFound, redirect } from 'next/navigation';
-import { LocationStatus } from '@fxa/payments/eligibility';
 import {
-  getProductAvailabilityForLocation,
+  validateLocationAction,
   getTaxAddressAction,
   setupCartAction,
 } from '@fxa/payments/ui/actions';
@@ -66,17 +65,20 @@ export default async function New({
 
   // Check if the customer is in a location not supported by Subscription Platform
   // or whether the product is not available in the customer's location
-  const { status } = await getProductAvailabilityForLocation(
+  const { isValid: locationIsValid } = await validateLocationAction(
     offeringId,
-    taxAddress?.countryCode
+    taxAddress,
+    fxaUid
   );
 
-  if (
-    !taxAddress ||
-    status === LocationStatus.SanctionedLocation ||
-    status === LocationStatus.ProductNotAvailable ||
-    status === LocationStatus.Unresolved
-  ) {
+  if (!taxAddress || !locationIsValid) {
+    if (taxAddress?.countryCode) {
+      searchParams.countryCode = taxAddress.countryCode;
+    }
+    if (taxAddress?.postalCode) {
+      searchParams.postalCode = taxAddress.postalCode;
+    }
+
     const locationPageUrl = new URL(
       buildRedirectUrl(
         params.offeringId,

apps/payments/next/next.config.js

@@ -31,6 +31,8 @@ const nextConfig = {
       '@apollo',
       '@faker-js/faker',
       '@google-cloud/firestore',
+      '@googleapis/androidpublisher',
+      '@googlemaps/google-maps-services-js',
       '@grpc',
       "@nestjs/apollo",
       "@nestjs/common",
@@ -48,6 +50,7 @@ const nextConfig = {
       '@sentry/nestjs',
       '@sentry/open-telemetry',
       '@type-cacheable/core',
+      'app-store-server-api',
       'aws-sdk',
       'class-transformer',
       'class-validator',

libs/payments/cart/src/index.ts

@@ -10,3 +10,4 @@ export { CartInvalidStateForActionError } from './lib/cart.error';
 export * from './lib/checkout.service';
 export * from './lib/checkout.error';
 export * from './lib/tax.service';
+export * from './lib/tax.types';

libs/payments/cart/src/lib/cart.service.spec.ts

@@ -1302,6 +1302,7 @@ describe('CartService', () => {
           customerSessionClientSecret: mockCustomerSession.client_secret,
         },
         metricsOptedOut: false,
+        hasActiveSubscriptions: true,
       });
 
       expect(cartManager.fetchCartById).toHaveBeenCalledWith(mockCart.id);
@@ -1362,6 +1363,7 @@ describe('CartService', () => {
           brand: mockPaymentMethod.card?.brand,
           customerSessionClientSecret: mockCustomerSession.client_secret,
         },
+        hasActiveSubscriptions: true,
       });
       expect(
         'latestInvoicePreview' in result && result.latestInvoicePreview
@@ -1410,6 +1412,7 @@ describe('CartService', () => {
         ...mockCart,
         upcomingInvoicePreview: mockInvoicePreview,
         metricsOptedOut: false,
+        hasActiveSubscriptions: false,
       });
 
       expect(cartManager.fetchCartById).toHaveBeenCalledWith(mockCart.id);
@@ -1472,6 +1475,7 @@ describe('CartService', () => {
           interval: mockFromPrice.recurring?.interval,
           listAmount: mockFromPrice.unit_amount,
         },
+        hasActiveSubscriptions: true,
       });
 
       expect(cartManager.fetchCartById).toHaveBeenCalledWith(mockCart.id);

libs/payments/cart/src/lib/cart.service.ts

@@ -565,7 +565,8 @@ export class CartService {
           if (!cartDetails.currency) {
             throw new CartCurrencyNotFoundError(
               cartDetails.currency,
-              cartDetailsInput.taxAddress.countryCode
+              cartDetailsInput.taxAddress.countryCode,
+              cartId
             );
           }
 
@@ -775,6 +776,7 @@ export class CartService {
           ? eligibility.fromOfferingConfigId
           : undefined,
       fromPrice: 'fromPrice' in eligibility ? fromPrice : undefined,
+      hasActiveSubscriptions: !!subscriptions.length,
     };
   }
 

libs/payments/cart/src/lib/cart.types.ts

@@ -81,6 +81,7 @@ export type BaseCartDTO = Omit<ResultCart, 'state'> & {
 
 export type StartCartDTO = BaseCartDTO & {
   state: CartState.START;
+  hasActiveSubscriptions: boolean;
 };
 
 export type ProcessingCartDTO = BaseCartDTO & {