@everymatrix/loyalty-shop 0.2.4 → 0.2.5

package/components/LoyaltyShop-Dfybp9ut.js

@@ -0,0 +1,452 @@
+import { z as qe, c as me, p as ge, a as Fe, b as y, s as Ze, d as oe, A as h, B as se, P as ie, E as T, m as t, F as r, C as Je, H as re, S as We, i as G, h as w, j as he, Q as R, R as Ye, u as le, I as Ge, J as Qe, K as Xe, L as $e, w as x, k as f, l as et, n as de, r as j, T as ue, U as tt, o as M, t as ce, v as V, g as nt, q as O, x as at, $ as ot, V as st, O as pe, M as Q, W as it, X as rt, N as lt, Y as dt } from "./LoyaltyPagination-CyjgdUPo.js";
+import { L as ut } from "./LoyaltyShopItem-BXrrNl9f.js";
+typeof globalThis.HTMLElement > "u" && (globalThis.HTMLElement = class {
+}, globalThis.customElements = { define() {
+}, get() {
+}, whenDefined() {
+} });
+if (typeof window < "u") {
+  let _ = function(n) {
+    return function(...s) {
+      try {
+        return n.apply(this, s);
+      } catch (i) {
+        if (i instanceof DOMException && i.message.includes("has already been used with this registry") || i instanceof Error && i.message.includes("Cannot define multiple custom elements with the same tag name"))
+          return !1;
+        throw i;
+      }
+    };
+  };
+  customElements.define = _(customElements.define), import("./LoyaltyPagination-CyjgdUPo.js").then((n) => n.Z).then((n) => {
+    const s = n.default || n;
+    customElements.get("loyalty-pagination") || customElements.define("loyalty-pagination", s.element || s);
+  }).catch((n) => {
+    console.error("BOOT ERROR:", n);
+  });
+}
+if (typeof window < "u") {
+  let _ = function(n) {
+    return function(...s) {
+      try {
+        return n.apply(this, s);
+      } catch (i) {
+        if (i instanceof DOMException && i.message.includes("has already been used with this registry") || i instanceof Error && i.message.includes("Cannot define multiple custom elements with the same tag name"))
+          return !1;
+        throw i;
+      }
+    };
+  };
+  customElements.define = _(customElements.define), import("./LoyaltyShopItem-BXrrNl9f.js").then((n) => n.a).then((n) => {
+    const s = n.default || n;
+    customElements.get("loyalty-shop-item") || customElements.define("loyalty-shop-item", s.element || s);
+  }).catch((n) => {
+    console.error("BOOT ERROR:", n);
+  });
+}
+const ct = {
+  en: {
+    loading: "Loading…",
+    noContent: "There are no bonus items available for redemption.",
+    networkProblem: "Network problem. Please reload.",
+    tokens: "Tokens",
+    buyNow: "Buy Now",
+    generalError: "Something went wrong... Please try again."
+  },
+  tr: {
+    loading: "Yükleniyor…",
+    noContent: "Kullanılabilir bonus öğesi bulunmamaktadır.",
+    networkProblem: "Ağ sorunu. Lütfen yeniden yükleyin.",
+    tokens: "Tokens",
+    buyNow: "Satın Al",
+    generalError: "Bir sorun oluştu, lütfen tekrar deneyin."
+  },
+  da: {
+    loading: "Indlæser…",
+    noContent: "Der er ingen bonusgenstande tilgængelige til indløsning.",
+    networkProblem: "Netværksproblem. Genindlæs venligst siden.",
+    tokens: "Tokens",
+    buyNow: "Køb nu",
+    generalError: "Noget gik galt. Prøv venligst igen."
+  },
+  de: {
+    loading: "Wird geladen…",
+    noContent: "Es sind keine Bonusartikel zum Einlösen verfügbar.",
+    networkProblem: "Netzwerkproblem. Bitte lade die Seite neu.",
+    tokens: "Token",
+    buyNow: "Jetzt kaufen",
+    generalError: "Etwas ist schiefgelaufen. Bitte versuche es erneut."
+  },
+  nl: {
+    loading: "Laden…",
+    noContent: "Er zijn geen bonusitems beschikbaar om in te wisselen.",
+    networkProblem: "Netwerkprobleem. Laad de pagina opnieuw.",
+    tokens: "Tokens",
+    buyNow: "Nu kopen",
+    generalError: "Er is iets misgegaan. Probeer het opnieuw."
+  },
+  fr: {
+    loading: "Chargement…",
+    noContent: "Aucun bonus n'est disponible pour être échangé.",
+    networkProblem: "Problème de réseau. Veuillez recharger la page.",
+    tokens: "Jetons",
+    buyNow: "Acheter",
+    generalError: "Une erreur s'est produite. Veuillez réessayer."
+  },
+  hu: {
+    loading: "Betöltés…",
+    noContent: "Nincsenek beváltható bónuszok.",
+    networkProblem: "Hálózati probléma. Kérjük, töltsd újra az oldalt.",
+    tokens: "Tokenek",
+    buyNow: "Vásárlás",
+    generalError: "Hiba történt. Kérjük, próbáld újra."
+  }
+}, pt = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='800px'%20height='800px'%20viewBox='0%200%20120%20120'%20fill='none'%3e%3crect%20width='120'%20height='120'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M33.2503%2038.4816C33.2603%2037.0472%2034.4199%2035.8864%2035.8543%2035.875H83.1463C84.5848%2035.875%2085.7503%2037.0431%2085.7503%2038.4816V80.5184C85.7403%2081.9528%2084.5807%2083.1136%2083.1463%2083.125H35.8543C34.4158%2083.1236%2033.2503%2081.957%2033.2503%2080.5184V38.4816ZM80.5006%2041.1251H38.5006V77.8751L62.8921%2053.4783C63.9172%2052.4536%2065.5788%2052.4536%2066.6039%2053.4783L80.5006%2067.4013V41.1251ZM43.75%2051.6249C43.75%2054.5244%2046.1005%2056.8749%2049%2056.8749C51.8995%2056.8749%2054.25%2054.5244%2054.25%2051.6249C54.25%2048.7254%2051.8995%2046.3749%2049%2046.3749C46.1005%2046.3749%2043.75%2048.7254%2043.75%2051.6249Z'%20fill='%23687787'/%3e%3c/svg%3e";
+var mt = x('<div class="loyalty-shop__item loyalty-shop__item--skeleton"><div class="loyalty-shop__item-image skeleton-box"></div> <div class="loyalty-shop__item-title skeleton-line"></div> <div class="loyalty-shop__item-points skeleton-line skeleton-line--short"></div> <div class="loyalty-shop__item-button-skeleton skeleton-box"></div></div>'), gt = x('<div class="loyalty-shop__grid loyalty-shop__grid--skeleton"></div>'), ht = x('<div class="loyalty-shop__unavailable"> </div>'), yt = x('<div><div role="button" tabindex="0" class="loyalty-shop__item-image-container"><img class="loyalty-shop__item-image"/></div> <span class="loyalty-shop__item-title"> </span> <span class="loyalty-shop__item-points"> </span> <button class="loyalty-shop__item-button" type="button"> </button></div>'), ft = x('<div class="load-more-sentinel" aria-hidden="true"></div>'), bt = x('<div class="loyalty-shop__grid"></div> <!> <!>', 1), _t = x('<div class="loyalty-shop"><!></div>');
+const vt = {
+  hash: "svelte-1f1q033",
+  code: `.loyalty-shop {padding:16px;border-radius:6px;border:1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));background-color:var(--app-container-bg-default, #022652);width:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:16px;}.loyalty-shop__unavailable {color:var(--text-subtle, #dfe3e8);font-size:14px;padding:24px 0;text-align:center;}.loyalty-shop__grid {display:grid;gap:16px;grid-template-columns:repeat(2, 1fr);margin:0;}.loyalty-shop__item {display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:10px;border:1px solid var(--border-default, rgba(251, 251, 251, 0.15));background-color:var(--app-container-bg-subtle, rgba(251, 251, 251, 0.1));}.loyalty-shop__item--unavailable {opacity:1;}.loyalty-shop__item-image {width:100%;height:82px;border-radius:6px;}.loyalty-shop__item-title {color:var(--text-default, #ffffff);font-size:12px;font-weight:400;}.loyalty-shop__item-points {color:var(--text-subtle, #dfe3e8);font-size:14px;font-weight:400;}.loyalty-shop__item-button {margin-top:auto;width:100%;height:37px;padding:8px 16px;border:none;border-radius:6px;background:var(--button-primary-bg-default, #ffcc00);color:var(--button-primary-text-default, #261d00);font-size:12px;font-weight:400;cursor:pointer;}.loyalty-shop__item-button:disabled {opacity:0.4;cursor:default;}.loyalty-shop-container {display:flex;flex-direction:column;gap:12px;}.skeleton-box {background:linear-gradient(
+      90deg,
+      var(--app-container-bg-subtle, rgba(251, 251, 251, 0.1)) 0%,
+      color-mix(in srgb, var(--app-container-bg-subtle, rgba(251, 251, 251, 0.1)) 80%, white) 50%,
+      var(--app-container-bg-subtle, rgba(251, 251, 251, 0.1)) 100%
+    );background-size:200% 100%;
+    animation: shimmer 3s linear infinite;border-radius:6px;}.skeleton-line {height:14px;border-radius:6px;background:linear-gradient(
+      90deg,
+      var(--app-container-bg-subtle, rgba(251, 251, 251, 0.1)) 0%,
+      color-mix(in srgb, var(--app-container-bg-subtle, rgba(251, 251, 251, 0.1)) 80%, white) 50%,
+      var(--app-container-bg-subtle, rgba(251, 251, 251, 0.1)) 100%
+    );background-size:200% 100%;
+    animation: shimmer 3s linear infinite;}.skeleton-line--short {width:40%;}.loyalty-shop__item--skeleton {display:flex;flex-direction:column;}.loyalty-shop__item--skeleton .loyalty-shop__item-image {width:100%;height:82px;border-radius:6px;}.loyalty-shop__item--skeleton .loyalty-shop__item-title {width:90%;}.loyalty-shop__item--skeleton .loyalty-shop__item-points {width:40%;}.loyalty-shop__item-button-skeleton {margin-top:auto;width:100%;height:40px;border-radius:6px;}.loyalty-shop__item-image-container {cursor:pointer;}
+
+  @keyframes shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+
+    100% {
+      background-position: -200% 0;
+    }
+  }
+
+  @media (min-width: 768px) {.loyalty-shop__grid {grid-template-columns:repeat(4, 1fr);justify-content:start;margin:0;}.loyalty-shop__item {width:100%;height:100%;box-sizing:border-box;}.loyalty-shop__item-image {height:200px;}.loyalty-shop__item--skeleton .loyalty-shop__item-image {height:200px;}
+  }`
+};
+function ye(_, n) {
+  ge(n, !0), Fe(_, vt);
+  const s = () => at(ot, "$_", i), [i, L] = et(), c = y(n, "apiEndpoint", 7, ""), p = y(n, "userSession", 7, ""), b = y(n, "locale", 7, ""), l = y(n, "limitItem", 7, R), z = y(n, "translationUrl");
+  Ze({ withLocale: b(), translations: {} });
+  const be = async () => {
+    try {
+      const e = new URL(z(), window.location.href), a = await fetch(e.href);
+      if (!a.ok)
+        throw new Error("Failed to fetch translations");
+      const o = await a.json();
+      Object.entries(o).forEach(([d, I]) => {
+        oe(d, I);
+      });
+    } catch (e) {
+      console.error("loyalty shop translation url err:", e);
+    }
+  };
+  Object.entries(ct).forEach(([e, a]) => {
+    oe(e, a);
+  });
+  let g = h(se([])), E = h(void 0), P = h(0), v = h(0), S = h(se(ie)), H = h(!1), K = h(!1), N = h(void 0), k = h(!1), U = h(void 0), B = 0;
+  const _e = le(() => typeof l() == "number" ? l() : parseInt(l(), R) || R), X = () => {
+    if (!c() || !p())
+      return;
+    r(H, !0), r(K, !1);
+    const e = ++B, a = t(k) && t(v) > 0;
+    Ye(
+      {
+        apiEndpoint: c(),
+        userSession: p(),
+        locale: b()
+      },
+      t(v),
+      t(S)
+    ).then((o) => {
+      if (e !== B)
+        return;
+      const d = o.data ?? [];
+      r(P, o.total ?? 0, !0), a ? r(g, [...t(g), ...d], !0) : r(g, d, !0);
+    }).catch((o) => {
+      e === B && (r(K, !0), console.error("Failed to load shop rewards:", o));
+    }).finally(() => {
+      e === B && r(H, !1);
+    });
+  };
+  T(() => {
+    c(), p(), b(), t(v), t(S), X();
+  }), T(() => {
+    const e = window.matchMedia("(max-width: 767px)"), a = (o) => {
+      r(k, o.matches, !0);
+    };
+    return r(k, e.matches, !0), e.addEventListener("change", a), () => e.removeEventListener("change", a);
+  }), T(() => {
+    r(S, t(k) ? ie : t(_e), !0);
+  }), T(() => {
+    if (!t(k) || !t(U)) return;
+    const e = new IntersectionObserver(
+      (a) => {
+        a.some((o) => o.isIntersecting) && t(g).length < t(P) && r(v, t(v) + t(S));
+      },
+      { rootMargin: "200px" }
+    );
+    return e.observe(t(U)), () => e.disconnect();
+  }), Je(() => {
+    z() && be();
+  });
+  const ve = (e) => e.presentation?.assets?.[0] ?? pt, q = (e) => e.displayName ?? e.presentation?.displayName ?? "", F = (e) => e.available === "true", ke = (e) => {
+    t(N) || !F(e) || lt(q(e), e.id);
+  }, we = async (e) => {
+    if (!(!c() || t(N))) {
+      r(N, e, !0);
+      try {
+        await Ge({ apiEndpoint: c(), userSession: p() }, e), Qe(e), Xe(), X();
+      } catch (a) {
+        $e(e, a);
+      } finally {
+        r(N, void 0);
+      }
+    }
+  };
+  T(() => {
+    const e = (a) => {
+      const { type: o, id: d, source: I } = a.data ?? {};
+      switch (o) {
+        case re.REDEEM_REWARD_CONFIRMED:
+          if (t(E))
+            break;
+          d && t(g).some((A) => A.id === d) && we(d);
+          break;
+        case re.BACK_BUTTON_CLICKED:
+          I === We && r(E, void 0);
+          break;
+      }
+    };
+    return window.addEventListener("message", e), () => window.removeEventListener("message", e);
+  });
+  const xe = () => t(g).length ? s()("generalError") : s()("noContent"), Ee = (e) => {
+    r(v, e, !0);
+  }, Se = (e) => {
+    dt(e.displayName || e.presentation.displayName, e.id);
+  }, $ = (e) => {
+    r(E, e, !0), Se(e);
+  }, Ie = (e) => (a) => {
+    (a.key === "Enter" || a.key === " ") && (a.preventDefault(), $(e));
+  };
+  var Ce = {
+    get apiEndpoint() {
+      return c();
+    },
+    set apiEndpoint(e = "") {
+      c(e), f();
+    },
+    get userSession() {
+      return p();
+    },
+    set userSession(e = "") {
+      p(e), f();
+    },
+    get locale() {
+      return b();
+    },
+    set locale(e = "") {
+      b(e), f();
+    },
+    get limitItem() {
+      return l();
+    },
+    set limitItem(e = R) {
+      l(e), f();
+    },
+    get translationUrl() {
+      return z();
+    },
+    set translationUrl(e) {
+      z(e), f();
+    }
+  }, Z = _t(), Re = de(Z);
+  {
+    var Le = (e) => {
+      ut(e, {
+        get itemId() {
+          return t(E).id;
+        },
+        get elevateReward() {
+          return t(E);
+        },
+        get apiEndpoint() {
+          return c();
+        },
+        get userSession() {
+          return p();
+        },
+        get locale() {
+          return b();
+        }
+      });
+    }, Ne = (e) => {
+      var a = gt();
+      ue(a, 21, () => Array(t(S)), tt, (o, d, I, A) => {
+        var J = mt();
+        w(o, J);
+      }), j(a), w(e, a);
+    }, Te = (e) => {
+      var a = ht(), o = M(a, !0);
+      ce((d) => V(o, d), [() => xe()]), w(e, a);
+    }, Me = (e) => {
+      var a = bt(), o = nt(a);
+      ue(o, 21, () => t(g), (m) => m.id, (m, u) => {
+        var C = yt();
+        let ee;
+        var D = de(C), ze = le(() => Ie(t(u))), te = M(D), ne = O(D, 2), Pe = M(ne, !0), ae = O(ne, 2), Ue = M(ae), W = O(ae, 2), Be = M(W, !0);
+        j(C), ce(
+          (Y, Ae, De, je, Ve, He, Ke) => {
+            ee = st(C, 1, "loyalty-shop__item", null, ee, { "loyalty-shop__item--unavailable": Y }), pe(te, "src", Ae), pe(te, "alt", De), V(Pe, je), V(Ue, `${t(u).points ?? ""}
+            ${Ve ?? ""}`), W.disabled = He, V(Be, Ke);
+          },
+          [
+            () => !F(t(u)),
+            () => ve(t(u)),
+            () => q(t(u)),
+            () => q(t(u)),
+            () => s()("tokens"),
+            () => !F(t(u)) || t(N) === t(u).id,
+            () => s()("buyNow")
+          ]
+        ), Q("click", D, () => $(t(u))), Q("keydown", D, function(...Y) {
+          t(ze)?.apply(this, Y);
+        }), Q("click", W, () => ke(t(u))), w(m, C);
+      }), j(o);
+      var d = O(o, 2);
+      {
+        var I = (m) => {
+          it(m, {
+            get offset() {
+              return t(v);
+            },
+            get limit() {
+              return t(S);
+            },
+            get total() {
+              return t(P);
+            },
+            onPageChange: Ee,
+            get locale() {
+              return b();
+            }
+          });
+        };
+        G(d, (m) => {
+          t(k) || m(I);
+        });
+      }
+      var A = O(d, 2);
+      {
+        var J = (m) => {
+          var u = ft();
+          rt(u, (C) => r(U, C), () => t(U)), w(m, u);
+        };
+        G(A, (m) => {
+          t(k) && t(g).length < t(P) && m(J);
+        });
+      }
+      w(e, a);
+    };
+    G(Re, (e) => {
+      t(E) ? e(Le) : t(H) && t(g).length === 0 ? e(Ne, 1) : !t(g).length || t(K) ? e(Te, 2) : e(Me, -1);
+    });
+  }
+  j(Z), w(_, Z);
+  var Oe = he(Ce);
+  return L(), Oe;
+}
+qe(["click", "keydown"]);
+me(
+  ye,
+  {
+    apiEndpoint: {},
+    userSession: {},
+    locale: {},
+    limitItem: {},
+    translationUrl: {}
+  },
+  [],
+  [],
+  { mode: "open" }
+);
+function fe(_, n) {
+  ge(n, !0);
+  let s = y(n, "apiEndpoint", 7, ""), i = y(n, "userSession", 7, ""), L = y(n, "locale", 7, ""), c = y(n, "limitItem", 7, R), p = y(n, "translationUrl");
+  var b = {
+    get apiEndpoint() {
+      return s();
+    },
+    set apiEndpoint(l = "") {
+      s(l), f();
+    },
+    get userSession() {
+      return i();
+    },
+    set userSession(l = "") {
+      i(l), f();
+    },
+    get locale() {
+      return L();
+    },
+    set locale(l = "") {
+      L(l), f();
+    },
+    get limitItem() {
+      return c();
+    },
+    set limitItem(l = R) {
+      c(l), f();
+    },
+    get translationUrl() {
+      return p();
+    },
+    set translationUrl(l) {
+      p(l), f();
+    }
+  };
+  return ye(_, {
+    get apiEndpoint() {
+      return s();
+    },
+    get userSession() {
+      return i();
+    },
+    get locale() {
+      return L();
+    },
+    get limitItem() {
+      return c();
+    },
+    get translationUrl() {
+      return p();
+    }
+  }), he(b);
+}
+customElements.define("loyalty-shop", me(
+  fe,
+  {
+    apiEndpoint: {},
+    userSession: {},
+    locale: {},
+    limitItem: {},
+    translationUrl: {}
+  },
+  [],
+  []
+));
+const xt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: fe
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  ye as L,
+  xt as a
+};