Skip to content

fix(next): enable close on alert dialog#19475

Merged
StaberindeZA merged 1 commit intomainfrom
pay-3270-paypal-banner
Sep 18, 2025
Merged

fix(next): enable close on alert dialog#19475
StaberindeZA merged 1 commit intomainfrom
pay-3270-paypal-banner

Conversation

@StaberindeZA
Copy link
Copy Markdown
Contributor

Because

  • Alert dialog was prevent users from using the breadcrumbs and the header menus.

This pull request

  • Allow usage of header menus while alert is active
  • Always show dialog close button
  • Open PayPal management page in new window
  • Changes breadcrumb text to "Manage Payment Methods"

Issue that this pull request solves

Closes: #PAY-3270 PAY-3273 PAY-3274

Checklist

Put an x in the boxes that apply

  • My commit is GPG signed.
  • If applicable, I have modified or added tests which pass locally.
  • I have added necessary documentation (if appropriate).
  • I have verified that my changes render correctly in RTL (if appropriate).

Screenshots (Optional)

image image image

@StaberindeZA StaberindeZA requested review from a team as code owners September 18, 2025 15:23
Comment on lines -36 to -42
const [container, setContainer] = useState<HTMLElement | null>(null);
const [openDialog, setOpenDialog] = useState(true);

useEffect(() => {
if (!containerRef) {
setContainer(document.getElementById('header'));
}
}, []);
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

note: Removing this in favor of having the container default to the location where the Alert is added.

If an alternate container is needed, then it can be passed to the AlertBar component as a prop.

switch (variant) {
case AlertBarVariant.ERROR:
alertTypeStyle = 'bg-red-600 text-white';
alertTypeStyle = 'bg-red-100 error';
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

note: Matching the styles used by FxA. This was a suggestion made by UX/Product in PAY-3239

</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
</Dialog.Root >
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: extra space here

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
@StaberindeZA StaberindeZA merged commit 3fcb903 into main Sep 18, 2025
19 checks passed
@StaberindeZA StaberindeZA deleted the pay-3270-paypal-banner branch September 18, 2025 20:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants