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

package/src/accounts/utils/Accounts.ts

@@ -0,0 +1,28 @@
+import { AccountType } from '../../common/types'
+import type { Account } from '../../common/types'
+
+export const isAccountLiability = (account: 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)
+
+export const isManual = (account: Account) => account.is_manual || !account.guid
+
+export const usesCreditLimitField = (account: Account) =>
+  account.account_type === AccountType.LINE_OF_CREDIT ||
+  account.account_type === AccountType.CREDIT_CARD ||
+  account.account_type === AccountType.CHECKING_LINE_OF_CREDIT
+
+export const usesInterestRateField = (account: Account) =>
+  account.account_type === AccountType.SAVINGS ||
+  account.account_type === AccountType.CHECKING ||
+  account.account_type === AccountType.LINE_OF_CREDIT ||
+  account.account_type === AccountType.CREDIT_CARD ||
+  account.account_type === AccountType.LOAN ||
+  account.account_type === AccountType.MORTGAGE
+
+export const usesOriginalBalanceField = (account: Account) =>
+  account.account_type === AccountType.LOAN || account.account_type === AccountType.MORTGAGE

package/src/accounts/utils/__tests__/AccountFieldsUtils.test.tsx

@@ -0,0 +1,215 @@
+import { describe, expect, it } from 'vitest'
+import accounts from '../../../../mock/Accounts'
+import * as AccountFieldsUtils from '../AccountFields'
+import globalCopy from '../../../../mock/data/GlobalCopy.json'
+
+const accountBalance = {
+  label: 'Account Balance',
+  name: 'balance',
+  placeholder: 'Enter Account Balance',
+  type: 'currency',
+}
+const accountName = {
+  label: 'Account Name',
+  name: 'user_name',
+  placeholder: 'Enter Account Name',
+  type: 'input',
+}
+const accountType = {
+  label: 'Account Type',
+  name: 'account_type',
+  placeholder: 'Select Account Type',
+}
+const creditLimit = {
+  label: 'Credit Limit',
+  name: 'credit_limit',
+  placeholder: 'Enter Credit Limit',
+  type: 'currency',
+}
+const dayPaymentIsDue = {
+  label: 'Day Payment is Due',
+  name: 'day_payment_is_due',
+  placeholder: 'Enter Day Payment is Due',
+  type: 'date',
+}
+const interestRate = {
+  label: 'Interest Rate (%)',
+  name: 'interest_rate',
+  placeholder: 'Enter Interest Rate (%)',
+  type: 'input',
+}
+const minimumPayment = {
+  label: 'Minimum Payment',
+  name: 'minimum_payment',
+  placeholder: 'Enter Minimum Payment',
+  type: 'currency',
+}
+const nextPayment = {
+  label: 'Next Payment',
+  name: 'payment_due_at',
+  type: 'date',
+}
+const originalBalance = {
+  label: 'Original Balance',
+  minAmount: 1,
+  name: 'original_balance',
+  placeholder: 'Enter Original Balance',
+  type: 'currency',
+}
+const propertyType = {
+  label: 'Property Type',
+  name: 'property_type',
+  placeholder: 'Select Property Type',
+  type: 'select',
+}
+
+describe('getAccountDetailFields', () => {
+  it('returns correct fields for Gringotts Checking', () => {
+    const arr = AccountFieldsUtils.getAccountDetailFields(
+      accounts[0],
+      globalCopy.experiences.accounts,
+    )
+
+    Object.keys(accountName).map((key) => expect(arr[0]).toHaveProperty(key, accountName[key]))
+    Object.keys(interestRate).map((key) => expect(arr[1]).toHaveProperty(key, interestRate[key]))
+
+    expect(arr).toHaveLength(2)
+  })
+
+  it('returns correct fields for Other Checking', () => {
+    const arr = AccountFieldsUtils.getAccountDetailFields(
+      accounts[1],
+      globalCopy.experiences.accounts,
+    )
+
+    Object.keys(accountName).map((key) => expect(arr[0]).toHaveProperty(key, accountName[key]))
+    Object.keys(interestRate).map((key) => expect(arr[1]).toHaveProperty(key, interestRate[key]))
+
+    expect(arr).toHaveLength(2)
+  })
+
+  it('returns correct fields for Credit Card', () => {
+    const arr = AccountFieldsUtils.getAccountDetailFields(
+      accounts[2],
+      globalCopy.experiences.accounts,
+    )
+
+    Object.keys(accountName).map((key) => expect(arr[0]).toHaveProperty(key, accountName[key]))
+    Object.keys(interestRate).map((key) => expect(arr[1]).toHaveProperty(key, interestRate[key]))
+    Object.keys(minimumPayment).map((key) =>
+      expect(arr[2]).toHaveProperty(key, minimumPayment[key]),
+    )
+    Object.keys(nextPayment).map((key) => expect(arr[3]).toHaveProperty(key, nextPayment[key]))
+    Object.keys(creditLimit).map((key) => expect(arr[4]).toHaveProperty(key, creditLimit[key]))
+
+    expect(arr).toHaveLength(5)
+  })
+
+  it('returns correct fields for Credit Card2', () => {
+    const arr = AccountFieldsUtils.getAccountDetailFields(
+      accounts[3],
+      globalCopy.experiences.accounts,
+    )
+
+    Object.keys(accountName).map((key) => expect(arr[0]).toHaveProperty(key, accountName[key]))
+    Object.keys(interestRate).map((key) => expect(arr[1]).toHaveProperty(key, interestRate[key]))
+    Object.keys(minimumPayment).map((key) =>
+      expect(arr[2]).toHaveProperty(key, minimumPayment[key]),
+    )
+    Object.keys(nextPayment).map((key) => expect(arr[3]).toHaveProperty(key, nextPayment[key]))
+    Object.keys(creditLimit).map((key) => expect(arr[4]).toHaveProperty(key, creditLimit[key]))
+
+    expect(arr).toHaveLength(5)
+  })
+
+  it('returns correct fields for Rainy Day Savings', () => {
+    const arr = AccountFieldsUtils.getAccountDetailFields(
+      accounts[4],
+      globalCopy.experiences.accounts,
+    )
+
+    Object.keys(accountName).map((key) => expect(arr[0]).toHaveProperty(key, accountName[key]))
+    Object.keys(interestRate).map((key) => expect(arr[1]).toHaveProperty(key, interestRate[key]))
+
+    expect(arr).toHaveLength(2)
+  })
+
+  it('returns correct fields for Health Savings', () => {
+    const arr = AccountFieldsUtils.getAccountDetailFields(
+      accounts[5],
+      globalCopy.experiences.accounts,
+    )
+
+    Object.keys(accountName).map((key) => expect(arr[0]).toHaveProperty(key, accountName[key]))
+    Object.keys(interestRate).map((key) => expect(arr[1]).toHaveProperty(key, interestRate[key]))
+  })
+
+  it('returns correct fields for Investments', () => {
+    const arr = AccountFieldsUtils.getAccountDetailFields(
+      accounts[6],
+      globalCopy.experiences.accounts,
+    )
+
+    Object.keys(accountName).map((key) => expect(arr[0]).toHaveProperty(key, accountName[key]))
+    expect(arr).toHaveLength(1)
+  })
+
+  it('returns correct fields for Emergency Savings 1', () => {
+    const arr = AccountFieldsUtils.getAccountDetailFields(
+      accounts[7],
+      globalCopy.experiences.accounts,
+    )
+
+    Object.keys(accountName).map((key) => expect(arr[0]).toHaveProperty(key, accountName[key]))
+    Object.keys(interestRate).map((key) => expect(arr[1]).toHaveProperty(key, interestRate[key]))
+
+    expect(arr).toHaveLength(2)
+  })
+
+  it('returns correct fields for Property (Hope Diamond)', () => {
+    const arr = AccountFieldsUtils.getAccountDetailFields(
+      accounts[8],
+      globalCopy.experiences.accounts,
+    )
+
+    Object.keys(accountName).map((key) => expect(arr[0]).toHaveProperty(key, accountName[key]))
+    Object.keys(propertyType).map((key) => expect(arr[1]).toHaveProperty(key, propertyType[key]))
+    expect(arr).toHaveLength(2)
+  })
+
+  it('returns correct fields for Mortgage', () => {
+    const arr = AccountFieldsUtils.getAccountDetailFields(
+      accounts[9],
+      globalCopy.experiences.accounts,
+    )
+
+    Object.keys(accountName).map((key) => expect(arr[0]).toHaveProperty(key, accountName[key]))
+    Object.keys(interestRate).map((key) => expect(arr[1]).toHaveProperty(key, interestRate[key]))
+    Object.keys(minimumPayment).map((key) =>
+      expect(arr[2]).toHaveProperty(key, minimumPayment[key]),
+    )
+    Object.keys(dayPaymentIsDue).map((key) =>
+      expect(arr[3]).toHaveProperty(key, dayPaymentIsDue[key]),
+    )
+    Object.keys(originalBalance).map((key) =>
+      expect(arr[4]).toHaveProperty(key, originalBalance[key]),
+    )
+    expect(arr).toHaveLength(5)
+  })
+
+  it('returns correct fields for Manual account', () => {
+    const arr = AccountFieldsUtils.getAccountDetailFields(
+      accounts[10],
+      globalCopy.experiences.accounts,
+    )
+
+    Object.keys(accountBalance).map((key) =>
+      expect(arr[0]).toHaveProperty(key, accountBalance[key]),
+    )
+    Object.keys(accountName).map((key) => expect(arr[1]).toHaveProperty(key, accountName[key]))
+    Object.keys(accountType).map((key) => expect(arr[2]).toHaveProperty(key, accountType[key]))
+    Object.keys(interestRate).map((key) => expect(arr[3]).toHaveProperty(key, interestRate[key]))
+
+    expect(arr).toHaveLength(4)
+  })
+})

