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

package/src/common/types/localization/TrendsCopy.ts

@@ -0,0 +1,10 @@
+export interface TrendsCopy {
+  all_categories: string
+  income_label: string
+  mini_title: string
+  payments_label: string
+  primary_cta: string
+  spending_label: string
+  sub_title: string
+  title: string
+}

package/src/common/types/localization/index.ts

@@ -0,0 +1,19 @@
+export type { AccountFilterCopy } from './AccountFilterCopy'
+export type { AccountsCopy } from './AccountsCopy'
+export type { AccountTypeCopy } from './AccountTypeCopy'
+export type { BudgetsCopy } from './BudgetsCopy'
+export type { CashflowCopy } from './CashflowCopy'
+export type { CategoryCopy } from './CategoryCopy'
+export type { CommonCopy } from './CommonCopy'
+export type { ConnectCopy } from './ConnectCopy'
+export type { CurrencyInputCopy } from './CurrencyInputCopy'
+export type { DateRangePickerCopy } from './DateRangePickerCopy'
+export type { GoalsCopy } from './GoalsCopy'
+export type { InsightsFeedCopy } from './InsightsFeedCopy'
+export type { MicroInsightsCopy } from './MicroInsightsCopy'
+export type { NetWorthCopy } from './NetWorthCopy'
+export type { NotificationsCopy } from './NotificationsCopy'
+export type { RecurringCopy } from './RecurringCopy'
+export type { SpendingCopy } from './SpendingCopy'
+export type { TransactionsCopy } from './TransactionsCopy'
+export type { TrendsCopy } from './TrendsCopy'

package/src/common/utils/AccountFilter.ts

@@ -0,0 +1,45 @@
+import { AccountTypeName } from '../'
+
+import type { Account } from '../types'
+
+export interface MappedAccounts {
+  [key: string]: MappedAccount[]
+}
+
+export interface MappedAccount {
+  accountNumber: string
+  name: string
+  guid: string
+}
+
+export interface MappedOptions {
+  [key: string]: boolean
+}
+
+// Sets up the collection of selected account guids into a mapped object
+export const setupMappedSelectedOptions = (accounts: Account[], selectedAccountGuids: string[]) => {
+  return accounts.reduce((accumulator: MappedOptions, account) => {
+    accumulator[account.guid] = selectedAccountGuids?.includes(account.guid)
+    return accumulator
+  }, {})
+}
+
+// Creates a mapped collection of accounts that are grouped together by the account type
+export const setupMappedAccounts = (accounts: Account[]) => {
+  return accounts.reduce((accumulator: MappedAccounts, account) => {
+    const accountType = AccountTypeName[account.account_type]
+    const newAccount = {
+      accountNumber: account.account_number,
+      name: account.name || account.feed_name,
+      guid: account.guid,
+    } as MappedAccount
+
+    if (Object.prototype.hasOwnProperty.call(accumulator, accountType)) {
+      accumulator[accountType] = accumulator[accountType].concat(newAccount)
+    } else {
+      accumulator[accountType] = [newAccount]
+    }
+
+    return accumulator
+  }, {})
+}

package/src/common/utils/Analytics.ts

@@ -0,0 +1,51 @@
+import { getUnixTime } from 'date-fns/getUnixTime'
+
+import { AnalyticsApi } from '../api'
+import { BasicAnalyticsEvent, AnalyticsSession, BasicAnalyticsPageview } from '../types'
+
+export const analyticsSession = async (
+  endpoint: string,
+  token: string,
+  version = '1.0.0',
+  featureName = 'Experiences',
+) => {
+  const analyticsApi = new AnalyticsApi(endpoint, token)
+  const { analytics_session } = (await analyticsApi.initializeAnalyticsSession(
+    version,
+    featureName,
+  )) as {
+    analytics_session: AnalyticsSession
+  }
+
+  const host = window.location.hostname
+
+  return {
+    sendAnalyticEvent: async (event: BasicAnalyticsEvent) => {
+      return await analyticsApi.sendAnalyticEvent({
+        analytics_event: {
+          ...event,
+          app_version: 'widgets-v2',
+          created_at: getUnixTime(new Date()).toString(),
+          host,
+          name: event?.label || '',
+          session_id: analytics_session.guid,
+          user_agent: navigator.userAgent || '',
+          version: 2,
+        },
+      })
+    },
+    sendAnalyticsPageview: async (pageview: BasicAnalyticsPageview) => {
+      return await analyticsApi.sendAnalyticsPageview({
+        analytics_pageview: {
+          ...pageview,
+          app_version: 'widgets-v2',
+          created_at: getUnixTime(new Date()).toString(),
+          host,
+          name: pageview.name,
+          session_id: analytics_session.guid,
+          user_agent: navigator.userAgent || '',
+        },
+      })
+    },
+  }
+}

