@feedmepos/mf-connect 0.1.38-beta.74 → 0.1.38-beta.75

package/dist/Review-Bu9SGftr.js

@@ -0,0 +1,617 @@
+import { defineComponent as $, useModel as V, computed as I, onMounted as P, resolveComponent as N, openBlock as t, createElementBlock as a, createElementVNode as r, createVNode as y, unref as e, createBlock as b, createCommentVNode as k, toDisplayString as f, normalizeClass as z, Fragment as _, renderList as R, ref as x, onUnmounted as O, watch as L, isRef as B, useSlots as K, renderSlot as Z, withCtx as j, createStaticVNode as J, KeepAlive as Q } from "vue";
+import { u as U } from "./vue-i18n-BxV_u4BZ.js";
+import { _ as D } from "./DateInput.vue_vue_type_script_setup_true_lang-BN4Q5Y3l.js";
+import { u as W } from "./business-DKEB57Mf.js";
+import { components as p, useSnackbar as X } from "@feedmepos/ui-library";
+import { h as A } from "./moment-D7p2TMB-.js";
+import { r as C } from "./index-C1Z4oibL.js";
+import { u as ee } from "./loading-B1ymwDT_.js";
+const oe = { class: "flex justify-between gap-8" }, te = { class: "flex flex-wrap gap-8" }, ne = /* @__PURE__ */ $({
+  __name: "ReviewListingController",
+  props: {
+    source: { required: !0 },
+    sourceModifiers: {},
+    dateFrom: { required: !0 },
+    dateFromModifiers: {},
+    dateTo: { required: !0 },
+    dateToModifiers: {},
+    locationId: { required: !0 },
+    locationIdModifiers: {},
+    sort: { required: !0 },
+    sortModifiers: {}
+  },
+  emits: ["update:source", "update:dateFrom", "update:dateTo", "update:locationId", "update:sort"],
+  setup(o) {
+    const { t: n } = U(), u = V(o, "source"), l = V(o, "dateFrom"), c = V(o, "dateTo"), d = V(o, "locationId"), i = V(o, "sort"), v = W(), g = I(() => [
+      { label: n("connect.review.filter.allSources"), value: "" },
+      { label: "Google", value: "google" },
+      { label: "Facebook", value: "facebook" }
+    ]), M = I(() => [
+      { label: n("connect.review.filter.allLocations"), value: "" },
+      ...v.locationOptions.map((h) => ({ label: h.label, value: h.value }))
+    ]), T = I(() => [
+      { label: n("connect.review.filter.sort.createTime_desc"), value: "createTime_desc" },
+      { label: n("connect.review.filter.sort.createTime_asc"), value: "createTime_asc" },
+      { label: n("connect.review.filter.sort.rating_asc"), value: "rating_asc" },
+      { label: n("connect.review.filter.sort.rating_desc"), value: "rating_desc" }
+    ]), S = I(
+      () => v.locations.length > 0
+    );
+    return P(() => v.readLocations()), (h, s) => {
+      const m = N("FmSelect");
+      return t(), a("div", oe, [
+        r("div", te, [
+          y(m, {
+            modelValue: u.value,
+            "onUpdate:modelValue": s[0] || (s[0] = (w) => u.value = w),
+            label: e(n)("connect.review.filter.source"),
+            items: e(g)
+          }, null, 8, ["modelValue", "label", "items"]),
+          e(S) ? (t(), b(m, {
+            key: 0,
+            modelValue: d.value,
+            "onUpdate:modelValue": s[1] || (s[1] = (w) => d.value = w),
+            label: e(n)("connect.review.filter.location"),
+            items: e(M)
+          }, null, 8, ["modelValue", "label", "items"])) : k("", !0),
+          y(D, {
+            label: e(n)("connect.review.filter.dateFrom"),
+            "model-value": l.value,
+            "onUpdate:modelValue": s[2] || (s[2] = (w) => l.value = w)
+          }, null, 8, ["label", "model-value"]),
+          y(D, {
+            label: e(n)("connect.review.filter.dateTo"),
+            "model-value": c.value,
+            "onUpdate:modelValue": s[3] || (s[3] = (w) => c.value = w)
+          }, null, 8, ["label", "model-value"])
+        ]),
+        y(m, {
+          modelValue: i.value,
+          "onUpdate:modelValue": s[4] || (s[4] = (w) => i.value = w),
+          label: e(n)("connect.review.filter.sort.label"),
+          items: e(T)
+        }, null, 8, ["modelValue", "label", "items"])
+      ]);
+    };
+  }
+}), H = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%231877F2'%3e%3cpath%20d='M24%2012.073c0-6.627-5.373-12-12-12s-12%205.373-12%2012c0%205.99%204.388%2010.954%2010.125%2011.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007%201.792-4.669%204.533-4.669%201.312%200%202.686.235%202.686.235v2.953H15.83c-1.491%200-1.956.925-1.956%201.874v2.25h3.328l-.532%203.47h-2.796v8.385C19.612%2023.027%2024%2018.062%2024%2012.073z'/%3e%3c/svg%3e", le = { class: "rounded-lg border border-fm-color-neutral-gray-200 bg-white p-16 flex flex-col gap-8" }, se = { class: "flex items-center gap-8" }, ae = ["src"], re = { class: "flex flex-col flex-1 min-w-0" }, ce = { class: "fm-typo-en-body-md-600 truncate" }, ie = { class: "fm-typo-en-body-sm-400 text-fm-color-neutral-gray-400" }, ue = { class: "flex items-center gap-4 shrink-0" }, de = ["src"], me = {
+  key: 0,
+  class: "fm-typo-en-body-sm-400 text-fm-color-neutral-gray-400"
+}, ve = {
+  key: 0,
+  class: "flex items-center gap-4"
+}, fe = {
+  key: 1,
+  class: "fm-typo-en-body-md-400 text-fm-color-neutral-gray-700 line-clamp-3"
+}, we = {
+  key: 2,
+  class: "fm-typo-en-body-md-400 text-fm-color-neutral-gray-400 italic"
+}, ye = /* @__PURE__ */ $({
+  __name: "FacebookReviewCard",
+  props: {
+    review: {}
+  },
+  setup(o) {
+    const { t: n } = U();
+    return (u, l) => {
+      var c, d, i;
+      return t(), a("div", le, [
+        r("div", se, [
+          (c = o.review.reviewer) != null && c.pictureUrl ? (t(), a("img", {
+            key: 0,
+            src: (d = o.review.reviewer) == null ? void 0 : d.pictureUrl,
+            class: "w-32 h-32 rounded-full shrink-0 object-cover"
+          }, null, 8, ae)) : (t(), b(e(p).FmIcon, {
+            key: 1,
+            name: "person",
+            class: "text-fm-color-neutral-gray-300 shrink-0"
+          })),
+          r("div", re, [
+            r("span", ce, f(((i = o.review.reviewer) == null ? void 0 : i.name) ?? e(n)("connect.review.overview.anonymous")), 1),
+            r("span", ie, f(e(A)(o.review.createTime).format("D MMM YYYY, hh:mmA")), 1)
+          ]),
+          r("div", ue, [
+            r("img", {
+              src: e(H),
+              class: "w-16 h-16"
+            }, null, 8, de),
+            o.review.pageName ? (t(), a("span", me, f(o.review.pageName), 1)) : k("", !0)
+          ])
+        ]),
+        o.review.isPositive != null ? (t(), a("div", ve, [
+          y(e(p).FmIcon, {
+            name: o.review.isPositive ? "thumb_up" : "thumb_down",
+            size: "sm",
+            class: z(
+              o.review.isPositive ? "text-fm-color-typo-success" : "text-fm-color-system-error-500"
+            )
+          }, null, 8, ["name", "class"]),
+          r("span", {
+            class: z([
+              "fm-typo-en-body-sm-400",
+              o.review.isPositive ? "text-fm-color-typo-success" : "text-fm-color-system-error-500"
+            ])
+          }, f(o.review.isPositive ? e(n)("connect.review.overview.positive") : e(n)("connect.review.overview.negative")), 3)
+        ])) : k("", !0),
+        o.review.comment ? (t(), a("p", fe, f(o.review.comment), 1)) : (t(), a("p", we, f(e(n)("connect.review.overview.noComment")), 1))
+      ]);
+    };
+  }
+}), ge = "/feedme.ico", pe = { class: "rounded-lg border border-fm-color-neutral-gray-200 bg-white p-16 flex flex-col gap-8" }, be = { class: "flex items-center gap-8" }, he = ["src"], xe = { class: "flex flex-col flex-1 min-w-0" }, ke = { class: "fm-typo-en-body-md-600 truncate" }, _e = { class: "fm-typo-en-body-sm-400 text-fm-color-neutral-gray-400" }, $e = { class: "flex items-center gap-4 shrink-0" }, Fe = {
+  key: 0,
+  class: "fm-typo-en-body-sm-400 text-fm-color-neutral-gray-400"
+}, Ie = { class: "flex items-center gap-4" }, Me = {
+  key: 0,
+  class: "fm-typo-en-body-md-400 text-fm-color-neutral-gray-700 line-clamp-3"
+}, Ue = {
+  key: 1,
+  class: "fm-typo-en-body-md-400 text-fm-color-neutral-gray-400 italic"
+}, Ce = /* @__PURE__ */ $({
+  __name: "FeedmeReviewCard",
+  props: {
+    review: {}
+  },
+  setup(o) {
+    const { t: n } = U();
+    return (u, l) => (t(), a("div", pe, [
+      r("div", be, [
+        o.review.reviewer.photoUrl ? (t(), a("img", {
+          key: 0,
+          src: o.review.reviewer.photoUrl,
+          class: "w-32 h-32 rounded-full shrink-0 object-cover"
+        }, null, 8, he)) : (t(), b(e(p).FmIcon, {
+          key: 1,
+          name: "person",
+          class: "text-fm-color-neutral-gray-300 shrink-0"
+        })),
+        r("div", xe, [
+          r("span", ke, f(o.review.reviewer.name ?? e(n)("connect.review.overview.anonymous")), 1),
+          r("span", _e, f(e(A)(o.review.createTime).format("D MMM YYYY, hh:mmA")), 1)
+        ]),
+        r("div", $e, [
+          l[0] || (l[0] = r("img", {
+            src: ge,
+            class: "w-16 h-16"
+          }, null, -1)),
+          o.review.location ? (t(), a("span", Fe, f(o.review.location.name), 1)) : k("", !0)
+        ])
+      ]),
+      r("div", Ie, [
+        (t(), a(_, null, R(5, (c) => y(e(p).FmIcon, {
+          key: c,
+          name: "star",
+          size: "sm",
+          class: z(
+            c <= o.review.starRating ? "text-yellow-400" : "text-fm-color-neutral-gray-200"
+          )
+        }, null, 8, ["class"])), 64))
+      ]),
+      o.review.comment ? (t(), a("p", Me, f(o.review.comment), 1)) : (t(), a("p", Ue, f(e(n)("connect.review.overview.noComment")), 1))
+    ]));
+  }
+}), q = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'%3e%3cpath%20fill='%23EA4335'%20d='M24%209.5c3.14%200%205.95%201.08%208.17%202.86l6.08-6.08C34.46%203.1%2029.5%201%2024%201%2014.82%201%206.96%206.48%203.22%2014.44l7.08%205.5C12.08%2013.66%2017.58%209.5%2024%209.5z'/%3e%3cpath%20fill='%234285F4'%20d='M46.52%2024.5c0-1.64-.15-3.22-.42-4.74H24v8.98h12.7c-.55%202.96-2.2%205.46-4.68%207.14l7.18%205.58C43.18%2037.36%2046.52%2031.38%2046.52%2024.5z'/%3e%3cpath%20fill='%23FBBC05'%20d='M10.3%2028.56A14.56%2014.56%200%200%201%209.5%2024c0-1.58.27-3.1.76-4.52l-7.08-5.5A23.94%2023.94%200%200%200%200%2024c0%203.86.92%207.5%202.56%2010.72l7.74-6.16z'/%3e%3cpath%20fill='%2334A853'%20d='M24%2047c5.5%200%2010.12-1.82%2013.48-4.94l-7.18-5.58c-1.82%201.22-4.14%201.94-6.3%201.94-6.42%200-11.92-4.16-13.7-9.86l-7.74%206.16C6.96%2041.52%2014.82%2047%2024%2047z'/%3e%3cpath%20fill='none'%20d='M0%200h48v48H0z'/%3e%3c/svg%3e", Te = { class: "rounded-lg border border-fm-color-neutral-gray-200 bg-white p-16 flex flex-col gap-8" }, Re = { class: "flex items-center gap-8" }, Se = ["src"], Ve = { class: "flex flex-col flex-1 min-w-0" }, Be = { class: "fm-typo-en-body-md-600 truncate" }, ze = { class: "fm-typo-en-body-sm-400 text-fm-color-neutral-gray-400" }, Ee = { class: "flex items-center gap-4 shrink-0" }, Pe = ["src"], Ye = {
+  key: 0,
+  class: "fm-typo-en-body-sm-400 text-fm-color-neutral-gray-400"
+}, Ne = { class: "flex items-center gap-4" }, Ae = {
+  key: 0,
+  class: "fm-typo-en-body-md-400 text-fm-color-neutral-gray-700 line-clamp-3"
+}, Le = {
+  key: 1,
+  class: "fm-typo-en-body-md-400 text-fm-color-neutral-gray-400 italic"
+}, je = /* @__PURE__ */ $({
+  __name: "GoogleReviewCard",
+  props: {
+    review: {}
+  },
+  setup(o) {
+    const { t: n } = U();
+    return (u, l) => {
+      var c, d, i;
+      return t(), a("div", Te, [
+        r("div", Re, [
+          (c = o.review.reviewer) != null && c.pictureUrl ? (t(), a("img", {
+            key: 0,
+            src: (d = o.review.reviewer) == null ? void 0 : d.pictureUrl,
+            class: "w-32 h-32 rounded-full shrink-0 object-cover"
+          }, null, 8, Se)) : (t(), b(e(p).FmIcon, {
+            key: 1,
+            name: "person",
+            class: "text-fm-color-neutral-gray-300 shrink-0"
+          })),
+          r("div", Ve, [
+            r("span", Be, f(((i = o.review.reviewer) == null ? void 0 : i.name) ?? e(n)("connect.review.overview.anonymous")), 1),
+            r("span", ze, f(e(A)(o.review.createTime).format("D MMM YYYY, hh:mmA")), 1)
+          ]),
+          r("div", Ee, [
+            r("img", {
+              src: e(q),
+              class: "w-16 h-16"
+            }, null, 8, Pe),
+            o.review.locationDisplayName ? (t(), a("span", Ye, f(o.review.locationDisplayName), 1)) : k("", !0)
+          ])
+        ]),
+        r("div", Ne, [
+          (t(), a(_, null, R(5, (v) => y(e(p).FmIcon, {
+            key: v,
+            name: "star",
+            size: "sm",
+            class: z(
+              v <= o.review.starRating ? "text-yellow-400" : "text-fm-color-neutral-gray-200"
+            )
+          }, null, 8, ["class"])), 64))
+        ]),
+        o.review.comment ? (t(), a("p", Ae, f(o.review.comment), 1)) : (t(), a("p", Le, f(e(n)("connect.review.overview.noComment")), 1))
+      ]);
+    };
+  }
+}), De = /* @__PURE__ */ $({
+  __name: "ReviewCard",
+  props: {
+    review: {}
+  },
+  setup(o) {
+    const n = o, u = I(
+      () => n.review.source === "google" ? n.review : null
+    ), l = I(
+      () => n.review.source === "facebook" ? n.review : null
+    ), c = I(
+      () => n.review.source === "feedme" ? n.review : null
+    );
+    return console.log(n.review), (d, i) => u.value ? (t(), b(je, {
+      key: 0,
+      review: u.value
+    }, null, 8, ["review"])) : l.value ? (t(), b(ye, {
+      key: 1,
+      review: l.value
+    }, null, 8, ["review"])) : c.value ? (t(), b(Ce, {
+      key: 2,
+      review: c.value
+    }, null, 8, ["review"])) : k("", !0);
+  }
+}), Ge = {
+  key: 0,
+  class: "flex justify-center py-32"
+}, He = {
+  key: 1,
+  class: "flex flex-col items-center justify-center py-48 gap-8"
+}, qe = { class: "fm-typo-en-body-md-400 text-fm-color-neutral-gray-400" }, Oe = {
+  key: 3,
+  class: "flex justify-center py-16"
+}, Ke = /* @__PURE__ */ $({
+  __name: "ReviewFeed",
+  props: {
+    reviews: {},
+    loading: { type: Boolean },
+    hasMore: { type: Boolean }
+  },
+  emits: ["loadMore"],
+  setup(o, { emit: n }) {
+    const { t: u } = U(), l = o, c = n, d = x(null);
+    return P(() => {
+      const i = new IntersectionObserver(
+        (v) => {
+          v[0].isIntersecting && l.hasMore && !l.loading && c("loadMore");
+        },
+        { threshold: 0.5 }
+      );
+      d.value && i.observe(d.value), O(() => i.disconnect());
+    }), (i, v) => (t(), a(_, null, [
+      o.loading && o.reviews.length === 0 ? (t(), a("div", Ge, [
+        y(e(p).FmIcon, {
+          name: "sync",
+          size: "xl",
+          class: "animate-spin text-fm-color-neutral-gray-400"
+        })
+      ])) : o.reviews.length === 0 ? (t(), a("div", He, [
+        y(e(p).FmIcon, {
+          name: "rate_review",
+          size: "xl",
+          class: "text-fm-color-neutral-gray-300"
+        }),
+        r("p", qe, f(e(u)("connect.review.overview.empty")), 1)
+      ])) : (t(!0), a(_, { key: 2 }, R(o.reviews, (g) => (t(), b(De, {
+        key: g._id,
+        review: g
+      }, null, 8, ["review"]))), 128)),
+      r("div", {
+        ref_key: "sentinel",
+        ref: d,
+        class: "h-1"
+      }, null, 512),
+      o.loading && o.reviews.length > 0 ? (t(), a("div", Oe, [
+        y(e(p).FmIcon, {
+          name: "sync",
+          size: "md",
+          class: "animate-spin text-fm-color-neutral-gray-400"
+        })
+      ])) : k("", !0)
+    ], 64));
+  }
+}), Ze = { class: "p-24 flex flex-col gap-12" }, Y = 20, Je = /* @__PURE__ */ $({
+  __name: "ReviewOverview",
+  setup(o) {
+    const n = x([]), u = x(!1), l = x(!0), c = x(null), d = x(null), i = x(null), v = x(""), g = x("createTime_desc");
+    L(c, () => {
+      v.value = "";
+    });
+    function M(h) {
+      return {
+        source: c.value || void 0,
+        dateFrom: d.value || void 0,
+        dateTo: i.value || void 0,
+        locationId: v.value || void 0,
+        sort: g.value,
+        limit: Y,
+        skip: h
+      };
+    }
+    async function T() {
+      u.value = !0, l.value = !0;
+      try {
+        const h = await C.listReviews(M(0));
+        n.value = h, l.value = h.length === Y;
+      } finally {
+        u.value = !1;
+      }
+    }
+    async function S() {
+      if (!(u.value || !l.value)) {
+        u.value = !0;
+        try {
+          const h = await C.listReviews(M(n.value.length));
+          n.value = [...n.value, ...h], l.value = h.length === Y;
+        } finally {
+          u.value = !1;
+        }
+      }
+    }
+    return L([c, d, i, v, g], T), P(T), (h, s) => (t(), a("div", Ze, [
+      y(ne, {
+        source: e(c),
+        "onUpdate:source": s[0] || (s[0] = (m) => B(c) ? c.value = m : null),
+        "date-from": e(d),
+        "onUpdate:dateFrom": s[1] || (s[1] = (m) => B(d) ? d.value = m : null),
+        "date-to": e(i),
+        "onUpdate:dateTo": s[2] || (s[2] = (m) => B(i) ? i.value = m : null),
+        "location-id": e(v),
+        "onUpdate:locationId": s[3] || (s[3] = (m) => B(v) ? v.value = m : null),
+        sort: e(g),
+        "onUpdate:sort": s[4] || (s[4] = (m) => B(g) ? g.value = m : null)
+      }, null, 8, ["source", "date-from", "date-to", "location-id", "sort"]),
+      y(Ke, {
+        reviews: e(n),
+        loading: e(u),
+        "has-more": e(l),
+        onLoadMore: S
+      }, null, 8, ["reviews", "loading", "has-more"])
+    ]));
+  }
+}), Qe = { class: "rounded-lg border border-fm-color-neutral-gray-200 bg-white overflow-hidden" }, We = ["src"], Xe = { class: "flex flex-col flex-1 min-w-0" }, eo = { class: "fm-typo-en-body-md-600 capitalize" }, oo = {
+  key: 0,
+  class: "fm-typo-en-body-sm-400 text-fm-color-neutral-gray-400 truncate"
+}, G = /* @__PURE__ */ $({
+  __name: "ReviewSource",
+  props: {
+    icon: {},
+    name: {},
+    connected: { type: Boolean },
+    subtitle: {},
+    syncing: { type: Boolean },
+    tokenExpired: { type: Boolean }
+  },
+  emits: ["connect", "sync"],
+  setup(o, { emit: n }) {
+    const u = n, { t: l } = U(), c = K();
+    return (d, i) => (t(), a("div", Qe, [
+      r("div", {
+        class: z(["flex items-center gap-12 p-16", e(c).default ? "border-b border-fm-color-neutral-gray-100" : ""])
+      }, [
+        r("img", {
+          src: o.icon,
+          class: "w-10 h-10 shrink-0"
+        }, null, 8, We),
+        r("div", Xe, [
+          r("span", eo, f(o.name), 1),
+          o.subtitle ? (t(), a("span", oo, f(o.subtitle), 1)) : k("", !0)
+        ]),
+        o.connected ? (t(), a(_, { key: 0 }, [
+          o.tokenExpired ? (t(), b(e(p).FmChip, {
+            key: 0,
+            label: e(l)("connect.review.expired"),
+            variant: "critical"
+          }, null, 8, ["label"])) : k("", !0),
+          y(e(p).FmButton, {
+            variant: "secondary",
+            "prepend-icon": "refresh",
+            label: e(l)("connect.review.reconnect"),
+            onClick: i[0] || (i[0] = (v) => u("connect"))
+          }, null, 8, ["label"]),
+          o.tokenExpired ? k("", !0) : (t(), b(e(p).FmButton, {
+            key: 1,
+            variant: "primary",
+            "prepend-icon": "sync",
+            label: e(l)("connect.review.sync"),
+            loading: o.syncing,
+            onClick: i[1] || (i[1] = (v) => u("sync"))
+          }, null, 8, ["label", "loading"]))
+        ], 64)) : (t(), b(e(p).FmButton, {
+          key: 1,
+          "prepend-icon": "add",
+          label: e(l)("connect.review.connect"),
+          onClick: i[2] || (i[2] = (v) => u("connect"))
+        }, null, 8, ["label"]))
+      ], 2),
+      Z(d.$slots, "default")
+    ]));
+  }
+}), to = { class: "p-24 flex flex-col gap-8" }, no = { class: "flex flex-col flex-1 min-w-0" }, lo = { class: "fm-typo-en-body-lg-600 truncate" }, so = { class: "fm-typo-en-body-sm-400 text-fm-color-neutral-gray-400 truncate" }, ao = ["src"], ro = { class: "flex flex-col flex-1 min-w-0" }, co = { class: "fm-typo-en-body-lg-600 truncate" }, io = { class: "fm-typo-en-body-sm-400 text-fm-color-neutral-gray-400 truncate" }, uo = /* @__PURE__ */ $({
+  __name: "ReviewSettings",
+  setup(o) {
+    const { t: n } = U(), u = X(), l = x(null), c = x(!1), d = x(!1), i = I(
+      () => {
+        var s;
+        return l.value ? ((s = l.value.google) == null ? void 0 : s.token) === null : !1;
+      }
+    ), v = I(
+      () => {
+        var s;
+        return l.value ? ((s = l.value.facebook) == null ? void 0 : s.token) === null : !1;
+      }
+    );
+    async function g() {
+      await ee.minor(async () => {
+        l.value = await C.getSource();
+      });
+    }
+    async function M() {
+      var s, m;
+      c.value = !0;
+      try {
+        await C.syncGoogleReviews();
+      } catch (w) {
+        if (await g(), ((m = (s = l.value) == null ? void 0 : s.google) == null ? void 0 : m.token) === null) {
+          u.open({
+            message: n("connect.review.tokenExpired"),
+            type: "error"
+          });
+          return;
+        }
+        throw w;
+      } finally {
+        c.value = !1;
+      }
+    }
+    async function T() {
+      var s, m;
+      d.value = !0;
+      try {
+        await C.syncFacebookReviews();
+      } catch (w) {
+        if (await g(), ((m = (s = l.value) == null ? void 0 : s.facebook) == null ? void 0 : m.token) === null) {
+          u.open({
+            message: n("connect.review.tokenExpired"),
+            type: "error"
+          });
+          return;
+        }
+        throw w;
+      } finally {
+        d.value = !1;
+      }
+    }
+    async function S() {
+      const s = `${window.location.origin}/review/google/callback`, { callbackUrl: m } = await C.getOauthUrl("google", s);
+      window.location.href = m;
+    }
+    async function h() {
+      const s = `${window.location.origin}/review/facebook/callback`, { callbackUrl: m } = await C.getOauthUrl("facebook", s);
+      window.location.href = m;
+    }
+    return P(g), (s, m) => (t(), a("div", to, [
+      e(l) ? (t(), a(_, { key: 0 }, [
+        y(G, {
+          icon: e(q),
+          name: "google",
+          connected: !!e(l).google,
+          syncing: e(c),
+          "token-expired": e(i),
+          onConnect: S,
+          onSync: M
+        }, {
+          default: j(() => {
+            var w;
+            return [
+              (t(!0), a(_, null, R((w = e(l).google) == null ? void 0 : w.locations, (F) => {
+                var E;
+                return t(), a("div", {
+                  key: F.googleLocationName,
+                  class: "flex items-center gap-12 px-16 py-12 border-b border-fm-color-neutral-gray-100 last:border-b-0"
+                }, [
+                  y(e(p).FmIcon, {
+                    name: "location_on",
+                    class: "text-fm-color-neutral-gray-300 shrink-0"
+                  }),
+                  r("div", no, [
+                    r("span", lo, f(F.displayName), 1),
+                    r("span", so, f(((E = F.location) == null ? void 0 : E.name) ?? e(n)("connect.review.google.noLocations")), 1)
+                  ])
+                ]);
+              }), 128))
+            ];
+          }),
+          _: 1
+        }, 8, ["icon", "connected", "syncing", "token-expired"]),
+        y(G, {
+          icon: e(H),
+          name: "facebook",
+          connected: !!e(l).facebook,
+          syncing: e(d),
+          "token-expired": e(v),
+          onConnect: h,
+          onSync: T
+        }, {
+          default: j(() => {
+            var w;
+            return [
+              (t(!0), a(_, null, R((w = e(l).facebook) == null ? void 0 : w.pages, (F) => (t(), a("div", {
+                key: F.facebookPageId,
+                class: "flex items-center gap-12 px-16 py-12 border-b border-fm-color-neutral-gray-100 last:border-b-0"
+              }, [
+                F.pageProfileImageUrl ? (t(), a("img", {
+                  key: 0,
+                  src: F.pageProfileImageUrl,
+                  class: "w-10 h-10 rounded-full shrink-0 object-cover"
+                }, null, 8, ao)) : (t(), b(e(p).FmIcon, {
+                  key: 1,
+                  name: "person",
+                  class: "text-fm-color-neutral-gray-300 shrink-0"
+                })),
+                r("div", ro, [
+                  r("span", co, f(F.pageName), 1),
+                  r("span", io, f(F.locations.map((E) => E.name).join(", ")), 1)
+                ])
+              ]))), 128))
+            ];
+          }),
+          _: 1
+        }, 8, ["icon", "connected", "syncing", "token-expired"])
+      ], 64)) : (t(), a(_, { key: 1 }, R(["google", "facebook"], (w) => r("div", {
+        key: w,
+        class: "rounded-lg border border-fm-color-neutral-gray-200 bg-white p-16"
+      }, [...m[0] || (m[0] = [
+        J('<div class="animate-pulse flex items-center gap-12"><div class="w-10 h-10 rounded-full bg-fm-color-neutral-gray-100 shrink-0"></div><div class="flex-1 min-w-0 space-y-8"><div class="h-16 w-20 rounded bg-fm-color-neutral-gray-100"></div><div class="h-12 w-full max-w-[160px] rounded bg-fm-color-neutral-gray-100"></div></div><div class="h-32 w-24 rounded bg-fm-color-neutral-gray-100 shrink-0"></div></div>', 1)
+      ])])), 64))
+    ]));
+  }
+}), mo = { class: "flex flex-col" }, vo = { class: "px-24" }, ko = /* @__PURE__ */ $({
+  __name: "Review",
+  setup(o) {
+    const { t: n } = U(), u = [
+      { label: n("connect.review.tabs.overview"), value: "overview" },
+      { label: n("connect.review.tabs.settings"), value: "settings" }
+    ], l = x(u[0]);
+    return (c, d) => {
+      const i = N("FmPageHead"), v = N("FmTabs");
+      return t(), a(_, null, [
+        y(i, {
+          title: e(n)("connect.navigation.review")
+        }, null, 8, ["title"]),
+        r("div", mo, [
+          r("div", vo, [
+            y(v, {
+              "model-value": e(l).value,
+              items: u,
+              "onUpdate:modelValue": d[0] || (d[0] = (g) => l.value = u.find((M) => M.value === g))
+            }, null, 8, ["model-value"])
+          ]),
+          (t(), b(Q, null, [
+            e(l).value === "overview" ? (t(), b(Je, { key: 0 })) : e(l).value === "settings" ? (t(), b(uo, { key: 1 })) : k("", !0)
+          ], 1024))
+        ])
+      ], 64);
+    };
+  }
+});
+export {
+  ko as default
+};