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

package/dist/WhatsappBot-DTWZAXhi.js

@@ -0,0 +1,878 @@
+import { defineComponent as Z, ref as w, computed as M, watch as H, onBeforeUnmount as te, resolveComponent as B, openBlock as o, createElementBlock as p, createElementVNode as t, normalizeClass as R, unref as e, toDisplayString as a, createBlock as A, withCtx as S, createTextVNode as Q, createVNode as k, createCommentVNode as D, Fragment as G, renderList as X, mergeModels as ae, useModel as le, isRef as ce } from "vue";
+import { u as Y } from "./vue-i18n-CDSTH7g5.js";
+import { useRouter as ie } from "vue-router";
+import { useCoreStore as pe } from "@feedmepos/mf-common";
+import { S as K, a as se } from "./index-CeafUn1o.js";
+import { w as J } from "./index-DzYFQGSw.js";
+import { u as ue, _ as de, w as me } from "./WhatsappNotificationGroupDialog.vue_vue_type_script_setup_true_lang-CMeaNKJt.js";
+import { R as N } from "./app-DX7OWVY2.js";
+import { _ as fe } from "./WhatsappAccountStatusLabel.vue_vue_type_script_setup_true_lang-C3L7vWZE.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($, { emit: m }) {
+    const _ = $, s = m, { t: n, locale: u } = Y(), d = w(!1), g = w(""), x = w(!1), y = w(!1);
+    let v;
+    const {
+      name: C,
+      phoneNumber: b,
+      initials: I,
+      state: T,
+      avatarColor: E,
+      profilePictureUrl: l,
+      profilePictureFailed: i
+    } = ue(() => _.account), f = M(() => T.value === "connected"), h = M(() => ({
+      name: N["$connect-WHATSAPP_ACCOUNT"],
+      params: { clientId: _.account.clientId }
+    }));
+    function W(V) {
+      return new Intl.DateTimeFormat(u.value, {
+        year: "numeric",
+        month: "short",
+        day: "numeric"
+      }).format(new Date(V));
+    }
+    async function L() {
+      if (d.value) return;
+      const V = K.getBusinessId();
+      if (!V) {
+        g.value = n("connect.whatsappBot.errors.selectBusiness");
+        return;
+      }
+      const c = _.account.clientId, r = new AbortController();
+      v = r, d.value = !0, g.value = "";
+      try {
+        await J.deleteClient(V, c, r.signal), r.signal.aborted || s("removed", c);
+      } catch {
+        r.signal.aborted || (g.value = n("connect.whatsappBot.errors.removeAccount"));
+      } finally {
+        v === r && (v = void 0, d.value = !1);
+      }
+    }
+    function P() {
+      v == null || v.abort(), v = void 0, d.value = !1, g.value = "";
+    }
+    return H(
+      () => K.getBusinessId(),
+      () => {
+        P(), y.value = !1;
+      }
+    ), te(P), (V, c) => {
+      const r = B("RouterLink"), j = B("FmCircularProgress"), O = B("FmIcon"), q = B("FmMenuItem"), ee = B("FmMenu");
+      return o(), p("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": f.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(E)])
+            }, [
+              e(l) && !e(i) ? (o(), p("img", {
+                key: 0,
+                src: e(l),
+                alt: "",
+                class: "w-full h-full object-cover",
+                referrerpolicy: "no-referrer",
+                onError: c[0] || (c[0] = (U) => i.value = !0)
+              }, null, 40, he)) : (o(), p("span", _e, a(e(I)), 1))
+            ], 2),
+            t("div", ge, [
+              t("h2", {
+                class: "text-[16px] leading-[24px] font-semibold truncate",
+                title: e(C)
+              }, [
+                f.value ? (o(), A(r, {
+                  key: 0,
+                  to: h.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(C)), 1)
+                  ]),
+                  _: 1
+                }, 8, ["to"])) : (o(), p("span", be, a(e(C)), 1))
+              ], 8, ye),
+              t("p", we, a(e(b)), 1)
+            ]),
+            t("div", Be, [
+              k(ee, {
+                placement: "bottom-end",
+                width: 220,
+                disabled: d.value,
+                "stop-click-propagation": "",
+                onMenuChanged: c[3] || (c[3] = (U) => x.value = U)
+              }, {
+                "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": x.value,
+                    disabled: d.value,
+                    "aria-busy": d.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": x.value }])
+                  }, [
+                    d.value ? (o(), A(j, {
+                      key: 0,
+                      size: "md",
+                      "aria-hidden": "true"
+                    })) : (o(), A(O, {
+                      key: 1,
+                      name: "more_vert",
+                      size: "sm",
+                      "aria-hidden": "true"
+                    }))
+                  ], 10, ke)
+                ]),
+                default: S(() => [
+                  f.value ? (o(), A(q, {
+                    key: 0,
+                    label: e(n)("connect.whatsappBot.notificationGroup.title"),
+                    disabled: d.value,
+                    "onUpdate:modelValue": c[1] || (c[1] = (U) => y.value = !0)
+                  }, {
+                    prepend: S(() => [
+                      k(O, {
+                        name: "notifications",
+                        size: "sm",
+                        outline: "",
+                        "aria-hidden": "true"
+                      })
+                    ]),
+                    _: 1
+                  }, 8, ["label", "disabled"])) : D("", !0),
+                  k(q, {
+                    disabled: d.value,
+                    "onUpdate:modelValue": c[2] || (c[2] = (U) => L())
+                  }, {
+                    prepend: S(() => [
+                      k(O, {
+                        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, [
+            k(fe, { state: e(T) }, null, 8, ["state"]),
+            f.value && $.account.connectedAt ? (o(), p("span", Ae, a(e(n)("connect.whatsappBot.connectedSince", {
+              date: W($.account.connectedAt)
+            })), 1)) : D("", !0)
+          ]),
+          g.value ? (o(), p("p", Ie, a(g.value), 1)) : D("", !0)
+        ], 2),
+        y.value ? (o(), A(de, {
+          key: 0,
+          modelValue: y.value,
+          "onUpdate:modelValue": c[4] || (c[4] = (U) => y.value = U),
+          account: $.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($, { emit: m }) {
+    const _ = m;
+    return (s, n) => (o(), p("ul", Fe, [
+      (o(!0), p(G, null, X($.accounts, (u) => (o(), A(Te, {
+        key: u.clientId,
+        account: u,
+        onRemoved: n[0] || (n[0] = (d) => _("removed", d))
+      }, 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,
+  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__ */ ae({
+    clientId: {}
+  }, {
+    modelValue: { type: Boolean, required: !0 },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup($) {
+    const m = $, _ = le($, "modelValue"), { t: s } = Y(), n = w(0), u = M(() => z[n.value]), d = M(
+      () => n.value === z.length - 1
+    ), g = M(() => K.getBusinessId()), x = w(""), y = w(""), v = w(!1), C = w("");
+    let b;
+    function I(l) {
+      if (l instanceof se) {
+        if (l.status === 409)
+          return s("connect.whatsappBot.notificationGroup.notReady");
+        if (l.status === 404)
+          return s("connect.whatsappBot.errors.accountNotFound");
+      }
+      return s("connect.whatsappBot.errors.loadGroup");
+    }
+    async function T() {
+      b == null || b.abort();
+      const l = new AbortController();
+      b = l, x.value = "", y.value = "", C.value = "", v.value = !0;
+      try {
+        if (!g.value || !m.clientId) {
+          C.value = s(
+            g.value ? "connect.whatsappBot.notificationGroup.notReady" : "connect.whatsappBot.errors.selectBusiness"
+          );
+          return;
+        }
+        const i = await J.getNotificationGroup(
+          g.value,
+          m.clientId,
+          l.signal
+        );
+        if (l.signal.aborted) return;
+        const f = await re.toDataURL(i.inviteLink, {
+          width: 224,
+          margin: 2,
+          errorCorrectionLevel: "M"
+        });
+        if (l.signal.aborted) return;
+        x.value = i.inviteLink, y.value = f;
+      } catch (i) {
+        if (l.signal.aborted) return;
+        C.value = I(i);
+      } finally {
+        l.signal.aborted || (v.value = !1);
+      }
+    }
+    H(
+      [_, () => u.value.key, g, () => m.clientId],
+      ([l, i]) => {
+        l && i === "escalations" ? T() : b == null || b.abort();
+      }
+    ), te(() => b == null ? void 0 : b.abort());
+    function E() {
+      d.value ? _.value = !1 : n.value += 1;
+    }
+    return H(_, (l) => {
+      l && (n.value = 0);
+    }), (l, i) => {
+      const f = B("FmIcon"), h = B("FmCircularProgress"), W = B("FmButton"), L = B("FmDialog");
+      return o(), A(L, {
+        modelValue: _.value,
+        "onUpdate:modelValue": i[1] || (i[1] = (P) => _.value = P),
+        "min-width": "min(600px, calc(100% - 32px))",
+        "max-width": "600px",
+        "max-height": "90vh",
+        "dismiss-away": ""
+      }, {
+        "dialog-header": S(() => [
+          t("h2", Pe, a(e(s)("connect.whatsappBot.tutorial.title")), 1)
+        ]),
+        "dialog-footer": S(() => [
+          t("div", Xe, [
+            k(W, {
+              variant: "secondary",
+              "border-color": "neutral-gray-200",
+              label: e(s)("connect.common.back"),
+              disabled: n.value === 0,
+              "prepend-icon": "chevron_left",
+              class: "!rounded-full [&_.label]:text-[14px]",
+              onClick: i[0] || (i[0] = (P) => n.value -= 1)
+            }, null, 8, ["label", "disabled"]),
+            k(W, {
+              label: d.value ? e(s)("connect.whatsappBot.tutorial.done") : e(s)("connect.common.next"),
+              "append-icon": d.value ? void 0 : "chevron_right",
+              class: "!rounded-full [&_.label]:text-[14px]",
+              onClick: E
+            }, null, 8, ["label", "append-icon"])
+          ])
+        ]),
+        default: S(() => [
+          t("div", Ve, [
+            t("div", Le, [
+              t("p", De, a(e(s)("connect.whatsappBot.tutorial.progress", {
+                current: n.value + 1,
+                total: e(z).length
+              })), 1),
+              t("div", Ee, [
+                (o(!0), p(G, null, X(e(z), (P, V) => (o(), p("span", {
+                  key: V,
+                  class: R([
+                    "h-[4px] flex-1 rounded-full",
+                    V <= n.value ? "bg-fm-color-primary" : "bg-fm-color-neutral-gray-100"
+                  ])
+                }, null, 2))), 128))
+              ])
+            ]),
+            t("div", Me, [
+              t("span", We, a(e(s)("connect.whatsappBot.tutorial.progress", {
+                current: n.value + 1,
+                total: e(z).length
+              })), 1),
+              t("div", je, [
+                k(f, {
+                  name: u.value.icon,
+                  size: "lg"
+                }, null, 8, ["name"])
+              ]),
+              t("div", Oe, [
+                t("h3", Ue, a(e(s)(`connect.whatsappBot.tutorial.steps.${u.value.key}.title`)), 1),
+                t("p", Ne, a(e(s)(
+                  `connect.whatsappBot.tutorial.steps.${u.value.key}.description`
+                )), 1)
+              ]),
+              u.value.key === "escalations" ? (o(), p("div", Ge, [
+                v.value ? (o(), p("output", Re, [
+                  k(h),
+                  Q(" " + a(e(s)("connect.whatsappBot.notificationGroup.loading")), 1)
+                ])) : C.value ? (o(), p(G, { key: 1 }, [
+                  t("p", He, a(C.value), 1),
+                  k(W, {
+                    label: e(s)("connect.whatsappBot.tryAgain"),
+                    "prepend-icon": "refresh",
+                    class: "!rounded-full [&_.label]:text-[14px]",
+                    onClick: T
+                  }, null, 8, ["label"])
+                ], 64)) : x.value ? (o(), p(G, { key: 2 }, [
+                  t("img", {
+                    src: y.value,
+                    alt: e(s)("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(s)("connect.whatsappBot.notificationGroup.inviteLink")), 1),
+                    t("a", {
+                      href: x.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(x.value), 9, Ze)
+                  ])
+                ], 64)) : D("", !0)
+              ])) : D("", !0),
+              t("p", Je, a(e(s)(`connect.whatsappBot.tutorial.steps.${u.value.key}.hint`)), 1)
+            ])
+          ])
+        ]),
+        _: 1
+      }, 8, ["modelValue"]);
+    };
+  }
+}), qe = { class: "text-[18px] font-semibold" }, et = {
+  key: 0,
+  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,
+  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,
+  "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__ */ ae(["connected"], ["update:modelValue"]),
+  setup($, { emit: m }) {
+    const _ = le($, "modelValue"), s = m, { t: n } = Y(), u = w(""), d = w(!1), g = w(""), x = w(!1), y = w();
+    let v, C, b;
+    function I() {
+      v == null || v.abort(), clearTimeout(C), C = void 0, clearTimeout(b), b = void 0;
+    }
+    async function T(l, i, f) {
+      if (!f.aborted) {
+        try {
+          const h = await J.getClient(l, i, f);
+          if (f.aborted) return;
+          if (x.value = h.status === "connected" || h.status === "connecting" && h.connectedAt !== null, h.status === "connected" && h.connectedAt !== null && h.profileStatus === "ready") {
+            I(), x.value = !1, y.value = h, s("connected", h), b = setTimeout(() => {
+              _.value = !1;
+            }, 1800);
+            return;
+          }
+          if (h.status === "disconnected") {
+            I(), x.value = !1, u.value = "", g.value = n("connect.whatsappBot.errors.qrExpired");
+            return;
+          }
+        } catch (h) {
+          if (f.aborted) return;
+          if (h instanceof se && h.status === 409) {
+            I(), x.value = !1, u.value = "", g.value = n("connect.whatsappBot.errors.accountAlreadyLinked");
+            return;
+          }
+        }
+        f.aborted || (C = setTimeout(() => {
+          T(l, i, f);
+        }, 2e3));
+      }
+    }
+    async function E() {
+      I();
+      const l = new AbortController();
+      v = l, u.value = "", g.value = "", x.value = !1, y.value = void 0, d.value = !0;
+      try {
+        const i = K.getBusinessId();
+        if (!i)
+          throw new Error(n("connect.whatsappBot.errors.selectBusiness"));
+        const f = await J.createClient(
+          i,
+          l.signal
+        ), h = await re.toDataURL(f.qr, {
+          width: 224,
+          margin: 2,
+          errorCorrectionLevel: "M"
+        });
+        l.signal.aborted || (u.value = h, T(i, f.clientId, l.signal));
+      } catch (i) {
+        l.signal.aborted || (g.value = i instanceof Error ? i.message : n("connect.whatsappBot.errors.loadQr"));
+      } finally {
+        l.signal.aborted || (d.value = !1);
+      }
+    }
+    return H(
+      _,
+      (l) => {
+        l ? E() : I();
+      },
+      { immediate: !0 }
+    ), te(I), (l, i) => {
+      const f = B("i18n-t"), h = B("FmCircularProgress"), W = B("FmButton"), L = B("FmDialog");
+      return o(), A(L, {
+        modelValue: _.value,
+        "onUpdate:modelValue": i[0] || (i[0] = (P) => _.value = P),
+        "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 P, V, c;
+          return [
+            y.value ? (o(), p("output", et, [
+              i[1] || (i[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(((P = y.value.account) == null ? void 0 : P.businessName) || ((V = y.value.account) == null ? void 0 : V.name) || e(n)("connect.whatsappBot.unnamedAccount")) + " · " + a(((c = y.value.account) == null ? void 0 : c.phoneNumber) || e(n)("connect.whatsappBot.phoneUnavailable")), 1)
+            ])) : (o(), p("div", nt, [
+              t("div", at, [
+                t("p", lt, a(e(n)("connect.whatsappBot.scanDescription")), 1),
+                t("ol", st, [
+                  (o(), p(G, null, X(4, (r) => t("li", {
+                    key: r,
+                    class: "flex gap-[12px]"
+                  }, [
+                    t("span", rt, a(r), 1),
+                    r === 1 ? (o(), p("span", ct, a(e(n)("connect.whatsappBot.steps.openApp")), 1)) : r === 2 ? (o(), A(f, {
+                      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
+                    })) : r === 3 ? (o(), A(f, {
+                      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(), p("span", mt, a(e(n)("connect.whatsappBot.steps.scanQr")), 1))
+                  ])), 64))
+                ]),
+                t("p", ft, a(e(n)("connect.whatsappBot.connectionNote")), 1)
+              ]),
+              t("div", xt, [
+                d.value ? (o(), p("output", vt, [
+                  k(h),
+                  Q(a(e(n)("connect.whatsappBot.generatingQr")), 1)
+                ])) : g.value ? (o(), p("div", ht, [
+                  t("p", _t, a(g.value), 1),
+                  k(W, {
+                    label: e(n)("connect.whatsappBot.tryAgain"),
+                    "prepend-icon": "refresh",
+                    class: "!rounded-full [&_.label]:text-[14px]",
+                    onClick: E
+                  }, null, 8, ["label"])
+                ])) : u.value ? (o(), p("img", {
+                  key: 2,
+                  src: u.value,
+                  alt: e(n)("connect.whatsappBot.qrAlt"),
+                  width: "224",
+                  height: "224",
+                  class: R({ "opacity-20": x.value })
+                }, null, 10, gt)) : D("", !0),
+                x.value ? (o(), p("output", yt, [
+                  k(h),
+                  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($, { emit: m }) {
+    const _ = m, { t: s } = Y();
+    return (n, u) => {
+      const d = B("FmIcon"), g = B("FmButton");
+      return o(), p("div", wt, [
+        u[1] || (u[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(s)("connect.whatsappBot.emptyTitle")), 1),
+        t("p", kt, a(e(s)("connect.whatsappBot.emptyDescription")), 1),
+        t("ul", {
+          "aria-label": e(s)("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), p(G, null, X(e(z), (x) => (o(), p("li", {
+            key: x.key,
+            class: "flex items-start gap-[12px]"
+          }, [
+            t("div", Ct, [
+              k(d, {
+                name: x.icon,
+                size: "sm"
+              }, null, 8, ["name"])
+            ]),
+            t("div", At, [
+              t("h3", It, a(e(s)(`connect.whatsappBot.tutorial.steps.${x.key}.title`)), 1),
+              t("p", Tt, a(e(s)(`connect.whatsappBot.tutorial.steps.${x.key}.description`)), 1)
+            ])
+          ]))), 128))
+        ], 8, $t),
+        k(g, {
+          class: "mt-[16px] !rounded-full !px-[20px] [&_.label]:text-[14px]",
+          label: e(s)("connect.whatsappBot.connectAccount"),
+          "prepend-icon": "add",
+          onClick: u[0] || (u[0] = (x) => _("connect"))
+        }, null, 8, ["label"])
+      ]);
+    };
+  }
+});
+function St($) {
+  const m = w(!1);
+  let _ = !1, s = !1, n = !1;
+  function u() {
+    return `feedme_connect_whatsapp_bot_tutorial:${$.value}`;
+  }
+  function d(y) {
+    let v = n;
+    try {
+      v || (v = localStorage.getItem(u()) === "1");
+    } catch {
+    }
+    _ = !!$.value && !y && !v, s = !1;
+  }
+  function g() {
+    s = _;
+  }
+  function x() {
+    if (s) {
+      m.value = !0, n = !0;
+      try {
+        localStorage.setItem(u(), "1");
+      } catch {
+      }
+    }
+    _ = !1, s = !1;
+  }
+  return H(
+    $,
+    () => {
+      m.value = !1, _ = !1, s = !1, n = !1;
+    },
+    { flush: "sync" }
+  ), { tutorialOpen: m, startConnection: d, onConnected: g, onConnectionClosed: x };
+}
+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,
+  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($) {
+    const { t: m } = Y(), _ = ie(), s = pe(), n = M(() => {
+      var c, r;
+      return !!((r = (c = s.sessionUser.value) == null ? void 0 : c.role) != null && r.isAdmin);
+    }), u = M(() => K.getBusinessId()), { tutorialOpen: d, startConnection: g, onConnected: x, onConnectionClosed: y } = St(u), v = w([]), C = w(), b = w(!0), I = w("");
+    let T, E;
+    const l = M(
+      () => v.value.filter((c) => me(c) !== void 0)
+    ), i = M(
+      () => [
+        {
+          label: m("connect.whatsappBot.accounts"),
+          value: N["$connect-WHATSAPP_BOT"],
+          badge: l.value.length
+        },
+        {
+          label: m("connect.whatsappBot.settings"),
+          value: N["$connect-WHATSAPP_BOT_SETTINGS"]
+        },
+        ...n.value ? [
+          {
+            label: m("connect.whatsappBot.logs.title"),
+            value: N["$connect-WHATSAPP_BOT_LOGS"]
+          }
+        ] : []
+      ]
+    ), f = M(() => {
+      const c = _.currentRoute.value.name;
+      return i.value.some((r) => r.value === c) ? c : N["$connect-WHATSAPP_BOT"];
+    });
+    async function h(c = !1) {
+      clearTimeout(E), T == null || T.abort();
+      const r = new AbortController();
+      T = r, c || (b.value = !0, I.value = "");
+      try {
+        const j = K.getBusinessId();
+        if (!j)
+          throw new Error(m("connect.whatsappBot.errors.selectBusiness"));
+        const O = await J.listClients(j, r.signal);
+        r.signal.aborted || (v.value = O, I.value = "");
+      } catch (j) {
+        !r.signal.aborted && !c && (I.value = j instanceof Error ? j.message : m("connect.whatsappBot.errors.loadSessions"));
+      } finally {
+        r.signal.aborted || (b.value = !1, E = setTimeout(() => void h(!0), 1e4));
+      }
+    }
+    function W(c) {
+      v.value = v.value.filter(
+        (r) => r.clientId !== c
+      ), h(!0);
+    }
+    const L = w(!1);
+    function P() {
+      g(l.value.length > 0), L.value = !0;
+    }
+    function V(c) {
+      C.value = c.clientId, v.value = [
+        ...v.value.filter((r) => r.clientId !== c.clientId),
+        c
+      ], x();
+    }
+    return H(L, (c) => {
+      c || (y(), h());
+    }), H(
+      u,
+      () => {
+        L.value = !1, C.value = void 0, v.value = [], h();
+      },
+      { immediate: !0 }
+    ), te(() => {
+      T == null || T.abort(), clearTimeout(E);
+    }), (c, r) => {
+      var oe, ne;
+      const j = B("FmPill"), O = B("FmButton"), q = B("RouterLink"), ee = B("RouterView"), U = B("FmCircularProgress");
+      return o(), p(G, null, [
+        t("div", Pt, [
+          t("div", Vt, [
+            t("div", Lt, [
+              t("h1", Dt, a(e(m)("connect.navigation.whatsappBot")), 1),
+              k(j, { variant: "beta" })
+            ]),
+            t("div", Et, [
+              k(O, {
+                variant: "tertiary",
+                label: e(m)("connect.whatsappBot.tutorial.learnMore"),
+                "prepend-icon": "help_outline",
+                class: "!h-[36px] !rounded-full !px-[16px] [&_.label]:text-[14px]",
+                onClick: r[0] || (r[0] = (F) => d.value = !0)
+              }, null, 8, ["label"]),
+              f.value === e(N)["$connect-WHATSAPP_BOT"] && l.value.length ? (o(), A(O, {
+                key: 0,
+                label: e(m)("connect.whatsappBot.connectAccountCta"),
+                "prepend-icon": "add",
+                class: "!h-[36px] !rounded-full !px-[16px] [&_.label]:text-[14px]",
+                onClick: P
+              }, null, 8, ["label"])) : D("", !0)
+            ])
+          ]),
+          l.value.length ? (o(), p("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), p(G, null, X(i.value, (F) => (o(), A(q, {
+              key: F.value,
+              to: { name: F.value },
+              "aria-current": f.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",
+                f.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(), p("span", {
+                  key: 0,
+                  class: R([
+                    "min-w-[20px] rounded-full px-[6px] text-center text-[12px] leading-[20px] font-semibold tabular-nums",
+                    f.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),
+          f.value === e(N)["$connect-WHATSAPP_BOT_SETTINGS"] ? (o(), A(ee, { key: 1 })) : f.value === e(N)["$connect-WHATSAPP_BOT_LOGS"] ? (o(), A(ee, {
+            key: 2,
+            accounts: l.value
+          }, null, 8, ["accounts"])) : b.value ? (o(), p("output", jt, [
+            k(U),
+            Q(" " + a(e(m)("connect.whatsappBot.loadingSessions")), 1)
+          ])) : I.value ? (o(), p("div", Ot, [
+            t("p", Ut, a(I.value), 1),
+            k(O, {
+              label: e(m)("connect.whatsappBot.tryAgain"),
+              "prepend-icon": "refresh",
+              class: "!rounded-full [&_.label]:text-[14px]",
+              onClick: r[1] || (r[1] = (F) => h())
+            }, null, 8, ["label"])
+          ])) : l.value.length ? (o(), A(Se, {
+            key: 5,
+            accounts: l.value,
+            onRemoved: W
+          }, null, 8, ["accounts"])) : (o(), A(Ft, {
+            key: 6,
+            onConnect: P
+          }))
+        ]),
+        (o(), A(bt, {
+          key: u.value,
+          modelValue: L.value,
+          "onUpdate:modelValue": r[2] || (r[2] = (F) => L.value = F),
+          onConnected: V
+        }, null, 8, ["modelValue"])),
+        k(Ye, {
+          modelValue: e(d),
+          "onUpdate:modelValue": r[3] || (r[3] = (F) => ce(d) ? d.value = F : null),
+          "client-id": ((oe = l.value.find((F) => F.clientId === C.value)) == null ? void 0 : oe.clientId) ?? ((ne = l.value[0]) == null ? void 0 : ne.clientId)
+        }, null, 8, ["modelValue", "client-id"])
+      ], 64);
+    };
+  }
+});
+export {
+  Yt as default
+};