package/src/accounts/utils/__tests__/AccountsUtils.test.tsx

@@ -0,0 +1,104 @@
+import { describe, expect, it } from 'vitest'
+
+import * as AccountsUtils from '../Accounts'
+
+const any = { account_type: 0 }
+const checking = { account_type: 1 }
+const savings = { account_type: 2 }
+const loan = { account_type: 3 }
+const creditCard = { account_type: 4 }
+const investment = { account_type: 5 }
+const lineOfCredit = { account_type: 6 }
+const mortgage = { account_type: 7 }
+const property = { account_type: 8 }
+const cash = { account_type: 9 }
+const insurance = { account_type: 10 }
+const prepaid = { account_type: 11 }
+const checkingLineOfCredit = { account_type: 12 }
+const digitalWallet = { account_type: 13 }
+
+describe('isAccountLiability', () => {
+  it('returns the correct boolean based on the account type', () => {
+    expect(AccountsUtils.isAccountLiability(any)).toBeFalsy()
+    expect(AccountsUtils.isAccountLiability(checking)).toBeFalsy()
+    expect(AccountsUtils.isAccountLiability(savings)).toBeFalsy()
+    expect(AccountsUtils.isAccountLiability(loan)).toBeTruthy()
+    expect(AccountsUtils.isAccountLiability(creditCard)).toBeTruthy()
+    expect(AccountsUtils.isAccountLiability(investment)).toBeFalsy()
+    expect(AccountsUtils.isAccountLiability(lineOfCredit)).toBeTruthy()
+    expect(AccountsUtils.isAccountLiability(mortgage)).toBeTruthy()
+    expect(AccountsUtils.isAccountLiability(property)).toBeFalsy()
+    expect(AccountsUtils.isAccountLiability(cash)).toBeFalsy()
+    expect(AccountsUtils.isAccountLiability(insurance)).toBeFalsy()
+    expect(AccountsUtils.isAccountLiability(prepaid)).toBeFalsy()
+    expect(AccountsUtils.isAccountLiability(checkingLineOfCredit)).toBeTruthy()
+    expect(AccountsUtils.isAccountLiability(digitalWallet)).toBeFalsy()
+  })
+})
+
+describe('isManual', () => {
+  it('returns true if account is manual or does not have account guid', () => {
+    expect(AccountsUtils.isManual({ is_manual: true, guid: 'ACT-001' })).toBeTruthy()
+    expect(AccountsUtils.isManual({ is_manual: false, guid: undefined })).toBeTruthy()
+  })
+  it('returns false otherwise', () => {
+    expect(AccountsUtils.isManual({ is_manual: false, guid: 'ACT-001' })).toBeFalsy()
+  })
+})
+
+describe('usesCreditLimitField', () => {
+  it('returns the correct boolean based on account type', () => {
+    expect(AccountsUtils.usesCreditLimitField(any)).toBeFalsy()
+    expect(AccountsUtils.usesCreditLimitField(checking)).toBeFalsy()
+    expect(AccountsUtils.usesCreditLimitField(savings)).toBeFalsy()
+    expect(AccountsUtils.usesCreditLimitField(loan)).toBeFalsy()
+    expect(AccountsUtils.usesCreditLimitField(creditCard)).toBeTruthy()
+    expect(AccountsUtils.usesCreditLimitField(investment)).toBeFalsy()
+    expect(AccountsUtils.usesCreditLimitField(lineOfCredit)).toBeTruthy()
+    expect(AccountsUtils.usesCreditLimitField(mortgage)).toBeFalsy()
+    expect(AccountsUtils.usesCreditLimitField(property)).toBeFalsy()
+    expect(AccountsUtils.usesCreditLimitField(cash)).toBeFalsy()
+    expect(AccountsUtils.usesCreditLimitField(insurance)).toBeFalsy()
+    expect(AccountsUtils.usesCreditLimitField(prepaid)).toBeFalsy()
+    expect(AccountsUtils.usesCreditLimitField(checkingLineOfCredit)).toBeTruthy()
+    expect(AccountsUtils.usesCreditLimitField(digitalWallet)).toBeFalsy()
+  })
+})
+
+describe('usesInterestRateField', () => {
+  it('returns the correct boolean based on account type', () => {
+    expect(AccountsUtils.usesInterestRateField(any)).toBeFalsy()
+    expect(AccountsUtils.usesInterestRateField(checking)).toBeTruthy()
+    expect(AccountsUtils.usesInterestRateField(savings)).toBeTruthy()
+    expect(AccountsUtils.usesInterestRateField(loan)).toBeTruthy()
+    expect(AccountsUtils.usesInterestRateField(creditCard)).toBeTruthy()
+    expect(AccountsUtils.usesInterestRateField(investment)).toBeFalsy()
+    expect(AccountsUtils.usesInterestRateField(lineOfCredit)).toBeTruthy()
+    expect(AccountsUtils.usesInterestRateField(mortgage)).toBeTruthy()
+    expect(AccountsUtils.usesInterestRateField(property)).toBeFalsy()
+    expect(AccountsUtils.usesInterestRateField(cash)).toBeFalsy()
+    expect(AccountsUtils.usesInterestRateField(insurance)).toBeFalsy()
+    expect(AccountsUtils.usesInterestRateField(prepaid)).toBeFalsy()
+    expect(AccountsUtils.usesInterestRateField(checkingLineOfCredit)).toBeFalsy()
+    expect(AccountsUtils.usesInterestRateField(digitalWallet)).toBeFalsy()
+  })
+})
+
+describe('usesOriginalBalanceField', () => {
+  it('returns the correct boolean based on account type', () => {
+    expect(AccountsUtils.usesOriginalBalanceField(any)).toBeFalsy()
+    expect(AccountsUtils.usesOriginalBalanceField(checking)).toBeFalsy()
+    expect(AccountsUtils.usesOriginalBalanceField(savings)).toBeFalsy()
+    expect(AccountsUtils.usesOriginalBalanceField(loan)).toBeTruthy()
+    expect(AccountsUtils.usesOriginalBalanceField(creditCard)).toBeFalsy()
+    expect(AccountsUtils.usesOriginalBalanceField(investment)).toBeFalsy()
+    expect(AccountsUtils.usesOriginalBalanceField(lineOfCredit)).toBeFalsy()
+    expect(AccountsUtils.usesOriginalBalanceField(mortgage)).toBeTruthy()
+    expect(AccountsUtils.usesOriginalBalanceField(property)).toBeFalsy()
+    expect(AccountsUtils.usesOriginalBalanceField(cash)).toBeFalsy()
+    expect(AccountsUtils.usesOriginalBalanceField(insurance)).toBeFalsy()
+    expect(AccountsUtils.usesOriginalBalanceField(prepaid)).toBeFalsy()
+    expect(AccountsUtils.usesOriginalBalanceField(checkingLineOfCredit)).toBeFalsy()
+    expect(AccountsUtils.usesOriginalBalanceField(digitalWallet)).toBeFalsy()
+  })
+})

