@nok-integration/storefront-react 0.29.1 → 0.29.3

package/dist/standalone/storefront.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,
@@ -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_o6bcy_15";
+const screen = "_screen_o6bcy_20";
+const body$4 = "_body_o6bcy_12";
+const items = "_items_o6bcy_34";
+const sectionHeader = "_sectionHeader_o6bcy_40";
+const sectionTitle = "_sectionTitle_o6bcy_46";
+const count = "_count_o6bcy_67";
+const lines = "_lines_o6bcy_91";
+const footer = "_footer_o6bcy_101";
+const empty = "_empty_o6bcy_105";
+const cta$4 = "_cta_o6bcy_146";
+const ctaError = "_ctaError_o6bcy_154";
 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,
@@ -15046,40 +15066,40 @@ function ActiveLanding({ token, invite }) {
     })
   });
 }
-const showcase = "_showcase_sml7n_14";
-const panel = "_panel_sml7n_40";
-const image = "_image_sml7n_93";
-const desktopArt = "_desktopArt_sml7n_98";
-const hero = "_hero_sml7n_137";
-const heroContent = "_heroContent_sml7n_228";
-const heroText = "_heroText_sml7n_252";
-const logo = "_logo_sml7n_261";
-const heroTitle = "_heroTitle_sml7n_281";
-const heroSub = "_heroSub_sml7n_305";
-const swipe = "_swipe_sml7n_324";
-const swipeLabel = "_swipeLabel_sml7n_331";
-const chevron$1 = "_chevron_sml7n_337";
-const overlay$1 = "_overlay_sml7n_11";
-const copy = "_copy_sml7n_374";
-const title$2 = "_title_sml7n_386";
-const subtitle$1 = "_subtitle_sml7n_395";
-const cta = "_cta_sml7n_403";
-const mosaic = "_mosaic_sml7n_447";
-const info = "_info_sml7n_459";
-const art = "_art_sml7n_463";
-const band = "_band_sml7n_468";
-const bandTitle = "_bandTitle_sml7n_477";
-const products = "_products_sml7n_489";
-const wideOnly = "_wideOnly_sml7n_509";
-const phoneOnly = "_phoneOnly_sml7n_535";
-const phoneArt = "_phoneArt_sml7n_536";
-const desktopFocal = "_desktopFocal_sml7n_545";
-const diptych = "_diptych_sml7n_736";
-const tile = "_tile_sml7n_741";
-const tileCopy = "_tileCopy_sml7n_755";
-const tileText = "_tileText_sml7n_768";
-const tileTitle = "_tileTitle_sml7n_775";
-const tileSubtitle = "_tileSubtitle_sml7n_782";
+const showcase = "_showcase_px8r_14";
+const panel = "_panel_px8r_40";
+const image = "_image_px8r_93";
+const desktopArt = "_desktopArt_px8r_98";
+const hero = "_hero_px8r_137";
+const heroContent = "_heroContent_px8r_228";
+const heroText = "_heroText_px8r_252";
+const logo = "_logo_px8r_261";
+const heroTitle = "_heroTitle_px8r_281";
+const heroSub = "_heroSub_px8r_305";
+const swipe = "_swipe_px8r_324";
+const swipeLabel = "_swipeLabel_px8r_331";
+const chevron$1 = "_chevron_px8r_337";
+const overlay$1 = "_overlay_px8r_11";
+const copy = "_copy_px8r_374";
+const title$2 = "_title_px8r_386";
+const subtitle$1 = "_subtitle_px8r_395";
+const cta = "_cta_px8r_403";
+const mosaic = "_mosaic_px8r_447";
+const info = "_info_px8r_459";
+const art = "_art_px8r_463";
+const band = "_band_px8r_468";
+const bandTitle = "_bandTitle_px8r_477";
+const products = "_products_px8r_489";
+const wideOnly = "_wideOnly_px8r_509";
+const phoneOnly = "_phoneOnly_px8r_535";
+const phoneArt = "_phoneArt_px8r_536";
+const desktopFocal = "_desktopFocal_px8r_545";
+const diptych = "_diptych_px8r_740";
+const tile = "_tile_px8r_745";
+const tileCopy = "_tileCopy_px8r_759";
+const tileText = "_tileText_px8r_772";
+const tileTitle = "_tileTitle_px8r_779";
+const tileSubtitle = "_tileSubtitle_px8r_786";
 const styles$3 = {
   showcase,
   panel,
@@ -15888,19 +15908,19 @@ function ShopBar({ onBack, onMenu, title: title2, showCart, floating: floating2
     })]
   });
 }
-const overlay = "_overlay_sz96n_5";
-const scrim = "_scrim_sz96n_21";
-const sheet = "_sheet_sz96n_31";
-const header = "_header_sz96n_80";
-const close = "_close_sz96n_86";
-const list$1 = "_list_sz96n_105";
-const row = "_row_sz96n_120";
-const icon = "_icon_sz96n_149";
-const text = "_text_sz96n_157";
-const title = "_title_sz96n_165";
-const subtitle = "_subtitle_sz96n_172";
-const chevron = "_chevron_sz96n_178";
-const dropdown = "_dropdown_sz96n_187";
+const overlay = "_overlay_y4mxb_5";
+const scrim = "_scrim_y4mxb_21";
+const sheet = "_sheet_y4mxb_31";
+const header = "_header_y4mxb_80";
+const close = "_close_y4mxb_86";
+const list$1 = "_list_y4mxb_105";
+const row = "_row_y4mxb_120";
+const icon = "_icon_y4mxb_149";
+const text = "_text_y4mxb_157";
+const title = "_title_y4mxb_165";
+const subtitle = "_subtitle_y4mxb_172";
+const chevron = "_chevron_y4mxb_178";
+const dropdown = "_dropdown_y4mxb_187";
 const styles$1 = {
   overlay,
   scrim,
@@ -16008,16 +16028,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
     } : {}
@@ -16054,13 +16130,14 @@ function ShopMenuSheet({ open, onClose, onManageOrders, onHelp, closeLabel, labe
       }), jsx("ul", {
         className: styles$1.list,
         children: rows.map((row2) => jsx("li", {
+          "data-row": row2.key,
           children: jsxs("button", {
             type: "button",
             className: styles$1.row,
             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 +16159,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,