From dddcdd9c7cb8fe026a244904c7c92ea5410973fc Mon Sep 17 00:00:00 2001
From: Fernando Terra <fernando.terra@encora.com>
Date: Thu, 7 Dec 2023 18:45:39 -0300
Subject: [PATCH 1/4] feat: change UI/UX in the Contacts step

---
 .../grouping/ContactGroupComponent.vue        | 250 ++++++++++--------
 frontend/src/pages/FormBCeIDPage.vue          |  11 +-
 .../src/pages/bceidform/ContactWizardStep.vue |   3 +-
 3 files changed, 144 insertions(+), 120 deletions(-)

diff --git a/frontend/src/components/grouping/ContactGroupComponent.vue b/frontend/src/components/grouping/ContactGroupComponent.vue
index e46e3a69b7..89d4cdaf2b 100644
--- a/frontend/src/components/grouping/ContactGroupComponent.vue
+++ b/frontend/src/components/grouping/ContactGroupComponent.vue
@@ -104,113 +104,145 @@ 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 class="body-compact-01">{{ selectedValue.firstName }} {{ selectedValue.lastName }}</p>
+      </div>
+      <hr class="divider" />
+      <div>
+        <p class="label-01">Email address</p>
+        <p 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>
diff --git a/frontend/src/pages/FormBCeIDPage.vue b/frontend/src/pages/FormBCeIDPage.vue
index 26284707de..f6d38d1936 100644
--- a/frontend/src/pages/FormBCeIDPage.vue
+++ b/frontend/src/pages/FormBCeIDPage.vue
@@ -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>
       
diff --git a/frontend/src/pages/bceidform/ContactWizardStep.vue b/frontend/src/pages/bceidform/ContactWizardStep.vue
index 0d5a997bf5..f88b4e00ed 100644
--- a/frontend/src/pages/bceidform/ContactWizardStep.vue
+++ b/frontend/src/pages/bceidform/ContactWizardStep.vue
@@ -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

From a8ee97baa07ef75cb899b09a1ef2f8049075b2fe Mon Sep 17 00:00:00 2001
From: Fernando Terra <fernando.terra@encora.com>
Date: Thu, 7 Dec 2023 19:29:40 -0300
Subject: [PATCH 2/4] feat: focus the first field, which depends

---
 frontend/src/components/grouping/ContactGroupComponent.vue | 6 +++++-
 frontend/src/pages/FormBCeIDPage.vue                       | 2 +-
 frontend/src/pages/bceidform/ContactWizardStep.vue         | 4 ++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/grouping/ContactGroupComponent.vue b/frontend/src/components/grouping/ContactGroupComponent.vue
index 89d4cdaf2b..16496c19a0 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) => {
diff --git a/frontend/src/pages/FormBCeIDPage.vue b/frontend/src/pages/FormBCeIDPage.vue
index f6d38d1936..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}`);
     });
   }
 };
diff --git a/frontend/src/pages/bceidform/ContactWizardStep.vue b/frontend/src/pages/bceidform/ContactWizardStep.vue
index f88b4e00ed..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,

From 132a328e81cba46b58cdc7fd23a73e885012cea6 Mon Sep 17 00:00:00 2001
From: Fernando Terra <fernando.terra@encora.com>
Date: Thu, 7 Dec 2023 21:01:49 -0300
Subject: [PATCH 3/4] test: fix component test

---
 frontend/cypress/fixtures/contact.json        |  2 +-
 .../grouping/ContactGroupComponent.vue        |  6 +-
 .../grouping/ContactGroupComponent.cy.ts      | 70 ++++---------------
 3 files changed, 18 insertions(+), 60 deletions(-)

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 16496c19a0..322c639594 100644
--- a/frontend/src/components/grouping/ContactGroupComponent.vue
+++ b/frontend/src/components/grouping/ContactGroupComponent.vue
@@ -129,12 +129,14 @@ const updateContactType = (value: CodeNameType | undefined) => {
         <br /><br />
 
         <p class="label-01">Full name</p>
-        <p class="body-compact-01">{{ selectedValue.firstName }} {{ selectedValue.lastName }}</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 class="body-compact-01">{{ selectedValue.email }}</p>
+        <p id="email_0" class="body-compact-01">{{ selectedValue.email }}</p>
       </div>
     </div>
 
diff --git a/frontend/tests/components/components/grouping/ContactGroupComponent.cy.ts b/frontend/tests/components/components/grouping/ContactGroupComponent.cy.ts
index 9811660ad5..3b577dc81b 100644
--- a/frontend/tests/components/components/grouping/ContactGroupComponent.cy.ts
+++ b/frontend/tests/components/components/grouping/ContactGroupComponent.cy.ts
@@ -40,65 +40,14 @@ describe("<ContactGroupComponent />", () => {
     });
 
     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("<ContactGroupComponent />", () => {
       });
     });
 
+    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("<ContactGroupComponent />", () => {
       });
     });
 
+    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("<ContactGroupComponent />", () => {
       });
     });
 
+    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("<ContactGroupComponent />", () => {
         });
       });
 
+      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

From f125abc07efce8f7797e05be4b90baec7e0488e8 Mon Sep 17 00:00:00 2001
From: Fernando Terra <fernando.terra@encora.com>
Date: Thu, 7 Dec 2023 21:35:17 -0300
Subject: [PATCH 4/4] test: fix e2e tests

---
 frontend/cypress/e2e/FormBCSCPage.cy.ts | 4 ++++
 1 file changed, 4 insertions(+)

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")