fix: add changes for mobile register

package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
-    "@graasp/query-client": "1.2.0",
+    "@graasp/query-client": "1.3.2",
     "@graasp/sdk": "1.2.0",
     "@graasp/translations": "1.15.1",
     "@graasp/ui": "3.2.7",

src/components/App.tsx

@@ -1,8 +1,14 @@
 import * as Sentry from '@sentry/react';
 import { Route, BrowserRouter as Router, Routes } from 'react-router-dom';
 
-import { HOME_PATH, SIGN_UP_PATH, buildSignInPath } from '../config/paths';
+import {
+  HOME_PATH,
+  MOBILE_AUTH_PATH,
+  SIGN_IN_PATH,
+  SIGN_UP_PATH,
+} from '../config/paths';
 import ErrorFallback from './ErrorFallback';
+import MobileAuth from './MobileAuth';
 import Redirection from './Redirection';
 import SignIn from './SignIn';
 import SignUp from './SignUp';
@@ -12,9 +18,10 @@ const App = () => (
     <Router>
       <Redirection>
         <Routes>
-          <Route path={buildSignInPath()} element={<SignIn />} />
+          <Route path={SIGN_IN_PATH} element={<SignIn />} />
           <Route path={SIGN_UP_PATH} element={<SignUp />} />
           <Route path={HOME_PATH} element={<SignIn />} />
+          <Route path={MOBILE_AUTH_PATH} element={<MobileAuth />} />
         </Routes>
       </Redirection>
     </Router>

src/components/MobileAuth.tsx

@@ -0,0 +1,56 @@
+import { Link } from 'react-router-dom';
+
+import { Android, Apple, DeviceUnknown } from '@mui/icons-material';
+import { Button, Stack, Typography } from '@mui/material';
+
+import { HOME_PATH } from '../config/paths';
+import FullscreenContainer from './FullscreenContainer';
+
+const MobileAuth = (): JSX.Element => {
+  return (
+    <FullscreenContainer>
+      <Stack
+        justifyContent="center"
+        alignItems="center"
+        direction="column"
+        spacing={2}
+      >
+        <DeviceUnknown fontSize="large" color="primary" />
+        <Typography>
+          It looks like you requested a mobile link but you do not have our app
+          installed on this device.
+        </Typography>
+        <Button component={Link} to={''} variant="contained">
+          <Stack
+            direction="column"
+            alignItems="center"
+            justifyContent="center"
+            px={1}
+            py={{ xs: 1, sm: 2 }}
+            textTransform="none"
+          >
+            <Apple />
+            <Typography>Get from the Apple App Store</Typography>
+          </Stack>
+        </Button>
+        <Button component={Link} to={''} variant="contained">
+          <Stack
+            direction="column"
+            alignItems="center"
+            justifyContent="center"
+            px={1}
+            py={{ xs: 1, sm: 2 }}
+            textTransform="none"
+          >
+            <Android />
+            <Typography>Get from the Google Play Store</Typography>
+          </Stack>
+        </Button>
+        <Typography component={Link} to={HOME_PATH} variant="caption">
+          Go back Home
+        </Typography>
+      </Stack>
+    </FullscreenContainer>
+  );
+};
+export default MobileAuth;

src/components/SignIn.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 
 import { RecaptchaAction } from '@graasp/sdk';
 import { AUTH } from '@graasp/translations';
@@ -45,6 +45,7 @@ const SignIn: FC = () => {
   const { executeCaptcha } = useRecaptcha();
 
   const { isMobile, challenge } = useMobileLogin();
+  const { search } = useLocation();
 
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
@@ -210,7 +211,7 @@ const SignIn: FC = () => {
           )}
         </Stack>
       </FormControl>
-      <Link to={SIGN_UP_PATH}>{t(SIGN_UP_LINK_TEXT)}</Link>
+      <Link to={`${SIGN_UP_PATH}${search}`}>{t(SIGN_UP_LINK_TEXT)}</Link>
     </>
   );
 

src/components/SignUp.tsx

