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

package/src/insights/settings/types/index.ts

@@ -0,0 +1,4 @@
+export interface EnabledSettings {
+  manageHiddenInsights: boolean
+  manageAccounts: boolean
+}

package/src/insights/store/BeatStore.ts

@@ -0,0 +1,25 @@
+import { makeAutoObservable, runInAction } from 'mobx'
+
+import { Beat, BeatApi } from '../../common'
+
+export class BeatStore {
+  beats: Beat[] = []
+  api: BeatApi = new BeatApi('/', '')
+
+  constructor() {
+    makeAutoObservable(this)
+  }
+
+  initialize = async (endpoint: string, token: string) => {
+    this.api = new BeatApi(endpoint, token)
+    await this.loadBeats()
+  }
+
+  loadBeats = async () => {
+    const beats = await this.api.getBeats()
+
+    runInAction(() => {
+      this.beats = beats
+    })
+  }
+}

package/src/insights/utils/beatTemplateCategories.ts

@@ -0,0 +1,103 @@
+import {
+  DisabledBeatTemplate,
+  CategoryMapping,
+  SubcategoryMapping,
+  BeatCategory,
+} from '../settings/hiddeninsights/types/index'
+
+// Create category and subcategory translation mappings
+const createTranslationMappings = (beatTemplatesWithCategories: DisabledBeatTemplate[]) => {
+  const categoryMapping: CategoryMapping = {
+    spending: '',
+    saving: '',
+    borrowing: '',
+    planning: '',
+  }
+  const subcategoryMapping: SubcategoryMapping = {
+    take_action_now: '',
+    bills_and_subscriptions: '',
+    current_spending: '',
+    savings_and_optimization: '',
+    credit_and_debt_management: '',
+    planning_and_goal_setting: '',
+    inform_me: '',
+  }
+
+  beatTemplatesWithCategories.forEach((template) => {
+    template.categories.forEach((category) => {
+      const {
+        category_key,
+        category: categoryName,
+        subcategory_key,
+        subcategory: subcategoryName,
+      } = category
+      categoryMapping[category_key] = categoryName
+      subcategoryMapping[subcategory_key] = subcategoryName
+    })
+  })
+
+  return [categoryMapping, subcategoryMapping]
+}
+
+// Organize beats into the sorted structure
+const organizeBeatsForUIStructure = (beatTemplatesWithCategories: DisabledBeatTemplate[]) => {
+  // Initialize the sorted beats structure based on UI requirements --
+  // both categories and subcategoires are in a specifically required order
+  const beatCategoryStructure: BeatCategory[] = [
+    {
+      key: 'spending',
+      subcategories: [
+        { key: 'take_action_now', beats: [] },
+        { key: 'bills_and_subscriptions', beats: [] },
+        { key: 'current_spending', beats: [] },
+      ],
+    },
+    {
+      key: 'saving',
+      subcategories: [{ key: 'savings_and_optimization', beats: [] }],
+    },
+    {
+      key: 'borrowing',
+      subcategories: [{ key: 'credit_and_debt_management', beats: [] }],
+    },
+    {
+      key: 'planning',
+      subcategories: [
+        { key: 'planning_and_goal_setting', beats: [] },
+        { key: 'inform_me', beats: [] },
+      ],
+    },
+  ]
+
+  beatTemplatesWithCategories.forEach((template) => {
+    template.categories.forEach((category) => {
+      const { category_key, subcategory_key } = category
+      const sortedCategory = beatCategoryStructure.find((cat) => cat.key === category_key)
+      if (sortedCategory) {
+        const sortedSubcategory = sortedCategory.subcategories.find(
+          (subcat) => subcat.key === subcategory_key,
+        )
+        if (sortedSubcategory) {
+          sortedSubcategory.beats.push(template)
+        }
+      }
+    })
+  })
+
+  return beatCategoryStructure
+}
+
+export const organizeBeats = (beatTemplatesWithCategories: DisabledBeatTemplate[]) => {
+  // Map the category keys to their translated names
+  const [translatedCats, translatedSubCats] = createTranslationMappings(beatTemplatesWithCategories)
+
+  // Map the beats to the corresponding category/subcategory by key
+  const categorizedBeats = organizeBeatsForUIStructure(beatTemplatesWithCategories)
+  const beatsAndCategories: [BeatCategory[], CategoryMapping, SubcategoryMapping] = [
+    categorizedBeats,
+    translatedCats,
+    translatedSubCats,
+  ]
+
+  return beatsAndCategories
+}

package/src/merchants/api/MerchantApi.ts

