@nok-integration/storefront-react 0.29.0 → 0.29.2

package/dist/index.mjs

@@ -6559,7 +6559,17 @@ const ES = {
   "Return reported": "Devolución notificada",
   "Return received": "Devolución recibida",
   "Return completed": "Devolución completada",
-  "Your session has timed out. Please try again.": "Tu sesión ha caducado. Inténtalo de nuevo."
+  "Your session has timed out. Please try again.": "Tu sesión ha caducado. Inténtalo de nuevo.",
+  Black: "Negro",
+  White: "Blanco",
+  Grey: "Gris",
+  Gray: "Gris",
+  Navy: "Azul marino",
+  Blue: "Azul",
+  Red: "Rojo",
+  Green: "Verde",
+  Cream: "Crema",
+  Beige: "Beis"
 };
 const CATALOGUES = {
   es: ES
@@ -7337,6 +7347,11 @@ function distinctValues(variants, key) {
   }
   return out;
 }
+const COLOUR_NAMES = ["Black", "White", "Grey", "Gray", "Navy", "Blue", "Red", "Green", "Cream", "Beige"];
+function colourLabel(t, value2) {
+  const name2 = COLOUR_NAMES.find((n) => n.toLowerCase() === value2.trim().toLowerCase());
+  return name2 ? t(name2) : value2;
+}
 function sizeOptions(variants, colour) {
   const key = colourKeyOf(variants);
   return distinctValues(variants, "size").map((value2) => ({
@@ -9569,7 +9584,7 @@ function OrderReturnBadge({ status }) {
   });
 }
 const page$1 = "_page_cm0rd_2";
-const empty = "_empty_cm0rd_22";
+const empty$1 = "_empty_cm0rd_22";
 const cta$5 = "_cta_cm0rd_32";
 const card$1 = "_card_cm0rd_55";
 const tappable = "_tappable_cm0rd_70";
@@ -9609,7 +9624,7 @@ const wideEmptyTitle = "_wideEmptyTitle_cm0rd_365";
 const wideEmptyBody = "_wideEmptyBody_cm0rd_373";
 const styles$A = {
   page: page$1,
-  empty,
+  empty: empty$1,
   cta: cta$5,
   card: card$1,
   tappable,
@@ -10510,13 +10525,13 @@ function ProductGrid({ category, initialProducts, initialCursor, filters = [] })
     })]
   });
 }
-const rail$1 = "_rail_15pjn_7";
-const header$5 = "_header_15pjn_14";
-const title$e = "_title_15pjn_21";
-const seeAll = "_seeAll_15pjn_27";
-const track$3 = "_track_15pjn_33";
-const item$2 = "_item_15pjn_67";
-const inset = "_inset_15pjn_79";
+const rail$1 = "_rail_st5m2_7";
+const header$5 = "_header_st5m2_14";
+const title$e = "_title_st5m2_21";
+const seeAll = "_seeAll_st5m2_27";
+const track$3 = "_track_st5m2_33";
+const item$2 = "_item_st5m2_67";
+const inset = "_inset_st5m2_79";
 const styles$u = {
   rail: rail$1,
   header: header$5,
@@ -10937,11 +10952,11 @@ function CartLineItem({ item: item2, title: title2, image: image2, compareAt: co
     })]
   });
 }
-const box$1 = "_box_w9fja_1";
-const row$4 = "_row_w9fja_10";
-const icon$2 = "_icon_w9fja_16";
-const label$1 = "_label_w9fja_22";
-const divider$1 = "_divider_w9fja_29";
+const box$1 = "_box_tuawd_1";
+const row$4 = "_row_tuawd_10";
+const icon$2 = "_icon_tuawd_16";
+const label$1 = "_label_tuawd_22";
+const divider$1 = "_divider_tuawd_29";
 const styles$q = {
   box: box$1,
   row: row$4,
@@ -11018,17 +11033,18 @@ function StickyCtaBar({ children, info: info2, variant = "floating", className }
     })]
   });
 }
