feat: Add the workspace logo on Twenty logo on the invited route (#1136)

* Add the workspace logo on Twenty logo on the invited route

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Mael FOSSO <fosso.mael.elvis@gmail.com>

* Add minor refactors

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Mael FOSSO <fosso.mael.elvis@gmail.com>

* Refactor the invite logic

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Mael FOSSO <fosso.mael.elvis@gmail.com>

---------

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Mael FOSSO <fosso.mael.elvis@gmail.com>

front/src/modules/auth/components/Logo.tsx

@@ -1,6 +1,10 @@
 import styled from '@emotion/styled';
 
-type Props = React.ComponentProps<'div'>;
+import { getImageAbsoluteURIOrBase64 } from '@/users/utils/getProfilePictureAbsoluteURI';
+
+type Props = React.ComponentProps<'div'> & {
+  workspaceLogo?: string | null;
+};
 
 const StyledLogo = styled.div`
   height: 48px;
@@ -12,12 +16,29 @@ const StyledLogo = styled.div`
     width: 100%;
   }
 
+  position: relative;
   width: 48px;
 `;
 
-export function Logo(props: Props) {
+type StyledWorkspaceLogoProps = {
+  logo?: string | null;
+};
+
+const StyledWorkspaceLogo = styled.div<StyledWorkspaceLogoProps>`
+  background: url(${(props) => props.logo});
+  background-size: cover;
+  border-radius: ${({ theme }) => theme.border.radius.xs};
+  bottom: ${({ theme }) => `-${theme.spacing(3)}`};
+  height: ${({ theme }) => theme.spacing(6)};
+  position: absolute;
+  right: ${({ theme }) => `-${theme.spacing(3)}`};
+  width: ${({ theme }) => theme.spacing(6)};
+`;
+
+export function Logo({ workspaceLogo, ...props }: Props) {
   return (
     <StyledLogo {...props}>
+      <StyledWorkspaceLogo logo={getImageAbsoluteURIOrBase64(workspaceLogo)} />
       <img src="/icons/android/android-launchericon-192-192.png" alt="logo" />
     </StyledLogo>
   );

front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx

@@ -58,6 +58,7 @@ export function SignInUpForm() {
       handleSubmit,
       formState: { isSubmitting },
     },
+    workspace,
   } = useSignInUp();
   const theme = useTheme();
 
@@ -73,16 +74,22 @@ export function SignInUpForm() {
     return signInUpMode === SignInUpMode.SignIn ? 'Sign in' : 'Sign up';
   }, [signInUpMode, signInUpStep]);
 
+  const title = useMemo(() => {
+    if (signInUpMode === SignInUpMode.Invite) {
+      return `Join ${workspace?.displayName ?? ''} Team`;
+    }
+
+    return signInUpMode === SignInUpMode.SignIn
+      ? 'Sign in to Twenty'
+      : 'Sign up to Twenty';
+  }, [signInUpMode, workspace?.displayName]);
+
   return (
     <>
       <AnimatedEaseIn>
-        <Logo />
+        <Logo workspaceLogo={workspace?.logo} />
       </AnimatedEaseIn>
-      <Title animate>
-        {signInUpMode === SignInUpMode.SignIn
-          ? 'Sign in to Twenty'
-          : 'Sign up to Twenty'}
-      </Title>
+      <Title animate>{title}</Title>
       <StyledContentContainer>
         {authProviders.google && (
           <>

front/src/modules/auth/sign-in-up/hooks/useSignInUp.tsx

@@ -11,6 +11,7 @@ import { AppPath } from '@/types/AppPath';
 import { PageHotkeyScope } from '@/types/PageHotkeyScope';
 import { useSnackBar } from '@/ui/snack-bar/hooks/useSnackBar';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { useGetWorkspaceFromInviteHashQuery } from '~/generated/graphql';
 import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
 
 import { useAuth } from '../../hooks/useAuth';
@@ -19,6 +20,7 @@ import { PASSWORD_REGEX } from '../../utils/passwordRegex';
 export enum SignInUpMode {
   SignIn = 'sign-in',
   SignUp = 'sign-up',
+  Invite = 'invite',
 }
 
 export enum SignInUpStep {
@@ -50,13 +52,21 @@ export function useSignInUp() {
   const [signInUpStep, setSignInUpStep] = useState<SignInUpStep>(
     SignInUpStep.Init,
   );
-  const [signInUpMode, setSignInUpMode] = useState<SignInUpMode>(
-    isMatchingLocation(AppPath.SignIn)
+  const [signInUpMode, setSignInUpMode] = useState<SignInUpMode>(() => {
+    if (isMatchingLocation(AppPath.Invite)) {
+      return SignInUpMode.Invite;
+    }
+
+    return isMatchingLocation(AppPath.SignIn)
       ? SignInUpMode.SignIn
-      : SignInUpMode.SignUp,
-  );
+      : SignInUpMode.SignUp;
+  });
   const [showErrors, setShowErrors] = useState(false);
 
+  const { data: workspace } = useGetWorkspaceFromInviteHashQuery({
+    variables: { inviteHash: workspaceInviteHash || '' },
+  });
+
   const form = useForm<Form>({
     mode: 'onChange',
     defaultValues: {
@@ -171,5 +181,6 @@ export function useSignInUp() {
     goBackToEmailStep,
     submitCredentials,
     form,
+    workspace: workspace?.findWorkspaceFromInviteHash,
   };
 }

front/src/modules/workspace/queries/select.ts

@@ -15,3 +15,13 @@ export const GET_WORKSPACE_MEMBERS = gql`
     }
   }
 `;
+
+export const GET_WORKSPACE_FROM_INVITE_HASH = gql`
+  query GetWorkspaceFromInviteHash($inviteHash: String!) {
+    findWorkspaceFromInviteHash(inviteHash: $inviteHash) {
+      id
+      displayName
+      logo
+    }
+  }
+`;