HomeDealers: Review/Submission (bcgov#1688)

* HomeDealers: Review and submit + MF Review Page * Clean up
cameron-eyds · Jan 15, 2024 · fbce4a4 · fbce4a4
1 parent 22b89ff
commit fbce4a4
Show file tree

Hide file tree

Showing 17 changed files with 194 additions and 73 deletions.
diff --git a/ppr-ui/package-lock.json b/ppr-ui/package-lock.json
diff --git a/ppr-ui/package.json b/ppr-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ppr-ui",
-  "version": "3.0.22",
+  "version": "3.0.23",
   "private": true,
   "appName": "Assets UI",
   "sbcName": "SBC Common Components",

diff --git a/ppr-ui/src/assets/styles/base.scss b/ppr-ui/src/assets/styles/base.scss
@@ -94,6 +94,10 @@ body {
     border-bottom: 1px solid #ccc;
   }
 }
+.read-only-container {
+  background-color: $gray1;
+  padding: 30px;
+}
 
 // Fonts/Icons
 h1,

diff --git a/ppr-ui/src/components/common/AccountInfo.vue b/ppr-ui/src/components/common/AccountInfo.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="account-info">
-    <h4 class="header mb-5">
+    <h2 class="header mb-5">
       {{ title }}
       <v-tooltip
         if="tooltipContent"
@@ -23,7 +23,7 @@
       <p class="fs-16">
         {{ desc }}
       </p>
-    </h4>
+    </h2>
     <v-card
       flat
       class="rounded"

diff --git a/ppr-ui/src/components/common/FormCard.vue b/ppr-ui/src/components/common/FormCard.vue
@@ -11,7 +11,10 @@
           :class="{ 'error-text': showErrors }"
         >{{ label }}</label>
       </v-col>
-      <v-col cols="9">
+      <v-col
+        cols="9"
+        class="pl-3"
+      >
         <!-- Form information slot -->
         <slot name="infoSlot" />
         <!-- Form slot -->

diff --git a/ppr-ui/src/components/common/PartyReview.vue b/ppr-ui/src/components/common/PartyReview.vue
@@ -53,6 +53,11 @@
             <v-col v-if="hasPropData('businessName')">
               <h4>Name</h4>
             </v-col>
+            <v-col v-if="hasPropData('dbaName')">
+              <h4 class="pl-3">
+                DBA / Operating Name
+              </h4>
+            </v-col>
             <v-col v-if="hasPropData('address')">
               <h4>Mailing Address</h4>
             </v-col>
@@ -68,19 +73,22 @@
           <!-- Party Info Data -->
           <v-row
             noGutters
-            class="px-8 py-7"
+            class="px-8 py-7 fs-14"
           >
-            <v-col
-              v-if="hasPropData('businessName')"
-              class="pr-4"
-            >
+            <v-col v-if="hasPropData('businessName')">
               <!-- Future: Handle person name -->
               <label class="generic-label fs-14 icon-text">
                 <v-icon class="mt-n1 mr-1">mdi-domain</v-icon>
                 {{ partyModel.businessName || '(Not Entered)' }}
               </label>
             </v-col>
 
+            <v-col v-if="hasPropData('dbaName')">
+              <p class="pl-3">
+                {{ partyModel.dbaName || '(Not Entered)' }}
+              </p>
+            </v-col>
+
             <v-col v-if="hasPropData('address')">
               <base-address
                 v-if="hasTruthyValue(partyModel.address)"

diff --git a/ppr-ui/src/components/mhrRegistration/HomeLocation/HomeCivicAddress.vue b/ppr-ui/src/components/mhrRegistration/HomeLocation/HomeCivicAddress.vue
@@ -21,7 +21,7 @@
       <v-col
         cols="12"
         sm="9"
-        class="mt-n1"
+        class="mt-n1 pl-3"
       >
         <v-form
           ref="addressForm"

diff --git a/ppr-ui/src/components/userAccess/ReviewConfirm/ConfirmRequirements.vue b/ppr-ui/src/components/userAccess/ReviewConfirm/ConfirmRequirements.vue
@@ -5,11 +5,14 @@
     :class="{'border-error-left': validateReview && !isRequirementsConfirmed}"
   >
     <template #formSlot>
-      <v-form class="pl-2">
-        <ListRequirements :requirements="requirements" />
+      <v-form>
+        <ListRequirements
+          class="pl-1"
+          :requirements="requirements"
+        />
         <v-checkbox
           v-model="isRequirementsConfirmed"
-          class="confirmation-checkbox mt-7"
+          class="confirmation-checkbox mt-7 ml-n4"
           hideDetails
           label="I confirm and agree to all of the above requirements."
         >
