Skip to content

Commit 38377ed

Browse files
StaberindeZAStaberindeZA
committed
fix(next): enable close on alert dialog
Because: - Alert dialog was prevent users from using the breadcrumbs and the header menus. This commit: - Allow usage of header menus while alert is active - Always show dialog close button - Open PayPal management page in new window Closes #PAY-3270 PAY-3273 PAY-3274
1 parent 9b99286 commit 38377ed

7 files changed

Lines changed: 78 additions & 77 deletions

File tree

‎apps/payments/next/app/[locale]/subscriptions/manage/page.tsx‎

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -99,15 +99,15 @@ export default async function Manage({
9999
'Invalid payment information; there is an error with your account.'
100100
)}
101101

102-
<Link
102+
<LinkExternal
103103
className={'underline hover:text-grey-100 pl-1'}
104104
href={`${config.paymentsNextHostedUrl}/${locale}/subscriptions/payments/paypal`}
105105
>
106106
{l10n.getString(
107107
'subscription-management-page-paypal-error-banner-link',
108108
'Manage'
109109
)}
110-
</Link>
110+
</LinkExternal>
111111
</span>
112112
</AlertBar>
113113
)}
@@ -199,13 +199,13 @@ export default async function Manage({
199199
alt={
200200
walletType === 'apple_pay'
201201
? l10n.getString(
202-
'apple-pay-logo-alt-text',
203-
'Apple Pay logo'
204-
)
202+
'apple-pay-logo-alt-text',
203+
'Apple Pay logo'
204+
)
205205
: l10n.getString(
206-
'google-pay-logo-alt-text',
207-
'Google Pay logo'
208-
)
206+
'google-pay-logo-alt-text',
207+
'Google Pay logo'
208+
)
209209
}
210210
width={40}
211211
height={24}
@@ -426,10 +426,10 @@ export default async function Manage({
426426
>
427427
{sub.interval
428428
? l10n.getString(
429-
getSubscriptionIntervalFtlId(sub.interval),
430-
{ productName: sub.productName },
431-
`${sub.productName} (${formatPlanInterval(sub.interval)})`
432-
)
429+
getSubscriptionIntervalFtlId(sub.interval),
430+
{ productName: sub.productName },
431+
`${sub.productName} (${formatPlanInterval(sub.interval)})`
432+
)
433433
: sub.productName}
434434
</h3>
435435
<LinkExternal
@@ -476,8 +476,8 @@ export default async function Manage({
476476
</ul>
477477
{(appleIapSubscriptions.length > 0 ||
478478
googleIapSubscriptions.length > 0) && (
479-
<hr className="border-b border-grey-50 my-6" aria-hidden="true" />
480-
)}
479+
<hr className="border-b border-grey-50 my-6" aria-hidden="true" />
480+
)}
481481
</>
482482
)}
483483

@@ -665,33 +665,33 @@ export default async function Manage({
665665
{!!purchase.expiryTimeMillis &&
666666
(purchase.autoRenewing
667667
? l10n.getFragmentWithSource(
668-
'subscription-management-iap-sub-next-bill-is-due',
669-
{
670-
vars: {
671-
date: nextBillDate,
672-
},
673-
elems: {
674-
strong: <strong />
675-
},
668+
'subscription-management-iap-sub-next-bill-is-due',
669+
{
670+
vars: {
671+
date: nextBillDate,
672+
},
673+
elems: {
674+
strong: <strong />
676675
},
677-
<>
678-
Next bill is due <strong>{nextBillDate}</strong>
679-
</>
680-
)
676+
},
677+
<>
678+
Next bill is due <strong>{nextBillDate}</strong>
679+
</>
680+
)
681681
: l10n.getFragmentWithSource(
682-
'subscription-management-iap-sub-will-expire-on',
683-
{
684-
vars: {
685-
date: nextBillDate,
686-
},
687-
elems: {
688-
strong: <strong />
689-
},
682+
'subscription-management-iap-sub-will-expire-on',
683+
{
684+
vars: {
685+
date: nextBillDate,
690686
},
691-
<>
692-
Your subscription will expire on <strong>{nextBillDate}</strong>
693-
</>
694-
))}
687+
elems: {
688+
strong: <strong />
689+
},
690+
},
691+
<>
692+
Your subscription will expire on <strong>{nextBillDate}</strong>
693+
</>
694+
))}
695695
</p>
696696
</div>
697697
<div>

