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

package/src/microinsights/components/insightsmicrowidget/InsightsMicroWidget.tsx

@@ -0,0 +1,163 @@
+import React, { useState } from 'react'
+
+import { observer } from 'mobx-react-lite'
+import Box from '@mui/material/Box'
+import CssBaseline from '@mui/material/CssBaseline'
+import { ThemeProvider } from '@mui/material/styles'
+
+import { createMXTheme } from '@kyper/mui'
+
+import { useCombineEvents, useCombinePageviews, Beat } from '../../../common'
+
+import { InsightsMicroWidgetDataProvider } from '../../context/InsightsMicroWidgetDataProvider'
+
+import CarouselHeader from '../carouselheader/CarouselHeader'
+
+import { MicroWidgetProps, MicroBeatCarousel, NoRelevantInsightsCard, ZeroStateCard } from '../../'
+
+import Spinner from '../spinner/Spinner'
+
+import { AppStore } from '../../stores/AppStore'
+
+const store = new AppStore()
+
+export interface InsightsMicroWidgetProps extends MicroWidgetProps {
+  areBeatsLoading: boolean
+  beats: Beat[]
+  endpoint: string
+  logOutUser: () => void
+  onEvent?: (event?: string | undefined) => void
+  onPageview?: (event?: string | undefined) => void
+  token: string
+  userHasFullInsightFeedBeats?: boolean
+}
+
+/*
+  This is the parent component / starting point for the general availabile insights micro widget. The Legacy/Cibc version is in a seperate repo
+  called insights micro widget. The difference between the No relevent and zero state component is that No relevant is a zero state theat lets the
+  user know that although there are no micro insights available but the user has fill insights available and zero state lets the user know that there
+  aren't any micro or full insights available.
+*/
+
+const InsightsMicroWidget: React.FC<InsightsMicroWidgetProps> = ({
+  areBeatsLoading,
+  beats = [], // This also determines the length of the carousel controls (beat.length + 1)
+  clientColorScheme, // Allows certain icons, view all and read more button to reflect the clients color scheme. Currently only supports primary_300
+  showCTAColocatedWithText = true,
+  endpoint = '/',
+  heightOverrides,
+  logOutUser,
+  onCardClick = () => {},
+  onEvent: onConsumerEvent = () => {},
+  onPageview: onConsumerPageview = () => {},
+  posthog,
+  showBorder = true,
+  showCarouselControls,
+  showHeader,
+  showIcon,
+  showWithMargin = true,
+  token = '',
+  useDarkMode,
+  userHasFullInsightFeedBeats,
+  variant,
+  widthOverrides,
+}) => {
+  // ************** Use States Hooks ***********************
+  const [carouselSize, setCarouselSize] = useState<string>('STANDARD')
+  const [isLoaded, setIsLoaded] = useState(false)
+
+  // ************** Use Custom Hooks ***********************
+  const onEvent = useCombineEvents([onConsumerEvent], store)
+  const onPageview = useCombinePageviews([onConsumerPageview], store)
+
+  // ************** Use Effects Hooks **********************
+  React.useEffect(() => {
+    if (!store.isInitialized) {
+      store.initialize(endpoint, token, logOutUser)
+    }
+  }, [endpoint, token, logOutUser, store.isInitialized])
+
+  React.useEffect(() => {
+    const pageHeight = window.innerHeight
+
+    if (pageHeight < 180) {
+      setCarouselSize('STANDARD')
+    } else if (pageHeight >= 180 && pageHeight < 200) {
+      setCarouselSize('LARGE')
+    } else if (pageHeight >= 200 && pageHeight < 248) {
+      setCarouselSize('XLARGE')
+    } else if (pageHeight >= 248) {
+      setCarouselSize('XXLARGE')
+    }
+  }, [window.innerHeight])
+
+  React.useEffect(() => {
+    setIsLoaded(!areBeatsLoading && store.isInitialized)
+  }, [areBeatsLoading, store.isInitialized])
+
+  // ************** Spreadable Props ***********************
+  const generalProps = {
+    showCTAColocatedWithText,
+    heightOverrides,
+    onCardClick,
+    showIcon,
+    showWithMargin,
+    useDarkMode,
+    widthOverrides,
+  }
+
+  const zeroStateProps = {
+    carouselSize,
+    posthog,
+    variant,
+    ...generalProps,
+  }
+
+  return (
+    // The Theme provider must wrap the component so that the styles don't break when imported into other applications.
+    <ThemeProvider theme={createMXTheme(useDarkMode ? 'dark' : 'light')}>
+      <CssBaseline />
+      <InsightsMicroWidgetDataProvider onEvent={onEvent} onPageview={onPageview} store={store}>
+        <Box
+          sx={{
+            boxSizing: 'border-box',
+            height: !heightOverrides ? '100%' : undefined,
+            margin: '0 auto',
+            width: !widthOverrides ? '100%' : undefined,
+          }}
+        >
+          {(areBeatsLoading || !store.isInitialized) && <Spinner />}
+
+          {isLoaded && showHeader && (
+            <CarouselHeader
+              clientColorScheme={clientColorScheme}
+              onCardClick={onCardClick}
+              posthog={posthog}
+              widthOverrides={widthOverrides}
+            />
+          )}
+
+          {isLoaded && !!beats.length && (
+            <MicroBeatCarousel
+              beats={beats}
+              clientColorScheme={clientColorScheme}
+              showCarouselControls={showCarouselControls}
+              variant={showBorder ? variant : undefined}
+              {...generalProps}
+            />
+          )}
+
+          {isLoaded && !beats.length && userHasFullInsightFeedBeats && (
+            <NoRelevantInsightsCard clientColorScheme={clientColorScheme} {...zeroStateProps} />
+          )}
+
+          {isLoaded && !beats.length && !userHasFullInsightFeedBeats && (
+            <ZeroStateCard {...zeroStateProps} />
+          )}
+        </Box>
+      </InsightsMicroWidgetDataProvider>
+    </ThemeProvider>
+  )
+}
+
+export default observer(InsightsMicroWidget)

