Skip to content

Commit 93903bd

Browse files
david1alvarezdavid1alvarez
committed
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
1 parent f270419 commit 93903bd

22 files changed

Lines changed: 587 additions & 61 deletions

File tree

‎apps/payments/next/.env‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,10 @@ PROFILE_CLIENT_CONFIG__URL=http://localhost:1111
103103
PROFILE_CLIENT_CONFIG__SECRET_BEARER_TOKEN='8675309jenny'
104104
PROFILE_CLIENT_CONFIG__SERVICE_NAME='subhub'
105105

106+
# ImageServer Config
107+
PROFILE_DEFAULT_IMAGES_URL=http://localhost:1111
108+
PROFILE_UPLOADED_IMAGES_URL=http://localhost:1112
109+
106110
# ContentServer Config
107111
CONTENT_SERVER_CLIENT_CONFIG__URL=http://localhost:3030
108112

‎apps/payments/next/app/[locale]/layout.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@
44
import { getApp } from '@fxa/payments/ui/server';
55
import { headers } from 'next/headers';
66
import { DEFAULT_LOCALE } from '@fxa/shared/l10n';
7-
import { Providers } from '@fxa/payments/ui';
7+
import { Header, Providers } from '@fxa/payments/ui';
88
import { config } from 'apps/payments/next/config';
9+
import { auth, signOut } from '../../auth';
910

