Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FSADT1-1025] Update content and fields in step3 #665

Merged
merged 4 commits into from
Dec 8, 2023
Merged

[FSADT1-1025] Update content and fields in step3 #665

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dddcdd9
feat: change UI/UX in the Contacts step
fterra-encora Dec 7, 2023
a8ee97b
feat: focus the first field, which depends
fterra-encora Dec 7, 2023
132a328
test: fix component test
fterra-encora Dec 8, 2023
f125abc
test: fix e2e tests
fterra-encora Dec 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions frontend/cypress/e2e/FormBCSCPage.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,8 @@ describe("BCSC Form", () => {
.should("be.visible")
.click();

cy.focused().should('have.id', 'firstName_1');

cy
.get('#role_1')
.should("be.visible")
Expand Down Expand Up @@ -142,6 +144,8 @@ describe("BCSC Form", () => {
.should("be.visible")
.click();

cy.focused().should('have.id', 'firstName_1');

cy
.get('#role_1')
.should("be.visible")
Expand Down
2 changes: 1 addition & 1 deletion frontend/cypress/fixtures/contact.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,5 @@
"firstName": "Jhon",
"lastName": "Wick",
"phoneNumber": "",
"email": ""
"email": "[email protected]"
}
258 changes: 148 additions & 110 deletions frontend/src/components/grouping/ContactGroupComponent.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,11 @@ const nameTypesToCodeDescr = (
};

onMounted(() => {
setFocusedComponent(`address_${props.id}`, 800);
if (props.id === 0) {
setFocusedComponent(`phoneNumber_${props.id}`, 800);
} else {
setFocusedComponent(`firstName_${props.id}`, 800);
}
});

const updateContactType = (value: CodeNameType | undefined) => {
Expand All @@ -104,113 +108,147 @@ const updateContactType = (value: CodeNameType | undefined) => {

<template>
<div class="frame-01">
<multiselect-input-component
:id="'addressname_' + id"
v-if="!hideAddressNameField"
label="Address name"
tip="Select an address name for the contact. A contact can have more than one address"
:initial-value="''"
:model-value="addressList"
:selectedValues="selectedValue.locationNames?.map((location:CodeDescrType) => location?.text)"
:validations="[
...getValidations('location.contacts.*.locationNames'),
submissionValidation(`location.contacts[${id}].locationNames`)
]"
:requiredLabel="requiredLabel"
@update:selected-value="
selectedValue.locationNames = nameTypesToCodeDescr($event)
"
@empty="validation.locationNames = !$event"
/>

<dropdown-input-component
:id="'role_' + id"
label="Primary role"
tip="Choose the primary role for this contact"
:initial-value="selectedValue.contactType?.text"
:model-value="roleList"
:validations="[
...getValidations('location.contacts.*.contactType.text'),
submissionValidation(`location.contacts[${id}].contactType`)
]"
:requiredLabel="requiredLabel"
@update:selected-value="updateContactType($event)"
@empty="validation.contactType = !$event"
/>

<text-input-component
:id="'firstName_' + id"
label="First name"
placeholder=""
v-model="selectedValue.firstName"
:validations="[
...getValidations('location.contacts.*.firstName'),
submissionValidation(`location.contacts[${id}].firstName`)
]"
:enabled="enabled"
:requiredLabel="requiredLabel"
:error-message="error"
@empty="validation.firstName = !$event"
@error="validation.firstName = !$event"
/>

<text-input-component
:id="'lastName_' + id"
label="Last name"
placeholder=""
v-model="selectedValue.lastName"
:validations="[
...getValidations('location.contacts.*.lastName'),
submissionValidation(`location.contacts[${id}].lastName`)
]"
:enabled="enabled"
:requiredLabel="requiredLabel"
:error-message="error"
@empty="validation.lastName = !$event"
@error="validation.lastName = !$event"
/>

<text-input-component
:id="'email_' + id"
label="Email address"
placeholder=""
v-model="selectedValue.email"
:validations="[
...getValidations('location.contacts.*.email'),
submissionValidation(`location.contacts[${id}].email`)
]"
:enabled="enabled"
:requiredLabel="requiredLabel"
@empty="validation.email = !$event"
@error="validation.email = !$event"
/>

<text-input-component
:id="'phoneNumber_' + id"
label="Phone number"
placeholder="( ) ___-____"
mask="(###) ###-####"
v-model="selectedValue.phoneNumber"
:enabled="true"
:validations="[
...getValidations('location.contacts.*.phoneNumber'),
submissionValidation(`location.contacts[${id}].phoneNumber`)
]"
:requiredLabel="requiredLabel"
@empty="validation.phoneNumber = !$event"
@error="validation.phoneNumber = !$event"
/>

<div class="grouping-06">
<cds-button
v-if="id > 0"
:id="'deleteContact_' + id"
kind="danger--tertiary"
@click.prevent="emit('remove', id)"
>
<span>Delete contact</span>
<Delete16 slot="icon" />
</cds-button>
</div>
</div>
<div v-if="id === 0" class="card">
<div>
<cds-inline-notification
v-shadow="2"
low-contrast="true"
open="true"
kind="info"
hide-close-button="true"
title="">
<p class="cds--inline-notification-content">
<strong>Read-only: </strong>
If something is incorrect
<a href="https://www.bceid.ca/" target="_blank" rel="noopener noreferrer"
>go to BCeID</a
>
to correct it and then restart your application.
</p>
</cds-inline-notification>
<br /><br />