package/src/microinsights/components/microBeatCarousel/CarouselControls.tsx

@@ -0,0 +1,99 @@
+import React from 'react'
+
+import { css } from '@mxenabled/cssinjs'
+
+import Box from '@mui/material/Box'
+import IconButton from '@mui/material/IconButton'
+import ChevronLeft from '@mui/icons-material/ChevronLeft'
+import ChevronRight from '@mui/icons-material/ChevronRight'
+
+import { clientColorSchemeProps } from '../../'
+
+import { useCopyStore } from '../../context/hooks'
+
+export interface CarouselControlsProps {
+  clientColorScheme?: clientColorSchemeProps
+  currentBeatIndex: number
+  numBeats: number
+  onNextClick: () => void
+  onPreviousClick: () => void
+  scrollRightBoundary: number
+  scrollX: number
+}
+
+export const CarouselControls: React.FC<CarouselControlsProps> = ({
+  clientColorScheme,
+  currentBeatIndex,
+  numBeats,
+  onNextClick,
+  onPreviousClick,
+  scrollRightBoundary,
+  scrollX,
+}) => {
+  const styles = getStyles()
+
+  // *************** Context functions *********************
+  const { carouselCopy: copy } = useCopyStore()
+
+  const disabledLeft = Math.floor(scrollX) > scrollRightBoundary || currentBeatIndex === 0
+  const disabledRight = scrollX < 0 || numBeats - 1 === currentBeatIndex
+
+  const DISABLED_ICON_COLOR = '#BBBCBC'
+  const ICON_COLOR = clientColorScheme?.primary_300 ? clientColorScheme?.primary_300 : '#2D64EF'
+
+  return (
+    <Box className={styles}>
+      <IconButton
+        aria-label={copy.previous_insight_cta_aria}
+        disabled={disabledLeft}
+        onClick={onPreviousClick}
+      >
+        <ChevronLeft
+          style={{
+            color: disabledLeft ? DISABLED_ICON_COLOR : ICON_COLOR,
+          }}
+        />
+      </IconButton>
+      {Array.from({ length: numBeats }).map((_, i) => (
+        <div
+          className="mx-insights-micro-carousel-dots"
+          key={`carousel-button-${i}`}
+          style={{
+            backgroundColor: i === currentBeatIndex ? ICON_COLOR : DISABLED_ICON_COLOR,
+          }}
+        />
+      ))}
+      <IconButton
+        aria-label={copy.next_insight_cta_aria}
+        disabled={disabledRight}
+        onClick={onNextClick}
+      >
+        <ChevronRight
+          style={{
+            color: disabledRight ? DISABLED_ICON_COLOR : ICON_COLOR,
+          }}
+        />
+      </IconButton>
+    </Box>
+  )
+}
+
+const getStyles = () =>
+  css({
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'center',
+    width: '100%',
+    // we were using `gap` instead of margin, but it doesn't work in safari browsers older than iOS 14.1
+    '& button:first-child': {
+      marginRight: 8,
+    },
+    '& .mx-insights-micro-carousel-dots': {
+      borderRadius: '50%',
+      height: 8,
+      padding: 0,
+      width: 8,
+      // we were using `gap` instead of margin, but it doesn't work in safari browsers older than iOS 14.1
+      marginRight: 8,
+    },
+  })

