feat(next): Duplicate right-hand portion of fxa-settings header

Because: * The fxa-settings header contains functionality around upsells and cross-sells, and gives the user direct access to their signed-in status This commit: * rewrites the components to be up to standard for the content within the libs directory * Reworks the headers for the payments-next app to be compatible with new localization requirements * Brings the header up to parity Closes #FXA-7803
mozilla · Jan 28, 2025 · ea0df6a · ea0df6a
1 parent f270419
commit ea0df6a
Show file tree

Hide file tree

Showing 21 changed files with 586 additions and 62 deletions.
diff --git a/apps/payments/next/.env b/apps/payments/next/.env
@@ -103,6 +103,9 @@ PROFILE_CLIENT_CONFIG__URL=http://localhost:1111
 PROFILE_CLIENT_CONFIG__SECRET_BEARER_TOKEN='8675309jenny'
 PROFILE_CLIENT_CONFIG__SERVICE_NAME='subhub'
 
+# ProfileServer Config
+PROFILE_SERVER__URL=http://localhost:1112
+
 # ContentServer Config
 CONTENT_SERVER_CLIENT_CONFIG__URL=http://localhost:3030
 

diff --git a/apps/payments/next/app/[locale]/layout.tsx b/apps/payments/next/app/[locale]/layout.tsx
@@ -4,8 +4,9 @@
 import { getApp } from '@fxa/payments/ui/server';
 import { headers } from 'next/headers';
 import { DEFAULT_LOCALE } from '@fxa/shared/l10n';
-import { Providers } from '@fxa/payments/ui';
+import { Header, Providers } from '@fxa/payments/ui';
 import { config } from 'apps/payments/next/config';
