@feedmepos/mf-connect 0.1.115-prod → 0.1.117-dev

package/dist/WhatsappBot-DNvvaPey.js

@@ -0,0 +1,876 @@
+import { defineComponent as Z, ref as B, computed as M, watch as H, onBeforeUnmount as te, resolveComponent as k, openBlock as o, createElementBlock as i, createElementVNode as t, normalizeClass as R, unref as e, toDisplayString as a, createBlock as T, withCtx as S, createTextVNode as Q, createVNode as $, createCommentVNode as D, Fragment as N, renderList as X, mergeModels as le, useModel as se, isRef as ce } from "vue";
+import { u as Y } from "./vue-i18n-DXvyTCZf.js";
+import { useRouter as ie } from "vue-router";
+import { useCoreStore as pe } from "@feedmepos/mf-common";
+import { S as K, a as oe } from "./index-DKI8401o.js";
+import { w as J } from "./index-wsCCqwdr.js";
+import { u as ue, _ as de, w as me } from "./WhatsappNotificationGroupDialog.vue_vue_type_script_setup_true_lang-DI0pcHcE.js";
+import { R as U } from "./app-BjdLqYQq.js";
+import { _ as fe } from "./WhatsappAccountStatusLabel.vue_vue_type_script_setup_true_lang-CPlyzkp4.js";
+import { b as re } from "./browser-BSAOEeIM.js";
+const xe = { class: "min-w-0" }, ve = { class: "flex items-center gap-[12px]" }, he = ["src"], _e = { key: 1 }, ge = { class: "min-w-0 flex-1" }, ye = ["title"], be = { key: 1 }, we = { class: "text-[14px] leading-[20px] text-fm-color-typo-secondary break-all" }, Be = { class: "relative z-10 shrink-0" }, ke = ["aria-label", "title", "aria-expanded", "disabled", "aria-busy"], $e = { class: "text-[14px] text-fm-color-typo-error" }, Ce = { class: "flex items-center justify-between flex-wrap gap-[8px] border-t border-fm-color-neutral-gray-100 pt-[12px]" }, Ae = {
+  key: 0,
+  class: "text-[12px] text-fm-color-typo-tertiary"
+}, Ie = {
+  key: 0,
+  role: "alert",
+  class: "text-[14px] text-fm-color-typo-error"
+}, Te = /* @__PURE__ */ Z({
+  __name: "WhatsappAccountCard",
+  props: {
+    account: {}
+  },
+  emits: ["removed"],
+  setup(C, { emit: m }) {
+    const h = C, c = m, { t: n, locale: p } = Y(), u = B(!1), _ = B(""), f = B(!1), y = B(!1);
+    let x;
+    const {
+      name: A,
+      phoneNumber: b,
+      initials: I,
+      state: P,
+      avatarColor: w,
+      profilePictureUrl: l,
+      profilePictureFailed: g
+    } = ue(() => h.account), v = M(() => P.value === "connected"), d = M(() => ({
+      name: U["$connect-WHATSAPP_ACCOUNT"],
+      params: { clientId: h.account.clientId }
+    }));
+    function G(E) {
+      return new Intl.DateTimeFormat(p.value, {
+        year: "numeric",
+        month: "short",
+        day: "numeric"
+      }).format(new Date(E));
+    }
+    async function V() {
+      if (u.value) return;
+      const E = K.getBusinessId();
+      if (!E) {
+        _.value = n("connect.whatsappBot.errors.selectBusiness");
+        return;
+      }
+      const r = h.account.clientId, s = new AbortController();
+      x = s, u.value = !0, _.value = "";
+      try {
+        await J.deleteClient(E, r, s.signal), s.signal.aborted || c("removed", r);
+      } catch {
+        s.signal.aborted || (_.value = n("connect.whatsappBot.errors.removeAccount"));
+      } finally {
+        x === s && (x = void 0, u.value = !1);
+      }
+    }
+    function L() {
+      x == null || x.abort(), x = void 0, u.value = !1, _.value = "";
+    }
+    return H(
+      () => K.getBusinessId(),
+      () => {
+        L(), y.value = !1;
+      }
+    ), te(L), (E, r) => {
+      const s = k("RouterLink"), W = k("FmCircularProgress"), j = k("FmIcon"), q = k("FmMenuItem"), ee = k("FmMenu");
+      return o(), i("li", xe, [
+        t("div", {
+          class: R(["relative h-full border border-fm-color-neutral-gray-100 rounded-[16px] p-[20px] flex flex-col gap-[16px] bg-fm-color-neutral-white text-fm-color-typo-primary", {
+            "cursor-pointer transition-shadow hover:border-fm-color-neutral-gray-200 hover:fm-shadow-light-100": v.value
+          }])
+        }, [
+          t("div", ve, [
+            t("div", {
+              "aria-hidden": "true",
+              class: R(["w-[48px] h-[48px] rounded-full overflow-hidden shrink-0 flex items-center justify-center text-[16px] font-semibold text-fm-color-typo-white", e(w)])
+            }, [
+              e(l) && !e(g) ? (o(), i("img", {
+                key: 0,
+                src: e(l),
+                alt: "",
+                class: "w-full h-full object-cover",
+                referrerpolicy: "no-referrer",
+                onError: r[0] || (r[0] = (O) => g.value = !0)
+              }, null, 40, he)) : (o(), i("span", _e, a(e(I)), 1))
+            ], 2),
+            t("div", ge, [
+              t("h2", {
+                class: "text-[16px] leading-[24px] font-semibold truncate",
+                title: e(A)
+              }, [
+                v.value ? (o(), T(s, {
+                  key: 0,
+                  to: d.value,
+                  class: "text-inherit no-underline after:absolute after:inset-0 after:rounded-[16px] focus-visible:outline-none focus-visible:after:ring-[2px] focus-visible:after:ring-fm-color-primary focus-visible:after:ring-offset-[2px]"
+                }, {
+                  default: S(() => [
+                    Q(a(e(A)), 1)
+                  ]),
+                  _: 1
+                }, 8, ["to"])) : (o(), i("span", be, a(e(A)), 1))
+              ], 8, ye),
+              t("p", we, a(e(b)), 1)
+            ]),
+            t("div", Be, [
+              $(ee, {
+                placement: "bottom-end",
+                width: 220,
+                disabled: u.value,
+                "stop-click-propagation": "",
+                onMenuChanged: r[3] || (r[3] = (O) => f.value = O)
+              }, {
+                "menu-button": S(() => [
+                  t("button", {
+                    type: "button",
+                    "aria-label": e(n)("connect.whatsappBot.moreActions"),
+                    title: e(n)("connect.whatsappBot.moreActions"),
+                    "aria-haspopup": "menu",
+                    "aria-expanded": f.value,
+                    disabled: u.value,
+                    "aria-busy": u.value,
+                    class: R(["w-[32px] h-[32px] flex items-center justify-center rounded-[8px] text-fm-color-typo-tertiary transition-colors hover:bg-fm-color-neutral-gray-100 hover:text-fm-color-typo-primary focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-fm-color-primary disabled:cursor-wait disabled:opacity-50", { "bg-fm-color-neutral-gray-100": f.value }])
+                  }, [
+                    u.value ? (o(), T(W, {
+                      key: 0,
+                      size: "md",
+                      "aria-hidden": "true"
+                    })) : (o(), T(j, {
+                      key: 1,
+                      name: "more_vert",
+                      size: "sm",
+                      "aria-hidden": "true"
+                    }))
+                  ], 10, ke)
+                ]),
+                default: S(() => [
+                  v.value ? (o(), T(q, {
+                    key: 0,
+                    label: e(n)("connect.whatsappBot.notificationGroup.title"),
+                    disabled: u.value,
+                    "onUpdate:modelValue": r[1] || (r[1] = (O) => y.value = !0)
+                  }, {
+                    prepend: S(() => [
+                      $(j, {
+                        name: "notifications",
+                        size: "sm",
+                        outline: "",
+                        "aria-hidden": "true"
+                      })
+                    ]),
+                    _: 1
+                  }, 8, ["label", "disabled"])) : D("", !0),
+                  $(q, {
+                    disabled: u.value,
+                    "onUpdate:modelValue": r[2] || (r[2] = (O) => V())
+                  }, {
+                    prepend: S(() => [
+                      $(j, {
+                        name: "delete",
+                        size: "sm",
+                        outline: "",
+                        class: "text-fm-color-typo-error",
+                        "aria-hidden": "true"
+                      })
+                    ]),
+                    label: S(() => [
+                      t("span", $e, a(e(n)("connect.common.delete")), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["disabled"])
+                ]),
+                _: 1
+              }, 8, ["disabled"])
+            ])
+          ]),
+          t("div", Ce, [
+            $(fe, { state: e(P) }, null, 8, ["state"]),
+            v.value && C.account.connectedAt ? (o(), i("span", Ae, a(e(n)("connect.whatsappBot.connectedSince", {
+              date: G(C.account.connectedAt)
+            })), 1)) : D("", !0)
+          ]),
+          _.value ? (o(), i("p", Ie, a(_.value), 1)) : D("", !0)
+        ], 2),
+        y.value ? (o(), T(de, {
+          key: 0,
+          modelValue: y.value,
+          "onUpdate:modelValue": r[4] || (r[4] = (O) => y.value = O),
+          account: C.account
+        }, null, 8, ["modelValue", "account"])) : D("", !0)
+      ]);
+    };
+  }
+}), Fe = { class: "mt-[24px] grid grid-cols-[repeat(auto-fill,minmax(min(300px,100%),1fr))] gap-[16px]" }, Se = /* @__PURE__ */ Z({
+  __name: "WhatsappAccountList",
+  props: {
+    accounts: {}
+  },
+  emits: ["removed"],
+  setup(C, { emit: m }) {
+    const h = m;
+    return (c, n) => (o(), i("ul", Fe, [
+      (o(!0), i(N, null, X(C.accounts, (p) => (o(), T(Te, {
+        key: p.clientId,
+        account: p,
+        onRemoved: n[0] || (n[0] = (u) => h("removed", u))
+      }, null, 8, ["account"]))), 128))
+    ]));
+  }
+}), z = [
+  { key: "autoReplies", icon: "chat" },
+  { key: "settings", icon: "menu_book" },
+  { key: "escalations", icon: "notifications" },
+  { key: "excludedAccounts", icon: "pause_circle" }
+], Pe = { class: "text-[18px] font-semibold" }, Ve = { class: "flex flex-col gap-[24px] py-[8px]" }, Le = { class: "flex flex-col gap-[12px]" }, De = { class: "text-[13px] font-medium text-fm-color-typo-secondary" }, Ee = {
+  "aria-hidden": "true",
+  class: "flex gap-[8px]"
+}, Me = {
+  "aria-live": "polite",
+  "aria-atomic": "true",
+  class: "flex min-h-[260px] flex-col items-start gap-[16px]"
+}, We = { class: "sr-only" }, je = {
+  "aria-hidden": "true",
+  class: "flex h-[56px] w-[56px] items-center justify-center rounded-[16px] bg-fm-color-primary-oats text-fm-color-primary"
+}, Oe = { class: "flex flex-col gap-[8px]" }, Ue = { class: "text-[20px] leading-[28px] font-semibold" }, Ne = { class: "text-[14px] leading-[22px] text-fm-color-typo-secondary" }, Ge = {
+  key: 0,
+  class: "flex w-full flex-col items-center gap-[12px]"
+}, Re = {
+  key: 0,
+  role: "status",
+  class: "flex flex-col items-center gap-[12px] text-[14px] text-fm-color-typo-secondary"
+}, He = {
+  role: "alert",
+  class: "text-[14px] text-fm-color-typo-error"
+}, ze = ["src", "alt"], Qe = { class: "flex w-full min-w-0 flex-col gap-[6px]" }, Ke = { class: "text-[13px] font-medium text-fm-color-typo-secondary" }, Ze = ["href"], Je = { class: "w-full rounded-[12px] bg-fm-color-neutral-gray-100 p-[16px] text-[14px] leading-[20px]" }, Xe = { class: "flex w-full items-center justify-between gap-[12px]" }, Ye = /* @__PURE__ */ Z({
+  __name: "WhatsappBotTutorialDialog",
+  props: /* @__PURE__ */ le({
+    clientId: {}
+  }, {
+    modelValue: { type: Boolean, required: !0 },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(C) {
+    const m = C, h = se(C, "modelValue"), { t: c } = Y(), n = B(0), p = M(() => z[n.value]), u = M(
+      () => n.value === z.length - 1
+    ), _ = M(() => K.getBusinessId()), f = B(""), y = B(""), x = B(!1), A = B("");
+    let b;
+    async function I() {
+      b == null || b.abort();
+      const w = new AbortController();
+      b = w, f.value = "", y.value = "", A.value = "", x.value = !0;
+      try {
+        if (!_.value || !m.clientId) {
+          A.value = c(
+            _.value ? "connect.whatsappBot.notificationGroup.notReady" : "connect.whatsappBot.errors.selectBusiness"
+          );
+          return;
+        }
+        const l = await J.getNotificationGroup(
+          _.value,
+          m.clientId,
+          w.signal
+        );
+        if (w.signal.aborted) return;
+        const g = await re.toDataURL(l.inviteLink, {
+          width: 224,
+          margin: 2,
+          errorCorrectionLevel: "M"
+        });
+        if (w.signal.aborted) return;
+        f.value = l.inviteLink, y.value = g;
+      } catch (l) {
+        if (w.signal.aborted) return;
+        A.value = c(
+          l instanceof oe && l.status === 409 ? "connect.whatsappBot.notificationGroup.notReady" : l instanceof oe && l.status === 404 ? "connect.whatsappBot.errors.accountNotFound" : "connect.whatsappBot.errors.loadGroup"
+        );
+      } finally {
+        w.signal.aborted || (x.value = !1);
+      }
+    }
+    H(
+      [h, () => p.value.key, _, () => m.clientId],
+      ([w, l]) => {
+        w && l === "escalations" ? I() : b == null || b.abort();
+      }
+    ), te(() => b == null ? void 0 : b.abort());
+    function P() {
+      u.value ? h.value = !1 : n.value += 1;
+    }
+    return H(h, (w) => {
+      w && (n.value = 0);
+    }), (w, l) => {
+      const g = k("FmIcon"), v = k("FmCircularProgress"), d = k("FmButton"), G = k("FmDialog");
+      return o(), T(G, {
+        modelValue: h.value,
+        "onUpdate:modelValue": l[1] || (l[1] = (V) => h.value = V),
+        "min-width": "min(600px, calc(100% - 32px))",
+        "max-width": "600px",
+        "max-height": "90vh",
+        "dismiss-away": ""
+      }, {
+        "dialog-header": S(() => [
+          t("h2", Pe, a(e(c)("connect.whatsappBot.tutorial.title")), 1)
+        ]),
+        "dialog-footer": S(() => [
+          t("div", Xe, [
+            $(d, {
+              variant: "secondary",
+              "border-color": "neutral-gray-200",
+              label: e(c)("connect.common.back"),
+              disabled: n.value === 0,
+              "prepend-icon": "chevron_left",
+              class: "!rounded-full [&_.label]:text-[14px]",
+              onClick: l[0] || (l[0] = (V) => n.value -= 1)
+            }, null, 8, ["label", "disabled"]),
+            $(d, {
+              label: u.value ? e(c)("connect.whatsappBot.tutorial.done") : e(c)("connect.common.next"),
+              "append-icon": u.value ? void 0 : "chevron_right",
+              class: "!rounded-full [&_.label]:text-[14px]",
+              onClick: P
+            }, null, 8, ["label", "append-icon"])
+          ])
+        ]),
+        default: S(() => [
+          t("div", Ve, [
+            t("div", Le, [
+              t("p", De, a(e(c)("connect.whatsappBot.tutorial.progress", {
+                current: n.value + 1,
+                total: e(z).length
+              })), 1),
+              t("div", Ee, [
+                (o(!0), i(N, null, X(e(z), (V, L) => (o(), i("span", {
+                  key: L,
+                  class: R([
+                    "h-[4px] flex-1 rounded-full",
+                    L <= n.value ? "bg-fm-color-primary" : "bg-fm-color-neutral-gray-100"
+                  ])
+                }, null, 2))), 128))
+              ])
+            ]),
+            t("div", Me, [
+              t("span", We, a(e(c)("connect.whatsappBot.tutorial.progress", {
+                current: n.value + 1,
+                total: e(z).length
+              })), 1),
+              t("div", je, [
+                $(g, {
+                  name: p.value.icon,
+                  size: "lg"
+                }, null, 8, ["name"])
+              ]),
+              t("div", Oe, [
+                t("h3", Ue, a(e(c)(`connect.whatsappBot.tutorial.steps.${p.value.key}.title`)), 1),
+                t("p", Ne, a(e(c)(
+                  `connect.whatsappBot.tutorial.steps.${p.value.key}.description`
+                )), 1)
+              ]),
+              p.value.key === "escalations" ? (o(), i("div", Ge, [
+                x.value ? (o(), i("div", Re, [
+                  $(v),
+                  Q(" " + a(e(c)("connect.whatsappBot.notificationGroup.loading")), 1)
+                ])) : A.value ? (o(), i(N, { key: 1 }, [
+                  t("p", He, a(A.value), 1),
+                  $(d, {
+                    label: e(c)("connect.whatsappBot.tryAgain"),
+                    "prepend-icon": "refresh",
+                    class: "!rounded-full [&_.label]:text-[14px]",
+                    onClick: I
+                  }, null, 8, ["label"])
+                ], 64)) : f.value ? (o(), i(N, { key: 2 }, [
+                  t("img", {
+                    src: y.value,
+                    alt: e(c)("connect.whatsappBot.notificationGroup.qrAlt"),
+                    width: "224",
+                    height: "224",
+                    class: "rounded-[12px] border border-fm-color-neutral-gray-100"
+                  }, null, 8, ze),
+                  t("div", Qe, [
+                    t("span", Ke, a(e(c)("connect.whatsappBot.notificationGroup.inviteLink")), 1),
+                    t("a", {
+                      href: f.value,
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      class: "break-all rounded-[8px] border border-fm-color-neutral-gray-200 p-[12px] font-mono text-[13px] text-fm-color-primary underline focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-fm-color-primary"
+                    }, a(f.value), 9, Ze)
+                  ])
+                ], 64)) : D("", !0)
+              ])) : D("", !0),
+              t("p", Je, a(e(c)(`connect.whatsappBot.tutorial.steps.${p.value.key}.hint`)), 1)
+            ])
+          ])
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+}), qe = { class: "text-[18px] font-semibold" }, et = {
+  key: 0,
+  role: "status",
+  class: "flex flex-col items-center text-center gap-[8px] px-[8px] py-[40px]"
+}, tt = { class: "text-[18px] font-semibold" }, ot = { class: "text-[14px] text-fm-color-typo-secondary break-all" }, nt = {
+  key: 1,
+  class: "grid grid-cols-[minmax(0,1fr)_232px] xs:grid-cols-1 gap-[32px] p-[8px] xs:p-[0px]"
+}, at = { class: "flex flex-col gap-[20px] text-[14px] leading-[20px]" }, lt = { class: "text-fm-color-typo-secondary" }, st = { class: "flex flex-col gap-[14px]" }, rt = { class: "w-[22px] h-[22px] shrink-0 rounded-full bg-fm-color-neutral-gray-100 flex items-center justify-center text-[12px] font-semibold" }, ct = { key: 0 }, it = { class: "font-semibold" }, pt = { class: "font-semibold" }, ut = { class: "font-semibold" }, dt = { class: "font-semibold" }, mt = { key: 3 }, ft = { class: "text-[12px] leading-[16px] text-fm-color-typo-tertiary" }, xt = { class: "relative w-[232px] h-[232px] xs:justify-self-center border border-fm-color-neutral-gray-100 rounded-[12px] flex items-center justify-center overflow-hidden" }, vt = {
+  key: 0,
+  role: "status",
+  class: "flex flex-col items-center gap-[12px] text-[13px]"
+}, ht = {
+  key: 1,
+  class: "flex flex-col items-center text-center gap-[12px] p-[12px]"
+}, _t = {
+  role: "alert",
+  class: "text-[14px] text-fm-color-typo-error"
+}, gt = ["src", "alt"], yt = {
+  key: 3,
+  role: "status",
+  "aria-live": "polite",
+  class: "absolute inset-0 bg-fm-color-neutral-white/90 flex flex-col items-center justify-center gap-[10px] text-[13px] font-medium"
+}, bt = /* @__PURE__ */ Z({
+  __name: "WhatsappConnectDialog",
+  props: {
+    modelValue: { type: Boolean, required: !0 },
+    modelModifiers: {}
+  },
+  emits: /* @__PURE__ */ le(["connected"], ["update:modelValue"]),
+  setup(C, { emit: m }) {
+    const h = se(C, "modelValue"), c = m, { t: n } = Y(), p = B(""), u = B(!1), _ = B(""), f = B(!1), y = B();
+    let x, A, b;
+    function I() {
+      x == null || x.abort(), clearTimeout(A), A = void 0, clearTimeout(b), b = void 0;
+    }
+    async function P(l, g, v) {
+      if (!v.aborted) {
+        try {
+          const d = await J.getClient(l, g, v);
+          if (v.aborted) return;
+          if (f.value = d.status === "connected" || d.status === "connecting" && d.connectedAt !== null, d.status === "connected" && d.connectedAt !== null && d.profileStatus === "ready") {
+            I(), f.value = !1, y.value = d, c("connected", d), b = setTimeout(() => {
+              h.value = !1;
+            }, 1800);
+            return;
+          }
+          if (d.status === "disconnected") {
+            I(), f.value = !1, p.value = "", _.value = n("connect.whatsappBot.errors.qrExpired");
+            return;
+          }
+        } catch (d) {
+          if (v.aborted) return;
+          if (d instanceof oe && d.status === 409) {
+            I(), f.value = !1, p.value = "", _.value = n("connect.whatsappBot.errors.accountAlreadyLinked");
+            return;
+          }
+        }
+        v.aborted || (A = setTimeout(() => {
+          P(l, g, v);
+        }, 2e3));
+      }
+    }
+    async function w() {
+      I();
+      const l = new AbortController();
+      x = l, p.value = "", _.value = "", f.value = !1, y.value = void 0, u.value = !0;
+      try {
+        const g = K.getBusinessId();
+        if (!g)
+          throw new Error(n("connect.whatsappBot.errors.selectBusiness"));
+        const v = await J.createClient(
+          g,
+          l.signal
+        ), d = await re.toDataURL(v.qr, {
+          width: 224,
+          margin: 2,
+          errorCorrectionLevel: "M"
+        });
+        l.signal.aborted || (p.value = d, P(g, v.clientId, l.signal));
+      } catch (g) {
+        l.signal.aborted || (_.value = g instanceof Error ? g.message : n("connect.whatsappBot.errors.loadQr"));
+      } finally {
+        l.signal.aborted || (u.value = !1);
+      }
+    }
+    return H(
+      h,
+      (l) => {
+        l ? w() : I();
+      },
+      { immediate: !0 }
+    ), te(I), (l, g) => {
+      const v = k("i18n-t"), d = k("FmCircularProgress"), G = k("FmButton"), V = k("FmDialog");
+      return o(), T(V, {
+        modelValue: h.value,
+        "onUpdate:modelValue": g[0] || (g[0] = (L) => h.value = L),
+        "min-width": "min(720px, calc(100% - 32px))",
+        "max-width": "720px",
+        "max-height": "90vh",
+        "dismiss-away": ""
+      }, {
+        "dialog-header": S(() => [
+          t("h2", qe, a(e(n)("connect.whatsappBot.connectAccount")), 1)
+        ]),
+        default: S(() => {
+          var L, E, r;
+          return [
+            y.value ? (o(), i("div", et, [
+              g[1] || (g[1] = t("div", {
+                "aria-hidden": "true",
+                class: "w-[64px] h-[64px] rounded-full bg-fm-color-system-success-100 text-fm-color-typo-success flex items-center justify-center mb-[8px]"
+              }, [
+                t("svg", {
+                  width: "32",
+                  height: "32",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  "stroke-width": "2.2",
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round"
+                }, [
+                  t("path", { d: "M20 6 9 17l-5-5" })
+                ])
+              ], -1)),
+              t("h3", tt, a(e(n)("connect.whatsappBot.accountConnected")), 1),
+              t("p", ot, a(((L = y.value.account) == null ? void 0 : L.businessName) || ((E = y.value.account) == null ? void 0 : E.name) || e(n)("connect.whatsappBot.unnamedAccount")) + " · " + a(((r = y.value.account) == null ? void 0 : r.phoneNumber) || e(n)("connect.whatsappBot.phoneUnavailable")), 1)
+            ])) : (o(), i("div", nt, [
+              t("div", at, [
+                t("p", lt, a(e(n)("connect.whatsappBot.scanDescription")), 1),
+                t("ol", st, [
+                  (o(), i(N, null, X(4, (s) => t("li", {
+                    key: s,
+                    class: "flex gap-[12px]"
+                  }, [
+                    t("span", rt, a(s), 1),
+                    s === 1 ? (o(), i("span", ct, a(e(n)("connect.whatsappBot.steps.openApp")), 1)) : s === 2 ? (o(), T(v, {
+                      key: 1,
+                      keypath: "connect.whatsappBot.steps.openSettings",
+                      tag: "span",
+                      scope: "global"
+                    }, {
+                      menu: S(() => [
+                        t("b", it, a(e(n)("connect.whatsappBot.menu")), 1)
+                      ]),
+                      settings: S(() => [
+                        t("b", pt, a(e(n)("connect.whatsappBot.settings")), 1)
+                      ]),
+                      _: 1
+                    })) : s === 3 ? (o(), T(v, {
+                      key: 2,
+                      keypath: "connect.whatsappBot.steps.linkDevice",
+                      tag: "span",
+                      scope: "global"
+                    }, {
+                      linkedDevices: S(() => [
+                        t("b", ut, a(e(n)("connect.whatsappBot.linkedDevices")), 1)
+                      ]),
+                      linkDevice: S(() => [
+                        t("b", dt, a(e(n)("connect.whatsappBot.linkDevice")), 1)
+                      ]),
+                      _: 1
+                    })) : (o(), i("span", mt, a(e(n)("connect.whatsappBot.steps.scanQr")), 1))
+                  ])), 64))
+                ]),
+                t("p", ft, a(e(n)("connect.whatsappBot.connectionNote")), 1)
+              ]),
+              t("div", xt, [
+                u.value ? (o(), i("div", vt, [
+                  $(d),
+                  Q(a(e(n)("connect.whatsappBot.generatingQr")), 1)
+                ])) : _.value ? (o(), i("div", ht, [
+                  t("p", _t, a(_.value), 1),
+                  $(G, {
+                    label: e(n)("connect.whatsappBot.tryAgain"),
+                    "prepend-icon": "refresh",
+                    class: "!rounded-full [&_.label]:text-[14px]",
+                    onClick: w
+                  }, null, 8, ["label"])
+                ])) : p.value ? (o(), i("img", {
+                  key: 2,
+                  src: p.value,
+                  alt: e(n)("connect.whatsappBot.qrAlt"),
+                  width: "224",
+                  height: "224",
+                  class: R({ "opacity-20": f.value })
+                }, null, 10, gt)) : D("", !0),
+                f.value ? (o(), i("div", yt, [
+                  $(d),
+                  Q(" " + a(e(n)("connect.whatsappBot.connecting")), 1)
+                ])) : D("", !0)
+              ])
+            ]))
+          ];
+        }),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+}), wt = { class: "mt-[24px] border border-fm-color-neutral-gray-200 rounded-[16px] px-[24px] xs:px-[16px] py-[32px] flex flex-col items-center text-center gap-[8px]" }, Bt = { class: "text-[20px] leading-[28px] font-bold" }, kt = { class: "text-[14px] leading-[20px] text-fm-color-typo-secondary max-w-[420px] [text-wrap:pretty]" }, $t = ["aria-label"], Ct = {
+  "aria-hidden": "true",
+  class: "flex h-[36px] w-[36px] shrink-0 items-center justify-center rounded-[10px] bg-fm-color-primary-oats text-fm-color-primary"
+}, At = { class: "flex flex-col gap-[4px]" }, It = { class: "text-[14px] leading-[20px] font-semibold" }, Tt = { class: "text-[14px] leading-[20px] text-fm-color-typo-secondary" }, Ft = /* @__PURE__ */ Z({
+  __name: "WhatsappEmptyState",
+  emits: ["connect"],
+  setup(C, { emit: m }) {
+    const h = m, { t: c } = Y();
+    return (n, p) => {
+      const u = k("FmIcon"), _ = k("FmButton");
+      return o(), i("div", wt, [
+        p[1] || (p[1] = t("div", { class: "w-[72px] h-[72px] rounded-full bg-fm-color-primary-oats text-fm-color-primary flex items-center justify-center mb-[12px]" }, [
+          t("svg", {
+            width: "34",
+            height: "34",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "1.6",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            "aria-hidden": "true"
+          }, [
+            t("path", { d: "M7.9 20A9 9 0 1 0 4 16.1L2 22Z" }),
+            t("path", { d: "M9 10h.01M12 10h.01M15 10h.01" })
+          ])
+        ], -1)),
+        t("h2", Bt, a(e(c)("connect.whatsappBot.emptyTitle")), 1),
+        t("p", kt, a(e(c)("connect.whatsappBot.emptyDescription")), 1),
+        t("ul", {
+          "aria-label": e(c)("connect.whatsappBot.tutorial.title"),
+          class: "mt-[24px] grid w-full max-w-[880px] grid-cols-2 xs:grid-cols-1 gap-[20px] text-left"
+        }, [
+          (o(!0), i(N, null, X(e(z), (f) => (o(), i("li", {
+            key: f.key,
+            class: "flex items-start gap-[12px]"
+          }, [
+            t("div", Ct, [
+              $(u, {
+                name: f.icon,
+                size: "sm"
+              }, null, 8, ["name"])
+            ]),
+            t("div", At, [
+              t("h3", It, a(e(c)(`connect.whatsappBot.tutorial.steps.${f.key}.title`)), 1),
+              t("p", Tt, a(e(c)(`connect.whatsappBot.tutorial.steps.${f.key}.description`)), 1)
+            ])
+          ]))), 128))
+        ], 8, $t),
+        $(_, {
+          class: "mt-[16px] !rounded-full !px-[20px] [&_.label]:text-[14px]",
+          label: e(c)("connect.whatsappBot.connectAccount"),
+          "prepend-icon": "add",
+          onClick: p[0] || (p[0] = (f) => h("connect"))
+        }, null, 8, ["label"])
+      ]);
+    };
+  }
+});
+function St(C) {
+  const m = B(!1);
+  let h = !1, c = !1, n = !1;
+  function p() {
+    return `feedme_connect_whatsapp_bot_tutorial:${C.value}`;
+  }
+  function u(y) {
+    let x = n;
+    try {
+      x || (x = localStorage.getItem(p()) === "1");
+    } catch {
+    }
+    h = !!C.value && !y && !x, c = !1;
+  }
+  function _() {
+    c = h;
+  }
+  function f() {
+    if (c) {
+      m.value = !0, n = !0;
+      try {
+        localStorage.setItem(p(), "1");
+      } catch {
+      }
+    }
+    h = !1, c = !1;
+  }
+  return H(
+    C,
+    () => {
+      m.value = !1, h = !1, c = !1, n = !1;
+    },
+    { flush: "sync" }
+  ), { tutorialOpen: m, startConnection: u, onConnected: _, onConnectionClosed: f };
+}
+const Pt = { class: "px-[24px] xs:px-[12px] pt-[20px] pb-[40px] text-fm-color-typo-primary" }, Vt = { class: "flex items-center justify-between gap-[16px] flex-wrap min-h-[40px]" }, Lt = { class: "flex items-center gap-8" }, Dt = { class: "text-[24px] leading-[32px] font-semibold tracking-[-0.01em]" }, Et = { class: "flex items-center gap-[8px] flex-wrap" }, Mt = {
+  key: 0,
+  class: "mt-[8px] w-full text-[14px] leading-[20px] text-fm-color-typo-secondary [text-wrap:pretty]"
+}, Wt = ["aria-label"], jt = {
+  key: 3,
+  role: "status",
+  class: "mt-[24px] py-[56px] flex flex-col items-center gap-[12px] text-[14px] text-fm-color-typo-secondary"
+}, Ot = {
+  key: 4,
+  class: "mt-[24px] border border-fm-color-neutral-gray-200 rounded-[16px] px-[24px] py-[56px] flex flex-col items-center text-center gap-[16px]"
+}, Ut = {
+  role: "alert",
+  class: "text-[14px] text-fm-color-typo-error"
+}, Yt = /* @__PURE__ */ Z({
+  __name: "WhatsappBot",
+  setup(C) {
+    const { t: m } = Y(), h = ie(), c = pe(), n = M(() => {
+      var r, s;
+      return !!((s = (r = c.sessionUser.value) == null ? void 0 : r.role) != null && s.isAdmin);
+    }), p = M(() => K.getBusinessId()), { tutorialOpen: u, startConnection: _, onConnected: f, onConnectionClosed: y } = St(p), x = B([]), A = B(), b = B(!0), I = B("");
+    let P, w;
+    const l = M(
+      () => x.value.filter((r) => me(r) !== void 0)
+    ), g = M(
+      () => [
+        {
+          label: m("connect.whatsappBot.accounts"),
+          value: U["$connect-WHATSAPP_BOT"],
+          badge: l.value.length
+        },
+        {
+          label: m("connect.whatsappBot.settings"),
+          value: U["$connect-WHATSAPP_BOT_SETTINGS"]
+        },
+        ...n.value ? [
+          {
+            label: m("connect.whatsappBot.logs.title"),
+            value: U["$connect-WHATSAPP_BOT_LOGS"]
+          }
+        ] : []
+      ]
+    ), v = M(() => {
+      const r = h.currentRoute.value.name;
+      return g.value.some((s) => s.value === r) ? r : U["$connect-WHATSAPP_BOT"];
+    });
+    async function d(r = !1) {
+      clearTimeout(w), P == null || P.abort();
+      const s = new AbortController();
+      P = s, r || (b.value = !0, I.value = "");
+      try {
+        const W = K.getBusinessId();
+        if (!W)
+          throw new Error(m("connect.whatsappBot.errors.selectBusiness"));
+        const j = await J.listClients(W, s.signal);
+        s.signal.aborted || (x.value = j, I.value = "");
+      } catch (W) {
+        !s.signal.aborted && !r && (I.value = W instanceof Error ? W.message : m("connect.whatsappBot.errors.loadSessions"));
+      } finally {
+        s.signal.aborted || (b.value = !1, w = setTimeout(() => void d(!0), 1e4));
+      }
+    }
+    function G(r) {
+      x.value = x.value.filter(
+        (s) => s.clientId !== r
+      ), d(!0);
+    }
+    const V = B(!1);
+    function L() {
+      _(l.value.length > 0), V.value = !0;
+    }
+    function E(r) {
+      A.value = r.clientId, x.value = [
+        ...x.value.filter((s) => s.clientId !== r.clientId),
+        r
+      ], f();
+    }
+    return H(V, (r) => {
+      r || (y(), d());
+    }), H(
+      p,
+      () => {
+        V.value = !1, A.value = void 0, x.value = [], d();
+      },
+      { immediate: !0 }
+    ), te(() => {
+      P == null || P.abort(), clearTimeout(w);
+    }), (r, s) => {
+      var ne, ae;
+      const W = k("FmPill"), j = k("FmButton"), q = k("RouterLink"), ee = k("RouterView"), O = k("FmCircularProgress");
+      return o(), i(N, null, [
+        t("div", Pt, [
+          t("div", Vt, [
+            t("div", Lt, [
+              t("h1", Dt, a(e(m)("connect.navigation.whatsappBot")), 1),
+              $(W, { variant: "beta" })
+            ]),
+            t("div", Et, [
+              $(j, {
+                variant: "tertiary",
+                label: e(m)("connect.whatsappBot.tutorial.learnMore"),
+                "prepend-icon": "help_outline",
+                class: "!h-[36px] !rounded-full !px-[16px] [&_.label]:text-[14px]",
+                onClick: s[0] || (s[0] = (F) => u.value = !0)
+              }, null, 8, ["label"]),
+              v.value === e(U)["$connect-WHATSAPP_BOT"] && l.value.length ? (o(), T(j, {
+                key: 0,
+                label: e(m)("connect.whatsappBot.connectAccountCta"),
+                "prepend-icon": "add",
+                class: "!h-[36px] !rounded-full !px-[16px] [&_.label]:text-[14px]",
+                onClick: L
+              }, null, 8, ["label"])) : D("", !0)
+            ])
+          ]),
+          l.value.length ? (o(), i("p", Mt, a(e(m)("connect.whatsappBot.description")), 1)) : D("", !0),
+          t("nav", {
+            "aria-label": e(m)("connect.navigation.whatsappBot"),
+            class: "mt-[16px] flex gap-[24px] overflow-x-auto border-b border-fm-color-neutral-gray-100"
+          }, [
+            (o(!0), i(N, null, X(g.value, (F) => (o(), T(q, {
+              key: F.value,
+              to: { name: F.value },
+              "aria-current": v.value === F.value ? "page" : void 0,
+              class: R([
+                "flex h-[40px] shrink-0 items-center gap-[6px] whitespace-nowrap border-b-[2px] px-[2px] text-[14px] leading-[20px] font-medium no-underline transition-colors hover:text-fm-color-primary focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-inset focus-visible:ring-fm-color-primary",
+                v.value === F.value ? "border-fm-color-primary text-fm-color-primary" : "border-transparent text-fm-color-typo-secondary"
+              ])
+            }, {
+              default: S(() => [
+                Q(a(F.label) + " ", 1),
+                F.badge ? (o(), i("span", {
+                  key: 0,
+                  class: R([
+                    "min-w-[20px] rounded-full px-[6px] text-center text-[12px] leading-[20px] font-semibold tabular-nums",
+                    v.value === F.value ? "bg-fm-color-primary-oats text-fm-color-primary" : "bg-fm-color-neutral-gray-100 text-fm-color-typo-secondary"
+                  ])
+                }, a(F.badge), 3)) : D("", !0)
+              ]),
+              _: 2
+            }, 1032, ["to", "aria-current", "class"]))), 128))
+          ], 8, Wt),
+          v.value === e(U)["$connect-WHATSAPP_BOT_SETTINGS"] ? (o(), T(ee, { key: 1 })) : v.value === e(U)["$connect-WHATSAPP_BOT_LOGS"] ? (o(), T(ee, {
+            key: 2,
+            accounts: l.value
+          }, null, 8, ["accounts"])) : b.value ? (o(), i("div", jt, [
+            $(O),
+            Q(" " + a(e(m)("connect.whatsappBot.loadingSessions")), 1)
+          ])) : I.value ? (o(), i("div", Ot, [
+            t("p", Ut, a(I.value), 1),
+            $(j, {
+              label: e(m)("connect.whatsappBot.tryAgain"),
+              "prepend-icon": "refresh",
+              class: "!rounded-full [&_.label]:text-[14px]",
+              onClick: s[1] || (s[1] = (F) => d())
+            }, null, 8, ["label"])
+          ])) : l.value.length ? (o(), T(Se, {
+            key: 5,
+            accounts: l.value,
+            onRemoved: G
+          }, null, 8, ["accounts"])) : (o(), T(Ft, {
+            key: 6,
+            onConnect: L
+          }))
+        ]),
+        (o(), T(bt, {
+          key: p.value,
+          modelValue: V.value,
+          "onUpdate:modelValue": s[2] || (s[2] = (F) => V.value = F),
+          onConnected: E
+        }, null, 8, ["modelValue"])),
+        $(Ye, {
+          modelValue: e(u),
+          "onUpdate:modelValue": s[3] || (s[3] = (F) => ce(u) ? u.value = F : null),
+          "client-id": ((ne = l.value.find((F) => F.clientId === A.value)) == null ? void 0 : ne.clientId) ?? ((ae = l.value[0]) == null ? void 0 : ae.clientId)
+        }, null, 8, ["modelValue", "client-id"])
+      ], 64);
+    };
+  }
+});
+export {
+  Yt as default
+};