diff --git a/frontend/src/hooks/api/subscriptions/types.ts b/frontend/src/hooks/api/subscriptions/types.ts
index 87a02231f..0893d3bd1 100644
--- a/frontend/src/hooks/api/subscriptions/types.ts
+++ b/frontend/src/hooks/api/subscriptions/types.ts
@@ -53,4 +53,5 @@ export type SubscriptionPlan = {
secretScanning: boolean;
enterpriseSecretSyncs: boolean;
enterpriseAppConnections: boolean;
+ cardDeclined?: boolean;
};
diff --git a/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx b/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
index a46578726..8af8a24da 100644
--- a/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
+++ b/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
@@ -8,6 +8,7 @@ import {
faCaretDown,
faCheck,
faEnvelope,
+ faExclamationTriangle,
faInfo,
faInfoCircle,
faSignOut,
@@ -109,6 +110,9 @@ export const Navbar = () => {
const { subscription } = useSubscription();
const { currentOrg } = useOrganization();
const [showAdminsModal, setShowAdminsModal] = useState(false);
+ const [showCardDeclinedModal, setShowCardDeclinedModal] = useState(
+ subscription?.cardDeclined || false
+ );
const { data: orgs } = useGetOrganizations();
const navigate = useNavigate();
@@ -195,8 +199,23 @@ export const Navbar = () => {
+ Your payment method was declined and your subscription may be at risk. Please + update your payment information to continue using premium features. +
+