Merge pull request #225 from kialj876/platform-web-form-updates-6

platform dashboard
bcgov · Oct 28, 2024 · 111d1ad · 111d1ad
2 parents 763925f + 0533c32
commit 111d1ad
Show file tree

Hide file tree

Showing 21 changed files with 457 additions and 214 deletions.
diff --git a/strr-platform-web/app/components/EmailAlert.vue b/strr-platform-web/app/components/EmailAlert.vue
@@ -1,7 +1,3 @@
-<script setup>
-const { t } = useI18n()
-
-</script>
 <template>
   <UAlert
     class="max-w-bcGovInput"
@@ -15,8 +11,8 @@ const { t } = useI18n()
   >
     <template #description>
       <p>
-        <b>{{ t('label.note') }}:</b>
-        {{ t('platform.text.emailNote') }}
+        <b>{{ $t('label.note') }}:</b>
+        {{ $t('platform.text.emailNote') }}
       </p>
     </template>
   </UAlert>

diff --git a/strr-platform-web/app/components/connect/DashboardSection.vue b/strr-platform-web/app/components/connect/DashboardSection.vue
@@ -1,10 +1,15 @@
 <script setup lang="ts">
-defineProps<{ title: string, loading: boolean }>()
+defineProps<{ title: string, titleNum?: number, loading: boolean }>()
 </script>
 <template>
   <div class="space-y-2">
     <slot name="header">
-      <ConnectTypographyH2 :text="title" />
+      <div class="flex gap-1">
+        <ConnectTypographyH2 custom-class="text-lg font-bold" :text="title" />
+        <p v-if="titleNum !== undefined" class="text-lg text-gray-900">
+          ({{ titleNum }})
+        </p>
+      </div>
     </slot>
     <div class="rounded bg-white">
       <slot v-if="loading" name="loading">

diff --git a/strr-platform-web/app/components/connect/DetailsHeader.vue b/strr-platform-web/app/components/connect/DetailsHeader.vue
@@ -7,38 +7,65 @@ const {
   sideDetails,
   bottomButtons
 } = storeToRefs(useConnectDetailsHeaderStore())
+
+const validate = (sideDetail: ConnectDetailHeaderSideDetail, onlyOnExistingErr: boolean) => {
+  if (onlyOnExistingErr && !sideDetail.edit?.validation?.error) {
+    return
+  }
+  if (sideDetail.edit?.validation) {
+    sideDetail.edit.validation.error = sideDetail.edit?.validation?.validate(sideDetail.value)
+  }
+}
+
+const save = (sideDetail: ConnectDetailHeaderSideDetail) => {
+  if (sideDetail.edit) {
+    sideDetail.edit.validation?.validate(sideDetail.value)
+    if (sideDetail.edit.validation?.error) {
+      return
+    }
+    sideDetail.edit.isEditing = false
+    sideDetail.edit.action()
+  }
+}
+
 </script>
 
 <template>
   <div class="bg-white py-5" data-testid="connect-details-header">
     <div class="app-inner-container">
-      <div v-if="loading" class="flex animate-pulse flex-col gap-2 sm:flex-row">
-        <div class="grow space-y-2">
+      <div v-if="loading" class="flex animate-pulse flex-col gap-2 *:space-y-2 sm:flex-row">
+        <div class="grow">
           <div class="h-9 w-[400px] rounded bg-gray-200" />
           <div class="h-5 w-[250px] rounded bg-gray-200" />
           <div class="h-5 w-[200px] rounded bg-gray-200" />
           <div class="h-5 w-[150px] rounded bg-gray-200" />
         </div>
-        <div class="space-y-2">
+        <div>
           <div class="h-5 w-[300px] rounded bg-gray-200" />
           <div class="h-5 w-[300px] rounded bg-gray-200" />
           <div class="h-5 w-[300px] rounded bg-gray-200" />
           <div class="h-5 w-[300px] rounded bg-gray-200" />
         </div>
       </div>
       <div v-else class="flex flex-col gap-2 sm:flex-row">
