fix(payments-ui): Fix height of buttons

xlisachan · xlisachan · commit 925ce31b5861 · 2025-08-28T17:39:40.000-04:00
diff --git a/apps/payments/next/app/[locale]/[offeringId]/[interval]/checkout/[cartId]/start/page.tsx b/apps/payments/next/app/[locale]/[offeringId]/[interval]/checkout/[cartId]/start/page.tsx
@@ -165,6 +165,7 @@ export default async function Checkout({
               }}
             >
               <BaseButton
+                className="h-12"
                 variant={ButtonVariant.ThirdParty}
                 aria-label={l10n.getString(
                   'continue-signin-with-google-button',
@@ -187,6 +188,7 @@ export default async function Checkout({
               }}
             >
               <BaseButton
+                className="h-12"
                 variant={ButtonVariant.ThirdParty}
                 aria-label={l10n.getString(
                   'continue-signin-with-apple-button',
diff --git a/apps/payments/next/app/[locale]/auth/error/page.tsx b/apps/payments/next/app/[locale]/auth/error/page.tsx
@@ -25,9 +25,7 @@ export default function AuthErrorPage({
   const errorMessage = Array.isArray(searchParams?.error)
     ? searchParams.error[0]
     : searchParams?.error;
-  getApp()
-    .getEmitterService()
-    .emit('auth', { type: 'error', errorMessage });
+  getApp().getEmitterService().emit('auth', { type: 'error', errorMessage });
 
   return (
     <>
@@ -87,7 +85,7 @@ export default function AuthErrorPage({
                   'Try again'
                 )}
                 variant={ButtonVariant.Primary}
-                className="text-base"
+                className="h-12 text-base"
               >
                 {l10n.getString('next-payment-error-retry-button', 'Try again')}
               </BaseButton>
diff --git a/libs/payments/ui/src/lib/client/components/CheckoutForm/index.tsx b/libs/payments/ui/src/lib/client/components/CheckoutForm/index.tsx
@@ -75,10 +75,10 @@ interface CheckoutFormProps {
     };
     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;
@@ -152,7 +152,8 @@ export function CheckoutForm({
 
           //Show or hide the PayPal button and Link
           const hasSavedPaymentMethod = !!event?.value?.payment_method?.id;
-          const isNewCardSelected = event?.value?.type === 'card' && !hasSavedPaymentMethod;
+          const isNewCardSelected =
+            event?.value?.type === 'card' && !hasSavedPaymentMethod;
 
           const selectedType = event?.value?.type || '';
           const isNotCardType = selectedType !== 'card';
@@ -172,7 +173,11 @@ export function CheckoutForm({
   const showPayPalButton = selectedPaymentMethod === 'external_paypal';
   const isStripe = cart?.paymentInfo?.type !== 'external_paypal';
   const showFullNameInput =
-    !isPaymentElementLoading && !showPayPalButton && !isSavedPaymentMethod && selectedPaymentMethod === 'card' && !isNotCard;
+    !isPaymentElementLoading &&
+    !showPayPalButton &&
+    !isSavedPaymentMethod &&
+    selectedPaymentMethod === 'card' &&
+    !isNotCard;
   const nonStripeFieldsComplete = !showFullNameInput || !!fullName;
 
   const submitHandler = async (
@@ -235,13 +240,13 @@ export function CheckoutForm({
     const confirmationTokenParams: ConfirmationTokenCreateParams | undefined =
       !isSavedPaymentMethod
         ? {
-          payment_method_data: {
-            billing_details: {
-              name: fullName,
-              email: sessionEmail || undefined,
+            payment_method_data: {
+              billing_details: {
+                name: fullName,
+                email: sessionEmail || undefined,
+              },
             },
-          },
-        }
+          }
         : undefined;
 
     // Create the ConfirmationToken using the details collected by the Payment Element
@@ -256,7 +261,11 @@ export function CheckoutForm({
       if (confirmationTokenError.type === 'validation_error') {
         return;
       } else {
-        await handleStripeErrorAction(cart.id, confirmationTokenError, searchParamsRecord);
+        await handleStripeErrorAction(
+          cart.id,
+          confirmationTokenError,
+          searchParamsRecord
+        );
         return;
       }
     }
@@ -374,9 +383,7 @@ export function CheckoutForm({
           <>
             {showLinkAuthElement && (
               <div>
-                <LinkAuthenticationElement
-                  options={linkAuthOptions}
-                />
+                <LinkAuthenticationElement options={linkAuthOptions} />
               </div>
             )}
             <PaymentElement
@@ -450,7 +457,7 @@ export function CheckoutForm({
               />
             ) : (
               <BaseButton
-                className="mt-10 w-full"
+                className="h-12 mt-10 w-full"
                 type="submit"
                 variant={ButtonVariant.Primary}
                 aria-disabled={
diff --git a/libs/payments/ui/src/lib/client/components/CouponForm/index.tsx b/libs/payments/ui/src/lib/client/components/CouponForm/index.tsx
@@ -66,6 +66,7 @@ const WithCoupon = ({
             {readOnly ? null : (
               <Form.Submit asChild>
                 <SubmitButton
+                  className="h-12"
                   variant={ButtonVariant.Secondary}
                   data-testid="coupon-remove-button"
                 >
@@ -185,6 +186,7 @@ const WithoutCoupon = ({
             </Form.Control>
             <Form.Submit asChild>
               <SubmitButton
+                className="h-12"
                 variant={ButtonVariant.Primary}
                 data-testid="coupon-button"
                 disabled={readOnly}
diff --git a/libs/payments/ui/src/lib/client/components/PageNotFound/index.tsx b/libs/payments/ui/src/lib/client/components/PageNotFound/index.tsx
@@ -2,28 +2,32 @@
  * 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"
+'use client';
 
 import Image from 'next/image';
 import errorIcon from '@fxa/shared/assets/images/error.svg';
-import { usePathname, useRouter } from 'next/navigation'
+import { usePathname, useRouter } from 'next/navigation';
 import { BaseButton, ButtonVariant } from '../BaseButton';
 import { useEffect, useState } from 'react';
 import { serverLogAction } from '../../../actions';
 
 interface PageNotFoundProps {
-  header: string,
-  description: string,
-  button: string,
+  header: string;
+  description: string;
+  button: string;
 }
 
 /**
  * Localized strings are passed into this component so that it can be used
  * without being wrapped by the LocalizationProvider.
  */
-export function PageNotFound({ header, description, button }: PageNotFoundProps) {
+export function PageNotFound({
+  header,
+  description,
+  button,
+}: PageNotFoundProps) {
   const router = useRouter();
-  const pathname = usePathname()
+  const pathname = usePathname();
   const [logOnce, setLogOnce] = useState(false);
 
   useEffect(() => {
@@ -39,23 +43,23 @@ export function PageNotFound({ header, description, button }: PageNotFoundProps)
   return (
     <section
       className="flex flex-col items-center text-center max-w-lg mx-auto mt-6 p-16 tablet:my-10 gap-16 bg-white shadow tablet:rounded-xl border border-transparent"
-      aria-labelledby='page-not-found-heading'
+      aria-labelledby="page-not-found-heading"
     >
-      <h1 id="page-not-found-heading" className="text-xl font-bold">{header}</h1>
+      <h1 id="page-not-found-heading" className="text-xl font-bold">
+        {header}
+      </h1>
       <Image src={errorIcon} alt="" aria-hidden="true" />
       <div className="flex flex-col gap-6 items-center text-grey-400 max-w-md text-sm">
         {description}
         <BaseButton
           variant={ButtonVariant.Primary}
-          className="text-base"
+          className="h-12 text-base"
           onClick={() => router.back()}
           aria-label={button}
         >
           {button}
         </BaseButton>
       </div>
     </section>
-  )
+  );
 }
-
-
diff --git a/libs/payments/ui/src/lib/client/components/PaymentMethodManagement/index.tsx b/libs/payments/ui/src/lib/client/components/PaymentMethodManagement/index.tsx
@@ -141,7 +141,7 @@ export function PaymentMethodManagement({
               billing_details: {
                 name: fullName,
                 email: sessionEmail || undefined,
-              }
+              },
             },
           },
         });
@@ -268,7 +268,7 @@ export function PaymentMethodManagement({
           <div className="flex flex-row justify-center pt-4">
             <Form.Submit asChild>
               <BaseButton
-                className="mt-10 w-full"
+                className="h-10 mt-10 w-full"
                 type="submit"
                 variant={ButtonVariant.Primary}
                 aria-disabled={
@@ -297,7 +297,7 @@ export function PaymentMethodManagement({
           <div className="flex flex-row justify-center pt-4">
             <Form.Submit asChild>
               <BaseButton
-                className="mt-10 w-full"
+                className="h-10 mt-10 w-full"
                 type="submit"
                 variant={ButtonVariant.Primary}
                 aria-disabled={!stripe || !isComplete || isLoading}
diff --git a/libs/payments/ui/src/lib/client/components/SelectTaxLocation/index.tsx b/libs/payments/ui/src/lib/client/components/SelectTaxLocation/index.tsx
@@ -25,13 +25,13 @@ type SaveActionSignature = (
   postalCode: string
 ) => Promise<
   | {
-    ok: false;
-    error: string | { message: string; data: any };
-  }
+      ok: false;
+      error: string | { message: string; data: any };
+    }
   | {
-    ok: true;
-    data: any;
-  }
+      ok: true;
+      data: any;
+    }
   | void
 >;
 
@@ -57,6 +57,7 @@ const Collapsed = ({
         <span>
           <Form.Submit asChild>
             <SubmitButton
+              className="h-12"
               variant={ButtonVariant.Primary}
               data-testid="tax-location-edit-button"
             >
@@ -136,7 +137,9 @@ const Expanded = ({
 
   const currentCurrencyDisplayName =
     currentCurrency &&
-    new Intl.DisplayNames([locale], { type: 'currency' }).of(currentCurrency.toUpperCase());
+    new Intl.DisplayNames([locale], { type: 'currency' }).of(
+      currentCurrency.toUpperCase()
+    );
 
   useEffect(() => {
     countries.registerLocale(
@@ -189,23 +192,19 @@ const Expanded = ({
 
     const formData = new FormData(e.currentTarget);
     const data = Object.fromEntries(formData.entries());
-    const formCountryCode = typeof data.countryCode === 'string' ? data.countryCode : '';
-    const formPostalCode = typeof data.postalCode === 'string' ? data.postalCode : '';
+    const formCountryCode =
+      typeof data.countryCode === 'string' ? data.countryCode : '';
+    const formPostalCode =
+      typeof data.postalCode === 'string' ? data.postalCode : '';
 
-    if (
-      formCountryCode &&
-      unsupportedLocations.includes(formCountryCode)
-    ) {
+    if (formCountryCode && unsupportedLocations.includes(formCountryCode)) {
       setServerErrors((prev) => ({ ...prev, unsupportedCountry: true }));
     }
 
     try {
       if (formCountryCode && formPostalCode) {
         const { isValid, formattedPostalCode } =
-          await validateAndFormatPostalCode(
-            formPostalCode,
-            formCountryCode,
-          );
+          await validateAndFormatPostalCode(formPostalCode, formCountryCode);
 
         if (!isValid) {
           setServerErrors((prev) => ({ ...prev, invalidPostalCode: true }));
@@ -481,7 +480,7 @@ const Expanded = ({
         {!buttonContent && (
           <BaseButton
             variant={ButtonVariant.Secondary}
-            className="w-full"
+            className="h-12 w-full"
             data-testid="tax-location-cancel-button"
             onClick={cancelAction}
             type="button"
@@ -493,7 +492,7 @@ const Expanded = ({
         <Form.Submit asChild>
           <BaseButton
             variant={ButtonVariant.Primary}
-            className="w-full"
+            className="h-12 w-full"
             data-testid="tax-location-save-button"
             type="submit"
             disabled={blockingErrorExists || isLoading}
diff --git a/libs/payments/ui/src/lib/client/components/SignInForm/index.tsx b/libs/payments/ui/src/lib/client/components/SignInForm/index.tsx
@@ -119,7 +119,10 @@ export const SignInForm = ({
       </Form.Field>
 
       <Form.Submit asChild>
-        <SubmitButton variant={ButtonVariant.Primary} className="my-6 w-full">
+        <SubmitButton
+          variant={ButtonVariant.Primary}
+          className="h-12 my-6 w-full"
+        >
           <Localized id="signin-form-continue-button">Continue</Localized>
         </SubmitButton>
       </Form.Submit>
