Merge pull request #19857 from mozilla/PAY-3422

fix(payments-next): Fix update button for Link as saved method

Author: david1alvarez

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

@@ -41,7 +41,7 @@ export default async function StripePaymentManagementPage({
       throw error;
     }
   }
-  const { clientSecret, defaultPaymentMethodId, currency } =
+  const { clientSecret, defaultPaymentMethod, currency } =
     stripeClientSession;
 
   return (
@@ -58,7 +58,7 @@ export default async function StripePaymentManagementPage({
       >
         <PaymentMethodManagement
           uid={session?.user?.id}
-          defaultPaymentMethodId={defaultPaymentMethodId}
+          defaultPaymentMethod={defaultPaymentMethod}
           sessionEmail={session?.user?.email ?? undefined}
         />
       </StripeManagementWrapper>

libs/payments/management/src/lib/subscriptionManagement.service.spec.ts

@@ -1002,7 +1002,10 @@ describe('SubscriptionManagementService', () => {
       expect(result).toEqual({
         clientSecret: mockCustomerSession.client_secret,
         customer: mockCustomer.id,
-        defaultPaymentMethodId: mockPaymentMethod.id,
+        defaultPaymentMethod: {
+          id: mockPaymentMethod.id,
+          type: mockPaymentMethod.type,
+        },
         currency: mockCustomer.currency,
       });
     });
@@ -1072,7 +1075,10 @@ describe('SubscriptionManagementService', () => {
       expect(result).toEqual({
         clientSecret: mockCustomerSession.client_secret,
         customer: mockCustomer.id,
-        defaultPaymentMethodId: mockPaymentMethod.id,
+        defaultPaymentMethod: {
+          id: mockPaymentMethod.id,
+          type: mockPaymentMethod.type,
+        },
         currency: mockCurrency,
       });
     });
@@ -1132,7 +1138,10 @@ describe('SubscriptionManagementService', () => {
       expect(result).toEqual({
         clientSecret: mockCustomerSession.client_secret,
         customer: mockCustomer.id,
-        defaultPaymentMethodId: mockPaymentMethod.id,
+        defaultPaymentMethod: {
+          id: mockPaymentMethod.id,
+          type: mockPaymentMethod.type,
+        },
         currency: mockCurrency,
       });
     });

libs/payments/management/src/lib/subscriptionManagement.service.ts

@@ -805,8 +805,15 @@ export class SubscriptionManagementService {
     return {
       clientSecret: customerSession.client_secret,
       customer: customerSession.customer,
-      defaultPaymentMethodId: defaultPaymentMethod?.id,
       currency,
+      ...(defaultPaymentMethod
+        ? {
+            defaultPaymentMethod: {
+              type: defaultPaymentMethod?.type,
+              id: defaultPaymentMethod?.id,
+            },
+          }
+        : {}),
     };
   }
 

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

@@ -28,11 +28,14 @@ import {
 
 export function PaymentMethodManagement({
   uid,
-  defaultPaymentMethodId,
+  defaultPaymentMethod,
   sessionEmail,
 }: {
   uid?: string;
-  defaultPaymentMethodId?: string;
+  defaultPaymentMethod?: {
+    id: string;
+    type?: string;
+  };
   sessionEmail?: string;
 }) {
   const { l10n } = useLocalization();
@@ -65,17 +68,36 @@ export function PaymentMethodManagement({
   ) => {
     setIsComplete(event.complete);
     setError(null);
-    setHasPaymentMethod(!!event.value.payment_method);
+    setHasPaymentMethod(
+      !!event.value.payment_method ||
+        (event.value.type === 'link' && defaultPaymentMethod?.type === 'link')
+    );
 
     if (event.value.type !== 'card') {
       setIsNonCardSelected(true);
       setIsInputNewCardDetails(false);
-      if (!!event.value.payment_method) {
-        if (event.value.payment_method.id !== defaultPaymentMethodId) {
+      if (
+        event.value.payment_method?.type === 'link' &&
+        defaultPaymentMethod?.type === 'link'
+      ) {
+        /**
+         * Users can add Link to their account twice if a Link account was not associated with their Stripe
+         * account email when starting the checkout flow (i.e. this was the customers first time using Link).
+         * The Payment Element does not currently handle accounts with multiple Link payment methods,
+         * but the user can still modify their Link payment method settings in-component.
+         */
+        setIsNonDefaultCardSelected(false);
+      } else if (
+        !!event.value.payment_method &&
+        event.value.payment_method.id
+      ) {
+        if (event.value.payment_method.id !== defaultPaymentMethod?.id) {
           setIsNonDefaultCardSelected(true);
         } else {
           setIsNonDefaultCardSelected(false);
         }
+      } else {
+        setIsNonDefaultCardSelected(false);
       }
       return;
     }
@@ -86,8 +108,12 @@ export function PaymentMethodManagement({
     } else if (event.value.type === 'card' && !!event.value.payment_method) {
       setIsInputNewCardDetails(false);
 
-      if (event.value.payment_method.id !== defaultPaymentMethodId) {
-        setIsNonDefaultCardSelected(true);
+      if (event.value.payment_method.id) {
+        if (event.value.payment_method.id !== defaultPaymentMethod?.id) {
+          setIsNonDefaultCardSelected(true);
+        } else {
+          setIsNonDefaultCardSelected(false);
+        }
       } else {
         setIsNonDefaultCardSelected(false);
       }
@@ -156,18 +182,16 @@ export function PaymentMethodManagement({
       }
 
       let response;
-     try {
-      response = await updateStripePaymentDetails(
+      try {
+        response = await updateStripePaymentDetails(
           uid ?? '',
           confirmationToken.id
         );
       } catch (error) {
         const errorReason = getManagePaymentMethodErrorFtlInfo(error.message);
-        setError(l10n.getString(
-          errorReason.messageFtl,
-          {},
-          errorReason.message
-        ));
+        setError(
+          l10n.getString(errorReason.messageFtl, {}, errorReason.message)
+        );
         return;
       }
 
@@ -247,12 +271,8 @@ export function PaymentMethodManagement({
                   className="h-10 mt-10 w-full"
                   type="submit"
                   variant={ButtonVariant.Primary}
-                  aria-disabled={
-                    !stripe || !isComplete || isLoading
-                  }
-                  disabled={
-                    !stripe || !isComplete || isLoading
-                  }
+                  aria-disabled={!stripe || !isComplete || isLoading}
+                  disabled={!stripe || !isComplete || isLoading}
                 >
                   {isLoading ? (
                     <Image

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

@@ -2,7 +2,17 @@
  * 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';
+
+export class PaymentMethodDetails {
+  @IsString()
+  id!: string;
+
+  @IsString()
+  @IsOptional()
+  type?: string;
+}
 
 export class GetStripePaymentManagementDetailsResult {
   @IsString()
@@ -11,9 +21,10 @@ export class GetStripePaymentManagementDetailsResult {
   @IsString()
   customer!: string;
 
-  @IsString()
+  @ValidateNested({ each: true })
+  @Type(() => PaymentMethodDetails)
   @IsOptional()
-  defaultPaymentMethodId?: string;
+  defaultPaymentMethod?: PaymentMethodDetails;
 
   @IsString()
   currency!: string;