@@ -0,0 +1,33 @@
+import { ApiEndpoints, Fetch } from '../../common'
+
+export class MerchantApi {
+  fetchInstance: Fetch
+
+  constructor(endpoint: string, token: string) {
+    this.fetchInstance = new Fetch(endpoint, token)
+  }
+
+  getMerchants = async (
+    searchValues = [] as string[],
+    guids = [] as string[],
+    page = 1,
+    perPage = 25,
+  ) => {
+    let url = ApiEndpoints.MERCHANTS
+    url += `?page=${page}&per_page=${perPage}`
+
+    if (searchValues.length) {
+      searchValues.forEach((value) => (url += `&fuzzy_name[]=${value}`))
+    }
+
+    if (guids.length) {
+      guids.forEach((guid) => (url += `&guid[]=${guid}`))
+    }
+
+    return this.fetchInstance.get(url).then((data) => data.merchants)
+  }
+
+  getMerchantByGuid = async (guid: string) => {
+    return this.fetchInstance.get(`${ApiEndpoints.MERCHANTS}/${guid}`).then((data) => data.merchant)
+  }
+}

package/src/merchants/components/MerchantLookup.tsx

@@ -0,0 +1,117 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+import { useVirtualizer } from '@tanstack/react-virtual'
+
+import Box from '@mui/material/Box'
+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 Paper from '@mui/material/Paper'
+import Stack from '@mui/material/Stack'
+
+import { MerchantLogo, Text } from '@kyper/mui'
+
+import { Loader, SearchBox, useGlobalCopyStore, useMerchantStore } from '../../common'
+
+const NAME_PATTERN = /^[ a-zA-ZÀ-ÿ0-9]+$/
+const MAX_LENGTH = 50
+const ROW_HEIGHT = 65 // List items have a minHeight of 64, so we add 1px for the borders so they don't disappear on hover
+
+export interface MerchantLookupProps {
+  height?: string | number
+  onSelect: (guid: string) => void
+}
+
+const MerchantLookup: React.FC<MerchantLookupProps> = ({
+  height = 'calc(100dvh - 120px)',
+  onSelect,
+}) => {
+  const { isLoading, merchants, loadMerchants } = useMerchantStore()
+  const { common: copy } = useGlobalCopyStore()
+
+  const [searchValue, setSearchValue] = React.useState('')
+
+  React.useEffect(() => {
+    loadMerchants().finally()
+  }, [loadMerchants])
+
+  const handleSelected = (guid: string) => {
+    onSelect(guid)
+  }
+
+  const handleSearch = async (value: string) => {
+    if ((!value || NAME_PATTERN.test(value)) && value.length <= MAX_LENGTH) {
+      setSearchValue(value)
+      await loadMerchants(value)
+    }
+  }
+
+  const parentRef = React.useRef<HTMLDivElement>(null)
+  const rowVirtualizer = useVirtualizer({
+    count: merchants.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => ROW_HEIGHT,
+    overscan: 5,
+  })
+
+  React.useEffect(() => rowVirtualizer.measure(), [merchants])
+
+  return (
+    <Stack className="mx-mrt-lookup">
+      <SearchBox
+        ariaLabel={copy.search_aria}
+        cancelAriaLabel={copy.cancel_search_aria}
+        onChange={handleSearch}
+        placeholder={copy.search_placeholder}
+        searchValue={searchValue}
+      />
+
+      <Paper sx={{ boxShadow: 'none' }}>
+        <List>
+          <Box height={height} overflow="auto" ref={parentRef}>
+            <Box height={rowVirtualizer.getTotalSize()} position="relative">
+              {isLoading && <Loader label="Loading..." size={32} />}
+              {!isLoading &&
+                rowVirtualizer.getVirtualItems().length > 0 &&
+                rowVirtualizer.getVirtualItems().map((row) => {
+                  const merchant = merchants[row.index]
+
+                  return (
+                    <Box
+                      height={ROW_HEIGHT}
+                      key={merchant.guid}
+                      position="absolute"
+                      sx={{ transform: `translateY(${row.start}px)` }}
+                      width="100%"
+                    >
+                      <ListItem disableGutters={true} disablePadding={true}>
+                        <ListItemButton onClick={() => handleSelected(merchant.guid)}>
+                          <ListItemAvatar>
+                            <MerchantLogo categoryGuid="" merchantGuid={merchant.guid} />
+                          </ListItemAvatar>
+                          <ListItemText primary={merchant.name} />
+                        </ListItemButton>
+                      </ListItem>
+                      <Divider sx={{ ml: 24 }} />
+                    </Box>
+                  )
+                })}
+            </Box>
+            {!merchants.length && (
+              <Stack alignItems="center" my={24}>
+                <Text bold={true} color="secondary" variant="Small">
+                  {copy.search_zero_state}
+                </Text>
+              </Stack>
+            )}
+          </Box>
+        </List>
+      </Paper>
+    </Stack>
+  )
+}
+
+export default observer(MerchantLookup)

