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

package/src/debts/utils/SnowballCard.tsx

@@ -0,0 +1,48 @@
+import { formatDuration, intervalToDuration } from 'date-fns'
+
+import { Debt, formatCurrency, formatDate, DATE_FORMATS_INTL } from '../../common'
+
+type PayoffProjection = {
+  payoffSavings: string
+  payoffDate: string
+  payoffDuration: string
+}
+
+export function getPayoffProjection(debts: Debt[], extraPayment?: number): PayoffProjection {
+  // Sort non-zero debts by balance (ascending)
+  const sortedDebts = debts.filter((d) => d.balance > 0).sort((a, b) => a.balance - b.balance)
+
+  let totalSavings = 0
+  let monthlyExtra = extraPayment ?? 0
+  const startDate = new Date()
+  const endDate = new Date()
+
+  while (sortedDebts.some((debt) => debt.balance > 0)) {
+    for (const debt of sortedDebts) {
+      if (debt.balance <= 0) continue
+
+      const monthlyInterest = (debt.balance * debt.interest_rate) / 12
+      totalSavings += monthlyInterest
+
+      // Apply monthly payment with any extra payment
+      const appliedPayment = Math.min(debt.balance, debt.monthly_payment + monthlyExtra)
+      debt.balance -= appliedPayment
+
+      // If debt was paid off, roll over ("snowball") its payment as extra payment
+      if (debt.balance <= 0) {
+        monthlyExtra += debt.monthly_payment
+      }
+    }
+
+    // Increment to the next month
+    endDate.setMonth(endDate.getMonth() + 1)
+  }
+
+  const duration = intervalToDuration({ start: startDate, end: endDate })
+
+  return {
+    payoffSavings: formatCurrency(totalSavings, '0,0.00'),
+    payoffDate: formatDate(endDate, DATE_FORMATS_INTL.MONTH_YEAR),
+    payoffDuration: formatDuration(duration, { format: ['years', 'months'] }),
+  }
+}

package/src/goals/GoalsWidget.tsx

