change: Use loading icon to indicate tax id is being verified (linode…

…#10928) * change: No longer need to display an icon next to invalid tax ids * Added changeset: Invalid Tax Id Notification * change: add verifying state instead of removing icon - better UX * Update pr-10928-removed-1726148104546.md --------- Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com>
nikhagra-akamai · Sep 23, 2024 · c135328 · c135328
1 parent 5c0e2bc
commit c135328
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 9 deletions.
diff --git a/packages/manager/.changeset/pr-10928-removed-1726148104546.md b/packages/manager/.changeset/pr-10928-removed-1726148104546.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Changed
+---
+
+Invalid Tax Id Notification ([#10928](https://github.com/linode/manager/pull/10928))
diff --git a/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/ContactInformation.tsx b/packages/manager/src/features/Billing/BillingPanels/ContactInfoPanel/ContactInformation.tsx
@@ -9,6 +9,7 @@ import { TooltipIcon } from 'src/components/TooltipIcon';
 import { Typography } from 'src/components/Typography';
 import { getRestrictedResourceText } from 'src/features/Account/utils';
 import { EDIT_BILLING_CONTACT } from 'src/features/Billing/constants';
+import { StyledAutorenewIcon } from 'src/features/TopMenu/NotificationMenu/NotificationMenu';
 import { useRestrictedGlobalGrantCheck } from 'src/hooks/useRestrictedGlobalGrantCheck';
 import { useNotificationsQuery } from 'src/queries/account/notifications';
 
@@ -239,14 +240,8 @@ const ContactInformation = (props: Props) => {
                 </StyledTypography>
                 {invalidTaxIdNotification && (
                   <TooltipIcon
-                    sxTooltipIcon={{
-                      '& > svg': {
-                        fontSize: '18px',
-                      },
-                      paddingBottom: 0,
-                      paddingTop: 0,
-                    }}
-                    status="warning"
+                    icon={<StyledAutorenewIcon />}
+                    status="other"
                     text={invalidTaxIdNotification.label}
                   />
                 )}

diff --git a/packages/manager/src/features/TopMenu/NotificationMenu/NotificationMenu.tsx b/packages/manager/src/features/TopMenu/NotificationMenu/NotificationMenu.tsx
@@ -194,7 +194,7 @@ const StyledChip = styled(Chip, {
   width: props.showPlus ? 22 : 18,
 }));
 
-const StyledAutorenewIcon = styled(AutorenewIcon)(({ theme }) => ({
+export const StyledAutorenewIcon = styled(AutorenewIcon)(({ theme }) => ({
   animation: `${rotate360} 2s linear infinite`,
   bottom: 4,
   color: theme.palette.primary.main,

diff --git a/packages/manager/src/queries/account/account.ts b/packages/manager/src/queries/account/account.ts
@@ -64,6 +64,9 @@ export const useMutateAccount = () => {
                 variant: 'info',
               }
             );
+            queryClient.invalidateQueries({
+              queryKey: accountQueries.notifications.queryKey,
+            });
           }
 
           return account;