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

package/src/microinsights/components/noRelevantInsightsCard/NoRelevantInsightsCard.tsx

@@ -0,0 +1,89 @@
+import React from 'react'
+
+import { observer } from 'mobx-react-lite'
+
+import { MicroWidgetProps, MicroInsightCard, ZeroStateIcon } from '../../'
+
+import { useCopyStore, useEvent, usePageview } from '../../context/hooks'
+
+import { SUPPORTED_CAROUSEL_HEIGHTS } from '../../constants/App'
+import { ANALYTICS_CLICK_EVENTS, ANALYTICS_PAGE_NAMES } from '../../constants/Analytics'
+
+declare const window: Window &
+  typeof globalThis & {
+    app: any
+  }
+
+export interface MicroZeroStateCardProps extends MicroWidgetProps {
+  carouselSize: string
+}
+
+export const NoRelevantInsightsCard: React.FC<MicroZeroStateCardProps> = ({
+  ariaLabel,
+  carouselSize,
+  clientColorScheme,
+  heightOverrides,
+  onCardClick,
+  posthog,
+  showIcon,
+  showWithMargin,
+  variant,
+  widthOverrides,
+}) => {
+  // *************** Context functions *********************git
+  const { cardsCopy } = useCopyStore()
+  const { onEvent } = useEvent()
+  const { onPageview } = usePageview()
+
+  const clientGuid = window.app?.config.client_guid
+
+  // ************** Use Effects Hooks **********************
+  React.useEffect(() => {
+    onPageview(ANALYTICS_PAGE_NAMES.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS)
+  }, [])
+
+  // *************** Click handlers ************************
+  const handleClick = () => {
+    if (onCardClick) onCardClick()
+    onEvent(ANALYTICS_CLICK_EVENTS.ON_NO_RELEVANT_INSIGHTS_CLICKED)
+    if (posthog?.capture && clientGuid) {
+      posthog.capture('micro_widget_clicked_insight', {
+        insight_template: 'no_relevant_insights',
+        $groups: { client: clientGuid },
+      })
+    }
+  }
+
+  return (
+    <MicroInsightCard
+      actionText={cardsCopy.micro_card_cta}
+      ariaLabel={ariaLabel}
+      description={cardsCopy.no_relevant_insights_card_description}
+      fontColors={{ buttonColor: clientColorScheme?.primary_300 }}
+      heightOverrides={heightOverrides}
+      icon={<ZeroStateIcon />}
+      onCardClick={handleClick}
+      showIcon={showIcon}
+      style={{
+        cardStyle: {
+          card: {
+            height: `calc(${SUPPORTED_CAROUSEL_HEIGHTS[carouselSize]}px - 44px)`,
+            margin: '0 auto',
+            width: showWithMargin ? `calc(100% - 32px)` : '100%',
+          },
+          description: {
+            WebkitLineClamp: 4,
+          },
+        },
+        linkTextStyle: {
+          marginLeft: 48,
+        },
+      }}
+      title={cardsCopy.no_relevant_insights_card_title}
+      variant={variant}
+      widthOverrides={widthOverrides}
+    />
+  )
+}
+
+export default observer(NoRelevantInsightsCard)

package/src/microinsights/components/spinner/Spinner.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import Box from '@mui/material/Box'
+import CircularProgress from '@mui/material/CircularProgress'
+
+const Spinner: React.FC = () => {
+  return (
+    <Box
+      sx={{
+        alignItems: 'center',
+        display: 'flex',
+        height: '100%',
+        justifyContent: 'center',
+        width: '100%',
+      }}
+    >
+      <CircularProgress />
+    </Box>
+  )
+}
+
+export default Spinner

package/src/microinsights/components/viewMoreMicroCard/ViewMoreMicroCard.tsx