package/src/common/utils/Categories.ts

@@ -0,0 +1,75 @@
+import type { Category, CategoryTotal, DateRangeCategoryTotals, DetailedCategory } from '../types'
+import { CategoryGuids } from '../constants'
+
+export const getCategory = (
+  categories: Category[],
+  categoryGuid: string | undefined,
+): Category | undefined => {
+  return categories.find((c) => c.guid === categoryGuid)
+}
+
+export const getDetailedCategory = (
+  detailedCategories: DetailedCategory[],
+  guid: string | undefined,
+): DetailedCategory | undefined => {
+  return detailedCategories.find((dc) => dc.guid === guid)
+}
+
+export const getDetailedSubCategory = (
+  detailedCategories: DetailedCategory[],
+  guid: string | undefined,
+): DetailedCategory | undefined => {
+  const parent = detailedCategories.find((dc) => dc.subCategories.find((sc) => sc.guid === guid))
+  if (!parent) return undefined
+
+  return parent.subCategories.find((sc) => sc.guid === guid)
+}
+
+export const getCategoryTotalsByParent = (
+  categories: Category[],
+  dateRangeTotals: DateRangeCategoryTotals[],
+): CategoryTotal[] => {
+  const categoryTotals = [] as CategoryTotal[]
+
+  // Iterate over the category data from BE and roll up all categories into parent categories
+  // acc is the accumulated category totals of type CategoryTotal that is initialized as an empty []
+  // curr is the current DateRangeCategoryTotal
+
+  for (const dateRangeTotal of dateRangeTotals) {
+    const category = getCategory(categories, dateRangeTotal.category_guid)
+    if (!category) continue
+
+    const parentGuid = category.parent_guid ?? category.guid
+    const parentCategory = getCategory(categories, parentGuid)
+    if (!parentCategory) continue
+
+    const categoryTotal = {
+      amount: dateRangeTotal.total,
+      category,
+      guid: category.guid,
+      subCategoryTotals: [],
+    }
+
+    const parentCategoryTotal = categoryTotals.find((ct) => ct.guid === parentGuid)
+    if (parentCategoryTotal) {
+      parentCategoryTotal.amount += dateRangeTotal.total
+      parentCategoryTotal.subCategoryTotals.push(categoryTotal)
+    } else {
+      categoryTotals.push({
+        amount: dateRangeTotal.total,
+        category: parentCategory,
+        guid: parentGuid,
+        subCategoryTotals: [categoryTotal],
+      })
+    }
+  }
+
+  return categoryTotals
+}
+
+export const isIncome = (categories: Category[], guid: string) => {
+  const category = categories.find((c) => c.guid === guid)
+  if (!category) return false
+
+  return category.guid === CategoryGuids.INCOME || category.parent_guid === CategoryGuids.INCOME
+}

package/src/common/utils/DateUtil.ts

@@ -0,0 +1,67 @@
+import { addMonths } from 'date-fns/addMonths'
+import { addQuarters } from 'date-fns/addQuarters'
+import { addWeeks } from 'date-fns/addWeeks'
+import { addYears } from 'date-fns/addYears'
+import { getDay } from 'date-fns/getDay'
+import { isBefore } from 'date-fns/isBefore'
+import { nextDay } from 'date-fns/nextDay'
+import { setDate } from 'date-fns/setDate'
+import { startOfToday } from 'date-fns/startOfToday'
+import { fromUnixTime } from 'date-fns/fromUnixTime'
+import { type Day } from 'date-fns/types'
+import { DATE_FORMATS_INTL, formatDate } from '../constants'
+
+export const getNextWeeklyDate = (date: Date): Date => {
+  const dayOfWeek = getDay(date)
+  let nextDate = nextDay(date, dayOfWeek as Day)
+  while (isBefore(nextDate, startOfToday())) {
+    nextDate = addWeeks(nextDate, 1)
+  }
+  return nextDate
+}
+
+export const getNextBiWeeklyDate = (date: Date): Date => {
+  const nextWeeklyday = getNextWeeklyDate(date)
+  return addWeeks(nextWeeklyday, 1)
+}
+
+export const getNextMonthlyDate = (date: Date): Date => {
+  let nextDate = setDate(startOfToday(), date.getDate())
+  while (isBefore(nextDate, startOfToday())) {
+    nextDate = addMonths(nextDate, 1)
+  }
+  return nextDate
+}
+
+export const getNextBiMonthlyDate = (date: Date): Date => {
+  const nextMonthlyDate = getNextWeeklyDate(date)
+  return addMonths(nextMonthlyDate, 1)
+}
+
+export const getNextQuarterlyDate = (date: Date): Date => {
+  let nextDate = addQuarters(date, 1)
+  while (isBefore(nextDate, startOfToday())) {
+    nextDate = addQuarters(nextDate, 1)
+  }
+  return nextDate
+}
+
+export const getNextBiQuarterlyDate = (date: Date): Date => {
+  const nextQuarterlyDate = getNextQuarterlyDate(date)
+  return addQuarters(nextQuarterlyDate, 1)
+}
+
+export const getNextYearlyDate = (date: Date): Date => {
+  return addYears(date, 1)
+}
+
+export const fromUnixUTC = (utcTime: number) => {
+  const date = fromUnixTime(utcTime)
+  return new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate())
+}
+
+export const fromUnixToDayOfWeekAndDate = (date: number) =>
+  formatDate(fromUnixTime(date), DATE_FORMATS_INTL.DAY_OF_WEEK_MONTH_DAY)
+
+export const fromTimestampToMonthYear = (timestamp?: number) =>
+  timestamp ? formatDate(fromUnixTime(timestamp), DATE_FORMATS_INTL.MONTH_YEAR) : ''

