Skip to content

Commit

Permalink
Feature/update user form (#11)
Browse files Browse the repository at this point in the history 
* Add text fields into user form

* Update position of inputs & adjust styles

* Format data of postal codes before post

* Update onChange & disabled status of postal code fields

* Update translations
  • Loading branch information
@juhomakkonen
juhomakkonen authored Apr 9, 2024
1 parent 0e085fc commit 43a0204
Show file tree
Hide file tree
Showing 7 changed files with 126 additions and 8 deletions.
94 changes: 94 additions & 0 deletions src/components/Forms/UserForm/UserForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ const UserForm = ({ answerStatus, setAnswerStatus }: UserFormProps) => {
const [postalCodeData, setPostalCodeData] = useState<PostalCode[]>([]);
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();

Expand Down Expand Up @@ -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,
Expand All @@ -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
*/
Expand All @@ -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;
};

Expand Down Expand Up @@ -215,6 +247,8 @@ const UserForm = ({ answerStatus, setAnswerStatus }: UserFormProps) => {
<select
{...register('postal_code', { required: false })}
role="listbox"
onChange={(event) => handlePostalCodes(event, setIsPostalCode)}
disabled={isPostalCodeOther}
aria-required="false"
aria-invalid={errors.postal_code ? true : false}
className="select-field"
Expand All @@ -232,6 +266,35 @@ const UserForm = ({ answerStatus, setAnswerStatus }: UserFormProps) => {
)}
</div>
) : null}
<div className="mb-2 form-group container-sm center-text">
<div>
<label htmlFor="postal_code_other" className="text-label mb-1">
{intl.formatMessage({ id: 'app.form.postalCode.other.label' })}
</label>
</div>
<div className="flex-input">
<input
{...register('postal_code_other', { required: false, maxLength: 10 })}
type="text"
maxLength={10}
onChange={(event) => handlePostalCodes(event, setIsPostalCodeOther)}
disabled={isPostalCode}
aria-required="false"
aria-invalid={errors.postal_code_other ? true : false}
className="form-control text-field-w60"
/>
</div>
<div className="mb-1">
<small>
{intl.formatMessage({ id: 'app.form.postalCode.other.text.small' })}
</small>
</div>
{errors.postal_code_other && (
<div className="mb-2">
<p className="text-normal">{errors.postal_code_other.message}</p>
</div>
)}
</div>
{!serviceMapApiError ? (
<div className="mb-2 form-group container-sm center-text">
<div>
Expand All @@ -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"
Expand All @@ -262,6 +327,35 @@ const UserForm = ({ answerStatus, setAnswerStatus }: UserFormProps) => {
)}
</div>
) : null}
<div className="mb-2 form-group container-sm center-text">
<div>
<label htmlFor="optional_postal_code_other" className="text-label mb-1">
{intl.formatMessage({ id: 'app.form.optionalPostalCode.other.label' })}
</label>
</div>
<div className="flex-input">
<input
{...register('optional_postal_code_other', { required: false, maxLength: 10 })}
type="text"
maxLength={10}
onChange={(event) => handlePostalCodes(event, setIsOptionalPostalCodeOther)}
disabled={isOptionalPostalCode}
aria-required="false"
aria-invalid={errors.optional_postal_code_other ? true : false}
className="form-control text-field-w60"
/>
</div>
<div className="mb-1">
<small>
{intl.formatMessage({ id: 'app.form.postalCode.other.text.small' })}
</small>
</div>
{errors.optional_postal_code_other && (
<div className="mb-2">
<p className="text-normal">{errors.optional_postal_code_other.message}</p>
</div>
)}
</div>
<div className="mb-2 container-sm center-text">
<p className="text-normal">
{intl.formatMessage({ id: 'app.form.info.question' })}
Expand Down
2 changes: 1 addition & 1 deletion src/components/QuestionForm/QuestionForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -371,7 +371,7 @@ const QuestionForm = () => {
<h3 className="header-h3">
{localeSelection === 'en'
? `${parts[0]} ${formatTransportType(question3Answer.fi)} ${parts[2]}`
: `${parts[0]} ${formatTransportType(question3Answer.fi)}`}
: `${parts[0]} ${formatTransportType(question3Answer.fi)}:`}
</h3>
);
}
Expand Down
8 changes: 6 additions & 2 deletions src/i18n/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
Expand All @@ -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",
Expand Down
8 changes: 6 additions & 2 deletions src/i18n/fi.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
Expand All @@ -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ä",
Expand Down
10 changes: 7 additions & 3 deletions src/i18n/sv.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
Expand All @@ -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",
Expand Down
10 changes: 10 additions & 0 deletions src/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,11 @@ body {
align-items: center;
}

.flex-input {
display: flex;
justify-content: center;
}

.active {
background-color: $color-black !important;
}
Expand Down Expand Up @@ -132,6 +137,11 @@ body {
width: 50px;
}

.text-field-w60 {
width: 60%;
height: 27px;
}

.select-field {
width: 40%;
text-align: center;
Expand Down
2 changes: 2 additions & 0 deletions src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down

0 comments on commit 43a0204

Please sign in to comment.