-const surface = "_surface_qvckt_15";
-const screen = "_screen_qvckt_20";
-const body$4 = "_body_qvckt_12";
-const items = "_items_qvckt_34";
-const sectionHeader = "_sectionHeader_qvckt_40";
-const sectionTitle = "_sectionTitle_qvckt_46";
-const count = "_count_qvckt_67";
-const lines = "_lines_qvckt_91";
-const footer = "_footer_qvckt_101";
-const cta$4 = "_cta_qvckt_127";
-const ctaError = "_ctaError_qvckt_135";
+const surface = "_surface_ws4so_15";
+const screen = "_screen_ws4so_20";
+const body$4 = "_body_ws4so_12";
+const items = "_items_ws4so_34";
+const sectionHeader = "_sectionHeader_ws4so_40";
+const sectionTitle = "_sectionTitle_ws4so_46";
+const count = "_count_ws4so_67";
+const lines = "_lines_ws4so_91";
+const footer = "_footer_ws4so_101";
+const empty = "_empty_ws4so_105";
+const cta$4 = "_cta_ws4so_145";
+const ctaError = "_ctaError_ws4so_153";
 const styles$o = {
   surface,
   screen,
@@ -11039,6 +11055,7 @@ const styles$o = {
   count,
   lines,
   footer,
+  empty,
   cta: cta$4,
   ctaError
 };
@@ -11185,18 +11202,21 @@ function CartViewContent({ onContinueShopping, checkoutLabel } = {}) {
     });
   }
   if (state === "empty" || !cart2) {
-    return jsx(EmptyState, {
-      title: t("Nothing here yet"),
-      body: t("Your items will show up here once you've added to your cart."),
-      action: onContinueShopping ? jsx(Button, {
-        variant: "primary",
-        onClick: onContinueShopping,
-        children: t("Continue shopping")
-      }) : jsx(ShopLink, {
-        to: "/",
-        children: jsx(Button, {
+    return jsx("div", {
+      className: styles$o.empty,
+      children: jsx(EmptyState, {
+        title: t("Nothing here yet"),
+        body: t("Your items will show up here once you've added to your cart."),
+        action: onContinueShopping ? jsx(Button, {
           variant: "primary",
+          onClick: onContinueShopping,
           children: t("Continue shopping")
+        }) : jsx(ShopLink, {
+          to: "/",
+          children: jsx(Button, {
+            variant: "primary",
+            children: t("Continue shopping")
+          })
         })
       })
     });
@@ -11502,31 +11522,31 @@ function DesktopGallery({ media: media2, alt, badges: badges2, focus }) {
     })]
   });
 }
-const scrim$3 = "_scrim_n0uqj_8";
-const sheet$1 = "_sheet_n0uqj_2";
-const body$3 = "_body_n0uqj_40";
-const titles = "_titles_n0uqj_67";
-const title$b = "_title_n0uqj_67";
-const subtitle$4 = "_subtitle_n0uqj_83";
-const units = "_units_n0uqj_96";
-const unit = "_unit_n0uqj_96";
-const unitOn = "_unitOn_n0uqj_130";
-const unitOff = "_unitOff_n0uqj_138";
-const tableWrap = "_tableWrap_n0uqj_147";
-const table = "_table_n0uqj_147";
-const col = "_col_n0uqj_179";
-const colEdge = "_colEdge_n0uqj_183";
-const note = "_note_n0uqj_251";
-const how = "_how_n0uqj_263";
-const howTitle = "_howTitle_n0uqj_269";
-const howList = "_howList_n0uqj_277";
-const howItem = "_howItem_n0uqj_284";
-const howLabel = "_howLabel_n0uqj_309";
-const howText = "_howText_n0uqj_319";
-const fabric = "_fabric_n0uqj_328";
-const fabricLabel = "_fabricLabel_n0uqj_336";
-const fabricText = "_fabricText_n0uqj_344";
-const notes = "_notes_n0uqj_355";
+const scrim$3 = "_scrim_mvuuv_8";
+const sheet$1 = "_sheet_mvuuv_2";
+const body$3 = "_body_mvuuv_40";
+const titles = "_titles_mvuuv_67";
+const title$b = "_title_mvuuv_67";
+const subtitle$4 = "_subtitle_mvuuv_83";
+const units = "_units_mvuuv_96";
+const unit = "_unit_mvuuv_96";
+const unitOn = "_unitOn_mvuuv_130";
+const unitOff = "_unitOff_mvuuv_138";
+const tableWrap = "_tableWrap_mvuuv_147";
+const table = "_table_mvuuv_147";
+const col = "_col_mvuuv_179";
+const colEdge = "_colEdge_mvuuv_183";
+const note = "_note_mvuuv_251";
+const how = "_how_mvuuv_263";
+const howTitle = "_howTitle_mvuuv_269";
+const howList = "_howList_mvuuv_277";
+const howItem = "_howItem_mvuuv_284";
+const howLabel = "_howLabel_mvuuv_309";
+const howText = "_howText_mvuuv_319";
+const fabric = "_fabric_mvuuv_328";
+const fabricLabel = "_fabricLabel_mvuuv_336";
+const fabricText = "_fabricText_mvuuv_344";
+const notes = "_notes_mvuuv_355";
 const styles$k = {
   scrim: scrim$3,
   sheet: sheet$1,
@@ -11791,18 +11811,18 @@ function SizeSelector({ sizes: sizes2, selected: selected2, onSelect, error: err
     })]
   });
 }