@@ -0,0 +1,128 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import Stack from '@mui/material/Stack'
+import Tab from '@mui/material/Tab'
+import Tabs from '@mui/material/Tabs'
+
+import {
+  ANALYTICS_EVENTS,
+  buildDynamicCopy,
+  Drawer,
+  formatCurrency,
+  Loader,
+  TrackType,
+  useAccountStore,
+  useEvent,
+  useGlobalCopyStore,
+  useGlobalUiStore,
+  useGoalStore,
+  useScreenSize,
+  WidgetContainer,
+  WidgetProps,
+} from '../common'
+
+import { TabTitle } from './components/TabTitle'
+import { GoalList } from './components/GoalList'
+import { GoalDetails } from './components/GoalDetails'
+
+export const GoalsWidget = observer(({ onBackClick, sx }: WidgetProps) => {
+  const { onEvent } = useEvent()
+  const { isMobile } = useScreenSize()
+  const { accounts } = useAccountStore()
+  const { isInitialized, setSelectedAccounts } = useGlobalUiStore()
+  const { goals: copy } = useGlobalCopyStore()
+  const { loadGoals, selectedGoal, setSelectedGoal } = useGoalStore()
+
+  const [selectedTab, setSelectedTab] = React.useState(0)
+
+  // TODO: Replace with calculated values
+  const savingTotal = 400
+  const debtTotal = 205
+  const retirementTotal = 624
+
+  const savingsTabSubtitle = buildDynamicCopy(
+    isMobile ? copy.tab_subtitle_mobile : copy.tab_subtitle,
+    formatCurrency(savingTotal, '0,0'),
+  ) as string
+
+  const debtTabSubtitle = buildDynamicCopy(
+    isMobile ? copy.tab_subtitle_mobile : copy.tab_subtitle,
+    formatCurrency(debtTotal, '0,0'),
+  ) as string
+
+  const retireTabSubtitle = buildDynamicCopy(
+    isMobile ? copy.tab_subtitle_mobile : copy.tab_subtitle,
+    formatCurrency(retirementTotal, '0,0'),
+  ) as string
+
+  React.useEffect(() => {
+    setSelectedAccounts(accounts)
+    onEvent(ANALYTICS_EVENTS.GOALS_VIEW)
+  }, [])
+
+  React.useEffect(() => {
+    if (isInitialized) {
+      loadGoals().finally()
+    }
+  }, [isInitialized])
+
+  const handleAccountFilterClick = () => {
+    onEvent(ANALYTICS_EVENTS.GOALS_CLICK_FILTER)
+  }
+
+  const handleAddClick = () => {
+    onEvent(ANALYTICS_EVENTS.GOALS_CLICK_ADD)
+  }
+
+  return (
+    <WidgetContainer
+      accountOptions={accounts}
+      actions={[
+        {
+          iconName: 'add',
+          label: copy.add_title,
+          onClick: handleAddClick,
+        },
+      ]}
+      onAccountsFilterClick={handleAccountFilterClick}
+      onBackClick={onBackClick}
+      sx={sx}
+      title={copy.title}
+    >
+      {!isInitialized && <Loader />}
+      {isInitialized && (
+        <Stack mx={isMobile ? 0 : 48} my={24}>
+          <Tabs
+            onChange={(_, newValue) => setSelectedTab(newValue)}
+            sx={{ bgcolor: 'background.paper' }}
+            value={selectedTab}
+            variant="fullWidth"
+          >
+            <Tab label={<TabTitle subtitle={savingsTabSubtitle} title={copy.tab_saving_title} />} />
+            <Tab label={<TabTitle subtitle={debtTabSubtitle} title={copy.tab_debt_title} />} />
+            <Tab
+              label={<TabTitle subtitle={retireTabSubtitle} title={copy.tab_retirement_title} />}
+            />
+          </Tabs>
+          {selectedTab === 0 && (
+            <GoalList onManageClick={() => {}} trackType={TrackType.SAVINGS_TRACK} />
+          )}
+          {selectedTab === 1 && (
+            <GoalList onManageClick={() => {}} trackType={TrackType.DEBT_TRACK} />
+          )}
+          {selectedTab === 2 && (
+            <GoalList onManageClick={() => {}} trackType={TrackType.RETIREMENT_TRACK} />
+          )}
+        </Stack>
+      )}
+      <Drawer
+        isOpen={Boolean(selectedGoal)}
+        onClose={() => setSelectedGoal(undefined)}
+        title={copy.goal_details}
+      >
+        {selectedGoal && <GoalDetails goal={selectedGoal} />}
+      </Drawer>
+    </WidgetContainer>
+  )
+})

package/src/goals/api/GoalApi.ts

@@ -0,0 +1,29 @@
+import { ApiEndpoints, Fetch, Goal } from '../../common'
+
+export class GoalApi {
+  fetchInstance: Fetch
+
+  constructor(endpoint: string, token: string) {
+    this.fetchInstance = new Fetch(endpoint, token)
+  }
+
+  addGoal = async (goal: Goal) => {
+    return this.fetchInstance.post(ApiEndpoints.GOALS, goal).then(data => data)
+  }
+
+  getGoalByGuid = async (guid: string) => {
+    return this.fetchInstance.get(`${ApiEndpoints.GOALS}/${guid}`).then(data => data)
+  }
+
+  getGoals = async () => {
+    return this.fetchInstance.get(ApiEndpoints.GOALS).then(data => data)
+  }
+
+  removeGoal = async (guid: string) => {
+    return this.fetchInstance.delete(`${ApiEndpoints}/${guid}`).then(data => data)
+  }
+
+  updateGoal = async (goal: Goal, guid: string) => {
+    return this.fetchInstance.put(`${ApiEndpoints.GOALS}/${guid}`, goal).then(data => data)
+  }
+}

package/src/goals/components/GoalDetails.tsx

