Merge pull request #4772 from Infisical/fix/made-upgrade-license-modal-intrusive

[ENG-3937] fix: makes upgrade license modal intrusive

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}>
+          {showCloseButton && (
-            <IconButton
+            <DialogPrimitive.Close aria-label="Close" asChild onClick={onClose}>
-              variant="plain"
+              <IconButton
-              ariaLabel="close"
+                variant="plain"
-              className="absolute top-4 right-6 rounded-sm text-bunker-400 hover:text-bunker-50"
+                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>
+                <FontAwesomeIcon icon={faTimes} size="lg" className="cursor-pointer" />
-          </DialogPrimitive.Close>
+              </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} />
 );

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;
 };

frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx

@@ -141,12 +141,10 @@ export const Navbar = () => {
     enabled: Boolean(subscription.subOrganization)
   });
 
-  useEffect(() => {
+  const isCardDeclined = Boolean(subscription?.cardDeclined);
-    if (subscription?.cardDeclined && !sessionStorage.getItem("paymentFailed")) {
+  const isCardDeclinedMoreThan30Days = Boolean(
-      sessionStorage.setItem("paymentFailed", "true");
+    isCardDeclined && subscription?.cardDeclinedDays && subscription?.cardDeclinedDays >= 30
-      setShowCardDeclinedModal(true);
+  );
-    }
-  }, [subscription]);
 
   const { data: orgs } = useGetOrganizations();
   const navigate = useNavigate();
@@ -158,6 +156,23 @@ export const Navbar = () => {
   const [isOrgSelectOpen, setIsOrgSelectOpen] = useState(false);
 
   const location = useLocation();
+  const isBillingPage = location.pathname === "/organization/billing";
+
+  const isModalIntrusive = Boolean(!isBillingPage && isCardDeclinedMoreThan30Days);
+
+  useEffect(() => {
+    if (isModalIntrusive) {
+      setShowCardDeclinedModal(true);
+      sessionStorage.setItem("paymentFailed", "true");
+      return;
+    }
+
+    if (isCardDeclined && !sessionStorage.getItem("paymentFailed")) {
+      sessionStorage.setItem("paymentFailed", "true");
+      setShowCardDeclinedModal(true);
+    }
+  }, [subscription, isBillingPage, isModalIntrusive]);
+
   const matches = useRouterState({ select: (s) => s.matches.at(-1)?.context });
   const breadcrumbs = matches && "breadcrumbs" in matches ? matches.breadcrumbs : undefined;
 
@@ -689,7 +704,10 @@ export const Navbar = () => {
         </DropdownMenuContent>
       </DropdownMenu>
 
-      <Modal isOpen={showCardDeclinedModal} onOpenChange={setShowCardDeclinedModal}>
+      <Modal
+        isOpen={showCardDeclinedModal}
+        onOpenChange={() => !isModalIntrusive && setShowCardDeclinedModal(false)}
+      >
         <ModalContent
           title={
             <div className="flex items-center gap-2">
@@ -697,6 +715,7 @@ export const Navbar = () => {
               Your payment could not be processed.
             </div>
           }
+          showCloseButton={!isModalIntrusive}
         >
           <div>
             <div>
@@ -717,15 +736,16 @@ export const Navbar = () => {
                     >
                       Update Payment Method
                     </Button>
+                  </Link>
+                  {!isModalIntrusive && (
                     <Button
                       colorSchema="secondary"
                       variant="outline"
-                      className="ml-2"
                       onClick={() => setShowCardDeclinedModal(false)}
                     >
                       Dismiss
                     </Button>
-                  </Link>
+                  )}
                 </div>
               </div>
             </div>