package/src/merchants/index.ts

@@ -0,0 +1,2 @@
+export { default as MerchantLookup } from './components/MerchantLookup'
+export { MerchantStore } from './stores/MerchantStore'

package/src/merchants/stores/MerchantStore.ts

@@ -0,0 +1,42 @@
+import { makeAutoObservable, runInAction } from 'mobx'
+
+import { MerchantApi } from '../api/MerchantApi'
+
+import type { Merchant } from '../../common'
+
+export interface CopyObject {
+  [key: string]: string
+}
+
+export class MerchantStore {
+  api: MerchantApi = new MerchantApi('/', '')
+
+  merchant: Merchant | null = null
+  merchants: Merchant[] = []
+  isLoading = false
+
+  constructor() {
+    makeAutoObservable(this)
+  }
+
+  initialize = async (endpoint: string, token: string) => {
+    this.api = new MerchantApi(endpoint, token)
+  }
+
+  loadMerchants = async (searchValue = '') => {
+    this.isLoading = true
+
+    const merchants = await this.api.getMerchants([searchValue])
+
+    runInAction(() => {
+      this.merchants = merchants
+      this.isLoading = false
+    })
+  }
+
+  loadMerchantByGuid = async (guid: string) => {
+    const merchant = await this.api.getMerchantByGuid(guid)
+
+    runInAction(() => (this.merchant = merchant))
+  }
+}

package/src/microinsights/analytics.ts

@@ -0,0 +1,31 @@
+import { analyticsSession } from '../common'
+import { AnalyticsPageviewObjectType } from '../common/types/Analytics'
+
+import { ANALYTICS_EVENTS, ANALYTICS_PAGEVIEWS } from './constants/Analytics'
+import type { AnalyticsEventsObjectType } from './constants/Analytics'
+
+export type AnalyticSession = Awaited<ReturnType<typeof analyticsSession>>
+
+export const onAnalyticEvent = async (event: string, session: AnalyticSession) => {
+  if (!session || !ANALYTICS_EVENTS[event]) return null
+
+  return session
+    .sendAnalyticEvent(ANALYTICS_EVENTS[event] as AnalyticsEventsObjectType)
+    .then((response) => response)
+    .catch((error) => {
+      throw error
+    })
+}
+
+export const onAnalyticPageView = async (page: string, session: AnalyticSession) => {
+  if (!session || !ANALYTICS_PAGEVIEWS[page]) {
+    return null
+  }
+
+  return session
+    .sendAnalyticsPageview(ANALYTICS_PAGEVIEWS[page] as AnalyticsPageviewObjectType)
+    .then((response) => response)
+    .catch((error) => {
+      throw error
+    })
+}

package/src/microinsights/components/beatCard/BeatCard.tsx

