@feedmepos/mf-connect 0.1.98-beta.86 → 0.1.98-beta.89

package/dist/WhatsappBotLogs-CEyUngzi.js

@@ -0,0 +1,372 @@
+import { defineComponent as T, resolveComponent as k, openBlock as l, createElementBlock as d, createElementVNode as s, toDisplayString as i, unref as p, createVNode as _, computed as w, Fragment as M, renderList as V, createCommentVNode as $, normalizeClass as ee, createTextVNode as P, createBlock as I, ref as b, watch as G, onBeforeUnmount as te, withCtx as O } from "vue";
+import { u as E } from "./vue-i18n-CkZqjA2G.js";
+import { useCoreStore as oe } from "@feedmepos/mf-common";
+import { S as ne } from "./index-CMGEBPm-.js";
+import { w as ae } from "./index-L7SBt-2D.js";
+import { _ as se } from "./remy-icon-BhUGu2NI.js";
+import { _ as re } from "./WhatsappNotificationGroupDialog.vue_vue_type_script_setup_true_lang-D_bVWePp.js";
+import { C as U } from "./timezone-CGlmgCYo.js";
+import { m as le } from "./index-DgnQ18-j.js";
+const ce = { class: "group self-end min-w-[min(280px,100%)] max-w-[80%] rounded-[12px] rounded-br-[4px] bg-fm-color-neutral-gray-100 text-fm-color-typo-secondary" }, ie = { class: "flex items-center gap-[4px] min-h-[28px] px-[10px] py-[4px] text-[11px] font-medium cursor-pointer list-none rounded-[12px] focus-visible:outline-fm-color-primary" }, pe = { class: "flex-1 group-open:hidden" }, ue = { class: "flex-1 hidden group-open:inline" }, me = { class: "px-[10px] pt-[2px] pb-[8px] text-[13px] leading-[18px] whitespace-pre-wrap break-words" }, de = /* @__PURE__ */ T({
+  __name: "ThoughtBubble",
+  props: {
+    text: {}
+  },
+  setup(m) {
+    const { t: v } = E();
+    return (n, g) => {
+      const c = k("FmIcon");
+      return l(), d("details", ce, [
+        s("summary", ie, [
+          g[0] || (g[0] = s("img", {
+            src: se,
+            alt: "",
+            "aria-hidden": "true",
+            class: "w-[16px] h-[16px] shrink-0"
+          }, null, -1)),
+          s("span", pe, i(p(v)("connect.whatsappBot.logs.thought")), 1),
+          s("span", ue, i(p(v)("connect.whatsappBot.logs.hideThought")), 1),
+          _(c, {
+            name: "keyboard_arrow_down",
+            size: "sm",
+            class: "transition-transform group-open:rotate-180"
+          })
+        ]),
+        s("p", me, i(m.text), 1)
+      ]);
+    };
+  }
+}), xe = { class: "border border-fm-color-neutral-gray-100 rounded-[16px] bg-fm-color-neutral-white overflow-hidden" }, fe = { class: "flex items-center gap-[10px] px-[16px] py-[10px] border-b border-fm-color-neutral-gray-100 flex-wrap" }, he = {
+  "aria-hidden": "true",
+  class: "w-[28px] h-[28px] rounded-full bg-fm-color-neutral-gray-100 text-fm-color-typo-secondary text-[12px] font-semibold flex items-center justify-center shrink-0"
+}, ve = { class: "min-w-0 flex-1" }, ge = { class: "text-[14px] font-semibold leading-[20px] break-words" }, ye = { class: "text-[12px] leading-[16px] text-fm-color-typo-tertiary break-words" }, _e = ["datetime"], we = { class: "flex flex-col gap-[10px] px-[16px] py-[12px]" }, be = {
+  key: 0,
+  class: "self-end text-[12px] leading-[16px] text-fm-color-typo-tertiary"
+}, ke = {
+  key: 0,
+  class: "text-[11px] text-fm-color-typo-tertiary"
+}, Be = ["datetime"], Ce = ["title", "onClick"], Fe = { class: "w-[24px] h-[24px] rounded-full bg-fm-color-secondary-plum/10 text-fm-color-secondary-plum flex items-center justify-center shrink-0" }, Ae = { class: "flex flex-col min-w-0" }, Ne = { class: "text-[13px] leading-[18px] font-semibold" }, $e = { class: "text-[12px] leading-[16px] text-fm-color-typo-tertiary whitespace-pre-wrap break-words" }, Ie = /* @__PURE__ */ T({
+  __name: "WhatsappLogConversation",
+  props: {
+    conversation: {},
+    accountName: {},
+    timezone: {}
+  },
+  emits: ["notificationGroup"],
+  setup(m, { emit: v }) {
+    const n = m, g = v, { t: c, locale: t } = E(), o = w(
+      () => n.conversation.customerName || n.conversation.phoneNumber || c("connect.whatsappBot.logs.unknownCustomer")
+    ), u = w(
+      () => n.conversation.customerName ? n.conversation.customerName.trim().split(/\s+/).slice(0, 2).map((f) => Array.from(f)[0]).join("").toLocaleUpperCase(t.value) : "?"
+    ), A = w(
+      () => new Intl.DateTimeFormat(t.value, {
+        dateStyle: "medium",
+        timeStyle: "short",
+        timeZone: n.timezone
+      })
+    ), y = w(
+      () => new Intl.DateTimeFormat(t.value, {
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: !1,
+        timeZone: n.timezone
+      })
+    );
+    function h(f) {
+      var B;
+      return (B = f.reaction) != null && B.removed ? c("connect.whatsappBot.logs.reactionRemoved") : f.text ? f.text : c("connect.whatsappBot.logs.mediaMessage", { type: f.messageType });
+    }
+    return (f, B) => {
+      const N = k("FmIcon");
+      return l(), d("article", xe, [
+        s("header", fe, [
+          s("div", he, i(u.value), 1),
+          s("div", ve, [
+            s("h2", ge, i(o.value), 1),
+            s("p", ye, i(m.conversation.phoneNumber || p(c)("connect.whatsappBot.phoneUnavailable")) + " · " + i(p(c)("connect.whatsappBot.tickets.via", { name: m.accountName })), 1)
+          ]),
+          s("time", {
+            datetime: m.conversation.lastCreatedAt,
+            class: "text-[12px] text-fm-color-typo-tertiary tabular-nums"
+          }, i(A.value.format(new Date(m.conversation.lastCreatedAt))), 9, _e)
+        ]),
+        s("ol", we, [
+          (l(!0), d(M, null, V(m.conversation.logs, (r) => (l(), d("li", {
+            key: r.id,
+            class: "flex flex-col gap-[4px] min-w-0"
+          }, [
+            r.type === "message" ? (l(), d(M, { key: 0 }, [
+              r.isFromMe && !r.isFromBot ? (l(), d("span", be, i(p(c)("connect.whatsappBot.logs.sentByStaff")), 1)) : $("", !0),
+              s("div", {
+                class: ee([
+                  "px-[10px] py-[6px] text-[14px] leading-[20px] whitespace-pre-wrap break-words min-w-0",
+                  r.isFromMe ? "self-end max-w-[80%] bg-fm-color-primary-oats rounded-[12px] rounded-br-[4px]" : "self-start max-w-[75%] bg-fm-color-neutral-gray-100/50 rounded-[12px] rounded-bl-[4px]"
+                ])
+              }, [
+                P(i(h(r)) + " ", 1),
+                r.isEdit ? (l(), d("span", ke, " (" + i(p(c)("connect.whatsappBot.logs.edited")) + ") ", 1)) : $("", !0),
+                s("time", {
+                  datetime: r.timestamp,
+                  class: "float-right mt-[6px] ml-[10px] text-[11px] leading-[14px] text-fm-color-typo-tertiary tabular-nums"
+                }, i(y.value.format(new Date(r.timestamp))), 9, Be)
+              ], 2)
+            ], 64)) : r.type === "thought" ? (l(), I(de, {
+              key: 1,
+              text: r.text
+            }, null, 8, ["text"])) : r.type === "escalate" ? (l(), d("button", {
+              key: 2,
+              type: "button",
+              title: p(c)("connect.whatsappBot.logs.openNotificationGroup"),
+              class: "self-end flex items-start gap-[8px] max-w-[80%] py-[8px] pr-[12px] pl-[8px] border border-fm-color-neutral-gray-200 rounded-[8px] text-left hover:bg-fm-color-neutral-gray-100/50 focus-visible:outline-fm-color-primary",
+              onClick: (C) => g("notificationGroup", r.clientId)
+            }, [
+              s("span", Fe, [
+                _(N, {
+                  name: "group",
+                  size: "sm"
+                })
+              ]),
+              s("span", Ae, [
+                s("span", Ne, i(p(c)("connect.whatsappBot.logs.escalated")), 1),
+                s("span", $e, i(p(c)("connect.whatsappBot.logs.reason", {
+                  reason: r.source === "staff" ? p(c)("connect.whatsappBot.tickets.staffReason") : r.reason
+                })), 1)
+              ])
+            ], 8, Ce)) : $("", !0)
+          ]))), 128))
+        ])
+      ]);
+    };
+  }
+});
+function Me(m, v) {
+  const n = /* @__PURE__ */ new Map(), g = /* @__PURE__ */ new Map(), c = [...m].sort(
+    (t, o) => Date.parse(t.createdAt) - Date.parse(o.createdAt) || W(t) - W(o) || t.id.localeCompare(o.id)
+  );
+  for (const t of c) {
+    const o = JSON.stringify([
+      t.accountLid || t.clientId,
+      t.chatJid
+    ]), u = g.get(o) ?? { name: "", phone: "" };
+    t.customerName && (u.name = t.customerName), t.phoneNumber && (u.phone = t.phoneNumber), g.set(o, u);
+    const A = le.tz(t.createdAt, v).format("YYYY-MM-DD"), y = `${o}:${A}`, h = n.get(y);
+    h ? (h.logs.push(t), h.lastCreatedAt = t.createdAt, h.clientId = t.clientId) : n.set(y, {
+      id: y,
+      clientId: t.clientId,
+      chatJid: t.chatJid,
+      customerName: "",
+      phoneNumber: "",
+      createdAt: t.createdAt,
+      lastCreatedAt: t.createdAt,
+      logs: [t]
+    });
+  }
+  for (const t of n.values()) {
+    const o = t.logs[0], u = g.get(
+      JSON.stringify([o.accountLid || o.clientId, o.chatJid])
+    );
+    t.customerName = (u == null ? void 0 : u.name) ?? "", t.phoneNumber = (u == null ? void 0 : u.phone) ?? "";
+  }
+  return [...n.values()].sort(
+    (t, o) => Date.parse(o.lastCreatedAt) - Date.parse(t.lastCreatedAt)
+  );
+}
+function W(m) {
+  return m.type === "thought" ? 1 : m.type === "escalate" ? 2 : m.isFromMe ? 3 : 0;
+}
+const Se = { class: "mt-[20px] flex flex-col gap-[16px]" }, De = { class: "flex items-center gap-[8px] flex-wrap" }, Le = { class: "max-h-[240px] overflow-y-auto" }, ze = {
+  key: 0,
+  role: "alert",
+  class: "text-[14px] text-fm-color-typo-error"
+}, Ve = {
+  key: 1,
+  role: "status",
+  class: "py-[56px] flex flex-col items-center gap-[12px] text-[14px] text-fm-color-typo-secondary"
+}, Te = {
+  key: 2,
+  class: "flex items-center gap-[12px] flex-wrap"
+}, Ee = {
+  role: "alert",
+  class: "text-[14px] text-fm-color-typo-error"
+}, Je = {
+  key: 3,
+  class: "border border-fm-color-neutral-gray-200 rounded-[16px] px-[24px] py-[56px] flex flex-col items-center text-center gap-[8px]"
+}, Ye = { class: "text-[20px] font-semibold" }, je = { class: "max-w-[420px] text-[14px] leading-[20px] text-fm-color-typo-secondary" }, Ge = {
+  key: 4,
+  class: "w-full max-w-[880px] flex flex-col gap-[12px]"
+}, qe = /* @__PURE__ */ T({
+  __name: "WhatsappBotLogs",
+  props: {
+    accounts: {}
+  },
+  setup(m) {
+    const v = m, { t: n } = E(), g = oe(), c = w(() => ne.getBusinessId() ?? ""), t = w(
+      () => U[g.currentCountry.value || "MY"] ?? U.MY
+    ), o = b([]), u = b(""), A = b([]), y = b([]), h = b(!0), f = b(""), B = b(), N = b(!1), r = b("");
+    let C;
+    function S(a) {
+      var F;
+      const e = (F = v.accounts.find(
+        (L) => L.clientId === a
+      )) == null ? void 0 : F.account;
+      return (e == null ? void 0 : e.businessName) || (e == null ? void 0 : e.name) || (e == null ? void 0 : e.phoneNumber) || n("connect.whatsappBot.logs.unknownAccount", { id: a.slice(-6) });
+    }
+    const R = w(
+      () => [
+        .../* @__PURE__ */ new Set([
+          ...v.accounts.map((a) => a.clientId),
+          ...y.value,
+          ...o.value
+        ])
+      ].map((a) => ({ clientId: a, label: S(a) }))
+    ), J = w(() => {
+      const a = u.value.trim().toLocaleLowerCase();
+      return R.value.filter(
+        (e) => e.label.toLocaleLowerCase().includes(a)
+      );
+    }), Z = w(() => {
+      const a = o.value, e = a.length ? a.length === 1 ? S(a[0]) : n("connect.whatsappBot.logs.selectedAccounts", {
+        count: a.length
+      }) : n("connect.whatsappBot.logs.allAccounts");
+      return n("connect.whatsappBot.logs.accountFilter", { name: e });
+    }), Y = w(
+      () => Me(A.value, t.value)
+    );
+    function H(a) {
+      o.value = o.value.includes(a) ? o.value.filter((e) => e !== a) : [...o.value, a];
+    }
+    function K(a) {
+      r.value = "";
+      const e = v.accounts.find(
+        (F) => F.clientId === a
+      );
+      if (!e) {
+        r.value = n("connect.whatsappBot.errors.accountNotFound");
+        return;
+      }
+      B.value = e, N.value = !0;
+    }
+    async function D() {
+      C == null || C.abort();
+      const a = new AbortController();
+      C = a, h.value = !0, f.value = "", A.value = [];
+      try {
+        if (!c.value)
+          throw new Error(n("connect.whatsappBot.errors.selectBusiness"));
+        const e = await ae.listLogs(
+          c.value,
+          o.value.length ? { clientIds: o.value.join(",") } : {},
+          a.signal
+        );
+        if (a.signal.aborted) return;
+        A.value = e.logs, y.value = [
+          .../* @__PURE__ */ new Set([
+            ...y.value,
+            ...e.logs.map((F) => F.clientId)
+          ])
+        ];
+      } catch (e) {
+        a.signal.aborted || (f.value = e instanceof Error ? e.message : n("connect.whatsappBot.logs.loadError"));
+      } finally {
+        a.signal.aborted || (h.value = !1);
+      }
+    }
+    return G(c, () => {
+      o.value = [], u.value = "", y.value = [], N.value = !1, B.value = void 0, r.value = "";
+    }), G(
+      [c, () => o.value.join(",")],
+      () => void D(),
+      { immediate: !0 }
+    ), te(() => C == null ? void 0 : C.abort()), (a, e) => {
+      const F = k("FmChip"), L = k("FmSearch"), Q = k("FmMenuDivider"), z = k("FmMenuItem"), X = k("FmMenu"), j = k("FmButton"), q = k("FmCircularProgress");
+      return l(), d(M, null, [
+        s("section", Se, [
+          s("div", De, [
+            _(X, {
+              "close-on-click": !1,
+              width: 280
+            }, {
+              "menu-button": O(() => [
+                _(F, {
+                  label: Z.value,
+                  "right-icon": "keyboard_arrow_down",
+                  class: "text-fm-color-typo-secondary cursor-pointer"
+                }, null, 8, ["label"])
+              ]),
+              default: O(() => [
+                _(L, {
+                  modelValue: u.value,
+                  "onUpdate:modelValue": e[0] || (e[0] = (x) => u.value = x),
+                  placeholder: p(n)("connect.whatsappBot.logs.searchAccounts")
+                }, null, 8, ["modelValue", "placeholder"]),
+                _(Q),
+                _(z, {
+                  label: p(n)("connect.whatsappBot.logs.allAccounts"),
+                  "model-value": !o.value.length,
+                  "has-checkbox": "",
+                  onClick: e[1] || (e[1] = (x) => o.value = [])
+                }, null, 8, ["label", "model-value"]),
+                s("div", Le, [
+                  (l(!0), d(M, null, V(J.value, (x) => (l(), I(z, {
+                    key: x.clientId,
+                    label: x.label,
+                    "model-value": o.value.includes(x.clientId),
+                    "has-checkbox": "",
+                    onClick: (Oe) => H(x.clientId)
+                  }, null, 8, ["label", "model-value", "onClick"]))), 128)),
+                  J.value.length ? $("", !0) : (l(), I(z, {
+                    key: 0,
+                    label: p(n)("connect.whatsappBot.logs.noMatchingAccounts"),
+                    disabled: ""
+                  }, null, 8, ["label"]))
+                ])
+              ]),
+              _: 1
+            }),
+            _(j, {
+              variant: "plain",
+              "prepend-icon": "refresh",
+              label: p(n)("connect.whatsappBot.logs.refresh"),
+              disabled: h.value,
+              class: "ml-auto",
+              onClick: e[2] || (e[2] = (x) => D())
+            }, null, 8, ["label", "disabled"])
+          ]),
+          r.value ? (l(), d("p", ze, i(r.value), 1)) : $("", !0),
+          h.value ? (l(), d("div", Ve, [
+            _(q),
+            P(" " + i(p(n)("connect.whatsappBot.logs.loading")), 1)
+          ])) : f.value ? (l(), d("div", Te, [
+            s("p", Ee, i(f.value), 1),
+            _(j, {
+              variant: "secondary",
+              "prepend-icon": "refresh",
+              label: p(n)("connect.whatsappBot.tryAgain"),
+              onClick: e[3] || (e[3] = (x) => D())
+            }, null, 8, ["label"])
+          ])) : Y.value.length ? (l(), d("div", Ge, [
+            (l(!0), d(M, null, V(Y.value, (x) => (l(), I(Ie, {
+              key: x.id,
+              conversation: x,
+              "account-name": S(x.clientId),
+              timezone: t.value,
+              onNotificationGroup: K
+            }, null, 8, ["conversation", "account-name", "timezone"]))), 128))
+          ])) : (l(), d("div", Je, [
+            s("h2", Ye, i(p(n)("connect.whatsappBot.logs.emptyTitle")), 1),
+            s("p", je, i(p(n)("connect.whatsappBot.logs.emptyDescription")), 1)
+          ]))
+        ]),
+        B.value ? (l(), I(re, {
+          key: 0,
+          modelValue: N.value,
+          "onUpdate:modelValue": e[4] || (e[4] = (x) => N.value = x),
+          account: B.value
+        }, null, 8, ["modelValue", "account"])) : $("", !0)
+      ], 64);
+    };
+  }
+});
+export {
+  qe as default
+};