@@ -0,0 +1,240 @@
+import React from 'react'
+
+import Button from '@mui/material/Button'
+import Divider from '@mui/material/Divider'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import ListItemAvatar from '@mui/material/ListItemAvatar'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemText from '@mui/material/ListItemText'
+import Stack from '@mui/material/Stack'
+
+import { ChevronRight, AddBox } from '@mxenabled/mx-icons'
+
+import { InstitutionLogo, Text } from '@kyper/mui'
+
+import {
+  buildDynamicCopy,
+  formatCurrency,
+  formatPercentage,
+  Goal,
+  TrackType,
+  useAccountStore,
+  useGlobalCopyStore,
+} from '../../common'
+
+import { GoalStatusCard } from './GoalStatusCard'
+
+interface GoalDetailsProps {
+  goal: Goal
+}
+
+export const GoalDetails = ({ goal }: GoalDetailsProps) => {
+  const { goals: copy } = useGlobalCopyStore()
+  const { accounts } = useAccountStore()
+
+  const account = React.useMemo(
+    () => accounts.find((a) => a.guid === goal.account_guid),
+    [accounts, goal],
+  )
+
+  let goalTitle = copy.details_save_title
+  if (goal.track_type === TrackType.DEBT_TRACK) {
+    goalTitle = copy.details_debt_title
+  } else if (goal.track_type === TrackType.RETIREMENT_TRACK) {
+    goalTitle = copy.details_retirement_title
+  }
+
+  return (
+    <Stack>
+      <Stack mx={24}>
+        <Text color="text.secondary" sx={{ mb: 4, mt: 24 }} variant="XSmall">
+          {goalTitle}
+        </Text>
+        <GoalStatusCard goal={goal} />
+
+        <Text color="text.secondary" sx={{ mb: 4, mt: 24 }} variant="XSmall">
+          {copy.details_title}
+        </Text>
+      </Stack>
+
+      <List sx={{ bgcolor: 'background.paper' }}>
+        {/* TODO Replace with action */}
+        <ListItem>
+          <ListItemButton>
+            <ListItemText
+              primary={copy.details_goal_name}
+              primaryTypographyProps={{ fontSize: 11 }}
+              secondary={goal.name}
+              secondaryTypographyProps={{ fontSize: 15, fontWeight: 600 }}
+            />
+            <ChevronRight />
+          </ListItemButton>
+        </ListItem>
+        <Divider variant="inset" />
+
+        {(goal.track_type === TrackType.SAVINGS_TRACK ||
+          goal.track_type === TrackType.RETIREMENT_TRACK) && (
+          // TODO Replace with action
+          <>
+            <ListItem>
+              <ListItemButton>
+                <ListItemText
+                  primary={copy.details_amount_to_save}
+                  primaryTypographyProps={{ fontSize: 11 }}
+                  secondary={formatCurrency(goal.amount, '0,0')}
+                  secondaryTypographyProps={{ fontSize: 15, fontWeight: 600 }}
+                />
+                <ChevronRight />
+              </ListItemButton>
+            </ListItem>
+            <Divider
+              variant={goal.track_type === TrackType.RETIREMENT_TRACK ? 'inset' : 'fullWidth'}
+            />
+          </>
+        )}
+
+        {goal.track_type === TrackType.DEBT_TRACK && (
+          <>
+            {/* TODO Replace with action */}
+            <ListItem>
+              <ListItemButton>
+                <ListItemText
+                  primary={copy.details_monthly_payment}
+                  primaryTypographyProps={{ fontSize: 11 }}
+                  secondary={formatCurrency(goal.monthly_payment, '0,0')}
+                  secondaryTypographyProps={{ fontSize: 15, fontWeight: 600 }}
+                />
+                <ChevronRight />
+              </ListItemButton>
+            </ListItem>
+            <Divider variant="inset" />
+
+            {/* TODO Replace with action */}
+            <ListItem>
+              <ListItemButton>
+                <ListItemText
+                  primary={copy.details_interest_rate}
+                  primaryTypographyProps={{ fontSize: 11 }}
+                  secondary={formatPercentage(goal.interest_rate)}
+                  secondaryTypographyProps={{ fontSize: 15, fontWeight: 600 }}
+                />
+                <ChevronRight />
+              </ListItemButton>
+            </ListItem>
+            <Divider variant="inset" />
+
+            {/* TODO Replace with action */}
+            <ListItem>
+              <ListItemButton>
+                <ListItemText
+                  primary={copy.details_original_balance}
+                  primaryTypographyProps={{ fontSize: 11 }}
+                  secondary={formatCurrency(goal.initial_amount, '0,0')}
+                  secondaryTypographyProps={{ fontSize: 15, fontWeight: 600 }}
+                />
+                <ChevronRight />
+              </ListItemButton>
+            </ListItem>
+            <Divider />
+          </>
+        )}
+
+        {goal.track_type === TrackType.RETIREMENT_TRACK && (
+          <>
+            {/* TODO Replace with action */}
+            <ListItem>
+              <ListItemButton>
+                <ListItemText
+                  primary={copy.details_retirement_age}
+                  primaryTypographyProps={{ fontSize: 11 }}
+                  secondary={65} // TODO Where do we get this value?
+                  secondaryTypographyProps={{ fontSize: 15, fontWeight: 600 }}
+                />
+                <ChevronRight />
+              </ListItemButton>
+            </ListItem>
+            <Divider variant="inset" />
+
+            {/* TODO Replace with action */}
+            <ListItem>
+              <ListItemButton>
+                <ListItemText
+                  primary={copy.details_birthday}
+                  primaryTypographyProps={{ fontSize: 11 }}
+                  secondary={'08/13/1985'} // TODO Where do we get this value?
+                  secondaryTypographyProps={{ fontSize: 15, fontWeight: 600 }}
+                />
+                <ChevronRight />
+              </ListItemButton>
+            </ListItem>
+            <Divider />
+          </>
+        )}
+      </List>
+
+      <Text color="text.secondary" sx={{ mb: 4, ml: 24, mt: 12 }} variant="XSmall">
+        {goal.track_type === TrackType.RETIREMENT_TRACK
+          ? copy.details_accounts
+          : copy.details_account}
+      </Text>
+
+      {account && (
+        <>
+          <ListItem sx={{ bgcolor: 'background.paper' }}>
+            <ListItemButton>
+              <ListItemAvatar>
+                <InstitutionLogo
+                  alt={account.name || ''}
+                  institutionGuid={account.institution_guid || ''}
+                />
+              </ListItemAvatar>
+              <ListItemText
+                primary={account.name || account.feed_name}
+                secondary={formatCurrency(account.balance, '0,0.00')}
+              />
+              <ChevronRight />
+            </ListItemButton>
+          </ListItem>
+          <Divider />
+        </>
+      )}
+
+      {goal.track_type === TrackType.RETIREMENT_TRACK && (
+        <>
+          <ListItem
+            disableGutters={true}
+            disablePadding={true}
+            sx={{ bgcolor: 'background.paper' }}
+          >
+            <ListItemButton>
+              <ListItemText>
+                <Stack alignItems="center" color="action.active" direction="row" gap={8}>
+                  <AddBox filled={true} />
+                  {copy.details_add_account}
+                </Stack>
+              </ListItemText>
+              <ChevronRight color="primary" />
+            </ListItemButton>
+          </ListItem>
+          <Divider />
+        </>
+      )}
+
+      {goal.track_type === TrackType.SAVINGS_TRACK && (
+        <>
+          <Button sx={{ mb: 8, mt: 24, mx: 24 }} variant="text">
+            {copy.details_change_account}
+          </Button>
+          <Text
+            color="text.secondary"
+            sx={{ mx: 24, textAlign: 'center', whiteSpace: 'wrap' }}
+            variant="Paragraph"
+          >
+            {buildDynamicCopy(copy.details_change_account_description, goal.name) as string}
+          </Text>
+        </>
+      )}
+    </Stack>
+  )
+}

