@mx-cartographer/experiences 6.26.32 → 7.0.0-alpha.mega1

package/dist/analytics/index.es.js

@@ -0,0 +1,171 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import d from "react";
+import { observer as y } from "mobx-react-lite";
+import { SurveyQuestionType as S } from "posthog-js";
+import A from "@mui/material/Alert";
+import B from "@mui/material/Button";
+import a from "@mui/material/Stack";
+import _ from "@mui/material/styles/useTheme";
+import { Text as u, TextField as L } from "@mxenabled/mxui";
+import { L as W } from "../Loader-Dp1P2gNw.mjs";
+import { M as j } from "../MiniWidgetContainer-BoOp-A05.mjs";
+import { h as f, u as g, g as q, a as E } from "../hooks-30y_BLwc.mjs";
+import Q from "@mui/material/ToggleButton";
+import G from "@mui/material/ToggleButtonGroup";
+const O = () => {
+  const { question: s, response: o, setResponse: i } = f(), { analytics: r } = g(), t = _(), p = s, m = (h, n) => {
+    i(n);
+  };
+  return /* @__PURE__ */ l(d.Fragment, { children: [
+    /* @__PURE__ */ e(
+      G,
+      {
+        exclusive: !0,
+        onChange: m,
+        sx: {
+          display: "flex",
+          height: 44,
+          justifyContent: "space-between",
+          width: "100%"
+        },
+        value: o,
+        children: Array.from({ length: p.scale }, (h, n) => /* @__PURE__ */ e(
+          Q,
+          {
+            sx: {
+              borderColor: t.palette.border.light,
+              fontWeight: "bold",
+              width: `${100 / p.scale}%`,
+              "&:hover": {
+                backgroundColor: t.palette.background.paper
+              },
+              "&.Mui-selected, &.Mui-selected:hover": {
+                backgroundColor: t.palette.mode === "dark" ? "#0749B240" : t.palette.primary.lighter,
+                border: `1px solid ${t.palette.primary.main}`,
+                color: t.palette.primary.main
+              }
+            },
+            value: n + 1,
+            children: n + 1
+          },
+          n + 1
+        ))
+      }
+    ),
+    /* @__PURE__ */ l(
+      a,
+      {
+        sx: {
+          color: t.palette.secondary.light,
+          flexDirection: "row",
+          justifyContent: "space-between"
+        },
+        children: [
+          /* @__PURE__ */ e(u, { bold: !0, variant: "XSmall", children: r.strongly_disagree }),
+          /* @__PURE__ */ e(u, { bold: !0, variant: "XSmall", children: r.strongly_agree })
+        ]
+      }
+    )
+  ] });
+}, X = y(O), z = () => {
+  const { response: s, setResponse: o } = f(), { analytics: i } = g();
+  return /* @__PURE__ */ e(
+    L,
+    {
+      label: i.feedback,
+      multiline: !0,
+      onChange: (r) => {
+        o(r.target.value);
+      },
+      placeholder: i.improve_experience,
+      rows: 4,
+      value: s
+    }
+  );
+}, H = y(z), I = () => {
+  const { onEvent: s } = q(), o = _(), {
+    surveyId: i,
+    question: r,
+    isLastQuestion: t,
+    nextQuestion: p,
+    loadSurvey: m,
+    questionCount: h,
+    response: n,
+    responsePayload: k,
+    resetStore: b,
+    survey: w
+  } = f(), { analytics: c, common: M } = g(), { isCopyLoaded: T, isInitialized: v } = E(), [x, C] = d.useState(!1);
+  d.useEffect(() => {
+    v && m();
+  }, [v]), d.useEffect(() => {
+    s("survey shown", {
+      $survey_id: i
+    });
+  }, [w]);
+  const $ = () => {
+    s("survey dismissed", {
+      $survey_id: i
+    }), b(), C(!1);
+  }, F = () => {
+    p();
+  }, R = () => {
+    s("survey sent", k), b(), C(!0);
+  };
+  return T ? !r && !x ? null : /* @__PURE__ */ l(
+    j,
+    {
+      closeLabel: M.close_aria,
+      onClose: $,
+      sx: {
+        "& .MuiCardHeader-root": {
+          px: 24,
+          pb: 2
+        },
+        "& .MuiCardHeader-subheader": {
+          fontSize: 13
+        },
+        "& .MuiCardContent-root:last-child": {
+          pb: 0
+        }
+      },
+      title: c.your_feedback_matters,
+      children: [
+        /* @__PURE__ */ e(a, { sx: { pb: 8, px: 24 }, children: /* @__PURE__ */ e(u, { truncate: !1, variant: "subtitle2", children: c.let_us_know }) }),
+        r && /* @__PURE__ */ l(d.Fragment, { children: [
+          /* @__PURE__ */ l(a, { sx: { gap: 4, px: 24, py: 16 }, children: [
+            /* @__PURE__ */ e(u, { bold: !0, truncate: !1, children: r.question }),
+            /* @__PURE__ */ e(u, { variant: "XSmall", children: h })
+          ] }),
+          /* @__PURE__ */ l(a, { sx: { gap: 6, px: 24, pb: 8 }, children: [
+            r.type === S.Rating && /* @__PURE__ */ e(X, {}),
+            r.type === S.Open && /* @__PURE__ */ e(H, {})
+          ] }),
+          /* @__PURE__ */ e(a, { sx: { px: 24, py: 16 }, children: /* @__PURE__ */ e(
+            B,
+            {
+              disabled: !t && !n,
+              onClick: t ? R : F,
+              sx: {
+                borderColor: o.palette.border.light,
+                "&:hover": {
+                  // temp hardcoded dark mode color until design team decision
+                  backgroundColor: o.palette.mode === "dark" ? "#0749B240" : o.palette.primary.lighter,
+                  borderColor: o.palette.primary.main
+                }
+              },
+              variant: t && n ? "contained" : "outlined",
+              children: t ? c.submit_feedback : c.continue
+            }
+          ) })
+        ] }),
+        x && /* @__PURE__ */ l(d.Fragment, { children: [
+          /* @__PURE__ */ e(a, { sx: { px: 24, py: 24 }, children: /* @__PURE__ */ e(u, { bold: !0, truncate: !1, children: c.thank_you }) }),
+          /* @__PURE__ */ e(a, { sx: { px: 24, pb: 24 }, children: /* @__PURE__ */ e(A, { severity: "success", variant: "filled", children: c.feedback_sent_successfully }) })
+        ] })
+      ]
+    }
+  ) : /* @__PURE__ */ e(W, {});
+}, ie = y(I);
+export {
+  ie as SurveyMiniWidget
+};