@mx-cartographer/experiences 4.0.13 → 4.0.14-alpha.JB1

package/src/accounts/stores/AccountStore.ts

@@ -0,0 +1,220 @@
+import { makeAutoObservable, runInAction } from 'mobx'
+
+import {
+  AccountType,
+  ErrorStatuses,
+  MfaStatuses,
+  ConnectionStatus,
+  ProcessingStatuses,
+} from '../../common'
+
+import type { Account, GlobalStore, Institution, Member } from '../../common'
+
+import { AccountApi } from '../api/AccountApi'
+import { UiStore } from './UiStore'
+
+export class AccountStore {
+  api: AccountApi = new AccountApi('/', '')
+
+  globalStore: GlobalStore
+
+  accounts: Account[] = []
+  institutions: Institution[] = []
+  members: Member[] = []
+  uiStore: UiStore
+
+  constructor(globalStore: GlobalStore) {
+    this.globalStore = globalStore
+    this.uiStore = new UiStore()
+    makeAutoObservable(this)
+  }
+
+  initialize = async (endpoint: string, token: string) => {
+    this.api = new AccountApi(endpoint, token)
+
+    await Promise.all([this.loadAccounts(), this.loadInstitutions()])
+  }
+
+  get cashAccounts(): Account[] {
+    return this.accounts.filter(
+      (account: Account) =>
+        account.account_type === AccountType.CASH ||
+        account.account_type === AccountType.CHECKING ||
+        account.account_type === AccountType.PREPAID ||
+        account.account_type === AccountType.SAVINGS ||
+        account.account_type === AccountType.CHECKING_LINE_OF_CREDIT,
+    )
+  }
+
+  get debtAccounts(): Account[] {
+    return this.accounts.filter(
+      (account: Account) =>
+        account.account_type === AccountType.CREDIT_CARD ||
+        account.account_type === AccountType.LOAN ||
+        account.account_type === AccountType.MORTGAGE ||
+        account.account_type === AccountType.LINE_OF_CREDIT ||
+        account.account_type === AccountType.CHECKING_LINE_OF_CREDIT,
+    )
+  }
+
+  get cashBalance(): number {
+    return this.cashAccounts.reduce((total, account) => total + (account?.balance || 0), 0)
+  }
+
+  addAccount = async (account: Account) => {
+    try {
+      const newAccount = await this.api.createAccount(account)
+
+      runInAction(() => {
+        this.accounts = [...this.accounts, newAccount]
+      })
+    } catch (error) {
+      console.error(`Error occurred while adding an account: ${error}`)
+    }
+  }
+
+  augmentAccounts = (accounts: Account[] = this.accounts) => {
+    const augmentedAccounts: Account[] = []
+
+    accounts.forEach((account: Account) => {
+      const memberLocation = this.members.findIndex(
+        (member: Member) => member.guid === account.member_guid,
+      )
+      if (memberLocation > -1) {
+        let connectionStatus = ConnectionStatus.Connected
+        const member = this.members[memberLocation]
+        if (ErrorStatuses.includes(member.connection_status)) {
+          connectionStatus = ConnectionStatus.Error
+        } else if (ProcessingStatuses.includes(member.connection_status)) {
+          connectionStatus = ConnectionStatus.Processing
+        } else if (MfaStatuses.includes(member.connection_status)) {
+          connectionStatus = ConnectionStatus.RequiresMfa
+        }
+
+        augmentedAccounts.push({
+          ...account,
+          memberName: member.name,
+          connectionStatus,
+        })
+
+        this.members[memberLocation].connectionStatus = connectionStatus
+      }
+    })
+
+    return augmentedAccounts
+  }
+
+  loadAccounts = async () => {
+    await this.loadMembers()
+
+    try {
+      const accounts = await this.api.getAccounts()
+
+      runInAction(() => {
+        this.accounts = this.sortAccounts(this.augmentAccounts(accounts))
+      })
+    } catch (error) {
+      console.error(`Error occurred while loading accounts: ${error}`)
+    }
+  }
+
+  loadInstitutions = async () => {
+    try {
+      const institutions = await this.api.getInstitutions()
+
+      runInAction(() => {
+        this.institutions = institutions
+      })
+    } catch (error) {
+      console.error(`Error occurred while loading institutions: ${error}`)
+    }
+  }
+
+  loadMembers = async () => {
+    try {
+      const members = await this.api.getMembers()
+
+      runInAction(() => {
+        this.members = members
+      })
+    } catch (error) {
+      console.error(`Error occurred while loading members: ${error}`)
+    }
+  }
+
+  mergeAccounts = async (accountGuids: string[]) => {
+    try {
+      const response = await this.api.mergeAccounts(accountGuids)
+      // the response from the api is a funky database key here, so this is essentially just getting the first item in the returned object
+      // to prevent making multiple api calls here
+      const mergedAccount = response[Object.keys(response)[0]]
+
+      runInAction(() => {
+        const account2Index = this.accounts.findIndex((account) => account.guid === accountGuids[1])
+        this.accounts.splice(account2Index, 1)
+
+        const account1Index = this.accounts.findIndex((account) => account.guid === accountGuids[0])
+        this.accounts.splice(account1Index, 1, mergedAccount)
+      })
+    } catch (error) {
+      console.error(`Error occurred while merging accounts: ${error}`)
+    }
+  }
+
+  sortAccounts = (accounts: Account[] = this.accounts) => {
+    return accounts.sort((a: Account, b: Account) => {
+      // orders by account type descending (Checking -> Savings -> Credit card)
+      if (a.account_type > b.account_type) return 1
+      if (a.account_type < b.account_type) return -1
+      // orders by name (Emergency Savings -> Health Savings -> Rainy Day Savings)
+      if ((a.name || '') > (b.name || '')) return 1
+      if ((a.name || '') < (b.name || '')) return -1
+      return 0
+    })
+  }
+
+  refreshAccounts = async () => {
+    this.uiStore.setIsLoading(true)
+    await Promise.all([this.loadAccounts(), this.loadInstitutions()])
+    this.uiStore.setIsLoading(false)
+  }
+
+  refreshMembers = async () => {
+    try {
+      await this.api.refreshAllMembers()
+      await this.loadMembers()
+    } catch (error) {
+      console.error(`Error occurredwhile refreshing members: ${error}`)
+    }
+  }
+
+  removeAccount = async (accountGuid: string) => {
+    try {
+      await this.api.deleteAccount(accountGuid)
+
+      runInAction(() => {
+        const deletedIndex = this.accounts.findIndex((account) => account.guid === accountGuid)
+        this.accounts.splice(deletedIndex, 1)
+      })
+    } catch (error) {
+      console.error(`Error occurred while removing an account: ${error}`)
+    }
+  }
+
+  updateAccount = async (account: Account) => {
+    try {
+      const updatedAccount = await this.api.updateAccount(account)
+
+      runInAction(() => {
+        const updatedAccountIndex = this.accounts.findIndex(
+          (account) => account.guid === updatedAccount.guid,
+        )
+
+        this.accounts.splice(updatedAccountIndex, 1, updatedAccount)
+        this.augmentAccounts(this.accounts)
+      })
+    } catch (error) {
+      console.error(`Error occurred while updating account: ${error}`)
+    }
+  }
+}