-const root$2 = "_root_1h4ny_1";
-const header$2 = "_header_1h4ny_9";
-const title$9 = "_title_1h4ny_18";
-const value = "_value_1h4ny_23";
-const tiles$1 = "_tiles_1h4ny_28";
-const tile$2 = "_tile_1h4ny_28";
-const selected$1 = "_selected_1h4ny_52";
-const media$2 = "_media_1h4ny_36";
-const image$5 = "_image_1h4ny_64";
-const placeholder = "_placeholder_1h4ny_68";
-const scrim$2 = "_scrim_1h4ny_76";
-const stockBadge = "_stockBadge_1h4ny_95";
+const root$2 = "_root_1jst2_1";
+const header$2 = "_header_1jst2_9";
+const title$9 = "_title_1jst2_18";
+const value = "_value_1jst2_23";
+const tiles$1 = "_tiles_1jst2_28";
+const tile$2 = "_tile_1jst2_28";
+const selected$1 = "_selected_1jst2_52";
+const media$2 = "_media_1jst2_36";
+const image$5 = "_image_1jst2_64";
+const placeholder = "_placeholder_1jst2_68";
+const scrim$2 = "_scrim_1jst2_76";
+const stockBadge = "_stockBadge_1jst2_95";
 const styles$i = {
   root: root$2,
   header: header$2,
@@ -11830,7 +11850,7 @@ function ColorSelector({ colours, selected: selected2, onSelect }) {
         children: "Color:"
       }), " ", jsx("span", {
         className: styles$i.value,
-        children: selected2 ?? "Select"
+        children: selected2 === null ? t("Select") : colourLabel(t, selected2)
       })]
     }), jsx("div", {
       className: styles$i.tiles,
@@ -11845,7 +11865,7 @@ function ColorSelector({ colours, selected: selected2, onSelect }) {
           type: "button",
           role: "radio",
           "aria-checked": isSelected,
-          "aria-label": `${c.value}${soldOut ? " (out of stock)" : ""}`,
+          "aria-label": `${colourLabel(t, c.value)}${soldOut ? ` ${t("(out of stock)")}` : ""}`,
           className: [styles$i.tile, isSelected ? styles$i.selected : ""].filter(Boolean).join(" "),
           onClick: () => onSelect(c.value),
           children: [jsxs("span", {
@@ -12455,14 +12475,14 @@ function ProductDetail({ product, inventory: inventory2, recommendations = [], c
     })]
   });
 }
-const hero$3 = "_hero_1747w_10";
-const image$4 = "_image_1747w_42";
-const scrim$1 = "_scrim_1747w_70";
-const fade = "_fade_1747w_94";
-const text$3 = "_text_1747w_108";
-const title$6 = "_title_1747w_157";
-const subtitle$3 = "_subtitle_1747w_168";
-const noImage = "_noImage_1747w_183";
+const hero$3 = "_hero_ht1e0_10";
+const image$4 = "_image_ht1e0_42";
+const scrim$1 = "_scrim_ht1e0_70";
+const fade = "_fade_ht1e0_94";
+const text$3 = "_text_ht1e0_108";
+const title$6 = "_title_ht1e0_157";
+const subtitle$3 = "_subtitle_ht1e0_168";
+const noImage = "_noImage_ht1e0_183";
 const styles$d = {
   hero: hero$3,
   image: image$4,
@@ -12526,16 +12546,16 @@ function LifestyleText({ text: text2, align = "center" }) {
     children: text2
   });
 }
-const wrap = "_wrap_15g6o_10";
-const box = "_box_15g6o_14";
-const track$1 = "_track_15g6o_23";
-const slide = "_slide_15g6o_39";
-const image$3 = "_image_15g6o_46";
-const desktopArt$1 = "_desktopArt_15g6o_50";
-const dots$1 = "_dots_15g6o_55";
-const dot$1 = "_dot_15g6o_55";
-const dotActive$1 = "_dotActive_15g6o_80";
-const phoneArt$1 = "_phoneArt_15g6o_85";
+const wrap = "_wrap_1p70i_10";
+const box = "_box_1p70i_14";
+const track$1 = "_track_1p70i_23";
+const slide = "_slide_1p70i_39";
+const image$3 = "_image_1p70i_46";
+const desktopArt$1 = "_desktopArt_1p70i_50";
+const dots$1 = "_dots_1p70i_55";
+const dot$1 = "_dot_1p70i_55";
+const dotActive$1 = "_dotActive_1p70i_80";
+const phoneArt$1 = "_phoneArt_1p70i_85";
 const styles$b = {
   wrap,
   box,
@@ -15126,6 +15146,12 @@ function useDocumentSnap(ref, enabled = true) {
     const previousType = root2.style.scrollSnapType;
     const previousPadding = root2.style.scrollPaddingTop;
     root2.style.scrollPaddingTop = "0px";
+    const desktop = typeof window.matchMedia === "function" ? window.matchMedia("(min-width: 1200px)") : null;
+    const pad = () => {
+      root2.style.scrollPaddingTop = desktop?.matches ? "calc(var(--shop-chrome-top, 0px) + var(--shop-nav-height, 64px))" : "0px";
+    };
+    pad();
+    desktop?.addEventListener?.("change", pad);
     let snapping = false;
     let awaitingTouch = false;
     const layoutOf = () => {
@@ -15239,6 +15265,7 @@ function useDocumentSnap(ref, enabled = true) {
       passive: true
     });
     return () => {
+      desktop?.removeEventListener?.("change", pad);
       document.removeEventListener("scroll", note2, {
         capture: true
       });
@@ -15888,19 +15915,19 @@ function ShopBar({ onBack, onMenu, title: title2, showCart, floating: floating2
     })]
   });
 }
