Add assistance flow for submission intake

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

@@ -22,18 +22,20 @@ import type { Ref } from 'vue';
 type Props = {
   activityId?: string;
   enquiryId?: string;
+  assignedActivityId?: string;
 };
 
 const props = withDefaults(defineProps<Props>(), {
   activityId: undefined,
-  enquiryId: undefined
+  enquiryId: undefined,
+  assignedActivityId: undefined
 });
 
 // Store
 const { getConfig } = storeToRefs(useConfigStore());
 
 // State
-const assignedActivityId: Ref<string | undefined> = ref(undefined);
+const assignedActivityId: Ref<string | undefined> = ref(props.assignedActivityId);
 const editable: Ref<boolean> = ref(true);
 const formRef: Ref<InstanceType<typeof Form> | null> = ref(null);
 const initialFormValues: Ref<any | undefined> = ref(undefined);

frontend/src/components/housing/submission/SubmissionAssistance.vue

@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import { Button, useConfirm, useToast } from '@/lib/primevue';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { enquiryService } from '@/services';
+import { BasicResponse, RouteName } from '@/utils/enums/application';
+import { IntakeFormCategory } from '@/utils/enums/housing';
+
+import type { Ref } from 'vue';
+
+// Props
+type Prop = {
+  formErrors: Record<string, string | undefined>;
+  formValues: { [key: string]: string };
+};
+
+const props = withDefaults(defineProps<Prop>(), {});
+
+// State
+const showTab: Ref<boolean> = ref(true);
+
+// Actions
+const confirm = useConfirm();
+const router = useRouter();
+const toast = useToast();
+
+const checkApplicantValuesValid = (
+  values: { [key: string]: string },
+  errors: Record<string, string | undefined>
+): boolean => {
+  // Check applicant section is filled
+  let applicant = values?.[IntakeFormCategory.APPLICANT];
+  if (Object.values(applicant).some((x) => !x)) {
+    return false;
+  }
+
+  // Check applicant section is valid
+  let isValid = true;
+  const errorList = Object.keys(errors);
+
+  for (const error of errorList) {
+    if (error.includes(IntakeFormCategory.APPLICANT)) {
+      isValid = false;
+      break;
+    }
+  }
+  return isValid;
+};
+
+const confirmSubmit = (data: any) => {
+  confirm.require({
+    message: 'Are you sure you wish to submit this form? Please review the form before submitting.',
+    header: 'Please confirm submission',
+    acceptLabel: 'Confirm',
+    rejectLabel: 'Cancel',
+    accept: () => onSubmit(data)
+  });
+};
+
+const onSubmit = async (values: any) => {
+  try {
+    const tempData = Object.assign(
+      {
+        basic: {
+          applyForPermitConnect: BasicResponse.NO,
+          enquiryDescription: 'Assistance requested',
+          isRelated: BasicResponse.NO
+        },
+        submit: true
+      },
+      { applicant: values?.[IntakeFormCategory.APPLICANT] }
+    );
+
+    const enquiryResponse = await enquiryService.createDraft(tempData);
+
+    if (enquiryResponse.data.activityId) {
+      toast.success('Form saved');
+      router.push({
+        name: RouteName.HOUSING_ENQUIRY_INTAKE,
+        query: { assignedActivityId: enquiryResponse.data.activityId }
+      });
+    } else {
+      toast.error('Failed to submit enquiry');
+    }
+  } catch (e: any) {
+    toast.error('Failed to save enquiry', e);
+  }
+};
+</script>
+
+<template>
+  <Teleport to="#app">
+    <div :class="{ 'teleport-container': true, '--open': showTab }">
+      <div
+        class="assistance-tab pb-3 pt-3 pr-1 pl-1"
+        @click="showTab = !showTab"
+      >
+        <div class="tab-text">Assistance</div>
+        <font-awesome-icon
+          class="-rotate-90 mt-2"
+          icon="fa-solid fa-circle-question"
+        />
+      </div>
+      <div class="assistance-modal">
+        <div class="font-bold mb-3">Need assistance with the form?</div>
+        <div>
+          Are you unable to complete this form and need assistance? Please follow the instructions below. You will be
+          contacted by a housing navigator.
+        </div>
+        <ol class="pl-3">
+          <li class="mb-1">
+            Make sure the
+            <span class="font-bold">'Primary Contact'</span>
+            section under
+            <span class="font-bold">'Contact Information'</span>
+            tab is filled out.
+          </li>
+          <li class="mb-1">Try to fill out the form as much as you can.</li>
+          <li class="mb-1">Click "Get assistance" below to submit the form.</li>
+        </ol>
+        <div class="flex justify-content-center">
+          <Button
+            label="Get assistance"
+            :disabled="!checkApplicantValuesValid(props.formValues, props.formErrors)"
+            @click="() => confirmSubmit(props.formValues)"
+          />
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped lang="scss">
+.teleport-container {
+  position: fixed;
+  right: 0%;
+  bottom: 0%;
+  z-index: 5;
+  translate: 0rem;
+  transition: all 0.75s ease-in;
+
+  &.--open {
+    translate: 20rem;
+    transition: all 0.75s ease-out;
+  }
+}
+
+.assistance-modal {
+  overflow: hidden;
+  position: relative;
+  bottom: 0rem;
+  right: 0rem;
+  padding: 1rem;
+  background-color: white;
+  border-style: solid;
+  border-color: #fdb913;
+  border-width: 3px;
+  width: 20rem;
+}
+
+.assistance-tab {
+  cursor: pointer;
+  position: absolute;
+  top: 0rem;
+  transform: translate(-100%, 0%);
+  writing-mode: vertical-lr;
+  background-color: #fdb913;
+  border-top-left-radius: 0.5rem;
+  border-bottom-left-radius: 0.5rem;
+  z-index: 10;
+  color: white;
+  display: flex;
+
+  .tab-text {
+    transform: rotate(180deg);
+  }
+}
+</style>

