show popup when email not configured

frontend/src/components/signup/TeamInviteStep.tsx

@@ -2,10 +2,13 @@ import React, { useState } from 'react';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
 
+import { useFetchServerStatus } from '@app/hooks/api/serverDetails';
+import { usePopUp } from '@app/hooks/usePopUp';
 import addUserToOrg from '@app/pages/api/organization/addUserToOrg';
 import getWorkspaces from '@app/pages/api/workspace/getWorkspaces';
 
 import Button from '../basic/buttons/Button';
+import { EmailServiceSetupModal } from '../v2';
 
 /**
  * This is the last step of the signup flow. People can optionally invite their teammates here.
@@ -14,6 +17,10 @@ export default function TeamInviteStep(): JSX.Element {
   const [emails, setEmails] = useState('');
   const { t } = useTranslation();
   const router = useRouter();
+  const {data: serverDetails } = useFetchServerStatus()
+  const { handlePopUpToggle, popUp, handlePopUpOpen } = usePopUp([
+    'setUpEmail'
+  ] as const);
 
   // Redirect user to the getting started page
   const redirectToHome = async () => {
@@ -62,10 +69,20 @@ export default function TeamInviteStep(): JSX.Element {
         </div>
         <Button
           text={t('signup:step5-send-invites') ?? ''}
-          onButtonPressed={() => inviteUsers({ emails })}
+          onButtonPressed={() => {
+            if(serverDetails?.emailConfigured){
+              inviteUsers({ emails })
+            }else{
+              handlePopUpOpen('setUpEmail');
+            }
+          }}
           size="lg"
         />
       </div>
+      <EmailServiceSetupModal
+        isOpen={popUp.setUpEmail?.isOpen}
+        onOpenChange={(isOpen) => handlePopUpToggle('setUpEmail', isOpen)}
+      />
     </div>
   );
 }

frontend/src/components/v2/EmailServiceSetupModal/EmailServiceSetupModal.tsx

@@ -0,0 +1,21 @@
+import { Button } from '../Button';
+import { Modal, ModalContent } from '../Modal';
+
+type Props = {
+  isOpen?: boolean;
+  onOpenChange?: (isOpen: boolean) => void;
+};
+
+export const EmailServiceSetupModal = ({ isOpen, onOpenChange }: Props): JSX.Element => (
+  <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+    <ModalContent title="Email service not configured">
+      <p className="mb-4 text-bunker-300">
+        The administrators of this Infisical instance have not yet set up an email service provider required to perform this action
+      </p>
+      
+      <a href="https://infisical.com/docs/self-hosting/configuration/email">
+        <Button className="mr-4">Learn more</Button>
+      </a>
+    </ModalContent>
+  </Modal>
+);

frontend/src/components/v2/EmailServiceSetupModal/index.tsx

@@ -0,0 +1 @@
+export { EmailServiceSetupModal } from './EmailServiceSetupModal';

frontend/src/components/v2/index.tsx

@@ -3,6 +3,7 @@ export * from './Card';
 export * from './Checkbox';
 export * from './DeleteActionModal';
 export * from './Dropdown';
+export * from './EmailServiceSetupModal'
 export * from './EmptyState';
 export * from './FormControl';
 export * from './IconButton';