Resolve merge conflicts

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/utilities/config/index.ts

@@ -4,13 +4,11 @@ const POSTHOG_HOST =
   process.env.NEXT_PUBLIC_POSTHOG_HOST! || "https://app.posthog.com";
 const STRIPE_PRODUCT_PRO = process.env.NEXT_PUBLIC_STRIPE_PRODUCT_PRO!;
 const STRIPE_PRODUCT_STARTER = process.env.NEXT_PUBLIC_STRIPE_PRODUCT_STARTER!;
-const SITE_URL = "https://app.infisical.com";
 
 export {
   ENV,
   POSTHOG_API_KEY,
   POSTHOG_HOST,
-  SITE_URL,
   STRIPE_PRODUCT_PRO,
   STRIPE_PRODUCT_STARTER
 };

frontend/src/components/utilities/generateBackupPDF.ts

@@ -1,7 +1,5 @@
 import { jsPDF } from 'jspdf';
 
-import { SITE_URL } from './config';
-
 interface PDFProps {
   personalName: string;
   personalEmail: string;
@@ -19,7 +17,7 @@ const yyyy = today.getFullYear();
 const todayFormatted = `${mm}/${dd}/${yyyy}`;
 
 
-function createPdfHeader(doc: jsPDF, personalName : string) {
+function createPdfHeader(doc: jsPDF, personalName: string) {
   doc.setFillColor(255, 255, 255);
   doc.rect(0, 0, 600, 900, 'F');
   doc.setTextColor(23, 23, 23);
@@ -30,6 +28,10 @@ function createPdfHeader(doc: jsPDF, personalName : string) {
 }
 
 function createPdfContent(doc: jsPDF, personalEmail: string, generatedKey: string) {
+  const { protocol, hostname, port } = window.location;
+  const portSuffix = port && port !== '80' ? `:${port}` : '';
+  const siteURL = `${protocol}//${hostname}${portSuffix}`;
+
   doc.setFontSize(14);
   doc.text(
     'In case you get locked out of you Infisical account, you`ll need these account details',
@@ -73,7 +75,7 @@ function createPdfContent(doc: jsPDF, personalEmail: string, generatedKey: strin
   doc.roundedRect(170, 488, 375, 35, 5, 5, 'F');
   doc.setTextColor(23, 23, 23);
   doc.setFontSize(14);
-  doc.text(`${SITE_URL}/login`, 180, 420);
+  doc.text(`${siteURL}/login`, 180, 420);
   doc.text(personalEmail, 180, 465);
   doc.text(generatedKey, 180, 510);
   doc.text('Need help? Contact us at [email protected]', 32, 575);

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';