diff --git a/frontend/cypress/e2e/FormBCSCPage.cy.ts b/frontend/cypress/e2e/FormBCSCPage.cy.ts
index b30940fff1..359273fe0e 100644
--- a/frontend/cypress/e2e/FormBCSCPage.cy.ts
+++ b/frontend/cypress/e2e/FormBCSCPage.cy.ts
@@ -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")
@@ -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")
diff --git a/frontend/cypress/fixtures/contact.json b/frontend/cypress/fixtures/contact.json
index e376c48bf8..113fb75536 100644
--- a/frontend/cypress/fixtures/contact.json
+++ b/frontend/cypress/fixtures/contact.json
@@ -7,5 +7,5 @@
"firstName": "Jhon",
"lastName": "Wick",
"phoneNumber": "",
- "email": ""
+ "email": "jhon@wick.com"
}
\ No newline at end of file
diff --git a/frontend/src/components/grouping/ContactGroupComponent.vue b/frontend/src/components/grouping/ContactGroupComponent.vue
index e46e3a69b7..322c639594 100644
--- a/frontend/src/components/grouping/ContactGroupComponent.vue
+++ b/frontend/src/components/grouping/ContactGroupComponent.vue
@@ -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) => {
@@ -104,113 +108,147 @@ const updateContactType = (value: CodeNameType | undefined) => {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Delete contact
-
-
-
-
+
+
+
+
+ Read-only:
+ If something is incorrect
+ go to BCeID
+ to correct it and then restart your application.
+
+
+
+
+
Full name
+
+ {{ selectedValue.firstName }} {{ selectedValue.lastName }}
+
+
+
+
+
Email address
+
{{ selectedValue.email }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Delete contact
+
+
+
+
diff --git a/frontend/src/pages/FormBCeIDPage.vue b/frontend/src/pages/FormBCeIDPage.vue
index 26284707de..9e4489c15f 100644
--- a/frontend/src/pages/FormBCeIDPage.vue
+++ b/frontend/src/pages/FormBCeIDPage.vue
@@ -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}`);
});
}
};
@@ -442,16 +442,7 @@ const scrollToNewContact = () => {
>Add authorized people to the account
- Your first name, last name and email address are from your BCeID.
- If they're incorrect,
- go to BCeID
- to update them before submitting your form.
-
Be sure to add your phone number, location and role.
+ Review your name and email address. They’re from your BCeID.
diff --git a/frontend/src/pages/bceidform/ContactWizardStep.vue b/frontend/src/pages/bceidform/ContactWizardStep.vue
index 0d5a997bf5..61dc55e8e5 100644
--- a/frontend/src/pages/bceidform/ContactWizardStep.vue
+++ b/frontend/src/pages/bceidform/ContactWizardStep.vue
@@ -75,7 +75,7 @@ const addContact = (autoFocus = true) => {
);
if (autoFocus) {
const focusIndex = newLength - 1;
- setFocusedComponent(`addressname_${focusIndex}`);
+ setFocusedComponent(`firstName_${focusIndex}`);
}
return newLength;
};
@@ -129,7 +129,7 @@ const handleRemove = (index: number) => {
});
};
-onMounted(() => setFocusedComponent("addressname_0", 800));
+onMounted(() => setFocusedComponent("phoneNumber_0", 800));
defineExpose({
addContact,
@@ -175,7 +175,8 @@ defineExpose({
- 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.
", () => {
});
cy.get("@contactFixture").then((contact: Contact) => {
- cy.get("#firstName_0")
- .should("be.visible")
- .and("have.value", contact.firstName);
- cy.get("#lastName_0")
- .should("be.visible")
- .and("have.value", contact.lastName);
+ cy.contains("Full name").should("be.visible");
+ cy.get("#fullName_0")
+ .contains(`${contact.firstName} ${contact.lastName}`)
+ .should("be.visible");
- cy.get("#email_0").should("be.visible").and("have.value", "");
-
- cy.get("#phoneNumber_0").should("be.visible").and("have.value", "");
- });
- });
-
- it("should render the component with validation", () => {
- cy.get("@contactFixture").then((contact: Contact) => {
- cy.get("@rolesFixture").then((roles) => {
- cy.get("@addressesFixture").then((addresses) => {
- cy.mount(ContactGroupComponent, {
- props: {
- id: 0,
- modelValue: {
- ...contact,
- firstName: contact.firstName + " fault",
- },
- enabled: true,
- roleList: roles,
- addressList: addresses,
- validations: [dummyValidation()],
- },
- });
- });
- });
- });
-
- cy.get("@contactFixture").then((contact: Contact) => {
- cy.get("#firstName_0")
- .should("be.visible")
- .and("have.value", contact.firstName + " fault");
-
- cy.get("#firstName_0")
- .shadow()
- .find(".cds--form-requirement")
- .should("be.visible")
- .find("slot")
- .and("include.text", "Error");
-
- cy.get("#lastName_0")
- .should("be.visible")
- .and("have.value", contact.lastName);
-
- cy.get("#lastName_0")
- .shadow()
- .find(".cds--form-requirement")
- .should("be.visible")
- .find("slot")
- .and("include.text", "Error");
-
- cy.get("#email_0").should("be.visible").and("have.value", "");
+ cy.contains("Email address").should("be.visible");
+ cy.get("#email_0").contains(contact.email).should("be.visible");
cy.get("#phoneNumber_0").should("be.visible").and("have.value", "");
});
@@ -125,6 +74,8 @@ describe("", () => {
});
});
+ cy.focused().should('have.id', 'phoneNumber_0');
+
cy.get("#addressname_0").should("be.visible").and("have.value", "");
cy.get("#addressname_0")
@@ -160,6 +111,8 @@ describe("", () => {
});
});
+ cy.focused().should('have.id', 'phoneNumber_0');
+
cy.get("#addressname_0").should("be.visible").and("have.value", "");
cy.get("#addressname_0")
@@ -202,6 +155,8 @@ describe("", () => {
});
});
+ cy.focused().should('have.id', 'phoneNumber_0');
+
cy.get("#addressname_0").should("be.visible").and("have.value", "");
cy.get("#addressname_0")
@@ -263,6 +218,7 @@ describe("", () => {
});
});
+ cy.focused().should('have.id', 'firstName_1');
cy.get(fieldSelector).shadow().find("input").clear(); // emits false
cy.get(fieldSelector).blur(); // (doesn't emit)
cy.get(fieldSelector).shadow().find("input").type(firstContent); // emits true before blurring