diff --git a/src/components/Forms/UserForm/UserForm.tsx b/src/components/Forms/UserForm/UserForm.tsx index d4418f51..4f7dba41 100644 --- a/src/components/Forms/UserForm/UserForm.tsx +++ b/src/components/Forms/UserForm/UserForm.tsx @@ -14,6 +14,10 @@ const UserForm = ({ answerStatus, setAnswerStatus }: UserFormProps) => { const [postalCodeData, setPostalCodeData] = useState([]); const [serviceMapApiError, setServiceMapApiError] = useState(false); const [isError, setIsError] = useState(false); + const [isPostalCode, setIsPostalCode] = useState(false); + const [isOptionalPostalCode, setIsOptionalPostalCode] = useState(false); + const [isPostalCodeOther, setIsPostalCodeOther] = useState(false); + const [isOptionalPostalCodeOther, setIsOptionalPostalCodeOther] = useState(false); const intl = useIntl(); @@ -114,7 +118,9 @@ const UserForm = ({ answerStatus, setAnswerStatus }: UserFormProps) => { gender: null, year_of_birth: 1, postal_code: null, + postal_code_other: null, optional_postal_code: null, + optional_postal_code_other: null, is_interested_in_mobility: false, is_filled_for_fun: false, result_can_be_used: false, @@ -124,8 +130,28 @@ const UserForm = ({ answerStatus, setAnswerStatus }: UserFormProps) => { const isInterestedInMobility = watch('is_interested_in_mobility'); const isForFun = watch('is_filled_for_fun'); + /** + * Set disabled status of either select or text input so that user can't fill both at the same time. + * Select element is for those that live in Turku and text input is for those who don't. + * @param event + * @param setState + */ + const handlePostalCodes = ( + event: { target: { value: string } }, + setState: (a: boolean) => void, + ) => { + const textValue = event.target.value; + if (textValue?.length) { + setState(true); + } + if (!textValue || !textValue.length) { + setState(false); + } + }; + /** * In case 1 or both postal code values are empty string, replace with null value for API compatibility. + * Also add values from text fields into keys that are recognized by API in case they are not null. * @param data * @returns data */ @@ -137,6 +163,12 @@ const UserForm = ({ answerStatus, setAnswerStatus }: UserFormProps) => { if (updatedData.optional_postal_code === '') { updatedData.optional_postal_code = null; } + if (updatedData.postal_code_other?.length && !updatedData.postal_code) { + updatedData.postal_code = updatedData.postal_code_other; + } + if (updatedData.optional_postal_code_other?.length && !updatedData.optional_postal_code) { + updatedData.optional_postal_code = updatedData.optional_postal_code_other; + } return updatedData; }; @@ -215,6 +247,8 @@ const UserForm = ({ answerStatus, setAnswerStatus }: UserFormProps) => { handlePostalCodes(event, setIsPostalCodeOther)} + disabled={isPostalCode} + aria-required="false" + aria-invalid={errors.postal_code_other ? true : false} + className="form-control text-field-w60" + /> + +
+ + {intl.formatMessage({ id: 'app.form.postalCode.other.text.small' })} + +
+ {errors.postal_code_other && ( +
+

{errors.postal_code_other.message}

+
+ )} + {!serviceMapApiError ? (
@@ -245,6 +308,8 @@ const UserForm = ({ answerStatus, setAnswerStatus }: UserFormProps) => { required: false, })} role="listbox" + onChange={(event) => handlePostalCodes(event, setIsOptionalPostalCode)} + disabled={isOptionalPostalCodeOther} aria-required="false" aria-invalid={errors.optional_postal_code ? true : false} className="select-field" @@ -262,6 +327,35 @@ const UserForm = ({ answerStatus, setAnswerStatus }: UserFormProps) => { )}
) : null} +
+
+ +
+
+ handlePostalCodes(event, setIsOptionalPostalCodeOther)} + disabled={isOptionalPostalCode} + aria-required="false" + aria-invalid={errors.optional_postal_code_other ? true : false} + className="form-control text-field-w60" + /> +
+
+ + {intl.formatMessage({ id: 'app.form.postalCode.other.text.small' })} + +
+ {errors.optional_postal_code_other && ( +
+

{errors.optional_postal_code_other.message}

+
+ )} +

