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

package/dist/merchants/components/MerchantLookup/index.es.js

@@ -0,0 +1,77 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import c from "react";
+import { observer as _ } from "mobx-react-lite";
+import { useVirtualizer as I } from "@tanstack/react-virtual";
+import l from "@mui/material/Box";
+import z from "@mui/material/Divider";
+import E from "@mui/material/List";
+import G from "@mui/material/ListItem";
+import M from "@mui/material/ListItemAvatar";
+import T from "@mui/material/ListItemButton";
+import A from "@mui/material/ListItemText";
+import V from "@mui/material/Paper";
+import d from "@mui/material/Stack";
+import { MerchantLogo as k, Text as R } from "@mxenabled/mxui";
+import { useMerchantStore as v, useGlobalCopyStore as w, useGlobalUiStore as C } from "../../../common/context/hooks/index.es.js";
+import p from "../../../common/components/Loader/index.es.js";
+import N from "../../../common/components/SearchBox/index.es.js";
+const B = /^[ a-zA-ZÀ-ÿ0-9]+$/, H = 50, u = 65, P = ({
+  height: f = "calc(100dvh - 120px)",
+  onSelect: g
+}) => {
+  const { isLoading: m, merchants: o, loadMerchants: s } = v(), { common: a } = w(), { isCopyLoaded: x } = C(), [L, S] = c.useState("");
+  c.useEffect(() => {
+    s().finally();
+  }, [s]);
+  const b = (t) => {
+    g(t);
+  }, y = async (t) => {
+    (!t || B.test(t)) && t.length <= H && (S(t), await s(t));
+  }, h = c.useRef(null), i = I({
+    count: o.length,
+    getScrollElement: () => h.current,
+    estimateSize: () => u,
+    overscan: 5
+  });
+  return c.useEffect(() => i.measure(), [o]), x ? /* @__PURE__ */ r(d, { className: "mx-mrt-lookup", children: [
+    /* @__PURE__ */ e(
+      N,
+      {
+        ariaLabel: a.search_aria,
+        cancelAriaLabel: a.cancel_search_aria,
+        onChange: y,
+        placeholder: a.search_placeholder,
+        searchValue: L
+      }
+    ),
+    /* @__PURE__ */ e(V, { sx: { boxShadow: "none" }, children: /* @__PURE__ */ e(E, { children: /* @__PURE__ */ r(l, { height: f, overflow: "auto", ref: h, children: [
+      /* @__PURE__ */ r(l, { height: i.getTotalSize(), position: "relative", children: [
+        m && /* @__PURE__ */ e(p, { label: "Loading...", size: 32 }),
+        !m && i.getVirtualItems().length > 0 && i.getVirtualItems().map((t) => {
+          const n = o[t.index];
+          return /* @__PURE__ */ r(
+            l,
+            {
+              height: u,
+              position: "absolute",
+              sx: { transform: `translateY(${t.start}px)` },
+              width: "100%",
+              children: [
+                /* @__PURE__ */ e(G, { disableGutters: !0, disablePadding: !0, children: /* @__PURE__ */ r(T, { onClick: () => b(n.guid), children: [
+                  /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(k, { categoryGuid: "", merchantGuid: n.guid }) }),
+                  /* @__PURE__ */ e(A, { primary: n.name })
+                ] }) }),
+                /* @__PURE__ */ e(z, { sx: { ml: 24 } })
+              ]
+            },
+            n.guid
+          );
+        })
+      ] }),
+      !o.length && /* @__PURE__ */ e(d, { alignItems: "center", my: 24, children: /* @__PURE__ */ e(R, { bold: !0, color: "secondary", variant: "Small", children: a.search_zero_state }) })
+    ] }) }) })
+  ] }) : /* @__PURE__ */ e(p, {});
+}, oe = _(P);
+export {
+  oe as default
+};

package/dist/merchants/index.es.js

@@ -0,0 +1,6 @@
+import { default as e } from "./components/MerchantLookup/index.es.js";
+import { MerchantStore as a } from "./stores/MerchantStore/index.es.js";
+export {
+  e as MerchantLookup,
+  a as MerchantStore
+};

package/dist/merchants/stores/MerchantStore/index.es.js

@@ -0,0 +1,26 @@
+import { makeAutoObservable as i, runInAction as n } from "mobx";
+import { MerchantApi as s } from "../../api/MerchantApi/index.es.js";
+class c {
+  globalStore;
+  api = new s("/", "");
+  merchant = null;
+  merchants = [];
+  isLoading = !1;
+  constructor(t) {
+    this.globalStore = t, this.api = new s(t.endpoint, t.sessionToken), i(this);
+  }
+  loadMerchants = async (t = "") => {
+    this.isLoading = !0;
+    const a = await this.api.getMerchants([t]);
+    n(() => {
+      this.merchants = a, this.isLoading = !1;
+    });
+  };
+  loadMerchantByGuid = async (t) => {
+    const a = await this.api.getMerchantByGuid(t);
+    n(() => this.merchant = a);
+  };
+}
+export {
+  c as MerchantStore
+};

