chore: join workspace invitation workflow updates

web/components/account/auth-forms/auth-header.tsx

@@ -1,5 +1,7 @@
-import { FC, useEffect, useState } from "react";
+import { FC, ReactNode } from "react";
+import useSWR from "swr";
 import { IWorkspaceMemberInvitation } from "@plane/types";
+import { Spinner } from "@plane/ui";
 // components
 import { WorkspaceLogo } from "@/components/workspace/logo";
 // helpers
@@ -13,7 +15,7 @@ type TAuthHeader = {
   invitationEmail: string | undefined;
   authMode: EAuthModes;
   currentAuthStep: EAuthSteps;
-  handleLoader: (isLoading: boolean) => void;
+  children: ReactNode;
 };
 
 const Titles = {
@@ -50,9 +52,16 @@ const Titles = {
 const workSpaceService = new WorkspaceService();
 
 export const AuthHeader: FC<TAuthHeader> = (props) => {
-  const { workspaceSlug, invitationId, invitationEmail, authMode, currentAuthStep, handleLoader } = props;
-  // state
-  const [invitation, setInvitation] = useState<IWorkspaceMemberInvitation | undefined>(undefined);
+  const { workspaceSlug, invitationId, invitationEmail, authMode, currentAuthStep, children } = props;
+
+  const { data: invitation, isLoading } = useSWR(
+    workspaceSlug && invitationId ? `WORKSPACE_INVITATION_${workspaceSlug}_${invitationId}` : null,
+    async () => workspaceSlug && invitationId && workSpaceService.getWorkspaceInvitation(workspaceSlug, invitationId),
+    {
+      revalidateOnFocus: false,
+      shouldRetryOnError: false,
+    }
+  );
 
   const getHeaderSubHeader = (
     step: EAuthSteps,
@@ -64,9 +73,10 @@ export const AuthHeader: FC<TAuthHeader> = (props) => {
       const workspace = invitation.workspace;
       return {
         header: (
-          <>
-            Join <WorkspaceLogo logo={workspace?.logo} name={workspace?.name} classNames="w-8 h-9" /> {workspace.name}
-          </>
+          <div className="relative inline-flex items-center gap-2">
+            Join <WorkspaceLogo logo={workspace?.logo} name={workspace?.name} classNames="w-8 h-9 flex-shrink-0" />{" "}
+            {workspace.name}
+          </div>
         ),
         subHeader: `${
           mode == EAuthModes.SIGN_UP ? "Create an account" : "Sign in"
@@ -77,23 +87,22 @@ export const AuthHeader: FC<TAuthHeader> = (props) => {
     return Titles[mode][step];
   };
 
-  useEffect(() => {
-    if (workspaceSlug && invitationId) {
-      handleLoader(true);
-      workSpaceService
-        .getWorkspaceInvitation(workspaceSlug, invitationId)
-        .then((res) => setInvitation(res))
-        .catch(() => setInvitation(undefined))
-        .finally(() => handleLoader(false));
-    } else setInvitation(undefined);
-  }, [workspaceSlug, invitationId, handleLoader]);
+  const { header, subHeader } = getHeaderSubHeader(currentAuthStep, authMode, invitation || undefined, invitationEmail);
 
-  const { header, subHeader } = getHeaderSubHeader(currentAuthStep, authMode, invitation, invitationEmail);
+  if (isLoading)
+    return (
+      <div className="flex h-full w-full items-center justify-center">
+        <Spinner />
+      </div>
+    );
 
   return (
-    <div className="space-y-1 text-center">
-      <h3 className="text-3xl font-bold text-onboarding-text-100">{header}</h3>
-      <p className="font-medium text-onboarding-text-400">{subHeader}</p>
-    </div>
+    <>
+      <div className="space-y-1 text-center">
+        <h3 className="text-3xl font-bold text-onboarding-text-100">{header}</h3>
+        <p className="font-medium text-onboarding-text-400">{subHeader}</p>
+      </div>
+      {children}
+    </>
   );
 };

web/components/account/auth-forms/sign-in-root.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import { IEmailCheckData } from "@plane/types";
-import { Spinner, TOAST_TYPE, setToast } from "@plane/ui";
+import { TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import {
   AuthHeader,
@@ -36,7 +36,6 @@ export const SignInAuthRoot = observer(() => {
   // states
   const [authStep, setAuthStep] = useState<EAuthSteps>(EAuthSteps.EMAIL);
   const [email, setEmail] = useState(emailParam ? emailParam.toString() : "");
-  const [isLoading, setIsLoading] = useState(false);
   const [errorInfo, setErrorInfo] = useState<TAuthErrorInfo | undefined>(undefined);
   // hooks
   const { instance } = useInstance();
@@ -74,13 +73,6 @@ export const SignInAuthRoot = observer(() => {
   const isOAuthEnabled =
     instance?.config && (instance?.config?.is_google_enabled || instance?.config?.is_github_enabled);
 
-  if (isLoading)
-    return (
-      <div className="flex h-full w-full items-center justify-center">
-        <Spinner />
-      </div>
-    );
-
   return (
     <div className="relative flex flex-col space-y-6">
       <AuthHeader
@@ -89,36 +81,36 @@ export const SignInAuthRoot = observer(() => {
         invitationEmail={email || undefined}
         authMode={EAuthModes.SIGN_IN}
         currentAuthStep={authStep}
-        handleLoader={setIsLoading}
-      />
-      {errorInfo && errorInfo?.type === EErrorAlertType.BANNER_ALERT && (
-        <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />
-      )}
-      {authStep === EAuthSteps.EMAIL && <AuthEmailForm defaultEmail={email} onSubmit={handleEmailVerification} />}
-      {authStep === EAuthSteps.UNIQUE_CODE && (
-        <AuthUniqueCodeForm
-          email={email}
-          handleEmailClear={() => {
-            setEmail("");
-            setAuthStep(EAuthSteps.EMAIL);
-          }}
-          submitButtonText="Continue"
-          mode={authMode}
-        />
-      )}
-      {authStep === EAuthSteps.PASSWORD && (
-        <AuthPasswordForm
-          email={email}
-          handleEmailClear={() => {
-            setEmail("");
-            setAuthStep(EAuthSteps.EMAIL);
-          }}
-          handleStepChange={(step) => setAuthStep(step)}
-          mode={authMode}
-        />
-      )}
-      {isOAuthEnabled && <OAuthOptions />}
-      <TermsAndConditions isSignUp={false} />
+      >
+        {errorInfo && errorInfo?.type === EErrorAlertType.BANNER_ALERT && (
+          <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />
+        )}
+        {authStep === EAuthSteps.EMAIL && <AuthEmailForm defaultEmail={email} onSubmit={handleEmailVerification} />}
+        {authStep === EAuthSteps.UNIQUE_CODE && (
+          <AuthUniqueCodeForm
+            email={email}
+            handleEmailClear={() => {
+              setEmail("");
+              setAuthStep(EAuthSteps.EMAIL);
+            }}
+            submitButtonText="Continue"
+            mode={authMode}
+          />
+        )}
+        {authStep === EAuthSteps.PASSWORD && (
+          <AuthPasswordForm
+            email={email}
+            handleEmailClear={() => {
+              setEmail("");
+              setAuthStep(EAuthSteps.EMAIL);
+            }}
+            handleStepChange={(step) => setAuthStep(step)}
+            mode={authMode}
+          />
+        )}
+        {isOAuthEnabled && <OAuthOptions />}
+        <TermsAndConditions isSignUp={false} />
+      </AuthHeader>
     </div>
   );
 });

web/components/account/auth-forms/sign-up-root.tsx

@@ -4,7 +4,7 @@ import { useRouter } from "next/router";
 // types
 import { IEmailCheckData } from "@plane/types";
 // ui
-import { Spinner, TOAST_TYPE, setToast } from "@plane/ui";
+import { TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import {
   AuthHeader,
@@ -39,7 +39,6 @@ export const SignUpAuthRoot: FC = observer(() => {
   // states
   const [authStep, setAuthStep] = useState<EAuthSteps>(EAuthSteps.EMAIL);
   const [email, setEmail] = useState(emailParam ? emailParam.toString() : "");
-  const [isLoading, setIsLoading] = useState(false);
   const [errorInfo, setErrorInfo] = useState<TAuthErrorInfo | undefined>(undefined);
   // hooks
   const { instance } = useInstance();
@@ -83,13 +82,6 @@ export const SignUpAuthRoot: FC = observer(() => {
   const isOAuthEnabled =
     instance?.config && (instance?.config?.is_google_enabled || instance?.config?.is_github_enabled);
 
-  if (isLoading)
-    return (
-      <div className="flex h-full w-full items-center justify-center">
-        <Spinner />
-      </div>
-    );
-
   return (
     <div className="relative flex flex-col space-y-6">
       <AuthHeader
@@ -98,36 +90,36 @@ export const SignUpAuthRoot: FC = observer(() => {
         invitationEmail={email || undefined}
         authMode={EAuthModes.SIGN_UP}
         currentAuthStep={authStep}
-        handleLoader={setIsLoading}
-      />
-      {errorInfo && errorInfo?.type === EErrorAlertType.BANNER_ALERT && (
-        <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />
-      )}
-      {authStep === EAuthSteps.EMAIL && <AuthEmailForm defaultEmail={email} onSubmit={handleEmailVerification} />}
-      {authStep === EAuthSteps.UNIQUE_CODE && (
-        <AuthUniqueCodeForm
-          email={email}
-          handleEmailClear={() => {
-            setEmail("");
-            setAuthStep(EAuthSteps.EMAIL);
-          }}
-          submitButtonText="Continue"
-          mode={authMode}
-        />
-      )}
-      {authStep === EAuthSteps.PASSWORD && (
-        <AuthPasswordForm
-          email={email}
-          handleEmailClear={() => {
-            setEmail("");
-            setAuthStep(EAuthSteps.EMAIL);
-          }}
-          handleStepChange={(step) => setAuthStep(step)}
-          mode={authMode}
-        />
-      )}
-      {isOAuthEnabled && <OAuthOptions />}
-      <TermsAndConditions isSignUp={authMode === EAuthModes.SIGN_UP} />
+      >
+        {errorInfo && errorInfo?.type === EErrorAlertType.BANNER_ALERT && (
+          <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />
+        )}
+        {authStep === EAuthSteps.EMAIL && <AuthEmailForm defaultEmail={email} onSubmit={handleEmailVerification} />}
+        {authStep === EAuthSteps.UNIQUE_CODE && (
+          <AuthUniqueCodeForm
+            email={email}
+            handleEmailClear={() => {
+              setEmail("");
+              setAuthStep(EAuthSteps.EMAIL);
+            }}
+            submitButtonText="Continue"
+            mode={authMode}
+          />
+        )}
+        {authStep === EAuthSteps.PASSWORD && (
+          <AuthPasswordForm
+            email={email}
+            handleEmailClear={() => {
+              setEmail("");
+              setAuthStep(EAuthSteps.EMAIL);
+            }}
+            handleStepChange={(step) => setAuthStep(step)}
+            mode={authMode}
+          />
+        )}
+        {isOAuthEnabled && <OAuthOptions />}
+        <TermsAndConditions isSignUp={authMode === EAuthModes.SIGN_UP} />
+      </AuthHeader>
     </div>
   );
 });