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 ( + history.push('/account/billing')} + > + Update Card + + } + important + preferenceKey={'credit-card-expired'} + variant="error" + > + + Your credit card has expired! Please update your payment details. + + + ); +}; 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 ( <> +