-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #102 from bcgov/feature/assistance
Add assistance flow for submission intake
- Loading branch information
Showing
6 changed files
with
270 additions
and
36 deletions.
There are no files selected for viewing
31 changes: 31 additions & 0 deletions
31
frontend/src/components/housing/enquiry/EnquiryIntakeConfirmation.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| <script setup lang="ts"> | ||
| import { Message } from '@/lib/primevue'; | ||
| import { RouteName } from '@/utils/enums/application'; | ||
| // Props | ||
| type Props = { | ||
| assignedActivityId: string; | ||
| }; | ||
| const props = withDefaults(defineProps<Props>(), {}); | ||
| </script> | ||
|
|
||
| <template> | ||
| <div> | ||
| <h2>Confirmation of Submission</h2> | ||
| <Message | ||
| class="border-none" | ||
| severity="success" | ||
| :closable="false" | ||
| > | ||
| Your enquiry has been successfully submitted. | ||
| </Message> | ||
| <h3>Confirmation ID: {{ props.assignedActivityId }}</h3> | ||
| <div> | ||
| A Housing Navigator will review your submission and contact you. Please check your email for the confirmation | ||
| email and keep the confirmation ID for future reference. | ||
| </div> | ||
| <div class="mt-4"><router-link :to="{ name: RouteName.HOME }">Go to Homepage</router-link></div> | ||
| </div> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
176 changes: 176 additions & 0 deletions
176
frontend/src/components/housing/submission/SubmissionAssistance.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,176 @@ | ||
| <script setup lang="ts"> | ||
| import { Button, useConfirm, useToast } from '@/lib/primevue'; | ||
| import { ref } from 'vue'; | ||
| import { enquiryService } from '@/services'; | ||
| import { BasicResponse } 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 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 emit = defineEmits(['onSubmitAssistance']); | ||
| const onSubmit = async (values: any) => { | ||
| try { | ||
| const formattedData = Object.assign( | ||
| { | ||
| basic: { | ||
| applyForPermitConnect: BasicResponse.NO, | ||
| enquiryDescription: 'Assistance requested', | ||
| isRelated: BasicResponse.NO | ||
| }, | ||
| submit: true | ||
| }, | ||
| { applicant: values?.[IntakeFormCategory.APPLICANT] } | ||
| ); | ||
| const enquiryResponse = await enquiryService.createDraft(formattedData); | ||
| if (enquiryResponse.data.activityId) { | ||
| toast.success('Form saved'); | ||
| emit('onSubmitAssistance', 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> |
31 changes: 31 additions & 0 deletions
31
frontend/src/components/housing/submission/SubmissionIntakeConfirmation.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| <script setup lang="ts"> | ||
| import { Message } from '@/lib/primevue'; | ||
| import { RouteName } from '@/utils/enums/application'; | ||
| // Props | ||
| type Props = { | ||
| assignedActivityId: string; | ||
| }; | ||
| const props = withDefaults(defineProps<Props>(), {}); | ||
| </script> | ||
|
|
||
| <template> | ||
| <div> | ||
| <h2>Confirmation of Submission</h2> | ||
| <Message | ||
| class="border-none" | ||
| severity="success" | ||
| :closable="false" | ||
| > | ||
| Your application has been successfully submitted. | ||
| </Message> | ||
| <h3>Confirmation ID: {{ props.assignedActivityId }}</h3> | ||
| <div> | ||
| Your submission will be reviewed by a Housing Navigator. You may be contacted if needed. Please check your email | ||
| for the confirmation email and keep the confirmation ID for future reference. | ||
| </div> | ||
| <div class="mt-4"><router-link :to="{ name: RouteName.HOME }">Go to Homepage</router-link></div> | ||
| </div> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters