Skip to content

Commit f567141

Browse files
StaberindeZAStaberindeZA
authored
Merge pull request #19369 from mozilla/fix_buttons
fix(payments-ui): Fix height of buttons
2 parents 93d96ff + 925ce31 commit f567141

8 files changed

Lines changed: 72 additions & 57 deletions

File tree

‎apps/payments/next/app/[locale]/[offeringId]/[interval]/checkout/[cartId]/start/page.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,6 +165,7 @@ export default async function Checkout({
165165
}}
166166
>
167167
<BaseButton
168+
className="h-12"
168169
variant={ButtonVariant.ThirdParty}
169170
aria-label={l10n.getString(
170171
'continue-signin-with-google-button',
@@ -187,6 +188,7 @@ export default async function Checkout({
187188
}}
188189
>
189190
<BaseButton
191+
className="h-12"
190192
variant={ButtonVariant.ThirdParty}
191193
aria-label={l10n.getString(
192194
'continue-signin-with-apple-button',

‎apps/payments/next/app/[locale]/auth/error/page.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,7 @@ export default function AuthErrorPage({
2525
const errorMessage = Array.isArray(searchParams?.error)
2626
? searchParams.error[0]
2727
: searchParams?.error;
28-
getApp()
29-
.getEmitterService()
30-
.emit('auth', { type: 'error', errorMessage });
28+
getApp().getEmitterService().emit('auth', { type: 'error', errorMessage });
3129

3230
return (
3331
<>
@@ -87,7 +85,7 @@ export default function AuthErrorPage({
8785
'Try again'
8886
)}
8987
variant={ButtonVariant.Primary}
90-
className="text-base"
88+
className="h-12 text-base"
9189
>
9290
{l10n.getString('next-payment-error-retry-button', 'Try again')}
9391
</BaseButton>

‎libs/payments/ui/src/lib/client/components/CheckoutForm/index.tsx‎

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -75,10 +75,10 @@ interface CheckoutFormProps {
7575
};
7676
paymentInfo?: {
7777
type:
78-
| Stripe.PaymentMethod.Type
79-
| 'google_iap'
80-
| 'apple_iap'
81-
| 'external_paypal';
78+
| Stripe.PaymentMethod.Type
79+
| 'google_iap'
80+
| 'apple_iap'
81+
| 'external_paypal';
8282
last4?: string;
8383
brand?: string;
8484
customerSessionClientSecret?: string;
@@ -152,7 +152,8 @@ export function CheckoutForm({
152152

153153
//Show or hide the PayPal button and Link
154154
const hasSavedPaymentMethod = !!event?.value?.payment_method?.id;
155-
const isNewCardSelected = event?.value?.type === 'card' && !hasSavedPaymentMethod;
155+
const isNewCardSelected =
156+
event?.value?.type === 'card' && !hasSavedPaymentMethod;
156157

157158
const selectedType = event?.value?.type || '';
158159
const isNotCardType = selectedType !== 'card';
@@ -172,7 +173,11 @@ export function CheckoutForm({
172173
const showPayPalButton = selectedPaymentMethod === 'external_paypal';
173174
const isStripe = cart?.paymentInfo?.type !== 'external_paypal';
174175
const showFullNameInput =
175-
!isPaymentElementLoading && !showPayPalButton && !isSavedPaymentMethod && selectedPaymentMethod === 'card' && !isNotCard;
176+
!isPaymentElementLoading &&
177+
!showPayPalButton &&
178+
!isSavedPaymentMethod &&
179+
selectedPaymentMethod === 'card' &&
180+
!isNotCard;
176181
const nonStripeFieldsComplete = !showFullNameInput || !!fullName;
177182

178183
const submitHandler = async (
@@ -235,13 +240,13 @@ export function CheckoutForm({
235240
const confirmationTokenParams: ConfirmationTokenCreateParams | undefined =
236241
!isSavedPaymentMethod
237242
? {
238-
payment_method_data: {
239-
billing_details: {
240-
name: fullName,
241-
email: sessionEmail || undefined,
243+
payment_method_data: {
244+
billing_details: {
245+
name: fullName,
246+
email: sessionEmail || undefined,
247+
},
242248
},
243-
},
244-
}
249+
}
245250
: undefined;
246251

247252
// Create the ConfirmationToken using the details collected by the Payment Element
@@ -256,7 +261,11 @@ export function CheckoutForm({
256261
if (confirmationTokenError.type === 'validation_error') {
257262
return;
258263
} else {
259-
await handleStripeErrorAction(cart.id, confirmationTokenError, searchParamsRecord);
264+
await handleStripeErrorAction(
265+
cart.id,
266+
confirmationTokenError,
267+
searchParamsRecord
268+
);
260269
return;
261270
}
262271
}
@@ -374,9 +383,7 @@ export function CheckoutForm({
374383
<>
375384
{showLinkAuthElement && (
376385
<div>
377-
<LinkAuthenticationElement
378-
options={linkAuthOptions}
379-
/>
386+
<LinkAuthenticationElement options={linkAuthOptions} />
380387
</div>
381388
)}
382389
<PaymentElement
@@ -450,7 +457,7 @@ export function CheckoutForm({
450457
/>
451458
) : (
452459
<BaseButton
453-
className="mt-10 w-full"
460+
className="h-12 mt-10 w-full"
454461
type="submit"
455462
variant={ButtonVariant.Primary}
456463
aria-disabled={

‎libs/payments/ui/src/lib/client/components/CouponForm/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ const WithCoupon = ({
6666
{readOnly ? null : (
6767
<Form.Submit asChild>
6868
<SubmitButton
69+
className="h-12"
6970
variant={ButtonVariant.Secondary}
7071
data-testid="coupon-remove-button"
7172
>
@@ -185,6 +186,7 @@ const WithoutCoupon = ({
185186
</Form.Control>
186187
<Form.Submit asChild>
187188
<SubmitButton
189+
className="h-12"
188190
variant={ButtonVariant.Primary}
189191
data-testid="coupon-button"
190192
disabled={readOnly}

‎libs/payments/ui/src/lib/client/components/PageNotFound/index.tsx‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,32 @@
22
* License, v. 2.0. If a copy of the MPL was not distributed with this
33
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
44

5-
"use client"
5+
'use client';
66

77
import Image from 'next/image';
88
import errorIcon from '@fxa/shared/assets/images/error.svg';
9-
import { usePathname, useRouter } from 'next/navigation'
9+
import { usePathname, useRouter } from 'next/navigation';
1010
import { BaseButton, ButtonVariant } from '../BaseButton';
1111
import { useEffect, useState } from 'react';
1212
import { serverLogAction } from '../../../actions';
1313

1414
interface PageNotFoundProps {
15-
header: string,
16-
description: string,
17-
button: string,
15+
header: string;
16+
description: string;
17+
button: string;
1818
}
1919

2020
/**
2121
* Localized strings are passed into this component so that it can be used
2222
* without being wrapped by the LocalizationProvider.
2323
*/
24-
export function PageNotFound({ header, description, button }: PageNotFoundProps) {
24+
export function PageNotFound({
25+
header,
26+
description,
27+
button,
28+
}: PageNotFoundProps) {
2529
const router = useRouter();
26-
const pathname = usePathname()
30+
const pathname = usePathname();
2731
const [logOnce, setLogOnce] = useState(false);
2832

2933
useEffect(() => {
@@ -39,23 +43,23 @@ export function PageNotFound({ header, description, button }: PageNotFoundProps)
3943
return (
4044
<section
4145
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"
42-
aria-labelledby='page-not-found-heading'
46+
aria-labelledby="page-not-found-heading"
4347
>
44-
<h1 id="page-not-found-heading" className="text-xl font-bold">{header}</h1>
48+
<h1 id="page-not-found-heading" className="text-xl font-bold">
49+
{header}
50+
</h1>
4551
<Image src={errorIcon} alt="" aria-hidden="true" />
4652
<div className="flex flex-col gap-6 items-center text-grey-400 max-w-md text-sm">
4753
{description}
4854
<BaseButton
4955
variant={ButtonVariant.Primary}
50-
className="text-base"
56+
className="h-12 text-base"
5157
onClick={() => router.back()}
5258
aria-label={button}
5359
>
5460
{button}
5561
</BaseButton>
5662
</div>
5763
</section>
58-
)
64+
);
5965
}
60-
61-

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ export function PaymentMethodManagement({
141141
billing_details: {
142142
name: fullName,
143143
email: sessionEmail || undefined,
144-
}
144+
},
145145
},
146146
},
147147
});
@@ -268,7 +268,7 @@ export function PaymentMethodManagement({
268268
<div className="flex flex-row justify-center pt-4">
269269
<Form.Submit asChild>
270270
<BaseButton
271-
className="mt-10 w-full"
271+
className="h-10 mt-10 w-full"
272272
type="submit"
273273
variant={ButtonVariant.Primary}
274274
aria-disabled={
@@ -297,7 +297,7 @@ export function PaymentMethodManagement({
297297
<div className="flex flex-row justify-center pt-4">
298298
<Form.Submit asChild>
299299
<BaseButton
300-
className="mt-10 w-full"
300+
className="h-10 mt-10 w-full"
301301
type="submit"
302302
variant={ButtonVariant.Primary}
303303
aria-disabled={!stripe || !isComplete || isLoading}

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

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,13 @@ type SaveActionSignature = (
2525
postalCode: string
2626
) => Promise<
2727
| {
28-
ok: false;
29-
error: string | { message: string; data: any };
30-
}
28+
ok: false;
29+
error: string | { message: string; data: any };
30+
}
3131
| {
32-
ok: true;
33-
data: any;
34-
}
32+
ok: true;
33+
data: any;
34+
}
3535
| void
3636
>;
3737

@@ -57,6 +57,7 @@ const Collapsed = ({
5757
<span>
5858
<Form.Submit asChild>
5959
<SubmitButton
60+
className="h-12"
6061
variant={ButtonVariant.Primary}
6162
data-testid="tax-location-edit-button"
6263
>
@@ -136,7 +137,9 @@ const Expanded = ({
136137

137138
const currentCurrencyDisplayName =
138139
currentCurrency &&
139-
new Intl.DisplayNames([locale], { type: 'currency' }).of(currentCurrency.toUpperCase());
140+
new Intl.DisplayNames([locale], { type: 'currency' }).of(
141+
currentCurrency.toUpperCase()
142+
);
140143

141144
useEffect(() => {
142145
countries.registerLocale(
@@ -189,23 +192,19 @@ const Expanded = ({
189192

190193
const formData = new FormData(e.currentTarget);
191194
const data = Object.fromEntries(formData.entries());
192-
const formCountryCode = typeof data.countryCode === 'string' ? data.countryCode : '';
193-
const formPostalCode = typeof data.postalCode === 'string' ? data.postalCode : '';
195+
const formCountryCode =
196+
typeof data.countryCode === 'string' ? data.countryCode : '';
197+
const formPostalCode =
198+
typeof data.postalCode === 'string' ? data.postalCode : '';
194199

195-
if (
196-
formCountryCode &&
197-
unsupportedLocations.includes(formCountryCode)
198-
) {
200+
if (formCountryCode && unsupportedLocations.includes(formCountryCode)) {
199201
setServerErrors((prev) => ({ ...prev, unsupportedCountry: true }));
200202
}
201203

202204
try {
203205
if (formCountryCode && formPostalCode) {
204206
const { isValid, formattedPostalCode } =
205-
await validateAndFormatPostalCode(
206-
formPostalCode,
207-
formCountryCode,
208-
);
207+
await validateAndFormatPostalCode(formPostalCode, formCountryCode);
209208

210209
if (!isValid) {
211210
setServerErrors((prev) => ({ ...prev, invalidPostalCode: true }));
@@ -481,7 +480,7 @@ const Expanded = ({
481480
{!buttonContent && (
482481
<BaseButton
483482
variant={ButtonVariant.Secondary}
484-
className="w-full"
483+
className="h-12 w-full"
485484
data-testid="tax-location-cancel-button"
486485
onClick={cancelAction}
487486
type="button"
@@ -493,7 +492,7 @@ const Expanded = ({
493492
<Form.Submit asChild>
494493
<BaseButton
495494
variant={ButtonVariant.Primary}
496-
className="w-full"
495+
className="h-12 w-full"
497496
data-testid="tax-location-save-button"
498497
type="submit"
499498
disabled={blockingErrorExists || isLoading}

‎libs/payments/ui/src/lib/client/components/SignInForm/index.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,10 @@ export const SignInForm = ({
119119
</Form.Field>
120120

121121
<Form.Submit asChild>
122-
<SubmitButton variant={ButtonVariant.Primary} className="my-6 w-full">
122+
<SubmitButton
123+
variant={ButtonVariant.Primary}
124+
className="h-12 my-6 w-full"
125+
>
123126
<Localized id="signin-form-continue-button">Continue</Localized>
124127
</SubmitButton>
125128
</Form.Submit>

0 commit comments

Comments
 (0)