package/src/accounts/stores/UiStore.ts

@@ -0,0 +1,18 @@
+import { makeAutoObservable } from 'mobx'
+import { Account, Member } from '../../common'
+
+export class UiStore {
+  isLoading = false
+
+  selectedAccount: Account = {} as Account
+  selectedMember: Member = {} as Member
+
+  constructor() {
+    makeAutoObservable(this)
+  }
+
+  setIsLoading = (isLoading: boolean) => (this.isLoading = isLoading)
+
+  setSelectedAccount = (account: Account) => (this.selectedAccount = account)
+  setSelectedMember = (member: Member) => (this.selectedMember = member)
+}

package/src/accounts/stores/__tests__/AccountStore.test.ts

@@ -0,0 +1,204 @@
+import { GlobalStore } from '../../../common/stores/GlobalStore'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('../../api/AccountApi')
+
+describe('Testing the AccountStore', () => {
+  let globalStore
+
+  let consoleErrorSpy
+  let createAccountApiSpy
+  let deleteAccountApiSpy
+  let getAccountsApiSpy
+  let getInstitutionsApiSpy
+  let getMembersApiSpy
+
+  beforeEach(() => {
+    globalStore = new GlobalStore()
+
+    consoleErrorSpy = vi.spyOn(console, 'error')
+    createAccountApiSpy = vi.spyOn(globalStore.accountStore.api, 'createAccount')
+    deleteAccountApiSpy = vi.spyOn(globalStore.accountStore.api, 'deleteAccount')
+    getAccountsApiSpy = vi.spyOn(globalStore.accountStore.api, 'getAccounts')
+    getInstitutionsApiSpy = vi.spyOn(globalStore.accountStore.api, 'getInstitutions')
+    getMembersApiSpy = vi.spyOn(globalStore.accountStore.api, 'getMembers')
+  })
+
+  describe('initialize()', () => {
+    it('should load Accounts and Institutions on initialization', async () => {
+      expect(globalStore.accountStore.accounts).toHaveLength(0)
+      expect(globalStore.accountStore.institutions).toHaveLength(0)
+      expect(globalStore.accountStore.members).toHaveLength(0)
+
+      await globalStore.accountStore.initialize('/', '')
+
+      expect(globalStore.accountStore.accounts).toHaveLength(11)
+      expect(globalStore.accountStore.institutions).toHaveLength(8)
+      expect(globalStore.accountStore.members).toHaveLength(10)
+    })
+  })
+
+  describe('addAccount()', () => {
+    const testAccount = {
+      account_type: 1,
+      balance: 1,
+      interest_rate: null,
+      is_personal: true,
+      user_name: 'test',
+    }
+    it('successfully adds new account for addAccount', async () => {
+      expect(globalStore.accountStore.accounts).toHaveLength(0)
+      await globalStore.accountStore.addAccount(testAccount)
+      expect(createAccountApiSpy).toHaveBeenCalledOnce()
+      expect(globalStore.accountStore.accounts).toHaveLength(1)
+      expect(consoleErrorSpy).not.toHaveBeenCalled()
+    })
+
+    it.fails('and logs error to console', async () => {
+      expect(globalStore.accountStore.accounts).toHaveLength(0)
+      await globalStore.accountStore.addAccount(testAccount)
+      expect(consoleErrorSpy).toHaveBeenCalledOnce()
+      expect(globalStore.accountStore.accounts).toHaveLength(0)
+    })
+  })
+
+  describe('loadAccounts()', () => {
+    it('calls getAccounts() end point', async () => {
+      expect(globalStore.accountStore.accounts).toHaveLength(0)
+      await globalStore.accountStore.loadAccounts()
+      expect(getAccountsApiSpy).toHaveBeenCalledOnce()
+      expect(globalStore.accountStore.accounts).toHaveLength(11)
+    })
+
+    it.fails('and logs error to console', async () => {
+      expect(globalStore.accountStore.accounts).toHaveLength(0)
+      await globalStore.accountStore.loadAccounts()
+      expect(consoleErrorSpy).toHaveBeenCalledOnce()
+      expect(getAccountsApiSpy).toHaveBeenCalledOnce()
+      expect(globalStore.accountStore.accounts).toHaveLength(0)
+    })
+  })
+
+  describe('loadInstitutions()', () => {
+    it('calls getInstitutions() end point and sets them to store', async () => {
+      expect(globalStore.accountStore.institutions).toHaveLength(0)
+      await globalStore.accountStore.loadInstitutions()
+      expect(getInstitutionsApiSpy).toHaveBeenCalledOnce()
+      expect(globalStore.accountStore.institutions).toHaveLength(8)
+    })
+
+    it.fails('and logs error to console', async () => {
+      expect(globalStore.accountStore.institutions).toHaveLength(0)
+      await globalStore.accountStore.loadInstitutions()
+      expect(consoleErrorSpy).toHaveBeenCalledOnce()
+      expect(getInstitutionsApiSpy).toHaveBeenCalledOnce()
+      expect(globalStore.accountStore.institutions).toHaveLength(0)
+    })
+  })
+
+  describe('loadMembers()', () => {
+    it('sets members to store', async () => {
+      expect(globalStore.accountStore.members).toHaveLength(0)
+      await globalStore.accountStore.loadMembers()
+      expect(globalStore.accountStore.members).toHaveLength(10)
+    })
+
+    it.fails('and logs error to console', async () => {
+      expect(globalStore.accountStore.members).toHaveLength(0)
+      await globalStore.accountStore.loadMembers()
+      expect(consoleErrorSpy).toHaveBeenCalledOnce()
+      expect(globalStore.accountStore.members).toHaveLength(0)
+    })
+  })
+
+  describe('mergeAccounts()', () => {
+    const accountGuids = ['ACT-001', 'ACT-002']
+
+    it('successfully merges accounts', async () => {
+      await globalStore.accountStore.initialize('/', '')
+      expect(globalStore.accountStore.accounts).toHaveLength(11)
+      expect(globalStore.accountStore.accounts).toHaveLength(11)
+      await globalStore.accountStore.mergeAccounts(accountGuids)
+      expect(globalStore.accountStore.accounts).toHaveLength(10)
+    })
+
+    it.fails('and logs error to console', async () => {
+      await globalStore.accountStore.initialize('/', '')
+      expect(globalStore.accountStore.accounts).toHaveLength(11)
+      await globalStore.accountStore.mergeAccounts(accountGuids)
+      expect(globalStore.accountStore.accounts).toHaveLength(11)
+      expect(consoleErrorSpy).toHaveBeenCalledOnce()
+    })
+  })
+
+  describe('refreshMembers()', () => {
+    it('calls refreshMembers end point', async () => {
+      await globalStore.accountStore.refreshMembers()
+      expect(getMembersApiSpy).toHaveBeenCalledOnce()
+    })
+    it.fails('and logs error to console', async () => {
+      await globalStore.accountStore.refreshMembers()
+      expect(getMembersApiSpy).toHaveBeenCalledOnce()
+      expect(consoleErrorSpy).toHaveBeenCalledOnce()
+    })
+  })
+
+  describe('refreshAccounts()', () => {
+    it('calls accounts, members and institutions end point', async () => {
+      await globalStore.accountStore.refreshAccounts()
+
+      expect(getAccountsApiSpy).toHaveBeenCalledOnce()
+      expect(getMembersApiSpy).toHaveBeenCalledOnce()
+      expect(globalStore.accountStore.uiStore.isLoading).toBeFalsy()
+    })
+    it.fails('and logs error to console', async () => {
+      await globalStore.accountStore.refreshAccounts()
+
+      expect(getAccountsApiSpy).toHaveBeenCalledOnce()
+      expect(getMembersApiSpy).toHaveBeenCalledOnce()
+      expect(getInstitutionsApiSpy).toHaveBeenCalledOnce()
+      expect(consoleErrorSpy).toHaveBeenCalledTimes(3)
+    })
+  })
+
+  describe('removeAccount()', () => {
+    it('removes an account', async () => {
+      await globalStore.accountStore.initialize('/', '')
+      expect(globalStore.accountStore.accounts).toHaveLength(11)
+
+      // test fails unless this variable is newly defined
+      const deleteAccountApiSpy = vi.spyOn(globalStore.accountStore.api, 'deleteAccount')
+
+      await globalStore.accountStore.removeAccount('ACT-001')
+      expect(deleteAccountApiSpy).toHaveBeenCalledOnce()
+      expect(globalStore.accountStore.accounts).toHaveLength(10)
+    })
+    it.fails('and logs error to console', async () => {
+      expect(globalStore.accountStore.accounts).toHaveLength(0)
+      await globalStore.accountStore.initialize('/', '')
+      expect(globalStore.accountStore.accounts).toHaveLength(11)
+
+      await globalStore.accountStore.removeAccount('ACT-001')
+      expect(deleteAccountApiSpy).toHaveBeenCalledOnce()
+      expect(globalStore.accountStore.accounts).toHaveLength(11)
+    })
+  })
+
+  describe('updateAccount()', () => {
+    it('successfully updates account', async () => {
+      await globalStore.accountStore.initialize('/', '')
+      expect(globalStore.accountStore.accounts[0].user_name).toEqual('Gringotts Checking')
+
+      // test fails unless this variable is newly defined
+      const updateAccountApiSpy = vi.spyOn(globalStore.accountStore.api, 'updateAccount')
+      const accountToUpdate = {
+        ...globalStore.accountStore.accounts[0],
+        user_name: 'Gringotts!',
+      }
+
+      await globalStore.accountStore.updateAccount(accountToUpdate)
+      expect(updateAccountApiSpy).toHaveBeenCalledOnce()
+      expect(globalStore.accountStore.accounts[0].user_name).toEqual('Gringotts!')
+    })
+  })
+})