package/src/goals/components/GoalList.tsx

@@ -0,0 +1,101 @@
+import { observer } from 'mobx-react-lite'
+
+import Button from '@mui/material/Button'
+import Card from '@mui/material/Card'
+import CardActionArea from '@mui/material/CardActionArea'
+import CardContent from '@mui/material/CardContent'
+import Grid from '@mui/material/Unstable_Grid2'
+import Stack from '@mui/material/Stack'
+
+import { Icon, Text } from '@kyper/mui'
+
+import {
+  formatCurrency,
+  TrackType,
+  useGlobalCopyStore,
+  useGoalStore,
+  useScreenSize,
+} from '../../common'
+
+import { GoalStatusCard } from './GoalStatusCard'
+
+interface GoalListProps {
+  trackType: TrackType
+  onManageClick: (trackType: TrackType) => void
+}
+
+export const GoalList = observer(({ onManageClick, trackType }: GoalListProps) => {
+  const { isMobile } = useScreenSize()
+  const { goals: copy } = useGlobalCopyStore()
+  const { goals: allGoals, setSelectedGoal } = useGoalStore()
+
+  const goals = allGoals.filter((goal) => goal.track_type === trackType)
+  const ongoing = goals.filter((goal) => !goal.is_complete)
+  const complete = goals.filter((goal) => goal.is_complete)
+
+  let manageButtonLabel = copy.manage_saving_goals
+  if (trackType === TrackType.DEBT_TRACK) {
+    manageButtonLabel = copy.manage_debt_goals
+  } else if (trackType === TrackType.RETIREMENT_TRACK) {
+    manageButtonLabel = copy.manage_retirement_goals
+  }
+
+  const zeroStateComplete =
+    trackType === TrackType.DEBT_TRACK
+      ? copy.zero_state_complete_debt
+      : copy.zero_state_complete_savings
+
+  return (
+    <Stack mt={16} mx={isMobile ? 24 : 0}>
+      <Stack alignItems="center" direction="row" justifyContent="space-between" mb={8}>
+        <Text color="text.secondary" variant="Small">
+          {copy.ongoing_title}
+        </Text>
+        <Button endIcon={<Icon name="chevron_right" />} onClick={() => onManageClick(trackType)}>
+          {manageButtonLabel}
+        </Button>
+      </Stack>
+
+      <Grid container={true} spacing={24}>
+        {ongoing.map((goal, index, goals) => (
+          // Goal should be full width in mobile or if it's the first goal (unless there are 2)
+          <Grid key={index} xs={isMobile || (index === 0 && goals.length !== 2) ? 12 : 6}>
+            <GoalStatusCard goal={goal} key={goal.guid} onClick={() => setSelectedGoal(goal)} />
+          </Grid>
+        ))}
+      </Grid>
+
+      {trackType !== TrackType.RETIREMENT_TRACK && (
+        <Stack gap={16} mt={48}>
+          <Text color="text.secondary" variant="Small">
+            {copy.complete_title}
+          </Text>
+          {complete.length === 0 && (
+            <Stack alignItems="center" bgcolor="background.default" borderRadius={2} py={18}>
+              <Text variant="Small">{zeroStateComplete}</Text>
+            </Stack>
+          )}
+          {complete.map((goal) => (
+            <Card elevation={2} key={goal.guid} sx={{ borderRadius: 2 }}>
+              <CardActionArea onClick={() => setSelectedGoal(goal)}>
+                <CardContent sx={{ ':last-child': { pb: 16 } }}>
+                  <Stack alignItems="center" direction="row" justifyContent="space-between">
+                    <Stack alignItems="center" direction="row" gap={6}>
+                      <Icon color="success" fill={true} name="check_circle" size={20} />
+                      <Text color="text.secondary" variant="Body">
+                        {goal.name}
+                      </Text>
+                    </Stack>
+                    <Text bold={true} variant="Body">
+                      {formatCurrency(goal.amount, '0,0.00')}
+                    </Text>
+                  </Stack>
+                </CardContent>
+              </CardActionArea>
+            </Card>
+          ))}
+        </Stack>
+      )}
+    </Stack>
+  )
+})

