From 9287ddde72b6b97d4566c32a728cb6ae1933cfd8 Mon Sep 17 00:00:00 2001
From: Piyush Gupta <piyushguptaa2z123@gmail.com>
Date: Tue, 28 Oct 2025 23:48:32 +0530
Subject: [PATCH 1/3] fix: makes upgrade license modal intrusive if payment
 fails for more than 30 days

---
 frontend/src/components/v2/Modal/Modal.tsx    | 26 ++++++++-----
 frontend/src/hooks/api/subscriptions/types.ts |  1 +
 .../components/NavBar/Navbar.tsx              | 37 ++++++++++++++-----
 3 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/v2/Modal/Modal.tsx b/frontend/src/components/v2/Modal/Modal.tsx
index e7efda4b8..5e8f65788 100644
--- a/frontend/src/components/v2/Modal/Modal.tsx
+++ b/frontend/src/components/v2/Modal/Modal.tsx
@@ -14,6 +14,7 @@ export type ModalContentProps = Omit<DialogPrimitive.DialogContentProps, "title"
   bodyClassName?: string;
   onClose?: () => void;
   overlayClassName?: string;
+  showCloseButton?: boolean;
 };
 
 export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
@@ -27,6 +28,7 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
       footerContent,
       bodyClassName,
       onClose,
+      showCloseButton = true,
       ...props
     },
     forwardedRef
@@ -57,15 +59,17 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
             {children}
           </CardBody>
           {footerContent && <CardFooter>{footerContent}</CardFooter>}
-          <DialogPrimitive.Close aria-label="Close" asChild onClick={onClose}>
-            <IconButton
-              variant="plain"
-              ariaLabel="close"
-              className="absolute top-4 right-6 rounded-sm text-bunker-400 hover:text-bunker-50"
-            >
-              <FontAwesomeIcon icon={faTimes} size="lg" className="cursor-pointer" />
-            </IconButton>
-          </DialogPrimitive.Close>
+          {showCloseButton && (
+            <DialogPrimitive.Close aria-label="Close" asChild onClick={onClose}>
+              <IconButton
+                variant="plain"
+                ariaLabel="close"
+                className="absolute top-4 right-6 rounded-sm text-bunker-400 hover:text-bunker-50"
+              >
+                <FontAwesomeIcon icon={faTimes} size="lg" className="cursor-pointer" />
+              </IconButton>
+            </DialogPrimitive.Close>
+          )}
         </Card>
       </DialogPrimitive.Content>
     </DialogPrimitive.Portal>
@@ -74,7 +78,9 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
 
 ModalContent.displayName = "ModalContent";
 
-export type ModalProps = Omit<DialogPrimitive.DialogProps, "open"> & { isOpen?: boolean };
+export type ModalProps = Omit<DialogPrimitive.DialogProps, "open"> & {
+  isOpen?: boolean;
+};
 export const Modal = ({ isOpen, ...props }: ModalProps) => (
   <DialogPrimitive.Root open={isOpen} {...props} />
 );
diff --git a/frontend/src/hooks/api/subscriptions/types.ts b/frontend/src/hooks/api/subscriptions/types.ts
index 98daf3ec1..80bea3db7 100644
--- a/frontend/src/hooks/api/subscriptions/types.ts
+++ b/frontend/src/hooks/api/subscriptions/types.ts
@@ -59,6 +59,7 @@ export type SubscriptionPlan = {
   enterpriseAppConnections: boolean;
   cardDeclined?: boolean;
   cardDeclinedReason?: string;
+  cardDeclinedDays?: number;
   machineIdentityAuthTemplates: boolean;
   pam: boolean;
 };
diff --git a/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx b/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
index f9ef51133..e671fd57d 100644
--- a/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
+++ b/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
@@ -144,12 +144,10 @@ export const Navbar = () => {
     enabled: Boolean(subscription.subOrganization)
   });
 
-  useEffect(() => {
-    if (subscription?.cardDeclined && !sessionStorage.getItem("paymentFailed")) {
-      sessionStorage.setItem("paymentFailed", "true");
-      setShowCardDeclinedModal(true);
-    }
-  }, [subscription]);
+  const isCardDeclined = Boolean(subscription?.cardDeclined);
+  const isCardDeclinedMoreThan30Days = Boolean(
+    isCardDeclined && subscription?.cardDeclinedDays && subscription?.cardDeclinedDays >= 30
+  );
 
   const { data: orgs } = useGetOrganizations();
   const navigate = useNavigate();
