Merge pull request #3290 from Infisical/feat/usageAndBillingSelfHostedInstance

Show usage and billing for self-hosted instances

frontend/src/helpers/platform.ts

@@ -1,4 +1,5 @@
 export const isInfisicalCloud = () =>
   window.location.origin.includes("https://app.infisical.com") ||
   window.location.origin.includes("https://us.infisical.com") ||
-  window.location.origin.includes("https://eu.infisical.com");
+  window.location.origin.includes("https://eu.infisical.com") ||
+  window.location.origin.includes("https://gamma.infisical.com");

frontend/src/layouts/OrganizationLayout/ProductsSideBar/DefaultSideBar.tsx

@@ -12,17 +12,13 @@ export const DefaultSideBar = () => (
           </MenuItem>
         )}
       </Link>
-      {(window.location.origin.includes("https://app.infisical.com") ||
-        window.location.origin.includes("https://eu.infisical.com") ||
-        window.location.origin.includes("https://gamma.infisical.com")) && (
-        <Link to="/organization/billing">
-          {({ isActive }) => (
-            <MenuItem isSelected={isActive} icon="spinning-coin">
-              Usage & Billing
-            </MenuItem>
-          )}
-        </Link>
-      )}
+      <Link to="/organization/billing">
+        {({ isActive }) => (
+          <MenuItem isSelected={isActive} icon="spinning-coin">
+            Usage & Billing
+          </MenuItem>
+        )}
+      </Link>
     </MenuGroup>
     <MenuGroup title="Other">
       <Link to="/organization/access-management">

frontend/src/layouts/OrganizationLayout/components/MinimizedOrgSidebar/MinimizedOrgSidebar.tsx

