Add declined payment reason and force refresh on billing page load

backend/src/ee/routes/v1/license-router.ts

@@ -43,6 +43,12 @@ export const registerLicenseRouter = async (server: FastifyZodProvider) => {
     },
     schema: {
       params: z.object({ organizationId: z.string().trim() }),
+      querystring: z.object({
+        refreshCache: z
+          .enum(["true", "false"])
+          .default("false")
+          .transform((value) => value === "true")
+      }),
       response: {
         200: z.object({ plan: z.any() })
       }
@@ -54,7 +60,8 @@ export const registerLicenseRouter = async (server: FastifyZodProvider) => {
         actor: req.permission.type,
         actorOrgId: req.permission.orgId,
         actorAuthMethod: req.permission.authMethod,
-        orgId: req.params.organizationId
+        orgId: req.params.organizationId,
+        refreshCache: req.query.refreshCache
       });
       return { plan };
     }

backend/src/ee/services/license/license-service.ts

@@ -295,8 +295,19 @@ export const licenseServiceFactory = ({
     return data;
   };
 
-  const getOrgPlan = async ({ orgId, actor, actorId, actorOrgId, actorAuthMethod, projectId }: TOrgPlanDTO) => {
+  const getOrgPlan = async ({
+    orgId,
+    actor,
+    actorId,
+    actorOrgId,
+    actorAuthMethod,
+    projectId,
+    refreshCache
+  }: TOrgPlanDTO) => {
     await permissionService.getOrgPermission(actor, actorId, orgId, actorAuthMethod, actorOrgId);
+    if (refreshCache) {
+      await refreshPlan(orgId);
+    }
     const plan = await getPlan(orgId, projectId);
     return plan;
   };

backend/src/ee/services/license/license-types.ts

@@ -84,6 +84,7 @@ export type TOrgPlansTableDTO = {
 
 export type TOrgPlanDTO = {
   projectId?: string;
+  refreshCache?: boolean;
 } & TOrgPermission;
 
 export type TStartOrgTrialDTO = {

frontend/src/context/SubscriptionContext/SubscriptionContext.tsx

@@ -3,7 +3,7 @@ import { useRouteContext } from "@tanstack/react-router";
 
 import { fetchOrgSubscription, subscriptionQueryKeys } from "@app/hooks/api/subscriptions/queries";
 
-export const useSubscription = () => {
+export const useSubscription = (refreshCache?: boolean) => {
   const organizationId = useRouteContext({
     from: "/_authenticate/_inject-org-details",
     select: (el) => el.organizationId
@@ -11,7 +11,7 @@ export const useSubscription = () => {
 
   const { data: subscription } = useSuspenseQuery({
     queryKey: subscriptionQueryKeys.getOrgSubsription(organizationId),
-    queryFn: () => fetchOrgSubscription(organizationId),
+    queryFn: () => fetchOrgSubscription(organizationId, refreshCache),
     staleTime: Infinity
   });
 

frontend/src/hooks/api/subscriptions/queries.tsx

@@ -10,9 +10,9 @@ export const subscriptionQueryKeys = {
   getOrgSubsription: (orgID: string) => ["plan", { orgID }] as const
 };
 
-export const fetchOrgSubscription = async (orgID: string) => {
+export const fetchOrgSubscription = async (orgID: string, refreshCache: boolean = false) => {
   const { data } = await apiRequest.get<{ plan: SubscriptionPlan }>(
-    `/api/v1/organizations/${orgID}/plan`
+    `/api/v1/organizations/${orgID}/plan${refreshCache ? "?refreshCache=true" : ""}`
   );
 
   return data.plan;

frontend/src/hooks/api/subscriptions/types.ts

@@ -53,4 +53,6 @@ export type SubscriptionPlan = {
   secretScanning: boolean;
   enterpriseSecretSyncs: boolean;
   enterpriseAppConnections: boolean;
+  cardDeclined?: boolean;
+  cardDeclinedReason?: string;
 };

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

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { faGithub, faSlack } from "@fortawesome/free-brands-svg-icons";
 import { faCircleQuestion, faUserCircle } from "@fortawesome/free-regular-svg-icons";
 import {
@@ -8,6 +8,7 @@ import {
   faCaretDown,
   faCheck,
   faEnvelope,
+  faExclamationTriangle,
   faInfo,
   faInfoCircle,
   faSignOut,
@@ -109,6 +110,14 @@ export const Navbar = () => {
   const { subscription } = useSubscription();
   const { currentOrg } = useOrganization();
   const [showAdminsModal, setShowAdminsModal] = useState(false);
+  const [showCardDeclinedModal, setShowCardDeclinedModal] = useState(false);
+
+  useEffect(() => {
+    if (subscription?.cardDeclined && !sessionStorage.getItem("paymentFailed")) {
+      sessionStorage.setItem("paymentFailed", "true");
+      setShowCardDeclinedModal(true);
+    }
+  }, [subscription]);
 
   const { data: orgs } = useGetOrganizations();
   const navigate = useNavigate();
@@ -195,8 +204,23 @@ export const Navbar = () => {
                 <FontAwesomeIcon icon={faBuilding} className="text-xs text-bunker-300" />
               </div>
               <div className="whitespace-nowrap">{currentOrg?.name}</div>
-              <div className="mr-1 rounded border border-mineshaft-500 px-1 text-xs text-bunker-300 !no-underline">
-                {getPlan(subscription)}
+              <div className="flex items-center gap-1">
+                <div className="mr-1 rounded border border-mineshaft-500 px-1 text-xs text-bunker-300 !no-underline">
+                  {getPlan(subscription)}
+                </div>
+                {subscription.cardDeclined && (
+                  <Tooltip
+                    content={`Your payment could not be processed${subscription.cardDeclinedReason ? `: ${subscription.cardDeclinedReason}` : ""}. Please update your payment method to continue enjoying premium features.`}
+                    className="max-w-xs"
+                  >
+                    <div className="flex items-center">
+                      <FontAwesomeIcon
+                        icon={faExclamationTriangle}
+                        className="animate-pulse cursor-help text-xs text-primary-400"
+                      />
+                    </div>
+                  </Tooltip>
+                )}
               </div>
             </div>
           </Link>
@@ -394,6 +418,49 @@ export const Navbar = () => {
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
+      <Modal isOpen={showCardDeclinedModal} onOpenChange={setShowCardDeclinedModal}>
+        <ModalContent
+          title={
+            <div className="flex items-center gap-2">
+              <FontAwesomeIcon icon={faExclamationTriangle} className="text-lg text-primary-400" />
+              Your payment could not be processed.
+            </div>
+          }
+        >
+          <div>
+            <div>
+              <div className="mb-1">
+                <p>
+                  We were unable to process your last payment
+                  {subscription.cardDeclinedReason ? `: ${subscription.cardDeclinedReason}` : ""}.
+                  Please update your payment information to continue using premium features.
+                </p>
+              </div>
+              <div className="mt-4">
+                <div className="flex space-x-3">
+                  <Link to="/organization/billing" className="inline-flex">
+                    <Button
+                      colorSchema="primary"
+                      variant="solid"
+                      onClick={() => setShowCardDeclinedModal(false)}
+                    >
+                      Update Payment Method
+                    </Button>
+                    <Button
+                      colorSchema="secondary"
+                      variant="outline"
+                      className="ml-2"
+                      onClick={() => setShowCardDeclinedModal(false)}
+                    >
+                      Dismiss
+                    </Button>
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </div>
+        </ModalContent>
+      </Modal>
       <Modal isOpen={showAdminsModal} onOpenChange={setShowAdminsModal}>
         <ModalContent title="Server Administrators" subTitle="View all server administrators">
           <div className="mb-2">

frontend/src/pages/organization/BillingPage/components/BillingCloudTab/PreviewSection.tsx

@@ -1,5 +1,7 @@
+import { useEffect } from "react";
 import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useQueryClient } from "@tanstack/react-query";
 
 import { OrgPermissionCan } from "@app/components/permissions";
 import { Button } from "@app/components/v2";
@@ -15,13 +17,15 @@ import {
   useGetOrgPlanBillingInfo,
   useGetOrgTrialUrl
 } from "@app/hooks/api";
+import { subscriptionQueryKeys } from "@app/hooks/api/subscriptions/queries";
 import { usePopUp } from "@app/hooks/usePopUp";
 
 import { ManagePlansModal } from "./ManagePlansModal";
 
 export const PreviewSection = () => {
   const { currentOrg } = useOrganization();
-  const { subscription } = useSubscription();
+  const { subscription } = useSubscription(true);
+  const queryClient = useQueryClient();
   const { data, isPending } = useGetOrgPlanBillingInfo(currentOrg?.id ?? "");
   const getOrgTrialUrl = useGetOrgTrialUrl();
   const createCustomerPortalSession = useCreateCustomerPortalSession();
@@ -37,6 +41,12 @@ export const PreviewSection = () => {
     return formattedTotal;
   };
 
+  useEffect(() => {
+    queryClient.invalidateQueries({
+      queryKey: subscriptionQueryKeys.getOrgSubsription(currentOrg?.id ?? "")
+    });
+  }, []);
+
   const formatDate = (date: number) => {
     const createdDate = new Date(date * 1000);
     const day: number = createdDate.getDate();