Merge pull request #16816 from mozilla/FXA-7521

feat(payments-next): Add SignIn button
mozilla · Apr 30, 2024 · 1d642bd · 1d642bd
2 parents 17e4cf1 + dee638a
commit 1d642bd
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 4 deletions.
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
@@ -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 }? <a>Sign in</a>
 next-payment-confirm-with-legal-links-static-3 = I authorize { -brand-mozilla } to charge my payment method for the amount shown, according to <termsOfServiceLink>Terms of Service</termsOfServiceLink> and <privacyNoticeLink>Privacy Notice</privacyNoticeLink>, 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
@@ -50,9 +50,47 @@ export default async function Checkout({ params }: { params: CheckoutParams }) {
   return (
     <>
       <section
-        className="h-min-[640px] flex flex-col items-center justify-center"
+        className="h-min-[640px]"
         aria-label="Section under construction"
       >
+        {!session && (
+          <>
+            <h4 className="font-semibold text-grey-600 text-lg">
+              {l10n.getString(
+                'next-new-user-step-1-2',
+                '1. Create a Mozilla account'
+              )}
+            </h4>
+
+            <form
+              action={async () => {
+                'use server';
+                await signIn('fxa');
+              }}
+            >
+              <div className="text-grey-400 text-sm">
+                {l10n.getFragmentWithSource(
+                  'next-new-user-sign-in-link-2',
+                  {
+                    elems: {
+                      a: (
+                        <button className="underline text-grey-400 hover:text-grey-400">
+                          Sign in
+                        </button>
+                      ),
+                    },
+                  },
+                  <button className="underline text-grey-400 hover:text-grey-400">
+                    Sign in
+                  </button>
+                )}
+              </div>
+            </form>
+
+            <hr className="mx-auto my-4 w-full border-grey-200" />
+          </>
+        )}
+
         <section className="flex flex-col gap-2 mb-8">
           <div>
             <h3 className="text-xl">Temporary L10n Section</h3>

diff --git 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 */