From 295cc4996696a8c9c494c05cf3d28cc44aeb13eb Mon Sep 17 00:00:00 2001
From: Jia Xu <Jia.Xu@gov.bc.ca>
Date: Fri, 20 Oct 2023 16:40:54 -0700
Subject: [PATCH 1/4] add EFT payments

---
 auth-web/package-lock.json                    |  4 +--
 auth-web/package.json                         |  2 +-
 .../components/auth/common/PaymentMethods.vue | 34 ++++++++++++++++++-
 auth-web/src/util/config-helper.ts            |  2 +-
 4 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/auth-web/package-lock.json b/auth-web/package-lock.json
index e23e12dfad..f86b9e2fd9 100644
--- a/auth-web/package-lock.json
+++ b/auth-web/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "auth-web",
-  "version": "2.4.41",
+  "version": "2.4.42",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "auth-web",
-      "version": "2.4.41",
+      "version": "2.4.42",
       "dependencies": {
         "@bcrs-shared-components/base-address": "2.0.3",
         "@bcrs-shared-components/bread-crumb": "1.0.8",
diff --git a/auth-web/package.json b/auth-web/package.json
index aa4cc13392..a8525ec633 100644
--- a/auth-web/package.json
+++ b/auth-web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "auth-web",
-  "version": "2.4.41",
+  "version": "2.4.42",
   "appName": "Auth Web",
   "sbcName": "SBC Common Components",
   "private": true,
diff --git a/auth-web/src/components/auth/common/PaymentMethods.vue b/auth-web/src/components/auth/common/PaymentMethods.vue
index b63cb22d41..c95f22e678 100644
--- a/auth-web/src/components/auth/common/PaymentMethods.vue
+++ b/auth-web/src/components/auth/common/PaymentMethods.vue
@@ -82,6 +82,18 @@
                   />
                 </div>
 
+                <!-- EFT -->
+                <div
+                  v-else-if="(payment.type === paymentTypes.EFT)"
+                  class="pt-7"
+                >
+                  <v-divider class="mb-7" />
+                  <div>
+                    To send us a payment through electronic funds transfer (EFT), please read the
+                    <a @click="getEftInstructions">Electronic Funds Transfer Payment Instructions</a>.
+                  </div>
+                </div>
+
                 <!-- Other Payment Types -->
                 <div
                   v-else
@@ -120,10 +132,12 @@
 
 <script lang="ts">
 import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
-import { Organization, PADInfo } from '@/models/Organization'
+import { OrgProduct, Organization, PADInfo } from '@/models/Organization'
 import { Action } from 'pinia-class'
 import { BcolProfile } from '@/models/bcol'
+import CommonUtils from '@/util/common-util'
 import ConfigHelper from '@/util/config-helper'
+import DocumentService from '@/services/document.services'
 import GLPaymentForm from '@/components/auth/common/GLPaymentForm.vue'
 import LinkedBCOLBanner from '@/components/auth/common/LinkedBCOLBanner.vue'
 import PADInfoForm from '@/components/auth/common/PADInfoForm.vue'
@@ -140,6 +154,14 @@ const PAYMENT_METHODS = {
                   be requested when you are ready to complete a transaction.`,
     isSelected: false
   },
+  [PaymentTypes.EFT]: {
+    type: PaymentTypes.EFT,
+    icon: 'mdi-arrow-right-circle-outline',
+    title: 'Electronic Funds Transfer',
+    subtitle: 'Make payments from your bank account. Statement will be issued monthly.',
+    description: ``,
+    isSelected: false
+  },
   [PaymentTypes.PAD]: {
     type: PaymentTypes.PAD,
     icon: 'mdi-bank-outline',
@@ -256,6 +278,16 @@ export default class PaymentMethods extends Vue {
     return (this.selectedPaymentMethod === payment.type)
   }
 
+  private async getEftInstructions () {
+    try {
+      const downloadData = await DocumentService.getEftInstructions()
+      CommonUtils.fileDownload(downloadData?.data, `bcrs_eft_instructions.pdf`, downloadData?.headers['content-type'])
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error)
+    }
+  }
+
   @Emit()
   paymentMethodSelected (payment, isTouched = true) {
     this.selectedPaymentMethod = payment.type
diff --git a/auth-web/src/util/config-helper.ts b/auth-web/src/util/config-helper.ts
index c721c7301f..f3f1622883 100644
--- a/auth-web/src/util/config-helper.ts
+++ b/auth-web/src/util/config-helper.ts
@@ -235,7 +235,7 @@ export default class ConfigHelper {
   static paymentsAllowedPerAccountType () {
     return {
       [Account.BASIC]: [ PaymentTypes.CREDIT_CARD, PaymentTypes.ONLINE_BANKING ],
-      [Account.PREMIUM]: [ PaymentTypes.PAD, PaymentTypes.BCOL ],
+      [Account.PREMIUM]: [ PaymentTypes.PAD, PaymentTypes.BCOL, PaymentTypes.EFT ],
       [Account.UNLINKED_PREMIUM]: [ PaymentTypes.PAD, PaymentTypes.BCOL ]
     }
   }

From 103cfd0b5b37af2a2331d41c2367b4e0d9e17ed5 Mon Sep 17 00:00:00 2001
From: Jia Xu <Jia.Xu@gov.bc.ca>
Date: Fri, 20 Oct 2023 16:50:00 -0700
Subject: [PATCH 2/4] fix lint error

---
 auth-web/src/components/auth/common/PaymentMethods.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/auth-web/src/components/auth/common/PaymentMethods.vue b/auth-web/src/components/auth/common/PaymentMethods.vue
index c95f22e678..f2896b7fbc 100644
--- a/auth-web/src/components/auth/common/PaymentMethods.vue
+++ b/auth-web/src/components/auth/common/PaymentMethods.vue
@@ -132,7 +132,7 @@
 
 <script lang="ts">
 import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
-import { OrgProduct, Organization, PADInfo } from '@/models/Organization'
+import { Organization, PADInfo } from '@/models/Organization'
 import { Action } from 'pinia-class'
 import { BcolProfile } from '@/models/bcol'
 import CommonUtils from '@/util/common-util'

From b607b0c2e2c03dd86ded9b3bf51cbe81142da2f5 Mon Sep 17 00:00:00 2001
From: Jia Xu <Jia.Xu@gov.bc.ca>
Date: Thu, 26 Oct 2023 17:41:30 -0700
Subject: [PATCH 3/4] add eftEnable to store

---
 .../src/components/auth/common/PaymentMethods.vue | 15 +++++++++++++--
 auth-web/src/models/Organization.ts               |  1 +
 auth-web/src/util/config-helper.ts                |  2 +-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/auth-web/src/components/auth/common/PaymentMethods.vue b/auth-web/src/components/auth/common/PaymentMethods.vue
index f2896b7fbc..bb29a9f676 100644
--- a/auth-web/src/components/auth/common/PaymentMethods.vue
+++ b/auth-web/src/components/auth/common/PaymentMethods.vue
@@ -132,7 +132,7 @@
 
 <script lang="ts">
 import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
-import { Organization, PADInfo } from '@/models/Organization'
+import { OrgPaymentDetails, Organization, PADInfo } from '@/models/Organization'
 import { Action } from 'pinia-class'
 import { BcolProfile } from '@/models/bcol'
 import CommonUtils from '@/util/common-util'
@@ -142,6 +142,7 @@ import GLPaymentForm from '@/components/auth/common/GLPaymentForm.vue'
 import LinkedBCOLBanner from '@/components/auth/common/LinkedBCOLBanner.vue'
 import PADInfoForm from '@/components/auth/common/PADInfoForm.vue'
 import { PaymentTypes } from '@/util/constants'
+import { mapState } from 'pinia'
 import { useOrgStore } from '@/stores/org'
 
 const PAYMENT_METHODS = {
@@ -215,9 +216,16 @@ const PAYMENT_METHODS = {
     PADInfoForm,
     LinkedBCOLBanner,
     GLPaymentForm
+  },
+  computed: {
+    ...mapState(useOrgStore, [
+      'currentOrgPaymentDetails'
+    ])
   }
 })
 export default class PaymentMethods extends Vue {
+  private currentOrgPaymentDetails!: OrgPaymentDetails
+
   @Prop({ default: '' }) currentOrgType: string
   @Prop({ default: undefined }) currentOrganization: Organization
   @Prop({ default: '' }) currentSelectedPaymentMethod: string
@@ -228,7 +236,7 @@ export default class PaymentMethods extends Vue {
   @Prop({ default: false }) isInitialTOSAccepted: boolean
   @Prop({ default: false }) isInitialAcknowledged: boolean
 
-  @Action(useOrgStore) public fetchCurrentOrganizationGLInfo!:(accountId: number) =>Promise<any>
+  @Action(useOrgStore) public fetchCurrentOrganizationGLInfo!: (accountId: number) => Promise<any>
 
   selectedPaymentMethod: string = ''
   paymentTypes = PaymentTypes
@@ -249,6 +257,9 @@ export default class PaymentMethods extends Vue {
         }
       })
     }
+    if (this.currentOrgPaymentDetails?.eftEnable) {
+      paymentMethods.push(PaymentTypes.EFT)
+    }
     return paymentMethods
   }
 
diff --git a/auth-web/src/models/Organization.ts b/auth-web/src/models/Organization.ts
index 71d6de3ac0..ad933aab62 100644
--- a/auth-web/src/models/Organization.ts
+++ b/auth-web/src/models/Organization.ts
@@ -219,6 +219,7 @@ export interface OrgPaymentDetails {
   padTosAcceptedBy:string
   padTosAcceptedDate:string
   futurePaymentMethod: string
+  eftEnable?: boolean
 }
 
 export interface CFSAccountDetails {
diff --git a/auth-web/src/util/config-helper.ts b/auth-web/src/util/config-helper.ts
index f3f1622883..c721c7301f 100644
--- a/auth-web/src/util/config-helper.ts
+++ b/auth-web/src/util/config-helper.ts
@@ -235,7 +235,7 @@ export default class ConfigHelper {
   static paymentsAllowedPerAccountType () {
     return {
       [Account.BASIC]: [ PaymentTypes.CREDIT_CARD, PaymentTypes.ONLINE_BANKING ],
-      [Account.PREMIUM]: [ PaymentTypes.PAD, PaymentTypes.BCOL, PaymentTypes.EFT ],
+      [Account.PREMIUM]: [ PaymentTypes.PAD, PaymentTypes.BCOL ],
       [Account.UNLINKED_PREMIUM]: [ PaymentTypes.PAD, PaymentTypes.BCOL ]
     }
   }

From 8b9d048af7c829ce4f54f1b9ee9518721d829c1c Mon Sep 17 00:00:00 2001
From: Jia Xu <Jia.Xu@gov.bc.ca>
Date: Mon, 30 Oct 2023 08:22:22 -0700
Subject: [PATCH 4/4] update paymentMethods.vue to composition-api

---
 .../components/auth/common/PaymentMethods.vue | 203 +++++++++---------
 1 file changed, 104 insertions(+), 99 deletions(-)

diff --git a/auth-web/src/components/auth/common/PaymentMethods.vue b/auth-web/src/components/auth/common/PaymentMethods.vue
index bb29a9f676..c2ac5a358b 100644
--- a/auth-web/src/components/auth/common/PaymentMethods.vue
+++ b/auth-web/src/components/auth/common/PaymentMethods.vue
@@ -131,9 +131,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
-import { OrgPaymentDetails, Organization, PADInfo } from '@/models/Organization'
-import { Action } from 'pinia-class'
+import { computed, defineComponent, onMounted, ref } from '@vue/composition-api'
 import { BcolProfile } from '@/models/bcol'
 import CommonUtils from '@/util/common-util'
 import ConfigHelper from '@/util/config-helper'
@@ -142,7 +140,6 @@ import GLPaymentForm from '@/components/auth/common/GLPaymentForm.vue'
 import LinkedBCOLBanner from '@/components/auth/common/LinkedBCOLBanner.vue'
 import PADInfoForm from '@/components/auth/common/PADInfoForm.vue'
 import { PaymentTypes } from '@/util/constants'
-import { mapState } from 'pinia'
 import { useOrgStore } from '@/stores/org'
 
 const PAYMENT_METHODS = {
@@ -211,125 +208,133 @@ const PAYMENT_METHODS = {
   }
 }
 
-@Component({
+export default defineComponent({
+  name: 'PaymentMethods',
   components: {
     PADInfoForm,
     LinkedBCOLBanner,
     GLPaymentForm
   },
-  computed: {
-    ...mapState(useOrgStore, [
-      'currentOrgPaymentDetails'
-    ])
-  }
-})
-export default class PaymentMethods extends Vue {
-  private currentOrgPaymentDetails!: OrgPaymentDetails
+  props: {
+    currentOrgType: { default: '' },
+    currentOrganization: { default: undefined },
+    currentSelectedPaymentMethod: { default: '' },
+    currentOrgPaymentType: { default: undefined },
+    isChangeView: { default: false },
+    isAcknowledgeNeeded: { default: true },
+    isTouchedUpdate: { default: false },
+    isInitialTOSAccepted: { default: false },
+    isInitialAcknowledged: { default: false }
+  },
+  emits: ['get-PAD-info', 'emit-bcol-info', 'is-pad-valid', 'payment-method-selected'],
+  setup (props, { emit }) {
+    const { fetchCurrentOrganizationGLInfo, currentOrgPaymentDetails } = useOrgStore()
 
-  @Prop({ default: '' }) currentOrgType: string
-  @Prop({ default: undefined }) currentOrganization: Organization
-  @Prop({ default: '' }) currentSelectedPaymentMethod: string
-  @Prop({ default: undefined }) currentOrgPaymentType: string
-  @Prop({ default: false }) isChangeView: boolean
-  @Prop({ default: true }) isAcknowledgeNeeded: boolean
-  @Prop({ default: false }) isTouchedUpdate: boolean
-  @Prop({ default: false }) isInitialTOSAccepted: boolean
-  @Prop({ default: false }) isInitialAcknowledged: boolean
+    const selectedPaymentMethod = ref('')
+    const paymentTypes = PaymentTypes
+    const padInfo = ref({})
+    const isTouched = ref(false)
+    const ejvPaymentInformationTitle = 'General Ledger Information'
 
-  @Action(useOrgStore) public fetchCurrentOrganizationGLInfo!: (accountId: number) => Promise<any>
+    // this object can define the payment methods allowed for each account tyoes
+    const paymentsPerAccountType = ConfigHelper.paymentsAllowedPerAccountType()
 
-  selectedPaymentMethod: string = ''
-  paymentTypes = PaymentTypes
-  padInfo: PADInfo = {} as PADInfo
-  isTouched: boolean = false
-  ejvPaymentInformationTitle = 'General Ledger Information'
+    const allowedPaymentMethods = computed(() => {
+      const paymentMethods = []
+      if (props.currentOrgType) {
+        const paymentTypes = paymentsPerAccountType[props.currentOrgType]
+        paymentTypes.forEach((paymentType) => {
+          if (PAYMENT_METHODS[paymentType]) {
+            paymentMethods.push(PAYMENT_METHODS[paymentType])
+          }
+        })
+      }
+      if (currentOrgPaymentDetails?.eftEnable) {
+        paymentMethods.push(PaymentTypes.EFT)
+      }
+      return paymentMethods
+    })
 
-  // this object can define the payment methods allowed for each account tyoes
-  paymentsPerAccountType = ConfigHelper.paymentsAllowedPerAccountType()
+    const forceEditModeBCOL = computed(() =>
+      props.currentSelectedPaymentMethod === PaymentTypes.BCOL &&
+      props.currentOrgPaymentType !== undefined &&
+      props.currentOrgPaymentType !== PaymentTypes.BCOL
+    )
 
-  get allowedPaymentMethods () {
-    const paymentMethods = []
-    if (this.currentOrgType) {
-      const paymentTypes = this.paymentsPerAccountType[this.currentOrgType]
-      paymentTypes.forEach(paymentType => {
-        if (PAYMENT_METHODS[paymentType]) {
-          paymentMethods.push(PAYMENT_METHODS[paymentType])
-        }
-      })
-    }
-    if (this.currentOrgPaymentDetails?.eftEnable) {
-      paymentMethods.push(PaymentTypes.EFT)
-    }
-    return paymentMethods
-  }
+    const isPaymentEJV = computed(() => selectedPaymentMethod.value === PaymentTypes.EJV)
 
-  get forceEditModeBCOL () {
-    return this.currentSelectedPaymentMethod === PaymentTypes.BCOL &&
-           this.currentOrgPaymentType !== undefined &&
-           this.currentOrgPaymentType !== PaymentTypes.BCOL
-  }
-
-  get isPaymentEJV () {
-    return this.currentSelectedPaymentMethod === PaymentTypes.EJV
-  }
+    // set on change of input only for single allowed payments
+    const isPadInfoTouched = (isTouch: boolean) => {
+      isTouched.value = isTouch
+    }
 
-  // set on change of input only for single allowed payments
-  isPadInfoTouched (isTouched: boolean) {
-    this.isTouched = isTouched
-  }
+    const isPaymentSelected = (payment) => {
+      return (selectedPaymentMethod.value === payment.type)
+    }
 
-  private async mounted () {
-    this.paymentMethodSelected({ type: this.currentSelectedPaymentMethod }, false)
-    if (this.isPaymentEJV) {
-      await this.fetchCurrentOrganizationGLInfo(this.currentOrganization?.id)
+    const getEftInstructions = async () => {
+      try {
+        const downloadData = await DocumentService.getEftInstructions()
+        CommonUtils.fileDownload(downloadData?.data, `bcrs_eft_instructions.pdf`, downloadData?.headers['content-type'])
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.log(error)
+      }
     }
-  }
 
-  isPaymentSelected (payment) {
-    return (this.selectedPaymentMethod === payment.type)
-  }
+    const paymentMethodSelected = (payment, isTouch = true) => {
+      selectedPaymentMethod.value = payment.type
+      isTouched.value = isTouch
+      // Emit touched flag for the parent element
+      if (props.isTouchedUpdate) {
+        emit('payment-method-selected', { selectedPaymentMethod: selectedPaymentMethod.value, isTouched: isTouched.value })
+      } else {
+        emit('payment-method-selected', selectedPaymentMethod.value)
+      }
+    }
 
-  private async getEftInstructions () {
-    try {
-      const downloadData = await DocumentService.getEftInstructions()
-      CommonUtils.fileDownload(downloadData?.data, `bcrs_eft_instructions.pdf`, downloadData?.headers['content-type'])
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.log(error)
+    const getPADInfo = (padInfoValue) => {
+      padInfo.value = padInfoValue
+      emit('get-PAD-info', padInfoValue)
     }
-  }
 
-  @Emit()
-  paymentMethodSelected (payment, isTouched = true) {
-    this.selectedPaymentMethod = payment.type
-    this.isTouched = isTouched
-    // emit touched flag for parent element
-    if (this.isTouchedUpdate) {
-      return { selectedPaymentMethod: this.selectedPaymentMethod, isTouched }
+    const setBcolInfo = (bcolProfile: BcolProfile) => {
+      emit('emit-bcol-info', bcolProfile)
     }
-    return this.selectedPaymentMethod
-  }
 
-  @Emit('get-PAD-info')
-  getPADInfo (padInfo: PADInfo) {
-    this.padInfo = padInfo
-    return this.padInfo
-  }
+    const isPADValid = (isValid) => {
+      if (isValid) {
+        paymentMethodSelected({ type: PaymentTypes.PAD }, isTouched.value)
+      }
+      return isValid && isTouched.value
+    }
 
-  @Emit('emit-bcol-info')
-  setBcolInfo (bcolProfile: BcolProfile) {
-    return bcolProfile
-  }
+    onMounted(async () => {
+      paymentMethodSelected({ type: props.currentSelectedPaymentMethod }, false)
+      if (isPaymentEJV.value) {
+        await fetchCurrentOrganizationGLInfo(props.currentOrganization?.id)
+      }
+    })
 
-  @Emit('is-pad-valid')
-  isPADValid (isValid) {
-    if (isValid) {
-      this.paymentMethodSelected({ type: PaymentTypes.PAD }, this.isTouched)
+    return {
+      selectedPaymentMethod,
+      paymentTypes,
+      padInfo,
+      isTouched,
+      ejvPaymentInformationTitle,
+      allowedPaymentMethods,
+      forceEditModeBCOL,
+      isPaymentEJV,
+      getEftInstructions,
+      paymentMethodSelected,
+      getPADInfo,
+      setBcolInfo,
+      isPADValid,
+      isPadInfoTouched,
+      isPaymentSelected
     }
-    // if !this.isTouched then nothing has changed (keeps save btn disabled)
-    return isValid && this.isTouched
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>