@@ -1,5 +1,5 @@
 import { ChangeEventHandler, useEffect, useState } from 'react';
-import { Link, useSearchParams } from 'react-router-dom';
+import { Link, useLocation, useSearchParams } from 'react-router-dom';
 
 import { RecaptchaAction } from '@graasp/sdk';
 import { AUTH } from '@graasp/translations';
@@ -9,8 +9,8 @@ import { Stack } from '@mui/material';
 import FormControl from '@mui/material/FormControl';
 import Typography from '@mui/material/Typography';
 
+import { SIGN_IN_PATH } from '../config/constants';
 import { useAuthTranslation } from '../config/i18n';
-import { buildSignInPath } from '../config/paths';
 import { hooks, mutations } from '../config/queryClient';
 import {
   EMAIL_SIGN_UP_FIELD_ID,
@@ -19,6 +19,7 @@ import {
   SIGN_UP_HEADER_ID,
 } from '../config/selectors';
 import { useRecaptcha } from '../context/RecaptchaContext';
+import { useMobileLogin } from '../hooks/mobile';
 import { emailValidator, nameValidator } from '../utils/validation';
 import EmailInput from './EmailInput';
 import FullscreenContainer from './FullscreenContainer';
@@ -32,6 +33,8 @@ const SignUp = () => {
   const { t } = useAuthTranslation();
   const { executeCaptcha } = useRecaptcha();
 
+  const { isMobile, challenge } = useMobileLogin();
+
   const [email, setEmail] = useState<string>('');
   const [name, setName] = useState<string>('');
   const [nameError, setNameError] = useState<string | null>(null);
@@ -41,7 +44,10 @@ const SignUp = () => {
 
   const { mutateAsync: signUp, isSuccess: signUpSuccess } =
     mutations.useSignUp();
+  const { mutateAsync: mobileSignUp, isSuccess: mobileSignUpSuccess } =
+    mutations.useMobileSignUp();
   const [searchParams] = useSearchParams();
+  const { search } = useLocation();
 
   const {
     data: invitation,
@@ -78,12 +84,21 @@ const SignUp = () => {
       setNameError(checkingUsername);
       setShouldValidate(true);
     } else {
-      const token = await executeCaptcha(RecaptchaAction.SignUp);
-      await signUp({
-        name: name.trim(),
-        email: lowercaseEmail,
-        captcha: token,
-      });
+      const token = await executeCaptcha(
+        isMobile ? RecaptchaAction.SignUpMobile : RecaptchaAction.SignUp,
+      );
+      await (isMobile
+        ? mobileSignUp({
+            name: name.trim(),
+            email: lowercaseEmail,
+            captcha: token,
+            challenge,
+          })
+        : signUp({
+            name: name.trim(),
+            email: lowercaseEmail,
+            captcha: token,
+          }));
       setSuccessView(true);
     }
   };
@@ -119,13 +134,13 @@ const SignUp = () => {
           </Button>
         </Stack>
       </FormControl>
-      <Link to={buildSignInPath()}>{t(SIGN_IN_LINK_TEXT)}</Link>
+      <Link to={`${SIGN_IN_PATH}${search}`}>{t(SIGN_IN_LINK_TEXT)}</Link>
     </>
   );
 
   return (
     <FullscreenContainer>
-      {signUpSuccess && successView ? (
+      {(signUpSuccess || mobileSignUpSuccess) && successView ? (
         <SuccessContent
           title={t(AUTH.SIGN_UP_SUCCESS_TITLE)}
           email={email}

src/config/paths.ts

@@ -1,7 +1,4 @@
-import qs from 'qs';
-
-export const buildSignInPath = (to?: string) =>
-  `/signin${qs.stringify({ to }, { addQueryPrefix: true })}`;
+export const SIGN_IN_PATH = '/signin';
 export const SIGN_UP_PATH = '/signup';
 export const HOME_PATH = '/';
-export const SIGN_IN_PATH = '/signin';
+export const MOBILE_AUTH_PATH = '/auth';