feat(member): invite member to an organization

apps/console/src/app/app.tsx

@@ -9,7 +9,7 @@ import { useIntercom } from 'react-use-intercom'
 import { selectUser } from '@qovery/domains/user'
 import { DarkModeEnabler, Layout } from '@qovery/pages/layout'
 import { PageLogin, PageLogoutFeature } from '@qovery/pages/login'
-import { useAuth } from '@qovery/shared/auth'
+import { useAuth, useInviteMember } from '@qovery/shared/auth'
 import { UserInterface } from '@qovery/shared/interfaces'
 import { LOGIN_URL, LOGOUT_URL, ProtectedRoute } from '@qovery/shared/router'
 import { LoadingScreen } from '@qovery/shared/ui'
@@ -21,6 +21,7 @@ import { ROUTER } from './router/main.router'
 export function App() {
   useDocumentTitle('Loading...')
   const { isLoading } = useAuth()
+  useInviteMember()
 
   const gtmParams = { id: environment.gtm }
 

apps/console/src/app/router/main.router.tsx

@@ -10,7 +10,9 @@ import { PageOnboarding } from '@qovery/pages/onboarding'
 import { OverviewPage } from '@qovery/pages/overview/feature'
 import { PageServices } from '@qovery/pages/services'
 import { PageSettings } from '@qovery/pages/settings'
+import { AcceptInvitationFeature } from '@qovery/shared/console-shared'
 import {
+  ACCEPT_INVITATION_URL,
   APPLICATION_LOGS_URL,
   APPLICATION_URL,
   CLUSTERS_URL,
@@ -42,6 +44,12 @@ export const ROUTER: RouterProps[] = [
     protected: true,
     layout: false,
   },
+  {
+    path: `${ACCEPT_INVITATION_URL}`,
+    component: <AcceptInvitationFeature />,
+    protected: true,
+    layout: false,
+  },
   {
     path: ORGANIZATION_URL(),
     component: <RedirectOverview />,

libs/pages/login/src/lib/ui/login/login.spec.tsx

@@ -1,3 +1,4 @@
+import { queryByTestId, waitFor } from '@testing-library/react'
 import { render } from '__tests__/utils/setup-jest'
 import { AuthEnum } from '@qovery/shared/auth'
 import Login, { ILoginProps } from './login'
@@ -16,4 +17,14 @@ describe('Login', () => {
     const { baseElement } = render(<Login {...props} />)
     expect(baseElement).toBeTruthy()
   })
+
+  it('should call invitation detail if token are in the localStorage', async () => {
+    localStorage.setItem('inviteToken', 'token')
+    const { baseElement } = render(<Login {...props} />)
+
+    const title = queryByTestId(baseElement, 'welcome-title')
+    await waitFor(() => {
+      expect(title).toBeNull()
+    })
+  })
 })

libs/pages/login/src/lib/ui/login/login.tsx

@@ -1,4 +1,5 @@
-import { AuthEnum } from '@qovery/shared/auth'
+import { AuthEnum, useInviteMember } from '@qovery/shared/auth'
+import { InviteDetailsFeature } from '@qovery/shared/console-shared'
 import { IconEnum } from '@qovery/shared/enums'
 import { Icon } from '@qovery/shared/ui'
 
@@ -11,12 +12,21 @@ export interface ILoginProps {
 
 export function Login(props: ILoginProps) {
   const { onClickAuthLogin, githubType, gitlabType, bitbucketType } = props
+  const { displayInvitation } = useInviteMember()
 
   return (
     <div className="flex h-full max-w-screen-2xl ml-auto mr-auto bg-white">
       <div className="flex-[2_1_0%] px-4 md:px-20">
         <div className="max-w-lg mt-28 mx-auto">
-          <h1 className="h3 text-text-700 mb-3">Welcome to Qovery</h1>
+          {!displayInvitation ? (
+            <h1 className="h3 text-text-700 mb-3" data-testid="welcome-title">
+              Welcome to Qovery
+            </h1>
+          ) : (
+            <div className="mb-2">
+              <InviteDetailsFeature />
+            </div>
+          )}
           <p className="text-sm mb-10 text-text-500">
             By registering and using Qovery, you agree to the processing of your personal data by Qovery as described in
             the

libs/shared/auth/src/index.ts

@@ -1,2 +1,3 @@
 export * from './lib/enum/auth.enum'
 export * from './lib/use-auth/use-auth'
+export * from './lib/use-invite-member/use-invite-member'

libs/shared/auth/src/lib/use-invite-member/use-invite-member.spec.tsx

@@ -0,0 +1,83 @@
+import { act } from '@testing-library/react'
+import { renderHook } from '@testing-library/react-hooks'
+import { Wrapper } from '__tests__/utils/providers'
+import { useLocation } from 'react-router-dom'
+import { ACCEPT_INVITATION_URL, LOGIN_URL } from '@qovery/shared/router'
+import { useInviteMember } from './use-invite-member'
+
+// mock useNavigate
+const mockedUseNavigate = jest.fn()
+jest.mock('react-router-dom', () => ({
+  ...(jest.requireActual('react-router-dom') as any),
+  useNavigate: () => mockedUseNavigate,
+  useLocation: jest.fn(),
+}))
+
+describe('useInviteMember Hook', () => {
+  beforeEach(() => {
+    localStorage.clear()
+  })
+
+  it('should store the tokens from the query inside localstorage and remove redirection from localStorage', () => {
+    localStorage.setItem('redirectLoginUri', '/organization/123')
+    ;(useLocation as jest.Mock).mockReturnValue({
+      search: '?inviteToken=123&organization=456',
+      pathname: 'login',
+    })
+
+    renderHook(() => useInviteMember(), { wrapper: Wrapper })
+
+    expect(localStorage.getItem('inviteToken')).toBe('123')
+    expect(localStorage.getItem('inviteOrganizationId')).toBe('456')
+    expect(localStorage.getItem('redirectLoginUri')).toBeNull()
+  })
+
+  it('should redirect to the acceptation page if token found in localStorage', async () => {
+    localStorage.setItem('inviteToken', '123')
+    localStorage.setItem('inviteOrganizationId', '456')
+    ;(useLocation as jest.Mock).mockReturnValue({
+      search: '',
+      pathname: '/organization',
+    })
+
+    renderHook(() => useInviteMember(), { wrapper: Wrapper })
+    expect(mockedUseNavigate).toHaveBeenCalled()
+  })
+
+  it('should not redirect if we are already on login', () => {
+    ;(useLocation as jest.Mock).mockReturnValue({
+      search: '?inviteToken=123&organization=456',
+      pathname: LOGIN_URL,
+    })
+
+    renderHook(() => useInviteMember(), { wrapper: Wrapper })
+    expect(mockedUseNavigate).not.toHaveBeenCalled()
+  })
+
+  it('should not redirect if we are already on accept page', () => {
+    ;(useLocation as jest.Mock).mockReturnValue({
+      search: '?inviteToken=123&organization=456',
+      pathname: ACCEPT_INVITATION_URL,
+    })
+
+    renderHook(() => useInviteMember(), { wrapper: Wrapper })
+    expect(mockedUseNavigate).not.toHaveBeenCalled()
+  })
+
+  it('should remove the inviteToken from localStorage', async () => {
+    localStorage.setItem('inviteToken', '123')
+    localStorage.setItem('inviteOrganizationId', '456')
+    ;(useLocation as jest.Mock).mockReturnValue({
+      search: '?inviteToken=123&organization=456',
+      pathname: ACCEPT_INVITATION_URL,
+    })
+    const { cleanInvitation } = renderHook(() => useInviteMember(), { wrapper: Wrapper }).result.current
+
+    await act(() => {
+      cleanInvitation()
+    })
+
+    expect(localStorage.getItem('inviteToken')).toBeNull()
+    expect(localStorage.getItem('inviteOrganizationId')).toBeNull()
+  })
+})

libs/shared/auth/src/lib/use-invite-member/use-invite-member.tsx

@@ -0,0 +1,118 @@
+import { SerializedError } from '@reduxjs/toolkit'
+import { InviteMember, MembersApi } from 'qovery-typescript-axios'
+import { useCallback, useEffect, useState } from 'react'
+import { useDispatch } from 'react-redux'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { fetchOrganization } from '@qovery/domains/organization'
+import { ACCEPT_INVITATION_URL, LOGIN_URL, LOGOUT_URL } from '@qovery/shared/router'
+import { toastError } from '@qovery/shared/toast'
+import { AppDispatch } from '@qovery/store'
+import useAuth from '../use-auth/use-auth'
+
+const membersApi = new MembersApi()
+
+export function useInviteMember() {
+  const [displayInvitation, setDisplayInvitation] = useState(false)
+  const [organizationId, setOrganizationId] = useState<string>()
+  const [inviteId, setInviteId] = useState<string>()
+  const [inviteDetail, setInviteDetail] = useState<InviteMember | undefined>()
+  const { search, pathname } = useLocation()
+  const navigate = useNavigate()
+  const { getAccessTokenSilently } = useAuth()
+  const dispatch = useDispatch<AppDispatch>()
+
+  useEffect(() => {
+    const inviteToken = localStorage.getItem('inviteToken')
+
+    if (inviteToken) {
+      // avoid redirected conflict, we bypass the normal redirecting
+      localStorage.removeItem('redirectLoginUri')
+      setInviteId(inviteToken)
+      setOrganizationId(localStorage.getItem('inviteOrganizationId') || '')
+      setDisplayInvitation(true)
+    } else {
+      setDisplayInvitation(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    // check if inviteToken query param is present in URL
+    const urlParams = new URLSearchParams(search)
+    const inviteToken = urlParams.get('inviteToken')
+
+    if (inviteToken) {
+      localStorage.setItem('inviteToken', inviteToken)
+      setInviteId(inviteToken)
+
+      const organizationId = urlParams.get('organization')
+      if (organizationId) {
+        localStorage.setItem('inviteOrganizationId', organizationId)
+        setOrganizationId(organizationId)
+      }
+
+      // avoid redirected conflict, we bypass the normal redirecting
+      localStorage.removeItem('redirectLoginUri')
+      setDisplayInvitation(true)
+    }
+  }, [search, setOrganizationId, setInviteId, setDisplayInvitation])
+
+  useEffect(() => {
+    if (displayInvitation) {
+      if (pathname.indexOf(ACCEPT_INVITATION_URL) === -1 && pathname.indexOf(LOGIN_URL) === -1) {
+        navigate(ACCEPT_INVITATION_URL)
+      }
+    }
+  }, [pathname, displayInvitation, navigate])
+
+  const cleanInvitation = () => {
+    localStorage.removeItem('inviteOrganizationId')
+    localStorage.removeItem('inviteToken')
+    setInviteId(undefined)
+    setOrganizationId(undefined)
+  }
+
+  const acceptInvitation = async () => {
+    if (organizationId && inviteId)
+      try {
+        membersApi
+          .postAcceptInviteMember(organizationId, inviteId, {
+            data: {},
+          })
+          .then(async () => {
+            cleanInvitation()
+            try {
+              await getAccessTokenSilently({ ignoreCache: true })
+              dispatch(fetchOrganization())
+                .unwrap()
+                .then((value) => {
+                  window.location.assign(`/organization/${organizationId}`)
+                })
+            } catch (e) {
+              navigate(LOGOUT_URL)
+            }
+          })
+      } catch (e) {
+        setDisplayInvitation(false)
+        toastError(e as SerializedError, 'Invitation Member', 'The invitation can not be accepted')
+        cleanInvitation()
+        setTimeout(() => {
+          window.location.assign(`/`)
+        })
+      }
+  }
+
+  const fetchInvitationDetail = useCallback(async () => {
+    if (organizationId && inviteId) {
+      try {
+        const invitationDetails = await membersApi.getMemberInvitation(organizationId, inviteId)
+        setInviteDetail(invitationDetails.data)
+      } catch (e) {
+        setDisplayInvitation(false)
+        cleanInvitation()
+        toastError(e as SerializedError, 'Invitation Member', 'This member invitation is not correct')
+      }
+    }
+  }, [organizationId, inviteId])
+
+  return { displayInvitation, fetchInvitationDetail, acceptInvitation, cleanInvitation, inviteDetail }
+}

libs/shared/console-shared/src/index.ts

@@ -1,3 +1,5 @@
+export * from './lib/accept-invitation/ui/accept-invitation/accept-invitation'
+export * from './lib/invite-details/feature/invite-details-feature'
 export * from './lib/job-configure-settings/ui/job-configure-settings'
 export * from './lib/job-general-settings/ui/job-general-settings'
 export * from './lib/entrypoint-cmd-inputs/ui/entrypoint-cmd-inputs'
@@ -15,3 +17,4 @@ export * from './lib/flow-create-variable/ui/flow-create-variable/flow-create-va
 export * from './lib/create-general-git-application/ui/create-general-git-application'
 export * from './lib/git-repository-settings/feature/edit-git-repository-settings-feature/edit-git-repository-settings-feature'
 export * from './lib/create-project-modal/feature/create-project-modal-feature'
+export * from './lib/accept-invitation/feature/accept-invitation-feature'

libs/shared/console-shared/src/lib/accept-invitation/feature/accept-invitation-feature.spec.tsx

@@ -0,0 +1,9 @@
+import { render } from '__tests__/utils/setup-jest'
+import AcceptInvitationFeature from './accept-invitation-feature'
+
+describe('AcceptInvitationFeature', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<AcceptInvitationFeature />)
+    expect(baseElement).toBeTruthy()
+  })
+})

libs/shared/console-shared/src/lib/accept-invitation/feature/accept-invitation-feature.tsx

@@ -0,0 +1,14 @@
+import { useInviteMember } from '@qovery/shared/auth'
+import AcceptInvitation from '../ui/accept-invitation/accept-invitation'
+
+export function AcceptInvitationFeature() {
+  const { acceptInvitation } = useInviteMember()
+
+  const onSubmit = async () => {
+    await acceptInvitation()
+  }
+
+  return <AcceptInvitation onSubmit={onSubmit} />
+}
+
+export default AcceptInvitationFeature

libs/shared/console-shared/src/lib/accept-invitation/ui/accept-invitation/accept-invitation.spec.tsx

@@ -0,0 +1,9 @@
+import { render } from '__tests__/utils/setup-jest'
+import AcceptInvitation from './accept-invitation'
+
+describe('AcceptInvitation', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<AcceptInvitation onSubmit={jest.fn()} />)
+    expect(baseElement).toBeTruthy()
+  })
+})

