From 478c4004e330c86f85f1f3928a41da13dad1e150 Mon Sep 17 00:00:00 2001 From: Andreas Ellewsen <andreas@ellewsen.no> Date: Thu, 3 Aug 2023 14:20:09 +0200 Subject: [PATCH] Modify error message on duplicate info The users did not understand what to do when shown the default error report box telling them that their information was already registered. This commit shows a less "scary" box with less text, telling them what to do in addition to what the problem is. Hopefully that helps. This can be removed in the future when the backend design allows us to save this information so that the hosts can make a decision for these cases. Resolves: GREG-324 --- frontend/public/locales/en/common.json | 6 ++--- frontend/public/locales/nb/common.json | 6 ++--- frontend/public/locales/nn/common.json | 6 ++--- frontend/src/components/warningBox/index.tsx | 17 ++++++++++++ frontend/src/routes/guest/register/index.tsx | 27 +++++++++++++++----- 5 files changed, 43 insertions(+), 19 deletions(-) create mode 100644 frontend/src/components/warningBox/index.tsx diff --git a/frontend/public/locales/en/common.json b/frontend/public/locales/en/common.json index e89574e0..eec8d46a 100644 --- a/frontend/public/locales/en/common.json +++ b/frontend/public/locales/en/common.json @@ -217,6 +217,7 @@ "unknown": "An unknown error has occurred. If the problem persists, contact support.", "invitationDataFetchFailed": "Failed to fetch invitation data", "guestRegistrationFailed": "Failed to register your data", + "existingUserErrorHeader": "Already registered", "partialSubmitSuccess": "Invite creation partial successful", "emailUpdateFailed": "E-mail update failed", "badEndDate": "Cannot end a role before it has started", @@ -226,10 +227,7 @@ "cannot_update_fields": "Failed to update data", "update_national_id_not_allowed": "Not allowed to update verified Norwegian ID", "invite_email_failed": "There was a problem sending the invite e-mail. Contact support.", - "duplicate_private_email": "There is already a guest with the registered e-mail", - "duplicate_private_mobile_number": "There is already a guest with the registered mobile phone number", - "duplicate_private_national_id_number": "There is already a guest with the Norwegian national ID number given", - "duplicate_private_passport_number": "There is already a guest with the passport number given" + "duplicate_identity_info": "Part of your information is already registered to someone. This is almost always because you are already registered in the service. Notify your host of the problem." } }, "update": { diff --git a/frontend/public/locales/nb/common.json b/frontend/public/locales/nb/common.json index 5e9091fe..f307e56c 100644 --- a/frontend/public/locales/nb/common.json +++ b/frontend/public/locales/nb/common.json @@ -217,6 +217,7 @@ "errorLoadOusRoleType": "Kunne ikke laste organisasjons og/eller rolletype data fra server", "invitationDataFetchFailed": "Klarte ikke å hente invitasjonsdata", "guestRegistrationFailed": "Klarte ikke å registrere dataene dine", + "existingUserErrorHeader": "Allerede registrert", "partialSubmitSuccess": "Opprettelse av invitasjon delvis vellykket", "emailUpdateFailed": "Oppdatering av e-post feilet", "badEndDate": "Kan ikke avslutte en rolle før den har startet", @@ -226,10 +227,7 @@ "cannot_update_fields": "Klarte ikke å oppdatere dataene", "update_national_id_not_allowed": "Ikke tillatt å endre verifisert fødselsnummer/D-nummer", "invite_email_failed": "Klarte ikke å sende e-post med invitasjon. Kontakt support.", - "duplicate_private_email": "Det eksisterer allerede en gjest med gitt e-postadresse", - "duplicate_private_mobile_number": "Det eksisterer allerede en gjest med gitt mobiltelefonnummer", - "duplicate_private_national_id_number": "Det eksisterer allerede en gjest med gitt fødselsnummer/D-nummer", - "duplicate_private_passport_number": "Det eksisterer allerede en gjest med gitt passnummer" + "duplicate_identity_info": "Deler av informasjonen din finnes allerede i systemet. Dette skyldes som regel at du allerede er registrert som gjest. Varsle verten din om problemet." } }, "update": { diff --git a/frontend/public/locales/nn/common.json b/frontend/public/locales/nn/common.json index 6a931673..ffa867bf 100644 --- a/frontend/public/locales/nn/common.json +++ b/frontend/public/locales/nn/common.json @@ -217,6 +217,7 @@ "errorLoadOusRoleType": "Kunne ikkje laste organisasjons- og/eller rolledata", "invitationDataFetchFailed": "Klarte ikkje å hente invitasjonsdata", "guestRegistrationFailed": "Klarte ikkje å registrere informasjonen din", + "existingUserErrorHeader": "Allereie registrert", "partialSubmitSuccess": "Oppretting av invitasjon delvis vellukka", "emailUpdateFailed": "Oppdatering av e-post feila", "badEndDate": "Kan ikkje avslutte ei rolle før ho har starta", @@ -226,10 +227,7 @@ "cannot_update_fields": "Klarte ikkje å oppdatere informasjonen din", "update_national_id_not_allowed": "Ikkje tillate å endre verifisert fødselsnummer/D-nummer", "invite_email_failed": "Klarte ikkje å sende e-post med invitasjon. Kontakt brukarstøtte.", - "duplicate_private_email": "Det eksisterer allereie ein gjest med denne e-postadressa", - "duplicate_private_mobile_number": "Det eksisterer allereie ein gjest med dette mobiltelefonnummeret", - "duplicate_private_national_id_number": "Det eksisterer allereie ein gjest med dette fødselsnummeret/D-nummeret", - "duplicate_private_passport_number": "Det eksisterer allereie ein gjest med dette passnummeret" + "duplicate_identity_info": "Deler av informasjonen din finnes allereie i systemet. Dette skuldast som regel at du allereie er registrert som gjest. Varsle verten din om problemet." } }, "update": { diff --git a/frontend/src/components/warningBox/index.tsx b/frontend/src/components/warningBox/index.tsx new file mode 100644 index 00000000..70f3bd24 --- /dev/null +++ b/frontend/src/components/warningBox/index.tsx @@ -0,0 +1,17 @@ +import { Alert, AlertTitle } from '@mui/material' +import React from 'react' + +export type WarningBoxData = { + heading: string + bodyText: string +} + +export default function WarningBox({ heading, bodyText }: WarningBoxData) { + return ( + <Alert severity="warning"> + <AlertTitle>{heading}</AlertTitle> + <br /> + {bodyText} + </Alert> + ) +} diff --git a/frontend/src/routes/guest/register/index.tsx b/frontend/src/routes/guest/register/index.tsx index 639c5e96..55cd80b2 100644 --- a/frontend/src/routes/guest/register/index.tsx +++ b/frontend/src/routes/guest/register/index.tsx @@ -14,6 +14,7 @@ import { Box, Button, CircularProgress } from '@mui/material' import { fetchJsonOpts, splitPhoneNumber, submitJsonOpts } from 'utils' import { guestConsentStepEnabled } from 'appConfig' import Page from 'components/page' +import WarningBox, { WarningBoxData } from 'components/warningBox' import OverviewGuestButton from '../../components/overviewGuestButton' import { GuestRegisterCallableMethods } from './guestRegisterCallableMethods' import { GuestConsentData, GuestRegisterData } from './enteredGuestData' @@ -86,6 +87,9 @@ export default function GuestRegister() { useState<ServerErrorReportData | null>(null) const [submitGuestDataError, setSubmitGuestDataError] = useState<ServerErrorReportData | null>(null) + const [warningBoxData, setWarningBoxData] = useState<WarningBoxData | null>( + null + ) const fetchInvitationData = async () => { const response = await fetch('/api/ui/v1/invited/', fetchJsonOpts()) @@ -227,6 +231,7 @@ export default function GuestRegister() { setActiveStep(Step.RegisterStep) // Clear error if any setSubmitGuestDataError(null) + setWarningBoxData(null) } } @@ -237,7 +242,10 @@ export default function GuestRegister() { const payload: any = { person: {}, } - const parsedPhone = parsePhoneNumber(registerData.mobilePhone, registerData.mobilePhoneCountry as CountryCode) + const parsedPhone = parsePhoneNumber( + registerData.mobilePhone, + registerData.mobilePhoneCountry as CountryCode + ) payload.person.private_mobile = parsedPhone.format('E.164') if (initialGuestData !== null) { @@ -302,17 +310,16 @@ export default function GuestRegister() { if (response.ok) { setActiveStep(Step.SuccessStep) setSubmitGuestDataError(null) + setWarningBoxData(null) } else { // Expect that the error will contain JSON-data in the body // and that there will be a code field there response .json() - .then((errorData) => { - setSubmitGuestDataError({ - errorHeading: t('error.guestRegistrationFailed'), - statusCode: response.status, - statusText: response.statusText, - errorBodyText: t(`error.codes.${errorData?.code}`), + .then(() => { + setWarningBoxData({ + heading: t('error.existingUserErrorHeader'), + bodyText: t(`error.codes.duplicate_identity_info`), }) }) .catch((error) => { @@ -464,6 +471,12 @@ export default function GuestRegister() { errorBodyText={submitGuestDataError?.errorBodyText} /> )} + {warningBoxData !== null && ( + <WarningBox + heading={warningBoxData.heading} + bodyText={warningBoxData.bodyText} + /> + )} </Page> ) } -- GitLab