@nok-integration/storefront-react 0.26.0 → 0.28.0

package/dist/index.d.ts

@@ -2768,6 +2768,7 @@ declare function createClient(options: ClientOptions): {
                 desktop_image?: string | undefined;
                 target?: string | undefined;
                 video?: string | undefined;
+                desktop_video?: string | undefined;
                 focal_y?: number | undefined;
             }[];
         }>;

package/dist/index.mjs

@@ -4398,6 +4398,7 @@ function requireContent$1() {
       image: zod_1.z.string().min(1).optional(),
       video: zod_1.z.string().min(1).optional(),
       desktop_image: zod_1.z.string().min(1).optional(),
+      desktop_video: zod_1.z.string().min(1).optional(),
       focal_y: zod_1.z.number().int().min(0).max(100).optional()
     });
     exports.HomeContent = zod_1.z.object({
@@ -6529,13 +6530,18 @@ const ES = {
   Shop: "Tienda",
   "Scroll down for more": "Desplázate hacia abajo para ver más",
   "Limited edition": "Edición limitada",
+  "Ringer Tee": "Camiseta ringer",
+  "White ringer tee with DAZN chest logo": "Camiseta ringer blanca con el logo de DAZN en el pecho",
+  "Boxing Hoodie": "Sudadera de boxeo",
+  "The Home of Boxing back print": "Estampado The Home of Boxing en la espalda",
   Previous: "Anterior",
   Next: "Siguiente",
   "Claim yours": "Consigue el tuyo",
   "Sold out": "Agotado",
-  "This invitation can no longer be used.": "Esta invitación ya no se puede usar.",
   "This invite is no longer valid": "Esta invitación ya no es válida",
   "It may have expired or already been used. Keep an eye on your inbox for the next drop.": "Puede que haya caducado o que ya se haya usado. Estate atento a tu bandeja de entrada para el próximo lanzamiento.",
+  "This invite isn't open yet": "Esta invitación aún no está abierta",
+  "This invite opens on {0}. Come back then to claim your item.": "Esta invitación se abrirá el {0}. Vuelve entonces para conseguir tu artículo.",
   "Explore DAZN": "Explorar DAZN",
   "Your basket has other items": "Tu cesta tiene otros artículos",
   "Empty your basket to claim this item.": "Vacía tu cesta para conseguir este artículo.",
@@ -9570,7 +9576,7 @@ const date = "_date_cm0rd_115";
 const bottom$1 = "_bottom_cm0rd_120";
 const strip = "_strip_cm0rd_128";
 const meta$1 = "_meta_cm0rd_141";
-const tile$3 = "_tile_cm0rd_150";
+const tile$4 = "_tile_cm0rd_150";
 const image$b = "_image_cm0rd_160";
 const placeholder$5 = "_placeholder_cm0rd_167";
 const more = "_more_cm0rd_174";
@@ -9610,7 +9616,7 @@ const styles$A = {
   bottom: bottom$1,
   strip,
   meta: meta$1,
-  tile: tile$3,
+  tile: tile$4,
   image: image$b,
   placeholder: placeholder$5,
   more,
@@ -10195,7 +10201,7 @@ function ColourSwatches({ variants, className }) {
     }, c.value))
   });
 }
-const tile$2 = "_tile_tdmoy_7";
+const tile$3 = "_tile_tdmoy_7";
 const media$4 = "_media_tdmoy_15";
 const image$a = "_image_tdmoy_25";
 const placeholder$4 = "_placeholder_tdmoy_29";
