show popup when email not configured

frontend/src/views/Settings/OrgSettingsPage/components/OrgIncidentContactsTable/OrgIncidentContactsTable.tsx

@@ -13,6 +13,7 @@ import * as yup from 'yup';
 import {
   Button,
   DeleteActionModal,
+  EmailServiceSetupModal,
   EmptyState,
   FormControl,
   IconButton,
@@ -28,6 +29,7 @@ import {
   THead,
   Tr} from '@app/components/v2';
 import { usePopUp } from '@app/hooks';
+import { useFetchServerStatus } from '@app/hooks/api/serverDetails';
 import { IncidentContact } from '@app/hooks/api/types';
 
 type Props = {
@@ -50,9 +52,11 @@ export const OrgIncidentContactsTable = ({
   isLoading
 }: Props) => {
   const [searchContact, setSearchContact] = useState('');
+  const {data: serverDetails } = useFetchServerStatus()
   const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
     'addContact',
-    'removeContact'
+    'removeContact',
+    'setUpEmail'
   ] as const);
 
   const {
@@ -92,7 +96,13 @@ export const OrgIncidentContactsTable = ({
         <div>
           <Button
             leftIcon={<FontAwesomeIcon icon={faPlus} />}
-            onClick={() => handlePopUpOpen('addContact')}
+            onClick={() => {
+              if (serverDetails?.emailConfigured){
+                handlePopUpOpen('addContact');
+              } else {
+                handlePopUpOpen('setUpEmail');
+              }
+            }}
           >
             Add Contact
           </Button>
@@ -180,6 +190,10 @@ export const OrgIncidentContactsTable = ({
         onChange={(isOpen) => handlePopUpToggle('removeContact', isOpen)}
         onDeleteApproved={onRemoveIncidentContact}
       />
+      <EmailServiceSetupModal
+        isOpen={popUp.setUpEmail?.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle('setUpEmail', isOpen)}
+      />
     </div>
   );
 };

frontend/src/views/Settings/OrgSettingsPage/components/OrgMembersTable/OrgMembersTable.tsx

@@ -9,7 +9,7 @@ import * as yup from 'yup';
 import {
   Button,
   DeleteActionModal,
-  EmptyState,
+  EmailServiceSetupModal,  EmptyState,
   FormControl,
   IconButton,
   Input,
@@ -28,6 +28,7 @@ import {
   Tr,
   UpgradePlanModal} from '@app/components/v2';
 import { usePopUp } from '@app/hooks';
+import { useFetchServerStatus } from '@app/hooks/api/serverDetails';
 import { OrgUser, Workspace } from '@app/hooks/api/types';
 
 type Props = {
@@ -64,10 +65,12 @@ export const OrgMembersTable = ({
 }: Props) => {
   const router = useRouter();
   const [searchMemberFilter, setSearchMemberFilter] = useState('');
+  const {data: serverDetails } = useFetchServerStatus()
   const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
     'addMember',
     'removeMember',
-    'upgradePlan'
+    'upgradePlan',
+    'setUpEmail'
   ] as const);
 
   const {
@@ -79,8 +82,8 @@ export const OrgMembersTable = ({
 
   const onAddMember = async ({ email }: TAddMemberForm) => {
     await onInviteMember(email);
-    handlePopUpClose('addMember');
-    reset();
+      handlePopUpClose('addMember');
+      reset(); 
   };
 
   const onRemoveOrgMemberApproved = async () => {
@@ -121,10 +124,14 @@ export const OrgMembersTable = ({
           <Button
             leftIcon={<FontAwesomeIcon icon={faPlus} />}
             onClick={() => {
-              if (isMoreUserNotAllowed) {
-                handlePopUpOpen('upgradePlan');
+              if (serverDetails?.emailConfigured){
+                if (isMoreUserNotAllowed) {
+                  handlePopUpOpen('upgradePlan');
+                } else {
+                  handlePopUpOpen('addMember');
+                }
               } else {
-                handlePopUpOpen('addMember');
+                handlePopUpOpen('setUpEmail');
               }
             }}
           >
@@ -291,6 +298,10 @@ export const OrgMembersTable = ({
         onOpenChange={(isOpen) => handlePopUpToggle('upgradePlan', isOpen)}
         text="You can add custom environments if you switch to Infisical's Team plan."
       />
+      <EmailServiceSetupModal
+        isOpen={popUp.setUpEmail?.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle('setUpEmail', isOpen)}
+      />
     </div>
   );
 };

frontend/src/views/Settings/PersonalSettingsPage/SecuritySection/SecuritySection.tsx

@@ -1,7 +1,9 @@
 import { useEffect, useState } from 'react';
 
 import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
-import { Checkbox } from '@app/components/v2';
+import { Checkbox, EmailServiceSetupModal } from '@app/components/v2';
+import { useFetchServerStatus } from '@app/hooks/api/serverDetails';
+import { usePopUp } from '@app/hooks/usePopUp';
 
 import { useGetUser } from '../../../../hooks/api';
 import { User } from '../../../../hooks/api/types';
@@ -11,6 +13,11 @@ export const SecuritySection = () => {
   const [isMfaEnabled, setIsMfaEnabled] = useState(false);
   const { data: user } = useGetUser();
   const { createNotification } = useNotificationContext();
+  const { handlePopUpToggle, popUp, handlePopUpOpen } = usePopUp([
+    'setUpEmail'
+  ] as const);
+  
+  const {data: serverDetails } = useFetchServerStatus()
   
   useEffect(() => {
     if (user && typeof user.isMfaEnabled !== 'undefined') {
@@ -42,6 +49,7 @@ export const SecuritySection = () => {
   }
   
   return (
+    <>
     <form>
       <div className="mb-6 mt-2 flex w-full flex-col items-start rounded-md bg-white/5 px-6 pb-6 pt-2">
         <p className="mb-4 mt-2 text-xl font-semibold">
@@ -52,12 +60,21 @@ export const SecuritySection = () => {
           id="isTwoFAEnabled"
           isChecked={isMfaEnabled}
           onCheckedChange={(state) => {
-            toggleMfa(state as boolean);
+            if (serverDetails?.emailConfigured){
+              toggleMfa(state as boolean);
+            } else {
+              handlePopUpOpen('setUpEmail');
+            }
           }}
         >
           Enable 2-factor authentication via your personal email.
         </Checkbox>
       </div>
     </form>
+    <EmailServiceSetupModal
+        isOpen={popUp.setUpEmail?.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle('setUpEmail', isOpen)}
+      />
+    </>
   );
 };