-const overlay = "_overlay_1vpmg_5";
-const scrim = "_scrim_1vpmg_21";
-const sheet = "_sheet_1vpmg_31";
-const header = "_header_1vpmg_80";
-const close = "_close_1vpmg_86";
-const list$1 = "_list_1vpmg_105";
-const row = "_row_1vpmg_120";
-const icon = "_icon_1vpmg_149";
-const text = "_text_1vpmg_157";
-const title = "_title_1vpmg_165";
-const subtitle = "_subtitle_1vpmg_172";
-const chevron = "_chevron_1vpmg_178";
-const dropdown = "_dropdown_1vpmg_187";
+const overlay = "_overlay_1aeep_5";
+const scrim = "_scrim_1aeep_21";
+const sheet = "_sheet_1aeep_31";
+const header = "_header_1aeep_80";
+const close = "_close_1aeep_86";
+const list$1 = "_list_1aeep_105";
+const row = "_row_1aeep_120";
+const icon = "_icon_1aeep_149";
+const text = "_text_1aeep_157";
+const title = "_title_1aeep_165";
+const subtitle = "_subtitle_1aeep_172";
+const chevron = "_chevron_1aeep_178";
+const dropdown = "_dropdown_1aeep_187";
 const styles$1 = {
   overlay,
   scrim,
@@ -16008,16 +16035,72 @@ function CloseIcon() {
     })
   });
 }
