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

package/src/cashflow/CashflowOnboarding.tsx

@@ -0,0 +1,298 @@
+import React, { useState } from 'react'
+import { observer } from 'mobx-react-lite'
+import { getUnixTime } from 'date-fns/getUnixTime'
+import { startOfMonth } from 'date-fns/startOfMonth'
+import { startOfToday } from 'date-fns/startOfToday'
+import { subDays } from 'date-fns/subDays'
+
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import Divider from '@mui/material/Divider'
+import List from '@mui/material/List'
+import Stack from '@mui/material/Stack'
+import { keyframes } from '@mui/material/styles'
+import useTheme from '@mui/material/styles/useTheme'
+
+import { H1, Icon, P } from '@kyper/mui'
+
+import StepOne from './components/onboarding/StepOne'
+import StepTwo from './components/onboarding/StepTwo'
+
+import {
+  RecurrenceTypes,
+  type Transaction,
+  useCashflowStore,
+  useGlobalCopyStore,
+  useGlobalUiStore,
+  useRecurringActivityStore,
+  useScreenSize,
+  useTransactionStore,
+} from '../common'
+import SubheaderRow from '../common/components/SubheaderRow'
+
+import { useCashflowUiStore } from './context/hooks'
+
+import { TransactionRow } from '../transactions'
+import { incomeFilter, incomeFilterSearch } from '../transactions/utils/Filters'
+import SelectTransaction from '../recurringactivity/components/shared/activitysettings/SelectTransaction'
+import AddActivityDetails from '../recurringactivity/components/shared/activitysettings/AddActivityDetails'
+
+import {
+  buildNewCashflowEvent,
+  buildNewCashflowSequence,
+} from '../recurringactivity/util/buildNewActivity'
+
+import { fromUnixToDayOfWeekAndDate } from '../common/utils/DateUtil'
+
+import stepOneImageUrl from './images/cashflow-onboarding.png'
+
+interface UpcomingTransactions extends Transaction {
+  nextDate: Date | null
+  frequency: RecurrenceTypes
+}
+
+const spin = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`
+
+const CashflowOnboarding: React.FC = () => {
+  const { addCashflowEvent, addCashflowSequence, cashflowSequences } = useRecurringActivityStore()
+  const { cashflow: customCopy, common: commonCopy } = useGlobalCopyStore()
+
+  const { completeOnboarding } = useCashflowStore()
+  const { isDirty } = useCashflowUiStore()
+  const { isMobile } = useScreenSize()
+  const { setDisplayedDate } = useGlobalUiStore()
+  const { filter, setFilter, transactions } = useTransactionStore()
+  const theme = useTheme()
+
+  const [addIncome, setAddIncome] = useState(true)
+  const [frequency, setFrequency] = React.useState(RecurrenceTypes.EveryMonth)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [nextDate, setNextDate] = React.useState<Date | null>(null)
+  const [step, setStep] = useState(1)
+  const [selectedTransactions, setSelectedTransactions] = useState<UpcomingTransactions[] | []>([])
+  const [transactionGuid, setTransactionGuid] = useState('')
+
+  const transaction = React.useMemo(
+    () => transactions.find((t) => t.guid === transactionGuid),
+    [transactionGuid],
+  )
+
+  const canSubmit = !!cashflowSequences.length
+
+  const handleGetTransactions = async () => {
+    setStep(2)
+    // set transaction date range and filter by income
+    setDisplayedDate(
+      //  Beginning of the month, 90 days before today
+      startOfMonth(subDays(startOfToday(), 90)),
+      startOfToday(),
+    )
+
+    setFilter({ ...filter, custom: incomeFilter })
+
+    setStep(3)
+  }
+
+  const handleAddIncome = async () => {
+    if (selectedTransactions.length < 1) {
+      return
+    }
+    setIsSubmitting(true)
+
+    // Create CashflowSequences & CashflowEvents
+    for (let i = 0; i < selectedTransactions.length; i++) {
+      const upcomingTransaction = selectedTransactions[i]
+      const sequence = buildNewCashflowSequence(
+        upcomingTransaction,
+        upcomingTransaction.frequency,
+        upcomingTransaction.nextDate as Date,
+      )
+      const newSequence = await addCashflowSequence(sequence)
+      if (newSequence) {
+        const event = buildNewCashflowEvent(newSequence, upcomingTransaction)
+        await addCashflowEvent(event)
+      }
+    }
+    completeOnboarding()
+  }
+
+  const showSelectIncome =
+    (!transaction && addIncome) || (!transaction && selectedTransactions.length < 1)
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: !isMobile ? 'center' : 'flex-start',
+        backgroundColor: theme.palette.background.paper,
+        backgroundImage: !isMobile ? `url(${stepOneImageUrl})` : null,
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'left 100px',
+        backgroundSize: '35%',
+        py: 24,
+      }}
+    >
+      {step === 1 && (
+        <Box
+          sx={{
+            ...(isMobile
+              ? { display: 'flex', flexDirection: 'column', maxWidth: '100%', padding: '0 16px' }
+              : { maxWidth: 590, ml: '40%', mr: 90 }),
+          }}
+        >
+          <StepOne handleNextStep={handleGetTransactions} />
+        </Box>
+      )}
+      {step === 2 && (
+        <Box
+          sx={{
+            ...(isMobile
+              ? { display: 'flex', flexDirection: 'column', maxWidth: '100%', padding: '0 16px' }
+              : { maxWidth: 590, ml: '40%', mr: 90 }),
+          }}
+        >
+          <StepTwo />
+        </Box>
+      )}
+      {step === 3 && (
+        <Box
+          sx={{
+            ...(isMobile
+              ? { display: 'flex', flexDirection: 'column', maxWidth: '100%', padding: '0 16px' }
+              : { maxWidth: 590, ml: '40%', mr: 90 }),
+          }}
+        >
+          <H1 pb={12}>{customCopy.add_income_title}</H1>
+          <P mb={24}>{customCopy.add_income_description}</P>
+
+          {selectedTransactions.length > 0 && !transaction && (
+            <>
+              <List>
+                {selectedTransactions.map((transaction, index) => {
+                  return (
+                    <React.Fragment key={transaction.guid}>
+                      <SubheaderRow bgcolor="background.paper">
+                        {fromUnixToDayOfWeekAndDate(
+                          getUnixTime(transaction.nextDate || transaction.date),
+                        )}
+                      </SubheaderRow>
+                      <TransactionRow transaction={transaction} />
+                      {index !== selectedTransactions.length - 1 && <Divider />}
+                    </React.Fragment>
+                  )
+                })}
+              </List>
+              <Stack alignItems="center" direction="row">
+                <Divider sx={{ flexGrow: 1 }} />
+                <Button
+                  onClick={() => setAddIncome(true)}
+                  startIcon={<Icon name="add" size={20} />}
+                >
+                  {customCopy.add_additional_income_button}
+                </Button>
+              </Stack>
+            </>
+          )}
+
+          {showSelectIncome && (
+            <SelectTransaction
+              bgcolor="background.paper"
+              onSearch={(searchValue) =>
+                setFilter({
+                  ...filter,
+                  custom: (transaction: Transaction) =>
+                    searchValue
+                      ? incomeFilterSearch(transaction, searchValue)
+                      : incomeFilter(transaction),
+                })
+              }
+              onSelected={(guid) => {
+                setTransactionGuid(guid)
+                setAddIncome(false)
+              }}
+            />
+          )}
+
+          {!canSubmit && isDirty && (
+            <P color="error" mt={16}>
+              {customCopy.confirm_error}
+            </P>
+          )}
+
+          {transaction && (
+            <>
+              <AddActivityDetails
+                bgcolor="background.paper"
+                frequency={frequency}
+                isIncome={true}
+                nextDate={nextDate}
+                onFrequencyChange={setFrequency}
+                onNextDateChange={setNextDate}
+                transaction={transaction}
+              />
+              <Stack direction="row" gap={16} ml={24} mt={32}>
+                <Button
+                  aria-disabled={!transaction || !nextDate}
+                  onClick={() => {
+                    const updatedTransactions = [...selectedTransactions]
+                    updatedTransactions.push({ ...transaction, nextDate, frequency })
+
+                    setSelectedTransactions(updatedTransactions)
+                    setTransactionGuid('')
+                  }}
+                  variant="contained"
+                >
+                  {commonCopy.confirm_button}
+                </Button>
+                <Button
+                  onClick={() => {
+                    setTransactionGuid('')
+                    setAddIncome(true)
+                    handleGetTransactions()
+                  }}
+                  variant="outlined"
+                >
+                  {commonCopy.cancel_button}
+                </Button>
+              </Stack>
+            </>
+          )}
+
+          {selectedTransactions.length > 0 && !transaction && (
+            <Stack direction="row" gap={16} ml={24} mt={32}>
+              <Button
+                aria-disabled={selectedTransactions.length < 1 || isSubmitting}
+                onClick={handleAddIncome}
+                startIcon={
+                  isSubmitting ? (
+                    <Icon
+                      name="progress_activity"
+                      sx={{
+                        animation: `${spin} 2s linear infinite`,
+                      }}
+                    />
+                  ) : null
+                }
+                variant="contained"
+              >
+                {customCopy.confirm_income_button}
+              </Button>
+              <Button onClick={completeOnboarding} variant="outlined">
+                {customCopy.skip_button}
+              </Button>
+            </Stack>
+          )}
+        </Box>
+      )}
+    </Box>
+  )
+}
+
+export default observer(CashflowOnboarding)

package/src/cashflow/CashflowWidget.tsx

@@ -0,0 +1,111 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import {
+  ANALYTICS_EVENTS,
+  Drawer,
+  useAccountStore,
+  useEvent,
+  useGlobalCopyStore,
+  useGlobalUiStore,
+  useTransactionStore,
+  useUserStore,
+  WidgetContainer,
+  WidgetProps,
+} from '../common'
+
+import { ActivitySettings } from '../recurringactivity'
+
+import CashflowContent from './components/CashflowContent'
+import CashflowHeading from './components/CashflowHeading'
+import CashflowOnboarding from './CashflowOnboarding'
+import { useCashflowUiStore } from './context/hooks'
+
+const CashflowWidget: React.FC<WidgetProps> = ({ onBackClick, sx = {} }) => {
+  const {
+    selectedAccounts,
+    selectedAccountGuids,
+    setSelectedAccounts,
+    shouldDisableNextDate,
+    shouldDisablePrevDate,
+  } = useGlobalUiStore()
+
+  const { onEvent } = useEvent()
+  const { cashAccounts } = useAccountStore()
+  const { setFilter } = useTransactionStore()
+  const { userProfile } = useUserStore()
+  const { dateRange, setSelectedCashAccounts } = useCashflowUiStore()
+  const { cashflow: customCopy } = useGlobalCopyStore()
+
+  const [isSettingsOpen, setIsSettingsOpen] = React.useState(false)
+
+  React.useEffect(() => {
+    setSelectedAccounts(cashAccounts)
+  }, [cashAccounts])
+
+  React.useEffect(() => {
+    const cashAccountGuids = cashAccounts.map((account) => account.guid)
+    const selAccts = selectedAccounts.filter(
+      (account) =>
+        selectedAccountGuids.includes(account.guid) && cashAccountGuids.includes(account.guid),
+    )
+    setSelectedCashAccounts(selAccts)
+    setFilter({ accounts: selAccts.map((a) => a.guid) })
+  }, [cashAccounts, selectedAccounts])
+
+  if (userProfile?.has_completed_cash_flow_onboarding) {
+    return (
+      <WidgetContainer
+        accountOptions={cashAccounts}
+        actions={[
+          {
+            label: customCopy.cashflow_settings,
+            iconName: 'settings',
+            onClick: () => {
+              setIsSettingsOpen(true)
+              onEvent(ANALYTICS_EVENTS.CASH_FLOW_CLICK_SETTINGS)
+            },
+          },
+        ]}
+        calendarActions={{
+          shouldDisableNext: shouldDisableNextDate,
+          shouldDisablePrevious: shouldDisablePrevDate,
+          shouldDisablePicker: true,
+          onRangeChanged: () => {},
+        }}
+        dateRange={dateRange}
+        dateRangeVariant="readonly"
+        onAccountsFilterClick={() => onEvent(ANALYTICS_EVENTS.CASH_FLOW_CLICK_FILTER)}
+        onBackClick={onBackClick}
+        sx={sx}
+        title={customCopy.title}
+      >
+        <CashflowHeading />
+
+        <CashflowContent />
+
+        <Drawer
+          ariaLabelClose={customCopy.close_settings_aria}
+          isOpen={isSettingsOpen}
+          onClose={() => setIsSettingsOpen(false)}
+          shouldShowHeaderBorders={false}
+          title={customCopy.cashflow_settings}
+        >
+          <ActivitySettings />
+        </Drawer>
+      </WidgetContainer>
+    )
+  }
+
+  return (
+    <WidgetContainer
+      onBackClick={onBackClick}
+      sx={{ height: '100%', overflow: 'auto' }}
+      title={customCopy.title}
+    >
+      <CashflowOnboarding />
+    </WidgetContainer>
+  )
+}
+
+export default observer(CashflowWidget)

package/src/cashflow/api/CashflowApi.ts

@@ -0,0 +1,62 @@
+import { getUnixTime } from 'date-fns/getUnixTime'
+
+import { ApiEndpoints, Fetch, type CashflowEvent, type CashflowSequence } from '../../common'
+
+export class CashflowApi {
+  fetchInstance: Fetch
+
+  constructor(endpoint: string, token: string) {
+    this.fetchInstance = new Fetch(endpoint, token)
+  }
+
+  addCashflowEvent = async (cashflowEvent: CashflowEvent) => {
+    return this.fetchInstance
+      .post(ApiEndpoints.CASHFLOW_EVENTS, { ...cashflowEvent })
+      .then((data) => data)
+  }
+
+  addCashflowSequence = async (cashflowSequence: CashflowSequence) => {
+    return this.fetchInstance
+      .post(ApiEndpoints.CASHFLOW_SEQUENCES, { ...cashflowSequence })
+      .then((data) => data.cashflow_sequence)
+  }
+
+  getCashflowSequences = async (): Promise<CashflowSequence[]> => {
+    return this.fetchInstance
+      .get(ApiEndpoints.CASHFLOW_SEQUENCES)
+      .then((data) => data.cashflow_sequences)
+  }
+
+  getCashflowEventsByDateRange = async (
+    beginDate: Date,
+    endDate: Date,
+  ): Promise<CashflowEvent[]> => {
+    return this.fetchInstance
+      .get(
+        `${ApiEndpoints.CASHFLOW_EVENTS}/from/${getUnixTime(beginDate)}/to/${getUnixTime(endDate)}`,
+      )
+      .then((data) => data.cashflow_events)
+  }
+
+  deleteCashflowSequence = async (guid: string) => {
+    return this.fetchInstance
+      .delete(`${ApiEndpoints.CASHFLOW_SEQUENCES}/${guid}`)
+      .then((data) => data)
+  }
+
+  getProjectedCashflowEvents = async (beginDate: Date, endDate: Date): Promise<CashflowEvent[]> => {
+    return this.fetchInstance
+      .get(
+        `${ApiEndpoints.CASHFLOW_SEQUENCES}/projected_events/from/${getUnixTime(
+          beginDate,
+        )}/to/${getUnixTime(endDate)}`,
+      )
+      .then((data) => data.cashflow_events)
+  }
+
+  updateCashflowSequence = async (cashflowSequence: CashflowSequence) => {
+    return this.fetchInstance
+      .put(`${ApiEndpoints.CASHFLOW_SEQUENCES}/${cashflowSequence.guid}`, cashflowSequence)
+      .then((data) => data.cashflow_sequence)
+  }
+}

package/src/cashflow/api/__mocks__/CashflowApi.ts

@@ -0,0 +1,15 @@
+import { CashflowTestData } from '../../../../mock/unittestdata/CashflowTestData'
+
+export class CashflowApi {
+  getCashflowSequences() {
+    return CashflowTestData.sequences
+  }
+
+  getProjectedCashflowEvents() {
+    return CashflowTestData.events
+  }
+
+  getCashflowEventsByDateRange() {
+    return CashflowTestData.events
+  }
+}

package/src/cashflow/components/CashflowAmountHeading.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+
+import Stack from '@mui/material/Stack'
+
+import { Text } from '@kyper/mui'
+
+import { CurrencyText } from '../../common/components/CurrencyText'
+
+interface CashflowAmountHeadingProps {
+  amount: number
+  isMobile?: boolean
+  isTotal?: boolean
+  label: string
+  symbol?: string
+  tooltip?: React.ReactNode
+}
+
+const CashflowAmountHeading: React.FC<CashflowAmountHeadingProps> = ({
+  amount,
+  isMobile = false,
+  isTotal = false,
+  label,
+  symbol,
+  tooltip,
+}) => {
+  return (
+    <Stack
+      bgcolor={isTotal ? 'background.default' : 'transparent'}
+      direction={isMobile ? 'row' : 'column'}
+      justifyContent={isMobile ? 'space-between' : 'initial'}
+      padding={isMobile ? '14px 16px' : 0}
+      sx={{ borderBottomLeftRadius: 4, borderBottomRightRadius: 4 }}
+    >
+      {!isMobile && <CurrencyText amount={amount} component="h2" variant="H2" />}
+      <Stack alignItems="center" component="span" direction="row" gap={8} mt={2}>
+        <Text bold={isTotal} variant="Small">
+          {label}
+        </Text>
+        {tooltip}
+      </Stack>
+      {isMobile && <CurrencyText amount={amount} component="h2" symbol={symbol} variant="Small" />}
+    </Stack>
+  )
+}
+
+export default CashflowAmountHeading

package/src/cashflow/components/CashflowContent.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+import Box from '@mui/material/Box'
+import Tabs from '@mui/material/Tabs'
+import Tab from '@mui/material/Tab'
+
+import DetailsTab from './DetailsTab'
+import SummaryTab from './SummaryTab'
+import { TabContentContainer, useEvent, useGlobalCopyStore, useScreenSize } from '../../common'
+
+const CashflowContent: React.FC = () => {
+  const { cashflow: customCopy } = useGlobalCopyStore()
+  const { isDesktop } = useScreenSize()
+  const { onEvent } = useEvent()
+
+  const [value, setValue] = React.useState(0)
+
+  const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue)
+  }
+
+  React.useEffect(() => {
+    onEvent(value === 0 ? 'cash_flow_summary' : 'cash_flow_details')
+  }, [value])
+
+  return (
+    <Box>
+      <Tabs
+        aria-label={customCopy.cashflow_summary_and_details}
+        centered={true}
+        onChange={handleChange}
+        value={value}
+        variant="fullWidth"
+      >
+        <Tab
+          aria-controls="cashflow-tabpanel-0"
+          id="cashflow-tab-0"
+          label={customCopy.summary}
+          sx={{ textTransform: 'none' }}
+        />
+        <Tab
+          aria-controls="cashflow-tabpanel-1"
+          id="cashflow-tab-1"
+          label={customCopy.details}
+          sx={{ textTransform: 'none' }}
+        />
+      </Tabs>
+      <Box sx={{ mb: 32 }} />
+      <TabContentContainer index={0} name="cashflow" value={value}>
+        <Box sx={{ m: isDesktop ? 48 : 16 }}>
+          <SummaryTab />
+        </Box>
+      </TabContentContainer>
+      <TabContentContainer index={1} name="cashflow" value={value}>
+        <Box sx={{ m: isDesktop ? 48 : 16 }}>
+          <DetailsTab />
+        </Box>
+      </TabContentContainer>
+    </Box>
+  )
+}
+
+export default observer(CashflowContent)