@nok-integration/storefront-react 0.29.4 → 0.29.6

package/dist/index.d.ts

@@ -6054,6 +6054,7 @@ declare interface ShopContextValue {
     subscribe: (listener: OnEvent) => () => void;
     navigate: (to: ShopRoute) => void;
     prefetch: ((to: ShopRoute) => void) | null;
+    hasSession: () => Promise<boolean>;
 }
 
 export declare type ShopEvent = {

package/dist/index.mjs

@@ -5749,6 +5749,14 @@ function DaznShopProvider({ children, ...config }) {
   const getTokenRef = useRef(getToken);
   getTokenRef.current = getToken;
   const stableGetToken = useCallback(() => getTokenRef.current(), []);
+  const hasSession = useCallback(async () => {
+    if (sessionTransport === "cookie") return true;
+    try {
+      return Boolean(await getTokenRef.current());
+    } catch {
+      return false;
+    }
+  }, [sessionTransport]);
   const productsRef = useRef(null);
   productsRef.current ??= new ProductCache();
   const products2 = productsRef.current;
@@ -5837,8 +5845,9 @@ function DaznShopProvider({ children, ...config }) {
     emit,
     subscribe,
     navigate,
-    prefetch: hostPrefetch ?? null
-  }), [api, market, products2, theme, resolvedFeatures, notifications, locale, assetBaseUrl, emit, subscribe, navigate, hostPrefetch]);
+    prefetch: hostPrefetch ?? null,
+    hasSession
+  }), [api, market, products2, theme, resolvedFeatures, notifications, locale, assetBaseUrl, emit, subscribe, navigate, hostPrefetch, hasSession]);
   return jsx(ShopContext.Provider, {
     value: value2,
     children: jsx(CartCacheContext.Provider, {
@@ -6253,15 +6262,15 @@ const ShopSurface = forwardRef(function ShopSurface2({ tone, fill: fill2 = false
     children
   });
 });
-const root$7 = "_root_ney0g_1";
-const inner = "_inner_ney0g_6";
-const media$5 = "_media_ney0g_20";
-const lines$2 = "_lines_ney0g_32";
-const lineWide = "_lineWide_ney0g_41";
-const lineMid = "_lineMid_ney0g_45";
-const lineNarrow = "_lineNarrow_ney0g_49";
-const row$9 = "_row_ney0g_53";
-const action$2 = "_action_ney0g_57";
+const root$7 = "_root_l5418_1";
+const inner = "_inner_l5418_6";
+const media$5 = "_media_l5418_20";
+const lines$2 = "_lines_l5418_32";
+const lineWide = "_lineWide_l5418_41";
+const lineMid = "_lineMid_l5418_45";
+const lineNarrow = "_lineNarrow_l5418_49";
+const row$9 = "_row_l5418_53";
+const action$2 = "_action_l5418_57";
 const styles$T = {
   root: root$7,
   inner,
@@ -6601,6 +6610,7 @@ function ScreenSkeleton({ tone, shape = "media" }) {
     tone,
     fill: true,
     className: styles$T.root,
+    "data-shop-layout": "wide",
     children: jsx("div", {
       className: styles$T.inner,
       role: "status",
@@ -8083,9 +8093,9 @@ function ReturnItemsView({ order, onSubmit, busy = false }) {
   const t = useT();
   const wide2 = useDesktopLayout();
   useOrderNav([t("My orders"), t("Order #{0}", shortRef$1(order.order_ref))], t("Return items"));
-  const layout = wide2 ? {
+  const layout = {
     "data-shop-layout": "wide"
-  } : {};
+  };
   const pageClass = [styles$H.page, wide2 ? styles$H.wide : ""].join(" ");
   const returnable = useMemo(() => order.items.filter((i) => unitsLeft(i) > 0), [order.items]);
   const selected2 = Object.entries(chosen).filter(([, reason2]) => reason2 !== void 0);
@@ -8309,9 +8319,7 @@ function ReturnLabelView({ ret, onDone }) {
   useOrderNav([t("My orders"), t("Order #{0}", shortRef$1(ret.order_ref))], t("Return items"));
   return jsx("div", {
     className: [styles$G.page, wide2 ? styles$G.wide : ""].join(" "),
-    ...wide2 ? {
-      "data-shop-layout": "wide"
-    } : {},
+    "data-shop-layout": "wide",
     children: jsxs("div", {
       className: styles$G.main,
       children: [jsxs("div", {
@@ -8457,9 +8465,7 @@ function ReturnTrackingView({ ret, locale: localeProp }) {
     fill: true,
     children: jsxs("div", {
       className: [styles$F.page, wide2 ? styles$F.wide : ""].join(" "),
-      ...wide2 ? {
-        "data-shop-layout": "wide"
-      } : {},
+      "data-shop-layout": "wide",
       children: [jsxs("section", {
         className: styles$F.widget,
         "aria-labelledby": "return-title",
@@ -9207,9 +9213,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
     return jsxs("div", {
       className: [styles$D.page, wide2 ? styles$D.wide : "", wide2 && order.vip ? styles$D.vip : ""].join(" "),
       ref: cancelledPage,
-      ...wide2 ? {
-        "data-shop-layout": "wide"
-      } : {},
+      "data-shop-layout": "wide",
       children: [jsxs("div", {
         className: styles$D.cancelledMain,
         children: [jsxs("div", {
@@ -9253,9 +9257,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
   }
   return jsxs("div", {
     className: [styles$D.page, wide2 ? styles$D.wide : ""].join(" "),
-    ...wide2 ? {
-      "data-shop-layout": "wide"
-    } : {},
+    "data-shop-layout": "wide",
     children: [jsxs("section", {
       className: styles$D.widget,
       "aria-label": t("Delivery status"),
@@ -9475,9 +9477,7 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
   }
   return jsxs("div", {
     className: [styles$C.page, wide2 ? styles$C.wide : ""].join(" "),
-    ...wide2 ? {
-      "data-shop-layout": "wide"
-    } : {},
+    "data-shop-layout": "wide",
     children: [jsxs("section", {
       className: styles$C.confirmed,
       "aria-label": t("Order confirmation"),
@@ -15008,7 +15008,7 @@ function heroFromProduct(product, ctaLabel) {
 function ActiveLanding({ token, invite, screen: screen2 }) {
   const t = useT();
   const toast2 = useToast();
-  const { api, emit } = useShop();
+  const { api, emit, hasSession } = useShop();
   const navigate = useNavigate();
   const sku = invite.items[0]?.product_sku ?? "";
   const loaded = useProduct(sku, {
@@ -15021,7 +15021,21 @@ function ActiveLanding({ token, invite, screen: screen2 }) {
     else window.location.assign(to);
   }, [navigate]);
   const fallback = useMemo(() => loaded.product ? heroFromProduct(loaded.product, t("See more")) : null, [loaded.product, t]);
+  const shop2 = useCallback(async () => {
+    if (await hasSession()) go(productPath);
+    else emit({
+      type: "session_required",
+      action: "vip_claim"
+    });
+  }, [emit, go, hasSession, productPath]);
   const claim = useCallback(async (variantSku) => {
+    if (!await hasSession()) {
+      emit({
+        type: "session_required",
+        action: "vip_claim"
+      });
+      return;
+    }
     try {
       const current2 = await api.cart.get().catch(() => null);
       if (current2?.vip?.invite_ref === invite.invite_ref) {
@@ -15062,12 +15076,12 @@ function ActiveLanding({ token, invite, screen: screen2 }) {
       });
       toast2.show(t(treatmentFor(code).body), "critical");
     }
-  }, [api, emit, invite.invite_ref, t, toast2, token]);
+  }, [api, emit, hasSession, invite.invite_ref, t, toast2, token]);
   if (screen2 === "hero") {
     const hero2 = invite.hero ?? fallback;
     if (hero2) return jsx(VipHero, {
       hero: hero2,
-      onContinue: () => go(productPath)
+      onContinue: () => void shop2()
     });
   } else if (loaded.product) {
     return jsx(ProductDetail, {

package/dist/standalone/storefront.mjs

@@ -5749,6 +5749,14 @@ function DaznShopProvider({ children, ...config }) {
   const getTokenRef = useRef(getToken);
   getTokenRef.current = getToken;
   const stableGetToken = useCallback(() => getTokenRef.current(), []);
+  const hasSession = useCallback(async () => {
+    if (sessionTransport === "cookie") return true;
+    try {
+      return Boolean(await getTokenRef.current());
+    } catch {
+      return false;
+    }
+  }, [sessionTransport]);
   const productsRef = useRef(null);
   productsRef.current ??= new ProductCache();
   const products2 = productsRef.current;
@@ -5837,8 +5845,9 @@ function DaznShopProvider({ children, ...config }) {
     emit,
     subscribe,
     navigate,
-    prefetch: hostPrefetch ?? null
-  }), [api, market, products2, theme, resolvedFeatures, notifications, locale, assetBaseUrl, emit, subscribe, navigate, hostPrefetch]);
+    prefetch: hostPrefetch ?? null,
+    hasSession
+  }), [api, market, products2, theme, resolvedFeatures, notifications, locale, assetBaseUrl, emit, subscribe, navigate, hostPrefetch, hasSession]);
   return jsx(ShopContext.Provider, {
     value: value2,
     children: jsx(CartCacheContext.Provider, {
@@ -6253,15 +6262,15 @@ const ShopSurface = forwardRef(function ShopSurface2({ tone, fill: fill2 = false
     children
   });
 });
-const root$7 = "_root_ney0g_1";
-const inner = "_inner_ney0g_6";
-const media$5 = "_media_ney0g_20";
-const lines$2 = "_lines_ney0g_32";
-const lineWide = "_lineWide_ney0g_41";
-const lineMid = "_lineMid_ney0g_45";
-const lineNarrow = "_lineNarrow_ney0g_49";
-const row$9 = "_row_ney0g_53";
-const action$2 = "_action_ney0g_57";
+const root$7 = "_root_l5418_1";
+const inner = "_inner_l5418_6";
+const media$5 = "_media_l5418_20";
+const lines$2 = "_lines_l5418_32";
+const lineWide = "_lineWide_l5418_41";
+const lineMid = "_lineMid_l5418_45";
+const lineNarrow = "_lineNarrow_l5418_49";
+const row$9 = "_row_l5418_53";
+const action$2 = "_action_l5418_57";
 const styles$T = {
   root: root$7,
   inner,
@@ -6601,6 +6610,7 @@ function ScreenSkeleton({ tone, shape = "media" }) {
     tone,
     fill: true,
     className: styles$T.root,
+    "data-shop-layout": "wide",
     children: jsx("div", {
       className: styles$T.inner,
       role: "status",
@@ -8083,9 +8093,9 @@ function ReturnItemsView({ order, onSubmit, busy = false }) {
   const t = useT();
   const wide2 = useDesktopLayout();
   useOrderNav([t("My orders"), t("Order #{0}", shortRef$1(order.order_ref))], t("Return items"));
-  const layout = wide2 ? {
+  const layout = {
     "data-shop-layout": "wide"
-  } : {};
+  };
   const pageClass = [styles$H.page, wide2 ? styles$H.wide : ""].join(" ");
   const returnable = useMemo(() => order.items.filter((i) => unitsLeft(i) > 0), [order.items]);
   const selected2 = Object.entries(chosen).filter(([, reason2]) => reason2 !== void 0);
@@ -8309,9 +8319,7 @@ function ReturnLabelView({ ret, onDone }) {
   useOrderNav([t("My orders"), t("Order #{0}", shortRef$1(ret.order_ref))], t("Return items"));
   return jsx("div", {
     className: [styles$G.page, wide2 ? styles$G.wide : ""].join(" "),
-    ...wide2 ? {
-      "data-shop-layout": "wide"
-    } : {},
+    "data-shop-layout": "wide",
     children: jsxs("div", {
       className: styles$G.main,
       children: [jsxs("div", {
@@ -8457,9 +8465,7 @@ function ReturnTrackingView({ ret, locale: localeProp }) {
     fill: true,
     children: jsxs("div", {
       className: [styles$F.page, wide2 ? styles$F.wide : ""].join(" "),
-      ...wide2 ? {
-        "data-shop-layout": "wide"
-      } : {},
+      "data-shop-layout": "wide",
       children: [jsxs("section", {
         className: styles$F.widget,
         "aria-labelledby": "return-title",
@@ -9207,9 +9213,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
     return jsxs("div", {
       className: [styles$D.page, wide2 ? styles$D.wide : "", wide2 && order.vip ? styles$D.vip : ""].join(" "),
       ref: cancelledPage,
-      ...wide2 ? {
-        "data-shop-layout": "wide"
-      } : {},
+      "data-shop-layout": "wide",
       children: [jsxs("div", {
         className: styles$D.cancelledMain,
         children: [jsxs("div", {
@@ -9253,9 +9257,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
   }
   return jsxs("div", {
     className: [styles$D.page, wide2 ? styles$D.wide : ""].join(" "),
-    ...wide2 ? {
-      "data-shop-layout": "wide"
-    } : {},
+    "data-shop-layout": "wide",
     children: [jsxs("section", {
       className: styles$D.widget,
       "aria-label": t("Delivery status"),
@@ -9475,9 +9477,7 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
   }
   return jsxs("div", {
     className: [styles$C.page, wide2 ? styles$C.wide : ""].join(" "),
-    ...wide2 ? {
-      "data-shop-layout": "wide"
-    } : {},
+    "data-shop-layout": "wide",
     children: [jsxs("section", {
       className: styles$C.confirmed,
       "aria-label": t("Order confirmation"),
@@ -15008,7 +15008,7 @@ function heroFromProduct(product, ctaLabel) {
 function ActiveLanding({ token, invite, screen: screen2 }) {
   const t = useT();
   const toast2 = useToast();
-  const { api, emit } = useShop();
+  const { api, emit, hasSession } = useShop();
   const navigate = useNavigate();
   const sku = invite.items[0]?.product_sku ?? "";
   const loaded = useProduct(sku, {
@@ -15021,7 +15021,21 @@ function ActiveLanding({ token, invite, screen: screen2 }) {
     else window.location.assign(to);
   }, [navigate]);
   const fallback = useMemo(() => loaded.product ? heroFromProduct(loaded.product, t("See more")) : null, [loaded.product, t]);
+  const shop2 = useCallback(async () => {
+    if (await hasSession()) go(productPath);
+    else emit({
+      type: "session_required",
+      action: "vip_claim"
+    });
+  }, [emit, go, hasSession, productPath]);
   const claim = useCallback(async (variantSku) => {
+    if (!await hasSession()) {
+      emit({
+        type: "session_required",
+        action: "vip_claim"
+      });
+      return;
+    }
     try {
       const current2 = await api.cart.get().catch(() => null);
       if (current2?.vip?.invite_ref === invite.invite_ref) {
@@ -15062,12 +15076,12 @@ function ActiveLanding({ token, invite, screen: screen2 }) {
       });
       toast2.show(t(treatmentFor(code).body), "critical");
     }
-  }, [api, emit, invite.invite_ref, t, toast2, token]);
+  }, [api, emit, hasSession, invite.invite_ref, t, toast2, token]);
   if (screen2 === "hero") {
     const hero2 = invite.hero ?? fallback;
     if (hero2) return jsx(VipHero, {
       hero: hero2,
-      onContinue: () => go(productPath)
+      onContinue: () => void shop2()
     });
   } else if (loaded.product) {
     return jsx(ProductDetail, {

package/dist/standalone/styles.css

@@ -279,43 +279,56 @@
     scroll-behavior: auto !important;
   }
 }
-._root_ney0g_1 {
+._root_l5418_1 {
   display: flex;
   flex-direction: column;
 }
-._inner_ney0g_6 {
+._inner_l5418_6 {
   display: flex;
   flex-direction: column;
   gap: var(--space-16);
   padding-bottom: var(--space-24);
 }
-._media_ney0g_20 {
+._media_l5418_20 {
   width: 100%;
   min-height: 320px;
   aspect-ratio: 4 / 5;
   border-radius: 0;
 }
-._lines_ney0g_32 {
+._lines_l5418_32 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
   padding: 0 var(--space-16);
 }
-._lineWide_ney0g_41 {
+._lineWide_l5418_41 {
   width: 70%;
 }
-._lineMid_ney0g_45 {
+._lineMid_l5418_45 {
   width: 45%;
 }
-._lineNarrow_ney0g_49 {
+._lineNarrow_l5418_49 {
   width: 88%;
 }
-._row_ney0g_53 {
+._row_l5418_53 {
   width: 100%;
 }
-._action_ney0g_57 {
+._action_l5418_57 {
   margin: var(--space-8) var(--space-16) 0;
 }
+@media (min-width: 1200px) {
+  ._media_l5418_20 {
+    min-height: 0;
+    aspect-ratio: auto;
+    height: calc(100vh - var(--shop-chrome-top, 0px) - 64px);
+  }
+  ._lines_l5418_32,
+  ._action_l5418_57 {
+    width: min(1088px, 100%);
+    margin-inline: auto;
+    padding: 0;
+  }
+}
 ._root_ryf3q_6 {
   display: flex;
   flex-direction: column;

package/dist/styles.css

@@ -279,43 +279,56 @@
     scroll-behavior: auto !important;
   }
 }
-._root_ney0g_1 {
+._root_l5418_1 {
   display: flex;
   flex-direction: column;
 }
-._inner_ney0g_6 {
+._inner_l5418_6 {
   display: flex;
   flex-direction: column;
   gap: var(--space-16);
   padding-bottom: var(--space-24);
 }
-._media_ney0g_20 {
+._media_l5418_20 {
   width: 100%;
   min-height: 320px;
   aspect-ratio: 4 / 5;
   border-radius: 0;
 }
-._lines_ney0g_32 {
+._lines_l5418_32 {
   display: flex;
   flex-direction: column;
   gap: var(--space-12);
   padding: 0 var(--space-16);
 }
-._lineWide_ney0g_41 {
+._lineWide_l5418_41 {
   width: 70%;
 }
-._lineMid_ney0g_45 {
+._lineMid_l5418_45 {
   width: 45%;
 }
-._lineNarrow_ney0g_49 {
+._lineNarrow_l5418_49 {
   width: 88%;
 }
-._row_ney0g_53 {
+._row_l5418_53 {
   width: 100%;
 }
-._action_ney0g_57 {
+._action_l5418_57 {
   margin: var(--space-8) var(--space-16) 0;
 }
+@media (min-width: 1200px) {
+  ._media_l5418_20 {
+    min-height: 0;
+    aspect-ratio: auto;
+    height: calc(100vh - var(--shop-chrome-top, 0px) - 64px);
+  }
+  ._lines_l5418_32,
+  ._action_l5418_57 {
+    width: min(1088px, 100%);
+    margin-inline: auto;
+    padding: 0;
+  }
+}
 ._root_ryf3q_6 {
   display: flex;
   flex-direction: column;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nok-integration/storefront-react",
-  "version": "0.29.4",
+  "version": "0.29.6",
   "description": "Mountable React storefront components: catalogue, product detail and cart, mounted directly into a host DOM tree. No iframe.",
   "license": "UNLICENSED",
   "type": "module",