fix(payments-next): Location can't be set to Denmark, Poland and Czech Republic on the "Set up your subscription" page for Mozilla VPN monthly subscription (Stage only)

Because:

* When a user changes their location to use a currency that is not supported by a price set in Stripe, they were being shown a non-informative error message.
* The call to stripe.invoices.retrieveUpcoming throws an error saying “Error: The price specified only supports `eur` or `usd`. This doesn't match the invoice's currency: `pln`." (in the case of dev VPN daily).
* The user's cart was being transitioned into an error state, and user was taken to the “Error confirming subscription…” page.
* Even though the cart was transitioned into an error state and error thrown, the error being thrown was caught by the try catch in the SelectTaxLocation component’s handleFormSubmit, so the user wasn't taken to the error page right away.

This commit:

* Updates the SelectTaxLocation component to show the customer a more informative error message in this situation
* Does not transition cart into an error state

Closes #[PAY-3566](https://mozilla-hub.atlassian.net/browse/PAY-3566)

Author: elizabeth-ilina

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

@@ -130,7 +130,8 @@ export default async function CheckoutLayout({
                         countryCode,
                         postalCode,
                       },
-                      session?.user?.id
+                      session?.user?.id,
+                      params.interval
                     );
 
                     if (result.ok) {

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

@@ -57,7 +57,7 @@ export default async function Location({
   try {
     const [cmsData, validateLocationResults] = await Promise.all([
       fetchCMSData(params.offeringId, acceptLanguage, params.locale),
-      validateLocationAction(params.offeringId, taxAddress, fxaUid),
+      validateLocationAction(params.offeringId, taxAddress, fxaUid, params.interval),
     ]);
     cms = cmsData;
     locationStatus = validateLocationResults.status;
@@ -117,7 +117,8 @@ export default async function Location({
             )}
           </Banner>
         ) : locationStatus === LocationStatus.ProductNotAvailable ||
-          locationStatus === TaxChangeAllowedStatus.CurrencyNotFound ? (
+          locationStatus === TaxChangeAllowedStatus.CurrencyNotFound ||
+          locationStatus === TaxChangeAllowedStatus.PriceCurrencyNotAvailable ? (
           <Banner variant={BannerVariant.Error} showCloseButton={true}>
             {l10n.getString(
               'select-tax-location-product-not-available',
@@ -160,20 +161,18 @@ export default async function Location({
             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
-                );
+              const result = await validateLocationAction(
+                params.offeringId,
+                { countryCode, postalCode },
+                fxaUid,
+                params.interval
+              );
 
-                if (!result.isValid) {
-                  return {
-                    ok: false,
-                    error: result.status,
-                  };
-                }
+              if (!result.isValid) {
+                return {
+                  ok: false,
+                  error: result.status,
+                };
               }
 
               searchParams['countryCode'] = countryCode;

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

@@ -79,7 +79,8 @@ export default async function New({
   const { isValid: locationIsValid } = await validateLocationAction(
     offeringId,
     taxAddress,
-    fxaUid
+    fxaUid,
+    interval
   );
 
   if (!taxAddress || !locationIsValid) {

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

@@ -5,5 +5,6 @@
 export enum TaxChangeAllowedStatus {
   CurrencyNotFound = 'currency_not_found',
   CurrencyChange = 'currency_change',
+  PriceCurrencyNotAvailable = 'price_currency_not_available',
   Allowed = 'allowed',
 }

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

@@ -14,7 +14,8 @@ export const updateTaxAddressAction = async (
   version: number,
   offeringId: string,
   taxAddress: TaxAddress,
-  uid?: string
+  uid?: string,
+  interval?: string
 ) => {
   const actionsService = getApp().getActionsService();
 
@@ -24,6 +25,7 @@ export const updateTaxAddressAction = async (
     offeringId,
     taxAddress,
     uid,
+    interval,
   });
 
   revalidatePath(

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

@@ -9,9 +9,10 @@ import { getApp } from '../nestapp/app';
 export const validateLocationAction = async (
   offeringId: string,
   taxAddress?: TaxAddress,
-  uid?: string
+  uid?: string,
+  interval?: string
 ) => {
   return await getApp()
     .getActionsService()
-    .validateLocation({ offeringId, taxAddress, uid });
+    .validateLocation({ offeringId, taxAddress, uid, interval });
 };

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

@@ -18,6 +18,7 @@ import spinnerWhiteImage from '@fxa/shared/assets/images/spinnerwhite.svg';
 
 enum SaveActionErrors {
   CURRENCY_CHANGE_NOT_ALLOWED = 'currency_change', //TaxChangeAllowedStatus.CurrencyChange
+  PRICE_CURRENCY_NOT_AVAILABLE = 'price_currency_not_available', //TaxChangeAllowedStatus.PriceCurrencyNotAvailable
 }
 
 type SaveActionSignature = (
@@ -220,6 +221,13 @@ const Expanded = ({
                 ...prev,
                 invalidCurrencyChange: true,
               }));
+            } else if (
+              result.error === SaveActionErrors.PRICE_CURRENCY_NOT_AVAILABLE
+            ) {
+              setServerErrors((prev) => ({
+                ...prev,
+                productNotAvailable: true,
+              }));
             } else {
               setServerErrors((prev) => ({
                 ...prev,

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

@@ -941,6 +941,7 @@ export class NextJSActionsService {
     offeringId: string;
     taxAddress: TaxAddress;
     uid?: string;
+    interval?: string;
   }): Promise<
     | {
         ok: true;
@@ -951,13 +952,14 @@ export class NextJSActionsService {
         error: string;
       }
   > {
-    const { cartId, version, offeringId, taxAddress, uid } = args;
+    const { cartId, version, offeringId, taxAddress, uid, interval } = args;
 
     // Validate Tax Address before updating
     const { isValid, status } = await this.validateLocation({
       offeringId,
       taxAddress,
       uid,
+      interval,
     });
     if (!isValid) {
       return {
@@ -1009,6 +1011,7 @@ export class NextJSActionsService {
     offeringId: string;
     taxAddress?: TaxAddress;
     uid?: string;
+    interval?: string;
   }) {
     const { status: locationStatus } =
       await this.eligibilityService.getProductAvailabilityForLocation(
@@ -1020,17 +1023,36 @@ export class NextJSActionsService {
       if (args.uid && args.taxAddress) {
         const { status: taxChangeStatus, currentCurrency } =
           await this.taxService.getTaxChangeStatus(args.uid, args.taxAddress);
-        return {
-          isValid: taxChangeStatus === TaxChangeAllowedStatus.Allowed,
-          status: taxChangeStatus,
-          currentCurrency,
-        };
-      } else {
+        if (taxChangeStatus !== TaxChangeAllowedStatus.Allowed) {
+          return {
+            isValid: false,
+            status: taxChangeStatus,
+            currentCurrency,
+          };
+        }
+      }
+      if (args.interval && args.taxAddress?.countryCode) {
+        const currency = this.currencyManager.getCurrencyForCountry(
+          args.taxAddress.countryCode
+        );
+        if (currency) {
+          const price =
+            await this.productConfigurationManager.retrieveStripePrice(
+              args.offeringId,
+              args.interval as SubplatInterval
+            );
+          if (price && !price.currency_options?.[currency]) {
+            return {
+              isValid: false,
+              status: TaxChangeAllowedStatus.PriceCurrencyNotAvailable,
+            };
+          }
+        }
+      }
         return {
           isValid: true,
           status: locationStatus,
         };
-      }
     } else {
       return {
         isValid: false,

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

@@ -28,4 +28,8 @@ export class UpdateTaxAddressActionArgs {
   @IsOptional()
   @IsString()
   uid?: string;
+
+  @IsOptional()
+  @IsString()
+  interval?: string;
 }

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

@@ -15,4 +15,8 @@ export class ValidateLocationActionArgs {
   @IsString()
   @IsOptional()
   uid?: string;
+
+  @IsString()
+  @IsOptional()
+  interval?: string;
 }