@nok-integration/storefront-react 0.27.0 → 0.29.0

package/dist/index.d.ts

@@ -2766,6 +2766,7 @@ declare function createClient(options: ClientOptions): {
                 cta: string;
                 image?: string | undefined;
                 desktop_image?: string | undefined;
+                desktop_subtitle?: string | undefined;
                 target?: string | undefined;
                 video?: string | undefined;
                 desktop_video?: string | undefined;

package/dist/index.mjs

@@ -4393,6 +4393,7 @@ function requireContent$1() {
       key: zod_1.z.string().min(1),
       title: zod_1.z.string().min(1),
       subtitle: zod_1.z.string(),
+      desktop_subtitle: zod_1.z.string().min(1).optional(),
       cta: zod_1.z.string().min(1),
       target: zod_1.z.string().min(1).optional(),
       image: zod_1.z.string().min(1).optional(),
@@ -6530,13 +6531,21 @@ 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",
+  "Heavyweight fits, ringside energy": "Tejido grueso, energía de ring",
+  "Layer up, matchday ready": "Abrígate, listo para el partido",
+  "Everyday tees, fan-first graphics": "Camisetas para cada día, gráficos para la afición",
   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.",
@@ -9571,7 +9580,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";
@@ -9611,7 +9620,7 @@ const styles$A = {
   bottom: bottom$1,
   strip,
   meta: meta$1,
-  tile: tile$3,
+  tile: tile$4,
   image: image$b,
   placeholder: placeholder$5,
   more,
@@ -10196,7 +10205,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";
@@ -10209,7 +10218,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,
@@ -11787,7 +11796,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";
@@ -11800,7 +11809,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,
@@ -12782,7 +12791,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";
@@ -12792,7 +12801,7 @@ const styles$7 = {
   title: title$3,
   tiles,
   item: item$1,
-  tile,
+  tile: tile$1,
   media: media$1,
   image: image$2,
   label,
@@ -13494,6 +13503,7 @@ function requireContent() {
       key: zod_1.z.string().min(1),
       title: zod_1.z.string().min(1),
       subtitle: zod_1.z.string(),
+      desktop_subtitle: zod_1.z.string().min(1).optional(),
       cta: zod_1.z.string().min(1),
       target: zod_1.z.string().min(1).optional(),
       image: zod_1.z.string().min(1).optional(),
@@ -14725,7 +14735,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();
@@ -14774,10 +14784,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", {
@@ -14793,6 +14803,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";
@@ -14925,15 +14955,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,
@@ -15021,33 +15046,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_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 styles$3 = {
   showcase,
   panel,
@@ -15069,13 +15101,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) {
@@ -15227,8 +15266,7 @@ const FALLBACK_PANELS = [{
   target: "hoodies",
   video: "/figma/home/hoodies.mp4",
   image: "/figma/home/hoodies-poster.jpg",
-  desktopImage: DESKTOP_POSTER,
-  desktopVideo: DESKTOP_VIDEO
+  desktopSubtitle: "Heavyweight fits, ringside energy"
 }, {
   key: "zip-ups",
   title: "Zip Ups",
@@ -15238,8 +15276,9 @@ const FALLBACK_PANELS = [{
   target: "zip-ups",
   video: "/figma/home/zip-ups.mp4",
   image: "/figma/home/zip-ups-poster.jpg",
-  desktopImage: DESKTOP_POSTER,
-  desktopVideo: DESKTOP_VIDEO
+  desktopImage: "/figma/home/desktop-zip-ups-poster.jpg",
+  desktopVideo: "/figma/home/desktop-zip-ups.mp4",
+  desktopSubtitle: "Layer up, matchday ready"
 }, {
   key: "t-shirts",
   title: "T-Shirts",
@@ -15249,8 +15288,9 @@ const FALLBACK_PANELS = [{
   target: "t-shirts",
   video: "/figma/home/tshirts.mp4",
   image: "/figma/home/tshirts-poster.jpg",
-  desktopImage: DESKTOP_POSTER,
-  desktopVideo: DESKTOP_VIDEO
+  desktopImage: "/figma/home/desktop-tshirts-poster.jpg",
+  desktopVideo: "/figma/home/desktop-tshirts.mp4",
+  desktopSubtitle: "Everyday tees, fan-first graphics"
 }];
 const BAND_LIMIT = 20;
 const WIDE_BAND = 3;
@@ -15286,40 +15326,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(" ")
-    }), wide2 && panel2.desktopVideo && jsx(ShopVideo, {
-      src: panel2.desktopVideo,
-      ...panel2.desktopImage ? {
-        poster: panel2.desktopImage
-      } : {},
-      fill: true,
-      className: [styles$3.image, styles$3.desktopArt].join(" ")
     }), jsxs("div", {
       className: styles$3.overlay,
       children: [jsxs("div", {
@@ -15331,7 +15375,15 @@ function CategoryPanel({ panel: panel2, wide: wide2 }) {
             children: t(panel2.title)
           }), jsx("p", {
             className: styles$3.subtitle,
-            children: t(panel2.subtitle)
+            children: panel2.desktopSubtitle ? jsxs(Fragment, {
+              children: [jsx("span", {
+                className: styles$3.phoneOnly,
+                children: t(panel2.subtitle)
+              }), jsx("span", {
+                className: styles$3.wideOnly,
+                children: t(panel2.desktopSubtitle)
+              })]
+            }) : t(panel2.subtitle)
           })]
         }), jsx(ShopLink, {
           to: panel2.to,
@@ -15356,6 +15408,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", {
@@ -15377,6 +15474,9 @@ function useSlides() {
     ...p,
     title: t(p.title),
     subtitle: t(p.subtitle),
+    ...p.desktopSubtitle === void 0 ? {} : {
+      desktopSubtitle: t(p.desktopSubtitle)
+    },
     cta: t(p.cta)
   })), [t]);
   useEffect(() => {
@@ -15404,6 +15504,9 @@ function useSlides() {
         ...s.desktop_video === void 0 ? {} : {
           desktopVideo: s.desktop_video
         },
+        ...s.desktop_subtitle === void 0 ? {} : {
+          desktopSubtitle: s.desktop_subtitle
+        },
         ...s.focal_y === void 0 ? {} : {
           focalY: s.focal_y
         }
@@ -15510,8 +15613,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, {})]
     })
   });
 }