package/src/accounts/utils/AccountFields.tsx

@@ -0,0 +1,248 @@
+import { Icon, Text } from '@kyper/mui'
+
+import {
+  AccountIcon,
+  AccountType,
+  buildDynamicCopy,
+  DATE_FORMATS_INTL,
+  formatCurrency,
+  formatDate,
+  formatOrdinal,
+  formatPercentage,
+  isValidNumber,
+  PropertyType,
+} from '../../common'
+import type { Account, AccountsCopy } from '../../common'
+
+import { PropertyIcon } from '../../common/types/Account'
+import {
+  isAccountLiability,
+  isManual,
+  usesCreditLimitField,
+  usesInterestRateField,
+  usesOriginalBalanceField,
+} from './Accounts'
+import { FieldType } from '../constants/Accounts'
+
+type SelectOption = {
+  label: string
+  value: number
+  icon: React.ReactElement
+}
+
+export type AccountField = {
+  event?: string
+  label: string
+  minAmount?: number
+  options?: SelectOption[]
+  name: keyof Account
+  placeholder?: string
+  type?: string
+  validation?: (val: any) => string
+  valueFormatter: (val: any) => any
+}
+
+export const getAccountDetailFields = (account: Account, copy: AccountsCopy) => {
+  const fields: AccountField[] = [
+    {
+      event: 'account_details_click_account_name',
+      label: copy.account_name,
+      name: 'user_name',
+      placeholder: buildDynamicCopy(copy.enter_value, copy.account_name) as string,
+      type: FieldType.Input,
+      validation: (val: string) =>
+        val ? '' : (buildDynamicCopy(copy.field_is_required, copy.account_name) as string),
+      valueFormatter: (val) => val,
+    },
+  ]
+
+  if (isManual(account)) {
+    fields.unshift({
+      label: copy.account_balance,
+      name: 'balance',
+      placeholder: buildDynamicCopy(copy.enter_value, copy.account_balance) as string,
+      type: FieldType.Currency,
+      valueFormatter: (val) => formatCurrency(val, '0,0.00'),
+    })
+
+    const accountTypeOptions = Object.keys(AccountType)
+      .filter((key) => Number(key))
+      .map((value) => ({
+        label: copy.account_types[value],
+        value: Number(value),
+        icon: <Icon name={AccountIcon[value]} />,
+      }))
+
+    fields.push({
+      label: copy.account_type,
+      name: 'account_type',
+      options: accountTypeOptions,
+      placeholder: buildDynamicCopy(copy.select_value, copy.account_type) as string,
+      type: FieldType.Select,
+      valueFormatter: (val) => accountTypeOptions.find((option) => option.value === val)?.label,
+    })
+  }
+
+  if (account.account_type === AccountType.PROPERTY) {
+    const propertyTypeOptions = Object.keys(PropertyType)
+      .filter((key) => Number(key))
+      .map((value) => ({
+        label: copy.property_types[value],
+        value: Number(value),
+        icon: <Icon name={PropertyIcon[value]} />,
+      }))
+
+    fields.push({
+      label: copy.property_type,
+      name: 'property_type',
+      options: propertyTypeOptions,
+      placeholder: buildDynamicCopy(copy.select_value, copy.property_type) as string,
+      type: FieldType.Select,
+      valueFormatter: (val) => propertyTypeOptions.find((option) => option.value === val)?.label,
+    })
+  }
+
+  if (usesInterestRateField(account)) {
+    let label = copy.interest_rate
+    let fieldName = 'interest_rate' as keyof Account
+
+    if (!account.is_manual) {
+      if (typeof account.apr === 'number') {
+        label = copy.apr
+        fieldName = 'apr'
+      }
+      if (typeof account.apy === 'number') {
+        label = copy.apy
+        fieldName = 'apy'
+      }
+    }
+
+    fields.push({
+      event: 'account_details_click_interest_rate',
+      label,
+      name: fieldName,
+      placeholder: buildDynamicCopy(copy.enter_value, label) as string,
+      type: FieldType.Input,
+      validation: (val) => (!isValidNumber(val) ? copy.error_amount_is_invalid : ''),
+      valueFormatter: (val) => (isValidNumber(val) ? formatPercentage(val / 100) : val),
+    })
+  }
+
+  if (isAccountLiability(account)) {
+    fields.push({
+      label: copy.minimum_payment,
+      name: 'minimum_payment',
+      placeholder: buildDynamicCopy(copy.enter_value, copy.minimum_payment) as string,
+      type: FieldType.Currency,
+      valueFormatter: (val) => formatCurrency(val, '0,0.00'),
+    })
+
+    if (account.payment_due_at) {
+      fields.push({
+        label: copy.next_payment,
+        name: 'payment_due_at',
+        type: FieldType.Date,
+        valueFormatter: (val) => {
+          // accounts for Unix and DateTime values
+          const dateTimeStamp = typeof val === 'number' ? new Date(val * 1000) : val
+          return formatDate(dateTimeStamp, DATE_FORMATS_INTL.MED_MONTH_SHORT_DAY_FULL_YEAR)
+        },
+      })
+    } else {
+      fields.push({
+        label: copy.day_payment_due,
+        name: 'day_payment_is_due',
+        placeholder: buildDynamicCopy(copy.enter_value, copy.day_payment_due) as string,
+        type: FieldType.Date,
+        valueFormatter: (val) =>
+          buildDynamicCopy(
+            copy.day_of_every_month,
+            formatOrdinal(val <= 31 ? val : new Date(val).getDate()),
+          ) as string,
+      })
+    }
+  }
+
+  if (usesCreditLimitField(account)) {
+    fields.push({
+      label: copy.credit_limit,
+      name: 'credit_limit',
+      placeholder: buildDynamicCopy(copy.enter_value, copy.credit_limit) as string,
+      type: FieldType.Currency,
+      valueFormatter: (val) => formatCurrency(val, '0,0.00'),
+    })
+  }
+
+  if (usesOriginalBalanceField(account)) {
+    fields.push({
+      label: copy.original_balance,
+      minAmount: 1,
+      name: 'original_balance',
+      placeholder: buildDynamicCopy(copy.enter_value, copy.original_balance) as string,
+      type: FieldType.Currency,
+      valueFormatter: (val) => formatCurrency(val, '0,0.00'),
+    })
+  }
+
+  return fields
+}
+
+export const getAccountBalanceDetails = (account: Account, copy: AccountsCopy) => {
+  let firstSubtitle = ''
+  let firstValue = null
+  let secondSubtitle = null
+  let secondValue = null
+  let hasAvailableBalance = false
+
+  switch (account.account_type) {
+    // checking or savings
+    case 1:
+    case 2: {
+      // some savings accounts only have balance, and not available_balance
+      if (account.available_balance) {
+        firstSubtitle = copy.available_balance
+        firstValue = account.available_balance
+        secondSubtitle = account.available_balance ? copy.current_balance : null
+        secondValue = formatCurrency(account.balance, '0,0.00')
+        hasAvailableBalance = true
+      } else {
+        firstSubtitle = copy.current_balance
+        firstValue = account.balance
+      }
+      break
+    }
+    // credit cards, loans, investments, etc
+    default: {
+      firstSubtitle = copy.current_balance
+      firstValue = account.balance
+      if (account.minimum_payment && account.payment_due_at) {
+        const dateTimeStamp =
+          typeof account.payment_due_at === 'number'
+            ? new Date(account.payment_due_at * 1000)
+            : account.payment_due_at
+        secondSubtitle = (
+          <Text component="strong" variant="XSmall">
+            {
+              buildDynamicCopy(
+                copy.payment_due_on,
+                formatCurrency(account.minimum_payment, '0,0.00'),
+                formatDate(dateTimeStamp, DATE_FORMATS_INTL.FULL_MONTH_DAY),
+              ) as string
+            }
+          </Text>
+        )
+      } else if (account.credit_limit) {
+        secondSubtitle = copy.available_credit
+        secondValue = formatCurrency(account.credit_limit, '0,0.00')
+      }
+    }
+  }
+
+  return {
+    firstSubtitle,
+    firstValue,
+    secondSubtitle,
+    secondValue,
+    hasAvailableBalance,
+  }
+}