Updated the billing engine for Cloud

frontend/public/data/frequentConstants.ts

@@ -30,8 +30,25 @@ const reverseContextNetlifyMapping: Mapping = {
   "Production": "production"
 }
 
+const plansDev: Mapping = {
+  "starter": "prod_Mb4ATFT5QAHoPM",
+  "team": "prod_NEpD2WMXUS2eDn",
+  "professional": "prod_Mb4CetZ2jE7jdl",
+  "enterprise": "licence_key_required"
+}
+
+const plansProd: Mapping = {
+  "starter": "prod_Mb8oR5XNwyFTul",
+  "team": "prod_NEp7fAB3UJWK6A",
+  "professional": "prod_Mb8pUIpA0OUi5N",
+  "enterprise": "licence_key_required"
+}
+
+const plans = plansProd || plansDev;
+
 export {
   contextNetlifyMapping,
   envMapping,
+  plans,
   reverseContextNetlifyMapping,
   reverseEnvMapping}

frontend/src/components/basic/dialog/AddUpdateEnvironmentDialog.tsx

@@ -86,7 +86,7 @@ export const AddUpdateEnvironmentDialog = ({
                 leaveFrom='opacity-100 scale-100'
                 leaveTo='opacity-0 scale-95'
               >
-                <Dialog.Panel className='w-full max-w-md transform overflow-hidden rounded-2xl bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all'>
+                <Dialog.Panel className='w-full max-w-md transform overflow-hidden rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all'>
                   <Dialog.Title
                     as='h3'
                     className='text-lg font-medium leading-6 text-gray-400'

frontend/src/components/basic/dialog/AddUserDialog.tsx

@@ -1,8 +1,8 @@
 import { Fragment } from 'react';
 import { useRouter } from 'next/router';
 import { Dialog, Transition } from '@headlessui/react';
+import { plans } from 'public/data/frequentConstants';
 
-import { STRIPE_PRODUCT_STARTER } from '../../utilities/config';
 import Button from '../buttons/Button';
 import InputField from '../InputField';
 
@@ -81,7 +81,7 @@ const AddUserDialog = ({
                       isRequired
                     />
                   </div>
-                  {currentPlan === STRIPE_PRODUCT_STARTER && (
+                  {currentPlan === plans.starter && (
                     <div className='flex flex-row'>
                       <button
                         type='button'
@@ -90,11 +90,11 @@ const AddUserDialog = ({
                           router.push(`/settings/billing/${  router.query.id}`)
                         }
                       >
-                        You can add up to 5 members on a Free tier.
+                        You can add up to 5 members on the Starter plan.
                       </button>
                       <button
                         type='button'
-                        className='ml-1 inline-flex justify-center rounded-md py-1 text-sm text-gray-500 hover:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
+                        className='ml-1 inline-flex justify-center rounded-md py-1 underline underline-offset-2 text-sm text-gray-500 hover:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
                         onClick={() =>
                           router.push(`/settings/billing/${  router.query.id}`)
                         }

frontend/src/components/basic/dialog/DeleteActionModal.tsx

@@ -38,7 +38,7 @@ const DeleteActionModal = ({
             leaveFrom='opacity-100'
             leaveTo='opacity-0'
           >
-            <div className='fixed inset-0 bg-black bg-opacity-25' />
+            <div className='fixed inset-0 bg-black bg-opacity-70' />
           </Transition.Child>
           <div className='fixed inset-0 overflow-y-auto'>
             <div className='flex min-h-full items-center justify-center p-4 text-center'>
@@ -51,7 +51,7 @@ const DeleteActionModal = ({
                 leaveFrom='opacity-100 scale-100'
                 leaveTo='opacity-0 scale-95'
               >
-                <Dialog.Panel className='w-full max-w-md transform overflow-hidden rounded-2xl bg-grey border border-gray-700 p-6 text-left align-middle shadow-xl transition-all'>
+                <Dialog.Panel className='w-full max-w-md transform overflow-hidden rounded-md bg-grey border border-gray-700 p-6 text-left align-middle shadow-xl transition-all'>
                   <Dialog.Title
                     as='h3'
                     className='text-lg font-medium leading-6 text-gray-400'

frontend/src/components/basic/dialog/UpgradePlan.tsx

@@ -0,0 +1,86 @@
+import { Fragment } from 'react';
+import { useRouter } from 'next/router';
+import { Dialog, Transition } from '@headlessui/react';
+
+// REFACTOR: Move all these modals into one reusable one 
+type Props = {
+  isOpen?: boolean;
+  onClose: ()=>void;
+  text: string;
+}
+
+const UpgradePlanModal = ({
+  isOpen,
+  onClose,
+  text,
+}:Props) => {
+  const router = useRouter();
+
+  return (
+    <div>
+      <Transition appear show={isOpen} as={Fragment}>
+        <Dialog as='div' className='relative z-10' onClose={onClose}>
+          <Transition.Child
+            as={Fragment}
+            enter='ease-out duration-300'
+            enterFrom='opacity-0'
+            enterTo='opacity-100'
+            leave='ease-in duration-150'
+            leaveFrom='opacity-100'
+            leaveTo='opacity-0'
+          >
+            <div className='fixed inset-0 bg-black bg-opacity-50 drop-shadow-xl' />
+          </Transition.Child>
+          <div className='fixed inset-0 overflow-y-auto'>
+            <div className='flex min-h-full items-center justify-center p-4 text-center'>
+              <Transition.Child
+                as={Fragment}
+                enter='ease-out duration-300'
+                enterFrom='opacity-0 scale-95'
+                enterTo='opacity-100 scale-100'
+                leave='ease-in duration-200'
+                leaveFrom='opacity-100 scale-100'
+                leaveTo='opacity-0 scale-95'
+              >
+                <Dialog.Panel className='w-full max-w-md transform overflow-hidden rounded-md bg-bunker border border-bunker-400 p-6 pt-5 text-left align-middle shadow-xl transition-all'>
+                  <Dialog.Title
+                    as='h3'
+                    className='text-lg font-medium leading-6 text-bunker-200'
+                  >
+                    Unleash Infisical&apos;s Full Power
+                  </Dialog.Title>
+                  <div className='mt-2'>
+                    <p className='text-sm text-bunker-300 mb-0.5'>
+                      {text}
+                    </p>
+                    <p className='text-sm text-bunker-300'>
+                      Upgrade and get access to this, as well as to other powerful enhancements.
+                    </p>
+                  </div>
+                  <div className='mt-4'>
+                    <button
+                      type='button'
+                      className='inline-flex justify-center rounded-md border border-transparent bg-primary opacity-90 hover:opacity-100 px-4 py-2 text-sm font-medium text-black hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
+                      onClick={() => router.push(`/settings/billing/${localStorage.getItem("projectData.id")}`)}
+                    >
+                      Upgrade Now
+                    </button>
+                    <button
+                      type='button'
+                      className='ml-2 inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-sm font-medium text-gray-400 hover:border-red hover:text-red hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
+                      onClick={onClose}
+                    >
+                      Maybe Later
+                    </button>
+                  </div>
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+    </div>
+  );
+};
+
+export default UpgradePlanModal;

frontend/src/components/basic/table/EnvironmentsTable.tsx

@@ -1,9 +1,13 @@
+import { useEffect, useState } from 'react';
 import { faPencil, faPlus, faX } from '@fortawesome/free-solid-svg-icons';
+import { plans } from 'public/data/frequentConstants';
 
 import { usePopUp } from '../../../hooks/usePopUp';
+import getOrganizationSubscriptions from '../../../pages/api/organization/GetOrgSubscription';
 import Button from '../buttons/Button';
 import { AddUpdateEnvironmentDialog } from '../dialog/AddUpdateEnvironmentDialog';
 import DeleteActionModal from '../dialog/DeleteActionModal';
+import UpgradePlanModal from '../dialog/UpgradePlan';
 
 type Env = { name: string; slug: string };
 
@@ -17,8 +21,24 @@ type Props = {
 const EnvironmentTable = ({ data = [], onCreateEnv, onDeleteEnv, onUpdateEnv }: Props) => {
   const { popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
     'createUpdateEnv',
-    'deleteEnv'
+    'deleteEnv',
+    'upgradePlan'
   ] as const);
+  const [plan, setPlan] = useState('');
+  const host = window.location.origin;
+
+  useEffect(() => {
+    // on initial load - run auth check
+    (async () => {
+      const orgId = localStorage.getItem('orgData.id') as string;
+      const subscriptions = await getOrganizationSubscriptions({
+        orgId
+      });
+      setPlan(subscriptions.data[0].plan.product);
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
 
   const onEnvCreateCB = async (env: Env) => {
     try {
@@ -63,7 +83,13 @@ const EnvironmentTable = ({ data = [], onCreateEnv, onDeleteEnv, onUpdateEnv }:
         <div className="w-48">
           <Button
             text="Add New Env"
-            onButtonPressed={() => handlePopUpOpen('createUpdateEnv')}
+            onButtonPressed={() => {
+              if (plan !== plans.starter || host !== "https://app.infisical.com") {
+                handlePopUpOpen('createUpdateEnv')
+              } else {
+                handlePopUpOpen('upgradePlan')
+              }
+            }}
             color="mineshaft"
             icon={faPlus}
             size="md"
@@ -88,18 +114,30 @@ const EnvironmentTable = ({ data = [], onCreateEnv, onDeleteEnv, onUpdateEnv }:
                     {name}
                   </td>
                   <td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">{slug}</td>
-                  <td className="py-2 border-mineshaft-700 border-t flex">
+                  <td className="py-2 border-mineshaft-700 border-t flex justify-end">
-                    <div className="opacity-50 hover:opacity-100 duration-200 flex items-center mr-8">
+                    <div className="hover:opacity-100 duration-200 flex items-center mr-2">
                       <Button
-                        onButtonPressed={() => handlePopUpOpen('createUpdateEnv', { name, slug })}
+                        onButtonPressed={() => {
-                        color="red"
+                          if (plan !== plans.starter || host !== "https://app.infisical.com") {
+                            handlePopUpOpen('createUpdateEnv', { name, slug })
+                          } else {
+                            handlePopUpOpen('upgradePlan')
+                          }
+                        }}
+                        color="mineshaft"
                         size="icon-sm"
                         icon={faPencil}
                       />
                     </div>
-                    <div className="opacity-50 hover:opacity-100 duration-200 flex items-center">
+                    <div className="opacity-50 hover:opacity-100 duration-200 flex items-center mr-6">
                       <Button
-                        onButtonPressed={() => handlePopUpOpen('deleteEnv', { name, slug })}
+                        onButtonPressed={() => {
+                          if (plan !== plans.starter || host !== "https://app.infisical.com") {
+                            handlePopUpOpen('deleteEnv', { name, slug })
+                          } else {
+                            handlePopUpOpen('upgradePlan')
+                          }
+                        }}
                         color="red"
                         size="icon-sm"
                         icon={faX}
@@ -134,6 +172,11 @@ const EnvironmentTable = ({ data = [], onCreateEnv, onDeleteEnv, onUpdateEnv }:
           onCreateSubmit={onEnvCreateCB}
           onEditSubmit={onEnvUpdateCB}
         />
+        <UpgradePlanModal 
+          isOpen={popUp.upgradePlan.isOpen}
+          onClose={() => handlePopUpClose('upgradePlan')}
+          text="You can add custom environments if you switch to Infisical's Team plan."
+        />
       </div>
     </>
   );

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')!,
+      name: 'Team',
-      price: '$9',
+      price: '$7',
       priceExplanation: t('billing:professional.price-explanation')!,
-      subtext: t('billing:professional.subtext')!,
+      text: 'For teams that want to improve their efficiency and security.',
-      text: t('billing:professional.text')!,
       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 ">