Stepper style updates

app/src/controllers/submission.ts

@@ -298,10 +298,10 @@ const controller = {
         trackingId: x.trackingId,
         status: x.status ?? PermitStatus.APPLIED,
         needed: x.needed ?? PermitNeeded.YES,
-        statusLastVerified: x.statusLastVerified,
+        statusLastVerified: null,
         issuedPermitId: null,
         authStatus: x.authStatus ?? PermitAuthorizationStatus.IN_REVIEW,
-        submittedDate: null,
+        submittedDate: x.submittedDate,
         adjudicationDate: null
       }));
     }
@@ -314,7 +314,7 @@ const controller = {
         trackingId: null,
         status: x.status ?? PermitStatus.NEW,
         needed: x.needed ?? PermitNeeded.UNDER_INVESTIGATION,
-        statusLastVerified: x.statusLastVerified,
+        statusLastVerified: null,
         issuedPermitId: null,
         authStatus: x.authStatus ?? PermitAuthorizationStatus.NONE,
         submittedDate: null,

app/src/validators/appliedPermit.ts

@@ -7,6 +7,6 @@ export const appliedPermit = Joi.object({
   status: Joi.string()
     .valid(...PERMIT_STATUS_LIST)
     .allow(null),
-  statusLastVerified: Joi.date().max('now').allow(null),
+  submittedDate: Joi.date().max('now').allow(null),
   trackingId: Joi.string().allow(null)
 });

app/tests/unit/controllers/submission.spec.ts

@@ -467,20 +467,19 @@ describe('createSubmission', () => {
             permitTypeId: 1,
             trackingId: '123',
             status: PermitStatus.APPLIED,
-            statusLastVerified: now
+            submittedDate: now
           },
           {
             permitTypeId: 3,
             trackingId: '456',
             status: PermitStatus.APPLIED,
-            statusLastVerified: now
+            submittedDate: now
           }
         ],
         investigatePermits: [
           {
             permitTypeId: 12,
-            needed: PermitNeeded.UNDER_INVESTIGATION,
-            statusLastVerified: now
+            needed: PermitNeeded.UNDER_INVESTIGATION
           }
         ]
       },
@@ -506,7 +505,7 @@ describe('createSubmission', () => {
         activityId: '00000000',
         trackingId: '123',
         status: PermitStatus.APPLIED,
-        statusLastVerified: now
+        submittedDate: now
       })
     );
     expect(createPermitSpy).toHaveBeenNthCalledWith(
@@ -516,16 +515,15 @@ describe('createSubmission', () => {
         activityId: '00000000',
         trackingId: '456',
         status: PermitStatus.APPLIED,
-        statusLastVerified: now
+        submittedDate: now
       })
     );
     expect(createPermitSpy).toHaveBeenNthCalledWith(
       3,
       expect.objectContaining({
         permitTypeId: 12,
         activityId: '00000000',
-        needed: PermitNeeded.UNDER_INVESTIGATION,
-        statusLastVerified: now
+        needed: PermitNeeded.UNDER_INVESTIGATION
       })
     );
   });
@@ -809,20 +807,19 @@ describe('submitDraft', () => {
             permitTypeId: 1,
             trackingId: '123',
             status: PermitStatus.APPLIED,
-            statusLastVerified: now
+            submittedDate: now
           },
           {
             permitTypeId: 3,
             trackingId: '456',
             status: PermitStatus.APPLIED,
-            statusLastVerified: now
+            submittedDate: now
           }
         ],
         investigatePermits: [
           {
             permitTypeId: 12,
-            needed: PermitNeeded.UNDER_INVESTIGATION,
-            statusLastVerified: now
+            needed: PermitNeeded.UNDER_INVESTIGATION
           }
         ]
       },
@@ -849,7 +846,7 @@ describe('submitDraft', () => {
         activityId: '00000000',
         trackingId: '123',
         status: PermitStatus.APPLIED,
-        statusLastVerified: now
+        submittedDate: now
       })
     );
     expect(createPermitSpy).toHaveBeenNthCalledWith(
@@ -859,16 +856,15 @@ describe('submitDraft', () => {
         activityId: '00000000',
         trackingId: '456',
         status: PermitStatus.APPLIED,
-        statusLastVerified: now
+        submittedDate: now
       })
     );
     expect(createPermitSpy).toHaveBeenNthCalledWith(
       3,
       expect.objectContaining({
         permitTypeId: 12,
         activityId: '00000000',
-        needed: PermitNeeded.UNDER_INVESTIGATION,
-        statusLastVerified: now
+        needed: PermitNeeded.UNDER_INVESTIGATION
       })
     );
   });

