@feedmepos/mf-connect 0.1.38-beta.96 → 0.1.38-beta.98

package/dist/Review-DGrND2U0.js

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