Fix merge conflicts

frontend/src/pages/dashboard/[id].tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-nested-ternary */
-import { Fragment, useCallback, useEffect, useState } from 'react';
+import { UIEvent, useCallback, useEffect, useRef, useState } from 'react';
 import Head from 'next/head';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
@@ -135,7 +135,14 @@ export default function Dashboard() {
     name: '',
     slug: ''
   });
+  const [atSecretAreaTop, setAtSecretsAreaTop] = useState(true);
+  const secretsTop = useRef<HTMLDivElement>(null);
 
+  const onSecretsAreaScroll = (event: UIEvent<HTMLDivElement>) => {
+    if (event.currentTarget.scrollTop !== 0) {
+      setAtSecretsAreaTop(false);
+    }
+  };
   // #TODO: fix save message for changing reroutes
   // const beforeRouteHandler = (url) => {
   // 	const warningText =
@@ -256,7 +263,6 @@ export default function Dashboard() {
   const addRow = () => {
     setIsNew(false);
     setData([
-      ...data!,
       {
         id: guidGenerator(),
         idOverride: guidGenerator(),
@@ -265,8 +271,12 @@ export default function Dashboard() {
         value: '',
         valueOverride: undefined,
         comment: ''
-      }
+      },
+      ...data!
     ]);
+    if (!atSecretAreaTop) {
+      secretsTop.current?.scrollIntoView({ behavior: 'smooth' });
+    }
   };
 
   const deleteRow = ({ ids, secretName }: { ids: string[]; secretName: string }) => {
@@ -283,22 +293,22 @@ export default function Dashboard() {
   };
 
   const modifyValue = (value: string, pos: number) => {
-    setData((oldData) => oldData?.map((e, index) => (index === pos ? { ...e, value } : e)));
+    setData((oldData) => oldData?.map((e) => (e.pos === pos ? { ...e, value } : e)));
     setButtonReady(true);
   };
 
   const modifyValueOverride = (valueOverride: string | undefined, pos: number) => {
-    setData((oldData) => oldData?.map((e, index) => (index === pos ? { ...e, valueOverride } : e)));
+    setData((oldData) => oldData?.map((e) => (e.pos === pos ? { ...e, valueOverride } : e)));
     setButtonReady(true);
   };
 
   const modifyKey = (key: string, pos: number) => {
-    setData((oldData) => oldData?.map((e, index) => (index === pos ? { ...e, key } : e)));
+    setData((oldData) => oldData?.map((e) => (e.pos === pos ? { ...e, key } : e)));
     setButtonReady(true);
   };
 
   const modifyComment = (comment: string, pos: number) => {
-    setData((oldData) => oldData?.map((e, index) => (index === pos ? { ...e, comment } : e)));
+    setData((oldData) => oldData?.map((e) => (e.pos === pos ? { ...e, comment } : e)));
     setButtonReady(true);
   };
 
@@ -736,7 +746,11 @@ export default function Dashboard() {
               </div>
             ) : data?.length !== 0 ? (
               <div className="flex flex-col w-full mt-1 mb-2">
-                <div className="max-w-5xl mt-1 max-h-[calc(100vh-280px)] overflow-hidden overflow-y-scroll no-scrollbar no-scrollbar::-webkit-scrollbar">
+                <div
+                  onScroll={onSecretsAreaScroll}
+                  className="max-w-5xl mt-1 max-h-[calc(100vh-280px)] overflow-hidden overflow-y-scroll no-scrollbar no-scrollbar::-webkit-scrollbar"
+                >
+                  <div ref={secretsTop} />
                   <div className="px-1 pt-2 bg-mineshaft-800 rounded-md p-2">
                     {!snapshotData &&
                       data

frontend/src/pages/home/[id].tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from 'react';
-import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { faSlack } from '@fortawesome/free-brands-svg-icons';
@@ -40,47 +39,45 @@ const learningItem = ({
 }: ItemProps): JSX.Element => {
   if (link) {
     return (
-      <Link href={link}>
-        <a
-          target={`${link.includes('https') ? '_blank' : '_self'}`}
-          rel="noopener noreferrer"
-          className="w-full"
-          href="#"
+      <a
+        target={`${link.includes('https') ? '_blank' : '_self'}`}
+        rel="noopener noreferrer"
+        className="w-full"
+        href={link}
+      >
+        <div
+          onKeyDown={() => null}
+          role="button"
+          tabIndex={0}
+          onClick={async () => {
+            if (userAction && userAction !== 'first_time_secrets_pushed') {
+              await registerUserAction({
+                action: userAction
+              });
+            }
+          }}
+          className="relative bg-bunker-700 hover:bg-bunker-500 shadow-xl duration-200 rounded-md border border-dashed border-bunker-400 pl-2 pr-6 py-2 h-[5.5rem] w-full flex items-center justify-between overflow-hidden my-1.5 cursor-pointer"
         >
-          <div
-            onKeyDown={() => null}
-            role="button"
-            tabIndex={0}
-            onClick={async () => {
-              if (userAction && userAction !== 'first_time_secrets_pushed') {
-                await registerUserAction({
-                  action: userAction
-                });
-              }
-            }}
-            className="relative bg-bunker-700 hover:bg-bunker-500 shadow-xl duration-200 rounded-md border border-dashed border-bunker-400 pl-2 pr-6 py-2 h-[5.5rem] w-full flex items-center justify-between overflow-hidden my-1.5 cursor-pointer"
-          >
-            <div className="flex flex-row items-center mr-4">
-              <FontAwesomeIcon icon={icon} className="text-4xl mx-2 w-16" />
-              {complete && (
-                <div className="bg-bunker-700 w-7 h-7 rounded-full absolute left-12 top-10 p-2 flex items-center justify-center">
-                  <FontAwesomeIcon icon={faCheckCircle} className="text-4xl w-5 h-5 text-green" />
-                </div>
-              )}
-              <div className="flex flex-col items-start">
-                <div className="text-xl font-semibold mt-0.5">{text}</div>
-                <div className="text-sm font-normal">{subText}</div>
+          <div className="flex flex-row items-center mr-4">
+            <FontAwesomeIcon icon={icon} className="text-4xl mx-2 w-16" />
+            {complete && (
+              <div className="bg-bunker-700 w-7 h-7 rounded-full absolute left-12 top-10 p-2 flex items-center justify-center">
+                <FontAwesomeIcon icon={faCheckCircle} className="text-4xl w-5 h-5 text-green" />
               </div>
+            )}
+            <div className="flex flex-col items-start">
+              <div className="text-xl font-semibold mt-0.5">{text}</div>
+              <div className="text-sm font-normal">{subText}</div>
             </div>
-            <div
-              className={`pr-4 font-semibold text-sm w-28 text-right ${complete && 'text-green'}`}
-            >
-              {complete ? 'Complete!' : `About ${time}`}
-            </div>
-            {complete && <div className="absolute bottom-0 left-0 h-1 w-full bg-green" />}
           </div>
-        </a>
-      </Link>
+          <div
+            className={`pr-4 font-semibold text-sm w-28 text-right ${complete && 'text-green'}`}
+          >
+            {complete ? 'Complete!' : `About ${time}`}
+          </div>
+          {complete && <div className="absolute bottom-0 left-0 h-1 w-full bg-green" />}
+        </div>
+      </a>
     );
   }
   return (
@@ -157,7 +154,7 @@ export default function Home() {
           icon: faHandPeace,
           time: '3 min',
           userAction: 'intro_cta_clicked',
-          link: 'https://www.youtube.com/watch?v=JS3OKYU2078'
+          link: 'https://www.youtube.com/watch?v=3F7FNYX94zA'
         })}
         {learningItem({
           text: 'Add your secrets',

frontend/src/pages/password-reset.tsx

@@ -68,13 +68,6 @@ export default function PasswordReset() {
     });
 
     if (!errorCheck) {
-      // const { ciphertext, iv, tag } = Aes256Gcm.encrypt({
-      //   text: privateKey,
-      //   secret: newPassword
-      //     .slice(0, 32)
-      //     .padStart(32 + (newPassword.slice(0, 32).length - new Blob([newPassword]).size), '0')
-      // }) as { ciphertext: string; iv: string; tag: string };
-
       client.init(
         {
           username: email,

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 ">