Show usage and billing for self-hosted instances

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

@@ -50,10 +50,20 @@ export const PreviewSection = () => {
     return slug.replace(/(\b[a-z])/g, (match) => match.toUpperCase()).replace(/-/g, " ");
   }
 
+  const isCloudInstance =
+    window.location.origin.includes("https://app.infisical.com") ||
+    window.location.origin.includes("https://eu.infisical.com") ||
+    window.location.origin.includes("https://gamma.infisical.com");
+
   const handleUpgradeBtnClick = async () => {
     try {
       if (!subscription || !currentOrg) return;
 
+      if (!isCloudInstance) {
+        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 +81,19 @@ export const PreviewSection = () => {
     }
   };
 
+  const getUpgradePlanLabel = () => {
+    if (!isCloudInstance) {
+      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 +120,7 @@ export const PreviewSection = () => {
                     color="mineshaft"
                     isDisabled={!isAllowed}
                   >
-                    {!subscription.has_used_trial ? "Start Pro Free Trial" : "Upgrade Plan"}
+                    {getUpgradePlanLabel()}
                   </Button>
                 )}
               </OrgPermissionCan>
@@ -133,22 +156,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>
+            {isCloudInstance && (
+              <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 +186,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

@@ -16,25 +16,38 @@ const tabs = [
 
 export const BillingTabGroup = withPermission(
   () => {
+    const isCloudInstance =
+      window.location.origin.includes("https://app.infisical.com") ||
+      window.location.origin.includes("https://eu.infisical.com") ||
+      window.location.origin.includes("https://gamma.infisical.com");
+
+    const tabsFiltered = isCloudInstance
+      ? 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>
+        {isCloudInstance && (
+          <>
+            <TabPanel value={tabs[1].key}>
+              <BillingSelfHostedTab />
+            </TabPanel>
+            <TabPanel value={tabs[2].key}>
+              <BillingReceiptsTab />
+            </TabPanel>
+            <TabPanel value={tabs[3].key}>
+              <BillingDetailsTab />
+            </TabPanel>
+          </>
+        )}
       </Tabs>
     );
   },