Merge branch 'main' into feat/FSADT1-1055

frontend/src/assets/styles/global.scss

@@ -151,6 +151,10 @@ cds-progress-step[vertical] {
   width: fit-content;
 }
 
+cds-progress-step::part(cds--progress-step-button) {
+  cursor: auto;
+}
+
 cds-progress-step::part(cds--progress-label) {
   max-width: initial;
   padding-right: 0.5rem;
@@ -906,12 +910,27 @@ cds-actionable-notification * {
   align-self: stretch;
 }
 
+.grouping-22 {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2rem;
+}
+
+.grouping-23 {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+
 .grouping-divider {
   margin: 0.5rem 0;
 }
 
 .label-01 {
   align-self: stretch;
+  padding-bottom: 0.25rem;
   color: var(--light-theme-text-text-secondary, #606062);
 
   /* Utility styles/label-01 */

frontend/src/components/grouping/ContactGroupComponent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, watch, ref, onMounted } from "vue";
+import { reactive, watch, ref, onMounted, getCurrentInstance } from "vue";
 // Carbon
 import "@carbon/web-components/es/components/button/index";
 // Importing composables
@@ -104,6 +104,16 @@ const updateContactType = (value: CodeNameType | undefined) => {
     selectedValue.contactType = { value: value.code, text: value.name };
   }
 };
+
+const changePersonalInfoModalActive = ref(false);
+
+const instance = getCurrentInstance();
+const session = instance?.appContext.config.globalProperties.$session;
+
+const logoutAndRedirect = () => {
+  window.open("https://www.bceid.ca/", "_blank", "noopener");
+  session?.logOut();
+}
 </script>
 
 <template>
@@ -120,7 +130,12 @@ const updateContactType = (value: CodeNameType | undefined) => {
           <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"
+            <a
+              id="change-personal-info-link"
+              href="#"
+              target="_blank"
+              rel="noopener noreferrer"
+              @click.prevent="changePersonalInfoModalActive = true"
               >go to BCeID</a
             >
             to correct it and then restart your application.
@@ -251,4 +266,42 @@ const updateContactType = (value: CodeNameType | undefined) => {
       </cds-button>
     </div>
   </div>
+
+  <cds-modal
+    v-if="id === 0"
+    id="logout-and-redirect-modal"
+    size="md"
+    :open="changePersonalInfoModalActive"
+    @cds-modal-closed="changePersonalInfoModalActive = false"
+  >
+    <cds-modal-header>
+      <cds-modal-close-button></cds-modal-close-button>
+      <cds-modal-heading>
+        You will be automatically logged out and redirected to BCeID
+      </cds-modal-heading>
+    </cds-modal-header>
+    <cds-modal-body>
+      <p>
+        Update your personal information at
+        <a href="https://www.bceid.ca/" target="_blank" rel="noopener noreferrer">BCeID</a> and then
+        log back into this application.
+      </p>
+      <p>Your data will not be saved.</p>
+    </cds-modal-body>
+    <cds-modal-footer>
+      <cds-modal-footer-button kind="secondary" data-modal-close class="cds--modal-close-btn">
+        Cancel
+      </cds-modal-footer-button>
+
+      <cds-modal-footer-button
+        kind="danger"
+        class="cds--modal-submit-btn"
+        v-on:click="logoutAndRedirect"
+      >
+        Logout and redirect
+        <Logout16 slot="icon" />
+      </cds-modal-footer-button>
+
+    </cds-modal-footer>
+  </cds-modal>
 </template>

frontend/src/pages/bceidform/BusinessInformationWizardStep.vue

@@ -228,7 +228,7 @@ watch(showBirthDate, (value) => {
 <template>
   <radio-input-component
     id="businessType"
-    label="Type of business (choose one of these options)"
+    label="Type of business"
     required-label
     :initialValue="formData?.businessInformation?.businessType"
     :modelValue="[

frontend/src/pages/bceidform/ReviewWizardStep.vue

@@ -56,17 +56,20 @@ onMounted(() => {
 <template>
   <div class="grouping-05">
     <label class="heading-03">Business information</label>
-    <div class="grouping-01">
-      <p class="heading-02 review-icon-title">
-        <Enterprise20 />
-        {{ formData.businessInformation.businessName }}
-      </p>
-      <p class="body-compact-01" id="clientTypeId">
-        {{ clientType.text }}
-      </p>
-      <p class="body-compact-01" id="birthdate" v-if="formData.businessInformation.birthdate">
-        Proprietor’s birthdate: {{ formData.businessInformation.birthdate }}
-      </p>
+    <div class="grouping-22">
+      <div class="grouping-01">
+        <p class="heading-02 review-icon-title">
+          <Enterprise20 />
+          {{ formData.businessInformation.businessName }}
+        </p>
+        <p class="body-compact-01" id="clientTypeId">
+          {{ clientType.text }}
+        </p>
+      </div>
+      <div v-if="formData.businessInformation.birthdate">
+        <p class="label-01">Proprietor’s birthdate</p>
+        <p class="body-compact-01">{{ formData.businessInformation.birthdate }}</p>
+      </div>
     </div>
     <div class="grouping-06">
       <cds-button kind="tertiary" @click.prevent="goToStep(0)">
@@ -85,10 +88,12 @@ onMounted(() => {
         <LocationStar20 v-if="index === 0" />
         <Location20 v-else />{{ address.locationName }}
       </span>
-      <span class="body-compact-01">{{ address.streetAddress }}</span>
-      <span class="body-compact-01">{{ address.city }}, {{ address.province.text }}</span>
-      <span class="body-compact-01">{{ address.country.text }}</span>
-      <span class="body-compact-01">{{ address.postalCode }}</span>
+      <div class="grouping-23">
+        <span class="body-compact-01">{{ address.streetAddress }}</span>
+        <span class="body-compact-01">{{ address.city }}, {{ address.province.text }}</span>
+        <span class="body-compact-01">{{ address.country.text }}</span>
+        <span class="body-compact-01">{{ address.postalCode }}</span>
+      </div>
     </div>
     <div class="grouping-06">
       <cds-button kind="tertiary" @click.prevent="goToStep(1)">
@@ -107,12 +112,14 @@ onMounted(() => {
       <span class="heading-02 review-icon-title">
         <User20 />{{ contact.firstName }} {{ contact.lastName }}
       </span>
-      <span class="body-compact-01">
-        {{ contact.locationNames.map((codeDesc) => codeDesc.text).join(', ') }}
-      </span>
-      <span class="body-compact-01">{{ contact.contactType.text }}</span>
-      <span class="body-compact-01">{{ contact.email }}</span>
-      <span class="body-compact-01">{{ contact.phoneNumber }}</span>
+      <div class="grouping-23">
+        <span class="body-compact-01">
+          {{ contact.locationNames.map((codeDesc) => codeDesc.text).join(', ') }}
+        </span>
+        <span class="body-compact-01">{{ contact.contactType.text }}</span>
+        <span class="body-compact-01">{{ contact.email }}</span>
+        <span class="body-compact-01">{{ contact.phoneNumber }}</span>
+      </div>
     </div>
     <div class="grouping-06">
       <cds-button kind="tertiary" @click.prevent="goToStep(2)">

frontend/tests/components/components/grouping/ContactGroupComponent.cy.ts

@@ -50,6 +50,60 @@ describe("<ContactGroupComponent />", () => {
       cy.get("#email_0").contains(contact.email).should("be.visible");
 
       cy.get("#phoneNumber_0").should("be.visible").and("have.value", "");
+
+      cy.focused().should('have.id', 'phoneNumber_0');
+    });
+  });
+
+  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: 1,
+              modelValue: {
+                ...contact,
+                firstName: contact.firstName + " fault",
+              },
+              enabled: true,
+              roleList: roles,
+              addressList: addresses,
+              validations: [dummyValidation()],
+            },
+          });
+        });
+      });
+    });
+
+    cy.get("@contactFixture").then((contact: Contact) => {
+      cy.get("#firstName_1")
+        .should("be.visible")
+        .and("have.value", contact.firstName + " fault");
+
+      cy.get("#firstName_1")
+        .shadow()
+        .find(".cds--form-requirement")
+        .should("be.visible")
+        .find("slot")
+        .and("include.text", "Error");
+
+      cy.get("#lastName_1")
+        .should("be.visible")
+        .and("have.value", contact.lastName);
+
+      cy.get("#lastName_1")
+        .shadow()
+        .find(".cds--form-requirement")
+        .should("be.visible")
+        .find("slot")
+        .and("include.text", "Error");
+
+      cy.get("#email_1").should("be.visible").and("have.value", contact.email);
+
+      cy.get("#phoneNumber_1").should("be.visible").and("have.value", "");
+
+      cy.focused().should('have.id', 'firstName_1');
     });
   });
 
