Merge pull request #19475 from mozilla/pay-3270-paypal-banner

StaberindeZA · web-flow · commit 3fcb903df615 · 2025-09-18T16:31:59.000-04:00
fix(next): enable close on alert dialog
diff --git a/apps/payments/next/app/[locale]/subscriptions/manage/page.tsx b/apps/payments/next/app/[locale]/subscriptions/manage/page.tsx
@@ -99,15 +99,15 @@ export default async function Manage({
               'Invalid payment information; there is an error with your account.'
             )}
 
-            <Link
+            <LinkExternal
               className={'underline hover:text-grey-100 pl-1'}
               href={`${config.paymentsNextHostedUrl}/${locale}/subscriptions/payments/paypal`}
             >
               {l10n.getString(
                 'subscription-management-page-paypal-error-banner-link',
                 'Manage'
               )}
-            </Link>
+            </LinkExternal>
           </span>
         </AlertBar>
       )}
@@ -199,13 +199,13 @@ export default async function Manage({
                       alt={
                         walletType === 'apple_pay'
                           ? l10n.getString(
-                              'apple-pay-logo-alt-text',
-                              'Apple Pay logo'
-                            )
+                            'apple-pay-logo-alt-text',
+                            'Apple Pay logo'
+                          )
                           : l10n.getString(
-                              'google-pay-logo-alt-text',
-                              'Google Pay logo'
-                            )
+                            'google-pay-logo-alt-text',
+                            'Google Pay logo'
+                          )
                       }
                       width={40}
                       height={24}
@@ -426,10 +426,10 @@ export default async function Manage({
                       >
                         {sub.interval
                           ? l10n.getString(
-                              getSubscriptionIntervalFtlId(sub.interval),
-                              { productName: sub.productName },
-                              `${sub.productName} (${formatPlanInterval(sub.interval)})`
-                            )
+                            getSubscriptionIntervalFtlId(sub.interval),
+                            { productName: sub.productName },
+                            `${sub.productName} (${formatPlanInterval(sub.interval)})`
+                          )
                           : sub.productName}
                       </h3>
                       <LinkExternal
@@ -476,8 +476,8 @@ export default async function Manage({
             </ul>
             {(appleIapSubscriptions.length > 0 ||
               googleIapSubscriptions.length > 0) && (
-              <hr className="border-b border-grey-50 my-6" aria-hidden="true" />
-            )}
+                <hr className="border-b border-grey-50 my-6" aria-hidden="true" />
+              )}
           </>
         )}
 
@@ -665,33 +665,33 @@ export default async function Manage({
                         {!!purchase.expiryTimeMillis &&
                           (purchase.autoRenewing
                             ? l10n.getFragmentWithSource(
-                                'subscription-management-iap-sub-next-bill-is-due',
-                                {
-                                  vars: {
-                                    date: nextBillDate,
-                                  },
-                                  elems: {
-                                    strong: <strong />
-                                  },
+                              'subscription-management-iap-sub-next-bill-is-due',
+                              {
+                                vars: {
+                                  date: nextBillDate,
+                                },
+                                elems: {
+                                  strong: <strong />
                                 },
-                                <>
-                                  Next bill is due <strong>{nextBillDate}</strong>
-                                </>
-                              )
+                              },
+                              <>
+                                Next bill is due <strong>{nextBillDate}</strong>
+                              </>
+                            )
                             : l10n.getFragmentWithSource(
-                                'subscription-management-iap-sub-will-expire-on',
-                                {
-                                  vars: {
-                                    date: nextBillDate,
-                                  },
-                                  elems: {
-                                    strong: <strong />
-                                  },
+                              'subscription-management-iap-sub-will-expire-on',
+                              {
+                                vars: {
+                                  date: nextBillDate,
                                 },
-                                <>
-                                  Your subscription will expire on <strong>{nextBillDate}</strong>
-                                </>
-                              ))}
+                                elems: {
+                                  strong: <strong />
+                                },
+                              },
+                              <>
+                                Your subscription will expire on <strong>{nextBillDate}</strong>
+                              </>
+                            ))}
                       </p>
                     </div>
                     <div>
diff --git a/libs/payments/ui/src/lib/client/components/AlertBar/en.ftl b/libs/payments/ui/src/lib/client/components/AlertBar/en.ftl
@@ -0,0 +1 @@
+alert-dialog-title = Alert dialog
diff --git a/libs/payments/ui/src/lib/client/components/AlertBar/index.tsx b/libs/payments/ui/src/lib/client/components/AlertBar/index.tsx
@@ -3,13 +3,14 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 'use client';
 
