[DEV-1334] Fix sign-up and confirm sign-up pages (#604)

pagopa · Feb 15, 2024 · 7322534 · 7322534
1 parent 2b18a30
commit 7322534
Show file tree

Hide file tree

Showing 8 changed files with 305 additions and 242 deletions.
diff --git a/.changeset/lazy-poets-melt.md b/.changeset/lazy-poets-melt.md
@@ -0,0 +1,5 @@
+---
+"nextjs-website": patch
+---
+
+Fix sign-up and confirm sign-up UI and UX
diff --git a/apps/nextjs-website/src/_contents/auth.ts b/apps/nextjs-website/src/_contents/auth.ts
@@ -0,0 +1,15 @@
+export const companyRoles = [
+  'ente-pubblico',
+  'partner-tecnologico',
+  'psp',
+  'gestore-di-pubblico-servizio',
+  'azienda-privata',
+  'altro',
+];
+
+export const signUpAdvantages = [
+  'exclusive_contents',
+  'product_updates',
+  'api_keys',
+  'support',
+];
diff --git a/apps/nextjs-website/src/_contents/translations.ts b/apps/nextjs-website/src/_contents/translations.ts
@@ -325,7 +325,7 @@ export const translations = {
       checkJunkMail:
         'Non hai ricevuto alcuna email? Controlla la posta indesiderata oppure',
       continue: 'Continua',
-      resendEmail: 'Reinvia e-mail',
+      resendEmail: 'Reinvia email',
     },
     accountActivated: {
       goToLogin: 'Vai al login',
@@ -383,7 +383,7 @@ export const translations = {
         `Abbiamo inviato una e-mail a ${email}. Clicca sul bottone contenuto al suo interno per verificarla.`,
       didntReceiveEmail:
         "Non hai ricevuto l'e-mail? Controlla se nella posta indesiderata oppure",
-      resendEmail: 'Reinvia e-mail',
+      resendEmail: 'Reinvia email',
       wrongEmail: "L'indirizzo email è errato?",
     },
     resetPassword: {
@@ -396,7 +396,7 @@ export const translations = {
         `Se esiste un account associato a ${email}, riceverai una e-mail con un link per impostare una nuova password.`,
       resendEmailPrompt:
         "Non hai ricevuto l'email? Controlla nella posta indesiderata oppure",
-      resendEmail: 'Reinvia e-mail',
+      resendEmail: 'Reinvia email',
       wrongEmail: "L'indirizzo e-mail è errato?",
       passwordSet: 'Password impostata correttamente',
       newPassword: 'Imposta una nuova password',

diff --git a/apps/nextjs-website/src/app/auth/sign-up/page.tsx b/apps/nextjs-website/src/app/auth/sign-up/page.tsx
@@ -1,37 +1,21 @@
 'use client';
-import { translations } from '@/_contents/translations';
 import CheckItem from '@/components/molecules/CheckItem/CheckItem';
 import ConfirmSignUp from '@/components/organisms/Auth/ConfirmSignUp';
 import SignUpForm from '@/components/organisms/Auth/SignUpForm';
 import { SignUpSteps } from '@/lib/types/signUpSteps';
-import {
-  Alert,
-  Box,
-  Grid,
-  Snackbar,
-  Typography,
-  useMediaQuery,
-} from '@mui/material';
+import { Box, Grid, Typography, useMediaQuery } from '@mui/material';
 import { Auth } from 'aws-amplify';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useCallback, useState } from 'react';
 import { SignUpUserData } from '@/lib/types/sign-up';
 import { useTranslations } from 'next-intl';
-import { snackbarAutoHideDurationMs } from '@/config';
-
-interface Info {
-  message: string;
-  isError: boolean;
-}
+import { signUpAdvantages } from '@/_contents/auth';
 
 const SignUp = () => {
-  const {
-    auth: { signUp },
-  } = translations;
-  const t = useTranslations('errors');
   const params = useSearchParams();
   const router = useRouter();
   const isSmallScreen = useMediaQuery('(max-width: 1000px)');
+  const signUp = useTranslations('auth.signUp');
 
   const [userData, setUserData] = useState<SignUpUserData>({
     username: decodeURIComponent(params.get('email') || ''),
@@ -48,7 +32,7 @@ const SignUp = () => {
     params.get('step') || SignUpSteps.SIGN_UP
   );
 
-  const [info, setInfo] = useState<Info | null>(null);
+  const [userAlreadyExist, setUserAlreadyExist] = useState(false);
 
   const goToConfirmSignUp = useCallback(() => {
     router.replace(
@@ -60,6 +44,7 @@ const SignUp = () => {
   }, [router, userData.username]);
 
   const onSignUp = useCallback(async () => {
+    setUserAlreadyExist(false);
     const {
       company,
       firstName,
@@ -82,12 +67,11 @@ const SignUp = () => {
         'custom:company_type': company,
       },
     }).catch((error) => {
-      if (error.code.includes('UsernameExistsException')) {
-        setInfo({ message: t(error.code), isError: true });
-        goToConfirmSignUp();
-        return true;
+      if (error.code === 'UsernameExistsException') {
+        setUserAlreadyExist(true);
+      } else {
+        setUserAlreadyExist(false);
       }
-      setInfo({ message: t(error.code), isError: true });
       return false;
     });
 
@@ -97,7 +81,7 @@ const SignUp = () => {
       goToConfirmSignUp();
       return !!result.user;
     }
-  }, [userData, t, goToConfirmSignUp]);
+  }, [userData, goToConfirmSignUp]);
 
   const onBackStep = useCallback(() => {
     router.replace(
@@ -133,14 +117,17 @@ const SignUp = () => {
         >
           <Grid item xs={isSmallScreen ? 1 : 5}>
             <Typography variant='h6' mb={4} mt={isSmallScreen ? 10 : 0}>
-              {signUp.whyCreateAccount}
+              {signUp('whyCreateAccount')}
             </Typography>
-            {signUp.advantages.map((advantage, index) => {
+            {signUpAdvantages.map((advantage, index) => {
               return (
                 <CheckItem
                   key={index}
-                  title={advantage.title}
-                  description={advantage.text}
+                  title={signUp(`advantages.${advantage}.title`)}
+                  description={signUp(`advantages.${advantage}.text`)}
+                  isComingSoon={
+                    signUp(`advantages.${advantage}.isComingSoon`) === 'true'
+                  }
                 />
               );
             })}
@@ -151,6 +138,7 @@ const SignUp = () => {
                 userData={userData}
                 setUserData={setUserData}
                 onSignUp={onSignUp}
+                userAlreadyExist={userAlreadyExist}
               />
             )}
             {signUpStep === SignUpSteps.CONFIRM_SIGN_UP && (
@@ -159,15 +147,6 @@ const SignUp = () => {
           </Grid>
         </Grid>
       </Box>
-      <Snackbar
-        open={!!info}
-        autoHideDuration={snackbarAutoHideDurationMs}
-        onClose={() => setInfo(null)}
-      >
-        <Alert severity={info?.isError ? 'error' : 'success'}>
-          {info?.message}
-        </Alert>
-      </Snackbar>
     </>
   );
 };

diff --git a/apps/nextjs-website/src/components/molecules/CheckItem/CheckItem.tsx b/apps/nextjs-website/src/components/molecules/CheckItem/CheckItem.tsx
@@ -1,13 +1,16 @@
 'use client';
 import { CheckCircle } from '@mui/icons-material';
-import { Grid, Typography, useTheme } from '@mui/material';
+import { Box, Chip, Grid, Typography, useTheme } from '@mui/material';
+import { useTranslations } from 'next-intl';
 
 interface CheckItemProps {
   title: string;
   description: string;
+  isComingSoon: boolean;
 }
 
-const CheckItem = ({ title, description }: CheckItemProps) => {
+const CheckItem = ({ title, description, isComingSoon }: CheckItemProps) => {
+  const shared = useTranslations('shared');
   const { palette } = useTheme();
 
   return (
@@ -16,6 +19,18 @@ const CheckItem = ({ title, description }: CheckItemProps) => {
         <CheckCircle sx={{ fontSize: 40, color: palette.info.extraLight }} />
       </Grid>
       <Grid item xs={10}>
+        <Box>
+          {isComingSoon && (
+            <Chip
+              label={shared('comingSoon')}
+              size='small'
+              sx={{
+                color: palette.text.secondary,
+                backgroundColor: palette.grey[200],
+              }}
+            />
+          )}
+        </Box>
         <Typography
           variant='overline'
           content='div'

diff --git a/apps/nextjs-website/src/components/organisms/Auth/ConfirmSignUp.tsx b/apps/nextjs-website/src/components/organisms/Auth/ConfirmSignUp.tsx
@@ -1,5 +1,4 @@
 'use client';
-import { translations } from '@/_contents/translations';
 import IconInbox from '@/components/atoms/IconInbox/IconInbox';
 import {
   Box,
@@ -11,17 +10,16 @@ import {
   Link,
 } from '@mui/material';
 import ResendEmail from '@/components/molecules/ResendEmail/ResendEmail';
+import { useTranslations } from 'next-intl';
 
 interface ConfirmSignUpProps {
   email: string;
   onBack: () => null;
 }
 
 const ConfirmSignUp = ({ email, onBack }: ConfirmSignUpProps) => {
-  const {
-    auth: { confirmSignUp },
-    shared,
-  } = translations;
+  const confirmSignUp = useTranslations('auth.confirmSignUp');
+  const shared = useTranslations('shared');
 
   return (
     <Box component='section'>
@@ -32,12 +30,20 @@ const ConfirmSignUp = ({ email, onBack }: ConfirmSignUpProps) => {
               <IconInbox />
             </Stack>
             <Typography variant='h4' pt={5} mb={4} textAlign='center'>
-              {confirmSignUp.confirmSignUp}
+              {confirmSignUp('title')}
             </Typography>
             <Typography variant='body2' mb={2}>
-              {confirmSignUp.description(email)}
+              {confirmSignUp('emailSent')}
+              <Box component='span' fontWeight='fontWeightMedium'>
+                {email}
+              </Box>
+              <br />
+              {confirmSignUp('clickToConfirm')}
             </Typography>
-            <ResendEmail email={email} text={confirmSignUp.didntReceiveEmail} />
+            <ResendEmail
+              email={email}
+              text={confirmSignUp('didntReceiveEmail')}
+            />
             <Divider />
             <Stack
               pt={4}
@@ -48,14 +54,14 @@ const ConfirmSignUp = ({ email, onBack }: ConfirmSignUpProps) => {
               flexDirection='row'
             >
               <Typography variant='body1' mr={1}>
-                {confirmSignUp.wrongEmail}
+                {confirmSignUp('wrongEmail')}
               </Typography>
               <Link
                 variant='body2'
                 onClick={onBack}
                 sx={{ fontWeight: 600, cursor: 'pointer' }}
               >
-                {shared.goBack}
+                {shared('goBack')}
               </Link>
             </Stack>
           </Grid>