-        <div class="grow space-y-4">
-          <div class="space-y-2">
-            <ConnectTypographyH1 v-if="title" :text="title" />
+        <div class="grow space-y-2">
+          <div>
+            <ConnectTypographyH1 v-if="title" custom-class="text-[1.375rem] font-bold" :text="title" />
             <div v-if="subtitles.length" class="flex divide-x *:border-gray-500 *:px-2 first:*:pl-0">
               <p v-for="subtitle in subtitles" :key="subtitle" class="text-sm">
                 {{ subtitle }}
               </p>
             </div>
           </div>
-          <div class="space-y-2">
+          <div class="space-y-1">
             <slot name="details">
-              <p v-if="details" class="text-sm">
+              <UBadge
+                v-if="details?.chip"
+                :label="details.chip.text"
+                :color="details.chip.colour || 'primary'"
+                class="px-3"
+              />
+              <p v-if="details?.text" class="text-sm">
                 {{ details }}
               </p>
             </slot>
@@ -58,10 +85,12 @@ const {
             </slot>
           </div>
         </div>
-        <dl class="mr-14 space-y-1 text-sm">
+        <dl class="space-y-1 text-sm">
           <template v-for="detail in sideDetails" :key="detail.label">
-            <div>
+            <div :class="[detail.edit && !detail.edit.isEditing && 'mr-14']">
+              <!-- TODO: design not finalized, this is a WIP  -->
               <UTooltip
+                :prevent="detail.edit?.isEditing"
                 :close-delay="100"
                 :popper="{ placement: 'right', arrow: false, offsetDistance: 0 }"
                 :ui="{ background: 'bg-transparent', container: 'opacity-100', shadow: 'shadow-none' }"
@@ -82,20 +111,27 @@ const {
                     <UInput
                       v-model="detail.value"
                       size="2xs"
-                      @change="detail.edit.validation
-                        ? detail.edit.validation.error = detail.edit?.validation?.validate($event)
-                        : console.info('no validation')"
+                      @input="validate(detail, true)"
+                      @change="validate(detail, false)"
                     />
                   </UFormGroup>
+                  <UButton
+                    v-if="detail.edit?.isEditing"
+                    class="mt-[2px] items-start"
+                    :label="$t('word.Save')"
+                    :padded="false"
+                    variant="link"
+                    @click="save(detail)"
+                  />
                 </div>
                 <template #text>
                   <UButton
-                    v-if="detail.edit"
+                    v-if="detail.edit && !detail.edit.isEditing"
                     icon="i-mdi-edit"
-                    :label="!detail.edit.isEditing ? $t('word.Edit') : $t('word.Save')"
+                    :label="$t('word.Edit')"
                     :padded="false"
                     variant="link"
-                    @click="detail.edit.isEditing = !detail.edit.isEditing"
+                    @click="detail.edit.isEditing = true"
                   />
                 </template>
               </UTooltip>

diff --git a/strr-platform-web/app/components/connect/accordion/Item.vue b/strr-platform-web/app/components/connect/accordion/Item.vue
@@ -7,7 +7,8 @@ defineProps<{ item: ConnectAccordionItem, padLeft?: boolean }>()
       <div class="flex gap-2" :class="[padLeft && 'pl-10', info.class || '']">
         <UIcon v-if="info.icon" :name="info.icon" class="text-2xl" :class="info.iconClass ?? ''" />
         <div class="space-y-1">
-          <p v-if="info.label" class="text-gray-950">
+          <!-- TODO: bcreg font doesn't have a semi-bold so this is either fully bold or not at all -->
+          <p v-if="info.label" class="text-gray-900">
             {{ info.label }}
           </p>
           <p v-if="info.text" class="break-all text-sm">

diff --git a/strr-platform-web/app/components/connect/typography/H1.vue b/strr-platform-web/app/components/connect/typography/H1.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-defineProps<{ text: string }>()
+defineProps<{ text: string, customClass?: string }>()
 </script>
 <template>
-  <h1 class="text-xl font-bold" data-testid="h1">
+  <h1 :class="customClass || 'text-[2rem] font-bold'" data-testid="h1">
     {{ text }}
   </h1>
 </template>
diff --git a/strr-platform-web/app/components/connect/typography/H2.vue b/strr-platform-web/app/components/connect/typography/H2.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-defineProps<{ text: string }>()
+defineProps<{ text: string, customClass?: string }>()
 </script>
 <template>
-  <h2 :class="`font-bold text-lg`" data-testid="h2">
+  <h2 :class="customClass || 'text-[1.5rem] font-bold'" data-testid="h2">
     {{ text }}
   </h2>
 </template>
diff --git a/strr-platform-web/app/components/todo/Empty.vue b/strr-platform-web/app/components/todo/Empty.vue
@@ -0,0 +1,10 @@
+<template>
+  <div class="flex flex-col p-5 *:text-center">
+    <p class="font-bold">
+      {{ $t('text.nothingTodo') }}
+    </p>
+    <p class="text-sm">
+      {{ $t('text.filingsWillAppear') }}
+    </p>
+  </div>
+</template>
diff --git a/strr-platform-web/app/components/todo/Index.vue b/strr-platform-web/app/components/todo/Index.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+defineProps<{
+  title: string,
+  subtitle?: string,
+  button: {
+    label: string,
+    action: Function,
+    colour?: string,
+    icon?: string
+  }
+}>()
+</script>
+<template>
+  <div class="p-5">
+    <div class="flex">
+      <div class="grow space-y-2">
+        <slot name="title">
+          <h3 class="text-lg font-bold">
+            {{ title }}
+          </h3>
+        </slot>
+        <slot name="subtitle">
+          <p v-if="subtitle">
+            {{ subtitle }}
+          </p>
+        </slot>
+      </div>
+      <UButton
+        :label="button.label"
+        :color="button.colour || 'primary'"
+        :icon="button.icon"
+        @click="button.action()"
+      />
+    </div>
+    <slot />
+  </div>
+</template>
diff --git a/strr-platform-web/app/enums/application-status.ts b/strr-platform-web/app/enums/application-status.ts
@@ -0,0 +1,13 @@
+export enum ApplicationStatus {
+  ADDITIONAL_INFO_REQUESTED = 'ADDITIONAL_INFO_REQUESTED',
+  AUTO_APPROVED = 'AUTO_APPROVED',
+  DECLINED = 'DECLINED',
+  DRAFT = 'DRAFT',
+  FULL_REVIEW = 'FULL_REVIEW',
+  FULL_REVIEW_APPROVED = 'FULL_REVIEW_APPROVED',
+  PAID = 'PAID',
+  PAYMENT_DUE = 'PAYMENT_DUE',
+  PROVISIONAL = 'PROVISIONAL',
+  PROVISIONAL_REVIEW = 'PROVISIONAL_REVIEW',
+  PROVISIONALLY_APPROVED = 'PROVISIONALLY_APPROVED'
+}
diff --git a/strr-platform-web/app/interfaces/connect-detail-header.ts b/strr-platform-web/app/interfaces/connect-detail-header.ts
@@ -0,0 +1,12 @@
+export interface ConnectDetailHeaderSideDetail {
+  label: string
+  value: string
+  edit?: {
+    isEditing: boolean,
+    validation?: {
+      error: string
+      validate: (val: string) => string
+    }
+    action: Function
+  }
+}
diff --git a/strr-platform-web/app/interfaces/platform-api.ts b/strr-platform-web/app/interfaces/platform-api.ts
@@ -55,11 +55,7 @@ export interface ApiBaseRegistration {
   platformDetails: ApiPlatformDetails
 }
 
-export interface PlatformApplicationPayload {
-  registration: ApiBaseRegistration
-}
-
-export interface PlatformRegistrationPayload extends ApiBaseRegistration {
+export interface PlatformRegistrationResp extends ApiBaseRegistration {
   expiryDate: Date
   id: number
   registration_number: string
@@ -69,3 +65,27 @@ export interface PlatformRegistrationPayload extends ApiBaseRegistration {
   updatedDate: Date
   user_id: number
 }
+
+export interface PlatformApplicationPayload {
+  registration: ApiBaseRegistration
+}
+
+export interface ApplicationHeader {
+  applicationDateTime: Date
+  applicationNumber: string
+  decisionDate: Date | undefined
+  examinerActions: string[]
+  examinerStatus: string
+  hostActions: string[] // SUBMIT_PAYMENT is currently the only case where this has anything
+  hostStatus: string
+  isCertificateIssued: boolean
+  name: string
+  paymentAccount: string
+  paymentStatus: string
+  paymentToken: string // invoice id
+  status: ApplicationStatus
+}
+
+export interface PlatformApplicationResp extends PlatformApplicationPayload {
+  header: ApplicationHeader
+}
diff --git a/strr-platform-web/app/interfaces/todo.ts b/strr-platform-web/app/interfaces/todo.ts
@@ -0,0 +1,12 @@
+export interface TodoButton {
+  label: string
+  action: Function
+  colour?: string
+  icon?: string
+}
+
+export interface Todo {
+  title: string
+  button: TodoButton
+  subtitle?: string
+}
diff --git a/strr-platform-web/app/locales/en-CA.ts b/strr-platform-web/app/locales/en-CA.ts
@@ -48,7 +48,9 @@ export default {
     fileNowNoFee: 'File Now (no fee)',
     reviewConfirm: 'Review and Confirm',
     save: 'Save',
-    saveExit: 'Save and Resume Later'
+    saveExit: 'Save and Resume Later',
+    beginApplication: 'Begin Application',
+    resumeApplication: 'Resume Application'
   },
   contactInfo: {
     bcRegGeneral: {
@@ -180,6 +182,7 @@ export default {
     i: 'i',
     addresses: 'Addresses',
     directors: 'Directors',
+    representatives: 'Representatives',
     confirm: 'Confirm',
     select: 'Select',
     none: 'None',
@@ -195,7 +198,8 @@ export default {
     Yes: 'Yes',
     No: 'No',
     Edit: 'Edit',
-    Save: 'Save'
+    Save: 'Save',
+    Receipt: 'Receipt'
   },
   page: {
     notFound: {
@@ -495,7 +499,7 @@ export default {
       brandSiteOpt: 'Platform Brand Website (Optional)',
       cpbcNum: 'Consumer Protection BC Number',
       listingSize: {
-        UNDER_THOUSAND: 'Small Platform',
+        LESS_THAN_THOUSAND: 'Small Platform',
         GREATER_THAN_THOUSAND: 'Large Platform'
       },
       noncomplianceEmail: 'Non-compliance Email',

diff --git a/strr-platform-web/app/pages/platform/application.vue b/strr-platform-web/app/pages/platform/application.vue
@@ -25,14 +25,16 @@ const platFeeSm = ref<ConnectFeeItem | undefined>(undefined)
 const platFeeLg = ref<ConnectFeeItem | undefined>(undefined)
 const platFeeWv = ref<ConnectFeeItem | undefined>(undefined)
 onMounted(async () => {
-  const smallFee = getFee(ConnectFeeEntityType.STRR, ConnectFeeCode.STR_PLAT_SM)
-  const largeFee = getFee(ConnectFeeEntityType.STRR, ConnectFeeCode.STR_PLAT_LG)
-  const waivedFee = getFee(ConnectFeeEntityType.STRR, ConnectFeeCode.STR_PLAT_WV)
-  platFeeSm.value = await smallFee
-  platFeeLg.value = await largeFee
-  platFeeWv.value = await waivedFee
+  const [smallFeeResp, largeFeeResp, waivedFeeResp] = await Promise.all([
+    getFee(ConnectFeeEntityType.STRR, ConnectFeeCode.STR_PLAT_SM),
+    getFee(ConnectFeeEntityType.STRR, ConnectFeeCode.STR_PLAT_LG),
+    getFee(ConnectFeeEntityType.STRR, ConnectFeeCode.STR_PLAT_WV)
+  ])
+  platFeeSm.value = smallFeeResp
+  platFeeLg.value = largeFeeResp
+  platFeeWv.value = waivedFeeResp
   if (platFeeWv.value && platFeeSm.value) {
-    // NOTE: setting 'waived' changes the text to 'NO FEE' instead of $0.00
+    // NOTE: setting 'waived' changes the text to 'No Fee' instead of $0.00
     platFeeWv.value.waived = true
     // NOTE: service fee is variable and dependent on the account
     // Pay api incorrectly sets the service fee for $0 fee codes to 0,
@@ -44,7 +46,7 @@ onMounted(async () => {
 
 const { platformDetails } = storeToRefs(useStrrPlatformDetails())
 const { platformBusiness } = storeToRefs(useStrrPlatformBusiness())
-// const { getBusinessSchema } = useStrrPlatformBusiness()
+
 watch(() => platformBusiness.value.hasCpbc, (val) => {
   if (val && platFeeWv.value) {
     removeFee(ConnectFeeCode.STR_PLAT_SM)