Merge pull request #19895 from mozilla/pay-3460-submanage-error-fix

fix(next): show relevant stripe error msg

Author: StaberindeZA

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

@@ -17,10 +17,8 @@ import { getStripeClientSession } from '@fxa/payments/ui/actions';
 
 export default async function StripePaymentManagementPage({
   params,
-  searchParams,
 }: {
   params: ManageParams;
-  searchParams: Record<string, string | string[]> | undefined;
 }) {
   const session = await auth();
   const { locale } = params;
@@ -44,6 +42,9 @@ export default async function StripePaymentManagementPage({
   const { clientSecret, defaultPaymentMethod, currency } =
     stripeClientSession;
 
+  // Only change the instanceKey, thereby remounting the StripeManagementWrapper, when the defaultPaymentMethod changes.
+  const instanceKey = defaultPaymentMethod ? `${defaultPaymentMethod.type}-${defaultPaymentMethod.id}` : uuidv4();
+
   return (
     <section
       className="w-full tablet:px-8 desktop:max-w-[1024px]"
@@ -54,7 +55,7 @@ export default async function StripePaymentManagementPage({
         locale={locale}
         currency={currency}
         sessionSecret={clientSecret}
-        instanceKey={uuidv4()}
+        instanceKey={instanceKey}
       >
         <PaymentMethodManagement
           uid={session?.user?.id}

libs/payments/customer/src/lib/setupIntent.manager.spec.ts

@@ -55,6 +55,7 @@ describe('SetupIntentManager', () => {
           enabled: true,
           allow_redirects: 'never',
         },
+        use_stripe_sdk: true,
       });
       expect(result).toEqual(mockResponse);
     });

libs/payments/customer/src/lib/setupIntent.manager.ts

@@ -19,6 +19,7 @@ export class SetupIntentManager {
         enabled: true,
         allow_redirects: 'never',
       },
+      use_stripe_sdk: true,
     });
   }
 

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