@@ -10208,7 +10214,7 @@ const title$g = "_title_tdmoy_5";
 const large = "_large_tdmoy_185";
 const swatchSlot = "_swatchSlot_tdmoy_223";
 const styles$y = {
-  tile: tile$2,
+  tile: tile$3,
   media: media$4,
   image: image$a,
   placeholder: placeholder$4,
@@ -11786,7 +11792,7 @@ 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$1 = "_tile_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";
@@ -11799,7 +11805,7 @@ const styles$i = {
   title: title$9,
   value,
   tiles: tiles$1,
-  tile: tile$1,
+  tile: tile$2,
   selected: selected$1,
   media: media$2,
   image: image$5,
@@ -12781,7 +12787,7 @@ const section = "_section_16kkh_1";
 const title$3 = "_title_16kkh_8";
 const tiles = "_tiles_16kkh_19";
 const item$1 = "_item_16kkh_27";
-const tile = "_tile_16kkh_19";
+const tile$1 = "_tile_16kkh_19";
 const media$1 = "_media_16kkh_49";
 const image$2 = "_image_16kkh_61";
 const label = "_label_16kkh_65";
@@ -12791,7 +12797,7 @@ const styles$7 = {
   title: title$3,
   tiles,
   item: item$1,
-  tile,
+  tile: tile$1,
   media: media$1,
   image: image$2,
   label,
@@ -13498,6 +13504,7 @@ function requireContent() {
       image: zod_1.z.string().min(1).optional(),
       video: zod_1.z.string().min(1).optional(),
       desktop_image: zod_1.z.string().min(1).optional(),
+      desktop_video: zod_1.z.string().min(1).optional(),
       focal_y: zod_1.z.number().int().min(0).max(100).optional()
     });
     exports.HomeContent = zod_1.z.object({
@@ -14723,7 +14730,7 @@ const styles$5 = {
   invalid,
   cta: cta$1
 };
-function VipInviteInvalid() {
+function VipInviteNotice({ title: title2, body: body3 }) {
   const t = useT();
   const assetUrl = useAssetUrl();
   const navigate = useNavigate();
@@ -14772,10 +14779,10 @@ function VipInviteInvalid() {
             className: hero$2.copy,
             children: [jsx("h1", {
               className: hero$2.headline,
-              children: t("This invite is no longer valid")
+              children: title2
             }), jsx("p", {
               className: hero$2.body,
-              children: t("It may have expired or already been used. Keep an eye on your inbox for the next drop.")
+              children: body3
             })]
           })]
         }), jsx("div", {
@@ -14791,6 +14798,26 @@ function VipInviteInvalid() {
     })
   });
 }
+function VipInviteInvalid() {
+  const t = useT();
+  return jsx(VipInviteNotice, {
+    title: t("This invite is no longer valid"),
+    body: t("It may have expired or already been used. Keep an eye on your inbox for the next drop.")
+  });
+}
+function VipInviteScheduled({ opensAt }) {
+  const t = useT();
+  const locale = useLocale();
+  const when = new Date(opensAt);
+  const label2 = Number.isNaN(when.getTime()) ? opensAt : new Intl.DateTimeFormat(locale, {
+    dateStyle: "long",
+    timeStyle: "short"
+  }).format(when);
+  return jsx(VipInviteNotice, {
+    title: t("This invite isn't open yet"),
+    body: t("This invite opens on {0}. Come back then to claim your item.", label2)
+  });
+}
 const crumbs$1 = "_crumbs_thxlv_1";
 const home = "_home_thxlv_13";
 const trail$1 = "_trail_thxlv_25";
@@ -14923,15 +14950,10 @@ function VipLandingView({ token, onUnavailable }) {
     if (onUnavailable) return jsx(Fragment, {
       children: onUnavailable(invite.state)
     });
-    if (invite.state !== "scheduled") return jsx(VipInviteInvalid, {});
-    return jsx(ShopSurface, {
-      tone: "light",
-      fill: true,
-      children: jsx(EmptyState, {
-        title: t("Item unavailable"),
-        body: t("This invitation can no longer be used.")
-      })
+    if (invite.state === "scheduled") return jsx(VipInviteScheduled, {
+      opensAt: invite.opens_at
     });
+    return jsx(VipInviteInvalid, {});
   }
   return jsx(ActiveLanding, {
     token,
@@ -15019,33 +15041,40 @@ function ActiveLanding({ token, invite }) {
     })
   });
 }