@@ -161,6 +159,22 @@ export const Navbar = () => {
   const [isOrgSelectOpen, setIsOrgSelectOpen] = useState(false);
 
   const location = useLocation();
+  const isBillingPage = location.pathname === "/organization/billing";
+
+  const makeModalIntrusive = Boolean(!isBillingPage && isCardDeclinedMoreThan30Days);
+
+  useEffect(() => {
+    if (makeModalIntrusive) {
+      setShowCardDeclinedModal(true);
+      sessionStorage.setItem("paymentFailed", "true");
+      return;
+    }
+
+    if (isCardDeclined && !sessionStorage.getItem("paymentFailed")) {
+      sessionStorage.setItem("paymentFailed", "true");
+      setShowCardDeclinedModal(true);
+    }
+  }, [subscription, isBillingPage]);
   const matches = useRouterState({ select: (s) => s.matches.at(-1)?.context });
   const breadcrumbs = matches && "breadcrumbs" in matches ? matches.breadcrumbs : undefined;
 
@@ -684,7 +698,10 @@ export const Navbar = () => {
         </DropdownMenuContent>
       </DropdownMenu>
 
-      <Modal isOpen={showCardDeclinedModal} onOpenChange={setShowCardDeclinedModal}>
+      <Modal
+        isOpen={showCardDeclinedModal}
+        onOpenChange={() => !makeModalIntrusive && setShowCardDeclinedModal(false)}
+      >
         <ModalContent
           title={
             <div className="flex items-center gap-2">
@@ -692,6 +709,7 @@ export const Navbar = () => {
               Your payment could not be processed.
             </div>
           }
+          showCloseButton={!makeModalIntrusive}
         >
           <div>
             <div>
@@ -712,15 +730,16 @@ export const Navbar = () => {
                     >
                       Update Payment Method
                     </Button>
+                  </Link>
+                  {!makeModalIntrusive && (
                     <Button
                       colorSchema="secondary"
                       variant="outline"
-                      className="ml-2"
                       onClick={() => setShowCardDeclinedModal(false)}
                     >
                       Dismiss
                     </Button>
-                  </Link>
+                  )}
                 </div>
               </div>
             </div>

From 415de369d2b85c19b24241fc15ca87c80de6aa7a Mon Sep 17 00:00:00 2001
From: Piyush Gupta <piyushguptaa2z123@gmail.com>
Date: Tue, 28 Oct 2025 23:58:17 +0530
Subject: [PATCH 2/3] fix: review changes

---
 .../components/NavBar/Navbar.tsx                | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx b/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
index e671fd57d..8c762f1a6 100644
--- a/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
+++ b/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
@@ -146,7 +146,9 @@ export const Navbar = () => {
 
   const isCardDeclined = Boolean(subscription?.cardDeclined);
   const isCardDeclinedMoreThan30Days = Boolean(
-    isCardDeclined && subscription?.cardDeclinedDays && subscription?.cardDeclinedDays >= 30
+    isCardDeclined &&
+      subscription?.cardDeclinedDays !== undefined &&
+      subscription?.cardDeclinedDays >= 30
   );
 
   const { data: orgs } = useGetOrganizations();
@@ -161,10 +163,10 @@ export const Navbar = () => {
   const location = useLocation();
   const isBillingPage = location.pathname === "/organization/billing";
 
-  const makeModalIntrusive = Boolean(!isBillingPage && isCardDeclinedMoreThan30Days);
+  const isModalIntrusive = Boolean(!isBillingPage && isCardDeclinedMoreThan30Days);
 
   useEffect(() => {
-    if (makeModalIntrusive) {
+    if (isModalIntrusive) {
       setShowCardDeclinedModal(true);
       sessionStorage.setItem("paymentFailed", "true");
       return;
@@ -174,7 +176,8 @@ export const Navbar = () => {
       sessionStorage.setItem("paymentFailed", "true");
       setShowCardDeclinedModal(true);
     }
-  }, [subscription, isBillingPage]);
+  }, [subscription, isBillingPage, isModalIntrusive]);
+
   const matches = useRouterState({ select: (s) => s.matches.at(-1)?.context });
   const breadcrumbs = matches && "breadcrumbs" in matches ? matches.breadcrumbs : undefined;
 
@@ -700,7 +703,7 @@ export const Navbar = () => {
 
       <Modal
         isOpen={showCardDeclinedModal}
-        onOpenChange={() => !makeModalIntrusive && setShowCardDeclinedModal(false)}
+        onOpenChange={() => !isModalIntrusive && setShowCardDeclinedModal(false)}
       >
         <ModalContent
           title={
@@ -709,7 +712,7 @@ export const Navbar = () => {
               Your payment could not be processed.
             </div>
           }
-          showCloseButton={!makeModalIntrusive}
+          showCloseButton={!isModalIntrusive}
         >
           <div>
             <div>
@@ -731,7 +734,7 @@ export const Navbar = () => {
                       Update Payment Method
                     </Button>
                   </Link>
-                  {!makeModalIntrusive && (
+                  {!isModalIntrusive && (
                     <Button
                       colorSchema="secondary"
                       variant="outline"

From 1c6e9874a83d760f88863205d7879f33ae1dfb75 Mon Sep 17 00:00:00 2001
From: Piyush Gupta <piyushguptaa2z123@gmail.com>
Date: Fri, 31 Oct 2025 18:06:14 +0530
Subject: [PATCH 3/3] fix: review comment

---
 .../layouts/OrganizationLayout/components/NavBar/Navbar.tsx   | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx b/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
index 8c762f1a6..ae184b0bf 100644
--- a/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
+++ b/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
@@ -146,9 +146,7 @@ export const Navbar = () => {
 
   const isCardDeclined = Boolean(subscription?.cardDeclined);
   const isCardDeclinedMoreThan30Days = Boolean(
-    isCardDeclined &&
-      subscription?.cardDeclinedDays !== undefined &&
-      subscription?.cardDeclinedDays >= 30
+    isCardDeclined && subscription?.cardDeclinedDays && subscription?.cardDeclinedDays >= 30
   );
 
   const { data: orgs } = useGetOrganizations();