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

package/src/cashflow/CashflowOnboarding.tsx

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

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

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

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

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

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