package/src/microinsights/components/microBeatCarousel/MicroBeatCarousel.tsx

@@ -0,0 +1,207 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+import { css } from '@mxenabled/cssinjs'
+
+import { CarouselControls } from './CarouselControls'
+
+import { BeatCard, MicroWidgetProps, ViewMoreMicroCard } from '../../'
+
+import { buildDynamicCopy } from '../../../common'
+
+import { useCopyStore, useEvent } from '../../context/hooks'
+
+import type { Beat } from '../../../common'
+
+import { ANALYTICS_CLICK_EVENTS } from '../../constants/Analytics'
+import { MINIMUM_SWIPE_DISTANCE } from '../../constants/App'
+
+export interface MicroBeatCarouselProps extends MicroWidgetProps {
+  beats?: Beat[]
+  showCarouselControls?: boolean
+}
+
+const MicroBeatCarousel: React.FC<MicroBeatCarouselProps> = ({
+  beats = [],
+  clientColorScheme,
+  showCTAColocatedWithText,
+  heightOverrides,
+  onCardClick,
+  posthog,
+  showCarouselControls,
+  showIcon,
+  showWithMargin,
+  variant,
+  widthOverrides,
+}) => {
+  const styles = getStyles(heightOverrides, showWithMargin, widthOverrides)
+
+  // ************** Use Ref Hooks **************************
+  const ulRef = React.useRef<HTMLUListElement | null>(null)
+
+  // ************** Use States Hooks ***********************
+  const [scrollX, setScrollX] = React.useState<number>(0)
+  const [touchEnd, setTouchEnd] = React.useState<number | null>(null)
+  const [touchStart, setTouchStart] = React.useState<number | null>(null)
+
+  // *************** Context functions *********************
+  const { carouselCopy: copy } = useCopyStore()
+  const { onEvent } = useEvent()
+
+  // *************** Click handlers ************************
+  const handleNextClick = () => {
+    onEvent(ANALYTICS_CLICK_EVENTS.ON_CAROUSEL_FORWARD_CLICK)
+
+    if (ulRef.current) {
+      ulRef.current.scrollTo({
+        left:
+          // Adds the flex gap to the carousel ulRef's width
+          (ulRef.current.offsetWidth + 8) *
+          (Math.floor(scrollX / (ulRef.current.offsetWidth + 8)) + 1),
+        top: 0,
+        behavior: 'smooth',
+      })
+    }
+  }
+
+  const handlePreviousClick = () => {
+    onEvent(ANALYTICS_CLICK_EVENTS.ON_CAROUSEL_BACK_CLICK)
+
+    if (ulRef.current) {
+      ulRef.current.scrollTo({
+        left:
+          (ulRef.current.offsetWidth + 8) *
+          (Math.floor(scrollX / (ulRef.current.offsetWidth + 8)) - 1),
+        top: 0,
+        behavior: 'smooth',
+      })
+    }
+  }
+
+  const handleScroll = () => {
+    if (ulRef.current) {
+      setScrollX(ulRef.current.scrollLeft)
+    }
+  }
+
+  // *************** Mobile handlers ************************
+  const onTouchEnd = () => {
+    if (!touchStart || !touchEnd) return
+    const distance = touchStart - touchEnd
+
+    // swiping left
+    if (distance > MINIMUM_SWIPE_DISTANCE) {
+      onEvent(ANALYTICS_CLICK_EVENTS.ON_CAROUSEL_FORWARD_SWIPE)
+    } else {
+      // swiping right
+      onEvent(ANALYTICS_CLICK_EVENTS.ON_CAROUSEL_BACK_SWIPE)
+    }
+  }
+
+  const onTouchMove = (e: React.TouchEvent) => {
+    setTouchEnd(e.targetTouches[0].clientX)
+  }
+
+  const onTouchStart = (e: React.TouchEvent) => {
+    // otherwise the swipe is fired even with usual touch events
+    setTouchEnd(null)
+    setTouchStart(e.targetTouches[0].clientX)
+  }
+
+  // ************** Spreadable Props ***********************
+  const generalProps = {
+    clientColorScheme,
+    showCTAColocatedWithText,
+    heightOverrides,
+    showIcon,
+    variant,
+    widthOverrides,
+  }
+
+  const activeCardIndex =
+    ulRef.current && ulRef.current.offsetWidth ? Math.round(scrollX / ulRef.current.offsetWidth) : 0
+  const scrollBoundry = ulRef.current ? ulRef.current.scrollWidth - ulRef.current.offsetWidth : 0
+
+  return (
+    <div className={styles}>
+      <ul
+        className="mx-insights-micro-carousel-container"
+        onScroll={handleScroll}
+        onTouchEnd={onTouchEnd}
+        onTouchMove={onTouchMove}
+        onTouchStart={onTouchStart}
+        ref={ulRef}
+      >
+        {beats.map((beat: Beat, i) => {
+          return (
+            <BeatCard
+              ariaLabel={
+                buildDynamicCopy(
+                  copy.card_position_in_carousel_aria,
+                  i + 1,
+                  beats.length + 1,
+                ) as string
+              }
+              beat={beat}
+              index={i}
+              isActiveCard={i === activeCardIndex}
+              key={`${beat.guid} ${i}`}
+              onCardClick={onCardClick}
+              posthog={posthog}
+              {...generalProps}
+            />
+          )
+        })}
+        <ViewMoreMicroCard
+          isActiveCard={activeCardIndex === beats.length}
+          onCardClick={onCardClick}
+          {...generalProps}
+        />
+      </ul>
+      {showCarouselControls && (
+        <CarouselControls
+          clientColorScheme={clientColorScheme}
+          currentBeatIndex={activeCardIndex}
+          numBeats={beats.length + 1}
+          onNextClick={handleNextClick}
+          onPreviousClick={handlePreviousClick}
+          scrollRightBoundary={scrollBoundry}
+          scrollX={scrollX}
+        />
+      )}
+    </div>
+  )
+}
+
+export default observer(MicroBeatCarousel)
+
+const getStyles = (
+  heightOverrides?: number | string,
+  showWithMargin = true,
+  widthOverrides?: number | string,
+) =>
+  css({
+    alignItems: 'center',
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column',
+    height: heightOverrides,
+    width: widthOverrides ? widthOverrides : '100%',
+    '& .mx-insights-micro-carousel-container': {
+      alignItems: 'center',
+      display: 'flex',
+      gap: 8,
+      height: heightOverrides && '100%',
+      maxWidth: showWithMargin ? `calc(100% - 32px)` : '100%',
+      overflowX: 'auto',
+      overflowY: 'hidden',
+      scrollbarWidth: 'none',
+      '-ms-overflow-style': 'none',
+      '-webkit-overflow-scrolling': 'touch',
+      margin: 0,
+      padding: 0,
+      listStyleType: 'none',
+      '&::-webkit-scrollbar': {
+        display: 'none',
+      },
+    },
+  })

