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

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

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

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

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

@@ -1,173 +0,0 @@
-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`,
-    },
-  })