frontend/src/components/housing/submission/SubmissionIntakeForm.vue

@@ -21,6 +21,7 @@ import {
   TextArea
 } from '@/components/form';
 import CollectionDisclaimer from '@/components/housing/CollectionDisclaimer.vue';
+import SubmissionAssistance from '@/components/housing/submission/SubmissionAssistance.vue';
 import { submissionIntakeSchema } from '@/components/housing/submission/SubmissionIntakeSchema';
 import {
   Accordion,
@@ -356,14 +357,19 @@ onBeforeMount(async () => {
     <Form
       v-if="initialFormValues"
       id="form"
-      v-slot="{ setFieldValue, values }"
+      v-slot="{ setFieldValue, errors, values }"
       ref="formRef"
       :initial-values="initialFormValues"
       :validation-schema="submissionIntakeSchema"
       @invalid-submit="(e) => onInvalidSubmit(e)"
       @submit="confirmSubmit"
       @change="formUpdated = true"
     >
+      <SubmissionAssistance
+        :form-errors="errors"
+        :form-values="values"
+      />
+
       <input
         type="hidden"
         name="submissionId"

frontend/src/views/housing/enquiry/EnquiryIntakeView.vue

@@ -9,11 +9,13 @@ import type { Ref } from 'vue';
 type Props = {
   activityId?: string;
   enquiryId?: string;
+  assignedActivityId?: string;
 };
 
 const props = withDefaults(defineProps<Props>(), {
   activityId: undefined,
-  enquiryId: undefined
+  enquiryId: undefined,
+  assignedActivityId: undefined
 });
 
 // State
@@ -30,5 +32,6 @@ onMounted(async () => {
     v-if="!loading"
     :activity-id="props.activityId"
     :enquiry-id="props.enquiryId"
+    :assigned-activity-id="props.assignedActivityId"
   />
 </template>