@mx-cartographer/experiences 6.26.18-alpha.mega1 → 6.26.18-alpha.mega3

package/dist/microinsights/components/carouselheader/CarouselHeader/index.es.js

@@ -0,0 +1,82 @@
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { observer as p } from "mobx-react-lite";
+import m from "@mui/material/Link";
+import f from "@mui/material/Stack";
+import a from "@mui/material/Typography";
+import { ChevronRight as d } from "@mxenabled/mx-icons";
+import { useCopyStore as _, useEvent as u } from "../../../context/hooks/index.es.js";
+import { ANALYTICS_CLICK_EVENTS as h } from "../../../constants/Analytics/index.es.js";
+import x from "../../../../common/components/Loader/index.es.js";
+const C = ({
+  clientColorScheme: i,
+  onCardClick: l,
+  posthog: s,
+  widthOverrides: o
+}) => {
+  const { carouselCopy: r } = _(), { onEvent: n } = u(), c = () => {
+    n && (n(h.ON_VIEW_MORE_CLICKED), l(), s?.capture("clicked_view_more"));
+  };
+  return r ? /* @__PURE__ */ t(
+    f,
+    {
+      alignItems: "center",
+      direction: "row",
+      justifyContent: "space-between",
+      spacing: 2,
+      sx: {
+        padding: o ? 0 : 16,
+        width: o || void 0
+      },
+      children: [
+        /* @__PURE__ */ e(
+          a,
+          {
+            sx: {
+              fontSize: 18,
+              fontWeight: 700,
+              lineHeight: "24px"
+            },
+            variant: "h3",
+            children: r.carousel_title
+          }
+        ),
+        /* @__PURE__ */ t(
+          m,
+          {
+            onClick: c,
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              "&.MuiLink-underlineNone": {
+                textDecoration: "none",
+                ":hover": {
+                  borderBottom: "none"
+                }
+              }
+            },
+            underline: "none",
+            children: [
+              /* @__PURE__ */ e(
+                a,
+                {
+                  sx: {
+                    color: i?.primary_300,
+                    fontSize: 15,
+                    fontWeight: 600,
+                    lineHeight: "20px"
+                  },
+                  variant: "body1",
+                  children: r.view_all_insights_in_full_feed_cta_aria
+                }
+              ),
+              /* @__PURE__ */ e(d, { sx: { color: i?.primary_300, ml: "8px" } })
+            ]
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ e(x, {});
+}, w = p(C);
+export {
+  w as default
+};

package/dist/microinsights/components/insightsmicrowidget/InsightsMicroWidget/index.es.js

@@ -0,0 +1,105 @@
+import { jsxs as v, jsx as i } from "react/jsx-runtime";
+import a, { useState as A } from "react";
+import { observer as $ } from "mobx-react-lite";
+import b from "@mui/material/CssBaseline";
+import { useTheme as q, ThemeProvider as y } from "@mui/material/styles";
+import { InsightsMicroWidgetDataProvider as J } from "../../../context/InsightsMicroWidgetDataProvider/index.es.js";
+import K from "../../carouselheader/CarouselHeader/index.es.js";
+import Q from "../../MicroWidgetContainer/index.es.js";
+import V from "../../microBeatCarousel/MicroBeatCarousel/index.es.js";
+import { NoRelevantInsightsCard as Y } from "../../noRelevantInsightsCard/NoRelevantInsightsCard/index.es.js";
+import { ZeroStateCard as _ } from "../../zeroStateCard/ZeroStateCard/index.es.js";
+import B from "../../spinner/Spinner/index.es.js";
+import { AppStore as U } from "../../../stores/AppStore/index.es.js";
+import { useCombineEvents as k, useCombinePageviews as F } from "../../../../common/hooks/useCombineEvents/index.es.js";
+const e = new U(), O = ({
+  allowSingleCardPeeking: P,
+  areBeatsLoading: n,
+  beats: t = [],
+  // This also determines the length of the carousel controls (beat.length + 1)
+  clientColorScheme: m,
+  // Allows certain icons, view all and read more button to reflect the clients color scheme. Currently only supports primary_300
+  showCTAColocatedWithText: R = !0,
+  endpoint: c = "/",
+  heightOverrides: p,
+  logOutUser: l,
+  onCardClick: d = () => {
+  },
+  onEvent: S = () => {
+  },
+  onPageview: w = () => {
+  },
+  posthog: g,
+  shouldApplyNewAnimation: C = !1,
+  showBorder: D = !0,
+  showCarouselControls: M,
+  showHeader: T,
+  showIcon: W,
+  showWithMargin: x = !0,
+  token: u = "",
+  useDarkMode: G,
+  userHasFullInsightFeedBeats: z,
+  variant: E,
+  visibleCardsCount: H = 1,
+  widthOverrides: f
+}) => {
+  const L = q(), [N, r] = A("STANDARD"), [s, X] = A(!1), j = k([S], e), Z = F([w], e);
+  a.useEffect(() => {
+    e.isInitialized || e.initialize(c, u, l);
+  }, [c, u, l, e.isInitialized]), a.useEffect(() => {
+    const o = window.innerHeight;
+    o < 180 ? r("STANDARD") : o >= 180 && o < 200 ? r("LARGE") : o >= 200 && o < 248 ? r("XLARGE") : o >= 248 && r("XXLARGE");
+  }, [window.innerHeight]), a.useEffect(() => {
+    X(!n && e.isInitialized);
+  }, [n, e.isInitialized]);
+  const I = {
+    showCTAColocatedWithText: R,
+    heightOverrides: p,
+    onCardClick: d,
+    posthog: g,
+    showIcon: W,
+    showWithMargin: x,
+    useDarkMode: G,
+    widthOverrides: f
+  }, h = {
+    carouselSize: N,
+    variant: E,
+    ...I
+  };
+  return (
+    // The Theme provider must wrap the component so that the styles don't break when imported into other applications.
+    /* @__PURE__ */ v(y, { theme: L, children: [
+      /* @__PURE__ */ i(b, {}),
+      /* @__PURE__ */ i(J, { onEvent: j, onPageview: Z, store: e, children: /* @__PURE__ */ v(Q, { heightOverrides: p, widthOverrides: f, children: [
+        (n || !e.isInitialized) && /* @__PURE__ */ i(B, {}),
+        s && T && /* @__PURE__ */ i(
+          K,
+          {
+            clientColorScheme: m,
+            onCardClick: d,
+            posthog: g,
+            widthOverrides: f
+          }
+        ),
+        s && !!t.length && /* @__PURE__ */ i(
+          V,
+          {
+            allowSingleCardPeeking: P,
+            beats: t,
+            clientColorScheme: m,
+            shouldApplyNewAnimation: C,
+            showCarouselControls: M,
+            variant: D ? E : void 0,
+            visibleCardsCount: H,
+            ...I
+          }
+        ),
+        s && !t.length && z && /* @__PURE__ */ i(Y, { clientColorScheme: m, ...h }),
+        s && !t.length && !z && /* @__PURE__ */ i(_, { ...h })
+      ] }) })
+    ] })
+  );
+}, ge = $(O);
+export {
+  ge as default
+};

package/dist/microinsights/components/microBeatCarousel/CarouselControls/index.es.js

@@ -0,0 +1,101 @@
+import { jsxs as _, jsx as r } from "react/jsx-runtime";
+import y from "@mui/material/Box";
+import x from "@mui/material/Stack";
+import p from "@mui/material/IconButton";
+import { useTheme as O } from "@mui/material/styles";
+import { ChevronLeft as R, ChevronRight as L } from "@mxenabled/mx-icons";
+import { useCopyStore as k } from "../../../context/hooks/index.es.js";
+const E = ({
+  clientColorScheme: f,
+  currentBeatIndex: o,
+  numBeats: a,
+  onNextClick: b,
+  onPreviousClick: C,
+  scrollRightBoundary: g,
+  scrollX: l,
+  shouldApplyNewAnimation: n = !1,
+  visibleCardsCount: u = 1
+}) => {
+  const c = O(), { carouselCopy: m } = k(), t = Math.floor(l) > g || o - u + 1 === 0, i = l < 0 || a - 1 === o, e = c.palette.grey[500], s = f?.primary_300 ?? c.palette.primary.main;
+  return /* @__PURE__ */ _(
+    x,
+    {
+      direction: "row",
+      sx: {
+        alignItems: "center",
+        justifyContent: "center",
+        pt: 4,
+        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": {
+          mr: 8
+        }
+      },
+      children: [
+        /* @__PURE__ */ r(
+          p,
+          {
+            "aria-disabled": t,
+            "aria-label": m.previous_insight_cta_aria,
+            disabled: t,
+            onClick: C,
+            children: /* @__PURE__ */ r(
+              R,
+              {
+                style: {
+                  color: t ? e : s
+                }
+              }
+            )
+          }
+        ),
+        Array.from({ length: a }).map((v, d) => {
+          const h = d === o;
+          return /* @__PURE__ */ r(
+            y,
+            {
+              className: "mx-insights-micro-carousel-dots",
+              sx: {
+                bgcolor: h ? s : e,
+                height: 8,
+                mr: 8,
+                // existing comment from meganthan "we were using `gap` instead of margin, but it doesn't work in safari browsers older than iOS 14.1"
+                ...n ? {
+                  borderRadius: "4px",
+                  transformOrigin: "center",
+                  transition: "all 0.5s ease-out",
+                  willChange: "width, background-color"
+                } : {
+                  borderRadius: "50%",
+                  p: 0
+                },
+                width: h && n ? 24 : 8
+              }
+            },
+            `carousel-button-${d}`
+          );
+        }),
+        /* @__PURE__ */ r(
+          p,
+          {
+            "aria-disabled": i,
+            "aria-label": m.next_insight_cta_aria,
+            disabled: i,
+            onClick: b,
+            children: /* @__PURE__ */ r(
+              L,
+              {
+                style: {
+                  color: i ? e : s
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  E as CarouselControls
+};

package/dist/microinsights/components/microBeatCarousel/MicroBeatCarousel/index.es.js

@@ -0,0 +1,187 @@
+import { jsxs as L, jsx as A } from "react/jsx-runtime";
+import r from "react";
+import { observer as J } from "mobx-react-lite";
+import N from "@mui/material/Stack";
+import { CarouselControls as Q } from "../CarouselControls/index.es.js";
+import { BeatCard as Z } from "../../beatCard/BeatCard/index.es.js";
+import tt from "../../viewMoreMicroCard/ViewMoreMicroCard/index.es.js";
+import { buildDynamicCopy as ot } from "../../../../common/utils/Localization/index.es.js";
+import { useCopyStore as et, useEvent as rt } from "../../../context/hooks/index.es.js";
+import { ANALYTICS_CLICK_EVENTS as m } from "../../../constants/Analytics/index.es.js";
+import { MINIMUM_SWIPE_DISTANCE as nt } from "../../../constants/App/index.es.js";
+const it = ({
+  allowSingleCardPeeking: p = !1,
+  beats: l = [],
+  clientColorScheme: E,
+  showCTAColocatedWithText: v,
+  heightOverrides: W,
+  onCardClick: g,
+  posthog: M,
+  shouldApplyNewAnimation: B = !1,
+  showCarouselControls: O,
+  showIcon: k,
+  showWithMargin: D = !0,
+  variant: P,
+  widthOverrides: C,
+  visibleCardsCount: n = 1
+  // Default to 1 card visible
+}) => {
+  const o = r.useRef(null), a = r.useRef(null), [d, $] = r.useState(0), [y, w] = r.useState(null), [I, z] = r.useState(null), [i, _] = r.useState(null), [K, U] = r.useState(B), { carouselCopy: T } = et(), { onEvent: u } = rt();
+  r.useEffect(() => {
+    if (o.current && !p) {
+      const t = o.current.offsetWidth, e = 8;
+      let c;
+      if (n > 1) {
+        const h = (t - (n - 1) * e) / n / 3;
+        c = (t - h - (n - 1) * e) / n;
+      } else
+        c = t;
+      _(c);
+    }
+  }, [n, o.current?.offsetWidth]), r.useEffect(() => {
+    const t = a.current?.offsetWidth;
+    if (typeof t == "number" && p) {
+      const e = (s) => {
+        U(!0);
+        const f = [
+          { maxWidth: 375, cardWidth: 268 },
+          { maxWidth: 444, cardWidth: 300 },
+          { maxWidth: 599, cardWidth: 350 },
+          { maxWidth: 749, cardWidth: 450 },
+          { maxWidth: 900, cardWidth: 600 }
+        ].find((x) => s <= x.maxWidth);
+        return f ? f.cardWidth : 750;
+      };
+      _(e(t));
+      const c = () => {
+        const s = a.current?.offsetWidth;
+        typeof s == "number" && _(e(s));
+      };
+      return window.addEventListener("resize", c), () => {
+        window.removeEventListener("resize", c);
+      };
+    }
+  }, [p, a]);
+  const X = () => {
+    u(m.ON_CAROUSEL_FORWARD_CLICK), o.current && i && o.current.scrollTo({
+      left: d + i + 8,
+      top: 0,
+      behavior: "smooth"
+    });
+  }, b = () => {
+    u(m.ON_CAROUSEL_BACK_CLICK), o.current && i && o.current.scrollTo({
+      left: Math.max(0, d - (i + 8)),
+      top: 0,
+      behavior: "smooth"
+    });
+  }, j = () => {
+    o.current && $(o.current.scrollLeft);
+  }, F = () => {
+    if (!I || !y) return;
+    I - y > nt ? u(m.ON_CAROUSEL_FORWARD_SWIPE) : u(m.ON_CAROUSEL_BACK_SWIPE);
+  }, V = (t) => {
+    w(t.targetTouches[0].clientX);
+  }, Y = (t) => {
+    w(null), z(t.targetTouches[0].clientX);
+  }, R = {
+    clientColorScheme: E,
+    showCTAColocatedWithText: v,
+    heightOverrides: W,
+    posthog: M,
+    showIcon: k,
+    variant: P
+  }, S = i ? Math.round(d / (i + 8)) : 0, q = o.current ? o.current.scrollWidth - o.current.offsetWidth : 0;
+  return /* @__PURE__ */ L(
+    N,
+    {
+      "aria-label": T.carousel_title,
+      "aria-roledescription": "carousel",
+      ref: a,
+      role: "group/region",
+      sx: {
+        alignItems: "center",
+        boxSizing: "border-box",
+        height: W,
+        width: C || "100%"
+      },
+      children: [
+        /* @__PURE__ */ L(
+          N,
+          {
+            direction: "row",
+            onScroll: j,
+            onTouchEnd: F,
+            onTouchMove: V,
+            onTouchStart: Y,
+            ref: o,
+            sx: {
+              alignItems: "center",
+              height: W && "100%",
+              gap: 8,
+              listStyleType: "none",
+              m: 0,
+              maxWidth: D ? "calc(100% - 32px)" : "100%",
+              overflowX: "auto",
+              overflowY: "hidden",
+              p: 0,
+              scrollbarWidth: "none",
+              "-ms-overflow-style": "none",
+              "-webkit-overflow-scrolling": "touch",
+              "&::-webkit-scrollbar": {
+                display: "none"
+              }
+            },
+            children: [
+              l.map((t, e) => {
+                const c = e + 1, s = l.length + 1, h = ot(
+                  T.card_position_in_carousel_aria,
+                  c.toString(),
+                  s.toString()
+                ), f = t.micro_title && t.micro_title.length > 0, x = t.micro_description && t.micro_description.length > 0, G = f ? t.micro_title : t.title, H = x ? t.micro_description : t.description;
+                return /* @__PURE__ */ A(
+                  Z,
+                  {
+                    ariaLabel: `${h}: ${G}, ${H}`,
+                    beat: t,
+                    index: e,
+                    isActiveCard: e === S,
+                    onCardClick: g,
+                    widthOverrides: i || void 0,
+                    ...R
+                  },
+                  `${t.guid} ${e}`
+                );
+              }),
+              /* @__PURE__ */ A(
+                tt,
+                {
+                  isActiveCard: S === l.length,
+                  onCardClick: g,
+                  widthOverrides: i || void 0,
+                  ...R
+                }
+              )
+            ]
+          }
+        ),
+        O && /* @__PURE__ */ A(
+          Q,
+          {
+            clientColorScheme: E,
+            currentBeatIndex: S + n - 1,
+            numBeats: l.length + 1,
+            onNextClick: X,
+            onPreviousClick: b,
+            scrollRightBoundary: q,
+            scrollX: d,
+            shouldApplyNewAnimation: K,
+            visibleCardsCount: n
+          }
+        )
+      ]
+    }
+  );
+}, _t = J(it);
+export {
+  _t as default
+};

package/dist/microinsights/components/microInsightCard/MicroInsightCard/index.es.js

@@ -0,0 +1,152 @@
+import { jsx as r, jsxs as v } from "react/jsx-runtime";
+import x from "react";
+import { P as B } from "@mxenabled/mxui";
+import i from "@mui/material/Box";
+import H from "@mui/material/Card";
+import M from "@mui/material/CardActions";
+import z from "@mui/material/CardContent";
+import j from "@mui/material/CardHeader";
+import D from "@mui/material/Stack";
+const E = x.forwardRef(
+  function({
+    actionText: n,
+    ariaLabel: a,
+    backgroundColor: b,
+    description: d,
+    heightOverrides: f,
+    icon: u,
+    isActiveCard: t,
+    isZeroState: o,
+    onCardClick: g = () => {
+    },
+    showIcon: y,
+    style: S = {},
+    fontColors: e = {},
+    title: C,
+    variant: l,
+    widthOverrides: p
+  }, c) {
+    const [k, s] = x.useState(!1), { cardStyle: m, linkTextStyle: w } = S, I = l ? m : { border: "none", boxShadow: "none", ...m }, h = /* @__PURE__ */ r(
+      B,
+      {
+        className: "mx-micro-card-description",
+        color: e.textColor ? "undefined" : "text.primary",
+        sx: {
+          display: "-webkit-box",
+          fontSize: 13,
+          letterSpacing: 0.48,
+          lineHeight: "20px",
+          overflow: "hidden",
+          pl: o ? 0 : 28,
+          pr: o ? 0 : 8,
+          WebkitBoxOrient: "vertical",
+          WebkitLineClamp: 2,
+          wordWrap: "break-word"
+        },
+        children: d && /* @__PURE__ */ r("span", { dangerouslySetInnerHTML: { __html: d } })
+      }
+    );
+    return /* @__PURE__ */ r(
+      i,
+      {
+        "aria-hidden": !t,
+        "aria-label": a,
+        "aria-labelledby": "divButton",
+        "aria-roledescription": "slide",
+        ref: c,
+        role: "group",
+        sx: {
+          height: "100%",
+          minWidth: p ? `${p}px` : "100%"
+        },
+        children: /* @__PURE__ */ r(
+          i,
+          {
+            "aria-hidden": !t,
+            "aria-label": a,
+            id: "divButton",
+            onClick: () => g(),
+            onKeyDown: () => s(!1),
+            onKeyUp: () => s(!0),
+            ref: c,
+            role: "button",
+            sx: {
+              border: k ? "1px solid rgba(82, 138, 224, 0.8)" : void 0,
+              borderRadius: "8px",
+              height: "100%"
+            },
+            tabIndex: t ? 0 : -1,
+            children: /* @__PURE__ */ r(
+              H,
+              {
+                "aria-roledescription": "slide",
+                className: "mx-micro-card",
+                role: "group",
+                sx: {
+                  backgroundColor: b,
+                  cursor: "pointer",
+                  height: f ? "100%" : 124,
+                  p: 16,
+                  ...I,
+                  "& .MuiCardHeader-avatar": {
+                    color: e.iconColor,
+                    mr: "8px"
+                  }
+                },
+                variant: l,
+                children: /* @__PURE__ */ v(
+                  D,
+                  {
+                    sx: {
+                      alignItems: "space-between",
+                      height: "100%"
+                    },
+                    children: [
+                      /* @__PURE__ */ r(
+                        j,
+                        {
+                          avatar: y && u,
+                          subheader: o && h,
+                          sx: { color: e.headerColor, p: 0 },
+                          title: C,
+                          titleTypographyProps: { fontSize: 15, fontWeight: 600, variant: "h3" }
+                        }
+                      ),
+                      /* @__PURE__ */ r(z, { sx: { p: 0 }, children: !o && h }),
+                      !!n && /* @__PURE__ */ r(
+                        M,
+                        {
+                          sx: {
+                            mt: "auto",
+                            p: 0
+                          },
+                          children: /* @__PURE__ */ r(
+                            i,
+                            {
+                              sx: (W) => ({
+                                color: e.buttonColor ? e.buttonColor : W.palette.primary.main,
+                                // TODO: Per Cameron the theme package in @mxenabled/mxui will be getting a big update and this will be theme.palette.primary_main
+                                fontSize: 14,
+                                fontWeight: "bold",
+                                px: 28,
+                                ...w
+                              }),
+                              children: n
+                            }
+                          )
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+export {
+  E as MicroInsightCard
+};

package/dist/microinsights/components/noRelevantInsightsCard/NoRelevantInsightsCard/index.es.js

@@ -0,0 +1,67 @@
+import { jsx as r } from "react/jsx-runtime";
+import S from "react";
+import { observer as d } from "mobx-react-lite";
+import { MicroInsightCard as I } from "../../microInsightCard/MicroInsightCard/index.es.js";
+import { ZeroStateIcon as f } from "../../beaticons/ZeroStateIcon/index.es.js";
+import { useCopyStore as N, useEvent as T, usePageview as h } from "../../../context/hooks/index.es.js";
+import { SUPPORTED_CAROUSEL_HEIGHTS as u } from "../../../constants/App/index.es.js";
+import { ANALYTICS_PAGE_NAMES as v, ANALYTICS_CLICK_EVENTS as A } from "../../../constants/Analytics/index.es.js";
+const g = ({
+  ariaLabel: i,
+  carouselSize: n,
+  clientColorScheme: a,
+  heightOverrides: c,
+  onCardClick: e,
+  posthog: o,
+  showIcon: s,
+  showWithMargin: _,
+  variant: l,
+  widthOverrides: m
+}) => {
+  const { cardsCopy: t } = N(), { onEvent: p } = T(), { onPageview: C } = h();
+  S.useEffect(() => {
+    C(v.MICRO_WIDGET_CAROUSEL_NO_RELEVANT_INSIGHTS);
+  }, []);
+  const E = () => {
+    e && e(), p(A.ON_NO_RELEVANT_INSIGHTS_CLICKED), o?.capture("clicked_insight", {
+      template: "no_relevant_insights"
+    });
+  };
+  return /* @__PURE__ */ r(
+    I,
+    {
+      actionText: t.micro_card_cta,
+      ariaLabel: i,
+      description: t.no_relevant_insights_card_description,
+      fontColors: { buttonColor: a?.primary_300 },
+      heightOverrides: c,
+      icon: /* @__PURE__ */ r(f, {}),
+      isZeroState: !0,
+      onCardClick: E,
+      posthog: o,
+      showIcon: s,
+      style: {
+        cardStyle: {
+          card: {
+            height: `calc(${u[n]}px - 44px)`,
+            m: "0 auto",
+            width: _ ? "calc(100% - 32px)" : "100%"
+          },
+          description: {
+            WebkitLineClamp: 4
+          }
+        },
+        linkTextStyle: {
+          ml: 48
+        }
+      },
+      title: t.no_relevant_insights_card_title,
+      variant: l,
+      widthOverrides: m
+    }
+  );
+}, H = d(g);
+export {
+  g as NoRelevantInsightsCard,
+  H as default
+};