1011
export default async function RootProviderLayout({
1112
children,
@@ -22,6 +23,8 @@ export default async function RootProviderLayout({
2223
const nonce = headers().get('x-nonce') || undefined;
2324
const fetchedMessages = getApp().getFetchedMessages(locale);
2425

26+
const session = await auth();
27+
2528
return (
2629
<Providers
2730
config={{
@@ -34,6 +37,15 @@ export default async function RootProviderLayout({
3437
fetchedMessages={fetchedMessages}
3538
nonce={nonce}
3639
>
40+
<Header
41+
auth={{
42+
user: session?.user,
43+
signOut: async () => {
44+
'use server';
45+
await signOut({ redirect: false });
46+
},
47+
}}
48+
/>
3749
{children}
3850
</Providers>
3951
);

‎apps/payments/next/app/layout.tsx‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
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-
import Image from 'next/image';
6-
import mozillaLogo from '@fxa/shared/assets/images/moz-logo-bw-rgb.svg';
75
import './styles/global.css';
86

97
// TODO - Replace these placeholders as part of FXA-8227
@@ -20,19 +18,6 @@ export default function RootLayout({
2018
return (
2119
<html lang="en">
2220
<body>
23-
<header
24-
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"
25-
role="banner"
26-
data-testid="header"
27-
>
28-
<Image
29-
src={mozillaLogo}
30-
alt="Mozilla logo"
31-
className="object-contain"
32-
data-testid="branding"
33-
width={120}
34-
/>
35-
</header>
3621
<main className="mt-16 min-h-[calc(100vh_-_4rem)]">{children}</main>
3722
</body>
3823
</html>

‎apps/payments/next/app/page.tsx‎

Lines changed: 46 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -11,52 +11,54 @@ export default function Index() {
1111
// and instead redirects to the Subscription Management page.
1212
// This page will be fixed before launch by FXA-8304
1313
return (
14-
<div>
15-
<h1 className="text-xxl text-center m-4">Welcome</h1>
16-
<div className="flex-col">
17-
<h2 className="text-xl">With auth</h2>
18-
<div className="flex gap-8">
19-
<div className="flex flex-col gap-2 p-4 items-center">
20-
<h2>VPN - Monthly</h2>
21-
<Link
22-
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
23-
href="/en/vpn/monthly/landing"
24-
>
25-
Redirect
26-
</Link>
14+
<>
15+
<main className="mt-16 min-h-[calc(100vh_-_4rem)]">
16+
<h1 className="text-xxl text-center m-4">Welcome</h1>
17+
<div className="flex-col">
18+
<h2 className="text-xl">With auth</h2>
19+
<div className="flex gap-8">
20+
<div className="flex flex-col gap-2 p-4 items-center">
21+
<h2>VPN - Monthly</h2>
22+
<Link
23+
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
24+
href="/en/vpn/monthly/landing"
25+
>
26+
Redirect
27+
</Link>
28+
</div>
29+
<div className="flex flex-col gap-2 p-4 items-center">
30+
<h2>VPN - Yearly</h2>
31+
<Link
32+
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
33+
href="/en/123donepro/yearly/landing"
34+
>
35+
Redirect
36+
</Link>
37+
</div>
2738
</div>
28-
<div className="flex flex-col gap-2 p-4 items-center">
29-
<h2>VPN - Yearly</h2>
30-
<Link
31-
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
32-
href="/en/123donepro/yearly/landing"
33-
>
34-
Redirect
35-
</Link>
39+
<h2 className="text-xl mt-8">Without auth</h2>
40+
<div className="flex gap-8">
41+
<div className="flex flex-col gap-2 p-4 items-center">
42+
<h2>123Done Pro - Monthly</h2>
43+
<Link
44+
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
45+
href="/en/123donepro/monthly/new"
46+
>
47+
Redirect
48+
</Link>
49+
</div>
50+
<div className="flex flex-col gap-2 p-4 items-center">
51+
<h2>VPN - Yearly</h2>
52+
<Link
53+
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
54+
href="/en/123donepro/yearly/new"
55+
>
56+
Redirect
57+
</Link>
58+
</div>
3659
</div>
3760
</div>
38-
<h2 className="text-xl mt-8">Without auth</h2>
39-
<div className="flex gap-8">
40-
<div className="flex flex-col gap-2 p-4 items-center">
41-
<h2>123Done Pro - Monthly</h2>
42-
<Link
43-
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
44-
href="/en/123donepro/monthly/new"
45-
>
46-
Redirect
47-
</Link>
48-
</div>
49-
<div className="flex flex-col gap-2 p-4 items-center">
50-
<h2>VPN - Yearly</h2>
51-
<Link
52-
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
53-
href="/en/123donepro/yearly/new"
54-
>
55-
Redirect
56-
</Link>
57-
</div>
58-
</div>
59-
</div>
60-
</div>
61+
</main>
62+
</>
6163
);
6264
}

‎apps/payments/next/config/index.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,12 @@ export class PaymentsNextConfig extends NestAppRootConfig {
119119
@IsUrl({ require_tld: false })
120120
paymentsNextHostedUrl!: string;
121121

122+
@IsUrl({ require_tld: false })
123+
profileDefaultImagesUrl!: string;
124+
125+
@IsUrl({ require_tld: false })
126+
profileUploadedImagesUrl!: string;
127+
122128
@IsString()
123129
subscriptionsUnsupportedLocations!: string;
124130

‎apps/payments/next/middleware.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@ export function middleware(request: NextRequest) {
2020
const PAYPAL_SCRIPT_URL = 'https://www.paypal.com';
2121
const PAYPAL_API_URL = process.env.CSP__PAYPAL_API;
2222
const PAYPAL_OBJECTS = 'https://www.paypalobjects.com';
23+
const PROFILE_CLIENT_URL = process.env.PROFILE_CLIENT_CONFIG__URL;
24+
const PROFILE_DEFAULT_IMAGES_URL = process.env.PROFILE_DEFAULT_IMAGES_URL;
25+
const PROFILE_UPLOADED_IMAGES_URL = process.env.PROFILE_UPLOADED_IMAGES_URL;
2326

2427
/*
2528
* CSP Notes
@@ -40,7 +43,7 @@ export function middleware(request: NextRequest) {
4043
process.env.NODE_ENV === 'production' ? '' : `'unsafe-eval'`
4144
} https://js.stripe.com;
4245
style-src 'self' 'unsafe-inline';
43-
img-src 'self' blob: data: ${accountsStaticCdn} ${PAYPAL_OBJECTS};
46+
img-src 'self' blob: data: ${accountsStaticCdn} ${PAYPAL_OBJECTS} ${PROFILE_CLIENT_URL} ${PROFILE_DEFAULT_IMAGES_URL} ${PROFILE_UPLOADED_IMAGES_URL};
4447
font-src 'self';
4548
object-src 'none';
4649
base-uri 'self';

‎libs/payments/ui/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export * from './lib/client/components/BaseButton';
88
export * from './lib/client/components/CheckoutForm';
99
export * from './lib/client/components/CheckoutCheckbox';
1010
export * from './lib/client/components/CouponForm';
11+
export * from './lib/client/components/Header';
1112
export * from './lib/client/components/PaymentStateObserver';
1213
export * from './lib/client/components/PaymentInputHandler';
1314
export * from './lib/client/components/PaymentSection';

‎libs/payments/ui/src/lib/client/components/Header/en.tfl‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Component - Header
2+
3+
payments-header-help =
4+
.title = Help
5+
.aria-label = Help
6+
.alt = Help
7+
8+
payments-header-bento =
9+
.title = Mozilla products # hover text for bento menu
10+
.aria-label = Mozilla products # hover text for bento menu
11+
.alt = Mozilla Logo # bento menu logo alt text
12+
13+
14+
payments-header-bento-close =
15+
.alt = Close # Icon shown in close-menu button
16+
payments-header-bento-tagline = More products from Mozilla that protect your privacy
17+
18+
payments-header-bento-firefox-desktop = { -brand-firefox } Browser for Desktop
19+
payments-header-bento-firefox-mobile = { -brand-firefox } Browser for Mobile
20+
payments-header-bento-monitor = { -product-mozilla-monitor }
21+
payments-header-bento-firefox-relay = { -product-firefox-relay }
22+
payments-header-bento-vpn = { -product-mozilla-vpn }
23+
payments-header-bento-pocket = { -product-pocket }
24+
payments-header-bento-made-by-mozilla = Made by { -brand-mozilla }
25+
26+
payments-header-avatar =
27+
.title = Mozilla account menu # hover text for avatar dropdown menu
28+
29+
payments-header-avatar-icon =
30+
.alt = Account profile picture # profile picture alt text
31+
32+
payments-header-avatar-expanded-signed-in-as = Signed in as
33+
payments-header-avatar-expanded-sign-out = Sign out

0 commit comments

Comments
 (0)