package/src/accounts/utils/getConnectionMessages.tsx

@@ -0,0 +1,198 @@
+import { fromUnixTime } from 'date-fns/fromUnixTime'
+import { isToday } from 'date-fns/isToday'
+import { isYesterday } from 'date-fns/isYesterday'
+
+import {
+  ConnectCopy,
+  ConnectionStatusEnums,
+  DATE_FORMATS_INTL,
+  buildDynamicCopy,
+  formatDate,
+  type Member,
+} from '../../common'
+
+export interface ConnectionMessageObject {
+  cta?: string
+  main: string
+  statusName: string
+  title: string
+}
+
+export const getConnectionMessages: any = (member: Member, copy: ConnectCopy) => {
+  const { connection_messages } = copy
+
+  switch (member.connection_status) {
+    case ConnectionStatusEnums.CHALLENGED: {
+      return {
+        cta: connection_messages.challenged_cta,
+        main: buildDynamicCopy(
+          connection_messages.challenged_connection_description,
+          member.name,
+        ) as string,
+        statusName: copy.connection_statuses[member.connection_status],
+        title: connection_messages.challenged_connection_title,
+      }
+    }
+    case ConnectionStatusEnums.CLOSED: {
+      return {
+        main: connection_messages.closed_connection_description,
+        statusName: copy.connection_statuses[member.connection_status],
+        title: connection_messages.closed_connection_title,
+      }
+    }
+    case ConnectionStatusEnums.DEGRADED: {
+      return {
+        main: connection_messages.degraded_connection_description,
+        statusName: copy.connection_statuses[member.connection_status],
+        title: connection_messages.degraded_connection_title,
+      }
+    }
+    case ConnectionStatusEnums.DELAYED: {
+      return {
+        main: buildDynamicCopy(
+          connection_messages.delayed_connection_description,
+          member.name,
+        ) as string,
+        statusName: copy.connection_statuses[member.connection_status],
+        title: connection_messages.delayed_connection_title,
+      }
+    }
+    case ConnectionStatusEnums.DENIED: {
+      return {
+        cta: connection_messages.denied_cta,
+        main: buildDynamicCopy(
+          connection_messages.denied_connection_description,
+          member.name,
+        ) as string,
+        statusName: copy.connection_statuses[member.connection_status],
+        title: connection_messages.denied_connection_title,
+      }
+    }
+    case ConnectionStatusEnums.DISABLED: {
+      return {
+        main: connection_messages.disabled_connection_description,
+        statusName: copy.connection_statuses[member.connection_status],
+        title: connection_messages.disabled_connection_title,
+      }
+    }
+    case ConnectionStatusEnums.DISCONNECTED: {
+      return {
+        main: buildDynamicCopy(
+          connection_messages.disconnected_connection_description,
+          member.name,
+        ) as string,
+        statusName: copy.connection_statuses[member.connection_status],
+        title: connection_messages.disconnected_connection_title,
+      }
+    }
+    case ConnectionStatusEnums.DISCONTINUED: {
+      return {
+        main: connection_messages.discontinued_connection_description,
+        statusName: copy.connection_statuses[member.connection_status],
+        title: connection_messages.discontinued_connection_title,
+      }
+    }
+    case ConnectionStatusEnums.EXPIRED: {
+      return {
+        cta: connection_messages.expired_cta,
+        main: connection_messages.expired_connection_description,
+        statusName: copy.connection_statuses[member.connection_status],
+        title: connection_messages.expired_connection_title,
+      }
+    }
+    case ConnectionStatusEnums.FAILED: {
+      return {
+        main: buildDynamicCopy(
+          connection_messages.failed_connection_description,
+          member.name,
+        ) as string,
+        statusName: copy.connection_statuses[member.connection_status],
+        title: connection_messages.failed_connection_title,
+      }
+    }
+    case ConnectionStatusEnums.IMPAIRED: {
+      return {
+        cta: connection_messages.impaired_cta,
+        main: buildDynamicCopy(
+          connection_messages.impaired_connection_description,
+          member.name,
+        ) as string,
+        statusName: copy.connection_statuses[member.connection_status],
+        title: connection_messages.impaired_connection_title,
+      }
+    }
+    case ConnectionStatusEnums.IMPEDED: {
+      return {
+        main: buildDynamicCopy(
+          connection_messages.impeded_connection_description,
+          member.name,
+          member.name,
+        ) as string,
+        statusName: copy.connection_statuses[member.connection_status],
+        title: connection_messages.impeded_connection_title,
+      }
+    }
+    case ConnectionStatusEnums.IMPORTED: {
+      return {
+        cta: connection_messages.imported_cta,
+        main: buildDynamicCopy(
+          connection_messages.imported_connection_description,
+          member.name,
+        ) as string,
+        statusName: copy.connection_statuses[member.connection_status],
+        title: connection_messages.imported_connection_title,
+      }
+    }
+    case ConnectionStatusEnums.LOCKED: {
+      return {
+        cta: connection_messages.locked_cta,
+        main: buildDynamicCopy(
+          connection_messages.locked_connection_description,
+          member.name,
+        ) as string,
+        statusName: copy.connection_statuses[member.connection_status],
+        title: connection_messages.locked_connection_title,
+      }
+    }
+    case ConnectionStatusEnums.PREVENTED: {
+      return {
+        cta: connection_messages.prevented_cta,
+        main: connection_messages.prevented_connection_description,
+        statusName: copy.connection_statuses[member.connection_status],
+        title: connection_messages.prevented_connection_title,
+      }
+    }
+    case ConnectionStatusEnums.REJECTED: {
+      return {
+        cta: connection_messages.rejected_cta,
+        main: connection_messages.rejected_connection_description,
+        statusName: copy.connection_statuses[member.connection_status],
+        title: connection_messages.rejected_connection_title,
+      }
+    }
+    default: {
+      const lastUpdatedCopy = () => {
+        const lastUpdated = member.successfully_aggregated_at
+          ? fromUnixTime(member.successfully_aggregated_at)
+          : undefined
+        const lastUpdatedFormattedTime =
+          lastUpdated && formatDate(lastUpdated, DATE_FORMATS_INTL.TIME_STAMP_HOUR_MINUTE)
+
+        if (!lastUpdatedFormattedTime) return undefined
+        if (isToday(lastUpdated))
+          return buildDynamicCopy(copy.last_updated_at, copy.today, lastUpdatedFormattedTime)
+        if (isYesterday(lastUpdated))
+          return buildDynamicCopy(copy.last_updated_at, copy.yesterday, lastUpdatedFormattedTime)
+        return buildDynamicCopy(
+          copy.last_updated_at,
+          formatDate(lastUpdated, DATE_FORMATS_INTL.MONTH_DAY_YEAR),
+          lastUpdatedFormattedTime,
+        )
+      }
+      return {
+        statusName: copy.connection_statuses[6], // Connected
+        title: lastUpdatedCopy(),
+      }
+    }
+  }
+}

