Adding the create fiat account API

layouts/default.vue

@@ -222,6 +222,10 @@ export default class DefaultLayoutsClass extends Vue {
       title: 'GET /settlements/{id}',
       to: '/debug/settlements/details',
     },
+    {
+      title: 'POST /accounts',
+      to: '/debug/accounts/create',
+    },
   ]
 
   paymentsLinks = [
@@ -273,6 +277,10 @@ export default class DefaultLayoutsClass extends Vue {
       title: 'GET /settlements/{id}',
       to: '/debug/settlements/details',
     },
+    {
+      title: 'POST /accounts',
+      to: '/debug/accounts/create',
+    },
   ]
 
   walletsLinks = [

lib/accountsApi.ts

@@ -0,0 +1,73 @@
+import { get } from 'lodash'
+import axios from 'axios'
+
+import { getAPIHostname } from './apiTarget'
+
+export interface CreateAccountPayload {
+  idempotencyKey: string
+  beneficiaryName: string
+  bankName: string
+  accountNumber: string
+  bankIdentifier: string
+  billingDetails: {
+    name: string
+    city: string
+    country: string
+    line1: string
+    line2: string
+    district: string
+    postalCode: string
+  }
+  bankAddress: {
+    city: string
+    country: string
+    line1: string
+    line2: string
+    district: string
+    postalCode: string
+  }
+}
+
+const instance = axios.create({
+  baseURL: getAPIHostname(),
+})
+
+/**
+ * Global error handler:
+ * Intercepts all axios reponses and maps
+ * to errorHandler object
+ */
+instance.interceptors.response.use(
+  function (response) {
+    if (get(response, 'data.data')) {
+      return response.data.data
+    }
+    return response
+  },
+  function (error) {
+    let response = get(error, 'response')
+    if (!response) {
+      response = error.toJSON()
+    }
+    return Promise.reject(response)
+  }
+)
+
+/** Returns the axios instance */
+function getInstance() {
+  return instance
+}
+
+/**
+ * Create Account
+ * @param {*} payload (contains form data)
+ */
+function createAccount(payload: CreateAccountPayload) {
+  const url = '/v1/wires'
+  return instance.post(url, payload)
+}
+
+export default {
+  getInstance,
+  createAccount,
+}

lib/accountsTestData.ts

@@ -0,0 +1,28 @@
+export const exampleAccounts = [
+  {
+    title: 'Test Data',
+    formData: {
+      beneficiaryName: 'Test User 1',
+      bankName: 'WELLS FARGO BANK',
+      accountNumber: '11111111111',
+      bankIdentifier: '121000248',
+      billingDetails: {
+        name: 'Test User 1',
+        city: 'City',
+        country: 'US',
+        line1: 'Address1',
+        line2: 'Address2',
+        district: 'CA',
+        postalCode: '11111',
+      },
+      bankAddress: {
+        city: 'SAN FRANCISCO',
+        country: 'US',
+        line1: 'line1',
+        line2: 'line2',
+        district: 'CA',
+        postalCode: '11111',
+      },
+    },
+  },
+]

nuxt.config.js

@@ -44,6 +44,7 @@ export default {
     '~/plugins/walletsApi',
     '~/plugins/transfersApi',
     '~/plugins/addressesApi',
+    '~/plugins/accountsApi',
   ],
   /*
    ** Nuxt.js dev-modules

pages/debug/accounts/create.vue

@@ -0,0 +1,231 @@
+<template>
+  <v-layout>
+    <v-row>
+      <v-col cols="12" md="4">
+        <v-menu>
+          <template v-slot:activator="{ on }">
+            <div class="d-flex flex-row-reverse">
+              <v-btn
+                v-if="isSandbox"
+                small
+                color="blue-grey lighten-1"
+                dark
+                v-on="on"
+              >
+                Prefill form
+              </v-btn>
+            </div>
+          </template>
+          <v-list>
+            <v-list-item
+              v-for="(item, index) in prefillItems"
+              :key="index"
+              @click="prefillForm(index)"
+            >
+              <v-list-item-title>{{ item.title }}</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+
+        <v-form>
+          <v-text-field
+            v-model="formData.beneficiaryName"
+            label="Beneficiary Name"
+          />
+
+          <v-text-field v-model="formData.bankName" label="Bank Name" />
+
+          <v-text-field
+            v-model="formData.accountNumber"
+            label="Account Number"
+          />
+
+          <v-text-field
+            v-model="formData.bankIdentifier"
+            label="Bank Identifier"
+          />
+
+          <v-text-field
+            v-model="formData.billingDetails.name"
+            label="Billing Name"
+          />
+
+          <v-text-field
+            v-model="formData.billingDetails.line1"
+            label="Billing Address Line 1"
+          />
+
+          <v-text-field
+            v-model="formData.billingDetails.line2"
+            label="Billing Address Line 2"
+          />
+
+          <v-text-field
+            v-model="formData.billingDetails.postalCode"
+            label="Billing Postalcode"
+          />
+
+          <v-text-field
+            v-model="formData.billingDetails.city"
+            label="Billing City"
+          />
+
+          <v-text-field
+            v-model="formData.billingDetails.district"
+            label="Billing District"
+            hint="State / County / Province / Region portion of the address. US and Canada use the two-letter code for the subdivision"
+          />
+
+          <v-text-field
+            v-model="formData.billingDetails.country"
+            label="Billing Country Code"
+          />
+
+          <v-text-field
+            v-model="formData.bankAddress.line1"
+            label="Bank Address Line 1"
+          />
+
+          <v-text-field
+            v-model="formData.bankAddress.line2"
+            label="Bank Address Line 2"
+          />
+
+          <v-text-field
+            v-model="formData.bankAddress.postalCode"
+            label="Bank Postalcode"
+          />
+
+          <v-text-field
+            v-model="formData.bankAddress.city"
+            label="Bank Address City"
+          />
+
+          <v-text-field
+            v-model="formData.bankAddress.district"
+            label="Bank Address District"
+            hint="State / County / Province / Region portion of the address. US and Canada use the two-letter code for the subdivision"
+          />
+
+          <v-text-field
+            v-model="formData.bankAddress.country"
+            label="Bank Address Country Code"
+          />
+
+          <v-btn
+            depressed
+            color="primary"
+            :loading="loading"
+            @click.prevent="makeApiCall()"
+          >
+            Make api call
+          </v-btn>
+        </v-form>
+      </v-col>
+      <v-col cols="12" md="8">
+        <RequestInfo
+          :url="requestUrl"
+          :payload="payload"
+          :response="response"
+        />
+      </v-col>
+    </v-row>
+    <ErrorSheet
+      :error="error"
+      :show-error="showError"
+      @onChange="onErrorSheetClosed"
+    />
+  </v-layout>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'nuxt-property-decorator'
+import { mapGetters } from 'vuex'
+import { v4 as uuidv4 } from 'uuid'
+import { getLive } from '@/lib/apiTarget'
+import { exampleAccounts } from '@/lib/accountsTestData'
+import { CreateAccountPayload } from '@/lib/accountsApi'
+import RequestInfo from '@/components/RequestInfo.vue'
+import ErrorSheet from '@/components/ErrorSheet.vue'
+@Component({
+  components: {
+    RequestInfo,
+    ErrorSheet,
+  },
+  computed: {
+    ...mapGetters({
+      payload: 'getRequestPayload',
+      response: 'getRequestResponse',
+      requestUrl: 'getRequestUrl',
+    }),
+  },
+})
+export default class CreateCardClass extends Vue {
+  // data
+  formData = {
+    beneficiaryName: '',
+    bankName: '',
+    accountNumber: '',
+    bankIdentifier: '',
+    billingDetails: {
+      name: '',
+      city: '',
+      country: '',
+      line1: '',
+      line2: '',
+      district: '',
+      postalCode: '',
+    },
+    bankAddress: {
+      city: '',
+      country: '',
+      line1: '',
+      line2: '',
+      district: '',
+      postalCode: '',
+    },
+  }
+
+  rules = {
+    isNumber: (v: string) =>
+      v === '' || !isNaN(parseInt(v)) || 'Please enter valid number',
+    required: (v: string) => !!v || 'Field is required',
+  }
+
+  prefillItems = exampleAccounts
+  error = {}
+  loading = false
+  showError = false
+  expiryLabels = {
+    month: 'Expiry Month',
+    year: 'Expiry Year',
+  }
+
+  isSandbox: Boolean = !getLive()
+  onErrorSheetClosed() {
+    this.error = {}
+    this.showError = false
+  }
+
+  prefillForm(index: number) {
+    console.log(exampleAccounts[index])
+    this.formData = exampleAccounts[index].formData
+  }
+
+  async makeApiCall() {
+    this.loading = true
+    const payload: CreateAccountPayload = {
+      idempotencyKey: uuidv4(),
+      ...this.formData,
+    }
+    try {
+      await this.$accountsApi.createAccount(payload)
+    } catch (error) {
+      this.error = error
+      this.showError = true
+    } finally {
+      this.loading = false
+    }
+  }
+}
+</script>