From f5beea7d34e309eadb3e01830ff1ab9abf7bc4bc Mon Sep 17 00:00:00 2001
From: Harsh Shankar Rao <hrao@akamai.com>
Date: Mon, 18 Nov 2024 19:51:37 +0530
Subject: [PATCH] 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
---
 .../pr-11240-added-1731323233092.md           |  5 ++
 .../CreditCardExpiredBanner.tsx               | 47 +++++++++++++++++++
 .../GlobalNotifications.tsx                   |  2 +
 3 files changed, 54 insertions(+)
 create mode 100644 packages/manager/.changeset/pr-11240-added-1731323233092.md
 create mode 100644 packages/manager/src/features/GlobalNotifications/CreditCardExpiredBanner.tsx

diff --git a/packages/manager/.changeset/pr-11240-added-1731323233092.md b/packages/manager/.changeset/pr-11240-added-1731323233092.md
new file mode 100644
index 00000000000..3fc57e03b8d
--- /dev/null
+++ b/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))
diff --git a/packages/manager/src/features/GlobalNotifications/CreditCardExpiredBanner.tsx b/packages/manager/src/features/GlobalNotifications/CreditCardExpiredBanner.tsx
new file mode 100644
index 00000000000..dbbe22436e8
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/packages/manager/src/features/GlobalNotifications/GlobalNotifications.tsx b/packages/manager/src/features/GlobalNotifications/GlobalNotifications.tsx
index 2d600740b1b..d5dd668364d 100644
--- a/packages/manager/src/features/GlobalNotifications/GlobalNotifications.tsx
+++ b/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 />