package/src/goals/components/GoalStatusCard.tsx

@@ -0,0 +1,87 @@
+import { observer } from 'mobx-react-lite'
+
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import CardHeader from '@mui/material/CardHeader'
+import Stack from '@mui/material/Stack'
+
+import { H2, Text } from '@kyper/mui'
+
+import {
+  formatCurrency,
+  type Goal,
+  StatusBar,
+  StatusBarData,
+  useGlobalCopyStore,
+} from '../../common'
+
+import { getGoalStatusData } from '../util/GoalsUtil'
+import { CardActionArea } from '@mui/material'
+import Avatar from '@mui/material/Avatar'
+import { Payments } from '@mxenabled/mx-icons'
+
+interface GoalStatusCardProps {
+  goal: Goal
+  onClick?: () => void
+}
+
+export const GoalStatusCard = observer(({ goal, onClick }: GoalStatusCardProps) => {
+  const { goals: copy } = useGlobalCopyStore()
+
+  const {
+    backgroundColor: bgcolor,
+    color,
+    percentage,
+    percentageText,
+    projectedText,
+  } = getGoalStatusData(copy, goal)
+
+  const data = [
+    {
+      color: bgcolor,
+      percentage: `${percentage}`,
+    },
+  ] as StatusBarData[]
+
+  return (
+    <Card elevation={2} sx={{ borderRadius: 2 }}>
+      <CardActionArea disabled={!onClick} onClick={onClick}>
+        <CardHeader
+          avatar={
+            <Avatar sx={{ bgcolor, color, height: 48, width: 48 }} variant="rounded">
+              <Payments />
+            </Avatar>
+          }
+          subheader={
+            <Text variant="H2">
+              {`
+                ${formatCurrency(goal.current_amount, '0,0.00')}/
+                ${formatCurrency(goal.amount, '0,0.00')}
+              `}
+            </Text>
+          }
+          title={
+            <H2 color="text.secondary" fontWeight={400} variant="Body">
+              {goal.name}
+            </H2>
+          }
+        />
+        <CardContent sx={{ pt: 0 }}>
+          <Stack gap={6}>
+            <StatusBar data={data} height={24} />
+            <Stack alignItems="center" direction="row" justifyContent="space-between">
+              <Text color="text.secondary" variant="XSmall">
+                {percentageText}
+              </Text>
+              {goal.projected_to_complete_at && (
+                <Text color="text.secondary" variant="XSmall">
+                  {projectedText}
+                </Text>
+              )}
+            </Stack>
+          </Stack>
+        </CardContent>
+      </CardActionArea>
+    </Card>
+  )
+})