@@ -0,0 +1,101 @@
+import React, { useEffect } from 'react'
+import { useInView } from 'react-intersection-observer'
+import { useTokens } from '@kyper/mui'
+
+import { observer } from 'mobx-react-lite'
+
+import { ChartFilledIcon, MicroWidgetProps, MicroInsightCard } from '../../'
+
+import { useCopyStore, useEvent } from '../../context/hooks'
+
+import { ANALYTICS_CLICK_EVENTS, ANALYTICS_VIEW_EVENTS } from '../../constants/Analytics'
+import { VIEW_THRESHOLD } from '../../constants/App'
+
+declare const window: Window &
+  typeof globalThis & {
+    app: any
+  }
+
+export interface ViewMoreMicroCardProps extends MicroWidgetProps {
+  isActiveCard: boolean
+}
+
+export const ViewMoreMicroCard: React.FC<ViewMoreMicroCardProps> = ({
+  isActiveCard,
+  ariaLabel,
+  clientColorScheme,
+  heightOverrides,
+  onCardClick,
+  posthog,
+  showIcon,
+  variant,
+  widthOverrides,
+}) => {
+  const tokens = useTokens()
+
+  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()
+
+  // ************** Use Effects Hooks **********************
+  useEffect(() => {
+    if (inView) {
+      onEvent(ANALYTICS_VIEW_EVENTS.ON_VIEW_MORE_VIEWED)
+    }
+  }, [inView])
+
+  useEffect(() => {
+    if (posthog?.capture && inView && clientGuid) {
+      posthog.capture('micro_widget_viewed_insight', {
+        insight_template: 'read_more_card',
+        $groups: { client: clientGuid },
+      })
+    }
+  }, [clientGuid, posthog, inView])
+
+  // *************** Click handlers ************************
+  const handleClick = () => {
+    if (onCardClick) onCardClick()
+    onEvent(ANALYTICS_CLICK_EVENTS.ON_VIEW_MORE_CLICKED)
+    if (posthog?.capture && clientGuid) {
+      posthog.capture('micro_widget_clicked_insight', {
+        insight_template: 'read_more_card',
+        $groups: { client: clientGuid },
+      })
+    }
+  }
+
+  return (
+    <MicroInsightCard
+      actionText={cardsCopy.micro_card_cta}
+      ariaLabel={ariaLabel}
+      description={cardsCopy.view_more_card_description}
+      fontColors={{ buttonColor: clientColorScheme?.primary_300 }}
+      heightOverrides={heightOverrides}
+      icon={
+        <ChartFilledIcon
+          color={
+            clientColorScheme?.primary_300
+              ? clientColorScheme?.primary_300
+              : tokens.Color.Primary300
+          }
+        />
+      }
+      isActiveCard={isActiveCard}
+      onCardClick={handleClick}
+      ref={ref}
+      showIcon={showIcon}
+      title={cardsCopy.view_more_card_title}
+      variant={variant}
+      widthOverrides={widthOverrides}
+    />
+  )
+}
+
+export default observer(ViewMoreMicroCard)

package/src/microinsights/components/zeroStateCard/ZeroStateCard.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+
+import { observer } from 'mobx-react-lite'
+
+import { MicroWidgetProps, MicroInsightCard, ZeroStateIcon } from '../../'
+
+import { useCopyStore, usePageview } from '../../context/hooks'
+
+import { SUPPORTED_CAROUSEL_HEIGHTS } from '../../constants/App'
+import { ANALYTICS_PAGE_NAMES } from '../../constants/Analytics'
+
+export interface ZeroStateCardProps extends MicroWidgetProps {
+  carouselSize: string
+}
+
+export const ZeroStateCard: React.FC<ZeroStateCardProps> = ({
+  ariaLabel,
+  carouselSize,
+  heightOverrides,
+  onCardClick,
+  showIcon,
+  showWithMargin,
+  variant,
+  widthOverrides,
+}) => {
+  // *************** Context functions *********************
+  const { onPageview } = usePageview()
+  const { zeroStateCopy } = useCopyStore()
+
+  // ************** Use Effects Hooks **********************
+  React.useEffect(() => {
+    onPageview(ANALYTICS_PAGE_NAMES.MICRO_WIDGET_CAROUSEL_ZERO_STATE)
+  }, [])
+
+  return (
+    <MicroInsightCard
+      ariaLabel={ariaLabel}
+      description={zeroStateCopy.carousel_zero_state_description}
+      heightOverrides={heightOverrides}
+      icon={<ZeroStateIcon />}
+      onCardClick={onCardClick}
+      showIcon={showIcon}
+      style={{
+        cardStyle: {
+          card: {
+            height: `calc(${SUPPORTED_CAROUSEL_HEIGHTS[carouselSize]}px - 44px)`,
+            margin: '0 auto',
+            width: showWithMargin ? `calc(100% - 32px)` : '100%',
+          },
+          description: {
+            WebkitLineClamp: 4,
+          },
+        },
+      }}
+      title={zeroStateCopy.carousel_zero_state_title}
+      variant={variant}
+      widthOverrides={widthOverrides}
+    />
+  )
+}
+
+export default observer(ZeroStateCard)

