diff --git a/package.json b/package.json index 43c6573ee..ffa0e39e9 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,7 @@ "version": "0.2.0", "private": true, "dependencies": { - "@appquality/appquality-design-system": "^1.0.62", + "@appquality/appquality-design-system": "^1.0.67", "@appquality/craft-blocks": "^0.1.27", "@datadog/browser-logs": "^3.4.1", "@reduxjs/toolkit": "^1.8.2", diff --git a/src/Page.tsx b/src/Page.tsx index 6705cf223..9d5cb261b 100644 --- a/src/Page.tsx +++ b/src/Page.tsx @@ -57,152 +57,154 @@ function Page() { return ( - - - - - - - - - - +
+ + + + + + + + + + - + - ( - - )} - /> + ( + + )} + /> - + - - ( - - )} - /> - ( - - )} - /> + + ( + + )} + /> + ( + + )} + /> - - - - - - + + + + + + - - - - ( - - )} - /> - ( - - )} - /> - ( - - )} - /> - ( - - )} - /> + + + + ( + + )} + /> + ( + + )} + /> + ( + + )} + /> + ( + + )} + /> - - - - - - {/* TODO Temporary route */} - - - } - /> - - + + + + + + {/* TODO Temporary route */} + + + } + /> + + +
); } diff --git a/src/features/LangMenu.tsx b/src/features/LangMenu.tsx index 5043bfebd..5064a1083 100644 --- a/src/features/LangMenu.tsx +++ b/src/features/LangMenu.tsx @@ -3,7 +3,7 @@ import styled from "styled-components"; import { BaseProps } from "@appquality/appquality-design-system/dist/shared/_types"; -const StyledMenu = styled.div` +const StyledMenu = styled.nav` color: ${(props) => props.theme.palette.primary}; min-height: 24px; text-align: right; @@ -17,6 +17,16 @@ const StyledMenu = styled.div` pointer-events: none; } } + li { + display: inline-block; + margin: 0; + padding: 0; + &:not(:last-child) a { + margin-right: 0.4em; + padding-right: 0.4em; + border-right: 1px solid ${(props) => props.theme.palette.primary}; + } + } `; interface LangMenuProps extends BaseProps { @@ -31,32 +41,60 @@ export const LangMenu = ({ esLink, className, }: LangMenuProps) => { - const { i18n } = useTranslation(); + const { i18n, t } = useTranslation(); return ( - - - Italiano - {" "} - |{" "} - - English - {" "} - |{" "} - - Español - + + + {t("Language switcher menu")} + + ); }; diff --git a/src/features/LoginForm/LoginFields.tsx b/src/features/LoginForm/LoginFields.tsx index bfc852b88..6b9f65e5a 100644 --- a/src/features/LoginForm/LoginFields.tsx +++ b/src/features/LoginForm/LoginFields.tsx @@ -83,7 +83,7 @@ const LoginFields = ({ cta, error }: LoginFieldsProps) => { {t("or log in with email and password")} -
+
{error && {error}}
diff --git a/src/features/SiteWideMessages.tsx b/src/features/SiteWideMessages.tsx index 15be42947..cbc6f0397 100644 --- a/src/features/SiteWideMessages.tsx +++ b/src/features/SiteWideMessages.tsx @@ -2,6 +2,7 @@ import { Toastr, BSGrid } from "@appquality/appquality-design-system"; import { TransitionGroup, CSSTransition } from "react-transition-group"; import siteWideMessageStore from "../redux/siteWideMessages"; import styled from "styled-components"; +import { useTranslation } from "react-i18next"; const TIMEOUT = 200; const ToastrContainer = styled.div` @@ -38,7 +39,7 @@ const ToastrContainer = styled.div` const SiteWideMessages = () => { const { messages, remove } = siteWideMessageStore(); - + const { t } = useTranslation(); return ( @@ -47,6 +48,13 @@ const SiteWideMessages = () => { remove({ uuid: m.uuid })} > diff --git a/src/locales/en/links.json b/src/locales/en/links.json index 0f4393a75..0827bad83 100644 --- a/src/locales/en/links.json +++ b/src/locales/en/links.json @@ -1,8 +1,11 @@ { + "/ethical-code/": "/ethical-code/", "/payment_conditions": "https://app.tryber.me/payment-conditions/", + "/terms-and-conditions/": "/terms-and-conditions/", "Bug details help article": "https://app.tryber.me/bug-reporting-rules/", "Fiscal type help article": "https://app.tryber.me/it/per-saperne-di-piu-pagamenti-privacy/", "Ranking help article": "https://app.tryber.me/tryber-new-ranking-rules-2022-edition/", "Wallet help article": "https://app.tryber.me/wallet-how-does-it-work/", + "https://www.iubenda.com/privacy-policy/7934311": "https://www.iubenda.com/privacy-policy/7934311", "tax id help article": "https://app.tryber.me/whats-tax-id-number/" } diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 9fb0687ea..be6e0f2c0 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -1,7 +1,6 @@ { "...wait": "Loading", "/discover-experience-points/": "/discover-experience-points/", - "/ethical-code/": "", "/faq/": "/faq/", "/my-account/": "/my-account/", "/terms-and-conditions/": "/terms-and-conditions/", @@ -204,13 +203,14 @@ "Confirm email": "Confirm email", "Confirm password": "Confirm password", "Connect AppQuality to one of your accounts, this will make it easier for you to access your dashboard": "Connect Tryber to one of your accounts, this will make it easier for you to access your dashboard", - "Continue with Facebook": "", - "Continue with LinkedIn": "", + "Continue with Facebook": "Continue with Facebook", + "Continue with LinkedIn": "Continue with LinkedIn", "Continue with email": "Continue with email", "Countries covered": "Countries covered", "Courses": "Courses", "Create an account": "Create an account", "Create your account": "Create your account", + "Current Page": "Current Page", "Current password": "Current password", "DATE_OF_BIRTH": { "BitrhdayPicker": "Date of birth", @@ -309,6 +309,7 @@ "Invalid tax profile.": "Invalid tax profile.", "Keep": "Keep", "Language": "Language", + "Language switcher menu": "Language switcher menu", "Last Name": "Last Name", "Leaderboard": "Ranking", "Learn More": "Learn More", @@ -320,7 +321,7 @@ "Hide password": "Hide password", "Show password": "Show password" }, - "MAIL_SIGNUP_TERMS_DISCLAIMER": "", + "MAIL_SIGNUP_TERMS_DISCLAIMER": "By signing up, you also accept the the Terms, Privacy Policy and Ethical Code of tryber.me", "MODAL_PAYMENT_STEP_TITLE": { "Confirm": "Confirm", "Get email": "Get email", @@ -460,7 +461,7 @@ "Should be exactly 16 characters": "Should be exactly 16 characters", "Signup for Tryber": "Signup for Tryber", "Signup now": "Signup now", - "Signup success": "", + "Signup success": "You’re a Tryber now", "Something went wrong": "Something went wrong", "Spoken languages": "Spoken languages", "Start Date": "Start Date", @@ -474,6 +475,13 @@ "Street N°": "Street N°", "Submitted bugs": "Submitted bugs", "Surname": "Surname", + "TOASTR_LABEL": { + "Close dialog": "Close", + "Error": "Error", + "Info": "Info", + "Success": "Success", + "Warning": "Warning" + }, "Take me to the dashboard": "Let the adventure begin", "Take part in the Basic Course and earn 200 experience points, they will be essential to increase the chances to be selected for the campaigns. You'll become an AppQuality world expert and you will receive the Linkedin Certification to show that you are a qualified member of the Community.": "Everything starts from here: only after completing the Basic TRYBER Course you will be eligible for the campaigns. And that is not all, you'll earn 200 experience points, get an overview of the world of TRYBER, be part of qualified members and receive a certification that you can share on LinkedIn. ", "Tax identification number": { @@ -558,7 +566,7 @@ "You need to select a street": "You need to select a street", "You need to select a street code": "You need to select a street code", "You need to select a zip code": "You need to select a zip code", - "You need to set your two-factor authentication for this. Redirecting to the login page": "", + "You need to set your two-factor authentication for this. Redirecting to the login page": "You need to set your two-factor authentication for this. Redirecting to the login page", "You're a Tryber now": "You're a Tryber now", "Your Performance": "Your Performance", "Your current password is not correct": "Your current password is not correct", @@ -769,7 +777,7 @@ "not in ranking": { "__RANKING_POSITION_NOLeVEL_MAX: 30": "No level" }, - "or log in with email and password": "", + "or log in with email and password": "or log in with email and password", "or you can": "or you can", "redirecting": "redirecting", "social": "social", @@ -787,10 +795,6 @@ }, "All your certifications were successfully removed": "All your certifications were successfully removed", "There was an error removing your certifications": "There was an error removing your certifications", - "API_ERROR_MESSAGE::Click on \"Sign up\" and try again.": "", - "API_ERROR_MESSAGE::Something went wrong": "", - "Click on \"Sign up\" and try again.": "", - "Invalid date": "", "Sign up": "Sign up", "available tags , and ": { "DISCLAIMER_SIGNUP_PAGE": "By signing up, you accept the Terms, Privacy Policy and Ethical Code and you agree to receive email for the TRYBER community." @@ -798,16 +802,11 @@ "name": "Name", "Welcome aboard!": "Welcome aboard!", "Welcome signup message": "We have sent you a welcome email to the address you used in the sign up process. Now it’s time to explore the TRYBER universe: choose among our University courses, apply for test campaigns and join our community!", - "Ethical Code": "", - "Log in": "", - "Privacy Policy": "", - "Terms and Conditions": "", "Login": "Already a Tryber? Log in", "New to TRYBER? <1>Sign up": "New to TRYBER? <1>Sign up", "or login with": "or login with", "login with your credentials": "login with your credentials", "or <1>create an account": "or <1>create an account", - "login-page-title": "", "__WALLET_MODAL-REQUEST_FISCAL-TYPE_INVALID MAX: 20": "VAT registred or more than € 5,000 gross / year with occasional services", "__WALLET_MODAL-REQUEST_FISCAL-TYPE_NON_ITALIAN MAX: 20": "other (not Italian)", "__WALLET_MODAL-REQUEST_FISCAL-TYPE_WITHHOLDING MAX: 20": "less than € 5,000 gross / year with occasional services", diff --git a/src/locales/es/links.json b/src/locales/es/links.json index 563a62762..6670f12f6 100644 --- a/src/locales/es/links.json +++ b/src/locales/es/links.json @@ -1,8 +1,11 @@ { + "/ethical-code/": "/ethical-code/", "/payment_conditions": "https://app.tryber.me/es/condiciones-de-pago/", + "/terms-and-conditions/": "/terms-and-conditions/", "Bug details help article": "https://app.tryber.me/es/reglas-para-reportar-un-bug/", "Fiscal type help article": "https://www.app.tryber.me/it/per-saperne-di-piu-pagamenti-privacy/", "Ranking help article": "https://app.tryber.me/es/nuevas-reglas-de-clasificacion-de-tryber-edicion-2022/", "Wallet help article": "https://app.tryber.me/es/monedero-como-funciona/", + "https://www.iubenda.com/privacy-policy/7934311": "https://www.iubenda.com/privacy-policy/7934311", "tax id help article": "https://app.tryber.me/es/que-es-el-tax-id/" } diff --git a/src/locales/es/translation.json b/src/locales/es/translation.json index 791f622a6..1f948b588 100644 --- a/src/locales/es/translation.json +++ b/src/locales/es/translation.json @@ -1,7 +1,6 @@ { "...wait": "Cargando...", "/discover-experience-points/": "/es/puntos-de-experiencia-que-son/", - "/ethical-code/": "", "/faq/": "/es/faq-es/", "/my-account/": "/perfil/", "/terms-and-conditions/": "/terms-and-conditions/", @@ -211,6 +210,7 @@ "Courses": "Cursos", "Create an account": "Crear una cuenta", "Create your account": "Crea una cuenta", + "Current Page": "Página Actual", "Current password": "Password actual", "DATE_OF_BIRTH": { "BitrhdayPicker": "Fecha de nacimiento", @@ -309,6 +309,7 @@ "Invalid tax profile.": "Perfil fiscal inválido", "Keep": "Mantener", "Language": "Idioma", + "Language switcher menu": "Menú de Cambio de Idioma", "Last Name": "Apellido", "Leaderboard": "Clasificación", "Learn More": "Saber Más", @@ -320,7 +321,7 @@ "Hide password": "Contraseña oculta", "Show password": "Mostrar contraseña" }, - "MAIL_SIGNUP_TERMS_DISCLAIMER": "", + "MAIL_SIGNUP_TERMS_DISCLAIMER": "Al inscribirte, aceptas los Términos de uso, la Política de privacidad y el Código ético", "MODAL_PAYMENT_STEP_TITLE": { "Confirm": "Confirmación", "Get email": "Recibe correo", @@ -460,7 +461,7 @@ "Should be exactly 16 characters": "Debe tener exactamente 16 caracteres", "Signup for Tryber": "Regístrate en TRYBER", "Signup now": "Regístrese ahora", - "Signup success": "", + "Signup success": "Ora fai parte di TRYBER", "Something went wrong": "Parece que algo salió mal", "Spoken languages": "Idiomas hablados", "Start Date": "Fecha de Inicio", @@ -474,6 +475,13 @@ "Street N°": "Número de casa", "Submitted bugs": "Bugs enviados", "Surname": "Apellido(s)", + "TOASTR_LABEL": { + "Close dialog": "Cerrar diálogo", + "Error": "Error", + "Info": "Información", + "Success": "Éxito", + "Warning": "Advertencia" + }, "Take me to the dashboard": "Que empiece la aventura", "Take part in the Basic Course and earn 200 experience points, they will be essential to increase the chances to be selected for the campaigns. You'll become an AppQuality world expert and you will receive the Linkedin Certification to show that you are a qualified member of the Community.": "Todo comienza aquí: solo cuando hayas completado el Curso Básico TRYBER te invitaremos a partecipar en las campañas. Además, ganarás 200 puntos de experiencia, conocerás el mundo de TRYBER, te convertirás en un miembro cualificado y recibirás una certificación que podrás compartir en LinkedIn.", "Tax identification number": { @@ -558,7 +566,7 @@ "You need to select a street": "Necesitas seleccionar una calle", "You need to select a street code": "Necesitas seleccionar un código de calle", "You need to select a zip code": "Es necesario seleccionar un código postal", - "You need to set your two-factor authentication for this. Redirecting to the login page": "", + "You need to set your two-factor authentication for this. Redirecting to the login page": "Necesitas configurar tu autenticación de dos factores para esto. Redirigiendo a la página de inicio de sesión", "You're a Tryber now": "Ya eres parte de TRYBER", "Your Performance": "Tu Performance", "Your current password is not correct": "Tu password actual no es correcta", @@ -787,10 +795,6 @@ }, "All your certifications were successfully removed": "Todas tus certificaciones fueron eliminadas con éxito", "There was an error removing your certifications": "Hubo un error al eliminar tsu certificaciones", - "API_ERROR_MESSAGE::Click on \"Sign up\" and try again.": "", - "API_ERROR_MESSAGE::Something went wrong": "", - "Click on \"Sign up\" and try again.": "", - "Invalid date": "", "Sign up": "Regístrate ahora", "available tags , and ": { "DISCLAIMER_SIGNUP_PAGE": "Al inscribirte, aceptas los Términos de uso, la Política de privacidad y el Código ético y recibir correos para la comunidad de TRYBER." @@ -798,20 +802,12 @@ "Back": "Atrás", "Country": "País de residencia", "name": "Nombre", - "Date of birth": "Fecha de nacimiento", - "Date of birth (dd/mm/yyyy)": "", "Welcome aboard!": "¡Te damos la bienvenida a bordo!", "Welcome signup message": "Te hemos enviado un correo de bienvenida a la dirección que indicaste durante la registración. Descubre el universo TRYBER: elige entre los cursos de Tryber University, apúntate a las campañas de test y toma parte en la comunidad.", - "Ethical Code": "", - "Log in": "", - "Privacy Policy": "", - "Terms and Conditions": "", "Login": "¿Ya eres un Tryber? Iniciar sesión", - "New to TRYBER? <1>Sign up": "", "or login with": "o inicie sesión con", "login with your credentials": "Inicia sesión con tus credenciales", "or <1>create an account": "o <1>crear una cuenta", - "login-page-title": "", "__WALLET_MODAL-REQUEST_FISCAL-TYPE_INVALID MAX: 20": "IVA registrado o más de 5.000 brutos € / año con servicios ocasionales", "__WALLET_MODAL-REQUEST_FISCAL-TYPE_NON_ITALIAN MAX: 20": "otro (no italiano)", "__WALLET_MODAL-REQUEST_FISCAL-TYPE_WITHHOLDING MAX: 20": "menos de 5.000 brutos € / año con servicios ocasionales", diff --git a/src/locales/it/links.json b/src/locales/it/links.json index 333631ee0..bc09f0438 100644 --- a/src/locales/it/links.json +++ b/src/locales/it/links.json @@ -1,8 +1,11 @@ { + "/ethical-code/": "/ethical-code/", "/payment_conditions": "https://app.tryber.me/it/condizioni-di-pagamento/", + "/terms-and-conditions/": "/it/termini-e-condizioni/", "Bug details help article": "https://app.tryber.me/it/regole-di-scrittura-dei-bug/", "Fiscal type help article": "https://app.tryber.me/it/per-saperne-di-piu-pagamenti-privacy/", "Ranking help article": "https://app.tryber.me/it/regolamento-della-nuova-classifica-di-tryber-edizione-2022/", "Wallet help article": "https://app.tryber.me/it/portafoglio-come-funziona/", + "https://www.iubenda.com/privacy-policy/7934311": "https://www.iubenda.com/privacy-policy/7934311", "tax id help article": "https://app.tryber.me/it/cosa-e-il-codice-fiscale/" } diff --git a/src/locales/it/translation.json b/src/locales/it/translation.json index 62759a09e..bbc19847f 100644 --- a/src/locales/it/translation.json +++ b/src/locales/it/translation.json @@ -1,7 +1,6 @@ { "...wait": "Un momento...", "/discover-experience-points/": "/it/come-funzionano-i-punti-esperienza/", - "/ethical-code/": "", "/faq/": "/it/domande-frequenti/", "/my-account/": "/it/il-mio-account/", "/terms-and-conditions/": "/it/termini-e-condizioni/", @@ -211,6 +210,7 @@ "Courses": "Corsi", "Create an account": "Crea un account", "Create your account": "Crea un nuovo account", + "Current Page": "Pagina Corrente", "Current password": "Password attuale", "DATE_OF_BIRTH": { "BitrhdayPicker": "Data di nascita", @@ -309,6 +309,7 @@ "Invalid tax profile.": "Profilo fiscale invalido", "Keep": "Mantieni", "Language": "Lingua", + "Language switcher menu": "Menu Cambio Lingua", "Last Name": "Cognome", "Leaderboard": "Classifica", "Learn More": "Scopri di più", @@ -320,7 +321,7 @@ "Hide password": "Nascondi password", "Show password": "Mostra password" }, - "MAIL_SIGNUP_TERMS_DISCLAIMER": "", + "MAIL_SIGNUP_TERMS_DISCLAIMER": "Quando ti iscrivi, accetti inoltre i Termini di utilizzo, la Privacy Policy e il Codice Etico di Tryber. ", "MODAL_PAYMENT_STEP_TITLE": { "Confirm": "Conferma", "Get email": "Ricevi email", @@ -460,7 +461,7 @@ "Should be exactly 16 characters": "Deve contenere esattamente 16 caratteri", "Signup for Tryber": "Iscriviti a TRYBER", "Signup now": "Iscriviti ora", - "Signup success": "", + "Signup success": "Ya eres parte de TRYBER", "Something went wrong": "È successo qualcosa", "Spoken languages": "Lingue parlate", "Start Date": "Inizio", @@ -474,6 +475,13 @@ "Street N°": "Numero civico", "Submitted bugs": "Bug caricati", "Surname": "Cognome", + "TOASTR_LABEL": { + "Close dialog": "Chiudi finestra di dialogo", + "Error": "Errore", + "Info": "Informazione", + "Success": "Successo", + "Warning": "Avviso" + }, "Take me to the dashboard": "Comincia l'avventura", "Take part in the Basic Course and earn 200 experience points, they will be essential to increase the chances to be selected for the campaigns. You'll become an AppQuality world expert and you will receive the Linkedin Certification to show that you are a qualified member of the Community.": "Tutto parte da qui: solo quando avrai completato il Corso Base TRYBER ti inviteremo a partecipare alle campagne. In più guadagnerai 200 punti esperienza, avrai una panoramica del mondo di TRYBER, farai parte dei membri qualificati e riceverai una certificazione che potrai condividere su LinkedIn.", "Tax identification number": { @@ -558,7 +566,7 @@ "You need to select a street": "Devi selezionare una strada", "You need to select a street code": "Devi selezionare un codice stradale", "You need to select a zip code": "Devi selezionare un CAP", - "You need to set your two-factor authentication for this. Redirecting to the login page": "", + "You need to set your two-factor authentication for this. Redirecting to the login page": "È necessario impostare l'autenticazione a due fattori per questo. Reindirizzamento alla pagina di accesso", "You're a Tryber now": "Ora fai parte di TRYBER", "Your Performance": "Le tue Statistiche", "Your current password is not correct": "La tua password attuale non è corretta", @@ -787,10 +795,6 @@ }, "All your certifications were successfully removed": "Tutte le tue certificazioni sono state rimosse con successo", "There was an error removing your certifications": "Si è presentato un errore nella rimozione delle tue certificazioni", - "API_ERROR_MESSAGE::Click on \"Sign up\" and try again.": "", - "API_ERROR_MESSAGE::Something went wrong": "", - "Click on \"Sign up\" and try again.": "", - "Invalid date": "", "Sign up": "Iscriviti ora", "available tags , and ": { "DISCLAIMER_SIGNUP_PAGE": "Quando ti iscrivi, accetti i Termini di utilizzo, la Privacy Policy e il Codice Etico e di ricevere email per la community di TRYBER." @@ -800,15 +804,10 @@ "name": "Nome", "Welcome aboard!": "È bello averti tra noi", "Welcome signup message": "Ti abbiamo inviato una email di benvenuto all’indirizzo che hai indicato durante la registrazione. Scopri l’universo di TRYBER: scegli tra i corsi della nostra University, candidati a campagne di test e prendi parte alla community.", - "Ethical Code": "", - "Log in": "", - "Privacy Policy": "", - "Terms and Conditions": "", "Login": "Già dei nostri? Accedi", "or login with": "o accedi con", "login with your credentials": "accedi con le tue credenziali", "or <1>create an account": "o <1>crea un account", - "login-page-title": "", "__WALLET_MODAL-REQUEST_FISCAL-TYPE_INVALID MAX: 20": "partita IVA o più di € 5,000 lordi / anno con prestazioni occasionali", "__WALLET_MODAL-REQUEST_FISCAL-TYPE_NON_ITALIAN MAX: 20": "estero", "__WALLET_MODAL-REQUEST_FISCAL-TYPE_WITHHOLDING MAX: 20": "meno di € 5.000 lordi / anno con prestazioni occasionali", diff --git a/src/pages/GettingStarted/NewSignupForm/Step0/EmailInput.tsx b/src/pages/GettingStarted/NewSignupForm/Step0/EmailInput.tsx index d381584ab..05586ce0a 100644 --- a/src/pages/GettingStarted/NewSignupForm/Step0/EmailInput.tsx +++ b/src/pages/GettingStarted/NewSignupForm/Step0/EmailInput.tsx @@ -27,6 +27,8 @@ const EmailInput = ({ className }: { className?: string }) => { ...field, "data-qa": "email-input", "aria-required": true, + "aria-invalid": meta.touched && typeof meta.error == "string", + "aria-errormessage": `${field.name}-error`, }} isInvalid={meta.touched && typeof meta.error == "string"} value={field.value} @@ -34,7 +36,7 @@ const EmailInput = ({ className }: { className?: string }) => { type="text" placeholder="mail@example.com" /> - + )} diff --git a/src/pages/GettingStarted/NewSignupForm/Step0/PasswordInput.tsx b/src/pages/GettingStarted/NewSignupForm/Step0/PasswordInput.tsx index 5de086da8..fb1e50f19 100644 --- a/src/pages/GettingStarted/NewSignupForm/Step0/PasswordInput.tsx +++ b/src/pages/GettingStarted/NewSignupForm/Step0/PasswordInput.tsx @@ -23,14 +23,20 @@ const PasswordInput = ({ className }: { className?: string }) => { } />{" "} - + )} diff --git a/src/pages/GettingStarted/NewSignupForm/Step0/PasswordRequirements.tsx b/src/pages/GettingStarted/NewSignupForm/Step0/PasswordRequirements.tsx index dbfcf4cfe..a7070fc9d 100644 --- a/src/pages/GettingStarted/NewSignupForm/Step0/PasswordRequirements.tsx +++ b/src/pages/GettingStarted/NewSignupForm/Step0/PasswordRequirements.tsx @@ -19,14 +19,18 @@ const PasswordRequirement = ({ "data-qa"?: string; }) => { return ( -
+
  • {check() ? ( - +
  • + ); }; @@ -39,30 +43,32 @@ const PasswordRequirements = () => { {t("PASSWORD_VALIDATOR:::Password requirements:")} - values.password.length >= 6} - > - {t("PASSWORD_VALIDATOR:::minimum of 6 characters")} - - values.password.match(/[A-Z]/) !== null} - > - {t("PASSWORD_VALIDATOR:::contain an uppercase letter")} - - values.password.match(/[a-z]/) !== null} - > - {t("PASSWORD_VALIDATOR:::contain a lowercase letter")} - - values.password.match(/[0-9]/) !== null} - > - {t("PASSWORD_VALIDATOR:::contain a number")} - +
      + values.password.length >= 6} + > + {t("PASSWORD_VALIDATOR:::minimum of 6 characters")} + + values.password.match(/[A-Z]/) !== null} + > + {t("PASSWORD_VALIDATOR:::contain an uppercase letter")} + + values.password.match(/[a-z]/) !== null} + > + {t("PASSWORD_VALIDATOR:::contain a lowercase letter")} + + values.password.match(/[0-9]/) !== null} + > + {t("PASSWORD_VALIDATOR:::contain a number")} + +
    ); }; diff --git a/src/pages/GettingStarted/NewSignupForm/Step0/useNextStep.tsx b/src/pages/GettingStarted/NewSignupForm/Step0/useNextStep.tsx index 267b69aa3..a9a3d2840 100644 --- a/src/pages/GettingStarted/NewSignupForm/Step0/useNextStep.tsx +++ b/src/pages/GettingStarted/NewSignupForm/Step0/useNextStep.tsx @@ -42,7 +42,13 @@ const useNextStep = () => { ) ); } else { - if (Object.keys(errors).length) return; + if (Object.keys(errors).length) { + const inputElement = document.querySelector( + `input[name="${Object.keys(errors)[0]}"]` + ) as HTMLInputElement; + inputElement?.focus(); + return; + } setFieldValue("step", 1); } }); diff --git a/src/pages/GettingStarted/NewSignupForm/Step1/BirthdayInput.tsx b/src/pages/GettingStarted/NewSignupForm/Step1/BirthdayInput.tsx index ee53b3163..ba57c07fb 100644 --- a/src/pages/GettingStarted/NewSignupForm/Step1/BirthdayInput.tsx +++ b/src/pages/GettingStarted/NewSignupForm/Step1/BirthdayInput.tsx @@ -65,10 +65,12 @@ const BirthdayInput = () => { inputProps={{ required: true, "aria-required": true, + "aria-invalid": meta.touched && typeof meta.error == "string", + "aria-errormessage": `${field.name}-error`, onBlur: () => form.setFieldTouched(field.name), }} /> - + )} diff --git a/src/pages/GettingStarted/NewSignupForm/Step1/index.tsx b/src/pages/GettingStarted/NewSignupForm/Step1/index.tsx index 6c96a5a92..6be3d80ca 100644 --- a/src/pages/GettingStarted/NewSignupForm/Step1/index.tsx +++ b/src/pages/GettingStarted/NewSignupForm/Step1/index.tsx @@ -16,6 +16,7 @@ import { import CountrySelect from "src/features/CountrySelect"; import styled from "styled-components"; import BirthdayInput from "./BirthdayInput"; +import { useEffect } from "react"; const ButtonWrapper = styled.div` gap: 1rem; @@ -27,7 +28,7 @@ const ButtonWrapper = styled.div` `; const Step1 = () => { const { t } = useTranslation(); - const { setFieldValue, submitForm, isSubmitting } = + const { setFieldValue, submitForm, isSubmitting, errors } = useFormikContext(); const onBackClick = () => { setFieldValue("step", 0); @@ -35,6 +36,15 @@ const Step1 = () => { const onSubmitClick = () => { submitForm(); }; + useEffect(() => { + const errorsKeys = Object.keys(errors); + if (errorsKeys.length > 0 && isSubmitting) { + const inputElement = document.querySelector( + `input[name="${errorsKeys[0]}"]` + ) as HTMLInputElement; + inputElement?.focus(); + } + }, [errors, isSubmitting]); return (
    @@ -65,10 +75,12 @@ const Step1 = () => { required: true, "aria-required": true, "data-qa": "input-name", + "aria-invalid": meta.touched && typeof meta.error == "string", + "aria-errormessage": `${field.name}-error`, }} /> </div> - <ErrorMessage name={field.name} /> + <ErrorMessage id={`${field.name}-error`} name={field.name} /> </FormGroup> )} </FormikField> @@ -95,10 +107,12 @@ const Step1 = () => { required: true, "aria-required": true, "data-qa": "input-surname", + "aria-invalid": meta.touched && typeof meta.error == "string", + "aria-errormessage": `${field.name}-error`, }} /> </div> - <ErrorMessage name={field.name} /> + <ErrorMessage id={`${field.name}-error`} name={field.name} /> </FormGroup> )} </FormikField> @@ -127,7 +141,7 @@ const Step1 = () => { </span> } /> - <ErrorMessage name={name} /> + <ErrorMessage id={`${name}-error`} name={name} /> </div> ); }} @@ -139,21 +153,27 @@ const Step1 = () => { terms_link: ( <a data-qa="terms-and-conditions" - href={t("/terms-and-conditions/")} + href={t("/terms-and-conditions/", { + ns: "links", + })} target="_blank" /> ), privacy_link: ( <a data-qa="privacy-policy" - href={t("https://www.iubenda.com/privacy-policy/7934311")} + href={t("https://www.iubenda.com/privacy-policy/7934311", { + ns: "links", + })} target="_blank" /> ), ethical_link: ( <a data-qa="ethical-code" - href={t("/ethical-code/")} + href={t("/ethical-code/", { + ns: "links", + })} target="_blank" /> ), diff --git a/src/pages/GettingStarted/index.tsx b/src/pages/GettingStarted/index.tsx index daac3ca03..a0fb7780d 100644 --- a/src/pages/GettingStarted/index.tsx +++ b/src/pages/GettingStarted/index.tsx @@ -103,21 +103,30 @@ export default function GettingStarted() { terms_link: ( <a data-qa="terms-and-conditions" - href={t("/terms-and-conditions/")} + href={t("/terms-and-conditions/", { + ns: "links", + })} target="_blank" /> ), privacy_link: ( <a data-qa="privacy-policy" - href={t("https://www.iubenda.com/privacy-policy/7934311")} + href={t( + "https://www.iubenda.com/privacy-policy/7934311", + { + ns: "links", + } + )} target="_blank" /> ), ethical_link: ( <a data-qa="ethical-code" - href={t("/ethical-code/")} + href={t("/ethical-code/", { + ns: "links", + })} target="_blank" /> ), diff --git a/tests/e2e/getting-started/getting-started.spec.ts b/tests/e2e/getting-started/getting-started.spec.ts index c0eb01f73..e14b0fb3a 100644 --- a/tests/e2e/getting-started/getting-started.spec.ts +++ b/tests/e2e/getting-started/getting-started.spec.ts @@ -46,19 +46,19 @@ test.describe("The getting started page", () => { const languageSwitcher = page.getByTestId("language-switcher"); await expect( languageSwitcher.getByTestId("language-switcher-it") - ).toHaveText("Italiano"); + ).toContainText("Italiano"); await expect( languageSwitcher.getByTestId("language-switcher-it") ).toHaveAttribute("href", "/it/getting-started/"); await expect( languageSwitcher.getByTestId("language-switcher-en") - ).toHaveText("English"); + ).toContainText("English"); await expect( languageSwitcher.getByTestId("language-switcher-en") ).toHaveAttribute("href", "/getting-started/"); await expect( languageSwitcher.getByTestId("language-switcher-es") - ).toHaveText("Español"); + ).toContainText("Español"); await expect( languageSwitcher.getByTestId("language-switcher-es") ).toHaveAttribute("href", "/es/getting-started/"); @@ -126,7 +126,7 @@ test.describe("The getting started page", () => { test(`should display a link privacy policy`, async ({ page, i18n }) => { await expect(page.getByTestId("privacy-policy")).toBeVisible(); await expect(page.getByTestId("privacy-policy")).toHaveText( - i18n.t("Privacy Policy") + "Privacy Policy" ); }); test(`if the user click the privacy policy link another tab is opened to https://www.iubenda.com/privacy-policy/7934311`, async ({ @@ -146,9 +146,7 @@ test.describe("The getting started page", () => { }); test(`should display a link to ethical code`, async ({ page, i18n }) => { await expect(page.getByTestId("ethical-code")).toBeVisible(); - await expect(page.getByTestId("ethical-code")).toHaveText( - i18n.t("Ethical Code") - ); + await expect(page.getByTestId("ethical-code")).toHaveText("Ethical Code"); }); test(`if the user click the ethical code link another tab is opened to /ethical-code in the current language`, async ({ page, @@ -161,7 +159,11 @@ test.describe("The getting started page", () => { await ethicalCode.click(); const newPage = await pagePromise; await newPage.waitForLoadState(); - expect(newPage.url()).toContain(i18n.t("/ethical-code/")); + expect(newPage.url()).toContain( + i18n.t("/ethical-code/", { + ns: "links", + }) + ); }); test(`should display a link to the login page`, async ({ page, i18n }) => { await expect(page.getByTestId("login")).toBeVisible(); diff --git a/tests/e2e/getting-started/signup-mail.spec.ts b/tests/e2e/getting-started/signup-mail.spec.ts index ccecb791d..ea8db32d2 100644 --- a/tests/e2e/getting-started/signup-mail.spec.ts +++ b/tests/e2e/getting-started/signup-mail.spec.ts @@ -318,7 +318,11 @@ test.describe("The signup mail page second step", () => { await termsAndConditions.click(); const newPage = await pagePromise; await newPage.waitForLoadState(); - expect(newPage.url()).toContain(i18n.t("/ethical-code/")); + expect(newPage.url()).toContain( + i18n.t("/ethical-code/", { + ns: "links", + }) + ); }); test("if the user click to the back button got to the first step (precompiled)", async ({}) => { diff --git a/yarn.lock b/yarn.lock index c0a3e71ec..e8d126e06 100644 --- a/yarn.lock +++ b/yarn.lock @@ -47,10 +47,10 @@ ajv-draft-04 "^1.0.0" call-me-maybe "^1.0.1" -"@appquality/appquality-design-system@^1.0.62": - version "1.0.63" - resolved "https://registry.yarnpkg.com/@appquality/appquality-design-system/-/appquality-design-system-1.0.63.tgz#659d96f976e7a947b0b7ba8c23b4ebed058af39e" - integrity sha512-O7O0rbuAjwcWrhSIQBco8whBEodqXiGN9C5FjwxwD03nNO11Oq6nNHAQaIwTW4Rav64B43PFYvVlXPsBZpNIMQ== +"@appquality/appquality-design-system@^1.0.67": + version "1.0.67" + resolved "https://registry.yarnpkg.com/@appquality/appquality-design-system/-/appquality-design-system-1.0.67.tgz#e822454a7c7345f3a699087c80b1ae9567bf7c89" + integrity sha512-uIEJrX+PgVc4yF/4ciFYuqnP9v78PtYRpSfHx42/iEmI9qx2bFXuxuAgU8003+DBdmb33A7LLe0k0axoLUNLuA== dependencies: "@appquality/mobiscroll" "^5.10.1" formik "^2.2.9"