‎libs/payments/ui/src/lib/client/components/AlertBar/en.ftl‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
alert-dialog-title = Alert dialog

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

Lines changed: 34 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,14 @@
33
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
44
'use client';
55

6-
import { Localized } from '@fluent/react';
6+
import { useLocalization } from '@fluent/react';
77
import classNames from 'classnames';
88
import * as Dialog from '@radix-ui/react-dialog';
9+
import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
910
import Image from 'next/image';
1011
import checkLogo from '@fxa/shared/assets/images/check.svg';
1112
import closeIcon from '@fxa/shared/assets/images/close.svg';
12-
import { useEffect, useState } from 'react';
13+
import { useState } from 'react';
1314

1415
export enum AlertBarVariant {
1516
ERROR,
@@ -19,58 +20,52 @@ export enum AlertBarVariant {
1920
export type AlertBarProps = {
2021
checked?: boolean;
2122
children: React.ReactNode;
22-
ariaId?: string;
2323
variant?: AlertBarVariant;
24-
onClick?: () => any;
2524
containerRef?: HTMLElement | null;
2625
};
2726

2827
export const AlertBar = ({
2928
checked,
3029
children,
3130
variant = AlertBarVariant.ERROR,
32-
ariaId,
33-
onClick,
3431
containerRef = null,
3532
}: AlertBarProps) => {
36-
const [container, setContainer] = useState<HTMLElement | null>(null);
33+
const [openDialog, setOpenDialog] = useState(true);
3734

38-
useEffect(() => {
39-
if (!containerRef) {
40-
setContainer(document.getElementById('header'));
41-
}
42-
}, []);
35+
const { l10n } = useLocalization();
4336

4437
let alertTypeStyle;
4538
switch (variant) {
4639
case AlertBarVariant.ERROR:
47-
alertTypeStyle = 'bg-red-600 text-white';
40+
alertTypeStyle = 'bg-red-100 error';
4841
break;
4942

5043
case AlertBarVariant.SUCCESS:
51-
alertTypeStyle = 'bg-grey-700 text-white';
44+
alertTypeStyle = 'bg-green-200 success';
5245
break;
5346
}
5447

5548
return (
5649
<>
57-
<Dialog.Root open={true} modal={false}>
58-
<Dialog.Portal container={container}>
50+
<Dialog.Root open={openDialog} modal={false}>
51+
<Dialog.Portal container={containerRef}>
5952
<Dialog.Content
60-
className={
61-
'left-0 w-full absolute flex font-medium items-center justify-center pt-32 tablet:pt-40'
62-
}
53+
className="flex absolute justify-center mx-2 mt-2 right-0 left-0 top-16 tablet:top-20 z-10"
6354
>
55+
<VisuallyHidden.Root asChild>
56+
<Dialog.Title
57+
>
58+
{l10n.getString('alert-dialog-title', null, 'Alert dialog')}
59+
</Dialog.Title>
60+
</VisuallyHidden.Root>
6461
<div
65-
aria-labelledby={ariaId}
6662
className={classNames(
67-
'w-2/3 tablet:w-[640px] flex font-medium items-center justify-center min-h-[32px] my-1 mx-auto p-2 relative rounded-md text-sm tablet:max-w-[640px]',
63+
'max-w-full tablet:max-w-2xl w-full desktop:min-w-sm flex shadow-md rounded-sm text-sm font-medium text-grey-700 border border-transparent outline-none',
6864
alertTypeStyle
6965
)}
7066
data-testid="alert-container"
71-
role="dialog"
7267
>
73-
<div className="text-center w-[80%]">
68+
<div className="flex-1 py-2 px-8 text-center outline-none">
7469
{checked && (
7570
<Image
7671
src={checkLogo}
@@ -80,19 +75,22 @@ export const AlertBar = ({
8075
)}
8176
{children}
8277
</div>
83-
{onClick && (
84-
<Localized id="close-aria">
85-
<span
86-
data-testid="clear-success-alert"
87-
className="grid"
88-
aria-label="Close modal"
89-
onClick={() => onClick()}
90-
role="button"
91-
>
92-
<Image src={closeIcon} alt="" className="w-4 h-4" />
93-
</span>
94-
</Localized>
95-
)}
78+
<Dialog.Close asChild>
79+
<button
80+
className={
81+
classNames(
82+
'shrink-0 items-stretch justify-center py-2 px-3 focus-visible:rounded-sm focus-visible-default outline-none',
83+
alertTypeStyle
84+
)
85+
}
86+
onClick={() => setOpenDialog(false)}
87+
>
88+
<Image
89+
src={closeIcon}
90+
alt={l10n.getString('dialog-close', null, 'Close dialog')}
91+
/>
92+
</button>
93+
</Dialog.Close>
9694
</div>
9795
</Dialog.Content>
9896
</Dialog.Portal>

‎libs/payments/ui/src/lib/client/components/Breadcrumbs/en.ftl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ subscription-management-breadcrumb-account-home = Account Home
44
# Link title - Subscriptions management
55
subscription-management-breadcrumb-subscriptions = Subscriptions
66
# Link title - Payment method management
7-
subscription-management-breadcrumb-payment = Payment Methods
7+
subscription-management-breadcrumb-payment-2 = Manage Payment Methods
88
99
# $page refers to page titles used in the breadcrumb menu (e.g. Account Home, Subscriptions, Payment Methods)
1010
subscription-management-breadcrumb-back-aria = Go back to { $page }

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export function Breadcrumbs(args: {
5252
};
5353
const PAYPAL_PAYMENT_METHODS = {
5454
label: l10n.getString(
55-
'subscription-management-breadcrumb-payment',
55+
'subscription-management-breadcrumb-payment-2',
5656
{},
5757
'Manage Payment Methods'
5858
),

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@
7878
"@radix-ui/react-dialog": "^1.1.14",
7979
"@radix-ui/react-form": "^0.1.0",
8080
"@radix-ui/react-tooltip": "^1.1.2",
81+
"@radix-ui/react-visually-hidden": "^1.2.3",
8182
"@sentry/browser": "8.42.0",
8283
"@sentry/nestjs": "8.42.0",
8384
"@sentry/nextjs": "8.42.0",

‎yarn.lock‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13847,7 +13847,7 @@ __metadata:
1384713847
languageName: node
1384813848
linkType: hard
1384913849

13850-
"@radix-ui/react-visually-hidden@npm:1.2.3":
13850+
"@radix-ui/react-visually-hidden@npm:1.2.3, @radix-ui/react-visually-hidden@npm:^1.2.3":
1385113851
version: 1.2.3
1385213852
resolution: "@radix-ui/react-visually-hidden@npm:1.2.3"
1385313853
dependencies:
@@ -35199,6 +35199,7 @@ __metadata:
3519935199
"@radix-ui/react-dialog": "npm:^1.1.14"
3520035200
"@radix-ui/react-form": "npm:^0.1.0"
3520135201
"@radix-ui/react-tooltip": "npm:^1.1.2"
35202+
"@radix-ui/react-visually-hidden": "npm:^1.2.3"
3520235203
"@sentry/browser": "npm:8.42.0"
3520335204
"@sentry/nestjs": "npm:8.42.0"
3520435205
"@sentry/nextjs": "npm:8.42.0"

0 commit comments

Comments
 (0)