package/dist/microinsights/analytics/index.es.js

@@ -0,0 +1,10 @@
+import { ANALYTICS_EVENTS as c, ANALYTICS_PAGEVIEWS as e } from "../constants/Analytics/index.es.js";
+const A = async (t, r) => !r || !c[t] ? null : r.sendAnalyticEvent(c[t]).then((n) => n).catch((n) => {
+  throw n;
+}), l = async (t, r) => !r || !e[t] ? null : r.sendAnalyticsPageview(e[t]).then((n) => n).catch((n) => {
+  throw n;
+});
+export {
+  A as onAnalyticEvent,
+  l as onAnalyticPageView
+};

package/dist/microinsights/components/MicroWidgetContainer/index.es.js

@@ -0,0 +1,28 @@
+import { jsx as t } from "react/jsx-runtime";
+import a from "@mui/material/Box";
+import { useCopyStore as s } from "../../context/hooks/index.es.js";
+const u = ({
+  heightOverrides: o,
+  widthOverrides: r,
+  children: e
+}) => {
+  const { carouselCopy: i } = s();
+  return /* @__PURE__ */ t(
+    a,
+    {
+      "aria-label": i?.carousel_title,
+      "aria-roledescription": "carousel",
+      role: "group",
+      sx: {
+        boxSizing: "border-box",
+        height: o ? void 0 : "100%",
+        m: "0 auto",
+        width: r ? void 0 : "100%"
+      },
+      children: e
+    }
+  );
+};
+export {
+  u as default
+};

package/dist/microinsights/components/beatCard/BeatCard/index.es.js

@@ -0,0 +1,98 @@
+import { jsx as _ } from "react/jsx-runtime";
+import { useEffect as p } from "react";
+import { useInView as T } from "react-intersection-observer";
+import { MicroInsightCard as N } from "../../microInsightCard/MicroInsightCard/index.es.js";
+import { useCopyStore as k, useEvent as B, useInsightsMicroWidgetStore as M } from "../../../context/hooks/index.es.js";
+import { ON_VIEW_FIRST_TIME_EVENT as W, ON_VIEW_EVENT as v, ON_CLICK_EVENT as w } from "../../../constants/Analytics/index.es.js";
+import { VIEW_THRESHOLD as R } from "../../../constants/App/index.es.js";
+import { BeatIcon as s } from "../../beaticons/BeatIcon/index.es.js";
+const q = ({
+  ariaLabel: l,
+  backgroundColor: a,
+  beat: i,
+  clientColorScheme: n,
+  showCTAColocatedWithText: d = !0,
+  heightOverrides: f,
+  index: o,
+  isActiveCard: g,
+  onCardClick: c,
+  posthog: e,
+  showIcon: u,
+  variant: h,
+  widthOverrides: E
+}) => {
+  const { ref: I, inView: r } = T({
+    threshold: R
+  }), { cardsCopy: y } = k(), { onEvent: m } = B(), { updateBeat: C, updateOffer: O } = M();
+  p(() => {
+    r && (i.has_been_displayed ? m(v(i.template)) : (i.guid.startsWith("OFR") ? O({
+      ...i,
+      has_been_displayed: !0
+    }) : C({
+      ...i,
+      has_been_displayed: !0
+    }), m(W(i.template))));
+  }, [r]), p(() => {
+    if (r && i)
+      if (i.template === "MarketingOffer") {
+        const t = i;
+        e?.capture("viewed_messaging_insight", {
+          template: i.template,
+          campaign_guid: t.campaign_guid,
+          campaign_name: t.pulse_campaign_name
+        });
+      } else
+        e?.capture("viewed_insight", {
+          beat_guid: i.guid,
+          template: i.template,
+          position: o
+        });
+  }, [i, o, r]);
+  const V = () => {
+    if (c && c(i), m(w(i.template)), i.template === "MarketingOffer") {
+      const t = i;
+      e?.capture("clicked_messaging_insight", {
+        template: i.template,
+        campaign_guid: t.campaign_guid,
+        campaign_name: t.pulse_campaign_name
+      });
+    } else
+      e?.capture("clicked_insight", {
+        beat_guid: i.guid,
+        template: i.template,
+        position: o
+      });
+  };
+  return /* @__PURE__ */ _(
+    N,
+    {
+      actionText: i.micro_call_to_action || y.micro_card_cta,
+      ariaLabel: l,
+      backgroundColor: a,
+      description: i?.html_micro_description && i?.html_micro_description.length > 0 ? i.html_micro_description : i.html_description,
+      fontColors: { buttonColor: n?.primary_300 },
+      heightOverrides: f,
+      icon: s && /* @__PURE__ */ _(
+        s,
+        {
+          beat: i,
+          clientColorScheme: n,
+          color: i?.icon_color,
+          type: i?.icon_type
+        }
+      ),
+      isActiveCard: g,
+      onCardClick: V,
+      posthog: e,
+      ref: I,
+      showCTAColocatedWithText: d,
+      showIcon: u,
+      title: i.micro_title && i.micro_title.length > 0 ? i.micro_title : i.title,
+      variant: h,
+      widthOverrides: E
+    }
+  );
+};
+export {
+  q as BeatCard
+};