@@ -0,0 +1,124 @@
+import React, { useEffect } from 'react'
+import { useInView } from 'react-intersection-observer'
+
+import { MicroWidgetProps, MicroInsightCard } from '../../'
+import { BeatIcon } from '../beaticons'
+
+import { Beat } from '../../../common'
+
+import { ON_CLICK_EVENT, ON_VIEW_EVENT, ON_VIEW_FIRST_TIME_EVENT } from '../../constants/Analytics'
+import { VIEW_THRESHOLD } from '../../constants/App'
+
+import { useCopyStore, useEvent, useInsightsMicroWidgetStore } from '../../context/hooks'
+
+declare const window: Window &
+  typeof globalThis & {
+    app: any
+  }
+
+export interface BeatCardProps extends MicroWidgetProps {
+  backgroundColor?: string
+  beat: Beat
+  index?: number
+  variant?: 'elevation' | 'outlined'
+}
+
+export const BeatCard: React.FC<BeatCardProps> = ({
+  ariaLabel,
+  backgroundColor,
+  beat,
+  clientColorScheme,
+  showCTAColocatedWithText = true,
+  heightOverrides,
+  index,
+  isActiveCard,
+  onCardClick,
+  posthog,
+  showIcon,
+  variant,
+  widthOverrides,
+}) => {
+  const clientGuid = window.app?.config.client_guid
+
+  const { ref, inView }: { ref: any; inView: any } = useInView({
+    threshold: VIEW_THRESHOLD,
+  })
+
+  // *************** Context functions *********************
+  const { cardsCopy } = useCopyStore()
+  const { onEvent } = useEvent()
+  const { updateBeat } = useInsightsMicroWidgetStore()
+
+  // ************** Use Effects Hooks **********************
+  useEffect(() => {
+    if (inView) {
+      if (!beat.has_been_displayed) {
+        updateBeat({
+          ...beat,
+          has_been_displayed: true,
+        })
+        onEvent(ON_VIEW_FIRST_TIME_EVENT(beat.template))
+      } else {
+        onEvent(ON_VIEW_EVENT(beat.template))
+      }
+    }
+  }, [inView])
+  useEffect(() => {
+    if (posthog?.capture && inView && beat && clientGuid) {
+      posthog.capture('micro_widget_viewed_insight', {
+        beat_guid: beat.guid,
+        insight_template: beat.template,
+        position: index,
+        $groups: { client: clientGuid },
+      })
+    }
+  }, [beat, clientGuid, posthog, index, inView])
+
+  // *************** Click handlers ************************
+  const handleClick = () => {
+    /* eslint-disable no-unused-expressions */
+    onCardClick && onCardClick(beat)
+    onEvent(ON_CLICK_EVENT(beat.template))
+    if (posthog?.capture && clientGuid) {
+      posthog.capture('micro_widget_clicked_insight', {
+        beat_guid: beat.guid,
+        insight_template: beat.template,
+        position: index,
+        $groups: { client: clientGuid },
+      })
+    }
+  }
+
+  return (
+    <MicroInsightCard
+      actionText={beat.micro_call_to_action || cardsCopy.micro_card_cta}
+      ariaLabel={ariaLabel}
+      backgroundColor={backgroundColor}
+      description={
+        beat?.html_micro_description && beat?.html_micro_description.length > 0
+          ? beat.html_micro_description
+          : beat.html_description
+      }
+      fontColors={{ buttonColor: clientColorScheme?.primary_300 }}
+      heightOverrides={heightOverrides}
+      icon={
+        BeatIcon && (
+          <BeatIcon
+            beat={beat}
+            clientColorScheme={clientColorScheme}
+            color={beat?.icon_color}
+            type={beat?.icon_type}
+          />
+        )
+      }
+      isActiveCard={isActiveCard}
+      onCardClick={handleClick}
+      ref={ref}
+      showCTAColocatedWithText={showCTAColocatedWithText}
+      showIcon={showIcon}
+      title={beat.micro_title && beat.micro_title.length > 0 ? beat.micro_title : beat.title}
+      variant={variant}
+      widthOverrides={widthOverrides}
+    />
+  )
+}

package/src/microinsights/components/beaticons/BeatCategoryIcon.tsx

@@ -0,0 +1,20 @@
+import { FC, useEffect, useState } from 'react'
+
+import { CategoryIcon } from '@kyper/mui'
+
+import { BeatUIComponent } from '../../types/BeatUIComponent'
+import { CategoryGuids } from '../../../common'
+
+export const BeatCategoryIcon: FC<BeatUIComponent> = ({ beat }) => {
+  const [categoryGuid, setCategoryGuid] = useState<string>(CategoryGuids.UNCATEGORIZED)
+
+  useEffect(() => {
+    if (beat.primary_category_guid) {
+      setCategoryGuid(beat.primary_category_guid)
+    } else if (beat.category_guids?.length) {
+      setCategoryGuid(beat.category_guids[0])
+    }
+  }, [])
+
+  return <CategoryIcon categoryGuid={categoryGuid} size={16} sx={{ minWidth: 16 }} />
+}

package/src/microinsights/components/beaticons/BeatIcon.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+
+import { Icon } from '@kyper/mui'
+import useTheme from '@mui/material/styles/useTheme'
+
+import { clientColorSchemeProps } from '../..'
+
+import { BeatCategoryIcon, BeatMerchantLogo, MonthlySpendComparisonIcon } from '.'
+
+import { Beat } from '../../../common'
+
+export interface BeatIconProps {
+  beat?: Beat
+  clientColorScheme?: clientColorSchemeProps
+  color?: string | null
+  type?: number | null
+}
+
+export const BeatIcon: React.FC<BeatIconProps> = ({ beat, clientColorScheme, color, type }) => {
+  const theme = useTheme()
+
+  const primaryColor = clientColorScheme?.primary_300
+    ? clientColorScheme.primary_300
+    : theme.palette.primary.main
+
+  if (type === 0)
+    return <Icon fill={true} name="error" sx={{ color: color ? color : primaryColor }} /> // This is the attention icon
+
+  if (type === 1 && beat) return <BeatCategoryIcon beat={beat} />
+
+  if (type === 2 && beat) return <BeatMerchantLogo beat={beat} />
+
+  if (type === 3 && beat) return <MonthlySpendComparisonIcon beat={beat} />
+
+  // This is for the default and type 4 logo
+  return (
+    <Icon
+      fill={true}
+      name="info"
+      sx={{
+        color: primaryColor,
+      }}
+    />
+  )
+}