-const showcase = "_showcase_nmp6h_14";
-const panel = "_panel_nmp6h_40";
-const image = "_image_nmp6h_93";
-const desktopArt = "_desktopArt_nmp6h_98";
-const hero = "_hero_nmp6h_137";
-const heroContent = "_heroContent_nmp6h_228";
-const heroText = "_heroText_nmp6h_252";
-const logo = "_logo_nmp6h_261";
-const heroTitle = "_heroTitle_nmp6h_281";
-const heroSub = "_heroSub_nmp6h_305";
-const swipe = "_swipe_nmp6h_324";
-const swipeLabel = "_swipeLabel_nmp6h_331";
-const chevron$1 = "_chevron_nmp6h_337";
-const overlay$1 = "_overlay_nmp6h_11";
-const copy = "_copy_nmp6h_374";
-const title$2 = "_title_nmp6h_386";
-const subtitle$1 = "_subtitle_nmp6h_395";
-const cta = "_cta_nmp6h_403";
-const mosaic = "_mosaic_nmp6h_447";
-const info = "_info_nmp6h_459";
-const band = "_band_nmp6h_463";
-const bandTitle = "_bandTitle_nmp6h_472";
-const products = "_products_nmp6h_484";
-const wideOnly = "_wideOnly_nmp6h_504";
-const phoneOnly = "_phoneOnly_nmp6h_530";
-const phoneArt = "_phoneArt_nmp6h_531";
-const desktopFocal = "_desktopFocal_nmp6h_540";
+const showcase = "_showcase_qp8eb_14";
+const panel = "_panel_qp8eb_40";
+const image = "_image_qp8eb_93";
+const desktopArt = "_desktopArt_qp8eb_98";
+const hero = "_hero_qp8eb_137";
+const heroContent = "_heroContent_qp8eb_228";
+const heroText = "_heroText_qp8eb_252";
+const logo = "_logo_qp8eb_261";
+const heroTitle = "_heroTitle_qp8eb_281";
+const heroSub = "_heroSub_qp8eb_305";
+const swipe = "_swipe_qp8eb_324";
+const swipeLabel = "_swipeLabel_qp8eb_331";
+const chevron$1 = "_chevron_qp8eb_337";
+const overlay$1 = "_overlay_qp8eb_11";
+const copy = "_copy_qp8eb_374";
+const title$2 = "_title_qp8eb_386";
+const subtitle$1 = "_subtitle_qp8eb_395";
+const cta = "_cta_qp8eb_403";
+const mosaic = "_mosaic_qp8eb_447";
+const info = "_info_qp8eb_459";
+const art = "_art_qp8eb_463";
+const band = "_band_qp8eb_468";
+const bandTitle = "_bandTitle_qp8eb_477";
+const products = "_products_qp8eb_489";
+const wideOnly = "_wideOnly_qp8eb_509";
+const phoneOnly = "_phoneOnly_qp8eb_535";
+const phoneArt = "_phoneArt_qp8eb_536";
+const desktopFocal = "_desktopFocal_qp8eb_545";
+const diptych = "_diptych_qp8eb_711";
+const tile = "_tile_qp8eb_716";
+const tileCopy = "_tileCopy_qp8eb_730";
+const tileText = "_tileText_qp8eb_743";
+const tileTitle = "_tileTitle_qp8eb_750";
+const tileSubtitle = "_tileSubtitle_qp8eb_757";
 const styles$3 = {
   showcase,
   panel,
@@ -15067,13 +15096,20 @@ const styles$3 = {
   cta,
   mosaic,
   info,
+  art,
   band,
   bandTitle,
   products,
   wideOnly,
   phoneOnly,
   phoneArt,
-  desktopFocal
+  desktopFocal,
+  diptych,
+  tile,
+  tileCopy,
+  tileText,
+  tileTitle,
+  tileSubtitle
 };
 const useMountEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 function useDocumentSnap(ref, enabled = true) {
@@ -15214,8 +15250,8 @@ function useDocumentSnap(ref, enabled = true) {
     };
   }, [ref, enabled]);
 }