package/dist/microinsights/components/beaticons/BeatCategoryIcon/index.es.js

@@ -0,0 +1,13 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useState as i, useEffect as g } from "react";
+import { CategoryIcon as s } from "@mxenabled/mxui";
+import { CategoryGuids as m } from "../../../../common/constants/Category/index.es.js";
+const d = ({ beat: r }) => {
+  const [t, o] = i(m.UNCATEGORIZED);
+  return g(() => {
+    r.primary_category_guid ? o(r.primary_category_guid) : r.category_guids?.length && o(r.category_guids[0]);
+  }, []), /* @__PURE__ */ e(s, { categoryGuid: t, size: 16, sx: { minWidth: 16 } });
+};
+export {
+  d as BeatCategoryIcon
+};

package/dist/microinsights/components/beaticons/BeatIcon/index.es.js

@@ -0,0 +1,22 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Icon as n } from "@mxenabled/mxui";
+import a from "@mui/material/styles/useTheme";
+import { BeatCategoryIcon as p } from "../BeatCategoryIcon/index.es.js";
+import u from "../BeatMerchantLogo/index.es.js";
+import { MonthlySpendComparisonIcon as c } from "../MonthlySpendComparisonIcon/index.es.js";
+const B = ({ beat: r, clientColorScheme: i, color: t, type: m }) => {
+  const e = a(), f = i?.primary_300 ? i.primary_300 : e.palette.primary.main;
+  return m === 0 ? /* @__PURE__ */ o(n, { fill: !0, name: "error", sx: { color: t || f } }) : m === 1 && r ? /* @__PURE__ */ o(p, { beat: r }) : m === 2 && r ? /* @__PURE__ */ o(u, { beat: r }) : m === 3 && r ? /* @__PURE__ */ o(c, { beat: r }) : m === 5 && r ? /* @__PURE__ */ o(n, { name: "campaign" }) : /* @__PURE__ */ o(
+    n,
+    {
+      fill: !0,
+      name: "info",
+      sx: {
+        color: f
+      }
+    }
+  );
+};
+export {
+  B as BeatIcon
+};

package/dist/microinsights/components/beaticons/BeatMerchantLogo/index.es.js

@@ -0,0 +1,24 @@
+import { jsx as e } from "react/jsx-runtime";
+import { observer as s } from "mobx-react-lite";
+import { css as c } from "@mxenabled/cssinjs";
+import { useTokens as i, MerchantLogo as a } from "@mxenabled/mxui";
+const n = ({ beat: o }) => {
+  const r = i(), t = g(r);
+  return /* @__PURE__ */ e(
+    a,
+    {
+      categoryGuid: o.primary_category_guid || o.category_guids && o.category_guids[0] || "",
+      className: t,
+      merchantGuid: o.primary_merchant_guid || o.merchant_guids[0],
+      size: 16
+    }
+  );
+}, g = (o) => c({
+  marginTop: o.Spacing.XTiny,
+  "& .kyper-categoryicon": {
+    display: "flex"
+  }
+}), d = s(n);
+export {
+  d as default
+};

package/dist/microinsights/components/beaticons/ChartFilledIcon/index.es.js

@@ -0,0 +1,31 @@
+import { jsx as t } from "react/jsx-runtime";
+const h = ({
+  color: e = "currentColor",
+  height: C,
+  size: r = 16,
+  styles: l,
+  viewBox: o = "0 0 16 16",
+  width: s
+}) => /* @__PURE__ */ t(
+  "svg",
+  {
+    "aria-hidden": !0,
+    className: "kyper-icon",
+    focusable: !1,
+    height: C || r,
+    style: l,
+    viewBox: o,
+    width: s || r,
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ t(
+      "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: e
+      }
+    )
+  }
+);
+export {
+  h as ChartFilledIcon
+};

package/dist/microinsights/components/beaticons/MonthlySpendComparisonIcon/index.es.js

@@ -0,0 +1,14 @@
+import { jsx as s } from "react/jsx-runtime";
+import { useTokens as l, Icon as a } from "@mxenabled/mxui";
+import { buildDataSeries as u } from "../../../utils/DataSeries/index.es.js";
+const i = (t, o) => {
+  const r = u(t), c = r.length / 2, n = r.slice(0, c), e = r.slice(c);
+  return !n.length || !e.length ? o.Color.Primary300 : n[0].amount > e[0].amount ? o.Color.Error300 : n[0].amount < e[0].amount ? o.Color.Success300 : o.Color.Primary300;
+}, f = ({ beat: t }) => {
+  const o = l(), r = i(t.data_series, o);
+  return /* @__PURE__ */ s(a, { name: "bar_chart", sx: { color: r } });
+};
+export {
+  f as MonthlySpendComparisonIcon,
+  i as getIconColor
+};