@numueg/theme-sdk 0.10.1 → 0.13.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 export { resolveThemeSettings } from './chunk-XF2FGIVS.mjs';
-export { KNOWN_SETTING_TYPES, KNOWN_TEMPLATES, REQUIRED_TEMPLATES, SDK_VERSION, THEME_CONTRACT_VERSION, mergeResults, validateBuiltManifest, validateManifest, validateSectionSchema, validateSettingsAgainstSchema } from './chunk-QFFTHIFZ.mjs';
+export { KNOWN_SETTING_TYPES, KNOWN_TEMPLATES, REQUIRED_TEMPLATES, SDK_VERSION, THEME_CONTRACT_VERSION, mergeResults, validateBuiltManifest, validateManifest, validateSectionSchema, validateSettingsAgainstSchema } from './chunk-QPXMBK5U.mjs';
 import { ShopContext, ThemeSettingsContext, CurrentTemplateContext, PageContext, LocalizationContext, CurrencyContext, CartContext, CustomerContext, NavigationContext, CollectionContext, ProductContext, useShop, useLocalization, useCustomer, useThemeSettings } from './chunk-ZYZZG4JR.mjs';
 export { CartContext, CollectionContext, CurrencyContext, CustomerContext, LocalizationContext, NavigationContext, PageContext, ProductContext, ShopContext, ThemeSettingsContext, useCollections, useCustomer, useDirection, useFieldTranslation, useLocale, useLocalization, useNumberFormat, usePage, useProducts, useShop, useThemeSettings, useTranslation } from './chunk-ZYZZG4JR.mjs';
 import { createContext, forwardRef, useState, useImperativeHandle, useEffect, useCallback, useMemo, useRef, useContext, useSyncExternalStore, StrictMode, createElement, Component } from 'react';