<p class="label-01">Full name</p>
<p id="fullName_0" class="body-compact-01">
{{ selectedValue.firstName }} {{ selectedValue.lastName }}
</p>
</div>
<hr class="divider" />
<div>
<p class="label-01">Email address</p>
<p id="email_0" class="body-compact-01">{{ selectedValue.email }}</p>
</div>
</div>

<template v-else>
<text-input-component
:id="'firstName_' + id"
label="First name"
placeholder=""
v-model="selectedValue.firstName"
:validations="[
...getValidations('location.contacts.*.firstName'),
submissionValidation(`location.contacts[${id}].firstName`)
]"
:enabled="enabled"
:requiredLabel="requiredLabel"
:error-message="error"
@empty="validation.firstName = !$event"
@error="validation.firstName = !$event"
/>

<text-input-component
:id="'lastName_' + id"
label="Last name"
placeholder=""
v-model="selectedValue.lastName"
:validations="[
...getValidations('location.contacts.*.lastName'),
submissionValidation(`location.contacts[${id}].lastName`)
]"
:enabled="enabled"
:requiredLabel="requiredLabel"
:error-message="error"
@empty="validation.lastName = !$event"
@error="validation.lastName = !$event"
/>

<text-input-component
:id="'email_' + id"
label="Email address"
placeholder=""
v-model="selectedValue.email"
:validations="[
...getValidations('location.contacts.*.email'),
submissionValidation(`location.contacts[${id}].email`)
]"
:enabled="enabled"
:requiredLabel="requiredLabel"
@empty="validation.email = !$event"
@error="validation.email = !$event"
/>
</template>

<text-input-component
:id="'phoneNumber_' + id"
label="Phone number"
placeholder="( ) ___-____"
mask="(###) ###-####"
v-model="selectedValue.phoneNumber"
:enabled="true"
:validations="[
...getValidations('location.contacts.*.phoneNumber'),
submissionValidation(`location.contacts[${id}].phoneNumber`)
]"
:requiredLabel="requiredLabel"
@empty="validation.phoneNumber = !$event"
@error="validation.phoneNumber = !$event"
/>

<dropdown-input-component
:id="'role_' + id"
label="Primary role"
tip="Choose the primary role for this contact"
:initial-value="selectedValue.contactType?.text"
:model-value="roleList"
:validations="[
...getValidations('location.contacts.*.contactType.text'),
submissionValidation(`location.contacts[${id}].contactType`)
]"
:requiredLabel="requiredLabel"
@update:selected-value="updateContactType($event)"
@empty="validation.contactType = !$event"
/>

<multiselect-input-component
:id="'addressname_' + id"
v-if="!hideAddressNameField"
label="Location or address name"
tip="A contact can have more than one address"
:initial-value="''"
:model-value="addressList"
:selectedValues="selectedValue.locationNames?.map((location:CodeDescrType) => location?.text)"
:validations="[
...getValidations('location.contacts.*.locationNames'),
submissionValidation(`location.contacts[${id}].locationNames`)
]"
:requiredLabel="requiredLabel"
@update:selected-value="
selectedValue.locationNames = nameTypesToCodeDescr($event)
"
@empty="validation.locationNames = !$event"
/>

<div class="grouping-06">
<cds-button
v-if="id > 0"
:id="'deleteContact_' + id"
kind="danger--tertiary"
@click.prevent="emit('remove', id)"
>
<span>Delete contact</span>
<Delete16 slot="icon" />
</cds-button>
</div>
</div>
</template>
13 changes: 2 additions & 11 deletions frontend/src/pages/FormBCeIDPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -355,7 +355,7 @@ const scrollToNewContact = () => {
// Skip auto-focus so to do it only when scroll is done.
const index = contactWizardRef.value.addContact(false) - 1;
setScrollPoint(`additional-contact-${index}`, undefined, () => {
setFocusedComponent(`addressname_${index}`);
setFocusedComponent(`firstName_${index}`);
});
}
};
Expand Down Expand Up @@ -442,16 +442,7 @@ const scrollToNewContact = () => {
>Add authorized people to the account</span
>
<p class="body-01 heading-compact-01-dark">
Your first name, last name and email address are from your BCeID.
If they're incorrect,
<a
href="https://www.bceid.ca/"
target="_blank"
rel="noopener noreferrer"
>go to BCeID</a
>
to update them before submitting your form.
<br /><br />Be sure to add your phone number, location and role.
Review your name and email address. They’re from your BCeID.
</p>
</div>

Expand Down
7 changes: 4 additions & 3 deletions frontend/src/pages/bceidform/ContactWizardStep.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ const addContact = (autoFocus = true) => {
);
if (autoFocus) {
const focusIndex = newLength - 1;
setFocusedComponent(`addressname_${focusIndex}`);
setFocusedComponent(`firstName_${focusIndex}`);
}
return newLength;
};
Expand Down Expand Up @@ -129,7 +129,7 @@ const handleRemove = (index: number) => {
});
};

onMounted(() => setFocusedComponent("addressname_0", 800));
onMounted(() => setFocusedComponent("phoneNumber_0", 800));

defineExpose({
addContact,
Expand Down Expand Up @@ -175,7 +175,8 @@ defineExpose({
</div>

<span class="body-01">
To add another contact to the account, select "Add another contact" button below.
You can add contacts to the account. For example, a person you want to give or receive
information on your behalf.
</span>

<cds-button
Expand Down
Loading
Loading