Updated the billing engine for Cloud

frontend/src/pages/settings/billing/[id].tsx

@@ -1,10 +1,10 @@
 import { useEffect, useState } from 'react';
 import Head from 'next/head';
 import { useTranslation } from 'next-i18next';
+import { plans as plansConstant } from 'public/data/frequentConstants';
 
 import Plan from '@app/components/billing/Plan';
 import NavHeader from '@app/components/navigation/NavHeader';
-import { STRIPE_PRODUCT_PRO, STRIPE_PRODUCT_STARTER } from '@app/components/utilities/config';
 import { getTranslatedServerSideProps } from '@app/components/utilities/withTranslateProps';
 
 import getOrganizationSubscriptions from '../../api/organization/GetOrgSubscription';
@@ -26,24 +26,34 @@ export default function SettingsBilling() {
       subtext: t('billing:starter.subtext')!,
       buttonTextMain: t('billing:downgrade')!,
       buttonTextSecondary: t('billing:learn-more')!,
-      current: currentPlan === STRIPE_PRODUCT_STARTER
+      current: currentPlan === plansConstant.starter
     },
     {
       key: 2,
-      name: t('billing:professional.name')!,
-      price: '$9',
+      name: 'Team',
+      price: '$7',
       priceExplanation: t('billing:professional.price-explanation')!,
-      subtext: t('billing:professional.subtext')!,
-      text: t('billing:professional.text')!,
+      text: 'For teams that want to improve their efficiency and security.',
       buttonTextMain: t('billing:upgrade')!,
       buttonTextSecondary: t('billing:learn-more')!,
-      current: currentPlan === STRIPE_PRODUCT_PRO
+      current: currentPlan === plansConstant.team
     },
     {
       key: 3,
+      name: t('billing:professional.name')!,
+      price: '$14',
+      priceExplanation: t('billing:professional.price-explanation')!,
+      text: t('billing:enterprise.text')!,
+      subtext: t('billing:professional.subtext')!,
+      buttonTextMain: t('billing:upgrade')!,
+      buttonTextSecondary: t('billing:learn-more')!,
+      current: currentPlan === plansConstant.professional
+    },
+    {
+      key: 4,
       name: t('billing:enterprise.name')!,
       price: t('billing:custom-pricing')!,
-      text: t('billing:enterprise.text')!,
+      text: 'Boost the security and efficiency of your engineering teams.',
       buttonTextMain: t('billing:schedule-demo')!,
       buttonTextSecondary: t('billing:learn-more')!,
       current: false
@@ -57,7 +67,7 @@ export default function SettingsBilling() {
         orgId
       });
 
-      setCurrentPlan(subscriptions.data[0].plan.id);
+      setCurrentPlan(subscriptions.data[0].plan.product);
       const orgUsers = await getOrganizationUsers({
         orgId
       });
@@ -80,9 +90,10 @@ export default function SettingsBilling() {
               <p className="font-normal mr-4 text-gray-400 text-base">{t('billing:description')}</p>
             </div>
           </div>
-          <div className="flex flex-col ml-6 text-mineshaft-50">
+          <div className="flex flex-col ml-6 text-mineshaft-50 w-max">
             <p className="text-xl font-semibold">{t('billing:subscription')}</p>
-            <div className="flex flex-row mt-4 overflow-x-auto">
+            <div className="mt-4 text-bunker-200 h-14 flex justify-center items-center rounded-md bg-bunker-600 mr-4"> If you are looking to get an annual plan, please reach out to <a className="ml-1.5 underline text-primary underline-offset-2" href="mailto:[email protected]">team@infisical.com</a></div>
+            <div className="grid grid-cols-2 grid-rows-2 gap-y-6 gap-x-3 mt-4 overflow-x-auto">
               {plans.map((plan) => (
                 <Plan key={plan.name} plan={plan} />
               ))}

frontend/src/pages/settings/org/[id].tsx

@@ -5,10 +5,12 @@ import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
 import { faCheck, faMagnifyingGlass, faPlus, faX } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { plans } from 'public/data/frequentConstants';
 
 import Button from '@app/components/basic/buttons/Button';
 import AddIncidentContactDialog from '@app/components/basic/dialog/AddIncidentContactDialog';
 import AddUserDialog from '@app/components/basic/dialog/AddUserDialog';
+import UpgradePlanModal from '@app/components/basic/dialog/UpgradePlan';
 import InputField from '@app/components/basic/InputField';
 import UserTable from '@app/components/basic/table/UserTable';
 import NavHeader from '@app/components/navigation/NavHeader';
@@ -29,6 +31,7 @@ import getWorkspaces from '../../api/workspace/getWorkspaces';
 export default function SettingsOrg() {
   const [buttonReady, setButtonReady] = useState(false);
   const router = useRouter();
+  const host = window.location.origin;
   const [orgName, setOrgName] = useState('');
   const [emailUser, setEmailUser] = useState('');
   const [workspaceToBeDeletedName, setWorkspaceToBeDeletedName] = useState('');
@@ -212,7 +215,7 @@ export default function SettingsOrg() {
                 {t('section-members:org-members-description')}
               </p>
               <AddUserDialog
-                isOpen={isAddUserOpen}
+                isOpen={isAddUserOpen && (userList.length < 5 || currentPlan !== plans.starter || host !== 'https://app.infisical.com')}
                 closeModal={closeAddUserModal}
                 submitModal={submitAddUserModal}
                 email={emailUser}
@@ -220,6 +223,11 @@ export default function SettingsOrg() {
                 currentPlan={currentPlan}
                 orgName={orgName}
               />
+              <UpgradePlanModal
+                isOpen={isAddUserOpen && userList.length >= 5 && currentPlan === plans.starter && host === 'https://app.infisical.com'}
+                onClose={closeAddUserModal}
+                text="You can add more members if you switch to Infisical's Team plan."
+              />
               {/* <DeleteUserDialog isOpen={isDeleteOpen} closeModal={closeDeleteModal} submitModal={deleteMembership} userIdToBeDeleted={userIdToBeDeleted}/> */}
               <div className="pb-1 w-full flex flex-row items-start max-w-6xl">
                 <div className="h-10 w-full bg-white/5 mt-2 flex items-center rounded-md flex-row ">