package/src/microinsights/constants/Analytics.ts

@@ -0,0 +1,192 @@
+import type { BasicAnalyticsEvent } from '../../common'
+
+export const TEMPLATE_NAMES = {
+  BillAmountNotStandard: 'BillAmountNotStandard',
+  CanadianUpcomingDeadlineAlert: 'CanadianUpcomingDeadlineAlert',
+  DuplicatePaymentV2: 'DuplicatePaymentV2',
+  IntroducePulse: 'IntroducePulse',
+  LargeTransaction: 'LargeTransaction',
+  MonthlySpendToIncomeComparisonV2: 'MonthlySpendToIncomeComparisonV2',
+  QuarterlySummary: 'QuarterlySummary',
+  SpendingPlanCategorySpending: 'SpendingPlanCategorySpending',
+  SubscriptionPriceIncrease: 'SubscriptionPriceIncrease',
+  UncategorizedTransactionsV2: 'UncategorizedTransactionsV2',
+  UpcomingBill: 'UpcomingBill',
+  UnifiedDeposit: 'UnifiedDeposit',
+  WeeklySpendingPlanSummary: 'WeeklySpendingPlanSummary',
+  WeeklyNewMerchantsV2: 'WeeklyNewMerchantsV2',
+  MonthlySpendComparison: 'MonthlySpendComparison',
+  MonthlySpendToIncomeComparison: 'MonthlySpendToIncomeComparison',
+}
+
+const instanceId = (window as any)?.app?.clientConfig?.microwidget_instance_id || ''
+
+const PATHS = {
+  INSIGHTS_MICRO_WIDGET: '/micro-insights-carousel',
+}
+
+export const ON_CLICK_EVENT = (name: string) => `on${name}Click`
+export const ON_VIEW_EVENT = (name: string) => `on${name}View`
+export const ON_VIEW_FIRST_TIME_EVENT = (name: string) => `on${name}ViewFirstTime`
+export const readableTemplateName = (name: string) => name.replace(/([a-z])([A-Z])/g, '$1 $2')
+export const onBeatClickedEvents = () => {
+  return Object.values(TEMPLATE_NAMES).reduce(
+    (acc, name) => ({
+      ...acc,
+      [ON_CLICK_EVENT(name)]: {
+        action: ANALYTICS_ACTIONS.MICRO_BEAT_CLICKED,
+        category: ANALYTICS_CATEGORIES.BEAT_INTERACTION,
+        label: readableTemplateName(name),
+        value: instanceId,
+      },
+    }),
+    {},
+  ) as Record<keyof AnalyticsEventsType, string>
+}
+
+export const onBeatDisplayedEvents = () => {
+  return Object.values(TEMPLATE_NAMES).reduce(
+    (acc, name) => ({
+      ...acc,
+      [ON_VIEW_EVENT(name)]: {
+        action: ANALYTICS_ACTIONS.MICRO_BEAT_DISPLAYED,
+        category: ANALYTICS_CATEGORIES.BEAT_INTERACTION,
+        label: readableTemplateName(name),
+        value: instanceId,
+      },
+    }),
+    {},
+  ) as Record<keyof AnalyticsEventsType, string>
+}
+
+export const onBeatDisplayedForFirstTimeEvents = () => {
+  return Object.values(TEMPLATE_NAMES).reduce(
+    (acc, name) => ({
+      ...acc,
+      [ON_VIEW_FIRST_TIME_EVENT(name)]: {
+        action: ANALYTICS_ACTIONS.MICRO_BEAT_DISPLAYED_FIRST_TIME,
+        category: ANALYTICS_CATEGORIES.BEAT_INTERACTION,
+        label: readableTemplateName(name),
+        value: instanceId,
+      },
+    }),
+    {},
+  ) as Record<keyof AnalyticsEventsType, string>
+}
+
+export const ANALYTICS_LABELS = {
+  CARD: 'Card',
+  CAROUSEL_CONTROL: 'Carousel Control',
+  MICRO_WIDGET: 'Micro Widget',
+  VIEW_MORE: 'View More',
+}
+
+export const ANALYTICS_CATEGORIES = {
+  MICRO_WIDGET_INTERACTION: 'Micro Widget Interaction',
+  BEAT_INTERACTION: 'Beat Interaction',
+}
+
+export const ANALYTICS_CLICK_EVENTS = {
+  ON_CAROUSEL_BACK_CLICK: 'onCarouselBackClick',
+  ON_CAROUSEL_BACK_SWIPE: 'onCarouselBackSwipe',
+  ON_CAROUSEL_FORWARD_CLICK: 'onCarouselForwardClick',
+  ON_CAROUSEL_FORWARD_SWIPE: 'onCarouselForwardSwipe',
+  ON_NO_RELEVANT_INSIGHTS_CLICKED: 'onNoRelevantInsightsClicked',
+  ON_VIEW_MORE_CLICKED: 'onViewMoreClicked',
+}
+
+export const ANALYTICS_VIEW_EVENTS = {
+  ON_VIEW_MORE_VIEWED: 'onViewMoreCardView',
+}
+
+export const ANALYTICS_ACTIONS = {
+  CONTROL_BACKWARD: 'Control Backward',
+  CONTROL_FORWARD: 'Control Forward',
+  MICRO_BEAT_CLICKED: 'Micro Beat Clicked',
+  MICRO_BEAT_DISPLAYED: 'Micro Beat Displayed',
+  MICRO_BEAT_DISPLAYED_FIRST_TIME: 'Micro Beat Displayed For First Time',
+  SWIPE_BACKWARD: 'Swipe Backward',
+  SWIPE_FORWARD: 'Swipe Forward',
+}
+
+export const ANALYTICS_PAGE_NAMES = {
+  MICRO_WIDGET_CAROUSEL: 'Micro Widget Carousel',
+  MICRO_WIDGET_CAROUSEL_ZERO_STATE: 'Micro Widget Carousel Zero State',
+  MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS: 'Micro Widget Carousel No Relevant Insights',
+}
+
+export const ANALYTICS_PAGEVIEWS = {
+  [ANALYTICS_PAGE_NAMES.MICRO_WIDGET_CAROUSEL]: {
+    label: ANALYTICS_LABELS.MICRO_WIDGET,
+    name: ANALYTICS_PAGE_NAMES.MICRO_WIDGET_CAROUSEL,
+    path: PATHS.INSIGHTS_MICRO_WIDGET,
+    value: instanceId,
+  },
+  // zero state
+  [ANALYTICS_PAGE_NAMES.MICRO_WIDGET_CAROUSEL_ZERO_STATE]: {
+    label: ANALYTICS_LABELS.MICRO_WIDGET,
+    name: ANALYTICS_PAGE_NAMES.MICRO_WIDGET_CAROUSEL_ZERO_STATE,
+    path: PATHS.INSIGHTS_MICRO_WIDGET,
+    value: instanceId,
+  },
+  // no relevant cards
+  [ANALYTICS_PAGE_NAMES.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS]: {
+    label: ANALYTICS_LABELS.MICRO_WIDGET,
+    name: ANALYTICS_PAGE_NAMES.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS,
+    path: '/micro-widget',
+    value: instanceId,
+  },
+}
+
+export const ANALYTICS_EVENTS = {
+  // carousel control interaction events - clicks and swipes
+  [ANALYTICS_CLICK_EVENTS.ON_CAROUSEL_BACK_CLICK]: {
+    action: ANALYTICS_ACTIONS.CONTROL_BACKWARD,
+    category: ANALYTICS_CATEGORIES.MICRO_WIDGET_INTERACTION,
+    label: ANALYTICS_LABELS.CAROUSEL_CONTROL,
+    value: instanceId,
+  },
+  [ANALYTICS_CLICK_EVENTS.ON_CAROUSEL_FORWARD_CLICK]: {
+    action: ANALYTICS_ACTIONS.CONTROL_FORWARD,
+    category: ANALYTICS_CATEGORIES.MICRO_WIDGET_INTERACTION,
+    label: ANALYTICS_LABELS.CAROUSEL_CONTROL,
+    value: instanceId,
+  },
+  [ANALYTICS_CLICK_EVENTS.ON_CAROUSEL_BACK_SWIPE]: {
+    action: ANALYTICS_ACTIONS.SWIPE_BACKWARD,
+    category: ANALYTICS_CATEGORIES.MICRO_WIDGET_INTERACTION,
+    label: ANALYTICS_LABELS.CAROUSEL_CONTROL,
+    value: instanceId,
+  },
+  [ANALYTICS_CLICK_EVENTS.ON_CAROUSEL_FORWARD_SWIPE]: {
+    action: ANALYTICS_ACTIONS.SWIPE_FORWARD,
+    category: ANALYTICS_CATEGORIES.MICRO_WIDGET_INTERACTION,
+    label: ANALYTICS_LABELS.CAROUSEL_CONTROL,
+    value: instanceId,
+  },
+  // read more card events
+  [ANALYTICS_CLICK_EVENTS.ON_VIEW_MORE_CLICKED]: {
+    action: ANALYTICS_ACTIONS.MICRO_BEAT_CLICKED,
+    category: ANALYTICS_CATEGORIES.BEAT_INTERACTION,
+    label: ANALYTICS_LABELS.VIEW_MORE,
+    value: instanceId,
+  },
+  [ANALYTICS_VIEW_EVENTS.ON_VIEW_MORE_VIEWED]: {
+    action: ANALYTICS_ACTIONS.MICRO_BEAT_DISPLAYED,
+    category: ANALYTICS_CATEGORIES.BEAT_INTERACTION,
+    label: ANALYTICS_LABELS.VIEW_MORE,
+    value: instanceId,
+  },
+
+  ...onBeatClickedEvents(),
+  ...onBeatDisplayedEvents(),
+  ...onBeatDisplayedForFirstTimeEvents(),
+}
+
+export interface AnalyticsEventsObjectType extends BasicAnalyticsEvent {
+  value: string
+}
+
+export type AnalyticsEventsType = {
+  [key: string]: AnalyticsEventsObjectType
+}

