diff --git a/apps/payments/next/app/[locale]/[offeringId]/checkout/[interval]/[cartId]/start/en.ftl b/apps/payments/next/app/[locale]/[offeringId]/checkout/[interval]/[cartId]/start/en.ftl index 5275f579dc7..d5ca8edae49 100644 --- a/apps/payments/next/app/[locale]/[offeringId]/checkout/[interval]/[cartId]/start/en.ftl +++ b/apps/payments/next/app/[locale]/[offeringId]/checkout/[interval]/[cartId]/start/en.ftl @@ -1,3 +1,4 @@ -## Component - PaymentConsentCheckbox - +## Page +next-new-user-step-1-2 = 1. Create a { -product-mozilla-account } +next-new-user-sign-in-link-2 = Already have a { -product-mozilla-account }? Sign in next-payment-confirm-with-legal-links-static-3 = I authorize { -brand-mozilla } to charge my payment method for the amount shown, according to Terms of Service and Privacy Notice, until I cancel my subscription. diff --git a/apps/payments/next/app/[locale]/[offeringId]/checkout/[interval]/[cartId]/start/page.tsx b/apps/payments/next/app/[locale]/[offeringId]/checkout/[interval]/[cartId]/start/page.tsx index aad39c71eb0..e6a54ff55a1 100644 --- a/apps/payments/next/app/[locale]/[offeringId]/checkout/[interval]/[cartId]/start/page.tsx +++ b/apps/payments/next/app/[locale]/[offeringId]/checkout/[interval]/[cartId]/start/page.tsx @@ -50,9 +50,47 @@ export default async function Checkout({ params }: { params: CheckoutParams }) { return ( <>
+ {!session && ( + <> +

+ {l10n.getString( + 'next-new-user-step-1-2', + '1. Create a Mozilla account' + )} +

+ +
{ + 'use server'; + await signIn('fxa'); + }} + > +
+ {l10n.getFragmentWithSource( + 'next-new-user-sign-in-link-2', + { + elems: { + a: ( + + ), + }, + }, + + )} +
+
+ +
+ + )} +

Temporary L10n Section

diff --git a/apps/payments/next/app/styles/global.css b/apps/payments/next/app/styles/global.css index 9c41dbc00ff..22028f8155c 100644 --- a/apps/payments/next/app/styles/global.css +++ b/apps/payments/next/app/styles/global.css @@ -29,7 +29,7 @@ body { } .page-title-container { - @apply bg-white shadow-sm shadow-grey-300 text-center mt-0 mb-auto pt-5 px-4 pb-px tablet:mx-0; + @apply bg-white shadow-sm shadow-grey-300 text-center my-0 pt-5 px-4 pb-px tablet:mx-0; } /* error, success pages */