@@ -61,6 +64,6 @@ export default defineComponent({
 @import '@/assets/styles/theme.scss';
 .confirmation-checkbox {
   background-color: $gray1;
-  padding: .75rem 2rem;
+  padding: .75rem 1rem;
 }
 </style>
diff --git a/...serAccess/ReviewConfirm/Authorization.vue → ...rAccess/ReviewConfirm/QsAuthorization.vue b/...serAccess/ReviewConfirm/Authorization.vue → ...rAccess/ReviewConfirm/QsAuthorization.vue
@@ -14,7 +14,8 @@
           v-model="authorization.authorizationName"
           variant="filled"
           color="primary"
-          label="Legal name of authorized person (must be a lawyer or notary)"
+          class="ml-2"
+          :label="`Legal name of authorized person ${isLawyerNotary ? '(must be a lawyer or notary)' : ''}`"
           :rules="authorizationRules"
         />
         <v-checkbox
@@ -56,9 +57,9 @@ import { useInputRules } from '@/composables'
 import { UserAccessAuthorizationIF } from '@/interfaces'
 
 export default defineComponent({
-  name: 'Authorization',
+  name: 'QsAuthorization',
   components: { FormCard },
-  props: { validateReview: { type: Boolean, default: false } },
+  props: { validateReview: { type: Boolean, default: false }, isLawyerNotary: { type: Boolean, default: false } },
   setup (props) {
     const { getMhrQsAuthorization } = storeToRefs(useStore())
     const { required, maxLength, customRules } = useInputRules()
@@ -68,7 +69,10 @@ export default defineComponent({
     const localState = reactive({
       authorization: getMhrQsAuthorization.value as UserAccessAuthorizationIF,
       authorizationFormValid: false,
-      authorizationRules: customRules(required('Enter the legal name of authorized person'), maxLength(150)),
+      authorizationRules: customRules(
+        required('Enter the legal name of authorized person'),
+        maxLength(150)
+      ),
       showErrors: computed((): boolean =>
         props.validateReview &&
         (!authorizationForm.value?.validate() || !localState.authorization.isAuthorizationConfirmed)

diff --git a/ppr-ui/src/components/userAccess/ReviewConfirm/QsInformationReview.vue b/ppr-ui/src/components/userAccess/ReviewConfirm/QsInformationReview.vue
@@ -18,17 +18,6 @@
       </header>
     </template>
 
-    <template #partyInfoLabelSlot>
-      <v-row
-        noGutters
-        class="px-8 pt-6 mb-n2"
-      >
-        <v-col>
-          <label class="generic-label">Qualified Supplier</label>
-        </v-col>
-      </v-row>
-    </template>
-
     <!-- Conditional based on service agreement checkbox -->
     <template
       v-if="getMhrUserAccessValidation.qsSaConfirmValid"
@@ -39,7 +28,7 @@
         class="pb-2"
       >
         <template #infoSlot>
-          <p class="icon-text ml-10 mb-n1">
+          <p class="icon-text mb-n1">
             <v-icon
               color="success"
               class="pr-2"
@@ -52,38 +41,99 @@
         </template>
       </FormCard>
     </template>
+
+    <template #partyInfoLabelSlot>
+      <v-row
+        noGutters
+        class="px-8 pt-6 mb-n2"
+      >
+        <v-col>
+          <label class="generic-label">Qualified Supplier</label>
+        </v-col>
+      </v-row>
+    </template>
+
+    <template
+      v-if="getMhrSubProduct === MhrSubTypes.MANUFACTURER"
+      #bottomInfoSlot
+    >
+      <article class="px-8">
+        <v-card
+          class="read-only-container"
+          flat
+        >
+          <p>
+            <span class="font-weight-bold">Note:</span> Your manufacturer name(s) will appear in registration documents
+            as the following:
+          </p>
+          <p class="font-weight-bold mt-3">
+            Registered Owner
+          </p>
+          <p>
+            {{ getMhrQsInformation.businessName || '(Not Entered)' }}
+          </p>
+          <p class="font-weight-bold mt-3">
+            Registered Location and Description of Manufactured Home
+          </p>
+          <p>
+            {{ getMhrQsInformation.businessName || '(Not Entered)' }}
+            {{ getMhrQsInformation.dbaName ? ` / ${getMhrQsInformation.dbaName} ` : '' }}
+          </p>
+        </v-card>
+        <h3 class="mt-4">
+          Location of Manufactured Home(s)
+        </h3>
+      </article>
+      <FormCard
+        label="Civic Address"
+        class="pt-3"
+      >
+        <template #formSlot>
+          <BaseAddress
+            v-if="hasTruthyValue(getMhrQsHomeLocation)"
+            :value="getMhrQsHomeLocation"
+          />
+          <p v-else>
+            (Not Entered)
+          </p>
+        </template>
+      </FormCard>
+    </template>
   </PartyReview>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs } from 'vue'
+import { defineComponent } from 'vue'
 import { FormCard, PartyReview } from '@/components/common'
 import { storeToRefs } from 'pinia'
 import { useStore } from '@/store/store'
-import { RouteNames } from '@/enums'
+import { MhrSubTypes, RouteNames } from '@/enums'
+import { hasTruthyValue } from '@/utils'
+import BaseAddress from '@/composables/address/BaseAddress.vue'
 
 export default defineComponent({
   name: 'QsInformationReview',
   components: {
+    BaseAddress,
     FormCard,
     PartyReview
   },
   setup () {
     const {
       getMhrSubProduct,
       getMhrQsInformation,
+      getMhrQsHomeLocation,
       getMhrUserAccessValidation
     } = storeToRefs(useStore())
 
-    const localState = reactive({
-    })
-
     return {
       RouteNames,
+      MhrSubTypes,
+      hasTruthyValue,
       getMhrSubProduct,
       getMhrQsInformation,
-      getMhrUserAccessValidation,
-      ...toRefs(localState)
+      getMhrQsHomeLocation,
+      getMhrUserAccessValidation
     }
   }
 })

diff --git a/ppr-ui/src/components/userAccess/ReviewConfirm/index.ts b/ppr-ui/src/components/userAccess/ReviewConfirm/index.ts
@@ -1,4 +1,4 @@
 export { default as ListRequirements } from './ListRequirements.vue'
 export { default as ConfirmRequirements } from './ConfirmRequirements.vue'
-export { default as Authorization } from './Authorization.vue'
+export { default as QsAuthorization } from './QsAuthorization.vue'
 export { default as QsInformationReview } from './QsInformationReview.vue'
diff --git a/ppr-ui/src/composables/userAccess/useUserAccess.ts b/ppr-ui/src/composables/userAccess/useUserAccess.ts
@@ -27,6 +27,7 @@ export const useUserAccess = () => {
     setUserSettings,
     setUnsavedChanges,
     setMhrQsInformation,
+    setCivicAddress,
     setMhrSubProduct,
     setMhrQsSubmittingParty,
     setMhrQsAuthorization,
@@ -173,20 +174,8 @@ export const useUserAccess = () => {
   /** Initialize user access properties **/
   const initUserAccess = async (defaultType: MhrSubTypes = null): Promise<void> => {
     setMhrSubProduct(defaultType)
-    setMhrQsInformation({
-      businessName: '',
-      address: {
-        street: '',
-        streetAdditional: '',
-        city: '',
-        region: null,
-        postalCode: '',
-        country: null,
-        deliveryInstructions: ''
-      },
-      phoneNumber: '',
-      phoneExtension: ''
-    })
+    await setQsInformationModel(defaultType, true)
+    await resetCivicAddress()
 
     // Set qs submitting party to state
     const accountInfo = await getAccountInfoFromAuth()
@@ -207,16 +196,44 @@ export const useUserAccess = () => {
   }
 
   /** Set default state for User Access flow based on Product type **/
-  const setQsInformationModel = (val: MhrSubTypes = null) => {
+  const setQsInformationModel = async (val: MhrSubTypes = null, clearModel: boolean = false) => {
+    const defaultQsInfo = {
+      businessName: '',
+      dbaName: '',
+      address: {
+        street: '',
+        streetAdditional: '',
+        city: '',
+        region: null,
+        postalCode: '',
+        country: null,
+        deliveryInstructions: ''
+      },
+      phoneNumber: '',
+      phoneExtension: ''
+    }
+
+    // Clear the model, when prompted
+    if (clearModel) await setMhrQsInformation(defaultQsInfo)
+
+    // Add or remove DBA property based on Product Type
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { dbaName, ...baseQsInfo } = getMhrQsInformation.value
     const formattedQsInfoModel = [MhrSubTypes.MANUFACTURER, MhrSubTypes.DEALERS].includes(val)
-      ? { ...getMhrQsInformation.value, dbaName: '' }
+      ? { ...getMhrQsInformation.value, dbaName: getMhrQsInformation.value.dbaName || '' }
       : baseQsInfo
 
     setMhrQsInformation(formattedQsInfoModel)
   }
 
+  /** Reset the civic address model to default values **/
+  const resetCivicAddress = async () => {
+    setCivicAddress('mhrUserAccess', { key: 'street', value: '' })
+    setCivicAddress('mhrUserAccess', { key: 'city', value: '' })
+    setCivicAddress('mhrUserAccess', { key: 'country', value: null })
+    setCivicAddress('mhrUserAccess', { key: 'region', value: null })
+  }
+
   const setQsDefaultValidation = () => {
     // Reset Validations (location flag is defaulted to true)
     for (const flag in getMhrUserAccessValidation.value) {

diff --git a/ppr-ui/src/resources/dialogOptions/confirmationDialogs.ts b/ppr-ui/src/resources/dialogOptions/confirmationDialogs.ts
@@ -82,7 +82,7 @@ export const mhrDeceasedOwnerChanges: DialogOptionsIF = {
 export const confirmQsProductChangeDialog: DialogOptionsIF = {
   acceptText: 'Change Access Type',
   cancelText: 'Cancel',
-  title: 'Change Access type',
+  title: 'Change Access Type',
   text: `Changing the Access Type will delete any application information you have entered and return you to the
     original state. `
 }