@@ -12,7 +12,7 @@ export const updateStripePaymentDetails = async (
 ) => {
   const actionsService = getApp().getActionsService();
 
-  return await actionsService.updateStripePaymentDetails({
+  return actionsService.updateStripePaymentDetails({
     uid,
     confirmationTokenId,
   });

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

@@ -70,7 +70,7 @@ export function PaymentMethodManagement({
     setError(null);
     setHasPaymentMethod(
       !!event.value.payment_method ||
-        (event.value.type === 'link' && defaultPaymentMethod?.type === 'link')
+      (event.value.type === 'link' && defaultPaymentMethod?.type === 'link')
     );
 
     if (event.value.type !== 'card') {
@@ -181,25 +181,21 @@ export function PaymentMethodManagement({
         throw confirmationTokenError;
       }
 
-      let response;
-      try {
-        response = await updateStripePaymentDetails(
-          uid ?? '',
-          confirmationToken.id
-        );
-      } catch (error) {
-        const errorReason = getManagePaymentMethodErrorFtlInfo(error.message);
+      const { ok, result, errorMessage } = await updateStripePaymentDetails(
+        uid ?? '',
+        confirmationToken.id
+      );
+      if (!ok || !result) {
+        const errorReason = getManagePaymentMethodErrorFtlInfo(errorMessage);
         setError(
           l10n.getString(errorReason.messageFtl, {}, errorReason.message)
         );
-        return;
-      }
-
-      if (response.status === 'requires_action' && response.clientSecret) {
-        await handleNextAction(response.clientSecret);
+      } else {
+        if (result.status === 'requires_action' && result.clientSecret) {
+          await handleNextAction(result.clientSecret);
+        }
+        router.refresh();
       }
-
-      router.refresh();
     } catch (error) {
       console.error(error);
       setError(error.message || 'An unexpected error occurred.');
@@ -265,30 +261,30 @@ export function PaymentMethodManagement({
           </Form.Field>
           {(isInputNewCardDetails ||
             (isNonCardSelected && !hasPaymentMethod)) && (
-            <div className="flex flex-row justify-center pt-4">
-              <Form.Submit asChild>
-                <BaseButton
-                  className="h-10 mt-10 w-full"
-                  type="submit"
-                  variant={ButtonVariant.Primary}
-                  aria-disabled={!stripe || !isComplete || isLoading}
-                  disabled={!stripe || !isComplete || isLoading}
-                >
-                  {isLoading ? (
-                    <Image
-                      src={spinnerWhiteImage}
-                      alt=""
-                      className="absolute animate-spin h-8 w-8"
-                    />
-                  ) : (
-                    <Localized id="payment-method-management-save-method">
-                      Save payment method
-                    </Localized>
-                  )}
-                </BaseButton>
-              </Form.Submit>
-            </div>
-          )}
+              <div className="flex flex-row justify-center pt-4">
+                <Form.Submit asChild>
+                  <BaseButton
+                    className="h-10 mt-10 w-full"
+                    type="submit"
+                    variant={ButtonVariant.Primary}
+                    aria-disabled={!stripe || !isComplete || isLoading}
+                    disabled={!stripe || !isComplete || isLoading}
+                  >
+                    {isLoading ? (
+                      <Image
+                        src={spinnerWhiteImage}
+                        alt=""
+                        className="absolute animate-spin h-8 w-8"
+                      />
+                    ) : (
+                      <Localized id="payment-method-management-save-method">
+                        Save payment method
+                      </Localized>
+                    )}
+                  </BaseButton>
+                </Form.Submit>
+              </div>
+            )}
           {isNonDefaultCardSelected && !isInputNewCardDetails && (
             <div className="flex flex-row justify-center pt-4">
               <Form.Submit asChild>

libs/payments/ui/src/lib/client/components/StripeWrapper.tsx

@@ -108,10 +108,10 @@ interface StripeWrapperProps {
   cart: {
     paymentInfo?: {
       type:
-        | Stripe.PaymentMethod.Type
-        | 'google_iap'
-        | 'apple_iap'
-        | 'external_paypal';
+      | Stripe.PaymentMethod.Type
+      | 'google_iap'
+      | 'apple_iap'
+      | 'external_paypal';
       last4?: string;
       brand?: string;
       customerSessionClientSecret?: string;

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

@@ -915,10 +915,24 @@ export class NextJSActionsService {
     uid: string;
     confirmationTokenId: string;
   }) {
-    return await this.subscriptionManagementService.updateStripePaymentDetails(
-      args.uid,
-      args.confirmationTokenId
-    );
+    try {
+      const result =
+        await this.subscriptionManagementService.updateStripePaymentDetails(
+          args.uid,
+          args.confirmationTokenId
+        );
+      return {
+        ok: true,
+        result,
+        errorMessage: null,
+      };
+    } catch (error) {
+      return {
+        ok: false,
+        result: null,
+        errorMessage: error.message,
+      };
+    }
   }
 
   @SanitizeExceptions()

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

@@ -0,0 +1,54 @@
+/* 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 { Type } from 'class-transformer';
+import {
+  IsBoolean,
+  IsOptional,
+  IsString,
+  Validate,
+  ValidateNested,
+  ValidatorConstraint,
+  type ValidationArguments,
+  type ValidatorConstraintInterface,
+} from 'class-validator';
+
+@ValidatorConstraint({ name: 'ResultErrorConsistency', async: false })
+class ResultErrorConsistency implements ValidatorConstraintInterface {
+  validate(_: any, args: ValidationArguments) {
+    const obj = args.object as TemplateResult;
+
+    if (obj.ok) {
+      return obj.result != null && obj.errorMessage == null;
+    }
+
+    return obj.result == null && typeof obj.errorMessage === 'string';
+  }
+
+  defaultMessage() {
+    return 'Invalid combination of ok, result, and errorMessage';
+  }
+}
+
+class TemplateSuccessResponse {
+  @IsString()
+  id!: string;
+}
+
+export class TemplateResult {
+  @IsBoolean()
+  ok!: boolean;
+
+  @ValidateNested()
+  @Type(() => TemplateSuccessResponse)
+  @IsOptional()
+  result!: TemplateSuccessResponse | null;
+
+  @IsString()
+  @IsOptional()
+  errorMessage!: string | null;
+
+  @Validate(ResultErrorConsistency)
+  _consistencyCheck!: boolean;
+}

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

@@ -2,9 +2,11 @@
  * 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 { IsOptional, IsString } from 'class-validator';
+import { Type } from 'class-transformer';
+import { IsOptional, IsString, ValidateNested } from 'class-validator';
+import { TemplateResult } from './TemplateResult';
 
-export class UpdateStripePaymentDetailsResult {
+class UpdateStripePaymentDetailsSuccessResponse {
   @IsString()
   id!: string;
 
@@ -15,3 +17,10 @@ export class UpdateStripePaymentDetailsResult {
   @IsOptional()
   clientSecret?: string;
 }
+
+export class UpdateStripePaymentDetailsResult extends TemplateResult {
+  @ValidateNested()
+  @Type(() => UpdateStripePaymentDetailsSuccessResponse)
+  @IsOptional()
+  result!: UpdateStripePaymentDetailsSuccessResponse | null;
+}

libs/payments/ui/src/lib/utils/getManagePaymentMethodErrorFtlInfo.ts

@@ -2,9 +2,7 @@
  * 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/. */
 
-export function getManagePaymentMethodErrorFtlInfo(
-  errorCode: string,
-) {
+export function getManagePaymentMethodErrorFtlInfo(errorCode?: string) {
   switch (errorCode) {
     case 'intent_failed_card_declined':
       return {