@@ -370,17 +370,11 @@ export const MinimizedOrgSidebar = () => {
                       Gateways
                     </DropdownMenuItem>
                   </Link>
-                  {(window.location.origin.includes("https://app.infisical.com") ||
-                    window.location.origin.includes("https://eu.infisical.com") ||
-                    window.location.origin.includes("https://gamma.infisical.com")) && (
-                    <Link to="/organization/billing">
-                      <DropdownMenuItem
-                        icon={<FontAwesomeIcon className="w-3" icon={faMoneyBill} />}
-                      >
-                        Usage & Billing
-                      </DropdownMenuItem>
-                    </Link>
-                  )}
+                  <Link to="/organization/billing">
+                    <DropdownMenuItem icon={<FontAwesomeIcon className="w-3" icon={faMoneyBill} />}>
+                      Usage & Billing
+                    </DropdownMenuItem>
+                  </Link>
                   <Link to="/organization/audit-logs">
                     <DropdownMenuItem icon={<FontAwesomeIcon className="w-3" icon={faBook} />}>
                       Audit Logs

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

@@ -9,6 +9,7 @@ import {
   useOrganization,
   useSubscription
 } from "@app/context";
+import { isInfisicalCloud } from "@app/helpers/platform";
 import {
   useCreateCustomerPortalSession,
   useGetOrgPlanBillingInfo,
@@ -47,6 +48,9 @@ export const PreviewSection = () => {
   };
 
   function formatPlanSlug(slug: string) {
+    if (!slug) {
+      return "-";
+    }
     return slug.replace(/(\b[a-z])/g, (match) => match.toUpperCase()).replace(/-/g, " ");
   }
 
@@ -54,6 +58,11 @@ export const PreviewSection = () => {
     try {
       if (!subscription || !currentOrg) return;
 
+      if (!isInfisicalCloud()) {
+        window.open("https://infisical.com/pricing", "_blank");
+        return;
+      }
+
       if (!subscription.has_used_trial) {
         // direct user to start pro trial
         const url = await getOrgTrialUrl.mutateAsync({
@@ -71,6 +80,19 @@ export const PreviewSection = () => {
     }
   };
 
+  const getUpgradePlanLabel = () => {
+    if (!isInfisicalCloud()) {
+      return (
+        <div>
+          Go to Pricing
+          <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="mb-[0.06rem] ml-1 text-xs" />
+        </div>
+      );
+    }
+
+    return !subscription.has_used_trial ? "Start Pro Free Trial" : "Upgrade Plan";
+  };
+
   return (
     <div>
       {subscription &&
@@ -97,7 +119,7 @@ export const PreviewSection = () => {
                     color="mineshaft"
                     isDisabled={!isAllowed}
                   >
-                    {!subscription.has_used_trial ? "Start Pro Free Trial" : "Upgrade Plan"}
+                    {getUpgradePlanLabel()}
                   </Button>
                 )}
               </OrgPermissionCan>
@@ -133,22 +155,24 @@ export const PreviewSection = () => {
                 subscription.status === "trialing" ? "(Trial)" : ""
               }`}
             </p>
-            <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Billing}>
-              {(isAllowed) => (
-                <button
-                  type="button"
-                  onClick={async () => {
-                    if (!currentOrg?.id) return;
-                    const { url } = await createCustomerPortalSession.mutateAsync(currentOrg.id);
-                    window.location.href = url;
-                  }}
-                  disabled={!isAllowed}
-                  className="text-primary"
-                >
-                  Manage plan &rarr;
-                </button>
-              )}
-            </OrgPermissionCan>
+            {isInfisicalCloud() && (
+              <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Billing}>
+                {(isAllowed) => (
+                  <button
+                    type="button"
+                    onClick={async () => {
+                      if (!currentOrg?.id) return;
+                      const { url } = await createCustomerPortalSession.mutateAsync(currentOrg.id);
+                      window.location.href = url;
+                    }}
+                    disabled={!isAllowed}
+                    className="text-primary"
+                  >
+                    Manage plan &rarr;
+                  </button>
+                )}
+              </OrgPermissionCan>
+            )}
           </div>
           <div className="mr-4 flex-1 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
             <p className="mb-2 text-gray-400">Price</p>
@@ -161,7 +185,7 @@ export const PreviewSection = () => {
           <div className="flex-1 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
             <p className="mb-2 text-gray-400">Subscription renews on</p>
             <p className="mb-8 text-2xl font-semibold text-mineshaft-50">
-              {formatDate(data.currentPeriodEnd)}
+              {data.currentPeriodEnd ? formatDate(data.currentPeriodEnd) : "-"}
             </p>
           </div>
         </div>

frontend/src/pages/organization/BillingPage/components/BillingTabGroup/BillingTabGroup.tsx

@@ -1,5 +1,6 @@
 import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
+import { isInfisicalCloud } from "@app/helpers/platform";
 import { withPermission } from "@app/hoc";
 
 import { BillingCloudTab } from "../BillingCloudTab";
@@ -16,25 +17,33 @@ const tabs = [
 
 export const BillingTabGroup = withPermission(
   () => {
+    const tabsFiltered = isInfisicalCloud()
+      ? tabs
+      : [{ name: "Infisical Self-Hosted", key: "tab-infisical-cloud" }];
+
     return (
       <Tabs defaultValue={tabs[0].key}>
         <TabList>
-          {tabs.map((tab) => (
+          {tabsFiltered.map((tab) => (
             <Tab value={tab.key}>{tab.name}</Tab>
           ))}
         </TabList>
         <TabPanel value={tabs[0].key}>
           <BillingCloudTab />
         </TabPanel>
-        <TabPanel value={tabs[1].key}>
-          <BillingSelfHostedTab />
-        </TabPanel>
-        <TabPanel value={tabs[2].key}>
-          <BillingReceiptsTab />
-        </TabPanel>
-        <TabPanel value={tabs[3].key}>
-          <BillingDetailsTab />
-        </TabPanel>
+        {isInfisicalCloud() && (
+          <>
+            <TabPanel value={tabs[1].key}>
+              <BillingSelfHostedTab />
+            </TabPanel>
+            <TabPanel value={tabs[2].key}>
+              <BillingReceiptsTab />
+            </TabPanel>
+            <TabPanel value={tabs[3].key}>
+              <BillingDetailsTab />
+            </TabPanel>
+          </>
+        )}
       </Tabs>
     );
   },