package/src/microinsights/components/beaticons/BeatMerchantLogo.tsx

@@ -0,0 +1,33 @@
+import { FC } from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { css } from '@mxenabled/cssinjs'
+import { useTokens, MerchantLogo } from '@kyper/mui'
+
+import { BeatUIComponent } from '../../types/BeatUIComponent'
+
+const BeatMerchantLogo: FC<BeatUIComponent> = ({ beat }) => {
+  const tokens = useTokens()
+  const styles = getStyles(tokens)
+
+  return (
+    <MerchantLogo
+      categoryGuid={
+        beat.primary_category_guid || (beat.category_guids && beat.category_guids[0]) || ''
+      }
+      className={styles}
+      merchantGuid={beat.primary_merchant_guid || beat.merchant_guids[0]}
+      size={16}
+    />
+  )
+}
+
+const getStyles = (tokens: any) =>
+  css({
+    marginTop: tokens.Spacing.XTiny,
+    '& .kyper-categoryicon': {
+      display: 'flex',
+    },
+  })
+
+export default observer(BeatMerchantLogo)

package/src/microinsights/components/beaticons/ChartFilledIcon.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+interface ChartFilledIconProps {
+  color?: string
+  height?: number
+  size?: number
+  styles?: object
+  viewBox?: string
+  width?: number
+}
+
+export const ChartFilledIcon: React.FC<ChartFilledIconProps> = ({
+  color = 'currentColor',
+  height,
+  size = 16,
+  styles,
+  viewBox = '0 0 16 16',
+  width,
+}) => {
+  return (
+    <svg
+      aria-hidden={true}
+      className="kyper-icon"
+      focusable={false}
+      height={height || size}
+      style={styles}
+      viewBox={viewBox}
+      width={width || size}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M16 1.5C16 0.671573 15.3284 0 14.5 0H1.5C0.671573 0 0 0.671573 0 1.5V14.5C0 15.3284 0.671573 16 1.5 16H14.5C15.3284 16 16 15.3284 16 14.5V1.5ZM12.8 5.1C13.0209 5.26568 13.0657 5.57909 12.9 5.8L9.90003 9.8C9.71746 10.0434 9.36163 10.0687 9.14648 9.85355L6.55413 7.2612L3.90003 10.8C3.73434 11.0209 3.42094 11.0657 3.20003 10.9C2.97912 10.7343 2.93434 10.4209 3.10003 10.2L6.10003 6.2C6.28259 5.95658 6.63843 5.93129 6.85358 6.14645L9.44593 8.7388L12.1 5.2C12.2657 4.97908 12.5791 4.93431 12.8 5.1Z"
+        fill={color}
+      />
+    </svg>
+  )
+}

package/src/microinsights/components/beaticons/MonthlySpendComparisonIcon.tsx

@@ -0,0 +1,30 @@
+import { FC } from 'react'
+import { Icon, useTokens } from '@kyper/mui'
+
+import type { BeatUIComponent } from '../../types/BeatUIComponent'
+import { DataSeries } from '../../../common'
+import { buildDataSeries } from '../../utils/DataSeries'
+
+export const getIconColor = (data: DataSeries | undefined, designTokens: any) => {
+  const fullDataSeries = buildDataSeries(data)
+  const chunkSize = fullDataSeries.length / 2
+
+  const spendChunk = fullDataSeries.slice(0, chunkSize)
+  const incomeChunk = fullDataSeries.slice(chunkSize)
+
+  if (!spendChunk.length || !incomeChunk.length) return designTokens.Color.Primary300
+
+  if (spendChunk[0].amount > incomeChunk[0].amount) {
+    return designTokens.Color.Error300
+  } else if (spendChunk[0].amount < incomeChunk[0].amount) {
+    return designTokens.Color.Success300
+  }
+
+  return designTokens.Color.Primary300
+}
+
+export const MonthlySpendComparisonIcon: FC<BeatUIComponent> = ({ beat }) => {
+  const tokens = useTokens()
+  const iconColor = getIconColor(beat.data_series, tokens)
+  return <Icon name="bar_chart" sx={{ color: iconColor }} />
+}