package/src/microinsights/constants/App.ts

@@ -0,0 +1,53 @@
+export const SUPPORTED_CAROUSEL_HEIGHTS: any = {
+  LARGE: 180,
+  STANDARD: 154,
+  XLARGE: 200,
+  XXLARGE: 248,
+}
+
+export const CAROUSEL_FONT_STYLES: any = {
+  LARGE: {
+    DESCRIPTION: 15,
+    DESCRIPTION_LINE_CLAMP: 2,
+    DESCRIPTION_LINE_HEIGHT: 20,
+    TITLE: 15,
+    TITLE_LINE_CLAMP: 1,
+    TITLE_LINE_HEIGHT: 20,
+    LINK_ICON_HEIGHT: 11,
+    LINK_ICON_WIDTH: 6,
+  },
+  STANDARD: {
+    DESCRIPTION: 14,
+    DESCRIPTION_LINE_CLAMP: 2,
+    DESCRIPTION_LINE_HEIGHT: 19,
+    TITLE: 14,
+    TITLE_LINE_CLAMP: 2,
+    TITLE_LINE_HEIGHT: 19,
+    LINK_ICON_HEIGHT: 11,
+    LINK_ICON_WIDTH: 6,
+  },
+  XLARGE: {
+    DESCRIPTION: 17,
+    DESCRIPTION_LINE_CLAMP: 2,
+    DESCRIPTION_LINE_HEIGHT: 24,
+    TITLE: 19,
+    TITLE_LINE_CLAMP: 2,
+    TITLE_LINE_HEIGHT: 24,
+    LINK_ICON_HEIGHT: 24,
+    LINK_ICON_WIDTH: 24,
+  },
+  XXLARGE: {
+    DESCRIPTION: 19,
+    DESCRIPTION_LINE_CLAMP: 3,
+    DESCRIPTION_LINE_HEIGHT: 24,
+    TITLE: 21,
+    TITLE_LINE_CLAMP: 2,
+    TITLE_LINE_HEIGHT: 28,
+    LINK_ICON_HEIGHT: 24,
+    LINK_ICON_WIDTH: 24,
+  },
+}
+
+export const MINIMUM_SWIPE_DISTANCE = 50
+
+export const VIEW_THRESHOLD = 1 // card is 100% in view