package/src/goals/components/TabTitle.tsx

@@ -0,0 +1,21 @@
+import Stack from '@mui/material/Stack'
+
+import { Text } from '@kyper/mui'
+
+interface TabTitleProps {
+  title: string
+  subtitle: string
+}
+
+export function TabTitle({ title, subtitle }: TabTitleProps) {
+  return (
+    <Stack>
+      <Text bold={true} variant="Body">
+        {title}
+      </Text>
+      <Text sx={{ fontWeight: 400 }} variant="Body">
+        {subtitle}
+      </Text>
+    </Stack>
+  )
+}

package/src/goals/constants/CopyKeys.ts

@@ -0,0 +1,29 @@
+export enum CopyNamespace {
+  Goals = 'goals',
+}
+
+export enum ScreenName {
+  EmergencySavings = 'emergency_savings',
+}
+
+export enum ComponentName {
+  DismissalFeedback = 'dismissal_feedback',
+  ZeroState = 'zero_state',
+}
+
+export const COPY_KEYS = [
+  `${ScreenName.EmergencySavings}.${ComponentName.DismissalFeedback}.call_to_action`,
+  `${ScreenName.EmergencySavings}.${ComponentName.DismissalFeedback}.description`,
+  `${ScreenName.EmergencySavings}.${ComponentName.DismissalFeedback}.dismissal`,
+  `${ScreenName.EmergencySavings}.${ComponentName.DismissalFeedback}.feedback_options.cant_afford_it_radio_1`,
+  `${ScreenName.EmergencySavings}.${ComponentName.DismissalFeedback}.feedback_options.dont_know_what_it_is_radio_3`,
+  `${ScreenName.EmergencySavings}.${ComponentName.DismissalFeedback}.feedback_options.dont_need_it_radio_2`,
+  `${ScreenName.EmergencySavings}.${ComponentName.DismissalFeedback}.feedback_options.have_enough_radio_4`,
+  `${ScreenName.EmergencySavings}.${ComponentName.DismissalFeedback}.feedback_options.other_text`,
+  `${ScreenName.EmergencySavings}.${ComponentName.ZeroState}.title`,
+  `${ScreenName.EmergencySavings}.${ComponentName.ZeroState}.call_to_action`,
+  `${ScreenName.EmergencySavings}.${ComponentName.ZeroState}.description`,
+  `${ScreenName.EmergencySavings}.${ComponentName.ZeroState}.dismissal`,
+  `${ScreenName.EmergencySavings}.${ComponentName.ZeroState}.subtitle`,
+  `${ScreenName.EmergencySavings}.${ComponentName.ZeroState}.title`,
+]

package/src/goals/index.ts

@@ -0,0 +1,2 @@
+export { GoalsWidget } from './GoalsWidget'
+export { GoalStore } from './stores/GoalStore'