17869 - Adding CFS account number BUSINESS-FILINGS-UI (bcgov#565)

* 17869 - Adding CFS account number BUSINESS-FILINGS-UI

Signed-off-by: AbrahamRostampoor <Mohammadebrahim.Rostampoor@gov.bc.ca>

* cfs Update

* Latest Updates

* Formatting

* Updated package.json and package-lock.json version number

---------

Signed-off-by: AbrahamRostampoor <Mohammadebrahim.Rostampoor@gov.bc.ca>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "business-filings-ui",
-  "version": "7.0.24",
+  "version": "7.0.25",
   "private": true,
   "appName": "Filings UI",
   "sbcName": "SBC Common Components",

src/components/Dashboard/TodoList.vue

@@ -541,6 +541,8 @@
             <PaymentPendingOnlineBanking
               v-if="EnumUtilities.isPayMethodOnlineBanking(item)"
               :filing="item"
+              :payApiUrl="getPayApiUrl"
+              :accountId="accountId"
               class="mb-6"
             />
             <PaymentPending v-else />
@@ -659,6 +661,7 @@ export default class TodoList extends Mixins(AllowableActionsMixin, DateMixin, E
   inProcessFiling: number = null
   fetchAffiliationInvitationsErrorDialog = false
   authorizeAffiliationInvitationErrorDialog = false
+  accountId: number = null
 
   @Prop({ default: null }) readonly highlightId!: number
 
@@ -960,9 +963,9 @@ export default class TodoList extends Mixins(AllowableActionsMixin, DateMixin, E
     }
 
     // load all the invitations here and push them into todo items
-    const accountId = JSON.parse(sessionStorage.getItem('CURRENT_ACCOUNT'))?.id
+    this.accountId = JSON.parse(sessionStorage.getItem('CURRENT_ACCOUNT'))?.id
     const response =
-      await AuthServices.fetchAffiliationInvitations(this.getAuthApiUrl, this.getIdentifier, accountId)
+      await AuthServices.fetchAffiliationInvitations(this.getAuthApiUrl, this.getIdentifier, this.accountId)
         .catch((err) => {
           console.log('Error fetching affiliation invitations for todo', err) // eslint-disable-line no-console
           this.fetchAffiliationInvitationsErrorDialog = true

src/components/Dashboard/TodoList/PaymentPendingOnlineBanking.vue

@@ -11,6 +11,12 @@
         If you have not done so, <strong>log in to your online bank account</strong> to pay the
         outstanding balance on your BC Registries and Online Services account.
       </li>
+      <li>
+        Enter <strong>"BC Registries and Online Services"</strong> as payee.
+      </li>
+      <li>
+        Enter the following account number: <strong>{{ cfsAccountId }}</strong>
+      </li>
       <li>
         Once submitted through your bank, Online Banking payments can take <strong>2 to 5 days to
           be processed</strong>.
@@ -30,16 +36,25 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
+import { PayServices } from '@/services/'
 
 @Component({})
 export default class PaymentPendingOnlineBanking extends Vue {
   /** The subject filing. */
   @Prop({ required: true }) readonly filing!: any
+  @Prop({ required: true }) readonly payApiUrl!: string
+  @Prop({ required: true }) readonly accountId!: any
+
+  cfsAccountId: string = null;
 
   /** The draft title of the subject filing. */
   get draftTitle (): string {
     return this.filing?.draftTitle || 'filing'
   }
+
+  async mounted () {
+    this.cfsAccountId = await PayServices.fetchCfsAccountId(this.payApiUrl, this.accountId)
+  }
 }
 </script>
 

src/services/pay-services.ts

@@ -18,4 +18,21 @@ export default class PayServices {
       .then(response => response?.data)
       .catch(() => {}) // ignore errors
   }
+
+  /**
+   * Fetches the CFS account ID from the pay-api.
+   * @param payApiUrl the URL of the pay-api
+   * @param accountId the ID for which to fetch the CFS account ID
+   * @returns the CFS account ID
+   */
+  static async fetchCfsAccountId (payApiUrl: string, accountId: number): Promise<string> {
+    const url = `${payApiUrl}accounts/${accountId}`
+    try {
+      const response = await axios.get(url)
+      return response?.data?.cfsAccount?.cfsAccountNumber
+    } catch (error) {
+      console.error('Error fetching data from Pay API:', error)
+      throw error
+    }
+  }
 }

tests/unit/PaymentPendingOnlineBanking.spec.ts

@@ -18,13 +18,16 @@ describe('Payment Pending Online Banking', () => {
     expect(wrapper.find('p').text()).toContain('This filing is pending')
 
     const listItems = wrapper.findAll('li')
-    expect(listItems.length).toBe(4)
+    expect(listItems.length).toBe(6)
     expect(listItems.at(0).text()).toContain('If you have not done so')
-    expect(listItems.at(1).text()).toContain('Once submitted through your bank')
-    expect(listItems.at(2).text()).toContain('Changes based on this filing')
-    expect(listItems.at(2).text()).toContain('for this filing is received')
-    expect(listItems.at(3).text()).toContain('You can use a credit card')
-    expect(listItems.at(3).text()).toContain('for this filing immediately')
+    expect(listItems.at(1).text()).toContain('Enter')
+    expect(listItems.at(1).text()).toContain('as payee')
+    expect(listItems.at(2).text()).toContain('Enter the following account number:')
+    expect(listItems.at(3).text()).toContain('Once submitted through your bank')
+    expect(listItems.at(4).text()).toContain('Changes based on this filing')
+    expect(listItems.at(4).text()).toContain('until the payment for this filing')
+    expect(listItems.at(5).text()).toContain('You can use a credit card')
+    expect(listItems.at(5).text()).toContain('for this filing immediately')
 
     wrapper.destroy()
   })
@@ -40,13 +43,15 @@ describe('Payment Pending Online Banking', () => {
     expect(wrapper.find('p').text()).toContain('This Director Change is pending')
 
     const listItems = wrapper.findAll('li')
-    expect(listItems.length).toBe(4)
+    expect(listItems.length).toBe(6)
     expect(listItems.at(0).text()).toContain('If you have not done so')
-    expect(listItems.at(1).text()).toContain('Once submitted through your bank')
-    expect(listItems.at(2).text()).toContain('Changes based on this Director Change')
-    expect(listItems.at(2).text()).toContain('for this Director Change is received')
-    expect(listItems.at(3).text()).toContain('You can use a credit card')
-    expect(listItems.at(3).text()).toContain('for this Director Change immediately')
+    expect(listItems.at(1).text()).toContain('Enter "BC Registries and Online Services"')
+    expect(listItems.at(2).text()).toContain('Enter the following account number:')
+    expect(listItems.at(3).text()).toContain('Once submitted through your bank')
+    expect(listItems.at(4).text()).toContain('Changes based on this Director Change')
+    expect(listItems.at(4).text()).toContain('until the payment for this Director Change')
+    expect(listItems.at(5).text()).toContain('You can use a credit card')
+    expect(listItems.at(5).text()).toContain('for this Director Change immediately')
 
     wrapper.destroy()
   })

tests/unit/pay-services.spec.ts

@@ -32,4 +32,21 @@ describe('Pay Services', () => {
     // verify data
     expect(response).toEqual({ ...paymentErrorObj })
   })
+
+  it('fetches cfs account number correctly', async () => {
+    get.withArgs(`accounts/123`)
+      .returns(new Promise(resolve => resolve({
+        data: {
+          cfsAccount: {
+            cfsAccountNumber: '99'
+          }
+        }
+      })))
+
+    const response = await PayServices.fetchCfsAccountId('', 123)
+
+    sinon.assert.called(get)
+    // verify data
+    expect(response).toEqual('99')
+  })
 })