ads-web-sdkm 2.0.24

package/dist/Brandshop.js

@@ -0,0 +1,918 @@
+import { jsxs as h, jsx as n } from "react/jsx-runtime";
+import { g as L, a as W, u as G, R as K } from "./ReactQueryProvider-D__k2BsQ.js";
+import { useState as T, useEffect as P, Component as V } from "react";
+import { h as B, b as F, c as q, d as j, e as Z, f as H, g as z, S as k, u as J, a as X, A as O } from "./ads-CChrT00a.js";
+import { I as f } from "./Image-zvdPHg5N.js";
+const ee = async ({
+  deviceType: e,
+  language: t,
+  brandshopId: o,
+  environment: r,
+  adServerApiKey: a
+}) => {
+  const [s, l] = await L(a), u = W("adServer", r);
+  try {
+    return (await (await fetch(
+      `${u}/api/v2/brandshop/server/${o}`,
+      {
+        headers: {
+          device: e,
+          lang: t,
+          "auth-token": s,
+          "auth-timestamp": l
+        }
+      }
+    )).json()).data;
+  } catch (d) {
+    throw new Error(`Failed to fetch brandshop details - ${d}`);
+  }
+}, ne = "brandshop", te = ({
+  deviceType: e,
+  language: t,
+  brandshopId: o,
+  environment: r,
+  adServerApiKey: a,
+  enabled: s
+}) => G({
+  queryKey: [
+    ne,
+    o,
+    e,
+    t
+  ],
+  queryFn: () => ee({
+    deviceType: e,
+    language: t,
+    brandshopId: o,
+    environment: r,
+    adServerApiKey: a
+  }),
+  enabled: s
+}), oe = "_brandshopContent_1lmgx_7", re = "_sectionContainer_1lmgx_39", ae = "_sectionTitle_1lmgx_55", ce = "_navigationSection_1lmgx_121", ie = "_navigationLogo_1lmgx_137", se = "_navigationLinks_1lmgx_147", le = "_navigationLink_1lmgx_147", de = "_navigationSectionContainer_1lmgx_187", _e = "_bannerButton_1lmgx_281", ue = "_banner_1lmgx_281", me = "_bannerCta_1lmgx_301", pe = "_bannerImage_1lmgx_329", ge = "_categoryContainer_1lmgx_409", he = "_categoryTile_1lmgx_423", Ce = "_categoryImageWrapper_1lmgx_443", ve = "_categoryImage_1lmgx_443", ke = "_categoryName_1lmgx_473", Se = "_categoryNameShrink_1lmgx_503", Ne = "_categoryShrinkGap_1lmgx_511", fe = "_cols3_1lmgx_533", be = "_cols2_1lmgx_541", ye = "_brandshopContainerSkeleton_1lmgx_621", xe = "_bannerSkeleton_1lmgx_639", Te = "_navContainerSkeleton_1lmgx_651", Pe = "_navPillSkeleton_1lmgx_665", we = "_categoryGridSkeleton_1lmgx_677", Be = "_categoryTileSkeleton_1lmgx_689", $e = "_promoSkeleton_1lmgx_701", Ae = "_brandshopError_1lmgx_775", Ie = "_errorIcon_1lmgx_805", Ee = "_errorContent_1lmgx_817", Oe = "_errorText_1lmgx_833", De = "_errorButton_1lmgx_875", c = {
+  brandshopContent: oe,
+  sectionContainer: re,
+  sectionTitle: ae,
+  navigationSection: ce,
+  navigationLogo: ie,
+  navigationLinks: se,
+  navigationLink: le,
+  navigationSectionContainer: de,
+  bannerButton: _e,
+  banner: ue,
+  bannerCta: me,
+  bannerImage: pe,
+  categoryContainer: ge,
+  categoryTile: he,
+  categoryImageWrapper: Ce,
+  categoryImage: ve,
+  categoryName: ke,
+  categoryNameShrink: Se,
+  categoryShrinkGap: Ne,
+  cols3: fe,
+  cols2: be,
+  brandshopContainerSkeleton: ye,
+  bannerSkeleton: xe,
+  navContainerSkeleton: Te,
+  navPillSkeleton: Pe,
+  categoryGridSkeleton: we,
+  categoryTileSkeleton: Be,
+  promoSkeleton: $e,
+  brandshopError: Ae,
+  errorIcon: Ie,
+  errorContent: Ee,
+  errorText: Oe,
+  errorButton: De
+}, Le = ({
+  image: e,
+  text: t,
+  alt: o,
+  onClick: r
+}) => e ? /* @__PURE__ */ h("button", { type: "button", className: c.bannerButton, onClick: r, children: [
+  /* @__PURE__ */ n(f, { src: e, alt: o, className: c.bannerImage }),
+  /* @__PURE__ */ n("div", { className: c.bannerCta, children: t })
+] }) : null, We = ({ image: e, alt: t }) => /* @__PURE__ */ n("div", { className: c.banner, children: /* @__PURE__ */ n(f, { src: e, alt: t, className: c.bannerImage, fetchPriority: "high" }) }), N = (e, t, o) => {
+  switch (e) {
+    case "ads_bs_pageload":
+    case "ads_bs_pageend": {
+      const { brandName: r, userStatus: a, platform: s } = t;
+      o?.(e, {
+        brand_name: r,
+        user_status: a,
+        platform: s
+      });
+      break;
+    }
+    case "ads_bs_section_view": {
+      const { brandName: r, sectionName: a, sectionOrder: s, userStatus: l, platform: u } = t;
+      o?.(e, {
+        brand_name: r,
+        section_name: a,
+        section_order: s,
+        user_status: l,
+        platform: u
+      });
+      break;
+    }
+    case "ads_bs_content_click": {
+      const { contentName: r, contentOrder: a, userStatus: s, platform: l } = t;
+      o?.(e, {
+        content_name: r,
+        content_order: a,
+        user_status: s,
+        platform: l
+      });
+      break;
+    }
+  }
+}, Ge = ({
+  title: e,
+  hideTitle: t,
+  banners: o,
+  isLoggedin: r,
+  sectionTitle: a,
+  onBannerClick: s,
+  trackBrandshopHandler: l
+}) => {
+  const u = (d) => {
+    if (!d?.link?.link_destination) return;
+    N(
+      "ads_bs_content_click",
+      {
+        contentName: a,
+        contentOrder: d.display_order.toString(),
+        userStatus: r ? "logged_in" : "guest",
+        platform: "Web"
+      },
+      l
+    );
+    const g = B(d.link.link_destination);
+    g && s(g);
+  };
+  return o.length === 0 ? null : /* @__PURE__ */ h("div", { className: c.sectionContainer, children: [
+    !t && /* @__PURE__ */ n("h2", { className: c.sectionTitle, children: e }),
+    o.map((d) => d.link ? /* @__PURE__ */ n(
+      Le,
+      {
+        image: d.image,
+        text: d.link.link_text,
+        alt: e,
+        onClick: () => u(d)
+      },
+      d.tracking_id
+    ) : /* @__PURE__ */ n(
+      We,
+      {
+        image: d.image,
+        alt: e
+      },
+      d.tracking_id
+    ))
+  ] });
+}, Me = ({
+  title: e,
+  hideTitle: t,
+  categories: o,
+  isLoggedin: r,
+  onCategoryClick: a,
+  trackBrandshopHandler: s
+}) => {
+  const l = (i) => {
+    if (!i?.link?.link_destination) return;
+    N(
+      "ads_bs_content_click",
+      {
+        contentName: i.category_name,
+        contentOrder: i.display_order.toString(),
+        userStatus: r ? "logged_in" : "guest",
+        platform: "Web"
+      },
+      s
+    );
+    const m = B(i.link.link_destination);
+    m && a(m);
+  };
+  if (o.length < 2) return null;
+  const u = o.slice(0, 6), d = [...u].sort(
+    (i, m) => i.display_order - m.display_order
+  ), g = u.length === 2 || u.length === 4 ? 2 : 3;
+  return /* @__PURE__ */ h("div", { className: c.sectionContainer, children: [
+    !t && /* @__PURE__ */ n("h2", { className: c.sectionTitle, children: e }),
+    /* @__PURE__ */ n(
+      "div",
+      {
+        className: `${c.categoryContainer} ${c[`cols${g}`]} ${u.length === 6 ? c.categoryShrinkGap : ""}`,
+        children: d.map((i) => i ? /* @__PURE__ */ h(
+          "button",
+          {
+            className: c.categoryTile,
+            onClick: () => l(i),
+            children: [
+              /* @__PURE__ */ n("div", { className: c.categoryImageWrapper, children: i.image && /* @__PURE__ */ n(
+                f,
+                {
+                  src: i.image,
+                  alt: i.category_name ?? e,
+                  className: c.categoryImage
+                }
+              ) }),
+              i.category_name && /* @__PURE__ */ n(
+                "span",
+                {
+                  className: `${c.categoryName} ${u.length === 6 ? c.categoryNameShrink : ""}`,
+                  children: i.category_name
+                }
+              )
+            ]
+          },
+          i.tracking_id
+        ) : null)
+      }
+    )
+  ] });
+}, Re = ({
+  title: e,
+  hideTitle: t,
+  logo: o,
+  navigationLinks: r,
+  isLoggedin: a,
+  brandshopName: s,
+  onLinkClick: l,
+  trackBrandshopHandler: u
+}) => {
+  const d = (i) => {
+    N(
+      "ads_bs_content_click",
+      {
+        contentName: i.link.link_text,
+        contentOrder: i.link.link_display_order.toString(),
+        userStatus: a ? "logged_in" : "guest",
+        platform: "Web"
+      },
+      u
+    );
+    const m = B(i.link.link_destination);
+    m && l(m);
+  };
+  if (r.length === 0) return null;
+  const g = [...r].sort(
+    (i, m) => i.link.link_display_order - m.link.link_display_order
+  );
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      className: `${c.sectionContainer} ${c.navigationSectionContainer}`,
+      children: [
+        !t && /* @__PURE__ */ n("h2", { className: c.sectionTitle, children: e }),
+        /* @__PURE__ */ h("div", { className: c.navigationSection, children: [
+          o && /* @__PURE__ */ n("h1", { children: /* @__PURE__ */ n(
+            f,
+            {
+              src: o,
+              alt: s ?? e,
+              className: c.navigationLogo
+            }
+          ) }),
+          /* @__PURE__ */ n("div", { className: c.navigationLinks, children: g.map((i) => /* @__PURE__ */ n(
+            "button",
+            {
+              className: c.navigationLink,
+              onClick: () => d(i),
+              children: i.link.link_text
+            },
+            i.tracking_id
+          )) })
+        ] })
+      ]
+    }
+  );
+};
+var M = /* @__PURE__ */ ((e) => (e.PERCENTAGE = "PERCENTAGE", e.AMOUNT = "AMOUNT", e))(M || {}), $ = /* @__PURE__ */ ((e) => (e[e.PROMOTION = 1] = "PROMOTION", e[e.COUPON = 2] = "COUPON", e))($ || {});
+const D = (e, t) => e.type === M.PERCENTAGE ? `${e.value}%` : `${e.discount_value} ${t}`, R = (e, t) => e.reduce(
+  (o, r) => r.order === $.PROMOTION ? {
+    ...o,
+    promotion: {
+      value: D(r, t),
+      priceAfterDiscount: r.price_after_discount
+    }
+  } : r.order === $.COUPON ? {
+    ...o,
+    coupon: {
+      value: D(r, t),
+      priceAfterDiscount: r.price_after_discount
+    }
+  } : o,
+  { promotion: null, coupon: null }
+), Ue = ({ children: e, className: t }) => /* @__PURE__ */ n("div", { className: t, children: e }), Qe = "_chip_fqk2t_3", Ye = {
+  chip: Qe
+};
+function Ke({ children: e, className: t }) {
+  return /* @__PURE__ */ n("div", { className: `${Ye.chip} ${t}`, children: e });
+}
+const Ve = (e) => {
+  const {
+    promotionValue: t,
+    hasCoupon: o,
+    isPriceDropped: r,
+    saveLabelText: a,
+    couponText: s,
+    priceDropText: l
+  } = e;
+  return r ? {
+    label: l,
+    variant: "priceDrop"
+  } : o ? {
+    label: s,
+    variant: "coupon"
+  } : t ? {
+    label: `${a} ${t}`,
+    variant: "promotion"
+  } : null;
+}, Fe = "_card_8c2od_3", qe = "_header_8c2od_25", je = "_imageContainer_8c2od_47", Ze = "_image_8c2od_47", He = "_topControls_8c2od_77", ze = "_footer_8c2od_91", Je = "_priceSection_8c2od_105", Xe = "_priceWrapper_8c2od_117", en = "_priceCurrency_8c2od_129", nn = "_withPromotion_8c2od_139", tn = "_priceAmount_8c2od_151", on = "_priceOriginal_8c2od_175", rn = "_brand_8c2od_221", an = "_ProductTitle_8c2od_233", cn = "_couponBadge_8c2od_261", sn = "_discountChipCoupon_8c2od_281", ln = "_discountChipPromotion_8c2od_291", dn = "_discountChipPriceDrop_8c2od_293", _n = "_container_8c2od_351", un = "_carousel_8c2od_391", mn = "_carouselContent_8c2od_421", pn = "_carouselItem_8c2od_429", gn = "_navButtonNext_8c2od_467", hn = "_navButtonPrev_8c2od_469", Cn = "_navButtonPrevIcon_8c2od_521", vn = "_navButtonNextIcon_8c2od_523", kn = "_paginationContainer_8c2od_549", Sn = "_paginationDot_8c2od_559", Nn = "_paginationActiveDot_8c2od_571", _ = {
+  card: Fe,
+  header: qe,
+  imageContainer: je,
+  image: Ze,
+  topControls: He,
+  footer: ze,
+  priceSection: Je,
+  priceWrapper: Xe,
+  priceCurrency: en,
+  withPromotion: nn,
+  priceAmount: tn,
+  priceOriginal: on,
+  brand: rn,
+  ProductTitle: an,
+  couponBadge: cn,
+  discountChipCoupon: sn,
+  discountChipPromotion: ln,
+  discountChipPriceDrop: dn,
+  container: _n,
+  carousel: un,
+  carouselContent: mn,
+  carouselItem: pn,
+  navButtonNext: gn,
+  navButtonPrev: hn,
+  navButtonPrevIcon: Cn,
+  navButtonNextIcon: vn,
+  paginationContainer: kn,
+  paginationDot: Sn,
+  paginationActiveDot: Nn
+}, fn = {
+  en: {
+    couponBadge: {
+      extra: "Extra",
+      offAtCheckout: "off at checkout"
+    },
+    discountChip: {
+      save: "Save",
+      onlineExclusive: "Online exclusive offer",
+      priceDrop: "Price drop"
+    },
+    mylo: {
+      from: "From",
+      perMonth: "/mo with"
+    }
+  },
+  ar: {
+    couponBadge: {
+      extra: "خصم إضافي",
+      offAtCheckout: "يطبق عند الدفع"
+    },
+    discountChip: {
+      save: "هتوفر",
+      onlineExclusive: "عرض أونلاين حصري",
+      priceDrop: "سعر أقل"
+    },
+    mylo: {
+      from: "يبدأ من",
+      perMonth: "/الشهر مع"
+    }
+  }
+}, U = (e) => fn[e], bn = {
+  coupon: _.discountChipCoupon,
+  promotion: _.discountChipPromotion,
+  priceDrop: _.discountChipPriceDrop
+};
+function yn({
+  language: e,
+  promotionValue: t,
+  coupon: o,
+  isPriceDropped: r,
+  className: a
+}) {
+  const s = U(e), l = Ve({
+    promotionValue: t,
+    hasCoupon: !!o,
+    isPriceDropped: r,
+    saveLabelText: s.discountChip.save,
+    couponText: s.discountChip.onlineExclusive,
+    priceDropText: s.discountChip.priceDrop
+  });
+  return l ? /* @__PURE__ */ n(
+    Ke,
+    {
+      className: `${a} ${bn[l.variant]}`,
+      children: l.label
+    }
+  ) : null;
+}
+const xn = "data:image/svg+xml,%3csvg%20width='14'%20height='14'%20viewBox='0%200%2014%2014'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M12.94%206.38667L6.94%200.386667C6.7%200.146667%206.36667%200%206%200H1.33333C0.6%200%200%200.6%200%201.33333V6C0%206.36667%200.146667%206.7%200.393333%206.94667L6.39333%2012.9467C6.63333%2013.1867%206.96667%2013.3333%207.33333%2013.3333C7.7%2013.3333%208.03333%2013.1867%208.27333%2012.94L12.94%208.27333C13.1867%208.03333%2013.3333%207.7%2013.3333%207.33333C13.3333%206.96667%2013.18%206.62667%2012.94%206.38667ZM2.33333%203.33333C1.78%203.33333%201.33333%202.88667%201.33333%202.33333C1.33333%201.78%201.78%201.33333%202.33333%201.33333C2.88667%201.33333%203.33333%201.78%203.33333%202.33333C3.33333%202.88667%202.88667%203.33333%202.33333%203.33333Z'%20fill='%231AA573'/%3e%3c/svg%3e";
+function Tn({ value: e, language: t }) {
+  const o = U(t);
+  return /* @__PURE__ */ h("div", { className: _.couponBadge, children: [
+    /* @__PURE__ */ n(f, { alt: "tag", src: xn, width: 13.3, height: 13.3 }),
+    /* @__PURE__ */ n("span", { children: `${o.couponBadge.extra} ${e} ${o.couponBadge.offAtCheckout}` })
+  ] });
+}
+function Pn({
+  price: e,
+  discounts: t
+}) {
+  const { promotion: o } = R(t, e.currency), r = o?.priceAfterDiscount;
+  return /* @__PURE__ */ h("div", { className: _.priceWrapper, children: [
+    /* @__PURE__ */ n(
+      "span",
+      {
+        className: `${_.priceCurrency} ${r && _.withPromotion}`,
+        children: e.currency
+      }
+    ),
+    /* @__PURE__ */ n(
+      "span",
+      {
+        className: `${_.priceAmount} ${r && _.withPromotion}`,
+        children: o ? o.priceAfterDiscount : e.base
+      }
+    ),
+    r && /* @__PURE__ */ n("span", { className: _.priceOriginal, children: e.base })
+  ] });
+}
+function wn({ title: e }) {
+  return /* @__PURE__ */ n("div", { className: _.ProductTitle, children: e });
+}
+function Bn({
+  id: e,
+  title: t,
+  brand: o,
+  image: r,
+  price: a,
+  discounts: s = [],
+  language: l,
+  className: u
+}) {
+  const { promotion: d, coupon: g } = R(s, a.currency);
+  return /* @__PURE__ */ h(Ue, { className: `${_.card} ${u}`, children: [
+    /* @__PURE__ */ h("header", { className: _.header, children: [
+      /* @__PURE__ */ n("div", { className: _.imageContainer, children: /* @__PURE__ */ n(f, { className: _.image, src: r, alt: t }) }),
+      /* @__PURE__ */ n("div", { className: _.topControls, children: /* @__PURE__ */ n(
+        yn,
+        {
+          language: l,
+          coupon: g,
+          promotionValue: d?.value,
+          isPriceDropped: a.is_price_dropped
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ h("footer", { className: _.footer, children: [
+      /* @__PURE__ */ n("div", { className: _.priceSection, children: /* @__PURE__ */ n(Pn, { price: a, discounts: s }) }),
+      /* @__PURE__ */ n("h4", { className: _.brand, children: o }),
+      /* @__PURE__ */ n(wn, { title: t }),
+      g && /* @__PURE__ */ n(Tn, { value: g.value, language: l })
+    ] })
+  ] }, e);
+}
+function $n({
+  slidesToScroll: e,
+  products: t,
+  onProductClick: o,
+  language: r
+}) {
+  const [a, s] = T(), [l, u] = T(0), [d, g] = T(0), [i, m] = T(!1), [C, v] = T(!1);
+  return P(() => {
+    if (!a)
+      return;
+    const p = () => {
+      g(a.scrollSnapList().length), u(a.selectedScrollSnap()), m(a.canScrollPrev()), v(a.canScrollNext());
+    };
+    return p(), a.on("select", p), a.on("reInit", p), () => {
+      a.off("select", p), a.off("reInit", p);
+    };
+  }, [a]), /* @__PURE__ */ h("div", { className: _.container, children: [
+    /* @__PURE__ */ h(
+      F,
+      {
+        opts: {
+          align: "start",
+          slidesToScroll: e ?? 1,
+          direction: r === "ar" ? "rtl" : "ltr"
+        },
+        setApi: s,
+        className: _.carousel,
+        children: [
+          /* @__PURE__ */ n(q, { className: _.carouselContent, children: t.map((p, S) => /* @__PURE__ */ n(
+            j,
+            {
+              className: _.carouselItem,
+              onClick: () => o(p, S),
+              children: /* @__PURE__ */ n(
+                Bn,
+                {
+                  id: p.offering_id,
+                  brand: p.brand,
+                  image: p.formatted_main_image,
+                  price: p.price,
+                  title: p.title,
+                  discounts: p.discounts,
+                  language: r
+                }
+              )
+            },
+            `${p.offering_id}-${S}`
+          )) }),
+          i && /* @__PURE__ */ n(
+            Z,
+            {
+              className: _.navButtonPrev,
+              iconClassName: _.navButtonPrevIcon
+            }
+          ),
+          C && /* @__PURE__ */ n(
+            H,
+            {
+              className: _.navButtonNext,
+              iconClassName: _.navButtonNextIcon
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ n(
+      z,
+      {
+        slidesCount: d,
+        currentIndex: l,
+        onClick: (p) => a?.scrollTo(p),
+        showProgress: !1,
+        containerClassName: _.paginationContainer,
+        buttonClassName: _.paginationButton,
+        dotClassName: _.paginationDot,
+        activeDotClassName: _.paginationActiveDot
+      }
+    )
+  ] });
+}
+const An = (e) => ({
+  type: "single product",
+  val: [e.offering_id],
+  filters: [
+    {
+      key: "slug",
+      value: [e.slug]
+    }
+  ]
+}), In = async ({
+  language: e,
+  collectionId: t,
+  environment: o,
+  adServerApiKey: r
+}) => {
+  const [a, s] = await L(r), l = W("adServer", o);
+  try {
+    return (await (await fetch(
+      `${l}/api/v2/brandshop/server/collection/${t}`,
+      {
+        headers: {
+          lang: e,
+          device: "web",
+          "auth-token": a,
+          "auth-timestamp": s,
+          "accept-language": e
+        }
+      }
+    )).json()).data;
+  } catch (u) {
+    throw new Error(`Failed to fetch collection data - ${u}`);
+  }
+}, En = "collection", On = ({
+  language: e,
+  collectionId: t,
+  environment: o,
+  adServerApiKey: r
+}) => G({
+  queryKey: [En, t, e],
+  queryFn: () => In({
+    language: e,
+    collectionId: t,
+    environment: o,
+    adServerApiKey: r
+  })
+}), Dn = "_card_15xcs_1", Ln = "_imageSkeleton_15xcs_17", Wn = "_titleSkeleton_15xcs_19", Gn = "_descriptionSkeleton_15xcs_21", Mn = "_priceSkeleton_15xcs_23", Rn = "_buttonSkeleton_15xcs_25", y = {
+  card: Dn,
+  imageSkeleton: Ln,
+  titleSkeleton: Wn,
+  descriptionSkeleton: Gn,
+  priceSkeleton: Mn,
+  buttonSkeleton: Rn
+}, Un = (e) => {
+  const { className: t } = e;
+  return /* @__PURE__ */ h("div", { className: `${y.card} ${t || ""}`, children: [
+    /* @__PURE__ */ n(k, { className: y.imageSkeleton }),
+    /* @__PURE__ */ n(k, { className: y.titleSkeleton }),
+    /* @__PURE__ */ n(k, { className: y.descriptionSkeleton }),
+    /* @__PURE__ */ n(k, { className: y.priceSkeleton }),
+    /* @__PURE__ */ n(k, { className: y.buttonSkeleton })
+  ] });
+}, Qn = "_container_gnnm8_1", Yn = "_header_gnnm8_13", Kn = "_titleSkeleton_gnnm8_27", Vn = "_carouselWrapper_gnnm8_37", Fn = "_carouselContainer_gnnm8_49", qn = "_cardWrapper_gnnm8_67", x = {
+  container: Qn,
+  header: Yn,
+  titleSkeleton: Kn,
+  carouselWrapper: Vn,
+  carouselContainer: Fn,
+  cardWrapper: qn
+}, jn = (e) => {
+  const { length: t } = e, o = t ?? 5;
+  return /* @__PURE__ */ h("div", { className: x.container, children: [
+    /* @__PURE__ */ n("div", { className: x.header, children: /* @__PURE__ */ n(k, { className: x.titleSkeleton }) }),
+    /* @__PURE__ */ n("div", { className: x.carouselWrapper, children: /* @__PURE__ */ n("div", { className: x.carouselContainer, children: Array.from({ length: o }, (r, a) => /* @__PURE__ */ n("div", { className: x.cardWrapper, children: /* @__PURE__ */ n(Un, {}) }, a)) }) })
+  ] });
+};
+function Zn({
+  products: e,
+  title: t,
+  hideTitle: o,
+  isLoggedin: r,
+  language: a,
+  environment: s,
+  adServerApiKey: l,
+  trackBrandshopHandler: u,
+  onProductClick: d
+}) {
+  const { data: g, isLoading: i, error: m } = On({
+    language: a,
+    collectionId: e.collection_id ?? "",
+    environment: s,
+    adServerApiKey: l
+  }), C = (v, p) => {
+    N(
+      "ads_bs_content_click",
+      {
+        contentName: v.title,
+        contentOrder: (p + 1).toString(),
+        userStatus: r ? "logged_in" : "guest",
+        platform: "Web"
+      },
+      u
+    );
+    const S = An(v), b = B(S);
+    b && d(b);
+  };
+  return i ? /* @__PURE__ */ n(jn, {}) : m || !g ? null : /* @__PURE__ */ h("div", { className: c.sectionContainer, children: [
+    !o && /* @__PURE__ */ n("h2", { className: c.sectionTitle, children: t }),
+    /* @__PURE__ */ n(
+      $n,
+      {
+        products: g.items,
+        onProductClick: (v, p) => C(v, p),
+        language: a
+      }
+    )
+  ] });
+}
+const Hn = ({
+  section: e,
+  onLinkClick: t,
+  trackBrandshopHandler: o,
+  isLoggedin: r,
+  brandName: a,
+  language: s,
+  environment: l,
+  adServerApiKey: u,
+  brandshopName: d
+}) => {
+  const {
+    section_type: g,
+    section_title: i,
+    show_section_title: m,
+    data: C,
+    section_display_order: v
+  } = e, { ref: p } = J({
+    onChange: (S) => {
+      S && N(
+        "ads_bs_section_view",
+        {
+          brandName: a,
+          sectionName: i,
+          sectionOrder: v.toString(),
+          userStatus: r ? "logged_in" : "guest",
+          platform: "Web"
+        },
+        o
+      );
+    }
+  });
+  return /* @__PURE__ */ n("div", { ref: p, style: { width: "100%" }, children: (() => {
+    switch (g) {
+      case "nav":
+        return /* @__PURE__ */ n(
+          Re,
+          {
+            title: i,
+            hideTitle: !m,
+            logo: C[0].logo ?? "",
+            navigationLinks: C[0].navigation_links ?? [],
+            onLinkClick: t,
+            isLoggedin: r,
+            trackBrandshopHandler: o,
+            brandshopName: d
+          }
+        );
+      case "category":
+        return /* @__PURE__ */ n(
+          Me,
+          {
+            title: i,
+            hideTitle: !m,
+            categories: C,
+            onCategoryClick: t,
+            isLoggedin: r,
+            trackBrandshopHandler: o
+          }
+        );
+      case "banner":
+        return /* @__PURE__ */ n(
+          Ge,
+          {
+            title: i,
+            banners: C,
+            hideTitle: !m,
+            onBannerClick: t,
+            isLoggedin: r,
+            sectionTitle: i,
+            trackBrandshopHandler: o
+          }
+        );
+      case "productSlider":
+        return /* @__PURE__ */ n(
+          Zn,
+          {
+            products: C[0],
+            title: i,
+            hideTitle: !m,
+            isLoggedin: r,
+            trackBrandshopHandler: o,
+            onProductClick: t,
+            language: s,
+            environment: l,
+            adServerApiKey: u
+          }
+        );
+      default:
+        return null;
+    }
+  })() });
+}, zn = (e, t) => {
+  let o;
+  return (...r) => {
+    clearTimeout(o), o = setTimeout(() => {
+      e(...r);
+    }, t);
+  };
+};
+function Jn(e = 5) {
+  const [t, o] = T(!1);
+  return P(() => {
+    const a = zn(() => {
+      const s = window.scrollY || document.documentElement.scrollTop, l = window.innerHeight, u = document.documentElement.scrollHeight, d = s + l >= u - e;
+      o(d);
+    }, 100);
+    return window.addEventListener("scroll", a, { passive: !0 }), a(), () => {
+      window.removeEventListener("scroll", a);
+    };
+  }, [e]), t;
+}
+function Xn() {
+  return /* @__PURE__ */ h("div", { className: c.brandshopContainerSkeleton, children: [
+    /* @__PURE__ */ n(k, { className: c.bannerSkeleton }),
+    /* @__PURE__ */ n("div", { className: c.navContainerSkeleton, children: Array.from({ length: 3 }).map((o, r) => /* @__PURE__ */ n(k, { className: c.navPillSkeleton }, r)) }),
+    /* @__PURE__ */ n(
+      "div",
+      {
+        className: c.categoryGridSkeleton,
+        style: {
+          gridTemplateColumns: `repeat(${Math.min(2, 2)}, 1fr)`
+        },
+        children: Array.from({ length: 2 }).map((o, r) => /* @__PURE__ */ n(k, { className: c.categoryTileSkeleton }, r))
+      }
+    ),
+    /* @__PURE__ */ n(k, { className: c.promoSkeleton })
+  ] });
+}
+function et({
+  language: e,
+  brandshopId: t,
+  environment: o,
+  adServerApiKey: r,
+  isLoggedin: a,
+  brandshop: s,
+  onLinkClick: l,
+  trackBrandshopHandler: u
+}) {
+  const { isLaptop: d, isDesktop: g } = X(), i = d || g ? O.Web : O.Mobile;
+  let m = s;
+  const {
+    data: C,
+    isLoading: v,
+    error: p
+  } = te({
+    language: e,
+    brandshopId: t,
+    environment: o,
+    adServerApiKey: r,
+    deviceType: i,
+    enabled: !s
+  });
+  m ??= C;
+  const S = Jn(), b = m?.name || "", A = a ? "logged_in" : "guest", I = "Web";
+  if (P(() => {
+    window.scrollTo(0, 0);
+  }, []), P(() => {
+    m && N(
+      "ads_bs_pageload",
+      { brandName: b, userStatus: A, platform: I },
+      u
+    );
+  }, [m]), P(() => {
+    !m || !S || N(
+      "ads_bs_pageend",
+      { brandName: b, userStatus: A, platform: I },
+      u
+    );
+  }, [S]), v) return /* @__PURE__ */ n(Xn, {});
+  if (p)
+    throw new Error(
+      `brandshop with id ${t} failed to load} - ${p?.message || "unknown error"}`
+    );
+  const E = m?.content;
+  if (!Array.isArray(E)) return null;
+  const Q = [...E].sort(
+    (w, Y) => w.section_display_order - Y.section_display_order
+  );
+  return /* @__PURE__ */ n("div", { className: c.brandshopContent, children: Q.map((w) => /* @__PURE__ */ n(
+    Hn,
+    {
+      section: w,
+      onLinkClick: l,
+      isLoggedin: a,
+      brandName: b,
+      trackBrandshopHandler: u,
+      language: e,
+      environment: o,
+      adServerApiKey: r,
+      brandshopName: m?.name
+    },
+    w.tracking_id
+  )) });
+}
+const nt = "data:image/svg+xml,%3csvg%20width='49'%20height='48'%20viewBox='0%200%2049%2048'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M24.4941%2020.0311V24.0242M24.5%2030H24.52M22.7708%206.98426L6.27321%2034.9912C5.4892%2036.3221%206.45019%2038%207.9965%2038H40.9918C42.5381%2038%2043.4991%2036.3221%2042.7151%2034.9912L26.2174%206.98426C25.4444%205.67192%2023.5439%205.67191%2022.7708%206.98426ZM25%2030C25%2030.2761%2024.7761%2030.5%2024.5%2030.5C24.2239%2030.5%2024%2030.2761%2024%2030C24%2029.7239%2024.2239%2029.5%2024.5%2029.5C24.7761%2029.5%2025%2029.7239%2025%2030Z'%20stroke='%23DA1E28'%20stroke-width='4'%20stroke-linecap='round'/%3e%3c/svg%3e";
+function tt({ language: e }) {
+  const t = e === "ar", o = t ? "حدث خطأ ما" : "Something went wrong", r = t ? "نواجه مشكلة في تحميل هذه الصفحة. يرجى الانتظار قليلاً؛ سيتم حلها قريباً." : "We're having trouble loading this page. Please bear with us; it should be resolved shortly.", a = t ? "إعادة المحاولة" : "Try again";
+  return /* @__PURE__ */ h("div", { className: c.brandshopError, children: [
+    /* @__PURE__ */ n(f, { src: nt, className: c.errorIcon, alt: "error" }),
+    /* @__PURE__ */ h("div", { className: c.errorContent, children: [
+      /* @__PURE__ */ h("div", { className: c.errorText, children: [
+        /* @__PURE__ */ n("h2", { children: o }),
+        /* @__PURE__ */ n("p", { children: r })
+      ] }),
+      /* @__PURE__ */ n(
+        "button",
+        {
+          className: c.errorButton,
+          onClick: () => window.location.reload(),
+          children: a
+        }
+      )
+    ] })
+  ] });
+}
+class ot extends V {
+  constructor(t) {
+    super(t), this.state = { hasError: !1, error: null, errorInfo: null };
+  }
+  static getDerivedStateFromError(t) {
+    return { hasError: !0, error: t, errorInfo: null };
+  }
+  componentDidCatch(t, o) {
+    this.setState({ error: t, errorInfo: o });
+  }
+  render() {
+    return this.state.hasError ? this.props.fallback : this.props.children;
+  }
+}
+function lt(e) {
+  return /* @__PURE__ */ n(K, { children: /* @__PURE__ */ n(ot, { fallback: /* @__PURE__ */ n(tt, { language: e.language }), children: /* @__PURE__ */ n(et, { ...e }) }) });
+}
+export {
+  lt as Brandshop
+};
+//# sourceMappingURL=Brandshop.js.map