package/src/accounts/utils/index.ts

@@ -0,0 +1 @@
+export { isAccountLiability, usesInterestRateField, usesOriginalBalanceField } from './Accounts'

package/src/budgets/BubbleBudgetsMiniWidget.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Box from '@mui/material/Box'
+import Stack from '@mui/material/Stack'
+import useTheme from '@mui/material/styles/useTheme'
+
+import { Text } from '@kyper/mui'
+
+import {
+  MiniWidgetContainer,
+  MiniWidgetProps,
+  formatCurrency,
+  useBudgetsStore,
+  useGlobalCopyStore,
+} from '../common'
+
+import { useGetBudgetDifference } from './utils/BudgetUtil'
+import { BubbleBudgets } from './components/BubbleBudgets'
+
+const BubbleBudgetsMiniWidget = (props: MiniWidgetProps) => {
+  const theme = useTheme()
+
+  const { budgets, loadBudgets, setTheme } = useBudgetsStore()
+  const { budgets: budgetsCopy } = useGlobalCopyStore()
+  const difference = useGetBudgetDifference()
+  const shouldShowZeroState = budgets.length === 0
+
+  React.useEffect(() => {
+    setTheme(theme)
+    loadBudgets().finally()
+  }, [])
+
+  return (
+    <MiniWidgetContainer
+      primaryCtaLabel={shouldShowZeroState ? budgetsCopy.get_started_cta : budgetsCopy.details_cta}
+      title={budgetsCopy.budgets_title}
+      {...props}
+    >
+      <Stack height={450} mt={32}>
+        <BubbleBudgets height={370} shouldShowZeroState={shouldShowZeroState} />
+        {!shouldShowZeroState && (
+          <Box ml={16}>
+            <Text bold={true} color={difference < 0 ? 'error.main' : 'success.main'}>
+              {formatCurrency(Math.abs(difference), '0,0')}
+            </Text>
+            <Text>
+              {difference < 0 ? budgetsCopy.overspent_in_budgets : budgetsCopy.left_in_budgets}
+            </Text>
+          </Box>
+        )}
+      </Stack>
+    </MiniWidgetContainer>
+  )
+}
+
+export default observer(BubbleBudgetsMiniWidget)