-const HERO_DESKTOP = "/figma/home/hero-desktop.jpg";
-const BAND_DESKTOP = "/figma/home/band-desktop.jpg";
+const DESKTOP_POSTER = "/figma/home/desktop-poster.jpg";
+const DESKTOP_VIDEO = "/figma/home/desktop.mp4";
 const FALLBACK_PANELS = [{
   key: "hoodies",
   title: "Hoodies",
@@ -15224,8 +15260,7 @@ const FALLBACK_PANELS = [{
   to: "/category/hoodies",
   target: "hoodies",
   video: "/figma/home/hoodies.mp4",
-  image: "/figma/home/hoodies-poster.jpg",
-  desktopImage: BAND_DESKTOP
+  image: "/figma/home/hoodies-poster.jpg"
 }, {
   key: "zip-ups",
   title: "Zip Ups",
@@ -15235,7 +15270,8 @@ const FALLBACK_PANELS = [{
   target: "zip-ups",
   video: "/figma/home/zip-ups.mp4",
   image: "/figma/home/zip-ups-poster.jpg",
-  desktopImage: BAND_DESKTOP
+  desktopImage: "/figma/home/desktop-zip-ups-poster.jpg",
+  desktopVideo: "/figma/home/desktop-zip-ups.mp4"
 }, {
   key: "t-shirts",
   title: "T-Shirts",
@@ -15245,7 +15281,8 @@ const FALLBACK_PANELS = [{
   target: "t-shirts",
   video: "/figma/home/tshirts.mp4",
   image: "/figma/home/tshirts-poster.jpg",
-  desktopImage: BAND_DESKTOP
+  desktopImage: "/figma/home/desktop-tshirts-poster.jpg",
+  desktopVideo: "/figma/home/desktop-tshirts.mp4"
 }];
 const BAND_LIMIT = 20;
 const WIDE_BAND = 3;
@@ -15281,33 +15318,44 @@ function CategoryPanel({ panel: panel2, wide: wide2 }) {
   return jsxs("section", {
     className: styles$3.panel,
     "aria-label": t(panel2.title),
+    "data-desktop": panel2.desktopImage || panel2.desktopVideo ? "cover" : "products",
     ...panel2.focalY === void 0 ? {} : {
       style: {
         "--slide-focal-y": `${panel2.focalY}%`
       }
     },
-    children: [panel2.video ? jsxs(Fragment, {
-      children: [jsx(ShopVideo, {
-        src: panel2.video,
-        poster: panel2.image,
-        fill: true,
-        className: [styles$3.image, panel2.desktopImage ? styles$3.phoneArt : ""].join(" ")
-      }), panel2.desktopImage && jsx(ShopImage, {
-        src: panel2.desktopImage,
+    children: [jsxs("div", {
+      className: styles$3.art,
+      children: [panel2.video ? jsxs(Fragment, {
+        children: [jsx(ShopVideo, {
+          src: panel2.video,
+          poster: panel2.image,
+          fill: true,
+          className: [styles$3.image, panel2.desktopImage ? styles$3.phoneArt : ""].join(" ")
+        }), panel2.desktopImage && jsx(ShopImage, {
+          src: panel2.desktopImage,
+          alt: "",
+          fill: true,
+          sizes: "100vw",
+          className: [styles$3.image, styles$3.desktopArt].join(" ")
+        })]
+      }) : jsx(ShopImage, {
+        src: panel2.image,
+        ...panel2.desktopImage ? {
+          desktopSrc: panel2.desktopImage
+        } : {},
         alt: "",
         fill: true,
-        sizes: "100vw",
+        sizes: "(max-width: 480px) 100vw, 480px",
+        className: [styles$3.image, panel2.desktopImage ? styles$3.desktopFocal : ""].join(" ")
+      }), wide2 && panel2.desktopVideo && jsx(ShopVideo, {
+        src: panel2.desktopVideo,
+        ...panel2.desktopImage ? {
+          poster: panel2.desktopImage
+        } : {},
+        fill: true,
         className: [styles$3.image, styles$3.desktopArt].join(" ")
       })]
-    }) : jsx(ShopImage, {
-      src: panel2.image,
-      ...panel2.desktopImage ? {
-        desktopSrc: panel2.desktopImage
-      } : {},
-      alt: "",
-      fill: true,
-      sizes: "(max-width: 480px) 100vw, 480px",
-      className: [styles$3.image, panel2.desktopImage ? styles$3.desktopFocal : ""].join(" ")
     }), jsxs("div", {
       className: styles$3.overlay,
       children: [jsxs("div", {
@@ -15344,6 +15392,51 @@ function CategoryPanel({ panel: panel2, wide: wide2 }) {
     })]
   });
 }
+const DIPTYCH = [{
+  key: "ringer-tee",
+  title: "Ringer Tee",
+  subtitle: "White ringer tee with DAZN chest logo",
+  to: "/category/t-shirts",
+  video: "/figma/home/desktop-ringer-tee.mp4"
+}, {
+  key: "boxing-hoodie",
+  title: "Boxing Hoodie",
+  subtitle: "The Home of Boxing back print",
+  to: "/product/SKU3-0001",
+  video: "/figma/home/desktop-boxing-hoodie.mp4"
+}];
+function DiptychPanel() {
+  const t = useT();
+  return jsx("section", {
+    className: `${styles$3.panel} ${styles$3.diptych}`,
+    children: DIPTYCH.map((tile2) => jsxs("div", {
+      className: styles$3.tile,
+      children: [jsx(ShopVideo, {
+        src: tile2.video,
+        poster: tile2.video.replace(/\.mp4$/, "-poster.jpg"),
+        fill: true,
+        className: styles$3.image
+      }), jsxs("div", {
+        className: styles$3.tileCopy,
+        children: [jsxs("div", {
+          className: styles$3.tileText,
+          children: [jsx("h2", {
+            className: styles$3.tileTitle,
+            children: t(tile2.title)
+          }), jsx("p", {
+            className: styles$3.tileSubtitle,
+            children: t(tile2.subtitle)
+          })]
+        }), jsx(ShopLink, {
+          to: tile2.to,
+          className: styles$3.cta,
+          "aria-label": `${t(tile2.title)} — ${t("See more")}`,
+          children: t("See more")
+        })]
+      })]
+    }, tile2.key))
+  });
+}
 function MosaicPanel() {
   const t = useT();
   return jsx("section", {
@@ -15389,6 +15482,9 @@ function useSlides() {
         ...s.desktop_image === void 0 ? {} : {
           desktopImage: s.desktop_image
         },
+        ...s.desktop_video === void 0 ? {} : {
+          desktopVideo: s.desktop_video
+        },
         ...s.focal_y === void 0 ? {} : {
           focalY: s.focal_y
         }
@@ -15439,11 +15535,17 @@ function HomeShowcase() {
           priority: true,
           className: [styles$3.image, styles$3.phoneArt].join(" ")
         }), jsx(ShopImage, {
-          src: HERO_DESKTOP,
+          src: DESKTOP_POSTER,
           alt: "",
           fill: true,
           sizes: "100vw",
           className: [styles$3.image, styles$3.desktopArt].join(" ")
+        }), wide2 && jsx(ShopVideo, {
+          src: DESKTOP_VIDEO,
+          poster: DESKTOP_POSTER,
+          fill: true,
+          priority: true,
+          className: [styles$3.image, styles$3.desktopArt].join(" ")
         }), jsxs("div", {
           className: styles$3.heroContent,
           children: [jsxs("div", {
@@ -15489,8 +15591,8 @@ function HomeShowcase() {
         children: [jsx(CategoryPanel, {
           panel: p,
           wide: wide2
-        }), i === 0 && jsx(MosaicPanel, {})]
-      }, p.key)), panels.length === 0 && jsx(MosaicPanel, {})]
+        }), i === 0 && jsx(MosaicPanel, {}), i === 0 && wide2 && jsx(DiptychPanel, {})]
+      }, p.key)), panels.length === 0 && jsx(MosaicPanel, {}), panels.length === 0 && wide2 && jsx(DiptychPanel, {})]
     })
   });
 }