Merge pull request #71 from bcgov/stories/ECER-713

ECER-713: Contact Information step of application wizard

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/Wizard.vue

@@ -1,7 +1,7 @@
 <template>
   <PageContainer>
     <v-stepper
-      v-model="currentStep"
+      v-model="wizardStore.step"
       min-height="100dvh"
       :alt-labels="true"
       bg-color="background"
@@ -15,7 +15,12 @@
           <v-container>
             <v-row>
               <v-col cols="12" md="8" lg="6" xl="4">
-                <EceForm :form="step.form" />
+                <EceForm
+                  :form="step.form"
+                  :form-data="wizardStore.wizardData"
+                  @updated-form-data="wizardStore.setWizardData"
+                  @updated-validation="$emit('updatedValidation', $event)"
+                />
               </v-col>
             </v-row>
           </v-container>
@@ -25,11 +30,11 @@
         <v-container>
           <v-row class="justify-space-between ga-4" no-gutters>
             <v-col cols="auto" class="mr-auto">
-              <v-btn rounded="lg" variant="outlined" color="primary" aut @click="handleBack()">Back</v-btn>
+              <v-btn rounded="lg" variant="outlined" color="primary" aut @click="$emit('back')">Back</v-btn>
             </v-col>
             <v-col cols="auto">
-              <v-btn rounded="lg" variant="outlined" color="primary" class="mr-4" primary @click="handleSaveAsDraft()">Save as Draft</v-btn>
-              <v-btn rounded="lg" color="primary" @click="handleSaveAndContinue()">Save and Continue</v-btn>
+              <v-btn rounded="lg" variant="outlined" color="primary" class="mr-4" primary @click="$emit('saveAsDraft')">Save as Draft</v-btn>
+              <v-btn rounded="lg" color="primary" @click="$emit('saveAndContinue')">Save and Continue</v-btn>
             </v-col>
           </v-row>
         </v-container>
@@ -44,7 +49,10 @@ import { defineComponent, type PropType } from "vue";
 import EceForm from "@/components/Form.vue";
 import PageContainer from "@/components/PageContainer.vue";
 import applicationWizard from "@/config/application-wizard";
-import type { Wizard } from "@/types/wizard";
+import { useAlertStore } from "@/store/alert";
+import { useUserStore } from "@/store/user";
+import { userWizardStore } from "@/store/wizard";
+import type { Step, Wizard } from "@/types/wizard";
 
 export default defineComponent({
   name: "Wizard",
@@ -55,31 +63,29 @@ export default defineComponent({
       default: () => applicationWizard,
     },
   },
+  emits: {
+    saveAsDraft: () => true,
+    saveAndContinue: () => true,
+    back: () => true,
+    updatedValidation: (_validation: boolean | null) => true,
+  },
+  setup: async () => {
+    const wizardStore = userWizardStore();
+    const userStore = useUserStore();
+    const alertStore = useAlertStore();
 
+    return {
+      wizardStore,
+      userStore,
+      alertStore,
+    };
+  },
   data: () => ({
-    currentStep: 1,
-    formData: {},
+    isFormValid: null as boolean | null,
   }),
-  computed: {
-    formRef(): string {
-      return `form-${this.currentStep}`;
-    },
-  },
   methods: {
     getStepTitles() {
-      return this.wizard.steps.map((step) => step.title);
-    },
-    async handleSaveAndContinue() {
-      const valid = await (this.$refs[this.formRef] as any).validate();
-      if (valid.valid && this.currentStep < this.wizard.steps.length) {
-        this.currentStep++;
-      }
-    },
-    handleSaveAsDraft() {
-      console.log("Save as Draft");
-    },
-    handleBack() {
-      if (this.currentStep > 1) this.currentStep--;
+      return Object.values(this.wizard.steps).map((step: Step) => step.title);
     },
   },
 });

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/Application.vue