{intl.formatMessage({ id: 'app.form.info.question' })} diff --git a/src/components/QuestionForm/QuestionForm.tsx b/src/components/QuestionForm/QuestionForm.tsx index 83fcd9e3..ac958759 100644 --- a/src/components/QuestionForm/QuestionForm.tsx +++ b/src/components/QuestionForm/QuestionForm.tsx @@ -371,7 +371,7 @@ const QuestionForm = () => {

{localeSelection === 'en' ? `${parts[0]} ${formatTransportType(question3Answer.fi)} ${parts[2]}` - : `${parts[0]} ${formatTransportType(question3Answer.fi)}`} + : `${parts[0]} ${formatTransportType(question3Answer.fi)}:`}

); } diff --git a/src/i18n/en.json b/src/i18n/en.json index fa85032d..56072668 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -12,8 +12,10 @@ "app.input.submit.user": "Submit info", "app.form.email.title": "Enter your email address", "app.form.email.label": "Email address", - "app.form.postalCode.label": "Post code of my home address", - "app.form.optionalPostalCode.label": "Post code of my work or study address", + "app.form.postalCode.label": "Post code of my home address (Turku)", + "app.form.optionalPostalCode.label": "Post code of my work or study address (Turku)", + "app.form.postalCode.other.label": "Post code of my home address (other)", + "app.form.optionalPostalCode.other.label": "Post code of my work or study address (other)", "app.form.yearOfBirth.label": "Year of birth", "app.form.interestedInMobility.label": "I want to receive customized information about mobility.", "app.form.filledForFun.label": "Just for fun.", @@ -25,9 +27,11 @@ "app.form.postalCode.field": "In case you don't live in Turku, you can skip this question", "app.form.mandatory.field": "Mandatory field", "app.form.optional.field": "In case you don't work or study, you can skip this question", + "app.form.postalCode.other.text.small": "Fill this, in case you don't live in Turku", "app.form.email.invalid": "Enter valid email address", "app.form.numeric.field": "Enter valid postalcode", "app.form.info.question": "Why did I do the test?", + "app.form.postalCode.other.value": "Other postal code", "app.form.helperText.year": "Year", "app.form.helperText.postCode": "Post code", "app.form.helperText.characters": "characters", diff --git a/src/i18n/fi.json b/src/i18n/fi.json index 69407640..d1d69f09 100644 --- a/src/i18n/fi.json +++ b/src/i18n/fi.json @@ -12,8 +12,10 @@ "app.input.submit.user": "Lähetä tiedot", "app.form.email.title": "Kirjoita sähköpostiosoitteesi", "app.form.email.label": "Sähköpostiosoite", - "app.form.postalCode.label": "Kotiosoitteeni postinumero", - "app.form.optionalPostalCode.label": "Työ- tai opiskelupaikan postinumero", + "app.form.postalCode.label": "Kotiosoitteeni postinumero (Turku)", + "app.form.optionalPostalCode.label": "Työ- tai opiskelupaikan postinumero (Turku)", + "app.form.postalCode.other.label": "Kotiosoitteeni postinumero (muu)", + "app.form.optionalPostalCode.other.label": "Työ- tai opiskelupaikan postinumero (muu)", "app.form.yearOfBirth.label": "Syntymävuosi", "app.form.interestedInMobility.label": "Haluan saada minulle räätälöityä tietoa liikkumisesta.", "app.form.filledForFun.label": "Täytin vain huvikseni.", @@ -25,9 +27,11 @@ "app.form.postalCode.field": "Ohita kysymys, jos asut Turun ulkopuolella", "app.form.mandatory.field": "Pakollinen kenttä", "app.form.optional.field": "Ohita kysymys, jos et opiskele tai käy töissä", + "app.form.postalCode.other.text.small": "Täytä tämä, jos asut Turun ulkopuolella", "app.form.email.invalid": "Kirjoita kelvollinen sähköpostiosoite", "app.form.numeric.field": "Kirjoita kelvollinen postinumero", "app.form.info.question": "Miksi tein testin?", + "app.form.postalCode.other.value": "Muu postinumero", "app.form.helperText.year": "Vuosi", "app.form.helperText.postCode": "Postinumero", "app.form.helperText.characters": "merkkiä", diff --git a/src/i18n/sv.json b/src/i18n/sv.json index 174cb8b0..dd33ef9e 100644 --- a/src/i18n/sv.json +++ b/src/i18n/sv.json @@ -12,8 +12,10 @@ "app.input.submit.user": "Skicka in info", "app.form.email.title": "Skriv in din e-postadress", "app.form.email.label": "E-postadress", - "app.form.postalCode.label": "Postnummer för min hemadress", - "app.form.optionalPostalCode.label": "Postnumret på din arbetsplats eller studieort", + "app.form.postalCode.label": "Postnummer för min hemadress (Åbo)", + "app.form.optionalPostalCode.label": "Postnumret på din arbetsplats eller studieort (Åbo)", + "app.form.postalCode.other.label": "Postnummer för min hemadress (övrig)", + "app.form.optionalPostalCode.other.label": "Postnumret på din arbetsplats eller studieort (övrig)", "app.form.yearOfBirth.label": "Födelseår", "app.form.interestedInMobility.label": "Jag vill få skräddarsydd information om mobilitet.", "app.form.filledForFun.label": "Bara för skojs skull.", @@ -22,12 +24,14 @@ "app.form.gender.male": "Man", "app.form.gender.female": "Kvinna", "app.form.gender.other": "Övrig", - "app.form.postalCode.field": "Hoppa över frågan om du bor utanför Åbo", "app.form.mandatory.field": "Obligatoriskt fält", + "app.form.postalCode.field": "Hoppa över frågan om du bor utanför Åbo", "app.form.optional.field": "Hoppa över frågan om du inte studerar eller arbetar", + "app.form.postalCode.other.text.small": "Fyll i detta om du bor utanför Åbo", "app.form.email.invalid": "Skriv in en giltig e-postadress", "app.form.numeric.field": "Skriv in en giltig postnummer", "app.form.info.question": "Varför gjorde jag testet?", + "app.form.postalCode.other.value": "Annat postnummer", "app.form.helperText.year": "År", "app.form.helperText.postCode": "Postnummer", "app.form.helperText.characters": "tecken", diff --git a/src/style.scss b/src/style.scss index b052db0d..c6c9542d 100644 --- a/src/style.scss +++ b/src/style.scss @@ -32,6 +32,11 @@ body { align-items: center; } +.flex-input { + display: flex; + justify-content: center; +} + .active { background-color: $color-black !important; } @@ -132,6 +137,11 @@ body { width: 50px; } +.text-field-w60 { + width: 60%; + height: 27px; +} + .select-field { width: 40%; text-align: center; diff --git a/src/types.ts b/src/types.ts index 5a104660..57d3aa8e 100644 --- a/src/types.ts +++ b/src/types.ts @@ -104,7 +104,9 @@ interface UserFormTypes { gender: string | null; year_of_birth: number; postal_code?: string | null; + postal_code_other?: string | null; optional_postal_code?: string | null; + optional_postal_code_other?: string | null; is_filled_for_fun: boolean; result_can_be_used: boolean; }