@feedmepos/mf-connect 0.0.3-beta.0

package/dist/Segment-quTtfnsL.js

@@ -0,0 +1,392 @@
+import { defineComponent as L, ref as p, onMounted as N, resolveComponent as F, openBlock as g, createElementBlock as b, createElementVNode as r, toDisplayString as Y, unref as a, createVNode as m, createCommentVNode as E, computed as T, createBlock as A, isRef as U, createSlots as H, withCtx as $, Fragment as B, reactive as j, watch as O, onBeforeMount as K, h as x } from "vue";
+import { p as Z, u as G } from "./loading-Dy-VtOFu.js";
+import { components as z } from "@feedmepos/ui-library";
+import { l as J } from "./lodash-BnddClG8.js";
+import { _ as q, Z as Q } from "./ZodTextField.vue_vue_type_script_setup_true_lang-3LlSDiq0.js";
+import { F as P } from "./index-y3taWZm8.js";
+import { a as W } from "./index-Ix0P1Q7X.js";
+import { u as X } from "./app-DRUbn5GO.js";
+import { R as ee } from "./rule-builder-C2aRGLCt.js";
+import { _ as te } from "./RuleGroup.vue_vue_type_script_setup_true_lang-Ml889DRQ.js";
+import { h as k } from "./moment-BWErdI6_.js";
+import { s as w } from "./membership-28vBGpTw.js";
+import { o as ae } from "./objectId-dwaoBfJX.js";
+import { m as oe } from "./index-BTanTa5F.js";
+const se = W.extend({
+  _id: P.optional(),
+  business: P.optional()
+}), ne = { class: "space-y-16 pr-12" }, le = { class: "fm-typo-en-title-md-800" }, ie = { class: "flex space-x-8" }, re = { class: "fm-typo-en-title-md-800 text-fm-color-primary" }, ce = { class: "text-fm-color-typo-secondary" }, de = /* @__PURE__ */ r("div", null, "contacts in your segment", -1), me = {
+  key: 0,
+  class: "w-full flex flex-col gap-16 items-center pt-16"
+}, ue = /* @__PURE__ */ r("div", { class: "fm-typo-en-body-lg-600" }, "No data found", -1), pe = /* @__PURE__ */ r("div", { class: "fm-typo-en-body-sm-400 text-fm-color-typo-secondary" }, " No data to show at the current moment. ", -1), fe = [
+  ue,
+  pe
+], ge = /* @__PURE__ */ L({
+  __name: "ReviewSegment",
+  props: {
+    title: {},
+    segment: {}
+  },
+  setup(M) {
+    const u = M, y = [
+      {
+        header: "Name",
+        accessorFn: (o) => o.name
+      },
+      {
+        header: "Customer Since",
+        accessorFn: (o) => k(ae(o._id.toString())).format("DD MMM YYYY")
+      },
+      {
+        header: "Birthday",
+        accessorFn: (o) => k(o.birthday).format("DD MMM YYYY")
+      },
+      {
+        header: "Last Visit",
+        accessorFn: (o) => k(o.stats.lastVisit).format("DD MMM YYYY")
+      }
+    ], s = p({
+      searchValue: "",
+      pageSize: 10,
+      pageCount: 0,
+      pageIndex: 0,
+      totalRows: 0,
+      isLoading: !1
+    }), c = p([]), d = async (o) => {
+      if (!u.segment._id) {
+        s.value.isLoading = !1;
+        return;
+      }
+      c.value = [], s.value.isLoading = !0;
+      const l = await w.paginateSegmentUsers(
+        u.segment._id,
+        {
+          limit: o.pageSize,
+          skip: o.pageIndex ?? 0,
+          sortBy: "_id",
+          search: s.value.searchValue,
+          descending: !0
+        }
+      );
+      c.value = l.resources, s.value.totalRows = l.meta.totalResources ?? 0, s.value.pageCount = l.meta.totalPages ?? 0, s.value.isLoading = !1;
+    };
+    return N(() => d({ pageIndex: 0, pageSize: 10 })), (o, l) => {
+      const n = F("FmTable");
+      return g(), b("div", ne, [
+        r("div", le, Y(u.title), 1),
+        r("div", ie, [
+          r("div", re, Y(o.segment.members.length), 1),
+          r("div", ce, [
+            de,
+            r("div", null, "as of " + Y(a(k)(o.segment.lastUpdated).format("DD MMM YYYY")), 1)
+          ])
+        ]),
+        m(n, {
+          class: "xs:hidden",
+          loading: a(s).isLoading,
+          "row-data": a(c),
+          "row-count": a(s).totalRows,
+          "column-defs": y,
+          "page-size": a(s).pageSize,
+          "page-count": a(s).pageCount,
+          "hide-footer": a(s).totalRows <= 10,
+          "fetch-fn": d
+        }, null, 8, ["loading", "row-data", "row-count", "page-size", "page-count", "hide-footer"]),
+        a(c).length == 0 ? (g(), b("div", me, fe)) : E("", !0)
+      ]);
+    };
+  }
+}), ve = { class: "flex items-center gap-x-8" }, he = /* @__PURE__ */ r("div", null, "Review segment", -1), _e = {
+  key: 0,
+  class: "space-y-16 pr-12"
+}, ye = /* @__PURE__ */ r("div", { class: "fm-typo-en-title-sm-800" }, "Segment Filter", -1), Se = { class: "flex items-center gap-8" }, we = /* @__PURE__ */ L({
+  __name: "SegmentSheet",
+  emits: ["update:model-value"],
+  setup(M, { expose: u, emit: y }) {
+    const s = X(), c = p(!1), d = p(!1), o = {
+      name: "",
+      rule: ee.scaffoldGroup(),
+      members: []
+    }, l = se, n = p(o), S = T(() => {
+      const e = l.safeParse(n.value);
+      return e.success ? [] : e.error.errors;
+    });
+    function v(e) {
+      c.value = !0, d.value = !1, e ? n.value = { ...e } : n.value = { ...o };
+    }
+    function C() {
+      c.value = !1;
+    }
+    async function V() {
+      l.safeParse(n.value).success && (d.value = !0);
+    }
+    function D() {
+      d.value = !1;
+    }
+    async function R() {
+      t("update:model-value", n.value);
+    }
+    N(async () => {
+    });
+    const t = y;
+    return u({
+      showSheet: v,
+      hideSheet: C
+    }), (e, i) => {
+      const f = F("FmButton"), h = F("FmSideSheet");
+      return g(), A(h, {
+        modelValue: a(c),
+        "onUpdate:modelValue": i[5] || (i[5] = (_) => U(c) ? c.value = _ : null),
+        header: "Add segment",
+        "dismiss-away": "",
+        "close-button": !0,
+        "max-width": 1100
+      }, H({
+        "side-sheet-footer": $(() => [
+          r("div", Se, [
+            a(d) ? (g(), b(B, { key: 0 }, [
+              m(f, {
+                label: "Save Segment",
+                onClick: R,
+                loading: a(s).isLoading,
+                disabled: a(S).length > 0 || a(s).isLoading
+              }, null, 8, ["loading", "disabled"]),
+              m(f, {
+                label: "Cancel",
+                onClick: i[3] || (i[3] = (_) => D()),
+                variant: "tertiary"
+              })
+            ], 64)) : (g(), b(B, { key: 1 }, [
+              m(f, {
+                label: "Review Segment",
+                disabled: a(S).length > 0 || a(s).isLoading,
+                onClick: V
+              }, null, 8, ["disabled"]),
+              m(f, {
+                label: "Cancel",
+                onClick: i[4] || (i[4] = (_) => C()),
+                variant: "tertiary"
+              })
+            ], 64))
+          ])
+        ]),
+        default: $(() => {
+          var _;
+          return [
+            a(d) ? (g(), A(ge, {
+              key: 1,
+              title: a(n).name,
+              segment: a(n)
+            }, null, 8, ["title", "segment"])) : (g(), b("div", _e, [
+              m(q, {
+                modelValue: a(n).name,
+                "onUpdate:modelValue": i[1] || (i[1] = (I) => a(n).name = I),
+                label: "Segment title",
+                schema: a(Q).typeAtPath(a(l), "name")
+              }, null, 8, ["modelValue", "schema"]),
+              ye,
+              m(te, {
+                "trigger-type": "MEMBERSHIP_JOINED",
+                includeOnly: "user",
+                "model-value": (_ = a(n)) == null ? void 0 : _.rule,
+                "onUpdate:modelValue": i[2] || (i[2] = (I) => {
+                  a(n).rule = I;
+                })
+              }, null, 8, ["model-value"])
+            ]))
+          ];
+        }),
+        _: 2
+      }, [
+        a(d) ? {
+          name: "side-sheet-header",
+          fn: $(() => [
+            r("div", ve, [
+              m(f, {
+                icon: "arrow_back",
+                variant: "tertiary",
+                onClick: i[0] || (i[0] = (_) => d.value = !1)
+              }),
+              he
+            ])
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["modelValue"]);
+    };
+  }
+}), be = { class: "px-24 flex flex-col gap-y-32 pb-24" }, Ae = /* @__PURE__ */ L({
+  __name: "Segment",
+  setup(M) {
+    const { minor: u } = G, y = p(0), s = {
+      label: "Refresh segments",
+      value: "refresh"
+      // prependIcon: 'refresh',
+    }, c = {
+      label: "Add segment",
+      value: "add",
+      isPrimary: !0,
+      prependIcon: "add"
+    }, d = [
+      {
+        header: "Name",
+        accessorFn: (t) => t.name
+      },
+      {
+        header: "Total Customers in this Segment",
+        accessorFn: (t) => t.memberCount ?? 0
+      },
+      {
+        header: "% of customers",
+        accessorFn: (t) => {
+          var e;
+          return ((((e = t.members) == null ? void 0 : e.length) ?? 0) * 100 / y.value).toFixed(2);
+        }
+      },
+      {
+        header: "Actions",
+        cell(t) {
+          return x("div", { class: "flex items-center justify-end" }, [
+            x(
+              z.FmMenu,
+              {
+                placement: "bottom-end",
+                onClick: (e) => {
+                  e.stopPropagation();
+                }
+              },
+              {
+                "menu-button": () => x(z.FmButton, {
+                  icon: "more_vert",
+                  iconColor: "neutral-gray-400",
+                  variant: "tertiary"
+                }),
+                default: () => [
+                  x(
+                    z.FmMenuItem,
+                    {
+                      onClick: async (e) => {
+                        e.stopPropagation(), V(t.row.original);
+                      }
+                    },
+                    {
+                      label: x(
+                        "div",
+                        {
+                          class: "text-fm-color-typo-error fm-typo-en-body-md-400"
+                        },
+                        "Remove"
+                      )
+                    }
+                  )
+                ]
+              }
+            )
+          ]);
+        }
+      }
+    ], o = j({ searchKey: "", columnFilters: [] }), l = p({
+      searchValue: "",
+      pageSize: 10,
+      pageCount: 0,
+      pageIndex: 0,
+      totalRows: 0,
+      isLoading: !1
+    }), n = p([]), S = p(null), v = async (t) => {
+      n.value = [], l.value.isLoading = !0;
+      const e = await w.readAll({
+        limit: t.pageSize,
+        skip: t.pageIndex ?? 0,
+        sortBy: "_id",
+        search: l.value.searchValue,
+        descending: !0
+      });
+      n.value = e.resources, l.value.totalRows = e.meta.totalResources ?? 0, l.value.pageCount = e.meta.totalPages ?? 0, l.value.isLoading = !1;
+    };
+    async function C() {
+      await u(
+        async () => {
+          await w.refreshSegments(), await v({ pageSize: 10, pageIndex: 0 });
+        },
+        { message: "Refreshing segmentations" }
+      );
+    }
+    async function V(t) {
+      await Z.remove(`Are you sure you want to remove ${t.name}?`) && await u(
+        async () => {
+          await w.delete(t._id), await v({ pageSize: 10, pageIndex: 0 });
+        },
+        {
+          message: `Removing ${t.name}`,
+          successMessage: `Removed ${t.name} successfully`
+        }
+      );
+    }
+    async function D(t) {
+      await u(
+        async () => {
+          var e;
+          if (t._id) {
+            const { members: i, _id: f, ...h } = t;
+            await w.update(t._id, h);
+          } else
+            await w.create(t);
+          await v({ pageSize: 10, pageIndex: 0 }), (e = S.value) == null || e.hideSheet();
+        },
+        {
+          message: "Saving segment",
+          successMessage: "Segment saved"
+        }
+      );
+    }
+    function R(t) {
+      var e;
+      (e = S.value) == null || e.showSheet(t);
+    }
+    return O(
+      () => l.value.searchValue,
+      J.debounce(() => {
+        v({ pageSize: 10, pageIndex: 0 });
+      }, 500)
+    ), K(async () => {
+      const { meta: t } = await oe.read({
+        limit: 1,
+        skip: 0,
+        sortBy: "_id",
+        search: l.value.searchValue,
+        descending: !1
+      });
+      y.value = t.totalResources ?? 0, await v({ pageSize: 10, pageIndex: 0 });
+    }), (t, e) => {
+      const i = F("FmPageHead"), f = F("FmTable");
+      return g(), b(B, null, [
+        m(i, {
+          title: "Segments",
+          actions: [s, c],
+          "onClick:action": e[0] || (e[0] = (h) => h === "add" ? R() : C())
+        }, null, 8, ["actions"]),
+        r("div", be, [
+          m(f, {
+            class: "xs:hidden",
+            "row-data": a(n),
+            "column-defs": d,
+            "search-value": a(o).searchKey,
+            "column-filter": [],
+            "hide-footer": !0,
+            onRowClick: e[1] || (e[1] = (h) => {
+              R(h.original);
+            })
+          }, null, 8, ["row-data", "search-value"]),
+          m(we, {
+            ref_key: "sheetRef",
+            ref: S,
+            "onUpdate:modelValue": D
+          }, null, 512)
+        ])
+      ], 64);
+    };
+  }
+});
+export {
+  Ae as default
+};