@feedmepos/mf-connect 0.1.38-beta.8 → 0.1.38-beta.80

package/dist/Review-BeZ90jW9.js

@@ -0,0 +1,621 @@
+import { defineComponent as I, useModel as B, computed as U, onMounted as Y, resolveComponent as A, openBlock as o, createElementBlock as s, createElementVNode as a, createVNode as y, unref as e, createBlock as b, createCommentVNode as _, toDisplayString as w, normalizeClass as P, Fragment as F, renderList as S, ref as x, onUnmounted as K, watch as j, isRef as z, useSlots as Z, renderSlot as J, withCtx as D, createStaticVNode as Q, KeepAlive as W } from "vue";
+import { u as C } from "./vue-i18n-DDbkmbSf.js";
+import { _ as G } from "./DateInput.vue_vue_type_script_setup_true_lang-BN4Q5Y3l.js";
+import { u as X } from "./business-6oZ8Rgui.js";
+import { components as p, useSnackbar as ee } from "@feedmepos/ui-library";
+import { h as L } from "./moment-D7p2TMB-.js";
+import { r as R } from "./index-Cal60fAm.js";
+import { u as te } from "./loading-fZQi5zP8.js";
+const oe = { class: "flex justify-between gap-8" }, ne = { class: "flex flex-wrap gap-8" }, le = /* @__PURE__ */ I({
+  __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(t) {
+    const { t: n } = C(), u = B(t, "source"), l = B(t, "dateFrom"), c = B(t, "dateTo"), d = B(t, "locationId"), i = B(t, "sort"), v = X(), g = U(() => [
+      { label: n("connect.review.filter.allSources"), value: "" },
+      { label: "Google", value: "google" },
+      { label: "Facebook", value: "facebook" }
+    ]), $ = U(() => [
+      { label: n("connect.review.filter.allLocations"), value: "" },
+      ...v.locationOptions.map((h) => ({ label: h.label, value: h.value }))
+    ]), T = U(() => [
+      { 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" }
+    ]), V = U(
+      () => v.locations.length > 0
+    );
+    return Y(() => v.readLocations()), (h, f) => {
+      const r = A("FmSelect");
+      return o(), s("div", oe, [
+        a("div", ne, [
+          y(r, {
+            modelValue: u.value,
+            "onUpdate:modelValue": f[0] || (f[0] = (m) => u.value = m),
+            label: e(n)("connect.review.filter.source"),
+            items: e(g)
+          }, null, 8, ["modelValue", "label", "items"]),
+          e(V) ? (o(), b(r, {
+            key: 0,
+            modelValue: d.value,
+            "onUpdate:modelValue": f[1] || (f[1] = (m) => d.value = m),
+            label: e(n)("connect.review.filter.location"),
+            items: e($)
+          }, null, 8, ["modelValue", "label", "items"])) : _("", !0),
+          y(G, {
+            label: e(n)("connect.review.filter.dateFrom"),
+            "model-value": l.value,
+            "onUpdate:modelValue": f[2] || (f[2] = (m) => l.value = m)
+          }, null, 8, ["label", "model-value"]),
+          y(G, {
+            label: e(n)("connect.review.filter.dateTo"),
+            "model-value": c.value,
+            "onUpdate:modelValue": f[3] || (f[3] = (m) => c.value = m)
+          }, null, 8, ["label", "model-value"])
+        ]),
+        y(r, {
+          modelValue: i.value,
+          "onUpdate:modelValue": f[4] || (f[4] = (m) => i.value = m),
+          label: e(n)("connect.review.filter.sort.label"),
+          items: e(T)
+        }, null, 8, ["modelValue", "label", "items"])
+      ]);
+    };
+  }
+}), q = "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", se = { class: "rounded-lg border border-fm-color-neutral-gray-200 bg-white p-16 flex flex-col gap-8" }, ae = { class: "flex items-center gap-8" }, re = ["src"], ce = { class: "flex flex-col flex-1 min-w-0" }, ie = { class: "fm-typo-en-body-md-600 truncate" }, ue = { class: "fm-typo-en-body-sm-400 text-fm-color-neutral-gray-400" }, de = { class: "flex items-center gap-4 shrink-0" }, me = ["src"], ve = {
+  key: 0,
+  class: "fm-typo-en-body-sm-400 text-fm-color-neutral-gray-400"
+}, fe = {
+  key: 0,
+  class: "flex items-center gap-4"
+}, we = {
+  key: 1,
+  class: "fm-typo-en-body-md-400 text-fm-color-neutral-gray-700 line-clamp-3"
+}, ye = {
+  key: 2,
+  class: "fm-typo-en-body-md-400 text-fm-color-neutral-gray-400 italic"
+}, ge = /* @__PURE__ */ I({
+  __name: "FacebookReviewCard",
+  props: {
+    review: {}
+  },
+  setup(t) {
+    const { t: n } = C();
+    return (u, l) => {
+      var c, d, i;
+      return o(), s("div", se, [
+        a("div", ae, [
+          (c = t.review.reviewer) != null && c.pictureUrl ? (o(), s("img", {
+            key: 0,
+            src: (d = t.review.reviewer) == null ? void 0 : d.pictureUrl,
+            class: "w-32 h-32 rounded-full shrink-0 object-cover"
+          }, null, 8, re)) : (o(), b(e(p).FmIcon, {
+            key: 1,
+            name: "person",
+            class: "text-fm-color-neutral-gray-300 shrink-0"
+          })),
+          a("div", ce, [
+            a("span", ie, w(((i = t.review.reviewer) == null ? void 0 : i.name) ?? e(n)("connect.review.overview.anonymous")), 1),
+            a("span", ue, w(e(L)(t.review.createTime).format("D MMM YYYY, hh:mmA")), 1)
+          ]),
+          a("div", de, [
+            a("img", {
+              src: e(q),
+              class: "w-16 h-16"
+            }, null, 8, me),
+            t.review.pageName ? (o(), s("span", ve, w(t.review.pageName), 1)) : _("", !0)
+          ])
+        ]),
+        t.review.isPositive != null ? (o(), s("div", fe, [
+          y(e(p).FmIcon, {
+            name: t.review.isPositive ? "thumb_up" : "thumb_down",
+            size: "sm",
+            class: P(
+              t.review.isPositive ? "text-fm-color-typo-success" : "text-fm-color-system-error-500"
+            )
+          }, null, 8, ["name", "class"]),
+          a("span", {
+            class: P([
+              "fm-typo-en-body-sm-400",
+              t.review.isPositive ? "text-fm-color-typo-success" : "text-fm-color-system-error-500"
+            ])
+          }, w(t.review.isPositive ? e(n)("connect.review.overview.positive") : e(n)("connect.review.overview.negative")), 3)
+        ])) : _("", !0),
+        t.review.comment ? (o(), s("p", we, w(t.review.comment), 1)) : (o(), s("p", ye, w(e(n)("connect.review.overview.noComment")), 1))
+      ]);
+    };
+  }
+}), pe = "/feedme.ico", be = { class: "rounded-lg border border-fm-color-neutral-gray-200 bg-white p-16 flex flex-col gap-8" }, he = { class: "flex items-center gap-8" }, xe = ["src"], ke = { class: "flex flex-col flex-1 min-w-0" }, _e = { class: "fm-typo-en-body-md-600 truncate" }, $e = { class: "fm-typo-en-body-sm-400 text-fm-color-neutral-gray-400" }, Fe = { class: "flex items-center gap-4 shrink-0" }, Ie = {
+  key: 0,
+  class: "fm-typo-en-body-sm-400 text-fm-color-neutral-gray-400"
+}, Me = { class: "flex items-center gap-4" }, Ue = {
+  key: 0,
+  class: "fm-typo-en-body-md-400 text-fm-color-neutral-gray-700 line-clamp-3"
+}, Ce = {
+  key: 1,
+  class: "fm-typo-en-body-md-400 text-fm-color-neutral-gray-400 italic"
+}, Re = /* @__PURE__ */ I({
+  __name: "FeedmeReviewCard",
+  props: {
+    review: {}
+  },
+  setup(t) {
+    const { t: n } = C();
+    return (u, l) => (o(), s("div", be, [
+      a("div", he, [
+        t.review.reviewer.photoUrl ? (o(), s("img", {
+          key: 0,
+          src: t.review.reviewer.photoUrl,
+          class: "w-32 h-32 rounded-full shrink-0 object-cover"
+        }, null, 8, xe)) : (o(), b(e(p).FmIcon, {
+          key: 1,
+          name: "person",
+          class: "text-fm-color-neutral-gray-300 shrink-0"
+        })),
+        a("div", ke, [
+          a("span", _e, w(t.review.reviewer.name ?? e(n)("connect.review.overview.anonymous")), 1),
+          a("span", $e, w(e(L)(t.review.createTime).format("D MMM YYYY, hh:mmA")), 1)
+        ]),
+        a("div", Fe, [
+          l[0] || (l[0] = a("img", {
+            src: pe,
+            class: "w-16 h-16"
+          }, null, -1)),
+          t.review.location ? (o(), s("span", Ie, w(t.review.location.name), 1)) : _("", !0)
+        ])
+      ]),
+      a("div", Me, [
+        (o(), s(F, null, S(5, (c) => y(e(p).FmIcon, {
+          key: c,
+          name: "star",
+          size: "sm",
+          class: P(
+            c <= t.review.starRating ? "text-yellow-400" : "text-fm-color-neutral-gray-200"
+          )
+        }, null, 8, ["class"])), 64))
+      ]),
+      t.review.comment ? (o(), s("p", Ue, w(t.review.comment), 1)) : (o(), s("p", Ce, w(e(n)("connect.review.overview.noComment")), 1))
+    ]));
+  }
+}), O = "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" }, Se = { class: "flex items-center gap-8" }, Ve = ["src"], Be = { class: "flex flex-col flex-1 min-w-0" }, ze = { class: "fm-typo-en-body-md-600 truncate" }, Pe = { class: "fm-typo-en-body-sm-400 text-fm-color-neutral-gray-400" }, Ee = { class: "flex items-center gap-4 shrink-0" }, Ye = ["src"], Ne = {
+  key: 0,
+  class: "fm-typo-en-body-sm-400 text-fm-color-neutral-gray-400"
+}, Ae = { class: "flex items-center gap-4" }, Le = {
+  key: 0,
+  class: "fm-typo-en-body-md-400 text-fm-color-neutral-gray-700 line-clamp-3"
+}, je = {
+  key: 1,
+  class: "fm-typo-en-body-md-400 text-fm-color-neutral-gray-400 italic"
+}, De = /* @__PURE__ */ I({
+  __name: "GoogleReviewCard",
+  props: {
+    review: {}
+  },
+  setup(t) {
+    const { t: n } = C();
+    return (u, l) => {
+      var c, d, i;
+      return o(), s("div", Te, [
+        a("div", Se, [
+          (c = t.review.reviewer) != null && c.pictureUrl ? (o(), s("img", {
+            key: 0,
+            src: (d = t.review.reviewer) == null ? void 0 : d.pictureUrl,
+            class: "w-32 h-32 rounded-full shrink-0 object-cover"
+          }, null, 8, Ve)) : (o(), b(e(p).FmIcon, {
+            key: 1,
+            name: "person",
+            class: "text-fm-color-neutral-gray-300 shrink-0"
+          })),
+          a("div", Be, [
+            a("span", ze, w(((i = t.review.reviewer) == null ? void 0 : i.name) ?? e(n)("connect.review.overview.anonymous")), 1),
+            a("span", Pe, w(e(L)(t.review.createTime).format("D MMM YYYY, hh:mmA")), 1)
+          ]),
+          a("div", Ee, [
+            a("img", {
+              src: e(O),
+              class: "w-16 h-16"
+            }, null, 8, Ye),
+            t.review.locationDisplayName ? (o(), s("span", Ne, w(t.review.locationDisplayName), 1)) : _("", !0)
+          ])
+        ]),
+        a("div", Ae, [
+          (o(), s(F, null, S(5, (v) => y(e(p).FmIcon, {
+            key: v,
+            name: "star",
+            size: "sm",
+            class: P(
+              v <= t.review.starRating ? "text-yellow-400" : "text-fm-color-neutral-gray-200"
+            )
+          }, null, 8, ["class"])), 64))
+        ]),
+        t.review.comment ? (o(), s("p", Le, w(t.review.comment), 1)) : (o(), s("p", je, w(e(n)("connect.review.overview.noComment")), 1))
+      ]);
+    };
+  }
+}), Ge = /* @__PURE__ */ I({
+  __name: "ReviewCard",
+  props: {
+    review: {}
+  },
+  setup(t) {
+    const n = t, u = U(
+      () => n.review.source === "google" ? n.review : null
+    ), l = U(
+      () => n.review.source === "facebook" ? n.review : null
+    ), c = U(
+      () => n.review.source === "feedme" ? n.review : null
+    );
+    return console.log(n.review), (d, i) => u.value ? (o(), b(De, {
+      key: 0,
+      review: u.value
+    }, null, 8, ["review"])) : l.value ? (o(), b(ge, {
+      key: 1,
+      review: l.value
+    }, null, 8, ["review"])) : c.value ? (o(), b(Re, {
+      key: 2,
+      review: c.value
+    }, null, 8, ["review"])) : _("", !0);
+  }
+}), He = {
+  key: 0,
+  class: "flex justify-center py-32"
+}, qe = {
+  key: 1,
+  class: "flex flex-col items-center justify-center py-48 gap-8"
+}, Oe = { class: "fm-typo-en-body-md-400 text-fm-color-neutral-gray-400" }, Ke = {
+  key: 3,
+  class: "flex justify-center py-16"
+}, Ze = /* @__PURE__ */ I({
+  __name: "ReviewFeed",
+  props: {
+    reviews: {},
+    loading: { type: Boolean },
+    hasMore: { type: Boolean }
+  },
+  emits: ["loadMore"],
+  setup(t, { emit: n }) {
+    const { t: u } = C(), l = t, c = n, d = x(null);
+    return Y(() => {
+      const i = new IntersectionObserver(
+        (v) => {
+          v[0].isIntersecting && l.hasMore && !l.loading && c("loadMore");
+        },
+        { threshold: 0.5 }
+      );
+      d.value && i.observe(d.value), K(() => i.disconnect());
+    }), (i, v) => (o(), s(F, null, [
+      t.loading && t.reviews.length === 0 ? (o(), s("div", He, [
+        y(e(p).FmIcon, {
+          name: "sync",
+          size: "xl",
+          class: "animate-spin text-fm-color-neutral-gray-400"
+        })
+      ])) : t.reviews.length === 0 ? (o(), s("div", qe, [
+        y(e(p).FmIcon, {
+          name: "rate_review",
+          size: "xl",
+          class: "text-fm-color-neutral-gray-300"
+        }),
+        a("p", Oe, w(e(u)("connect.review.overview.empty")), 1)
+      ])) : (o(!0), s(F, { key: 2 }, S(t.reviews, (g) => (o(), b(Ge, {
+        key: g._id,
+        review: g
+      }, null, 8, ["review"]))), 128)),
+      a("div", {
+        ref_key: "sentinel",
+        ref: d,
+        class: "h-1"
+      }, null, 512),
+      t.loading && t.reviews.length > 0 ? (o(), s("div", Ke, [
+        y(e(p).FmIcon, {
+          name: "sync",
+          size: "md",
+          class: "animate-spin text-fm-color-neutral-gray-400"
+        })
+      ])) : _("", !0)
+    ], 64));
+  }
+}), Je = { class: "p-24 flex flex-col gap-12" }, N = 20, Qe = /* @__PURE__ */ I({
+  __name: "ReviewOverview",
+  setup(t) {
+    const n = x([]), u = x(!1), l = x(!0), c = x(null), d = x(null), i = x(null), v = x(""), g = x("createTime_desc");
+    j(c, () => {
+      v.value = "";
+    });
+    function $(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: N,
+        skip: h
+      };
+    }
+    async function T() {
+      u.value = !0, l.value = !0;
+      try {
+        const h = await R.listReviews($(0));
+        n.value = h, l.value = h.length === N;
+      } finally {
+        u.value = !1;
+      }
+    }
+    async function V() {
+      if (!(u.value || !l.value)) {
+        u.value = !0;
+        try {
+          const h = await R.listReviews($(n.value.length));
+          n.value = [...n.value, ...h], l.value = h.length === N;
+        } finally {
+          u.value = !1;
+        }
+      }
+    }
+    return j([c, d, i, v, g], T), Y(T), (h, f) => (o(), s("div", Je, [
+      y(le, {
+        source: e(c),
+        "onUpdate:source": f[0] || (f[0] = (r) => z(c) ? c.value = r : null),
+        "date-from": e(d),
+        "onUpdate:dateFrom": f[1] || (f[1] = (r) => z(d) ? d.value = r : null),
+        "date-to": e(i),
+        "onUpdate:dateTo": f[2] || (f[2] = (r) => z(i) ? i.value = r : null),
+        "location-id": e(v),
+        "onUpdate:locationId": f[3] || (f[3] = (r) => z(v) ? v.value = r : null),
+        sort: e(g),
+        "onUpdate:sort": f[4] || (f[4] = (r) => z(g) ? g.value = r : null)
+      }, null, 8, ["source", "date-from", "date-to", "location-id", "sort"]),
+      y(Ze, {
+        reviews: e(n),
+        loading: e(u),
+        "has-more": e(l),
+        onLoadMore: V
+      }, null, 8, ["reviews", "loading", "has-more"])
+    ]));
+  }
+}), We = { class: "rounded-lg border border-fm-color-neutral-gray-200 bg-white overflow-hidden" }, Xe = ["src"], et = { class: "flex flex-col flex-1 min-w-0" }, tt = { class: "fm-typo-en-body-md-600 capitalize" }, ot = {
+  key: 0,
+  class: "fm-typo-en-body-sm-400 text-fm-color-neutral-gray-400 truncate"
+}, H = /* @__PURE__ */ I({
+  __name: "ReviewSource",
+  props: {
+    icon: {},
+    name: {},
+    connected: { type: Boolean },
+    subtitle: {},
+    syncing: { type: Boolean },
+    tokenExpired: { type: Boolean }
+  },
+  emits: ["connect", "sync"],
+  setup(t, { emit: n }) {
+    const u = n, { t: l } = C(), c = Z();
+    return (d, i) => (o(), s("div", We, [
+      a("div", {
+        class: P(["flex items-center gap-12 p-16", e(c).default ? "border-b border-fm-color-neutral-gray-100" : ""])
+      }, [
+        a("img", {
+          src: t.icon,
+          class: "w-10 h-10 shrink-0"
+        }, null, 8, Xe),
+        a("div", et, [
+          a("span", tt, w(t.name), 1),
+          t.subtitle ? (o(), s("span", ot, w(t.subtitle), 1)) : _("", !0)
+        ]),
+        t.connected ? (o(), s(F, { key: 0 }, [
+          t.tokenExpired ? (o(), b(e(p).FmChip, {
+            key: 0,
+            label: e(l)("connect.review.expired"),
+            variant: "critical"
+          }, null, 8, ["label"])) : _("", !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"]),
+          t.tokenExpired ? _("", !0) : (o(), b(e(p).FmButton, {
+            key: 1,
+            variant: "primary",
+            "prepend-icon": "sync",
+            label: e(l)("connect.review.sync"),
+            loading: t.syncing,
+            onClick: i[1] || (i[1] = (v) => u("sync"))
+          }, null, 8, ["label", "loading"]))
+        ], 64)) : (o(), 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),
+      J(d.$slots, "default")
+    ]));
+  }
+}), nt = { class: "p-24 flex flex-col gap-8" }, lt = { class: "flex flex-col flex-1 min-w-0" }, st = { class: "fm-typo-en-body-lg-600 truncate" }, at = { class: "fm-typo-en-body-sm-400 text-fm-color-neutral-gray-400 truncate" }, rt = ["src"], ct = { class: "flex flex-col flex-1 min-w-0" }, it = { class: "fm-typo-en-body-lg-600 truncate" }, ut = { class: "fm-typo-en-body-sm-400 text-fm-color-neutral-gray-400 truncate" }, dt = /* @__PURE__ */ I({
+  __name: "ReviewSettings",
+  setup(t) {
+    const { t: n } = C(), u = ee(), l = x(null), c = x(!1), d = x(!1), i = U(
+      () => {
+        var r;
+        return l.value ? ((r = l.value.google) == null ? void 0 : r.token) === null : !1;
+      }
+    ), v = U(
+      () => {
+        var r;
+        return l.value ? ((r = l.value.facebook) == null ? void 0 : r.token) === null : !1;
+      }
+    );
+    function g(r) {
+      const m = window.location.pathname.replace(/\/review(?:\/.*)?$/, "");
+      return `${window.location.origin}${m}${r}`;
+    }
+    async function $() {
+      await te.minor(async () => {
+        l.value = await R.getSource();
+      });
+    }
+    async function T() {
+      var r, m;
+      c.value = !0;
+      try {
+        await R.syncGoogleReviews();
+      } catch (k) {
+        if (await $(), ((m = (r = l.value) == null ? void 0 : r.google) == null ? void 0 : m.token) === null) {
+          u.open({
+            message: n("connect.review.tokenExpired"),
+            type: "error"
+          });
+          return;
+        }
+        throw k;
+      } finally {
+        c.value = !1;
+      }
+    }
+    async function V() {
+      var r, m;
+      d.value = !0;
+      try {
+        await R.syncFacebookReviews();
+      } catch (k) {
+        if (await $(), ((m = (r = l.value) == null ? void 0 : r.facebook) == null ? void 0 : m.token) === null) {
+          u.open({
+            message: n("connect.review.tokenExpired"),
+            type: "error"
+          });
+          return;
+        }
+        throw k;
+      } finally {
+        d.value = !1;
+      }
+    }
+    async function h() {
+      const r = g("/review/google/callback"), { callbackUrl: m } = await R.getOauthUrl("google", r);
+      window.location.href = m;
+    }
+    async function f() {
+      const r = g("/review/facebook/callback"), { callbackUrl: m } = await R.getOauthUrl("facebook", r);
+      window.location.href = m;
+    }
+    return Y($), (r, m) => (o(), s("div", nt, [
+      e(l) ? (o(), s(F, { key: 0 }, [
+        y(H, {
+          icon: e(O),
+          name: "google",
+          connected: !!e(l).google,
+          syncing: e(c),
+          "token-expired": e(i),
+          onConnect: h,
+          onSync: T
+        }, {
+          default: D(() => {
+            var k;
+            return [
+              (o(!0), s(F, null, S((k = e(l).google) == null ? void 0 : k.locations, (M) => {
+                var E;
+                return o(), s("div", {
+                  key: M.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"
+                  }),
+                  a("div", lt, [
+                    a("span", st, w(M.displayName), 1),
+                    a("span", at, w(((E = M.location) == null ? void 0 : E.name) ?? e(n)("connect.review.google.noLocations")), 1)
+                  ])
+                ]);
+              }), 128))
+            ];
+          }),
+          _: 1
+        }, 8, ["icon", "connected", "syncing", "token-expired"]),
+        y(H, {
+          icon: e(q),
+          name: "facebook",
+          connected: !!e(l).facebook,
+          syncing: e(d),
+          "token-expired": e(v),
+          onConnect: f,
+          onSync: V
+        }, {
+          default: D(() => {
+            var k;
+            return [
+              (o(!0), s(F, null, S((k = e(l).facebook) == null ? void 0 : k.pages, (M) => (o(), s("div", {
+                key: M.facebookPageId,
+                class: "flex items-center gap-12 px-16 py-12 border-b border-fm-color-neutral-gray-100 last:border-b-0"
+              }, [
+                M.pageProfileImageUrl ? (o(), s("img", {
+                  key: 0,
+                  src: M.pageProfileImageUrl,
+                  class: "w-10 h-10 rounded-full shrink-0 object-cover"
+                }, null, 8, rt)) : (o(), b(e(p).FmIcon, {
+                  key: 1,
+                  name: "person",
+                  class: "text-fm-color-neutral-gray-300 shrink-0"
+                })),
+                a("div", ct, [
+                  a("span", it, w(M.pageName), 1),
+                  a("span", ut, w(M.locations.map((E) => E.name).join(", ")), 1)
+                ])
+              ]))), 128))
+            ];
+          }),
+          _: 1
+        }, 8, ["icon", "connected", "syncing", "token-expired"])
+      ], 64)) : (o(), s(F, { key: 1 }, S(["google", "facebook"], (k) => a("div", {
+        key: k,
+        class: "rounded-lg border border-fm-color-neutral-gray-200 bg-white p-16"
+      }, [...m[0] || (m[0] = [
+        Q('<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))
+    ]));
+  }
+}), mt = { class: "flex flex-col" }, vt = { class: "px-24" }, kt = /* @__PURE__ */ I({
+  __name: "Review",
+  setup(t) {
+    const { t: n } = C(), 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 = A("FmPageHead"), v = A("FmTabs");
+      return o(), s(F, null, [
+        y(i, {
+          title: e(n)("connect.navigation.review")
+        }, null, 8, ["title"]),
+        a("div", mt, [
+          a("div", vt, [
+            y(v, {
+              "model-value": e(l).value,
+              items: u,
+              "onUpdate:modelValue": d[0] || (d[0] = (g) => l.value = u.find(($) => $.value === g))
+            }, null, 8, ["model-value"])
+          ]),
+          (o(), b(W, null, [
+            e(l).value === "overview" ? (o(), b(Qe, { key: 0 })) : e(l).value === "settings" ? (o(), b(dt, { key: 1 })) : _("", !0)
+          ], 1024))
+        ])
+      ], 64);
+    };
+  }
+});
+export {
+  kt as default
+};