package/src/common/utils/Fetch.ts

@@ -0,0 +1,115 @@
+import { getLocale } from './Localization'
+import { Honeybadger } from '@honeybadger-io/react'
+
+export class Fetch {
+  endpoint = '/'
+  headers = {}
+
+  constructor(endpoint: string, token: string) {
+    this.endpoint = endpoint
+    this.headers = {
+      Accept: 'application/json',
+      'Accept-Language': getLocale(),
+      'Content-Type': 'application/json',
+      'MD-Session-Token': token,
+    }
+  }
+
+  get = async (url: string) => {
+    const options = {
+      method: 'GET',
+      headers: this.headers,
+    }
+
+    return fetch(`${this.endpoint}${url}`, options)
+      .then((response) => {
+        if (response.ok) {
+          return response.text()
+        } else {
+          throw response
+        }
+      })
+      .then((text) => (text.length ? JSON.parse(text) : {}))
+      .then((data) => data)
+      .catch((err) => {
+        Honeybadger.notify(err)
+        throw err
+      })
+  }
+
+  post = async (url: string, data?: any) => {
+    const body = data ? JSON.stringify(data) : undefined
+    const options = {
+      method: 'POST',
+      headers: this.headers,
+      body,
+    }
+
+    return fetch(`${this.endpoint}${url}`, options)
+      .then((response) => {
+        if (!response.ok) {
+          throw response
+        }
+
+        return response.text()
+      })
+      .then((text) => (text.length ? JSON.parse(text) : {}))
+      .then((data) => data)
+      .catch((error) => {
+        Honeybadger.notify(error)
+        throw error
+      })
+  }
+
+  put = async (url: string, data: any) => {
+    const body = JSON.stringify(data)
+    const options = {
+      method: 'PUT',
+      headers: this.headers,
+      body,
+    }
+
+    return fetch(`${this.endpoint}${url}`, options)
+      .then((response) => {
+        if (response.ok) {
+          return response.text()
+        } else {
+          return response.text().then((text) => {
+            throw new Error(text)
+          })
+        }
+      })
+      .then((text) => (text.length ? JSON.parse(text) : {}))
+      .then((data) => data)
+      .catch((err) => {
+        Honeybadger.notify(err)
+        throw err
+      })
+  }
+
+  delete = async (url: string) => {
+    const options = {
+      method: 'DELETE',
+      headers: this.headers,
+    }
+
+    return fetch(`${this.endpoint}${url}`, options)
+      .then((response) => {
+        if (response.ok) {
+          return response.text()
+        } else {
+          return response.text().then((text) => {
+            throw new Error(text)
+          })
+        }
+      })
+      .then((text) => (text.length ? JSON.parse(text) : {}))
+      .then((data) => data)
+      .catch((err) => {
+        Honeybadger.notify(err)
+        throw err
+      })
+  }
+}
+
+export default Fetch

package/src/common/utils/Localization.ts

