Merge branch 'main' of https://github.com/Infisical/infisical into feat/adds-PAT-to-github-integration

frontend/src/components/license/UpgradePlanModal/UpgradePlanModal.tsx

@@ -8,22 +8,40 @@ type Props = {
   isOpen?: boolean;
   onOpenChange?: (isOpen: boolean) => void;
   text: string;
+  isEnterpriseFeature?: boolean;
 };
 
-export const UpgradePlanModal = ({ text, isOpen, onOpenChange }: Props): JSX.Element => {
+export const UpgradePlanModal = ({
+  text,
+  isOpen,
+  onOpenChange,
+  isEnterpriseFeature = false
+}: Props): JSX.Element => {
   const { subscription } = useSubscription();
   const { currentOrg } = useOrganization();
   const { mutateAsync, isPending } = useGetOrgTrialUrl();
-  const link =
-    subscription && subscription.slug !== null
-      ? ("/organization/billing" as const)
-      : "https://infisical.com/scheduledemo";
+
+  const getLink = () => {
+    // self-hosting
+    if (!subscription || subscription.slug === null) {
+      return "https://infisical.com/scheduledemo";
+    }
+
+    // Infisical cloud
+    if (isEnterpriseFeature) {
+      return "https://infisical.com/talk-to-us";
+    }
+
+    return "/organization/billing" as const;
+  };
+
+  const link = getLink();
 
   const handleUpgradeBtnClick = async () => {
     try {
       if (!subscription || !currentOrg) return;
 
-      if (!subscription.has_used_trial) {
+      if (!subscription.has_used_trial && !isEnterpriseFeature) {
         // direct user to start pro trial
 
         const url = await mutateAsync({
@@ -40,6 +58,17 @@ export const UpgradePlanModal = ({ text, isOpen, onOpenChange }: Props): JSX.Ele
       console.error(err);
     }
   };
+  const getUpgradePlanLabel = () => {
+    if (subscription) {
+      if (isEnterpriseFeature) {
+        return "Talk to Us";
+      }
+      if (!subscription.has_used_trial) {
+        return "Start Pro Free Trial";
+      }
+    }
+    return "Upgrade Plan";
+  };
 
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
@@ -55,7 +84,7 @@ export const UpgradePlanModal = ({ text, isOpen, onOpenChange }: Props): JSX.Ele
             onClick={handleUpgradeBtnClick}
             className="mr-4"
           >
-            {subscription && !subscription.has_used_trial ? "Start Pro Free Trial" : "Upgrade Plan"}
+            {getUpgradePlanLabel()}
           </Button>
           <Button
             colorSchema="secondary"

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

@@ -66,6 +66,8 @@ export type PlanBillingInfo = {
   interval: "month" | "year";
   intervalCount: number;
   quantity: number;
+  users: number;
+  identities: number;
 };
 
 export type Invoice = {

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

@@ -1,10 +1,10 @@
 import { useEffect } from "react";
-import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
+import { faArrowUpRightFromSquare, faInfoCircle } 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";
+import { Button, Tooltip } from "@app/components/v2";
 import {
   OrgPermissionBillingActions,
   OrgPermissionSubjects,
@@ -27,6 +27,9 @@ export const PreviewSection = () => {
   const { subscription } = useSubscription(true);
   const queryClient = useQueryClient();
   const { data, isPending } = useGetOrgPlanBillingInfo(currentOrg?.id ?? "");
+
+  const totalAmount = data?.amount ? data.amount * (data.users + data.identities) : 0;
+
   const getOrgTrialUrl = useGetOrgTrialUrl();
   const createCustomerPortalSession = useCreateCustomerPortalSession();
 
@@ -190,14 +193,28 @@ export const PreviewSection = () => {
               </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>
-            <p className="mb-8 text-2xl font-medium text-mineshaft-50">
-              {subscription.status === "trialing"
-                ? "$0.00 / month"
-                : `${formatAmount(data.amount)} / ${data.interval}`}
-            </p>
-          </div>
+          {subscription.slug !== "enterprise" ? (
+            <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>
+              <p className="mb-8 text-2xl font-medium text-mineshaft-50">
+                {subscription.status === "trialing" ? (
+                  "$0.00 / month"
+                ) : (
+                  <>
+                    {formatAmount(totalAmount)} / {data.interval}
+                    {(subscription.slug === "pro" || subscription.slug === "pro-annual") && (
+                      <Tooltip
+                        content={`Total price is based on the number of users and machine identities at ${formatAmount(data.amount)} each. You have ${data.users} ${data.users > 1 ? "users" : "user"} and ${data.identities} ${data.identities > 1 ? "machine identities" : "machine identity"}.`}
+                        className="max-w-lg"
+                      >
+                        <FontAwesomeIcon icon={faInfoCircle} className="ml-2" size="xs" />
+                      </Tooltip>
+                    )}
+                  </>
+                )}
+              </p>
+            </div>
+          ) : null}
           <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-medium text-mineshaft-50">

frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx

@@ -1172,7 +1172,9 @@ export const OverviewPage = () => {
                               handlePopUpClose("misc");
                               return;
                             }
-                            handlePopUpOpen("upgradePlan");
+                            handlePopUpOpen("upgradePlan", {
+                              isEnterpriseFeature: true
+                            });
                           }}
                           isDisabled={userAvailableDynamicSecretEnvs.length === 0}
                           variant="outline_bg"
@@ -1679,10 +1681,11 @@ export const OverviewPage = () => {
         <UpgradePlanModal
           isOpen={popUp.upgradePlan.isOpen}
           onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+          isEnterpriseFeature={popUp.upgradePlan.data?.isEnterpriseFeature}
           text={
             subscription.slug === null
               ? "You can perform this action under an Enterprise license"
-              : "You can perform this action if you switch to Infisical's Team plan"
+              : "You can perform this action if you switch to Infisical's Enterprise plan"
           }
         />
       )}

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ActionBar.tsx

@@ -1019,7 +1019,9 @@ export const ActionBar = ({
                           handlePopUpClose("misc");
                           return;
                         }
-                        handlePopUpOpen("upgradePlan");
+                        handlePopUpOpen("upgradePlan", {
+                          isEnterpriseFeature: true
+                        });
                       }}
                       isDisabled={!isAllowed}
                       variant="outline_bg"
@@ -1274,10 +1276,13 @@ export const ActionBar = ({
         <UpgradePlanModal
           isOpen={popUp.upgradePlan.isOpen}
           onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+          isEnterpriseFeature={popUp.upgradePlan.data?.isEnterpriseFeature}
           text={
             subscription.slug === null
               ? "You can perform this action under an Enterprise license"
-              : "You can perform this action if you switch to Infisical's Team plan"
+              : `You can perform this action if you switch to Infisical's ${
+                  popUp.upgradePlan.data.isEnterpriseFeature ? "Enterprise" : "Pro"
+                } plan`
           }
         />
       )}

frontend/src/pages/secret-manager/SecretDashboardPage/components/EnvironmentTabs/EnvironmentTabs.tsx

@@ -226,7 +226,7 @@ export const EnvironmentTabs = ({ secretPath }: Props) => {
       <UpgradePlanModal
         isOpen={popUp.upgradePlan.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-        text="You can add custom environments if you switch to Infisical's Team plan."
+        text="You can add custom environments if you switch to Infisical's Pro plan."
       />
       <AddEnvironmentModal
         isOpen={popUp.createEnvironment.isOpen}

frontend/src/pages/secret-manager/SecretRotationPage/SecretRotationPage.tsx

@@ -397,7 +397,7 @@ const Page = () => {
       <UpgradePlanModal
         isOpen={popUp.upgradePlan.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-        text="You can add secret rotation if you switch to Infisical's Team plan."
+        text="You can add secret rotation if you switch to Infisical's Pro plan."
       />
       <Modal
         isOpen={popUp.secretRotationV2.isOpen}

frontend/src/pages/secret-manager/SettingsPage/components/EnvironmentSection/EnvironmentSection.tsx

@@ -123,7 +123,7 @@ export const EnvironmentSection = () => {
       <UpgradePlanModal
         isOpen={popUp.upgradePlan.isOpen}
         onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
-        text="You can add custom environments if you switch to Infisical's Team plan."
+        text="You can add custom environments if you switch to Infisical's Pro plan."
       />
     </div>
   );