app/tests/unit/validators/appliedPermits.spec.ts

@@ -6,7 +6,7 @@ describe('appliedPermitsSchema', () => {
     const appliedPermits = {
       permitTypeId: '123AC!',
       status: PermitStatus.NEW,
-      statusLastVerified: '2021-01-01',
+      submittedDate: '2021-01-01',
       trackingId: 'test'
     };
     const result = appliedPermit.validate(appliedPermits);
@@ -16,7 +16,7 @@ describe('appliedPermitsSchema', () => {
   it('should not accept null for permitTypeId', () => {
     const appliedPermits = {
       status: PermitStatus.APPLIED,
-      statusLastVerified: '2021-01-01',
+      submittedDate: '2021-01-01',
       trackingId: 'test tracking id'
     };
     const result = appliedPermit.validate(appliedPermits);
@@ -27,7 +27,7 @@ describe('appliedPermitsSchema', () => {
     const appliedPermits = {
       permitTypeId: 123,
       status: PermitStatus.COMPLETED,
-      statusLastVerified: '2021-01-01',
+      submittedDate: '2021-01-01',
       trackingId: 'test'
     };
     const result = appliedPermit.validate(appliedPermits);
@@ -38,18 +38,18 @@ describe('appliedPermitsSchema', () => {
     const appliedPermits = {
       permitTypeId: 123,
       status: 'Test',
-      statusLastVerified: '2021-01-01',
+      submittedDate: '2021-01-01',
       trackingId: 'test'
     };
     const result = appliedPermit.validate(appliedPermits);
     expect(result.error).toBeDefined();
   });
 
-  it('should only accept a valid date for statusLastVerified', () => {
+  it('should only accept a valid date for submitted date', () => {
     const appliedPermits = {
       permitTypeId: 123,
       status: PermitStatus.APPLIED,
-      statusLastVerified: 'not-a-date',
+      submittedDate: 'not-a-date',
       trackingId: 'test'
     };
     const result = appliedPermit.validate(appliedPermits);
@@ -60,7 +60,7 @@ describe('appliedPermitsSchema', () => {
     const appliedPermits = {
       permitTypeId: 123,
       status: PermitStatus.APPLIED,
-      statusLastVerified: new Date(Date.now() + 1000).toISOString(),
+      submittedDate: new Date(Date.now() + 1000).toISOString(),
       trackingId: 'test'
     };
     const result = appliedPermit.validate(appliedPermits);

frontend/src/assets/main.scss

@@ -103,6 +103,14 @@ label {
   color: $app-primary !important;
 }
 
+.app-error-background {
+  background-color: $app-error !important;
+}
+
+.app-error-border {
+  border-color: $app-error !important;
+}
+
 .app-error-color {
   color: $app-error !important;
 }

frontend/src/components/form/StepperHeader.vue

@@ -7,30 +7,61 @@ const {
   activeStep,
   clickCallback = () => {},
   title,
-  icon
+  icon,
+  errors = false
 } = defineProps<{
   index: number;
   activeStep: number;
   clickCallback?: Function;
   title: string;
   icon: string;
+  errors?: boolean;
 }>();
 </script>
 
 <template>
-  <Button
-    class="p-button-text"
-    @click="clickCallback()"
-  >
-    <font-awesome-icon
-      class="pr-2"
-      :icon="`fa-solid ${icon}`"
-    />
+  <div class="flex flex-column align-items-center">
+    <Button
+      class="bg-transparent border-none inline-flex flex-column gap-2 p-1"
+      :class="[{ 'outer-border': index === activeStep, 'outer-border-error': index === activeStep && errors }]"
+      @click="clickCallback()"
+    >
+      <span
+        class="border-circle border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center"
+        :class="[
+          {
+            'bg-primary border-primary': index <= activeStep,
+            'surface-border': index > activeStep,
+            'border-1, p-4': index === activeStep,
+            'app-error-background app-error-border': errors
+          }
+        ]"
+      >
+        <font-awesome-icon
+          :icon="`fa-solid ${icon}`"
+          :class="[
+            { 'app-primary-color': index > activeStep && !errors, 'app-error-background app-error-border': errors }
+          ]"
+        />
+      </span>
+    </Button>
     <span
       class="text-xl"
-      :class="{ 'font-bold': index === activeStep }"
+      :class="{ 'font-bold': index === activeStep, underline: index === activeStep, 'app-error-color': errors }"
     >
       {{ title }}
     </span>
-  </Button>
+  </div>
 </template>
+
+<style lang="scss" scoped>
+.outer-border {
+  border-radius: 50%;
+  box-shadow: 0 0 0 3px #c1ddfc; // TODO: Blue 30
+}
+
+.outer-border-error {
+  border-radius: 50%;
+  box-shadow: 0 0 0 3px $app-error !important;
+}
+</style>

frontend/src/components/housing/enquiry/EnquiryIntakeForm.vue

@@ -3,7 +3,7 @@
 import { Form } from 'vee-validate';
 import { computed, onBeforeMount, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { array, object, string } from 'yup';
 
 import BackButton from '@/components/common/BackButton.vue';
 import {
@@ -29,6 +29,7 @@
 import type { Ref } from 'vue';
 import type { IInputEvent } from '@/interfaces';
 import type { Submission } from '@/types';
+import { omit } from '@/utils/utils';
 
 // Props
 const { enquiryId = undefined } = defineProps<{
@@ -49,7 +50,7 @@
 
 // Form validation schema
 const formSchema = object({
-  contacts: array().of(object(contactValidator)),
+  ...contactValidator,
   [IntakeFormCategory.BASIC]: object({
     isRelated: string().required().oneOf(YES_NO_LIST).label('Related to existing application'),
     relatedActivityId: string().when('isRelated', {
@@ -130,7 +131,12 @@
     initialFormValues.value = {
       activityId: response?.activityId,
       enquiryId: response?.enquiryId,
-      contacts: response?.contacts,
+      contactFirstName: response?.contacts[0].firstName,
+      contactLastName: response?.contacts[0].lastName,
+      contactPhoneNumber: response?.contacts[0].phoneNumber,
+      contactEmail: response?.contacts[0].email,
+      contactApplicantRelationship: response?.contacts[0].contactApplicantRelationship,
+      contactPreference: response?.contacts[0].contactPreference,
       basic: {
         isRelated: response?.isRelated,
         relatedActivityId: response?.relatedActivityId,
@@ -170,7 +176,32 @@
       }
     }
 
-    enquiryResponse = await enquiryService.createEnquiry(data);
+    // Convert contact fields into contacts array object then remove form keys from data
+    const enquiryData = omit(
+      {
+        ...data,
+        contacts: [
+          {
+            firstName: data.contactFirstName,
+            lastName: data.contactLastName,
+            phoneNumber: data.contactPhoneNumber,
+            email: data.contactEmail,
+            contactApplicantRelationship: data.contactApplicantRelationship,
+            contactPreference: data.contactPreference
+          }
+        ]
+      },
+      [
+        'contactFirstName',
+        'contactLastName',
+        'contactPhoneNumber',
+        'contactEmail',
+        'contactApplicantRelationship',
+        'contactPreference'
+      ]
+    );
+
+    enquiryResponse = await enquiryService.createEnquiry(enquiryData);
 
     if (enquiryResponse.data.activityId && enquiryResponse.data.enquiryId) {
       formRef.value?.setFieldValue('activityId', enquiryResponse.data.activityId);
@@ -258,44 +289,44 @@
           <div class="formgrid grid">
             <InputText
               class="col-6"
-              :name="`contacts[0].firstName`"
+              name="contactFirstName"
               label="First name"
               :bold="false"
               :disabled="!editable"
             />
             <InputText
               class="col-6"
-              :name="`contacts[0].lastName`"
+              name="contactLastName"
               label="Last name"
               :bold="false"
               :disabled="!editable"
             />
             <InputMask
               class="col-6"
-              :name="`contacts[0].phoneNumber`"
+              name="contactPhoneNumber"
               mask="(999) 999-9999"
               label="Phone number"
               :bold="false"
               :disabled="!editable"
             />
             <InputText
               class="col-6"
-              :name="`contacts[0].email`"
+              name="contactEmail"
               label="Email"
               :bold="false"
               :disabled="!editable"
             />
             <Dropdown
               class="col-6"
-              :name="`contacts[0].contactApplicantRelationship`"
+              name="contactApplicantRelationship"
               label="Relationship to project"
               :bold="false"
               :disabled="!editable"
               :options="PROJECT_RELATIONSHIP_LIST"
             />
             <Dropdown
               class="col-6"
-              :name="`contacts[0].contactPreference`"
+              :name="`contactPreference`"
               label="Preferred contact method"
               :bold="false"
               :disabled="!editable"