+const FALLBACK_CATEGORIES = [{
+  code: "hoodies",
+  title: "Hoodies"
+}, {
+  code: "zip-ups",
+  title: "Zip Ups"
+}, {
+  code: "t-shirts",
+  title: "T-Shirts"
+}];
+function useMenuCategories(enabled) {
+  const shop2 = useShopOptional();
+  const [fetched, setFetched] = useState(null);
+  useEffect(() => {
+    const api = shop2?.api;
+    if (!enabled || !api) return;
+    let live = true;
+    void api.content.home().then((home2) => {
+      const seen = /* @__PURE__ */ new Set();
+      const list2 = [];
+      for (const slide2 of home2.slides) {
+        if (!slide2.target || seen.has(slide2.target)) continue;
+        seen.add(slide2.target);
+        list2.push({
+          code: slide2.target,
+          title: slide2.title
+        });
+      }
+      if (live && list2.length > 0) setFetched(list2);
+    }).catch(() => {
+    });
+    return () => {
+      live = false;
+    };
+  }, [shop2, enabled]);
+  return fetched;
+}
 function ShopMenuSheet({ open, onClose, onManageOrders, onHelp, closeLabel, label: label2, placement = "sheet" }) {
   const sheetRef = useRef(null);
   const t = useT();
   useModalDialog(open, onClose, sheetRef);
+  const navigate = useNavigate();
+  const desktop = useDesktopLayout() && placement === "dropdown";
+  const fetchedCategories = useMenuCategories(open && desktop);
   if (!open) return null;
-  const rows = [{
+  const categoryRows = desktop ? (fetchedCategories ?? FALLBACK_CATEGORIES.map((c) => ({
+    code: c.code,
+    title: t(c.title)
+  }))).map((c) => ({
+    key: `category-${c.code}`,
+    icon: null,
+    title: c.title,
+    ...navigate ? {
+      onSelect: () => {
+        onClose();
+        navigate(`/category/${c.code}`);
+      }
+    } : {}
+  })) : [];
+  const rows = [...categoryRows, {
     key: "orders",
     icon: jsx(OrderIcon, {}),
     title: t("Manage orders"),
-    subtitle: t("View your order history and track shipments"),
+    ...desktop ? {} : {
+      subtitle: t("View your order history and track shipments")
+    },
     ...onManageOrders ? {
       onSelect: onManageOrders
     } : {}
@@ -16060,7 +16143,7 @@ function ShopMenuSheet({ open, onClose, onManageOrders, onHelp, closeLabel, labe
             onClick: row2.onSelect,
             disabled: !row2.onSelect,
             "aria-disabled": row2.onSelect ? void 0 : true,
-            children: [jsx("span", {
+            children: [row2.icon && jsx("span", {
               className: styles$1.icon,
               children: row2.icon
             }), jsxs("span", {
@@ -16082,19 +16165,19 @@ function ShopMenuSheet({ open, onClose, onManageOrders, onHelp, closeLabel, labe
     })]
   });
 }
-const bar = "_bar_z6nk8_1";
-const media = "_media_z6nk8_22";
-const light = "_light_z6nk8_30";
-const crumbs = "_crumbs_z6nk8_41";
-const list = "_list_z6nk8_46";
-const item = "_item_z6nk8_56";
-const root = "_root_z6nk8_63";
-const trail = "_trail_z6nk8_64";
-const current = "_current_z6nk8_65";
-const separator = "_separator_z6nk8_85";
-const actions = "_actions_z6nk8_90";
-const iconBtn = "_iconBtn_z6nk8_97";
-const badge = "_badge_z6nk8_126";
+const bar = "_bar_10bv8_1";
+const media = "_media_10bv8_22";
+const light = "_light_10bv8_30";
+const crumbs = "_crumbs_10bv8_41";
+const list = "_list_10bv8_46";
+const item = "_item_10bv8_56";
+const root = "_root_10bv8_63";
+const trail = "_trail_10bv8_64";
+const current = "_current_10bv8_65";
+const separator = "_separator_10bv8_85";
+const actions = "_actions_10bv8_90";
+const iconBtn = "_iconBtn_10bv8_97";
+const badge = "_badge_10bv8_126";
 const styles = {
   bar,
   media,