@@ -0,0 +1,67 @@
+import React from 'react'
+import { DynamicCopyElement } from '../types'
+
+// matches a pattern like "static text _1{category_name} and  _2{amount} more static text"
+const copyPattern = /(?<static>.*?)(?<dynamic>(?:_\d+{(?:.*?)}))|(?<staticEnd>.+)/g
+
+export const buildDynamicCopy = (str: string, ...args: DynamicCopyElement[]) => {
+  if (!str) return ''
+
+  const hasFormattedElement = args.some((arg) => typeof arg !== 'string')
+
+  // finds all instances of matching pattern in given string
+  const regexMatches = [...str.matchAll(copyPattern)]
+  const matches = regexMatches.reduce(
+    (acc: DynamicCopyElement[], match: RegExpMatchArray, matchIndex) => {
+      const temp = [...acc]
+      const groups = match.groups
+      if (groups?.static) {
+        temp.push(groups.static)
+      }
+
+      if (groups?.dynamic) {
+        const curlyIndex = groups.dynamic.indexOf('{')
+        const variableName = groups.dynamic.substring(curlyIndex + 1, groups.dynamic.length - 1)
+        const index = Number(groups.dynamic.substring(1, curlyIndex))
+        if (React.isValidElement(args[index - 1])) {
+          const element = args[index - 1] as React.ReactElement
+          const clonedElement = React.cloneElement(element, {
+            key: `${variableName}-${matchIndex}`,
+          })
+          temp.push(clonedElement)
+        } else {
+          temp.push(args[index - 1])
+        }
+      }
+
+      if (groups?.staticEnd) {
+        temp.push(groups.staticEnd)
+      }
+
+      return temp
+    },
+    [],
+  )
+
+  return hasFormattedElement ? (matches as DynamicCopyElement[]) : (matches.join('') as string)
+}
+
+export const buildPluralCopy = (
+  strOne: string,
+  strMulti: string,
+  count: number,
+  ...args: DynamicCopyElement[]
+) => {
+  if (!strOne || !strMulti) return ''
+  const str = count === 1 ? strOne : strMulti
+
+  return buildDynamicCopy(str, ...args)
+}
+
+export const getLocale = () => {
+  return (
+    (window as any)?.app?.options?.language ||
+    document.querySelector('html')?.getAttribute('lang') ||
+    'en-US'
+  ).toLowerCase()
+}

package/src/common/utils/NumberFormatting.ts

@@ -0,0 +1,65 @@
+import numeral from 'numeral'
+import type { RoundingFunction } from 'numeral'
+import { getLocale } from './Localization'
+import { CurrencyCodes } from '../constants'
+
+// enhances numeral's localization functionality by puting the $ in the correct place
+export const formatCurrency = (
+  amount: number | undefined,
+  formatting: string,
+  roundingFunction?: RoundingFunction,
+) => {
+  switch (getLocale()) {
+    case 'fr-ca': {
+      return numeral(amount).format(`${formatting} $`, roundingFunction)
+    }
+    default: {
+      return numeral(amount).format(`$${formatting}`, roundingFunction)
+    }
+  }
+}
+
+export const getCurrencyCodes = () => {
+  switch (getLocale()) {
+    case 'fr-ca':
+      return CurrencyCodes.CAD
+    default:
+      return CurrencyCodes.USD
+  }
+}
+
+// will return `true` if value is a string number, like '99', which matches Serenity logic
+export const isValidNumber = (value: any) =>
+  value !== undefined && value !== null && value !== '' && isFinite(value)
+
+const defaultPercentStyle = {
+  style: 'percent',
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+} as Intl.NumberFormatOptions
+
+export const formatPercentage = (
+  amount: number | string | undefined,
+  options: Intl.NumberFormatOptions = defaultPercentStyle,
+) =>
+  isValidNumber(amount)
+    ? new Intl.NumberFormat(getLocale(), options).format(Number(amount))
+    : amount
+
+export const getPluralRules = (options: Intl.PluralRulesOptions) =>
+  new Intl.PluralRules(getLocale(), options)
+
+export const formatOrdinal = (
+  number: number,
+  options: Intl.PluralRulesOptions = { type: 'ordinal' },
+  copy = {
+    one: 'st',
+    two: 'nd',
+    few: 'rd',
+    other: 'th',
+  } as const,
+) => {
+  const rule = getPluralRules(options).select(number)
+
+  return `${number}${copy[rule as keyof typeof copy]}`
+}

package/src/common/utils/__tests__/Fetch.test.tsx

