feat: [M3-8682] - Add 'Credit Card Expired' banner (#11240)

* feat: [M3-8682] - Add 'Credit Card Expired' banner

* Added changeset: Credit Card Expired banner

* switched to useAccount() query

packages/manager/.changeset/pr-11240-added-1731323233092.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Added
+---
+
+Credit Card Expired banner ([#11240](https://github.com/linode/manager/pull/11240))

packages/manager/src/features/GlobalNotifications/CreditCardExpiredBanner.tsx

@@ -0,0 +1,47 @@
+import { Typography } from '@mui/material';
+import * as React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { Button } from 'src/components/Button/Button';
+import { DismissibleBanner } from 'src/components/DismissibleBanner/DismissibleBanner';
+import { useAccount } from 'src/queries/account/account';
+import { isCreditCardExpired } from 'src/utilities/creditCard';
+
+export const CreditCardExpiredBanner = () => {
+  const history = useHistory();
+
+  const { data: account } = useAccount();
+
+  if (!account) {
+    return null;
+  }
+
+  const isExpired = Boolean(
+    account?.credit_card?.expiry &&
+      isCreditCardExpired(account?.credit_card.expiry)
+  );
+
+  if (!isExpired) {
+    return;
+  }
+
+  return (
+    <DismissibleBanner
+      actionButton={
+        <Button
+          buttonType="primary"
+          onClick={() => history.push('/account/billing')}
+        >
+          Update Card
+        </Button>
+      }
+      important
+      preferenceKey={'credit-card-expired'}
+      variant="error"
+    >
+      <Typography variant="body1">
+        Your credit card has expired! Please update your payment details.
+      </Typography>
+    </DismissibleBanner>
+  );
+};

packages/manager/src/features/GlobalNotifications/GlobalNotifications.tsx

@@ -14,6 +14,7 @@ import { SessionExpirationDialog } from '../Account/SwitchAccounts/SessionExpira
 import { APIMaintenanceBanner } from './APIMaintenanceBanner';
 import { ComplianceBanner } from './ComplianceBanner';
 import { ComplianceUpdateModal } from './ComplianceUpdateModal';
+import { CreditCardExpiredBanner } from './CreditCardExpiredBanner';
 import { EmailBounceNotificationSection } from './EmailBounce';
 import { RegionStatusBanner } from './RegionStatusBanner';
 import { TaxCollectionBanner } from './TaxCollectionBanner';
@@ -53,6 +54,7 @@ export const GlobalNotifications = () => {
 
   return (
     <>
+      <CreditCardExpiredBanner />
       <DesignUpdateBanner />
       <EmailBounceNotificationSection />
       <RegionStatusBanner />