package/src/microinsights/constants/Insights.tsx

@@ -0,0 +1,3 @@
+export interface InsightIcons {}
+
+export const INSIGHT_ICONS: InsightIcons = {}

package/src/microinsights/constants/OnClickEvents.ts

@@ -0,0 +1,3 @@
+export const ON_CLICK_EVENTS = {
+  ON_VIEW_ALL_CLICKED: 'onViewAllClicked',
+}

package/src/microinsights/context/InsightsMicroWidgetDataProvider.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import type { AppStore } from '../stores/AppStore'
+
+export interface InsightsMicroWidgetContextTypes {
+  children: React.ReactNode
+  onEvent: (event: string, props?: object) => void
+  onPageview: (page: string) => void
+  store: AppStore
+}
+
+export const InsightsMicroWidgetDataContext =
+  React.createContext<InsightsMicroWidgetContextTypes | null>(null)
+
+export const InsightsMicroWidgetDataProvider: React.FC<InsightsMicroWidgetContextTypes> = ({
+  onEvent,
+  onPageview,
+  store,
+  children,
+}) => (
+  <InsightsMicroWidgetDataContext.Provider value={{ onEvent, onPageview, store, children }}>
+    {children}
+  </InsightsMicroWidgetDataContext.Provider>
+)

package/src/microinsights/context/hooks.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+
+import { InsightsMicroWidgetDataContext } from './InsightsMicroWidgetDataProvider'
+
+export const useDataContext = () => {
+  const context = React.useContext(InsightsMicroWidgetDataContext)
+
+  if (!context) {
+    throw new Error('useDataContext() must be used within the InsightsMicroWidgetDataProvider')
+  }
+
+  return context
+}
+
+export const useStore = () => {
+  const context = React.useContext(InsightsMicroWidgetDataContext)
+
+  if (!context) {
+    throw new Error('useStore() must be used within the InsightsMicroWidgetDataProvider')
+  }
+
+  return context.store
+}
+
+export const useCopyStore = () => {
+  const context = React.useContext(InsightsMicroWidgetDataContext)
+
+  if (!context) {
+    throw new Error('useCopyStore() must be used within the InsightsMicroWidgetDataProvider')
+  }
+
+  return context.store.copyStore
+}
+
+export const useInsightsMicroWidgetStore = () => {
+  const context = React.useContext(InsightsMicroWidgetDataContext)
+
+  if (!context?.store?.insightsMicroWidgetStore) {
+    throw new Error(
+      'useInsightsMicroWidgetStore() must be used within the InsightsMicroWidgetDataProvider',
+    )
+  }
+
+  return context.store.insightsMicroWidgetStore
+}
+
+export const useEvent = () => {
+  const context = React.useContext(InsightsMicroWidgetDataContext)
+
+  if (!context) {
+    throw new Error('useEvent() must be used within the InsightsMicroWidgetDataProvider')
+  }
+
+  return { onEvent: context.onEvent }
+}
+
+export const usePageview = () => {
+  const context = React.useContext(InsightsMicroWidgetDataContext)
+
+  if (!context) {
+    throw new Error('usePageview() must be used within the InsightsMicroWidgetDataProvider')
+  }
+
+  return { onPageview: context.onPageview }
+}