+import { auth, signOut } from '../../auth';
 
 export default async function RootProviderLayout({
   children,
@@ -22,6 +23,8 @@ export default async function RootProviderLayout({
   const nonce = headers().get('x-nonce') || undefined;
   const fetchedMessages = getApp().getFetchedMessages(locale);
 
+  const session = await auth();
+
   return (
     <Providers
       config={{
@@ -34,7 +37,23 @@ export default async function RootProviderLayout({
       fetchedMessages={fetchedMessages}
       nonce={nonce}
     >
-      {children}
+      <Header
+        auth={{
+          user: session?.user,
+          signOut: async (routeParams) => {
+            'use server';
+            await signOut({ redirect: false });
+
+            const { locale, offeringId, interval } = routeParams;
+            if (locale && offeringId && interval) {
+              return `/${locale}/${offeringId}/${interval}/new`;
+            } else {
+              return '/';
+            }
+          },
+        }}
+      />
+      <main>{children}</main>
     </Providers>
   );
 }
diff --git a/apps/payments/next/app/layout.tsx b/apps/payments/next/app/layout.tsx
@@ -2,8 +2,6 @@
  * 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 Image from 'next/image';
-import mozillaLogo from '@fxa/shared/assets/images/moz-logo-bw-rgb.svg';
 import './styles/global.css';
 
 // TODO - Replace these placeholders as part of FXA-8227
@@ -20,19 +18,6 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body>
-        <header
-          className="bg-white fixed flex justify-between items-center shadow h-16 left-0 top-0 mx-auto my-0 px-4 py-0 w-full z-40 tablet:h-20"
-          role="banner"
-          data-testid="header"
-        >
-          <Image
-            src={mozillaLogo}
-            alt="Mozilla logo"
-            className="object-contain"
-            data-testid="branding"
-            width={120}
-          />
-        </header>
         <main className="mt-16 min-h-[calc(100vh_-_4rem)]">{children}</main>
       </body>
     </html>

diff --git a/apps/payments/next/app/page.tsx b/apps/payments/next/app/page.tsx
@@ -11,52 +11,54 @@ export default function Index() {
   // and instead redirects to the Subscription Management page.
   // This page will be fixed before launch by FXA-8304
   return (
-    <div>
-      <h1 className="text-xxl text-center m-4">Welcome</h1>
-      <div className="flex-col">
-        <h2 className="text-xl">With auth</h2>
-        <div className="flex gap-8">
-          <div className="flex flex-col gap-2 p-4 items-center">
-            <h2>VPN - Monthly</h2>
-            <Link
-              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-              href="/en/vpn/monthly/landing"
-            >
-              Redirect
-            </Link>
+    <>
+      <main className="mt-16 min-h-[calc(100vh_-_4rem)]">
+        <h1 className="text-xxl text-center m-4">Welcome</h1>
+        <div className="flex-col">
+          <h2 className="text-xl">With auth</h2>
+          <div className="flex gap-8">
+            <div className="flex flex-col gap-2 p-4 items-center">
+              <h2>VPN - Monthly</h2>
+              <Link
+                className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+                href="/en/vpn/monthly/landing"
+              >
+                Redirect
+              </Link>
+            </div>
+            <div className="flex flex-col gap-2 p-4 items-center">
+              <h2>VPN - Yearly</h2>
+              <Link
+                className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+                href="/en/123donepro/yearly/landing"
+              >
+                Redirect
+              </Link>
+            </div>
           </div>
-          <div className="flex flex-col gap-2 p-4 items-center">
-            <h2>VPN - Yearly</h2>
-            <Link
-              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-              href="/en/123donepro/yearly/landing"
-            >
-              Redirect
-            </Link>
+          <h2 className="text-xl mt-8">Without auth</h2>
+          <div className="flex gap-8">
+            <div className="flex flex-col gap-2 p-4 items-center">
+              <h2>123Done Pro - Monthly</h2>
+              <Link
+                className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+                href="/en/123donepro/monthly/new"
+              >
+                Redirect
+              </Link>
+            </div>
+            <div className="flex flex-col gap-2 p-4 items-center">
+              <h2>VPN - Yearly</h2>
+              <Link
+                className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+                href="/en/123donepro/yearly/new"
+              >
+                Redirect
+              </Link>
+            </div>
           </div>
         </div>
-        <h2 className="text-xl mt-8">Without auth</h2>
-        <div className="flex gap-8">
-          <div className="flex flex-col gap-2 p-4 items-center">
-            <h2>123Done Pro - Monthly</h2>
-            <Link
-              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-              href="/en/123donepro/monthly/new"
-            >
-              Redirect
-            </Link>
-          </div>
-          <div className="flex flex-col gap-2 p-4 items-center">
-            <h2>VPN - Yearly</h2>
-            <Link
-              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-              href="/en/123donepro/yearly/new"
-            >
-              Redirect
-            </Link>
-          </div>
-        </div>
-      </div>
-    </div>
+      </main>
+    </>
   );
 }
diff --git a/apps/payments/next/middleware.ts b/apps/payments/next/middleware.ts
@@ -20,6 +20,8 @@ export function middleware(request: NextRequest) {
   const PAYPAL_SCRIPT_URL = 'https://www.paypal.com';
   const PAYPAL_API_URL = process.env.CSP__PAYPAL_API;
   const PAYPAL_OBJECTS = 'https://www.paypalobjects.com';
+  const PROFILE_CLIENT_URL = process.env.PROFILE_CLIENT_CONFIG__URL;
+  const PROFILE_SERVER_URL = process.env.PROFILE_SERVER__URL;
 
   /*
    * CSP Notes
@@ -40,7 +42,7 @@ export function middleware(request: NextRequest) {
     process.env.NODE_ENV === 'production' ? '' : `'unsafe-eval'`
   } https://js.stripe.com;
     style-src 'self' 'unsafe-inline';
-    img-src 'self' blob: data: ${accountsStaticCdn} ${PAYPAL_OBJECTS};
+    img-src 'self' blob: data: ${accountsStaticCdn} ${PAYPAL_OBJECTS} ${PROFILE_CLIENT_URL} ${PROFILE_SERVER_URL};
     font-src 'self';
     object-src 'none';
     base-uri 'self';

diff --git a/libs/payments/ui/src/index.ts b/libs/payments/ui/src/index.ts
@@ -8,6 +8,7 @@ export * from './lib/client/components/BaseButton';
 export * from './lib/client/components/CheckoutForm';
 export * from './lib/client/components/CheckoutCheckbox';
 export * from './lib/client/components/CouponForm';
+export * from './lib/client/components/Header';
 export * from './lib/client/components/PaymentStateObserver';
 export * from './lib/client/components/PaymentInputHandler';
 export * from './lib/client/components/PaymentSection';

diff --git a/libs/payments/ui/src/lib/client/components/Header/en.tfl b/libs/payments/ui/src/lib/client/components/Header/en.tfl
@@ -0,0 +1,33 @@
+# Component - Header
+
+payments-header-help
+  .title = Help
+  .aria-label = Help
+  .alt = Help
+
+payments-header-bento
+  .title = Mozilla products # hover text for bento menu
+  .aria-label = Mozilla products # hover text for bento menu
+  .alt = Mozilla Logo # bento menu logo alt text
+
+
+payments-header-bento-close
+  .alt = Close  # Icon shown in close-menu button
+payments-header-bento-tagline = More products from Mozilla that protect your privacy
+
+payments-header-bento-firefox-desktop = { -brand-firefox } Browser for Desktop
+payments-header-bento-firefox-mobile = { -brand-firefox } Browser for Mobile
+payments-header-bento-monitor = { -product-mozilla-monitor }
+payments-header-bento-firefox-relay = { -product-firefox-relay }
+payments-header-bento-vpn = { -product-mozilla-vpn }
+payments-header-bento-pocket = { -product-pocket }
+payments-header-bento-made-by-mozilla = Made by { -brand-mozilla }
+
+payments-header-avatar
+  .title = Mozilla account menu # hover text for avatar dropdown menu
+
+payments-header-avatar-icon
+  .alt = Account profile picture # profile picture alt text
+
+payments-header-avatar-expanded-signed-in-as = Signed in as
+payments-header-avatar-expanded-sign-out = Sign out