@@ -0,0 +1,111 @@
+<template>
+  <Wizard
+    :wizard="applicationWizard"
+    :wizard-data="wizardStore.wizardData"
+    @save-and-continue="handleSaveAndContinue"
+    @save-as-draft="handleSaveAsDraft"
+    @back="handleBack"
+    @updated-validation="isFormValid = $event"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { getProfile, putProfile } from "@/api/profile";
+import Wizard from "@/components/Wizard.vue";
+import applicationWizard from "@/config/application-wizard";
+import { useAlertStore } from "@/store/alert";
+import { useUserStore } from "@/store/user";
+import { userWizardStore } from "@/store/wizard";
+
+import { AddressType } from "../inputs/EceAddresses.vue";
+
+export default defineComponent({
+  name: "Application",
+  components: { Wizard },
+  setup: async () => {
+    const wizardStore = userWizardStore();
+    const userStore = useUserStore();
+    const alertStore = useAlertStore();
+
+    const userProfile = await getProfile();
+    if (userProfile !== null) {
+      wizardStore.initializeWizard(applicationWizard, {
+        [applicationWizard.steps.profile.form.inputs.legalFirstName.id]: userProfile.firstName,
+        [applicationWizard.steps.profile.form.inputs.legalLastName.id]: userProfile.lastName,
+        [applicationWizard.steps.profile.form.inputs.dateOfBirth.id]: userProfile.dateOfBirth,
+        [applicationWizard.steps.profile.form.inputs.addresses.id]: {
+          [AddressType.RESIDENTIAL]: userProfile.residentialAddress || userStore.oidcAddress,
+          [AddressType.MAILING]: userProfile.mailingAddress || userStore.oidcAddress,
+        },
+        [applicationWizard.steps.profile.form.inputs.email.id]: userProfile.email,
+        [applicationWizard.steps.profile.form.inputs.legalMiddleName.id]: userProfile.middleName,
+        [applicationWizard.steps.profile.form.inputs.preferredName.id]: userProfile.preferredName,
+        [applicationWizard.steps.profile.form.inputs.alternateContactNumber.id]: userProfile.alternateContactPhone,
+        [applicationWizard.steps.profile.form.inputs.primaryContactNumber.id]: userProfile.phone,
+      });
+    } else {
+      wizardStore.initializeWizard(applicationWizard, {
+        [applicationWizard.steps.profile.form.inputs.legalFirstName.id]: userStore.oidcUserInfo.firstName,
+        [applicationWizard.steps.profile.form.inputs.legalLastName.id]: userStore.oidcUserInfo.lastName,
+        [applicationWizard.steps.profile.form.inputs.dateOfBirth.id]: userStore.oidcUserInfo.dateOfBirth,
+        [applicationWizard.steps.profile.form.inputs.addresses.id]: {
+          [AddressType.RESIDENTIAL]: userStore.oidcAddress,
+          [AddressType.MAILING]: userStore.oidcAddress,
+        },
+        [applicationWizard.steps.profile.form.inputs.email.id]: userStore.oidcUserInfo.email,
+        [applicationWizard.steps.profile.form.inputs.primaryContactNumber.id]: userStore.oidcUserInfo.phone,
+      });
+    }
+
+    return { applicationWizard, wizardStore, alertStore, userStore };
+  },
+  data: () => ({
+    isFormValid: null as boolean | null,
+  }),
+  methods: {
+    handleSaveAndContinue() {
+      this.saveProfile();
+    },
+    handleBack() {
+      this.wizardStore.decrementStep();
+    },
+    handleSaveAsDraft() {
+      this.alertStore.setSuccessAlert("Save as Draft");
+    },
+    async saveProfile() {
+      if (!this.isFormValid) {
+        this.alertStore.setFailureAlert("Please fill out all required fields");
+      } else {
+        const success = await putProfile({
+          firstName: this.wizardStore.wizardData[applicationWizard.steps.profile.form.inputs.legalFirstName.id],
+          middleName: this.wizardStore.wizardData[applicationWizard.steps.profile.form.inputs.legalMiddleName.id],
+          preferredName: this.wizardStore.wizardData[applicationWizard.steps.profile.form.inputs.preferredName.id],
+          lastName: this.wizardStore.wizardData[applicationWizard.steps.profile.form.inputs.legalLastName.id],
+          dateOfBirth: this.wizardStore.wizardData[applicationWizard.steps.profile.form.inputs.dateOfBirth.id],
+          residentialAddress: this.wizardStore.wizardData[applicationWizard.steps.profile.form.inputs.addresses.id][AddressType.RESIDENTIAL],
+          mailingAddress: this.wizardStore.wizardData[applicationWizard.steps.profile.form.inputs.addresses.id][AddressType.MAILING],
+          email: this.wizardStore.wizardData[applicationWizard.steps.profile.form.inputs.email.id],
+          phone: this.wizardStore.wizardData[applicationWizard.steps.profile.form.inputs.primaryContactNumber.id],
+          alternateContactPhone: this.wizardStore.wizardData[applicationWizard.steps.profile.form.inputs.alternateContactNumber.id],
+        });
+
+        if (success) {
+          this.alertStore.setSuccessAlert("Profile saved successfully");
+          this.userStore.setUserInfo({
+            firstName: this.wizardStore.wizardData[applicationWizard.steps.profile.form.inputs.legalFirstName.id],
+            lastName: this.wizardStore.wizardData[applicationWizard.steps.profile.form.inputs.legalLastName.id],
+            email: this.wizardStore.wizardData[applicationWizard.steps.profile.form.inputs.email.id],
+            phone: this.wizardStore.wizardData[applicationWizard.steps.profile.form.inputs.primaryContactNumber.id],
+            dateOfBirth: this.wizardStore.wizardData[applicationWizard.steps.profile.form.inputs.dateOfBirth.id],
+          });
+          this.wizardStore.incrementStep();
+        } else {
+          this.alertStore.setFailureAlert("Profile save failed");
+        }
+      }
+    },
+  },
+});
+</script>

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/config/application-wizard.ts