package/src/microinsights/index.ts

@@ -0,0 +1,16 @@
+export { AppStore } from './stores/AppStore'
+export { InsightsMicroWidgetDataProvider } from './context/InsightsMicroWidgetDataProvider'
+
+export { BeatCard } from './components/beatCard/BeatCard'
+export { default as  MicroBeatCarousel } from './components/microBeatCarousel/MicroBeatCarousel'
+export { MicroInsightCard } from './components/microInsightCard/MicroInsightCard'
+export { default as CarouselHeader } from './components/carouselheader/CarouselHeader'
+export { default as InsightsMicroWidget } from './components/insightsmicrowidget/InsightsMicroWidget'
+
+export { default as NoRelevantInsightsCard } from './components/noRelevantInsightsCard/NoRelevantInsightsCard'
+export { default as ViewMoreMicroCard } from './components/viewMoreMicroCard/ViewMoreMicroCard'
+export { default as ZeroStateCard } from './components/zeroStateCard/ZeroStateCard'
+
+export { ChartFilledIcon, MonthlySpendComparisonIcon, ZeroStateIcon } from './components/beaticons'
+
+export type { clientColorSchemeProps, MicroWidgetProps, StyleProps } from './interfaces'

package/src/microinsights/interfaces.ts

@@ -0,0 +1,28 @@
+import { Beat } from '../common'
+import type { PostHog } from 'posthog-js'
+
+export interface clientColorSchemeProps {
+  [key: string]: string | undefined
+}
+
+export interface MicroWidgetProps {
+  ariaLabel?: string
+  clientColorScheme?: clientColorSchemeProps
+  showCTAColocatedWithText?: boolean
+  heightOverrides?: number | string
+  isActiveCard?: boolean
+  onCardClick?: (beat?: Beat | undefined) => void
+  posthog?: PostHog
+  showBorder?: boolean
+  showCarouselControls?: boolean
+  showHeader?: boolean
+  showIcon?: boolean
+  showWithMargin?: boolean
+  useDarkMode?: boolean
+  variant?: 'elevation' | 'outlined' | undefined
+  widthOverrides?: number
+}
+
+export interface StyleProps {
+  [key: string]: object
+}