@feedmepos/mf-connect 0.0.10-prod → 0.0.11-prod

package/dist/Segment-BeUbkVj7.js

@@ -0,0 +1,444 @@
+import { defineComponent as A, onMounted as E, openBlock as p, createElementBlock as b, createElementVNode as a, toDisplayString as M, unref as e, createVNode as n, createCommentVNode as q, ref as w, computed as j, resolveComponent as u, createBlock as B, isRef as G, createSlots as J, withCtx as g, Fragment as V, reactive as W, watch as Q, onBeforeMount as X, renderList as ee, h as I } from "vue";
+import { _ as te } from "./campaign-CpzFl8Vr.js";
+import { F as N, p as oe, u as ae } from "./loading-C1IzY-n2.js";
+import { components as L } from "@feedmepos/ui-library";
+import { l as se } from "./lodash-BMQ4xbjY.js";
+import { _ as ne, Z as le } from "./ZodTextField.vue_vue_type_script_setup_true_lang-3LlSDiq0.js";
+import { a as ie } from "./index-Ccn7PGoB.js";
+import { u as re, a as me } from "./app-BvizV9z5.js";
+import { R as ce } from "./rule-builder-Di3qiIBb.js";
+import { _ as de } from "./RuleGroup.vue_vue_type_script_setup_true_lang-1L68zx5t.js";
+import { h as P } from "./moment-BWErdI6_.js";
+import { u as ue, _ as pe } from "./usePagination-MhbjQgN7.js";
+import { s as k } from "./membership-D3I4udu3.js";
+import { o as fe } from "./objectId-dwaoBfJX.js";
+import { m as ge } from "./index-C8dIiNQb.js";
+const _e = ie.extend({
+  _id: N.optional(),
+  business: N.optional()
+}), ve = { class: "space-y-16 pr-12" }, ye = { class: "fm-typo-en-title-md-800" }, he = { class: "flex space-x-8" }, Se = { class: "fm-typo-en-title-md-800 text-fm-color-primary" }, be = { class: "text-fm-color-typo-secondary" }, xe = /* @__PURE__ */ a("div", null, "contacts in your segment", -1), we = {
+  key: 0,
+  class: "w-full flex flex-col gap-16 items-center pt-16"
+}, Fe = /* @__PURE__ */ a("div", { class: "fm-typo-en-body-lg-600" }, "No data found", -1), Ce = /* @__PURE__ */ a("div", { class: "fm-typo-en-body-sm-400 text-fm-color-typo-secondary" }, " No data to show at the current moment. ", -1), ke = [
+  Fe,
+  Ce
+], Me = /* @__PURE__ */ A({
+  __name: "ReviewSegment",
+  props: {
+    title: {},
+    segment: {}
+  },
+  setup(D) {
+    const _ = D, x = [
+      {
+        header: "Name",
+        accessorFn: (s) => s.name
+      },
+      {
+        header: "Customer Since",
+        accessorFn: (s) => P(fe(s._id.toString())).format("DD MMM YYYY")
+      },
+      {
+        header: "Birthday",
+        accessorFn: (s) => P(s.birthday).format("DD MMM YYYY")
+      },
+      {
+        header: "Last Visit",
+        accessorFn: (s) => P(s.stats.lastVisit).format("DD MMM YYYY")
+      }
+    ], v = async (s) => _.segment._id ? await k.paginateSegmentUsers(_.segment._id, {
+      limit: r.value.pageSize,
+      skip: s.pageIndex ?? 0,
+      sortBy: "_id",
+      search: s.searchValue,
+      descending: !0
+    }) : { resources: [], meta: { totalResources: 0, totalPages: 0 } }, { tableMeta: r, rowData: c, onSort: m, debouncedFetchData: d, onSearch: l } = ue(v);
+    return E(async () => {
+      await d();
+    }), (s, F) => (p(), b("div", ve, [
+      a("div", ye, M(_.title), 1),
+      a("div", he, [
+        a("div", Se, M(s.segment.members.length), 1),
+        a("div", be, [
+          xe,
+          a("div", null, "as of " + M(e(P)(s.segment.lastUpdated).format("DD MMM YYYY")), 1)
+        ])
+      ]),
+      n(pe, {
+        loading: e(r).isLoading,
+        "row-data": e(c),
+        "row-count": e(r).totalRows,
+        "column-defs": x,
+        "page-size": e(r).pageSize,
+        "page-count": e(r).pageCount,
+        "page-index": e(r).pageIndex,
+        onSortChange: e(m),
+        onPageChange: F[0] || (F[0] = (h) => e(d)({ pageSize: h.pageSize, pageIndex: h.pageIndex }))
+      }, null, 8, ["loading", "row-data", "row-count", "page-size", "page-count", "page-index", "onSortChange"]),
+      e(c).length == 0 ? (p(), b("div", we, ke)) : q("", !0)
+    ]));
+  }
+}), $e = { class: "flex items-center gap-x-8" }, Re = /* @__PURE__ */ a("div", null, "Review segment", -1), Ie = {
+  key: 0,
+  class: "space-y-16 pr-12"
+}, Ve = /* @__PURE__ */ a("div", { class: "fm-typo-en-title-sm-800" }, "Segment Filter", -1), Pe = { class: "flex items-center gap-8" }, Be = /* @__PURE__ */ A({
+  __name: "SegmentSheet",
+  emits: ["update:model-value"],
+  setup(D, { expose: _, emit: x }) {
+    const v = re(), r = w(!1), c = w(!1), m = {
+      name: "",
+      rule: ce.scaffoldGroup(),
+      members: []
+    }, d = _e, l = w(m), s = j(() => {
+      const t = d.safeParse(l.value);
+      return t.success ? [] : t.error.errors;
+    });
+    function F(t) {
+      r.value = !0, c.value = !1, t ? l.value = { ...t } : l.value = { ...m };
+    }
+    function h() {
+      r.value = !1;
+    }
+    async function Y() {
+      d.safeParse(l.value).success && (c.value = !0);
+    }
+    function C() {
+      c.value = !1;
+    }
+    async function z() {
+      o("update:model-value", l.value);
+    }
+    E(async () => {
+    });
+    const o = x;
+    return _({
+      showSheet: F,
+      hideSheet: h
+    }), (t, i) => {
+      const S = u("FmButton"), $ = u("FmSideSheet");
+      return p(), B($, {
+        modelValue: e(r),
+        "onUpdate:modelValue": i[5] || (i[5] = (y) => G(r) ? r.value = y : null),
+        header: "Add segment",
+        "dismiss-away": "",
+        "close-button": !0,
+        "max-width": 1100
+      }, J({
+        "side-sheet-footer": g(() => [
+          a("div", Pe, [
+            e(c) ? (p(), b(V, { key: 0 }, [
+              n(S, {
+                label: "Save Segment",
+                onClick: z,
+                loading: e(v).isLoading,
+                disabled: e(s).length > 0 || e(v).isLoading
+              }, null, 8, ["loading", "disabled"]),
+              n(S, {
+                label: "Cancel",
+                onClick: i[3] || (i[3] = (y) => C()),
+                variant: "tertiary"
+              })
+            ], 64)) : (p(), b(V, { key: 1 }, [
+              n(S, {
+                label: "Review Segment",
+                disabled: e(s).length > 0 || e(v).isLoading,
+                onClick: Y
+              }, null, 8, ["disabled"]),
+              n(S, {
+                label: "Cancel",
+                onClick: i[4] || (i[4] = (y) => h()),
+                variant: "tertiary"
+              })
+            ], 64))
+          ])
+        ]),
+        default: g(() => {
+          var y;
+          return [
+            e(c) ? (p(), B(Me, {
+              key: 1,
+              title: e(l).name,
+              segment: e(l)
+            }, null, 8, ["title", "segment"])) : (p(), b("div", Ie, [
+              n(ne, {
+                modelValue: e(l).name,
+                "onUpdate:modelValue": i[1] || (i[1] = (R) => e(l).name = R),
+                label: "Segment title",
+                schema: e(le).typeAtPath(e(d), "name")
+              }, null, 8, ["modelValue", "schema"]),
+              Ve,
+              n(de, {
+                "trigger-type": "MEMBERSHIP_JOINED",
+                includeOnly: "user",
+                "model-value": (y = e(l)) == null ? void 0 : y.rule,
+                "onUpdate:modelValue": i[2] || (i[2] = (R) => {
+                  e(l).rule = R;
+                })
+              }, null, 8, ["model-value"])
+            ]))
+          ];
+        }),
+        _: 2
+      }, [
+        e(c) ? {
+          name: "side-sheet-header",
+          fn: g(() => [
+            a("div", $e, [
+              n(S, {
+                icon: "arrow_back",
+                variant: "tertiary",
+                onClick: i[0] || (i[0] = (y) => c.value = !1)
+              }),
+              Re
+            ])
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["modelValue"]);
+    };
+  }
+}), De = { class: "flex items-center" }, Ye = /* @__PURE__ */ a("span", { class: "fm-typo-en-title-md-600 fm-step-title line-clamp-2 mr-8" }, " Segments ", -1), ze = { class: "px-24 flex flex-col gap-y-16" }, Le = { class: "fm-typo-en-body-md-600 text-fm-color-typo-secondary" }, Ae = { class: "fm-typo-en-body-md-600" }, Ue = { class: "fm-typo-en-body-md-600 text-fm-color-typo-secondary" }, Ne = /* @__PURE__ */ a("img", {
+  src: te,
+  class: "aspect-square w-[150px]"
+}, null, -1), Ee = /* @__PURE__ */ a("div", { class: "flex flex-col gap-16 text-center" }, [
+  /* @__PURE__ */ a("div", { class: "fm-typo-en-title-sm-800" }, "Create customer segments"),
+  /* @__PURE__ */ a("div", { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, " Segments allow you to categorize your customers based on various criteria, enabling targeted marketing and personalized experiences. ")
+], -1), at = /* @__PURE__ */ A({
+  __name: "Segment",
+  setup(D) {
+    const { minor: _ } = ae, x = me(), v = w(0), r = [
+      {
+        header: "Name",
+        accessorFn: (o) => o.name
+      },
+      {
+        header: "Total Customers in this Segment",
+        accessorFn: (o) => o.memberCount ?? 0
+      },
+      {
+        header: "% of customers",
+        accessorFn: (o) => ((o.memberCount ?? 0) * 100 / v.value).toFixed(2)
+      },
+      {
+        header: "Actions",
+        meta: {
+          maxWidth: "100px"
+        },
+        cell(o) {
+          return I("div", { class: "flex items-center justify-end" }, [
+            I(
+              L.FmMenu,
+              {
+                placement: "bottom-end",
+                onClick: (t) => {
+                  t.stopPropagation();
+                }
+              },
+              {
+                "menu-button": () => I(L.FmButton, {
+                  icon: "more_vert",
+                  iconColor: "neutral-gray-400",
+                  variant: "tertiary"
+                }),
+                default: () => [
+                  I(
+                    L.FmMenuItem,
+                    {
+                      onClick: async (t) => {
+                        t.stopPropagation(), h(o.row.original);
+                      }
+                    },
+                    {
+                      label: I(
+                        "div",
+                        {
+                          class: "text-fm-color-typo-error fm-typo-en-body-md-400"
+                        },
+                        "Remove"
+                      )
+                    }
+                  )
+                ]
+              }
+            )
+          ]);
+        }
+      }
+    ], c = W({ searchKey: "", columnFilters: [] }), m = w({
+      searchValue: "",
+      pageSize: 10,
+      pageCount: 0,
+      pageIndex: 0,
+      totalRows: 0,
+      isLoading: !1
+    }), d = w([]), l = w(null), s = async (o) => {
+      d.value = [], m.value.isLoading = !0;
+      const t = await k.readAll({
+        limit: o.pageSize,
+        skip: o.pageIndex ?? 0,
+        sortBy: "_id",
+        search: m.value.searchValue,
+        descending: !0
+      });
+      d.value = t.resources, m.value.totalRows = t.meta.totalResources ?? 0, m.value.pageCount = t.meta.totalPages ?? 0, m.value.isLoading = !1;
+    };
+    async function F() {
+      await _(
+        async () => {
+          await k.refreshSegments(), await s({ pageSize: 10, pageIndex: 0 });
+        },
+        { message: "Refreshing segmentations" }
+      );
+    }
+    async function h(o) {
+      await oe.remove(`Are you sure you want to remove ${o.name}?`) && await _(
+        async () => {
+          await k.delete(o._id), await s({ pageSize: 10, pageIndex: 0 });
+        },
+        {
+          message: `Removing ${o.name}`,
+          successMessage: `Removed ${o.name} successfully`
+        }
+      );
+    }
+    async function Y(o) {
+      await _(
+        async () => {
+          var t;
+          if (o._id) {
+            const { members: i, _id: S, ...$ } = o;
+            await k.update(o._id, $);
+          } else
+            await k.create(o);
+          await s({ pageSize: 10, pageIndex: 0 }), (t = l.value) == null || t.hideSheet();
+        },
+        {
+          message: "Saving segment",
+          successMessage: "Segment saved"
+        }
+      );
+    }
+    function C(o) {
+      var t;
+      (t = l.value) == null || t.showSheet(o);
+    }
+    const z = j(() => x.isPremium ? [
+      {
+        label: "Refresh segments",
+        value: "refresh"
+      },
+      {
+        label: "Add segment",
+        value: "add",
+        isPrimary: !0,
+        prependIcon: "add"
+      }
+    ] : []);
+    return Q(
+      () => m.value.searchValue,
+      se.debounce(() => {
+        s({ pageSize: 10, pageIndex: 0 });
+      }, 500)
+    ), X(async () => {
+      const { meta: o } = await ge.read({
+        limit: 1,
+        skip: 0,
+        sortBy: "_id",
+        search: m.value.searchValue,
+        descending: !1
+      });
+      v.value = o.totalResources ?? 0, await s({ pageSize: 10, pageIndex: 0 }), await x.readPremium();
+    }), (o, t) => {
+      const i = u("FmPill"), S = u("FmPageHead"), $ = u("FmTable"), y = u("FmIcon"), R = u("FmMenuItem"), H = u("FmMenu"), T = u("FmListItem"), O = u("FmList"), K = u("FmButton"), Z = u("FmCard");
+      return p(), b(V, null, [
+        n(S, {
+          title: "Segments",
+          actions: e(z),
+          "onClick:action": t[0] || (t[0] = (f) => f === "add" ? C() : F())
+        }, {
+          title: g(() => [
+            a("div", De, [
+              Ye,
+              n(i, { variant: "premium" })
+            ])
+          ]),
+          _: 1
+        }, 8, ["actions"]),
+        a("div", ze, [
+          e(d).length > 0 || e(m).searchValue ? (p(), b(V, { key: 0 }, [
+            n($, {
+              class: "xs:hidden",
+              "row-data": e(d),
+              "column-defs": r,
+              "search-value": e(c).searchKey,
+              "column-filter": [],
+              "hide-footer": !0,
+              onRowClick: t[1] || (t[1] = (f) => {
+                C(f.original);
+              })
+            }, null, 8, ["row-data", "search-value"]),
+            n(O, { class: "w-full hidden xs:block" }, {
+              default: g(() => [
+                (p(!0), b(V, null, ee(e(d), (f) => (p(), B(T, {
+                  key: f._id.toString(),
+                  tag: "label",
+                  onClick: (U) => C(f)
+                }, {
+                  default: g(() => [
+                    a("div", null, [
+                      a("div", Le, M((f.memberCount ?? 0).toLocaleString()) + " total customers ", 1),
+                      a("div", Ae, M(f.name), 1),
+                      a("div", Ue, M(((f.memberCount ?? 0) * 100 / e(v)).toFixed(2)) + "% of customers ", 1)
+                    ])
+                  ]),
+                  append: g(() => [
+                    n(H, { "stop-click-propagation": !0 }, {
+                      "menu-button": g(() => [
+                        n(y, { name: "more_vert" })
+                      ]),
+                      default: g(() => [
+                        n(R, {
+                          class: "text-fm-color-typo-error fm-typo-en-body-md-400",
+                          label: "Remove",
+                          "onUpdate:modelValue": (U) => U && h(f)
+                        }, null, 8, ["onUpdate:modelValue"])
+                      ]),
+                      _: 2
+                    }, 1024)
+                  ]),
+                  _: 2
+                }, 1032, ["onClick"]))), 128))
+              ]),
+              _: 1
+            })
+          ], 64)) : (p(), B(Z, {
+            key: 1,
+            variant: "outlined",
+            class: "w-full flex flex-col items-center justify-center gap-y-24 p-24"
+          }, {
+            default: g(() => [
+              Ne,
+              Ee,
+              n(K, {
+                variant: "primary",
+                label: "Create segment",
+                disabled: !e(x).isPremium,
+                icon: "add",
+                onClick: t[2] || (t[2] = (f) => C())
+              }, null, 8, ["disabled"])
+            ]),
+            _: 1
+          })),
+          n(Be, {
+            ref_key: "sheetRef",
+            ref: l,
+            "onUpdate:modelValue": Y
+          }, null, 512)
+        ])
+      ], 64);
+    };
+  }
+});
+export {
+  at as default
+};