@salla.sa/twilight-theme-engine 1.0.0-beta.4

package/dist/chunk-GLM3RPCP.js

@@ -0,0 +1,1167 @@
+import { Header } from './chunk-QTDGM2SO.js';
+import { Copyright } from './chunk-5Q6PFLDN.js';
+import { useLocation, useIsHome, navigationSetups, NavigationInterceptor } from './chunk-GO34DE35.js';
+import { color } from './chunk-VVZNW5CB.js';
+import { useUser } from './chunk-I5Z4NJBB.js';
+import { AUTH_TOKEN_COOKIE_NAME, clearAuthTokenCookie, syncSdkLocale } from './chunk-QYL5OHAV.js';
+import { getTwilightContext, updateTwilightContext } from './chunk-KIPZQN3Y.js';
+import { useAsset } from './chunk-Z653O7MX.js';
+import { DocumentClassProvider, useDocumentClass } from './chunk-GN34LCTG.js';
+import { useTranslation, I18nProvider } from './chunk-VVRYP6IL.js';
+import { FALLBACK_LOCALE, getLanguageInfo } from './chunk-T72DAX7R.js';
+import { WidgetHead } from './chunk-RYBA3JDM.js';
+import { HookSlot } from './chunk-25SSLQAJ.js';
+import { hookRegistry } from './chunk-J37AYLWL.js';
+import { Image } from './chunk-2KF5JJU6.js';
+import { Link } from './chunk-TZ4YD5CU.js';
+import { LazyImageModal } from './chunk-3DCZJDDK.js';
+import { Toaster } from './chunk-MXQCE3KA.js';
+import { useTwilight, TwilightContext } from './chunk-BWFBVXT3.js';
+import React2, { lazy, Suspense, useCallback, useMemo, useRef, useEffect, useState } from 'react';
+import { SallaAppsIcons } from '@salla.sa/twilight-components-react/apps-icons';
+import { SallaContacts } from '@salla.sa/twilight-components-react/contacts';
+import { SallaMenu } from '@salla.sa/twilight-components-react/menu';
+import { SallaPayments } from '@salla.sa/twilight-components-react/payments';
+import { SallaSocial } from '@salla.sa/twilight-components-react/social';
+import { SallaTrustBadges } from '@salla.sa/twilight-components-react/trust-badges';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/utils/apply-theme.ts
+function applyTheme(theme) {
+  if (typeof document === "undefined") return;
+  const vars = [];
+  if (theme.font?.name) {
+    vars.push(
+      ["--font-main", theme.font.name],
+      ["--font-light", theme.font.name],
+      ["--font-regular", theme.font.name],
+      ["--font-medium", `${theme.font.name}-Medium`],
+      ["--font-bold", `${theme.font.name}-Bold`]
+    );
+  }
+  const { color: color2 } = theme;
+  if (color2) {
+    vars.push(["--color-text", "#222222"]);
+    if (color2.primary) {
+      const c = color(color2.primary);
+      vars.push(
+        ["--color-primary", color2.primary],
+        ["--color-primary-dark", c.darken(0.15)],
+        ["--color-primary-light", c.lighten(0.15)],
+        ["--color-title", color2.primary],
+        ["--color-secondary", color2.primary]
+      );
+    }
+    if (color2.reverse_text) {
+      vars.push(
+        ["--color-primary-reverse", color2.reverse_text],
+        ["--color-text-reverse", color2.reverse_text],
+        ["--color-reverse-text", color2.reverse_text]
+      );
+    }
+    if (color2.reverse_primary) {
+      vars.push(["--color-reverse-primary", color2.reverse_primary]);
+    }
+  }
+  vars.push(["--page-height", "100%"]);
+  const root = document.documentElement;
+  for (const [prop, val] of vars) {
+    root.style.setProperty(prop, val);
+  }
+}
+
+// src/providers/twilight-theme.ts
+function fontToClass(name) {
+  if (!name) return null;
+  const slug = name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+  return slug ? `font-${slug}` : null;
+}
+function ThemeDocumentSync({
+  theme,
+  locale,
+  direction,
+  isMobileWebview
+}) {
+  const bodyClasses = [
+    theme.name ? `salla-${theme.name}` : null,
+    `color-mode-${theme.color?.is_dark ? "dark" : "light"}`,
+    direction,
+    theme.mode === "preview" ? "preview-mode" : null,
+    fontToClass(theme.font?.name),
+    isMobileWebview ? "mobile-webview" : null,
+    theme.settings?.footer_is_dark ? "footer-is-dark" : "footer-is-light",
+    theme.settings?.topnav_is_dark ? "topnav-is-dark" : null,
+    theme.settings?.sticky_add_to_cart ? "is-sticky-product-bar" : null
+  ].filter(Boolean);
+  useDocumentClass({
+    html: { lang: locale, dir: direction },
+    body: { class: bodyClasses }
+  });
+  useEffect(() => {
+    applyTheme(theme);
+  }, [theme]);
+  return null;
+}
+function getSalla() {
+  if (typeof window === "undefined") return void 0;
+  return window.salla;
+}
+function useTwilightInit({
+  debug: _debug,
+  initialData,
+  onReady,
+  onError: _onError,
+  initialLocale
+}) {
+  const isBrowser = typeof window !== "undefined";
+  const initialLanguage = getLanguageInfo(initialLocale);
+  const settingsData = initialData;
+  const [isReady, setReady] = useState(() => !!settingsData);
+  const [storeData, setStoreData] = useState(
+    () => settingsData?.store ?? {}
+  );
+  const [themeData] = useState(() => {
+    const theme = settingsData?.theme;
+    if (theme) {
+      return {
+        ...theme,
+        is_rtl: theme.is_rtl ?? initialLanguage.dir === "rtl"
+      };
+    }
+    return { is_rtl: initialLanguage.dir === "rtl" };
+  });
+  const [currency] = useState(null);
+  const [isMobileWebview] = useState(false);
+  useEffect(() => {
+    if (!isBrowser || !themeData) return;
+    const sdk = getSalla();
+    sdk?.config?.set?.("theme.is_rtl", themeData.is_rtl ?? false);
+    window.enable_more_menu = String(themeData.settings?.enable_more_menu ?? true);
+  }, [themeData, isBrowser]);
+  useEffect(() => {
+    const sdk = getSalla();
+    if (!sdk) return;
+    if (initialLocale) {
+      syncSdkLocale(initialLocale);
+    }
+    if (typeof sdk.init !== "function") return;
+    const ctx = getTwilightContext();
+    const pageCtx = ctx.page;
+    const initData = pageCtx ? {
+      ...settingsData,
+      page: {
+        ...pageCtx,
+        url: pageCtx.url ?? ctx.location.pathname + ctx.location.searchStr
+      }
+    } : settingsData;
+    sdk.init(initData);
+    const initSdk = async () => {
+      try {
+        await sdk.onReady();
+      } catch {
+      }
+      syncSdkLocale(initialLocale);
+      setReady(true);
+      document.dispatchEvent(new CustomEvent("theme::ready"));
+      onReady?.({
+        store: storeData,
+        theme: themeData
+      });
+    };
+    initSdk();
+  }, [initialLocale]);
+  return {
+    isReady,
+    storeData,
+    setStoreData,
+    themeData,
+    currency,
+    isMobileWebview
+  };
+}
+var routeDocumentSyncs = {
+  tanstack: lazy(
+    () => import('./document-class-PLK3HUM6.js').then((m) => ({
+      default: m.TanStackDocumentSync
+    }))
+  )
+  // Add other frameworks here:
+  // nextjs: lazy(() => import('../nextjs/document-sync').then(m => ({ default: m.NextjsDocumentSync }))),
+};
+
+// src/hooks/useDate.ts
+function normalizeDate(input) {
+  if (!input) return /* @__PURE__ */ new Date();
+  if (input instanceof Date) return input;
+  if (typeof input === "number") return new Date(input);
+  if (typeof input === "object" && "date" in input) return new Date(input.date);
+  return new Date(input);
+}
+function useDate() {
+  const { locale } = useTranslation();
+  const format = (date, formatType = "medium") => {
+    const dateObj = normalizeDate(date);
+    const formatOptionsMap = {
+      full: { weekday: "long", year: "numeric", month: "long", day: "numeric" },
+      long: { year: "numeric", month: "long", day: "numeric" },
+      medium: { year: "numeric", month: "long", day: "numeric" },
+      short: { year: "numeric", month: "short", day: "numeric" },
+      time: { hour: "2-digit", minute: "2-digit" }
+    };
+    try {
+      return new Intl.DateTimeFormat(locale, formatOptionsMap[formatType]).format(dateObj);
+    } catch {
+      return dateObj.toLocaleDateString(locale);
+    }
+  };
+  const ago = (date) => {
+    const dateObj = normalizeDate(date);
+    const diffInSeconds = Math.floor((Date.now() - dateObj.getTime()) / 1e3);
+    const units = [
+      { unit: "year", threshold: 31536e3, divisor: 31536e3 },
+      { unit: "month", threshold: 2592e3, divisor: 2592e3 },
+      { unit: "week", threshold: 604800, divisor: 604800 },
+      { unit: "day", threshold: 86400, divisor: 86400 },
+      { unit: "hour", threshold: 3600, divisor: 3600 },
+      { unit: "minute", threshold: 60, divisor: 60 },
+      { unit: "second", threshold: 1, divisor: 1 }
+    ];
+    for (const { unit, threshold, divisor } of units) {
+      if (diffInSeconds >= threshold) {
+        const value = Math.floor(diffInSeconds / divisor);
+        try {
+          return new Intl.RelativeTimeFormat(locale, { numeric: "auto", style: "long" }).format(
+            -value,
+            unit
+          );
+        } catch {
+          return new Intl.RelativeTimeFormat("en", { numeric: "auto" }).format(-value, unit);
+        }
+      }
+    }
+    return locale.startsWith("ar") ? "\u0627\u0644\u0622\u0646" : "just now";
+  };
+  return { format, ago, now: /* @__PURE__ */ new Date() };
+}
+
+// src/hooks/useNumber.ts
+var ARABIC_NUMERALS = ["\u0660", "\u0661", "\u0662", "\u0663", "\u0664", "\u0665", "\u0666", "\u0667", "\u0668", "\u0669"];
+function useNumber() {
+  const { store } = useTwilight();
+  const useArabicNumerals = store?.settings?.arabic_numbers_enabled ?? false;
+  const toArabic = (input) => {
+    const str = String(input);
+    return str.replace(/[0-9]/g, (d) => ARABIC_NUMERALS[parseInt(d)]);
+  };
+  const format = (number) => {
+    return useArabicNumerals ? toArabic(number) : String(number);
+  };
+  return {
+    /** Format number with store settings */
+    format,
+    /** Convert to Arabic numerals */
+    toArabic,
+    /** Whether Arabic numerals are enabled */
+    useArabicNumerals
+  };
+}
+var AR_LOCALE = "ar";
+var SAR_CURRENCY = "SAR";
+function useMoney() {
+  const { store } = useTwilight();
+  const { locale } = useTranslation();
+  const useArabicNumerals = store?.settings?.arabic_numbers_enabled ?? false;
+  const format = (amount, options) => {
+    const currency = options?.currency ?? "SAR";
+    const loc = options?.locale ?? locale;
+    const type = options?.type ?? "product";
+    if (amount == null || amount === "") {
+      const showDash = type === "product" ? store?.settings?.product?.show_price_as_dash : false;
+      return showDash ? "-" : "";
+    }
+    const numericAmount = typeof amount === "string" ? parseFloat(amount) : amount;
+    if (typeof amount === "string" && amount === "-") return amount;
+    if (isNaN(numericAmount)) return String(amount);
+    if (!numericAmount && numericAmount !== 0) {
+      const showDash = type === "product" ? store?.settings?.product?.show_price_as_dash : false;
+      return showDash ? "-" : "";
+    }
+    let formatted = new Intl.NumberFormat(loc, {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    }).format(numericAmount);
+    if (useArabicNumerals && loc.startsWith(AR_LOCALE)) {
+      formatted = formatted.replace(/[0-9]/g, (d) => "\u0660\u0661\u0662\u0663\u0664\u0665\u0666\u0667\u0668\u0669"[parseInt(d)]);
+    }
+    if (currency === SAR_CURRENCY) {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        formatted,
+        " ",
+        /* @__PURE__ */ jsx("i", { className: "sicon-sar" })
+      ] });
+    }
+    try {
+      return new Intl.NumberFormat(loc, {
+        style: "currency",
+        currency,
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      }).format(numericAmount);
+    } catch {
+      return `${formatted} ${currency}`;
+    }
+  };
+  const parse = (moneyString) => {
+    const cleaned = moneyString.replace(/[^\d.,٬٫]/g, "");
+    const normalized = cleaned.replace(/٬/g, "").replace(/٫/g, ".");
+    const parts = normalized.split(/[.,]/);
+    if (parts.length > 2) {
+      return parseFloat(`${parts.slice(0, -1).join("")}.${parts[parts.length - 1]}`);
+    }
+    return parseFloat(normalized.replace(/,/g, ""));
+  };
+  const isValid = (value) => {
+    if (typeof value === "number" && !isNaN(value) && isFinite(value)) return true;
+    if (typeof value === "string") {
+      const parsed = parseFloat(value);
+      return !isNaN(parsed) && isFinite(parsed);
+    }
+    return false;
+  };
+  return { format, parse, isValid };
+}
+function eventId(prefix) {
+  return `${prefix}_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
+}
+function toProduct(product, overrides) {
+  return {
+    id: product.id,
+    name: product.name,
+    price: product.sale_price,
+    brand: product.brand?.name,
+    category: product.category?.name,
+    quantity: 1,
+    ...overrides
+  };
+}
+function getCurrency(product, fallback = "SAR") {
+  return product?.currency ?? fallback;
+}
+function useGtm() {
+  const { store } = useTwilight();
+  const { data: user } = useUser();
+  const gtmIds = store.settings?.keys?.gtm;
+  const enabled = !!(gtmIds && gtmIds.length > 0);
+  const currency = user?.preferences?.currency_code ?? "SAR";
+  const push = useCallback(
+    (data) => {
+      if (!enabled) return;
+      window.dataLayer = window.dataLayer || [];
+      window.dataLayer.push(data);
+    },
+    [enabled]
+  );
+  const viewPage = useCallback((pageType) => push({ event: "viewPage", pageType }), [push]);
+  const detail = useCallback(
+    (product) => push({
+      event: "detail",
+      ecommerce: {
+        currencyCode: getCurrency(product, currency),
+        event_id: eventId("detail"),
+        detail: { products: [toProduct(product)] }
+      }
+    }),
+    [push, currency]
+  );
+  const impressions = useCallback(
+    (products, list) => {
+      if (products.length === 0) return;
+      push({
+        event: "impressions",
+        ecommerce: {
+          currencyCode: getCurrency(products[0], currency),
+          event_id: eventId("impressions"),
+          impressions: {
+            products: products.map((p, i) => toProduct(p, { position: i + 1, list }))
+          }
+        }
+      });
+    },
+    [push, currency]
+  );
+  const click = useCallback(
+    (product, list, position) => push({
+      event: "click",
+      ecommerce: {
+        currencyCode: getCurrency(product, currency),
+        event_id: eventId("click"),
+        click: {
+          actionField: { list },
+          products: [toProduct(product, { position, list })]
+        }
+      }
+    }),
+    [push, currency]
+  );
+  const add = useCallback(
+    (product, quantity = 1) => push({
+      event: "addToCart",
+      ecommerce: {
+        currencyCode: getCurrency(product, currency),
+        event_id: eventId("addToCart"),
+        add: { products: [toProduct(product, { quantity })] }
+      }
+    }),
+    [push, currency]
+  );
+  const remove = useCallback(
+    (item) => push({
+      event: "removeFromCart",
+      ecommerce: {
+        currencyCode: currency,
+        event_id: eventId("removeFromCart"),
+        remove: {
+          products: [
+            {
+              id: item.product_id,
+              name: item.product_name,
+              price: typeof item.price === "number" ? item.price : item.price.amount,
+              quantity: item.quantity
+            }
+          ]
+        }
+      }
+    }),
+    [push, currency]
+  );
+  const checkout = useCallback(
+    (cart, step = 1) => push({
+      event: "checkout",
+      ecommerce: {
+        currencyCode: currency,
+        event_id: eventId("checkout"),
+        checkout: {
+          actionField: { step, id: cart.id },
+          products: cart.items.map((item) => ({
+            id: item.product_id,
+            name: item.product_name,
+            price: typeof item.price === "number" ? item.price : item.price.amount,
+            quantity: item.quantity
+          }))
+        }
+      }
+    }),
+    [push, currency]
+  );
+  const purchase = useCallback(
+    (orderId, cart) => push({
+      event: "purchase",
+      ecommerce: {
+        currencyCode: currency,
+        event_id: eventId("purchase"),
+        purchase: {
+          actionField: {
+            id: orderId,
+            revenue: cart.total,
+            tax: cart.tax_amount,
+            coupon: cart.coupon
+          },
+          products: cart.items.map((item) => ({
+            id: item.product_id,
+            name: item.product_name,
+            price: typeof item.price === "number" ? item.price : item.price.amount,
+            quantity: item.quantity
+          }))
+        }
+      }
+    }),
+    [push, currency]
+  );
+  return { enabled, push, viewPage, detail, impressions, click, add, remove, checkout, purchase };
+}
+var DAYS = [
+  "monday",
+  "tuesday",
+  "wednesday",
+  "thursday",
+  "friday",
+  "saturday",
+  "sunday"
+];
+var DAY_NAMES = {
+  monday: "common.days.monday",
+  tuesday: "common.days.tuesday",
+  wednesday: "common.days.wednesday",
+  thursday: "common.days.thursday",
+  friday: "common.days.friday",
+  saturday: "common.days.saturday",
+  sunday: "common.days.sunday"
+};
+var TIME_NAMES = {
+  AM: "common.time.am",
+  PM: "common.time.pm"
+};
+function parseTime(timeStr) {
+  const cleaned = timeStr.trim().toLowerCase();
+  const match = cleaned.match(/^(\d{1,2}):(\d{2})(?:\s*(am|pm))?$/);
+  if (!match) {
+    return 0;
+  }
+  let hours = parseInt(match[1], 10);
+  const minutes = parseInt(match[2], 10);
+  const meridiem = match[3];
+  if (meridiem === "pm" && hours < 12) {
+    hours += 12;
+  } else if (meridiem === "am" && hours === 12) {
+    hours = 0;
+  }
+  return hours * 60 + minutes;
+}
+function parseRanges(ranges) {
+  return ranges.map((range) => {
+    const parts = range.split("-").map((s) => s.trim());
+    if (parts.length !== 2) return null;
+    const start = parseTime(parts[0]);
+    const end = parseTime(parts[1]);
+    return { start, end };
+  }).filter((r) => r !== null && r.start < r.end);
+}
+function indexToDay(index) {
+  return DAYS[index % 7];
+}
+function getDayIndex(date) {
+  const jsDay = date.getDay();
+  return jsDay === 0 ? 6 : jsDay - 1;
+}
+function getTimeInMinutes(date) {
+  return date.getHours() * 60 + date.getMinutes();
+}
+function isInRanges(time, ranges) {
+  return ranges.some((range) => time >= range.start && time < range.end);
+}
+function findNextRange(time, ranges) {
+  const sorted = [...ranges].sort((a, b) => a.start - b.start);
+  return sorted.find((range) => range.start > time) ?? null;
+}
+function useOpeningHours(settings) {
+  const { t } = useTranslation();
+  return useMemo(() => {
+    if (!settings?.enabled || !settings?.hours) {
+      return {
+        isOpen: true,
+        // Assume open if not configured
+        isEnabled: false,
+        nextOpen: null,
+        nextOpenFormatted: ""
+      };
+    }
+    const hours = settings.hours;
+    const now = /* @__PURE__ */ new Date();
+    const currentDayIndex = getDayIndex(now);
+    const currentTime = getTimeInMinutes(now);
+    const schedule = {};
+    for (const day of DAYS) {
+      const dayRanges = hours[day];
+      schedule[day] = {
+        ranges: dayRanges ? parseRanges(dayRanges) : []
+      };
+    }
+    const todaySchedule = schedule[indexToDay(currentDayIndex)];
+    if (isInRanges(currentTime, todaySchedule.ranges)) {
+      return {
+        isOpen: true,
+        isEnabled: true,
+        nextOpen: null,
+        nextOpenFormatted: ""
+      };
+    }
+    const nextRangeToday = findNextRange(currentTime, todaySchedule.ranges);
+    if (nextRangeToday) {
+      const nextOpen = new Date(now);
+      nextOpen.setHours(Math.floor(nextRangeToday.start / 60), nextRangeToday.start % 60, 0, 0);
+      return {
+        isOpen: false,
+        isEnabled: true,
+        nextOpen,
+        nextOpenFormatted: formatNextOpen(nextOpen, t)
+      };
+    }
+    for (let i = 1; i <= 7; i++) {
+      const nextDayIndex = (currentDayIndex + i) % 7;
+      const nextDayName = indexToDay(nextDayIndex);
+      const nextDaySchedule = schedule[nextDayName];
+      if (nextDaySchedule.ranges.length > 0) {
+        const firstRange = [...nextDaySchedule.ranges].sort((a, b) => a.start - b.start)[0];
+        const nextOpen = new Date(now);
+        nextOpen.setDate(nextOpen.getDate() + i);
+        nextOpen.setHours(Math.floor(firstRange.start / 60), firstRange.start % 60, 0, 0);
+        return {
+          isOpen: false,
+          isEnabled: true,
+          nextOpen,
+          nextOpenFormatted: formatNextOpen(nextOpen, t)
+        };
+      }
+    }
+    return {
+      isOpen: true,
+      isEnabled: true,
+      nextOpen: null,
+      nextOpenFormatted: ""
+    };
+  }, [settings, t]);
+}
+function formatNextOpen(date, t) {
+  const dayName = t(DAY_NAMES[indexToDay(getDayIndex(date))]);
+  const hours = date.getHours();
+  const minutes = date.getMinutes().toString().padStart(2, "0");
+  const isPM = hours >= 12;
+  const displayHours = hours > 12 ? hours - 12 : hours === 0 ? 12 : hours;
+  const meridiem = t(TIME_NAMES[isPM ? "PM" : "AM"]);
+  return `${dayName} ${displayHours}:${minutes} ${meridiem}`;
+}
+function usePageConfig(pageData) {
+  const pageDataRef = useRef(pageData);
+  pageDataRef.current = pageData;
+  useEffect(() => {
+    const salla = window.salla;
+    if (!salla?.config?.set) {
+      if (process.env.NODE_ENV === "development") {
+        console.warn("[usePageConfig] salla.config.set not available. Page config not set.");
+      }
+      return;
+    }
+    const current = pageDataRef.current;
+    const url = current.url ?? window.location.pathname + window.location.search;
+    salla.config.set("page", {
+      ...current,
+      url
+    });
+  }, []);
+}
+
+// src/utils/breadcrumb.ts
+var BREADCRUMB_REFERRER_KEY = "breadcrumb-referrer";
+function getBreadcrumbReferrer() {
+  try {
+    const raw = sessionStorage.getItem(BREADCRUMB_REFERRER_KEY);
+    if (!raw) return null;
+    const { name, url } = JSON.parse(raw);
+    return typeof name === "string" && typeof url === "string" ? { name, url } : null;
+  } catch {
+    return null;
+  }
+}
+function setBreadcrumbReferrer(breadcrumb) {
+  try {
+    sessionStorage.setItem(BREADCRUMB_REFERRER_KEY, JSON.stringify(breadcrumb));
+  } catch {
+  }
+}
+
+// src/hooks/useBreadcrumbs.ts
+function useBreadcrumbs(page) {
+  const location = useLocation();
+  const isHome = useIsHome();
+  const { t } = useTranslation();
+  const [referrerCrumb, setReferrerCrumb] = useState(null);
+  useEffect(() => {
+    if (page?.slug === "product.single") {
+      const ref = getBreadcrumbReferrer();
+      if (ref) setReferrerCrumb(ref);
+      return;
+    }
+    setReferrerCrumb(null);
+    if (!isHome && page) {
+      setBreadcrumbReferrer({ name: page.title, url: location.pathname + location.searchStr });
+    }
+  }, [page, isHome, location.pathname, location.searchStr]);
+  return useMemo(() => {
+    if (!page) return [];
+    if (page.breadcrumbs?.length) {
+      if (page.slug === "product.single" && referrerCrumb) {
+        const last = page.breadcrumbs.at(-1);
+        return last ? [page.breadcrumbs[0], referrerCrumb, last] : page.breadcrumbs;
+      }
+      return page.breadcrumbs;
+    }
+    if (isHome) return [];
+    const home = { name: t("common.titles.home"), url: "/" };
+    return [home, { name: page.title, url: location.pathname }];
+  }, [isHome, location.pathname, page, t, referrerCrumb]);
+}
+var GoogleTagBody = lazy(
+  () => import('./GoogleTag-4LHWC365.js').then((m) => ({ default: m.GoogleTagBody }))
+);
+var TwilightBundles = lazy(
+  () => import('./TwilightBundles-5F2H75VV.js').then((m) => ({ default: m.TwilightBundles }))
+);
+var LazySiftSnippet = lazy(
+  () => import('./SiftSnippet-X74S5KDO.js').then((m) => ({ default: m.SiftSnippet }))
+);
+var LazyStoreClosedNotification = lazy(
+  () => import('./StoreClosedNotification-KSB2GPEZ.js').then((m) => ({
+    default: m.StoreClosedNotification
+  }))
+);
+var LazyPriceQuoteButton = lazy(
+  () => import('./PriceQuoteButton-RAAPL4N4.js').then((m) => ({ default: m.PriceQuoteButton }))
+);
+var LazyPreOrderNotification = lazy(
+  () => import('./PreOrderNotification-ZVTGNV7K.js').then((m) => ({
+    default: m.PreOrderNotification
+  }))
+);
+function gtmHandler({ twilight }) {
+  if (!twilight?.store?.settings?.keys?.gtm?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(GoogleTagBody, { gtmIds: twilight.store.settings.keys.gtm }) });
+}
+function useSiftHandler({ twilight }) {
+  const { data: user } = useUser();
+  if (!twilight?.store?.settings?.keys?.sift) {
+    return null;
+  }
+  const customerId = user?.type === "user" && user.id ? String(user.id) : "";
+  return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazySiftSnippet, { beaconKey: twilight.store.settings.keys.sift, customerId }) });
+}
+function storeClosedHandler({ twilight }) {
+  if (!twilight?.store?.settings?.opening_hours?.enabled) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyStoreClosedNotification, {}) });
+}
+function bundlesHandler() {
+  return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(TwilightBundles, {}) });
+}
+function priceQuoteHandler({ twilight }) {
+  if (!twilight?.store?.settings?.features?.price_quote) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyPriceQuoteButton, {}) });
+}
+function preOrderNotificationHandler({ twilight, cartItems }) {
+  if (!twilight?.store?.settings?.features?.["pre-order-campaigns"]) {
+    return null;
+  }
+  const items = cartItems;
+  const hasPreOrder = items?.some((item) => !item.parent_id && item.has_pre_order_campaign);
+  if (!hasPreOrder) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyPreOrderNotification, {}) });
+}
+function registerDefaultHooks() {
+  hookRegistry.register("body:start" /* BODY_START */, gtmHandler, 100);
+  hookRegistry.register("body:start" /* BODY_START */, useSiftHandler, 90);
+  hookRegistry.register("body:start" /* BODY_START */, storeClosedHandler, 80);
+  hookRegistry.register("body:end" /* BODY_END */, bundlesHandler, 100);
+  hookRegistry.register("cart:submit.start", priceQuoteHandler, 100);
+  hookRegistry.register("cart:items.start", preOrderNotificationHandler, 100);
+}
+registerDefaultHooks();
+function Footer() {
+  const { store, theme } = useTwilight();
+  const { cdn } = useAsset();
+  const { t } = useTranslation();
+  const [isTaxModalOpen, setIsTaxModalOpen] = useState(false);
+  const [taxImageSrc, setTaxImageSrc] = useState("");
+  const handleTaxImageClick = (event) => {
+    event.preventDefault();
+    const modalId = event.currentTarget.dataset.modalId;
+    const modal = document.getElementById(modalId || "");
+    const img = modal?.querySelector("img");
+    const imgSrc = img?.dataset.src;
+    if (imgSrc) {
+      setTaxImageSrc(imgSrc);
+      setIsTaxModalOpen(true);
+    }
+  };
+  return /* @__PURE__ */ jsxs("footer", { className: "store-footer", suppressHydrationWarning: true, children: [
+    /* @__PURE__ */ jsx(HookSlot, { name: "footer:start" }),
+    /* @__PURE__ */ jsx("div", { "aria-label": "footer", className: "store-footer__inner", children: /* @__PURE__ */ jsxs("div", { className: "container grid grid-cols-1 lg:grid-cols-6 gap-8 lg:gap-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "lg:col-span-2 rtl:lg:pl-20 ltr:lg:pr-20", children: [
+        /* @__PURE__ */ jsx(Link, { to: "/", className: "flex items-center m-0", children: /* @__PURE__ */ jsx("h3", { children: store.name }) }),
+        store.description && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "max-w-sm leading-6 mb-6",
+            dangerouslySetInnerHTML: { __html: store.description }
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ jsx(SallaSocial, { className: "block mb-6" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+          /* @__PURE__ */ jsx(SallaTrustBadges, { ...theme.settings?.footer_is_dark ? { dark: true } : {} }),
+          store.settings?.tax?.number && /* @__PURE__ */ jsxs("div", { className: "flex rtl:space-x-reverse space-x-2 items-end", children: [
+            store.settings?.tax?.certificate && /* @__PURE__ */ jsx(
+              "a",
+              {
+                "data-modal-id": "modal-value-tax",
+                href: "#/",
+                "aria-label": store.settings?.tax?.number,
+                onClick: handleTaxImageClick,
+                children: /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    width: 40,
+                    height: 40,
+                    src: cdn("/images/placeholder.png"),
+                    className: "w-10 rounded-sm hover:opacity-80 transition-opacity",
+                    alt: "value added tax",
+                    loading: "lazy",
+                    decoding: "async"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm text-text-grey mb-1", children: t("common.elements.tax_number", "Tax Number") }),
+              /* @__PURE__ */ jsx("b", { className: "text-sm", children: store.settings?.tax?.number })
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h3", { children: t("blocks.footer.pages_links", "Important Links") }),
+        /* @__PURE__ */ jsx(SallaMenu, { source: "footer" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          SallaContacts,
+          {
+            contacts: store.contacts,
+            contactsTitle: t("blocks.footer.social", "Stay in touch")
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "lg:hidden contact-social", children: /* @__PURE__ */ jsx(SallaSocial, {}) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        SallaAppsIcons,
+        {
+          apps: store.apps,
+          appsTitle: t("blocks.footer.download_apps", "Get our apps"),
+          className: "lg:col-span-2 rtl:lg:pr-20 ltr:lg:pl-20"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "md:flex items-center justify-between py-4 container text-center", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm copyright-text", children: /* @__PURE__ */ jsx(
+        HookSlot,
+        {
+          name: "copyright",
+          context: { storeName: store.name },
+          fallback: /* @__PURE__ */ jsx(Copyright, { storeName: store.name })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(SallaPayments, {})
+    ] }),
+    /* @__PURE__ */ jsx("div", { id: "modal-value-tax", className: "hidden", children: /* @__PURE__ */ jsx(Image, { src: store.settings?.tax?.certificate || void 0, alt: "Tax Certificate" }) }),
+    /* @__PURE__ */ jsx(
+      LazyImageModal,
+      {
+        isOpen: isTaxModalOpen,
+        onClose: () => setIsTaxModalOpen(false),
+        src: taxImageSrc,
+        alt: "Tax Certificate",
+        title: t("common.elements.tax_certificate", "Tax Certificate")
+      }
+    ),
+    /* @__PURE__ */ jsx(HookSlot, { name: "footer:end" })
+  ] });
+}
+var SallaLoginModal = lazy(
+  () => import('@salla.sa/twilight-components-react/login-modal').then((m) => ({
+    default: m.SallaLoginModal
+  }))
+);
+var SallaScopes = lazy(
+  () => import('@salla.sa/twilight-components-react/scopes').then((m) => ({
+    default: m.SallaScopes
+  }))
+);
+var SallaOfferModal = lazy(
+  () => import('@salla.sa/twilight-components-react/offer-modal').then((m) => ({
+    default: m.SallaOfferModal
+  }))
+);
+function MasterLayout({ children }) {
+  const { store } = useTwilight();
+  const { isLoggedIn } = useUser();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "app-inner flex flex-col min-h-full", children: [
+      /* @__PURE__ */ jsx(Header, {}),
+      /* @__PURE__ */ jsx("main", { id: "main-content", role: "main", className: "flex-1", children }),
+      /* @__PURE__ */ jsx(Footer, {})
+    ] }),
+    /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(SallaOfferModal, {}) }),
+    !isLoggedIn && /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(
+      SallaLoginModal,
+      {
+        isEmailAllowed: store?.settings?.auth?.email_allowed,
+        isMobileAllowed: store?.settings?.auth?.mobile_allowed,
+        isEmailRequired: store?.settings?.auth?.is_email_required,
+        suppressHydrationWarning: true
+      }
+    ) }),
+    store?.scope && /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(
+      SallaScopes,
+      {
+        selection: store?.scope?.display_as === "popup" ? "mandatory" : "optional",
+        suppressHydrationWarning: true
+      }
+    ) })
+  ] });
+}
+var getSalla2 = () => typeof window !== "undefined" ? window.salla : void 0;
+var TWILIGHT_LOG_STYLES = {
+  header: "background: linear-gradient(90deg, #7c3aed, #6366f1); color: white; padding: 4px 8px; border-radius: 4px; font-weight: bold;",
+  error: "background: #dc2626; color: white; padding: 2px 6px; border-radius: 3px; font-weight: bold;",
+  warn: "background: #f59e0b; color: white; padding: 2px 6px; border-radius: 3px; font-weight: bold;",
+  info: "background: #3b82f6; color: white; padding: 2px 6px; border-radius: 3px; font-weight: bold;",
+  label: "color: #7c3aed; font-weight: bold;",
+  value: "color: inherit;"
+};
+function TwilightProvider({
+  children,
+  debug = false,
+  skeleton,
+  translations: themeTranslations,
+  onReady,
+  onError,
+  client = { framework: "tanstack", interceptLinks: true },
+  toast = true,
+  toastMobilePosition = "bottom-center",
+  addToCartToast = true,
+  routeClass = true,
+  layout: LayoutComponent = MasterLayout
+}) {
+  const ctx = getTwilightContext();
+  const initialLocale = ctx.locale || FALLBACK_LOCALE;
+  let initialData;
+  try {
+    initialData = ctx.settings;
+  } catch {
+  }
+  const [authToken, setAuthToken] = useState(() => {
+    if (typeof window !== "undefined") {
+      return ctx.authToken ?? window.localStorage.getItem(AUTH_TOKEN_COOKIE_NAME);
+    }
+    return null;
+  });
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const sdk = getSalla2();
+    if (!sdk?.auth?.event) return;
+    const writeAuthCookie = (token) => {
+      document.cookie = `${AUTH_TOKEN_COOKIE_NAME}=${token}; path=/; max-age=${60 * 60 * 24 * 30}; SameSite=Lax; Secure`;
+    };
+    const clearAuthCookie = clearAuthTokenCookie;
+    const setSdkUserType = (type) => {
+      sdk.config?.set?.("user.type", type);
+    };
+    const handleLogin = () => {
+      const newToken = sdk.storage.get(AUTH_TOKEN_COOKIE_NAME);
+      if (!newToken) return;
+      setAuthToken(newToken);
+      updateTwilightContext({ authToken: newToken });
+      setSdkUserType("user");
+    };
+    const handleTokenFetched = (token) => {
+      if (typeof token !== "string" || !token) return;
+      setAuthToken(token);
+      updateTwilightContext({ authToken: token });
+      writeAuthCookie(token);
+      setSdkUserType("user");
+    };
+    const handleLogout = () => {
+      const wasLoggedIn = Boolean(getTwilightContext().authToken);
+      setAuthToken(null);
+      updateTwilightContext({ authToken: null });
+      setSdkUserType("guest");
+      try {
+        clearAuthCookie();
+      } catch {
+      }
+      if (wasLoggedIn) {
+        window.setTimeout(() => window.location.reload(), 3500);
+      }
+    };
+    const handleTokenInvalid = () => {
+      setAuthToken(null);
+      updateTwilightContext({ authToken: null });
+      setSdkUserType("guest");
+      try {
+        window.localStorage.removeItem(AUTH_TOKEN_COOKIE_NAME);
+        sdk.storage.remove?.(AUTH_TOKEN_COOKIE_NAME);
+        clearAuthCookie();
+      } catch {
+      }
+    };
+    sdk.auth.event.onLoggedIn(handleLogin);
+    sdk.auth.event.onLoggedOut(handleLogout);
+    sdk.event.on("auth::token.invalid", handleTokenInvalid);
+    sdk.event.on("auth::token.fetched", handleTokenFetched);
+    sdk.event.on("api::token.injected", handleTokenFetched);
+    return () => {
+      sdk.event.off("auth::loggedIn", handleLogin);
+      sdk.event.off("auth::loggedOut", handleLogout);
+      sdk.event.off("auth::token.invalid", handleTokenInvalid);
+      sdk.event.off("auth::token.fetched", handleTokenFetched);
+      sdk.event.off("api::token.injected", handleTokenFetched);
+    };
+  }, []);
+  const { isReady, storeData, setStoreData, themeData, currency, isMobileWebview } = useTwilightInit({
+    debug,
+    initialData,
+    onReady,
+    onError,
+    initialLocale
+  });
+  const config = useMemo(() => ({ debug }), [debug]);
+  const log = useMemo(
+    () => ({
+      groupCollapsed: (title) => console.groupCollapsed(`%c \u26A1 Twilight: ${title} `, TWILIGHT_LOG_STYLES.header),
+      group: (title) => console.group(`%c${title}`, TWILIGHT_LOG_STYLES.label),
+      groupEnd: () => console.groupEnd(),
+      error: (label, value) => console.log(`%c[${label}]%c`, TWILIGHT_LOG_STYLES.error, TWILIGHT_LOG_STYLES.value, value),
+      warn: (label, value) => console.log(`%c[${label}]%c`, TWILIGHT_LOG_STYLES.warn, TWILIGHT_LOG_STYLES.value, value),
+      info: (label, value) => console.log(`%c[${label}]%c`, TWILIGHT_LOG_STYLES.info, TWILIGHT_LOG_STYLES.value, value),
+      label: (label, value) => console.log(`%c[${label}]%c`, TWILIGHT_LOG_STYLES.label, TWILIGHT_LOG_STYLES.value, value),
+      dir: (label, value) => {
+        console.log(`%c${label}`, TWILIGHT_LOG_STYLES.label);
+        console.dir(value);
+      },
+      trace: (label, trace) => {
+        console.log(`%c${label}`, TWILIGHT_LOG_STYLES.label);
+        console.error(trace);
+      }
+    }),
+    []
+  );
+  const contextValue = useMemo(
+    () => ({
+      isReady,
+      store: storeData,
+      _setStore: setStoreData,
+      theme: themeData,
+      currency,
+      config,
+      log,
+      get salla() {
+        return getSalla2();
+      },
+      get settings() {
+        return getTwilightContext().settings;
+      },
+      get locale() {
+        return getTwilightContext().locale;
+      },
+      get routeId() {
+        return getTwilightContext().routeId;
+      },
+      get location() {
+        return getTwilightContext().location;
+      },
+      get authToken() {
+        return authToken;
+      },
+      get i18n() {
+        return getTwilightContext().i18n;
+      },
+      get dir() {
+        return getTwilightContext().dir;
+      },
+      get extras() {
+        return getTwilightContext().extras;
+      }
+    }),
+    [isReady, storeData, setStoreData, themeData, currency, config, log, authToken]
+  );
+  const framework = client !== false ? client?.framework ?? "tanstack" : null;
+  const LazyNavSetup = framework ? navigationSetups[framework] : null;
+  const LazyDocumentSync = routeClass && framework ? routeDocumentSyncs[framework] : null;
+  const interceptLinks = client !== false && (client?.interceptLinks ?? true);
+  const documentSyncElement = useMemo(
+    () => LazyDocumentSync ? React2.createElement(LazyDocumentSync) : null,
+    [LazyDocumentSync]
+  );
+  const readyShell = useMemo(() => {
+    if (!isReady) return null;
+    return {
+      LayoutComponent,
+      LazyNavSetup,
+      toast,
+      toastMobilePosition,
+      addToCartToast,
+      interceptLinks
+    };
+  }, [
+    isReady,
+    LazyNavSetup,
+    LayoutComponent,
+    toast,
+    toastMobilePosition,
+    addToCartToast,
+    interceptLinks
+  ]);
+  const readyContent = useMemo(() => {
+    if (!readyShell) return null;
+    const inner = readyShell.LayoutComponent ? /* @__PURE__ */ jsx(readyShell.LayoutComponent, { children }) : children;
+    const wrapped = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(WidgetHead, {}),
+      /* @__PURE__ */ jsx(HookSlot, { name: "body:start" /* BODY_START */ }),
+      /* @__PURE__ */ jsxs(Suspense, { fallback: null, children: [
+        readyShell.toast && /* @__PURE__ */ jsx(
+          Toaster,
+          {
+            mobilePosition: readyShell.toastMobilePosition,
+            addToCartToast: readyShell.addToCartToast
+          }
+        ),
+        readyShell.interceptLinks && /* @__PURE__ */ jsx(NavigationInterceptor, {})
+      ] }),
+      inner,
+      /* @__PURE__ */ jsx(HookSlot, { name: "body:end" /* BODY_END */ })
+    ] });
+    if (readyShell.LazyNavSetup) {
+      return React2.createElement(readyShell.LazyNavSetup, null, wrapped);
+    }
+    return wrapped;
+  }, [readyShell]);
+  const i18nInstance = useMemo(() => getTwilightContext().i18n, [initialLocale]);
+  return /* @__PURE__ */ jsx(DocumentClassProvider, { children: /* @__PURE__ */ jsx(TwilightContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(I18nProvider, { i18nInstance, themeTranslations, children: [
+    /* @__PURE__ */ jsx(
+      ThemeDocumentSync,
+      {
+        theme: themeData,
+        locale: initialLocale,
+        direction: getTwilightContext().dir,
+        isMobileWebview
+      }
+    ),
+    documentSyncElement,
+    !isReady && /* @__PURE__ */ jsx("div", { className: "loading-overlay", children: skeleton || /* @__PURE__ */ jsx("div", { className: "loading-spinner" }) }),
+    readyContent
+  ] }) }) });
+}
+
+// src/hooks/useStore.ts
+function useStore() {
+  const { store, _setStore, salla } = useTwilight();
+  const refresh = useCallback(async () => {
+    if (!salla) return;
+    try {
+      const data = salla.config.all();
+      if (data?.store && typeof data.store === "object") {
+        _setStore((prev) => ({ ...prev, ...data.store }));
+      }
+    } catch {
+    }
+  }, [salla, _setStore]);
+  return { ...store, refresh };
+}
+
+export { Footer, MasterLayout, TwilightProvider, registerDefaultHooks, useBreadcrumbs, useDate, useGtm, useMoney, useNumber, useOpeningHours, usePageConfig, useStore };
+//# sourceMappingURL=chunk-GLM3RPCP.js.map
+//# sourceMappingURL=chunk-GLM3RPCP.js.map