@@ -0,0 +1,34 @@
+// /* eslint-disable jest/no-conditional-expect */
+import Fetch from '../Fetch'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+describe('Fetch', () => {
+  let instance: Fetch
+
+  beforeEach(() => {
+    instance = new Fetch('/', 'token')
+  })
+
+  describe('post()', () => {
+    it('throws error', async () => {
+      const spy = vi.spyOn(instance, 'post').mockRejectedValue((err: any) => err)
+      return instance
+        .post('/steph_rulez')
+        .then((res) => res)
+        .catch((err) => {
+          expect(spy).toHaveBeenCalled()
+          return err
+        })
+    })
+    it('returns response', async () => {
+      const spy = vi.spyOn(instance, 'post').mockResolvedValue((res: any) => res)
+      return instance
+        .post('/steph_rulez')
+        .then((res) => {
+          expect(spy).toHaveBeenCalled()
+          return res
+        })
+        .catch((err) => err)
+    })
+  })
+})

package/src/common/utils/index.ts

@@ -0,0 +1,18 @@
+export { analyticsSession } from './Analytics'
+export {
+  getCategory,
+  getDetailedCategory,
+  getDetailedSubCategory,
+  getCategoryTotalsByParent,
+  isIncome,
+} from './Categories'
+export { Fetch } from './Fetch'
+export { buildDynamicCopy, buildPluralCopy, getLocale } from './Localization'
+export {
+  formatCurrency,
+  formatOrdinal,
+  formatPercentage,
+  getCurrencyCodes,
+  isValidNumber,
+} from './NumberFormatting'
+export { fromTimestampToMonthYear } from './DateUtil'

package/src/dashboard/Dashboard.tsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Grid from '@mui/material/Unstable_Grid2'
+import Skeleton from '@mui/material/Skeleton'
+import Stack from '@mui/material/Stack'
+
+import { useAccountStore, useGlobalStore, useGlobalUiStore, useScreenSize } from '../common'
+import { DashboardLocation } from './constants/Dashboard'
+
+import type { DashboardWidget } from './types/DashboardTypes'
+import Greeting from './Greeting'
+
+export interface DashboardProps {
+  widgets: DashboardWidget[]
+  isLoading: boolean
+}
+
+const Dashboard: React.FC<DashboardProps> = ({ widgets, isLoading }) => {
+  const { isDesktop, isMobile } = useScreenSize()
+  const { copyStore } = useGlobalStore()
+  const { setSelectedAccounts } = useGlobalUiStore()
+  const { accounts } = useAccountStore()
+
+  React.useEffect(() => {
+    setSelectedAccounts(accounts)
+  }, [accounts])
+
+  const sortedWidgets = React.useMemo(
+    () => widgets.sort((w1, w2) => w1.index - w2.index),
+    [widgets],
+  )
+
+  const mainWidgets = React.useMemo(
+    () => sortedWidgets.filter((widget) => widget.location === DashboardLocation.Main),
+    [widgets],
+  )
+
+  const sideWidgets = React.useMemo(
+    () => sortedWidgets.filter((widget) => widget.location === DashboardLocation.RightSide),
+    [widgets],
+  )
+
+  return (
+    <Grid container={true} spacing={isMobile ? 0 : 24} sx={{ overflow: 'scroll' }}>
+      <Grid xs={12}>{copyStore.isInitialized && <Greeting />}</Grid>
+
+      {/* Main Column */}
+      <Grid xl={8} xs={12}>
+        {isLoading && (
+          <Stack direction="column" spacing={24}>
+            <Skeleton height={100} variant="rounded" width="100%" />
+            <Skeleton height={300} variant="rounded" width="100%" />
+            <Skeleton height={300} variant="rounded" width="100%" />
+          </Stack>
+        )}
+        {!isLoading && (
+          <Stack direction="column" spacing={24}>
+            {isDesktop
+              ? mainWidgets.map((widget) => (
+                  <React.Fragment key={widget.index}>{widget.component}</React.Fragment>
+                ))
+              : sortedWidgets.map((widget) => (
+                  <React.Fragment key={widget.index}>{widget.component}</React.Fragment>
+                ))}
+          </Stack>
+        )}
+      </Grid>
+
+      {/* Right Column */}
+      {isDesktop && (
+        <Grid xl={4}>
+          {isLoading ? (
+            <Stack direction="column" spacing={24}>
+              <Skeleton height={200} variant="rounded" width="100%" />
+              <Skeleton height={100} variant="rounded" width="100%" />
+              <Skeleton height={300} variant="rounded" width="100%" />
+            </Stack>
+          ) : (
+            <Stack direction="column" spacing={24}>
+              {sideWidgets.map((widget) => (
+                <React.Fragment key={widget.index}>{widget.component}</React.Fragment>
+              ))}
+            </Stack>
+          )}
+        </Grid>
+      )}
+    </Grid>
+  )
+}
+
+export default observer(Dashboard)