Updated the billing engine for Cloud

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">
-                    <div className="opacity-50 hover:opacity-100 duration-200 flex items-center mr-8">
+                  <td className="py-2 border-mineshaft-700 border-t flex justify-end">
+                    <div className="hover:opacity-100 duration-200 flex items-center mr-2">
                       <Button
-                        onButtonPressed={() => handlePopUpOpen('createUpdateEnv', { name, slug })}
-                        color="red"
+                        onButtonPressed={() => {
+                          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>
     </>
   );