@feedmepos/mf-connect 0.1.0-beta.9 → 0.1.0-prod

package/dist/Segment-DpBxGuuu.js

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