Invite wrong email modal (#2872)

dashboard/src/components/porter/Error.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import { createPortal } from "react-dom";
 import styled from "styled-components";
 
 import expand from "assets/expand.png";
@@ -37,12 +36,11 @@ const Error: React.FC<Props> = ({
         )}
         </Block>
       </StyledError>
-      {errorModalOpen && createPortal(
+      {errorModalOpen &&
         <Modal closeModal={() => setErrorModalOpen(false)}>
           {errorModalContents}
-        </Modal>,
-        document.body
-      )}
+        </Modal>
+      }
     </>
   );
 };

dashboard/src/components/porter/Modal.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import styled from "styled-components";
+import { createPortal } from "react-dom";
 
 type Props = {
   closeModal?: () => void;
@@ -11,17 +12,24 @@ const Modal: React.FC<Props> = ({
   children,
 }) => {
   return (
-    <ModalWrapper>
-      <ModalBg onClick={closeModal} />
-      <StyledModal> 
-        {closeModal && (
-          <CloseButton onClick={closeModal}>
-            <i className="material-icons">close</i>
-          </CloseButton>
-        )}
-        {children}
-      </StyledModal>
-    </ModalWrapper>
+    <>
+      {
+        createPortal(
+          <ModalWrapper>
+            <ModalBg onClick={closeModal} />
+            <StyledModal> 
+              {closeModal && (
+                <CloseButton onClick={closeModal}>
+                  <i className="material-icons">close</i>
+                </CloseButton>
+              )}
+              {children}
+            </StyledModal>
+          </ModalWrapper>,
+          document.body
+        )
+      }
+    </>
   );
 };
 

dashboard/src/main/home/Home.tsx

@@ -29,6 +29,10 @@ import { NewProjectFC } from "./new-project/NewProject";
 import InfrastructureRouter from "./infrastructure/InfrastructureRouter";
 import { overrideInfraTabEnabled } from "utils/infrastructure";
 import NoClusterPlaceHolder from "components/NoClusterPlaceHolder";
+import Modal from "components/porter/Modal";
+import Text from "components/porter/Text";
+import Spacer from "components/porter/Spacer";
+import Button from "components/porter/Button";
 
 // Guarded components
 const GuardedProjectSettings = fakeGuardedRoute("settings", "", [
@@ -84,6 +88,7 @@ const Home: React.FC<Props> = (props) => {
   const [handleDO, setHandleDO] = useState(false);
   const [ghRedirect, setGhRedirect] = useState(false);
   const [forceSidebar, setForceSidebar] = useState(true);
+  const [showWrongEmailModal, setShowWrongEmailModal] = useState(false);
 
   const redirectToNewProject = () => {
     pushFiltered(props, "/new-project", ["project_id"]);
@@ -206,7 +211,9 @@ const Home: React.FC<Props> = (props) => {
     getProjects(defaultProjectId);
     getMetadata();
 
-    if (
+    if (err === "Wrong email for invite") {
+      setShowWrongEmailModal(true);
+    } else if (
       !hasFinishedOnboarding &&
       props.history.location.pathname &&
       !props.history.location.pathname.includes("onboarding")
@@ -256,7 +263,7 @@ const Home: React.FC<Props> = (props) => {
               .then((res) => {
                 const usage = res.data;
                 setUsage(usage);
-                if (usage.exceeded && false) {
+                if (usage.exceeded) {
                   setCurrentModal("UsageWarningModal", { usage });
                 }
               })
@@ -268,12 +275,16 @@ const Home: React.FC<Props> = (props) => {
   }, [props.currentProject?.id]);
 
   useEffect(() => {
+    let queryString = window.location.search;
+    let urlParams = new URLSearchParams(queryString);
+    let err = urlParams.get("error");
     if (
       !hasFinishedOnboarding &&
       props.history.location.pathname &&
       !props.history.location.pathname.includes("onboarding") &&
       !props.history.location.pathname.includes("new-project") &&
-      !props.history.location.pathname.includes("project-settings")
+      !props.history.location.pathname.includes("project-settings") &&
+      err !== "Wrong email for invite"
     ) {
       setCurrentModal("RedirectToOnboardingModal");
     }
@@ -478,7 +489,26 @@ const Home: React.FC<Props> = (props) => {
         />,
         document.body
       )}
-      ,
+      {showWrongEmailModal && 
+        <Modal>
+          <Text size={16}>
+            Oops! This invite link wasn't for {user?.email}
+          </Text>
+          <Spacer y={1} />
+          <Text color="helper">
+            Your account email does not match the email associated with this project invite. 
+            Please log out and sign up again with the correct email using the invite link.
+          </Text>
+          <Spacer y={1} />
+          <Text color="helper">
+            You should reach out to the person who sent you the invite link to get the correct email.
+          </Text>
+          <Spacer y={1} />
+          <Button onClick={props.logOut}>
+            Log out
+          </Button>
+        </Modal>
+      }
     </StyledHome>
   );
 };