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

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

@@ -1,10 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

@@ -1,115 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,34 +0,0 @@
-// /* 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

@@ -1,18 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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)