@@ -6,38 +6,38 @@ import referencesForm from "./references.form";
 
 const applicationWizard: Wizard = {
   id: "form-1",
-  steps: [
-    {
+  steps: {
+    profile: {
       id: "step-1",
       title: "Contact Information",
       form: profileInformationForm,
       key: "item.1",
     },
-    {
+    education: {
       id: "step-2",
       title: "Education",
       form: educationForm,
       key: "item.2",
     },
-    {
+    references: {
       id: "step-3",
       title: "References",
       form: referencesForm,
       key: "item.3",
     },
-    {
+    review: {
       id: "step-4",
       title: "Review",
       form: profileInformationForm,
       key: "item.4",
     },
-    {
+    declaration: {
       id: "step-5",
       title: "Declaration",
       form: profileInformationForm,
       key: "item.5",
     },
-  ],
+  },
 };
 
 export default applicationWizard;

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/router.ts

@@ -73,7 +73,7 @@ const router = createRouter({
     },
     {
       path: "/application",
-      component: () => import("./components/Wizard.vue"),
+      component: () => import("./components/pages/Application.vue"),
       meta: { requiresAuth: true },
     },
     {

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/store/wizard.ts

@@ -2,11 +2,11 @@ import { defineStore } from "pinia";
 
 import type { Wizard } from "@/types/wizard";
 
-interface WizardData {
+export interface WizardData {
   [key: string]: any;
 }
 
-interface WizardState {
+export interface WizardState {
   step: number;
   wizardConfig: Wizard;
   wizardData: WizardData;
@@ -19,8 +19,22 @@ export const userWizardStore = defineStore("wizard", {
     wizardConfig: {} as Wizard,
   }),
   actions: {
+    initializeWizard(wizard: Wizard, wizardData: WizardData): void {
+      this.wizardConfig = wizard;
+      this.wizardData = wizardData;
+    },
     setWizardData(wizardData: WizardData): void {
       this.wizardData = { ...this.wizardData, ...wizardData };
     },
+    incrementStep(): void {
+      if (this.step < Object.keys(this.wizardConfig.steps).length) {
+        this.step += 1;
+      }
+    },
+    decrementStep(): void {
+      if (this.step > 1) {
+        this.step -= 1;
+      }
+    },
   },
 });

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/types/wizard.d.ts

@@ -9,5 +9,7 @@ interface Step {
 
 interface Wizard {
   id: string;
-  steps: Step[];
+  steps: {
+    [id: string]: Step;
+  };
 }