@@ -78,9 +132,6 @@ describe("<ContactGroupComponent />", () => {
 
     cy.get("#addressname_0").should("be.visible").and("have.value", "");
 
-    // This seems to be useful in the PC, but harmful in the pipeline.
-    // cy.wait(100);
-
     cy.get("#addressname_0")
       .click()
       .find('cds-multi-select-item[data-value="Mailing address"]')
@@ -183,6 +234,52 @@ describe("<ContactGroupComponent />", () => {
     cy.get("#addressname_0").should("be.visible").and("have.value", "");
   });
 
+  it("should logout and redirect to BCeID", () => {
+    const $session = {
+      logOut() {},
+    };
+    cy.get("@contactFixture").then((contact: Contact) => {
+      cy.get("@rolesFixture").then((roles) => {
+        cy.get("@addressesFixture").then((addresses) => {
+          cy.mount(ContactGroupComponent, {
+            props: {
+              id: 0,
+              modelValue: {
+                ...contact,
+                addresses: [addresses[0], addresses[1]],
+              },
+              enabled: true,
+              roleList: roles,
+              addressList: addresses,
+              validations: [],
+            },
+            global: {
+              config: {
+                globalProperties: {
+                  $session,
+                },
+              },
+            },
+          });
+        });
+      });
+    });
+
+    cy.focused().should('have.id', 'phoneNumber_0');
+
+    cy.get("#change-personal-info-link").click();
+
+    cy.get("#logout-and-redirect-modal").should("be.visible");
+
+    cy.spy(window, "open").as("windowOpen");
+    cy.spy($session, "logOut").as("sessionLogOut");
+
+    cy.get('#logout-and-redirect-modal > cds-modal-footer > .cds--modal-submit-btn').click();
+
+    cy.get("@windowOpen").should("be.calledWith", "https://www.bceid.ca/", "_blank", "noopener");
+    cy.get("@sessionLogOut").should("be.called");
+  });
+
   describe('when it has last emitted "valid" with false due to a single, not empty, invalid field', () => {
     const genericTest = (
       fieldSelector: string,