@@ -24,6 +24,20 @@ function useCollection() {
 function useCollectionOptional() {
   return useContext(CollectionContext);
 }
+function useListingHeading(options = {}) {
+  const collection = useContext(CollectionContext);
+  const clean = (v) => typeof v === "string" && v.trim() !== "" ? v.trim() : "";
+  const collectionName = clean(collection?.name);
+  const collectionDescription = clean(
+    collection?.description
+  );
+  return {
+    collection: collection ?? null,
+    isCollection: collectionName !== "",
+    title: collectionName || clean(options.title) || clean(options.defaultTitle) || "",
+    description: collectionDescription || clean(options.description) || ""
+  };
+}
 function useCart() {
   const ctx = useContext(CartContext);
   if (!ctx) throw new Error("useCart must be used within NuMuProvider");
@@ -32,6 +46,59 @@ function useCart() {
 function useCurrentTemplate() {
   return useContext(CurrentTemplateContext);
 }
+function isMetafield(value) {
+  return typeof value === "object" && value !== null && typeof value.namespace === "string" && typeof value.key === "string";
+}
+function pageMetafields(data) {
+  if (!data) return [];
+  const record = data.page;
+  for (const candidate of [record?.metafields, data.metafields]) {
+    if (Array.isArray(candidate)) return candidate.filter(isMetafield);
+  }
+  return [];
+}
+function useMetafields(owner) {
+  const product = useContext(ProductContext);
+  const collection = useContext(CollectionContext);
+  const page = useContext(PageContext);
+  switch (owner) {
+    case "product":
+      return product?.metafields ?? [];
+    case "collection":
+      return collection?.metafields ?? [];
+    case "page":
+      return pageMetafields(page?.data);
+    default:
+      return [];
+  }
+}
+function useMetafield(owner, namespace, key) {
+  const fields = useMetafields(owner);
+  return fields.find((m) => m.namespace === namespace && m.key === key) ?? null;
+}
+function pageData() {
+  return useContext(PageContext)?.data;
+}
+function useBlogs() {
+  const data = pageData();
+  const blogs = data?.blogs;
+  return Array.isArray(blogs) ? blogs : [];
+}
+function useBlog() {
+  const data = pageData();
+  const blog = data?.blog ?? data?.article?.blog;
+  return blog && typeof blog === "object" ? blog : null;
+}
+function useArticles() {
+  const data = pageData();
+  const articles = data?.articles;
+  return Array.isArray(articles) ? articles : [];
+}
+function useArticle() {
+  const data = pageData();
+  const article = data?.article;
+  return article && typeof article === "object" ? article : null;
+}
 var SectionContext = createContext(null);
 function useSection() {
   const ctx = useContext(SectionContext);
@@ -81,16 +148,16 @@ function useCurrency() {
 
 // src/hooks/useMoney.ts
 function useMoney(currencyOverride) {
-  const { formatMoney } = useLocalization();
+  const { formatMoney: formatMoney2 } = useLocalization();
   const shop = useShop();
   const { selected, base, autoConvert, convert } = useCurrency();
   return (amount) => {
     const shouldConvert = autoConvert && !currencyOverride && !!selected && selected !== base;
     if (shouldConvert) {
       const converted = convert(Math.round(amount * 100), selected) / 100;
-      return formatMoney(converted, selected);
+      return formatMoney2(converted, selected);
     }
-    return formatMoney(amount, currencyOverride || shop?.currency);
+    return formatMoney2(amount, currencyOverride || shop?.currency);
   };
 }
 var DEFAULT_WIDTHS = [320, 480, 640, 768, 1024, 1280, 1600, 1920];
@@ -955,6 +1022,133 @@ function useRelatedProducts(productId, options = {}) {
   });
   return { items: data ?? EMPTY4, loading: isLoading, error: error ?? null };
 }
+function useActivePromotions(page = "/", locale = "ar") {
+  const key = `numu:promotions:${page}:${locale}`;
+  const fetcher = useCallback(
+    async (signal) => {
+      const qs = new URLSearchParams({ page, locale });
+      const res = await fetch(`/api/storefront/promotions?${qs.toString()}`, {
+        credentials: "include",
+        cache: "no-store",
+        signal
+      });
+      if (!res.ok) return null;
+      const json = await res.json();
+      if (!json) return null;
+      return (json.data ?? json) || null;
+    },
+    [page, locale]
+  );
+  const { data } = useCachedResource(
+    key,
+    fetcher,
+    { initialData: null }
+  );
+  return data ?? null;
+}
+
+// src/utils/money.ts
+function resolveLocale(locale) {
+  return locale === "ar" ? "ar-EG" : "en-EG";
+}
+function formatMoney(cents, options = {}) {
+  const { currency, locale, fractionDigits = 0 } = options;
+  const safe = Number.isFinite(cents) ? cents : 0;
+  return new Intl.NumberFormat(resolveLocale(locale), {
+    style: "currency",
+    currency: currency || "EGP",
+    maximumFractionDigits: fractionDigits
+  }).format(safe / 100);
+}
+function formatMoneyMajor(amount, options = {}) {
+  return formatMoney(
+    (Number.isFinite(amount) ? amount : 0) * 100,
+    options
+  );
+}
+function centsToMajor(cents) {
+  return (Number.isFinite(cents) ? cents : 0) / 100;
+}
+function majorToCents(amount) {
+  return Math.round((Number.isFinite(amount) ? amount : 0) * 100);
+}
+
+// src/lib/promotions.ts
+function multibuyOffers(promotions) {
+  if (!promotions) return [];
+  const list = Array.isArray(promotions) ? promotions : promotions.auto_discounts ?? [];
+  const offers = [];
+  for (const promo of list) {
+    const rule = promo?.discount_rule;
+    if (!rule || rule.kind !== "multibuy") continue;
+    const quantity = rule.multibuy_quantity;
+    const groupPriceCents = rule.multibuy_price_cents;
+    if (typeof quantity !== "number" || quantity < 2) continue;
+    if (typeof groupPriceCents !== "number" || groupPriceCents <= 0) continue;
+    const eligibleProductIds = promo.eligible_product_ids ?? [];
+    const eligibleCategoryIds = promo.eligible_category_ids ?? [];
+    offers.push({
+      promotionId: promo.promotion_id,
+      quantity,
+      groupPriceCents,
+      groupPriceMajor: centsToMajor(groupPriceCents),
+      headline: promo.translated_content?.headline,
+      eligibleProductIds,
+      eligibleCategoryIds,
+      // No scoping rows at all ⇒ every product qualifies. Note an older
+      // backend that doesn't send these fields also lands here, which is the
+      // right default: counting everything is what themes did before.
+      isStoreWide: eligibleProductIds.length === 0 && eligibleCategoryIds.length === 0,
+      raw: promo
+    });
+  }
+  return offers;
+}
+function offerIncludesProduct(offer, product) {
+  if (!offer) return false;
+  if (offer.isStoreWide) return true;
+  const id = product?.product_id ?? product?.id;
+  if (id && offer.eligibleProductIds.includes(id)) return true;
+  const category = product?.category_id;
+  return Boolean(category && offer.eligibleCategoryIds.includes(category));
+}
+function eligibleUnitsInCart(offer, cart) {
+  if (!offer) return 0;
+  return (cart?.items ?? []).reduce((sum, item) => {
+    if (!item) return sum;
+    if (!offerIncludesProduct(offer, item)) return sum;
+    return sum + (item.quantity || 0);
+  }, 0);
+}
+function offerProgress(offer, cart, eligibleUnits) {
+  const empty = {
+    unitsInCart: 0,
+    unitsNeeded: 0,
+    groupsUnlocked: 0,
+    savingMajor: 0
+  };
+  if (!offer) return empty;
+  const unitsInCart = typeof eligibleUnits === "number" ? Math.max(0, eligibleUnits) : eligibleUnitsInCart(offer, cart);
+  const groupsUnlocked = Math.floor(unitsInCart / offer.quantity);
+  const remainder = unitsInCart % offer.quantity;
+  const unitsNeeded = remainder === 0 ? 0 : offer.quantity - remainder;
+  const applied = (cart?.applied_promotions ?? []).find(
+    (p) => p && p.id === offer.promotionId
+  );
+  return {
+    unitsInCart,
+    unitsNeeded,
+    groupsUnlocked,
+    savingMajor: applied ? applied.amount || 0 : 0
+  };
+}
+function offerBeatsRegularPrice(offer, unitPriceMajor) {
+  if (!offer || typeof unitPriceMajor !== "number" || unitPriceMajor <= 0) {
+    return false;
+  }
+  const unitCents = Math.round(unitPriceMajor * 100);
+  return unitCents * offer.quantity > offer.groupPriceCents;
+}
 function useProductSizeChart(productOverride) {
   const ctxProduct = useProductOptional();
   const product = productOverride ?? ctxProduct;
@@ -1428,11 +1622,27 @@ var EMPTY_CART = {
 };
 function normalizeCartFromServer(cart) {
   const toMajor = (n) => typeof n === "number" ? n / 100 : 0;
+  const { automatic_discount_cents: wireAutomaticCents, ...rest } = cart;
   return {
-    ...cart,
+    ...rest,
     subtotal: toMajor(cart.subtotal),
     total: toMajor(cart.total),
     ...cart.discount_amount != null ? { discount_amount: toMajor(cart.discount_amount) } : {},
+    // Offers-v2 automatic promotions. These MUST be converted here too —
+    // they arrive in cents next to already-major totals, so forwarding them
+    // raw makes every theme render a saving 100x too large. This function is
+    // the one and only cents→major boundary for the cart.
+    //
+    // The backend field is `automatic_discount_cents`; themes get
+    // `automatic_discount` (major), because a `_cents` name holding pounds
+    // invites exactly the double-divide this conversion exists to prevent.
+    ...wireAutomaticCents != null ? { automatic_discount: toMajor(wireAutomaticCents) } : {},
+    ...Array.isArray(cart.applied_promotions) ? {
+      applied_promotions: cart.applied_promotions.map((p) => ({
+        ...p,
+        amount: toMajor(p.amount)
+      }))
+    } : {},
     items: Array.isArray(cart.items) ? cart.items.map((it) => {
       const raw = it;
       return {
@@ -2254,13 +2464,13 @@ function pickDemo(ctx, themeSettings) {
   const t = themeSettings.templates;
   return !t || Object.keys(t).length === 0;
 }
-function wrapEntityProviders(app, pageData) {
+function wrapEntityProviders(app, pageData2) {
   let inner = app;
-  if (pageData.collection) {
-    inner = /* @__PURE__ */ jsx(CollectionProvider, { collection: pageData.collection, children: inner });
+  if (pageData2.collection) {
+    inner = /* @__PURE__ */ jsx(CollectionProvider, { collection: pageData2.collection, children: inner });
   }
-  if (pageData.product) {
-    inner = /* @__PURE__ */ jsx(ProductProvider, { product: pageData.product, children: inner });
+  if (pageData2.product) {
+    inner = /* @__PURE__ */ jsx(ProductProvider, { product: pageData2.product, children: inner });
   }
   return inner;
 }
@@ -2283,7 +2493,7 @@ var ThemeMountBridge = forwardRef(function ThemeMountBridge2({ ctx, mountEl, ren
   const store = pickStore(ctx);
   const template = pickTemplate(ctx);
   const demo = pickDemo(ctx, themeSettings);
-  const pageData = ctx.page?.data ?? {};
+  const pageData2 = ctx.page?.data ?? {};
   const app = renderApp({
     currentTemplate: template,
     demo,
@@ -2301,11 +2511,11 @@ var ThemeMountBridge = forwardRef(function ThemeMountBridge2({ ctx, mountEl, ren
       locale: ctx.locale,
       translations: ctx.translations,
       navigation: ctx.navigation,
-      initialProducts: pageData.products,
-      initialCollections: pageData.collections,
+      initialProducts: pageData2.products,
+      initialCollections: pageData2.collections,
       currentTemplate: template,
       pageTemplate: ctx.page?.template,
-      children: wrapEntityProviders(app, pageData)
+      children: wrapEntityProviders(app, pageData2)
     }
   );
 });
@@ -2348,7 +2558,7 @@ function Money({
   className,
   as = "span"
 }) {
-  const { formatMoney } = useLocalization();
+  const { formatMoney: formatMoney2 } = useLocalization();
   const shop = useShop();
   const { selected, base, autoConvert, convert } = useCurrency();
   const shouldConvert = autoConvert && !currency && !!selected && selected !== base;
@@ -2356,12 +2566,12 @@ function Money({
   const toDisplay = (major) => shouldConvert ? convert(Math.round(major * 100), selected) / 100 : major;
   const showCompare = compareAt != null && compareAt > amount;
   const children = [
-    /* @__PURE__ */ jsx("span", { children: formatMoney(toDisplay(amount), ccy) }, "amt")
+    /* @__PURE__ */ jsx("span", { children: formatMoney2(toDisplay(amount), ccy) }, "amt")
   ];
   if (showCompare) {
     children.push(" ");
     children.push(
-      /* @__PURE__ */ jsx("s", { style: { opacity: 0.6 }, children: formatMoney(toDisplay(compareAt), ccy) }, "cmp")
+      /* @__PURE__ */ jsx("s", { style: { opacity: 0.6 }, children: formatMoney2(toDisplay(compareAt), ccy) }, "cmp")
     );
   }
   return createElement(
@@ -2381,7 +2591,7 @@ function asImageTransform(v) {
   return void 0;
 }
 function applyImageTransform(t, fit = "cover") {
-  if (!t) return { objectFit: fit };
+  if (!t) return {};
   const fx = Math.round(_clampT(t.focal?.x ?? 0.5, 0, 1) * 1e4) / 100;
   const fy = Math.round(_clampT(t.focal?.y ?? 0.5, 0, 1) * 1e4) / 100;
   const zoom = _clampT(t.zoom ?? 1, 1, 4);
@@ -2584,7 +2794,10 @@ function HeroMedia({
   const activeBase = useMobile ? MOBILE_BASE_WIDTH : DESKTOP_BASE_WIDTH;
   const activeSrc = rawFallback ? activeUrl : focalSrc(activeUrl, { width: activeBase, ...activeCrop });
   const activeSrcSet = rawFallback ? void 0 : heroSrcSet(activeUrl, activeCrop);
-  const fitStyle = applyImageTransform(useMobile ? mobileTransform ?? transform : transform, fit);
+  const fitStyle = {
+    objectFit: fit,
+    ...applyImageTransform(useMobile ? mobileTransform ?? transform : transform, fit)
+  };
   return /* @__PURE__ */ jsx(
     "img",
     {
@@ -2925,6 +3138,20 @@ function Form({
     }
   );
 }
+
+// src/utils/routes.ts
+function productHref(slugOrId) {
+  if (!slugOrId) return "/products";
+  return `/products/${slugOrId}`;
+}
+function collectionHref(category) {
+  if (!category) return "/collections";
+  if (typeof category === "string") {
+    return category ? `/collections/${category}` : "/collections";
+  }
+  const key = category.slug || category.id;
+  return key ? `/collections/${key}` : "/collections";
+}
 function joinClass(...names) {
   return names.filter(Boolean).join(" ");
 }
@@ -2935,7 +3162,7 @@ function ProductCard({
   slots,
   imageSizes
 }) {
-  const target = href ?? `/products/${product.slug}`;
+  const target = href ?? productHref(product.slug);
   const firstImage = product.images?.[0];
   const inStock = product.in_stock;
   const badge = slots?.badge !== void 0 ? slots.badge : inStock ? null : /* @__PURE__ */ jsx("span", { className: "numu-product-card__badge", children: "Sold out" });
@@ -3548,7 +3775,19 @@ function resolveSourcePath(path, ctx) {
       return null;
   }
 }
+function resolveMetafield(metafields, field) {
+  const address = field.slice("metafield:".length);
+  const dot = address.indexOf(".");
+  if (dot === -1) return null;
+  const namespace = address.slice(0, dot);
+  const key = address.slice(dot + 1);
+  const hit = (metafields ?? []).find(
+    (m) => m.namespace === namespace && m.key === key
+  );
+  return hit ? hit.value ?? null : null;
+}
 function resolveProductField(p, field) {
+  if (field.startsWith("metafield:")) return resolveMetafield(p.metafields, field);
   switch (field) {
     case "title":
     case "name":
@@ -3571,6 +3810,7 @@ function resolveProductField(p, field) {
   }
 }
 function resolveCollectionField(c, field) {
+  if (field.startsWith("metafield:")) return resolveMetafield(c.metafields, field);
   switch (field) {
     case "title":
     case "name":
@@ -3753,6 +3993,50 @@ function assetUrl(name) {
   return `${cleanBase}${filename}`;
 }
 
+// src/utils/templates.ts
+function resolveSections(group) {
+  if (!group) return [];
+  if (Array.isArray(group.sections)) {
+    return group.sections.map((instance, idx) => ({
+      id: `${instance.type}-${idx}`,
+      instance
+    }));
+  }
+  const map = group.sections ?? {};
+  const order = group.order ?? Object.keys(map);
+  const out = [];
+  for (const id of order) {
+    const instance = map[id];
+    if (instance) out.push({ id, instance });
+  }
+  return out;
+}
+function selectTemplateSections(hostTemplate, builtinTemplate, isKnown) {
+  const hostSections = resolveSections(hostTemplate);
+  if (hostSections.length === 0) {
+    return resolveSections(builtinTemplate);
+  }
+  const anyKnown = hostSections.some(({ instance }) => isKnown(instance.type));
+  if (!anyKnown) return resolveSections(builtinTemplate);
+  return hostSections.filter(({ instance }) => isKnown(instance.type));
+}
+function selectChromeSections(options) {
+  const { hostGroup, presetGroup, inline, templates, isChrome, isKnown } = options;
+  const known = (list) => list.filter(({ instance }) => isKnown(instance.type));
+  const fromHost = known(resolveSections(hostGroup));
+  if (fromHost.length > 0) return fromHost;
+  if (inline && inline.length > 0) return known(inline);
+  const fromPreset = known(resolveSections(presetGroup));
+  if (fromPreset.length > 0) return fromPreset;
+  for (const template of templates ?? []) {
+    const borrowed = known(resolveSections(template)).filter(
+      ({ instance }) => isChrome(instance.type)
+    );
+    if (borrowed.length > 0) return borrowed;
+  }
+  return [];
+}
+
 // src/utils/locales.ts
 function flattenMessages(source, prefix = "") {
   const out = {};
@@ -3797,6 +4081,6 @@ function buildLocaleBundle(modules) {
   return bundle;
 }
 
-export { AddToCartButton, Block, CollectionCard, CollectionProvider, CurrencySwitcher, EditableImage, EditableText, Form, HeroMedia, ICON_NAMES, Icon, IconMap, Image, LOGO_SHAPE_OPTIONS, LOGO_SIZE_OPTIONS, Link, LocaleSwitcher, Logo, MAX_BLOCK_DEPTH, Money, NAVIGATE_EVENT, NuMuProvider, ProductCard, ProductProvider, RichText, Section, SectionContext, applyGlobalStyleTokens, applyImageTransform, asImageTransform, assetUrl, availableValues, buildLocaleBundle, buildThemeElement, clearSdkSingleton, collectBlocks, collectSections, computeGlobalStyleTokens, defaultVariant, defineBlock, defineSection, defineThemeEntry, dynamicSource, findVariantByOptions, flattenMessages, focalSrc, getReactSingleton, getSdkSingleton, isDefinedBlock, isDefinedSection, isDynamicSource, isSdkAvailable, logoImgStyle, logoStyleTokens, mountTheme, pickTranslations, publishVariantSelection, readVariantSelection, registerReactSingleton, registerSdkSingleton, requestNavigate, resolveDynamicValue, resolveFontStack, resolveSettingsMap, resolveSizeChart, resolveSourcePath, sanitizeHtml, useAnalytics, useApp, useCachedResource, useCart, useCheckout, useCollection, useCollectionOptional, useCurrency, useCurrentTemplate, useCustomerActions, useCustomerAddresses, useGiftCardBalance, useImage, useMoney, useNavigation, useOrder, useOrders, useProduct, useProductOptional, useProductSizeChart, useRelatedProducts, useReorder, useResolvedSettings, useSearch, useSection, useSectionGroup, useSectionOptional, useShippingRates, useVariantSelection, useWishlist };
+export { AddToCartButton, Block, CollectionCard, CollectionProvider, CurrencySwitcher, EditableImage, EditableText, Form, HeroMedia, ICON_NAMES, Icon, IconMap, Image, LOGO_SHAPE_OPTIONS, LOGO_SIZE_OPTIONS, Link, LocaleSwitcher, Logo, MAX_BLOCK_DEPTH, Money, NAVIGATE_EVENT, NuMuProvider, ProductCard, ProductProvider, RichText, Section, SectionContext, applyGlobalStyleTokens, applyImageTransform, asImageTransform, assetUrl, availableValues, buildLocaleBundle, buildThemeElement, centsToMajor, clearSdkSingleton, collectBlocks, collectSections, collectionHref, computeGlobalStyleTokens, defaultVariant, defineBlock, defineSection, defineThemeEntry, dynamicSource, eligibleUnitsInCart, findVariantByOptions, flattenMessages, focalSrc, formatMoney, formatMoneyMajor, getReactSingleton, getSdkSingleton, isDefinedBlock, isDefinedSection, isDynamicSource, isSdkAvailable, logoImgStyle, logoStyleTokens, majorToCents, mountTheme, multibuyOffers, offerBeatsRegularPrice, offerIncludesProduct, offerProgress, pickTranslations, productHref, publishVariantSelection, readVariantSelection, registerReactSingleton, registerSdkSingleton, requestNavigate, resolveDynamicValue, resolveFontStack, resolveSections, resolveSettingsMap, resolveSizeChart, resolveSourcePath, sanitizeHtml, selectChromeSections, selectTemplateSections, useActivePromotions, useAnalytics, useApp, useArticle, useArticles, useBlog, useBlogs, useCachedResource, useCart, useCheckout, useCollection, useCollectionOptional, useCurrency, useCurrentTemplate, useCustomerActions, useCustomerAddresses, useGiftCardBalance, useImage, useListingHeading, useMetafield, useMetafields, useMoney, useNavigation, useOrder, useOrders, useProduct, useProductOptional, useProductSizeChart, useRelatedProducts, useReorder, useResolvedSettings, useSearch, useSection, useSectionGroup, useSectionOptional, useShippingRates, useVariantSelection, useWishlist };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map