-import { Localized } from '@fluent/react';
+import { useLocalization } from '@fluent/react';
 import classNames from 'classnames';
 import * as Dialog from '@radix-ui/react-dialog';
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import Image from 'next/image';
 import checkLogo from '@fxa/shared/assets/images/check.svg';
 import closeIcon from '@fxa/shared/assets/images/close.svg';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 
 export enum AlertBarVariant {
   ERROR,
@@ -19,58 +20,52 @@ export enum AlertBarVariant {
 export type AlertBarProps = {
   checked?: boolean;
   children: React.ReactNode;
-  ariaId?: string;
   variant?: AlertBarVariant;
-  onClick?: () => any;
   containerRef?: HTMLElement | null;
 };
 
 export const AlertBar = ({
   checked,
   children,
   variant = AlertBarVariant.ERROR,
-  ariaId,
-  onClick,
   containerRef = null,
 }: AlertBarProps) => {
-  const [container, setContainer] = useState<HTMLElement | null>(null);
+  const [openDialog, setOpenDialog] = useState(true);
 
-  useEffect(() => {
-    if (!containerRef) {
-      setContainer(document.getElementById('header'));
-    }
-  }, []);
+  const { l10n } = useLocalization();
 
   let alertTypeStyle;
   switch (variant) {
     case AlertBarVariant.ERROR:
-      alertTypeStyle = 'bg-red-600 text-white';
+      alertTypeStyle = 'bg-red-100 error';
       break;
 
     case AlertBarVariant.SUCCESS:
-      alertTypeStyle = 'bg-grey-700 text-white';
+      alertTypeStyle = 'bg-green-200 success';
       break;
   }
 
   return (
     <>
-      <Dialog.Root open={true} modal={false}>
-        <Dialog.Portal container={container}>
+      <Dialog.Root open={openDialog} modal={false}>
+        <Dialog.Portal container={containerRef}>
           <Dialog.Content
-            className={
-              'left-0 w-full  absolute flex font-medium items-center justify-center pt-32 tablet:pt-40'
-            }
+            className="flex absolute justify-center mx-2 mt-2 right-0 left-0 top-16 tablet:top-20 z-10"
           >
+            <VisuallyHidden.Root asChild>
+              <Dialog.Title
+              >
+                {l10n.getString('alert-dialog-title', null, 'Alert dialog')}
+              </Dialog.Title>
+            </VisuallyHidden.Root>
             <div
-              aria-labelledby={ariaId}
               className={classNames(
-                '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]',
+                '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',
                 alertTypeStyle
               )}
               data-testid="alert-container"
-              role="dialog"
             >
-              <div className="text-center w-[80%]">
+              <div className="flex-1 py-2 px-8 text-center outline-none">
                 {checked && (
                   <Image
                     src={checkLogo}
@@ -80,19 +75,22 @@ export const AlertBar = ({
                 )}
                 {children}
               </div>
-              {onClick && (
-                <Localized id="close-aria">
-                  <span
-                    data-testid="clear-success-alert"
-                    className="grid"
-                    aria-label="Close modal"
-                    onClick={() => onClick()}
-                    role="button"
-                  >
-                    <Image src={closeIcon} alt="" className="w-4 h-4" />
-                  </span>
-                </Localized>
-              )}
+              <Dialog.Close asChild>
+                <button
+                  className={
+                    classNames(
+                      'shrink-0 items-stretch justify-center py-2 px-3 focus-visible:rounded-sm focus-visible-default outline-none',
+                      alertTypeStyle
+                    )
+                  }
+                  onClick={() => setOpenDialog(false)}
+                >
+                  <Image
+                    src={closeIcon}
+                    alt={l10n.getString('dialog-close', null, 'Close dialog')}
+                  />
+                </button>
+              </Dialog.Close>
             </div>
           </Dialog.Content>
         </Dialog.Portal>
diff --git a/libs/payments/ui/src/lib/client/components/Breadcrumbs/en.ftl b/libs/payments/ui/src/lib/client/components/Breadcrumbs/en.ftl
@@ -4,7 +4,7 @@ subscription-management-breadcrumb-account-home = Account Home
 # Link title - Subscriptions management
 subscription-management-breadcrumb-subscriptions = Subscriptions
 # Link title - Payment method management
-subscription-management-breadcrumb-payment = Payment Methods
+subscription-management-breadcrumb-payment-2 = Manage Payment Methods
 
 # $page refers to page titles used in the breadcrumb menu (e.g. Account Home, Subscriptions, Payment Methods)
 subscription-management-breadcrumb-back-aria = Go back to { $page }
diff --git a/libs/payments/ui/src/lib/client/components/Breadcrumbs/index.tsx b/libs/payments/ui/src/lib/client/components/Breadcrumbs/index.tsx
@@ -52,7 +52,7 @@ export function Breadcrumbs(args: {
   };
   const PAYPAL_PAYMENT_METHODS = {
     label: l10n.getString(
-      'subscription-management-breadcrumb-payment',
+      'subscription-management-breadcrumb-payment-2',
       {},
       'Manage Payment Methods'
     ),
diff --git a/package.json b/package.json
@@ -78,6 +78,7 @@
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-form": "^0.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
+    "@radix-ui/react-visually-hidden": "^1.2.3",
     "@sentry/browser": "8.42.0",
     "@sentry/nestjs": "8.42.0",
     "@sentry/nextjs": "8.42.0",
diff --git a/yarn.lock b/yarn.lock
@@ -13847,7 +13847,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@radix-ui/react-visually-hidden@npm:1.2.3":
+"@radix-ui/react-visually-hidden@npm:1.2.3, @radix-ui/react-visually-hidden@npm:^1.2.3":
   version: 1.2.3
   resolution: "@radix-ui/react-visually-hidden@npm:1.2.3"
   dependencies:
@@ -35199,6 +35199,7 @@ __metadata:
     "@radix-ui/react-dialog": "npm:^1.1.14"
     "@radix-ui/react-form": "npm:^0.1.0"
     "@radix-ui/react-tooltip": "npm:^1.1.2"
+    "@radix-ui/react-visually-hidden": "npm:^1.2.3"
     "@sentry/browser": "npm:8.42.0"
     "@sentry/nestjs": "npm:8.42.0"
     "@sentry/nextjs": "npm:8.42.0"