libs/shared/console-shared/src/lib/accept-invitation/ui/accept-invitation/accept-invitation.tsx

@@ -0,0 +1,26 @@
+import { Button } from '@qovery/shared/ui'
+import InviteDetailsFeature from '../../../invite-details/feature/invite-details-feature'
+
+export interface AcceptInvitationProps {
+  onSubmit: () => void
+}
+
+export function AcceptInvitation(props: AcceptInvitationProps) {
+  return (
+    <div className="fixed inset-0 pt-7 bg-element-light-darker-300">
+      <img
+        className="w-[207px] shrink-0 block mx-auto mb-12"
+        src="assets/logos/logo-white.svg"
+        alt="Qovery logo white"
+      />
+      <div className="text-center bg-white rounded-xl p-6 max-w-[568px] mx-auto text-center">
+        <InviteDetailsFeature />
+        <Button className="items-center justify-center mt-2" onClick={() => props.onSubmit()}>
+          Accept
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default AcceptInvitation

libs/shared/console-shared/src/lib/invite-details/feature/invite-details-feature.spec.tsx

@@ -0,0 +1,9 @@
+import { render } from '__tests__/utils/setup-jest'
+import InviteDetailsFeature from './invite-details-feature'
+
+describe('InviteDetailsFeature', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<InviteDetailsFeature />)
+    expect(baseElement).toBeTruthy()
+  })
+})