package/src/microinsights/components/microInsightCard/MicroInsightCard.tsx

@@ -0,0 +1,173 @@
+import React from 'react'
+import { css } from '@mxenabled/cssinjs'
+import { P } from '@kyper/mui'
+
+import Card from '@mui/material/Card'
+import CardActions from '@mui/material/CardActions'
+import CardHeader from '@mui/material/CardHeader'
+
+import { MicroWidgetProps, StyleProps } from '../../'
+
+interface MicroInsightProps extends MicroWidgetProps {
+  actionText?: string
+  backgroundColor?: string
+  description?: string
+  icon: React.ReactNode
+  fontColors?: fontColors
+  style?: StyleProps
+  title?: string
+}
+
+interface fontColors {
+  buttonColor?: string
+  headerColor?: string
+  iconColor?: string
+  textColor?: string
+}
+
+export const MicroInsightCard = React.forwardRef<HTMLDivElement, MicroInsightProps>(
+  function MicroInsight(
+    {
+      actionText,
+      ariaLabel,
+      backgroundColor,
+      showCTAColocatedWithText,
+      description,
+      heightOverrides,
+      icon,
+      isActiveCard,
+      onCardClick = () => {},
+      showIcon,
+      style = {},
+      fontColors = {},
+      title,
+      variant,
+      widthOverrides,
+    },
+    inViewRef,
+  ) {
+    // ************** Use States Hooks ***********************
+    const [lineClamp, setLineClamp] = React.useState(1)
+
+    // ************** Use Effects Hooks **********************
+    React.useEffect(() => {
+      if (widthOverrides && widthOverrides <= 325) setLineClamp(3)
+      if (widthOverrides && widthOverrides > 325) setLineClamp(2)
+    }, [widthOverrides])
+
+    // ************** Style constants ************************
+    // The not variant is necessary to overirde the automatic raised style that defaults when no variant is given.
+    const { cardStyle, linkTextStyle } = style
+    const cardStyles = !variant ? { border: 'none', boxShadow: 'none', ...cardStyle } : cardStyle
+    const styles = getStyles(
+      cardStyles,
+      showCTAColocatedWithText,
+      fontColors,
+      lineClamp,
+      linkTextStyle,
+      heightOverrides,
+    )
+
+    return (
+      <li
+        aria-hidden={!isActiveCard}
+        className={styles}
+        onClick={() => onCardClick()}
+        ref={inViewRef as React.RefObject<HTMLLIElement>}
+        role="button"
+        tabIndex={isActiveCard ? 0 : -1}
+      >
+        {/* This span is so that safari will read out the current card you are on when using a screenreader */}
+        {ariaLabel && <span aria-label={ariaLabel} style={{ visibility: 'hidden' }} />}
+        <Card className={`mx-micro-card`} sx={{ backgroundColor }} variant={variant}>
+          <CardHeader
+            avatar={showIcon && icon}
+            subheader={
+              <div className="mx-micro-content-container">
+                <P
+                  className="mx-micro-card-description"
+                  color={fontColors.textColor ? 'undefined' : 'text.primary'}
+                >
+                  {description && <span dangerouslySetInnerHTML={{ __html: description }} />}
+                </P>
+              </div>
+            }
+            title={title}
+          />
+          {!!actionText && (
+            <CardActions sx={{ paddingLeft: 0 }}>
+              <div className="mx-insights-micro-card-link-text">{actionText}</div>
+            </CardActions>
+          )}
+        </Card>
+      </li>
+    )
+  },
+)
+
+const getStyles = (
+  cardStyle: object,
+  showCTAColocatedWithText: any,
+  fontColors: fontColors,
+  lineClamp: number,
+  linkTextStyle?: object,
+  heightOverrides?: number | string,
+) =>
+  css({
+    height: '100%',
+    listStyleType: 'none',
+    userSelect: 'none',
+    minWidth: '100%',
+    '& .mx-micro-card': {
+      borderRadius: 8,
+      cursor: 'pointer',
+      display: 'flex',
+      flexDirection: 'column',
+      height: heightOverrides ? '100%' : 124,
+      justifyContent: !showCTAColocatedWithText && 'space-between',
+      width: '100%',
+      padding: 16,
+      ...cardStyle,
+    },
+    '& .mx-micro-content-container': {
+      height: '100%',
+    },
+    '& .mx-micro-card-description': {
+      letterSpacing: 0.48,
+      color: fontColors.textColor ? fontColors.textColor : '',
+      display: '-webkit-box',
+      fontSize: 13,
+      lineHeight: '20px',
+      overflow: 'hidden',
+      WebkitLineClamp: lineClamp,
+      WebkitBoxOrient: 'vertical',
+      wordWrap: 'break-word',
+    },
+    '& .mx-insights-micro-card-link-text': {
+      color: fontColors.buttonColor ? fontColors.buttonColor : '#2D64EF',
+      fontSize: 14,
+      fontWeight: 'bold',
+      marginLeft: 24,
+      ...linkTextStyle,
+    },
+    '& .MuiCardHeader-avatar': {
+      color: fontColors.iconColor,
+      marginBottom: 'auto',
+      marginRight: '8px !important',
+      paddingTop: 2,
+    },
+    '& .MuiCardHeader-root': {
+      padding: 0,
+    },
+    '& .MuiCardHeader-title': {
+      fontSize: 15,
+      fontWeight: 'bold',
+      color: fontColors.headerColor,
+      paddingBottom: 8,
+      WebkitLineClamp: 2,
+    },
+    '& .MuiCardContent-root': {
+      // Needed to override padding for standard and first and last child conditions
+      padding: `${0} !important`,
+    },
+  })