From a6788e4d29a10a0653fd5b5077fc3475f73d6a44 Mon Sep 17 00:00:00 2001
From: Dima K <dima1086@hotmail.com>
Date: Wed, 12 Jul 2023 13:54:12 -0700
Subject: [PATCH] Effective Date and Time for Unit Notes (#1415)

* Add EffectiveDateTime component
* Add Expiry Date and Time to Unit Note
* PR review updates. Added more tests.
* Styling update for Effective Date component
---
 .../unitNotes/EffectiveDateTime.vue           | 252 ++++++++++++++++++
 .../components/unitNotes/UnitNoteReview.vue   |  34 ++-
 ppr-ui/src/components/unitNotes/index.ts      |   1 +
 ppr-ui/src/enums/effectiveDateTypes.ts        |   9 +
 ppr-ui/src/enums/index.ts                     |   1 +
 ppr-ui/tests/unit/EffectiveDateTime.spec.ts   |  68 +++++
 ppr-ui/tests/unit/MhrUnitNote.spec.ts         |   5 +-
 7 files changed, 361 insertions(+), 9 deletions(-)
 create mode 100644 ppr-ui/src/components/unitNotes/EffectiveDateTime.vue
 create mode 100644 ppr-ui/src/enums/effectiveDateTypes.ts
 create mode 100644 ppr-ui/tests/unit/EffectiveDateTime.spec.ts

diff --git a/ppr-ui/src/components/unitNotes/EffectiveDateTime.vue b/ppr-ui/src/components/unitNotes/EffectiveDateTime.vue
new file mode 100644
index 000000000..40ab78608
--- /dev/null
+++ b/ppr-ui/src/components/unitNotes/EffectiveDateTime.vue
@@ -0,0 +1,252 @@
+<template>
+  <div id="effective-date-time-container">
+    <h2>{{ content.title }}</h2>
+    <p class="mt-2">{{ content.description }}</p>
+    <v-card id="effective-date-time-card" flat rounded class="mt-8 px-7 pt-10 pb-3">
+      <v-row no-gutters>
+        <v-col cols="12" sm="3">
+          <label class="generic-label" :class="{ 'error-text': false }">
+            {{ content.sideLabel }}
+          </label>
+        </v-col>
+        <v-col cols="12" sm="9" class="px-1">
+          <v-radio-group v-model="effectiveDateType" column class="pt-0 mt-0">
+            <v-radio
+              :value="EffectiveDateTypes.IMMEDIATE"
+              label="Immediate (date and time of registration)"
+              data-test-id="immediate-date-radio"
+            />
+            <v-radio
+              :value="EffectiveDateTypes.PAST"
+              label="Date and time in the past"
+              data-test-id="past-date-radio"
+            />
+          </v-radio-group>
+          <v-form ref="effectiveDateTimeForm" class="date-time-selectors" v-model="isEffectiveDateTimeFormValid">
+            <SharedDatePicker
+              id="effective-date-picker"
+              ref="effectiveDatePicker"
+              title="Date"
+              :initialValue="selectedPastDate"
+              :disablePicker="isImmediateDateSelected"
+              :inputRules="required('This field is required')"
+              :maxDate="maxDate"
+              @emitDate="selectedPastDate = $event"
+              @emitCancel="selectedPastDate = ''"
+              @emitClear="selectedPastDate = ''"
+            />
+
+            <div class="time-picker" data-test-id="time-picker-fields">
+              <v-select
+                id="hour-selector"
+                ref="hourSelector"
+                v-model="selectHour"
+                filled
+                class="mr-1"
+                label="Hour"
+                :items="hours"
+                :rules="required('This field is required')"
+                :disabled="isImmediateDateSelected"
+              />
+              <span class="time-separator pt-4" :class="{ disabled: isImmediateDateSelected }"> : </span>
+
+              <v-select
+                id="minute-selector"
+                ref="minuteSelector"
+                v-model="selectMinute"
+                filled
+                class="mr-1"
+                label="Minute"
+                :items="minutes"
+                :rules="required('This field is required')"
+                :disabled="isImmediateDateSelected"
+              />
+
+              <v-select
+                id="period-selector"
+                ref="periodSelector"
+                v-model="selectPeriod"
+                filled
+                class="mr-1 period-selector"
+                :items="[PeriodTypes.AM, PeriodTypes.PM]"
+                :disabled="isImmediateDateSelected"
+              />
+
+              <span class="timezone-label pt-4" :class="{ disabled: isImmediateDateSelected }"> Pacific time </span>
+            </div>
+          </v-form>
+
+          <div
+            v-if="!isImmediateDateSelected && selectedPastDate && isTimeSelected"
+            class="ml-8 mb-6"
+            data-test-id="date-summary-label"
+          >
+            Caution on this home effective: <br />
+            <b>
+              {{ pacificDate(effectiveDate, true) }}
+            </b>
+          </div>
+        </v-col>
+      </v-row>
+    </v-card>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onBeforeMount, reactive, ref, toRefs, watch } from 'vue-demi'
+import { EffectiveDateTypes, PeriodTypes } from '@/enums/'
+import { createUtcDate, localTodayDate, pacificDate } from '@/utils'
+import { ContentIF, FormIF } from '@/interfaces'
+import { useInputRules } from '@/composables'
+import SharedDatePicker from '@/components/common/SharedDatePicker.vue'
+
+export default defineComponent({
+  name: 'EffectiveDateTime',
+  components: {
+    SharedDatePicker
+  },
+  props: {
+    validate: {
+      type: Boolean,
+      default: false
+    },
+    content: {
+      type: Object as () => ContentIF,
+      default: () => {}
+    }
+  },
+  emits: ['setStoreProperty'],
+  setup (props, { emit }) {
+    const { required } = useInputRules()
+
+    const effectiveDatePicker = ref(null) as FormIF
+    const effectiveDateTimeForm = ref(null) as FormIF
+
+    const date = new Date()
+
+    const localState = reactive({
+      isEffectiveDateTimeFormValid: false,
+      selectHour: null,
+      selectMinute: null,
+      selectPeriod: PeriodTypes.AM,
+      selectedPastDate: '', // date selected from the Date Picker
+
+      effectiveDateType: EffectiveDateTypes.IMMEDIATE,
+      effectiveDate: '',
+
+      hours: [...Array(12).keys()].map(num => (num + 1).toString()),
+      minutes: [...Array(60).keys()].map(num => num.toString().padStart(2, '0')),
+      maxDate: computed((): string => localTodayDate(new Date(date.setDate(date.getDate() - 1)))),
+      isImmediateDateSelected: computed((): boolean => localState.effectiveDateType === EffectiveDateTypes.IMMEDIATE),
+      isTimeSelected: computed((): boolean => localState.selectHour && localState.selectMinute)
+    })
+
+    const buildFullDate = (): Date => {
+      let hours = parseInt(localState.selectHour)
+      const minutes = parseInt(localState.selectMinute)
+
+      // convert 12 am -> 0
+      if (localState.selectPeriod === PeriodTypes.AM && localState.selectHour === 12) {
+        hours = hours - 12
+      }
+      // convert 1-11 pm -> 13-23
+      if (localState.selectPeriod === PeriodTypes.PM && localState.selectHour < 12) {
+        hours = hours + 12
+      }
+
+      const date = new Date(localState.selectedPastDate)
+      return createUtcDate(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), hours, minutes)
+    }
+
+    onBeforeMount((): void => {
+      // set todays date as Immediate radio button is selected by default
+      localState.effectiveDate = new Date().toISOString()
+    })
+
+    watch(
+      () => [localState.effectiveDateType],
+      () => {
+        if (localState.isImmediateDateSelected) {
+          // today's date radio selected
+          localState.effectiveDate = new Date().toISOString()
+        } else if (localState.isTimeSelected) {
+          // past date radio selected and all time dropdowns are selected
+          localState.effectiveDate = buildFullDate().toISOString()
+        }
+      }
+    )
+
+    watch(
+      () => [localState.selectedPastDate, localState.selectHour, localState.selectMinute, localState.selectPeriod],
+      () => {
+        if (localState.isTimeSelected) {
+          localState.effectiveDate = buildFullDate().toISOString()
+        }
+      }
+    )
+
+    watch(
+      () => localState.effectiveDate,
+      val => {
+        emit('setStoreProperty', val)
+      }
+    )
+
+    return {
+      required,
+      effectiveDatePicker,
+      effectiveDateTimeForm,
+      EffectiveDateTypes,
+      PeriodTypes,
+      pacificDate,
+      ...toRefs(localState)
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/theme.scss';
+
+.time-picker {
+  display: flex;
+  gap: 5px;
+  justify-content: space-between;
+  align-content: center;
+  max-width: 600px;
+  .v-select {
+    max-width: 148px;
+  }
+
+  .time-separator {
+    margin-right: 2px;
+  }
+
+  .period-selector::v-deep .v-input__slot{
+    height: 58px;
+  }
+
+  .timezone-label {
+    white-space: nowrap;
+  }
+}
+
+.v-radio {
+  padding-bottom: 0.5rem;
+}
+
+.date-time-selectors {
+  margin-left: 2rem;
+}
+
+.disabled {
+  color: $gray6;
+}
+
+.v-icon.v-icon.v-icon--disabled {
+  color: $app-blue !important;
+}
+.v-input--is-disabled {
+  opacity: 0.4;
+}
+</style>
diff --git a/ppr-ui/src/components/unitNotes/UnitNoteReview.vue b/ppr-ui/src/components/unitNotes/UnitNoteReview.vue
index b5cc3cbb9..6c124b43b 100644
--- a/ppr-ui/src/components/unitNotes/UnitNoteReview.vue
+++ b/ppr-ui/src/components/unitNotes/UnitNoteReview.vue
@@ -23,12 +23,16 @@
     </section>
 
     <section class="mt-15">
-      <h2>2. Effective Date and Time</h2>
-      <p class="mt-2">
-        Select the effective date and time for this {{ unitNoteType.header }}. Custom date and time can
-        be a date and time in the past. Notice of Caution will expire 90 days after the effective date.
-      </p>
-      // Placeholder for the component
+      <EffectiveDateTime
+        :content="{
+          title: '2. Effective Date and Time',
+          description: `Select the effective date and time for this ${unitNoteType.header}.  ` +
+          'Custom date and time can be a date and time in the past.' + effectiveDateDescForCAU,
+          sideLabel: 'Effective Date and Time'
+        }"
+        :validate="validate"
+        @setStoreProperty="handleEffectiveDateUpdate($event)"
+      />
     </section>
 
     <section class="mt-15">
@@ -87,12 +91,15 @@ import { Attention } from '../mhrRegistration/ReviewConfirm'
 import { StaffPayment } from '@bcrs-shared-components/staff-payment'
 import { StaffPaymentOptions } from '@bcrs-shared-components/enums'
 import { StaffPaymentIF } from '@bcrs-shared-components/interfaces'
+import EffectiveDateTime from './EffectiveDateTime.vue'
+import { UnitNoteDocTypes } from '@/enums'
 
 export default defineComponent({
   name: 'UnitNoteReview',
   components: {
     UnitNoteReviewDetailsTable,
     ContactInformation,
+    EffectiveDateTime,
     Attention,
     CertifyInformation,
     StaffPayment
@@ -112,7 +119,7 @@ export default defineComponent({
     } = storeToRefs(useStore())
 
     const {
-      // setMhrUnitNote,
+      setMhrUnitNote,
       setMhrUnitNoteRegistration,
       setStaffPayment
     } = useStore()
@@ -147,10 +154,21 @@ export default defineComponent({
       setMhrUnitNoteRegistration({ key: 'submittingParty', value: val })
     }
 
+    const handleEffectiveDateUpdate = (val: string) => {
+      setMhrUnitNote({ key: 'effectiveDateTime', value: val })
+      // expiry date is 90 days from effective date
+      const expiryDateTime = new Date(new Date(val).getTime() + 90 * 24 * 60 * 60 * 1000).toISOString()
+      setMhrUnitNote({ key: 'expiryDateTime', value: expiryDateTime })
+    }
+
     const handleComponentValid = (component: MhrCompVal, isValid: boolean) => {
       setValidation(MhrSectVal.UNIT_NOTE_VALID, component, isValid)
     }
 
+    const effectiveDateDescForCAU = getMhrUnitNote.value.documentType === UnitNoteDocTypes.NOTICE_OF_CAUTION
+      ? ' Notice of Caution will expire 90 days after the effective date.'
+      : ''
+
     const onStaffPaymentDataUpdate = (val: StaffPaymentIF) => {
       let staffPaymentData: StaffPaymentIF = {
         ...val
@@ -202,8 +220,10 @@ export default defineComponent({
       MhrCompVal,
       getMhrUnitNote,
       setSubmittingParty,
+      handleEffectiveDateUpdate,
       handleComponentValid,
       onStaffPaymentDataUpdate,
+      effectiveDateDescForCAU,
       ...toRefs(localState)
     }
   }
diff --git a/ppr-ui/src/components/unitNotes/index.ts b/ppr-ui/src/components/unitNotes/index.ts
index f45c68cb5..30578b883 100644
--- a/ppr-ui/src/components/unitNotes/index.ts
+++ b/ppr-ui/src/components/unitNotes/index.ts
@@ -2,3 +2,4 @@ export { default as UnitNotePanels } from './UnitNotePanels.vue'
 export { default as UnitNoteAdd } from './UnitNoteAdd.vue'
 export { default as UnitNoteReview } from './UnitNoteReview.vue'
 export { default as UnitNoteReviewDetailsTable } from './UnitNoteReviewDetailsTable.vue'
+export { default as EffectiveDateTime } from './EffectiveDateTime.vue'
diff --git a/ppr-ui/src/enums/effectiveDateTypes.ts b/ppr-ui/src/enums/effectiveDateTypes.ts
new file mode 100644
index 000000000..0a90ad7ac
--- /dev/null
+++ b/ppr-ui/src/enums/effectiveDateTypes.ts
@@ -0,0 +1,9 @@
+export enum EffectiveDateTypes {
+  PAST = 'past',
+  IMMEDIATE = 'immediate'
+}
+
+export enum PeriodTypes {
+  AM = 'am',
+  PM = 'pm'
+}
diff --git a/ppr-ui/src/enums/index.ts b/ppr-ui/src/enums/index.ts
index aa3098c51..a1effb0ff 100644
--- a/ppr-ui/src/enums/index.ts
+++ b/ppr-ui/src/enums/index.ts
@@ -29,6 +29,7 @@ export * from './business-types'
 export * from './transferTypes'
 export * from './homeOwnerPartyTypes'
 export * from './unitNoteDocTypes'
+export * from './effectiveDateTypes'
 
 // external enums
 export { CorpTypeCd } from '@bcrs-shared-components/corp-type-module'
diff --git a/ppr-ui/tests/unit/EffectiveDateTime.spec.ts b/ppr-ui/tests/unit/EffectiveDateTime.spec.ts
new file mode 100644
index 000000000..1268197f5
--- /dev/null
+++ b/ppr-ui/tests/unit/EffectiveDateTime.spec.ts
@@ -0,0 +1,68 @@
+import Vue, { nextTick } from 'vue'
+import Vuetify from 'vuetify'
+import { Wrapper } from '@vue/test-utils'
+import { createComponent, getTestId } from './utils'
+import { EffectiveDateTime } from '@/components/unitNotes'
+import { SharedDatePicker } from '@/components/common'
+import { useStore } from '@/store/store'
+
+Vue.use(Vuetify)
+const store = useStore()
+
+const props = {
+  content: {
+    title: 'Effective Date and Time',
+    description: 'Select the effective date and time for',
+    sideLabel: 'Effective Date and Time'
+  },
+  validate: false
+}
+
+describe('EffectiveDateTime', () => {
+  let wrapper: Wrapper<any>
+
+  beforeEach(async () => {
+    wrapper = createComponent(EffectiveDateTime, props)
+  })
+
+  afterEach(() => {
+    wrapper.destroy()
+  })
+
+  it('should render the component', () => {
+    const EffectiveDateTimeComponent = wrapper.findComponent(EffectiveDateTime)
+
+    expect(EffectiveDateTimeComponent.exists()).toBeTruthy()
+    expect(EffectiveDateTimeComponent.findComponent(SharedDatePicker).exists()).toBeTruthy()
+    expect(EffectiveDateTimeComponent.find(getTestId('time-picker-fields')).exists()).toBeTruthy()
+    expect(EffectiveDateTimeComponent.find(getTestId('date-summary-label')).exists()).toBeFalsy()
+
+    const immediateDate = <HTMLInputElement>(
+      EffectiveDateTimeComponent.find(getTestId('immediate-date-radio'))).element
+
+    const pastDate = <HTMLInputElement>(
+      EffectiveDateTimeComponent.find(getTestId('past-date-radio'))).element
+
+    expect(immediateDate.checked).toBeTruthy()
+    expect(pastDate.checked).toBeFalsy()
+  })
+
+  it('should set the Effective and Expiry Date Times', async () => {
+    const EffectiveDateTimeComponent = wrapper.findComponent(EffectiveDateTime)
+
+    expect(wrapper.vm.effectiveDate).toBeTruthy()
+
+    EffectiveDateTimeComponent.find(getTestId('past-date-radio')).trigger('click')
+    EffectiveDateTimeComponent.findComponent(SharedDatePicker).vm.$emit('emitDate', '2023-07-01')
+    expect(wrapper.vm.selectedPastDate).toBeTruthy()
+
+    wrapper.vm.selectHour = '10'
+    wrapper.vm.selectMinute = '25'
+
+    await Vue.nextTick()
+
+    const dateSummaryLabel = EffectiveDateTimeComponent.find(getTestId('date-summary-label'))
+    expect(dateSummaryLabel.exists()).toBeTruthy()
+    expect(dateSummaryLabel.text()).toContain('July 1, 2023 at 10:25 am')
+  })
+})
diff --git a/ppr-ui/tests/unit/MhrUnitNote.spec.ts b/ppr-ui/tests/unit/MhrUnitNote.spec.ts
index 78780cd21..3a7960d89 100644
--- a/ppr-ui/tests/unit/MhrUnitNote.spec.ts
+++ b/ppr-ui/tests/unit/MhrUnitNote.spec.ts
@@ -3,7 +3,7 @@ import Vuetify from 'vuetify'
 import { createPinia, setActivePinia } from 'pinia'
 import { useStore } from '../../src/store/store'
 import VueRouter from 'vue-router'
-import { createLocalVue, mount, shallowMount, Wrapper } from '@vue/test-utils'
+import { createLocalVue, mount, Wrapper } from '@vue/test-utils'
 import mockRouter from './MockRouter'
 
 import { MhrUnitNote } from '@/views'
@@ -11,7 +11,7 @@ import { RouteNames, UnitNoteDocTypes } from '@/enums'
 import { getTestId, setupMockUser } from './utils'
 import { UnitNotesInfo } from '@/resources/unitNotes'
 import { CertifyInformation, ContactInformation, DocumentId, Remarks } from '@/components/common'
-import { UnitNoteAdd, UnitNoteReview, UnitNoteReviewDetailsTable } from '@/components/unitNotes'
+import { EffectiveDateTime, UnitNoteAdd, UnitNoteReview, UnitNoteReviewDetailsTable } from '@/components/unitNotes'
 import { Attention } from '@/components/mhrRegistration/ReviewConfirm'
 import { StaffPayment } from '@bcrs-shared-components/staff-payment'
 
@@ -90,6 +90,7 @@ describe('MHR Unit Note Filing', () => {
 
     expect(UnitNoteReviewComponent.findComponent(UnitNoteReviewDetailsTable)).toBeTruthy()
     expect(UnitNoteReviewComponent.findComponent(ContactInformation)).toBeTruthy()
+    expect(UnitNoteReviewComponent.findComponent(EffectiveDateTime)).toBeTruthy()
     expect(UnitNoteReviewComponent.findComponent(Attention)).toBeTruthy()
     expect(UnitNoteReviewComponent.findComponent(CertifyInformation)).toBeTruthy()
     expect(UnitNoteReviewComponent.findComponent(StaffPayment)).toBeTruthy()