@nok-integration/storefront-react 0.29.3 → 0.29.5

package/dist/index.d.ts

@@ -23,15 +23,15 @@ declare type AddCartItemRequest = z.infer<typeof AddCartItemRequest>;
 
 /** The `error` member — a machine `code`, a human `message`, and optional `details`. */
 declare const ApiErrorBody: z.ZodObject<{
-    code: z.ZodEnum<["invalid_request", "unauthorized", "out_of_stock", "cart_locked", "sku_not_found", "category_not_found", "amount_mismatch", "duplicate_order", "order_not_found", "order_not_cancellable", "cart_not_found", "support_ticket_not_found", "vip_invite_not_found", "vip_cart_conflict", "vip_invite_mismatch", "size_chart_not_found", "forbidden", "invalid_transition", "rate_limited", "server_error"]>;
+    code: z.ZodEnum<["invalid_request", "unauthorized", "out_of_stock", "cart_locked", "sku_not_found", "category_not_found", "amount_mismatch", "duplicate_order", "order_not_found", "order_not_cancellable", "cart_not_found", "support_ticket_not_found", "vip_invite_not_found", "vip_cart_conflict", "vip_invite_mismatch", "vip_hero_missing", "size_chart_not_found", "forbidden", "invalid_transition", "rate_limited", "server_error"]>;
     message: z.ZodString;
     details: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
 }, "strip", z.ZodTypeAny, {
-    code: "invalid_request" | "unauthorized" | "out_of_stock" | "cart_locked" | "sku_not_found" | "category_not_found" | "amount_mismatch" | "duplicate_order" | "order_not_found" | "order_not_cancellable" | "cart_not_found" | "support_ticket_not_found" | "vip_invite_not_found" | "vip_cart_conflict" | "vip_invite_mismatch" | "size_chart_not_found" | "forbidden" | "invalid_transition" | "rate_limited" | "server_error";
+    code: "invalid_request" | "unauthorized" | "out_of_stock" | "cart_locked" | "sku_not_found" | "category_not_found" | "amount_mismatch" | "duplicate_order" | "order_not_found" | "order_not_cancellable" | "cart_not_found" | "support_ticket_not_found" | "vip_invite_not_found" | "vip_cart_conflict" | "vip_invite_mismatch" | "vip_hero_missing" | "size_chart_not_found" | "forbidden" | "invalid_transition" | "rate_limited" | "server_error";
     message: string;
     details?: Record<string, unknown> | undefined;
 }, {
-    code: "invalid_request" | "unauthorized" | "out_of_stock" | "cart_locked" | "sku_not_found" | "category_not_found" | "amount_mismatch" | "duplicate_order" | "order_not_found" | "order_not_cancellable" | "cart_not_found" | "support_ticket_not_found" | "vip_invite_not_found" | "vip_cart_conflict" | "vip_invite_mismatch" | "size_chart_not_found" | "forbidden" | "invalid_transition" | "rate_limited" | "server_error";
+    code: "invalid_request" | "unauthorized" | "out_of_stock" | "cart_locked" | "sku_not_found" | "category_not_found" | "amount_mismatch" | "duplicate_order" | "order_not_found" | "order_not_cancellable" | "cart_not_found" | "support_ticket_not_found" | "vip_invite_not_found" | "vip_cart_conflict" | "vip_invite_mismatch" | "vip_hero_missing" | "size_chart_not_found" | "forbidden" | "invalid_transition" | "rate_limited" | "server_error";
     message: string;
     details?: Record<string, unknown> | undefined;
 }>;
@@ -3760,7 +3760,7 @@ export declare interface EmptyStateProps {
  * | rate_limited       | 429  | too many requests                             |
  * | server_error       | 500  | unexpected error (safe to retry idempotent)   |
  */
-declare const ErrorCode: z.ZodEnum<["invalid_request", "unauthorized", "out_of_stock", "cart_locked", "sku_not_found", "category_not_found", "amount_mismatch", "duplicate_order", "order_not_found", "order_not_cancellable", "cart_not_found", "support_ticket_not_found", "vip_invite_not_found", "vip_cart_conflict", "vip_invite_mismatch", "size_chart_not_found", "forbidden", "invalid_transition", "rate_limited", "server_error"]>;
+declare const ErrorCode: z.ZodEnum<["invalid_request", "unauthorized", "out_of_stock", "cart_locked", "sku_not_found", "category_not_found", "amount_mismatch", "duplicate_order", "order_not_found", "order_not_cancellable", "cart_not_found", "support_ticket_not_found", "vip_invite_not_found", "vip_cart_conflict", "vip_invite_mismatch", "vip_hero_missing", "size_chart_not_found", "forbidden", "invalid_transition", "rate_limited", "server_error"]>;
 
 declare type ErrorCode = z.infer<typeof ErrorCode>;
 
@@ -3783,7 +3783,7 @@ declare type ErrorCode = z.infer<typeof ErrorCode>;
  * | rate_limited       | 429  | too many requests                             |
  * | server_error       | 500  | unexpected error (safe to retry idempotent)   |
  */
-declare const ErrorCode_2: z.ZodEnum<["invalid_request", "unauthorized", "out_of_stock", "cart_locked", "sku_not_found", "category_not_found", "amount_mismatch", "duplicate_order", "order_not_found", "order_not_cancellable", "cart_not_found", "support_ticket_not_found", "vip_invite_not_found", "vip_cart_conflict", "vip_invite_mismatch", "size_chart_not_found", "forbidden", "invalid_transition", "rate_limited", "server_error"]>;
+declare const ErrorCode_2: z.ZodEnum<["invalid_request", "unauthorized", "out_of_stock", "cart_locked", "sku_not_found", "category_not_found", "amount_mismatch", "duplicate_order", "order_not_found", "order_not_cancellable", "cart_not_found", "support_ticket_not_found", "vip_invite_not_found", "vip_cart_conflict", "vip_invite_mismatch", "vip_hero_missing", "size_chart_not_found", "forbidden", "invalid_transition", "rate_limited", "server_error"]>;
 
 declare type ErrorCode_2 = z.infer<typeof ErrorCode_2>;
 
@@ -7225,7 +7225,7 @@ declare const VipInviteView: z.ZodDiscriminatedUnion<"state", [z.ZodObject<{
 
 declare type VipInviteView = z.infer<typeof VipInviteView>;
 
-export declare function VipLandingView({ token, onUnavailable }: VipLandingViewProps): JSX.Element;
+export declare function VipLandingView({ token, onUnavailable, screen }: VipLandingViewProps): JSX.Element;
 
 export declare interface VipLandingViewProps {
     /**
@@ -7235,6 +7235,11 @@ export declare interface VipLandingViewProps {
     token: string;
     /** Replaces the built-in screen for an invite that cannot be claimed. */
     onUnavailable?: (state: VipInviteUnavailableState) => ReactNode;
+    /**
+     * Which screen of the invite this URL is. `hero` is `/vip/<token>`, `product` is
+     * `/vip/<token>/product`. Defaults to `hero`.
+     */
+    screen?: 'hero' | 'product';
 }
 
 /** "Why shop with us" reassurance tiles. */

package/dist/index.mjs

@@ -4993,7 +4993,7 @@ function requireErrors$1() {
     });
     exports.ErrorResponse = exports.ApiErrorBody = exports.ERROR_CODE_STATUS = exports.ErrorCode = void 0;
     const zod_1 = requireZod();
-    exports.ErrorCode = zod_1.z.enum(["invalid_request", "unauthorized", "out_of_stock", "cart_locked", "sku_not_found", "category_not_found", "amount_mismatch", "duplicate_order", "order_not_found", "order_not_cancellable", "cart_not_found", "support_ticket_not_found", "vip_invite_not_found", "vip_cart_conflict", "vip_invite_mismatch", "size_chart_not_found", "forbidden", "invalid_transition", "rate_limited", "server_error"]);
+    exports.ErrorCode = zod_1.z.enum(["invalid_request", "unauthorized", "out_of_stock", "cart_locked", "sku_not_found", "category_not_found", "amount_mismatch", "duplicate_order", "order_not_found", "order_not_cancellable", "cart_not_found", "support_ticket_not_found", "vip_invite_not_found", "vip_cart_conflict", "vip_invite_mismatch", "vip_hero_missing", "size_chart_not_found", "forbidden", "invalid_transition", "rate_limited", "server_error"]);
     exports.ERROR_CODE_STATUS = {
       invalid_request: 400,
       unauthorized: 401,
@@ -5010,6 +5010,7 @@ function requireErrors$1() {
       vip_invite_not_found: 404,
       vip_cart_conflict: 409,
       vip_invite_mismatch: 409,
+      vip_hero_missing: 422,
       size_chart_not_found: 404,
       forbidden: 403,
       invalid_transition: 409,
@@ -6252,15 +6253,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,
@@ -6600,6 +6601,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",
@@ -8082,9 +8084,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);
@@ -8308,9 +8310,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", {
@@ -8456,9 +8456,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",
@@ -9206,9 +9204,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", {
@@ -9252,9 +9248,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"),
@@ -9474,9 +9468,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"),
@@ -14142,7 +14134,7 @@ function requireErrors() {
     });
     exports.ErrorResponse = exports.ApiErrorBody = exports.ERROR_CODE_STATUS = exports.ErrorCode = void 0;
     const zod_1 = requireZod();
-    exports.ErrorCode = zod_1.z.enum(["invalid_request", "unauthorized", "out_of_stock", "cart_locked", "sku_not_found", "category_not_found", "amount_mismatch", "duplicate_order", "order_not_found", "order_not_cancellable", "cart_not_found", "support_ticket_not_found", "vip_invite_not_found", "vip_cart_conflict", "vip_invite_mismatch", "size_chart_not_found", "forbidden", "invalid_transition", "rate_limited", "server_error"]);
+    exports.ErrorCode = zod_1.z.enum(["invalid_request", "unauthorized", "out_of_stock", "cart_locked", "sku_not_found", "category_not_found", "amount_mismatch", "duplicate_order", "order_not_found", "order_not_cancellable", "cart_not_found", "support_ticket_not_found", "vip_invite_not_found", "vip_cart_conflict", "vip_invite_mismatch", "vip_hero_missing", "size_chart_not_found", "forbidden", "invalid_transition", "rate_limited", "server_error"]);
     exports.ERROR_CODE_STATUS = {
       invalid_request: 400,
       unauthorized: 401,
@@ -14159,6 +14151,7 @@ function requireErrors() {
       vip_invite_not_found: 404,
       vip_cart_conflict: 409,
       vip_invite_mismatch: 409,
+      vip_hero_missing: 422,
       size_chart_not_found: 404,
       forbidden: 403,
       invalid_transition: 409,
@@ -14902,7 +14895,7 @@ function locatorOf(segment) {
   return null;
 }
 const INVALID_LINK = /* @__PURE__ */ new Set(["invalid_request", "vip_invite_not_found", "vip_invite_mismatch"]);
-function VipLandingView({ token, onUnavailable }) {
+function VipLandingView({ token, onUnavailable, screen: screen2 = "hero" }) {
   const t = useT();
   const { api, emit } = useShop();
   const locator = locatorOf(token);
@@ -14982,18 +14975,43 @@ function VipLandingView({ token, onUnavailable }) {
   }
   return jsx(ActiveLanding, {
     token,
-    invite
+    invite,
+    screen: screen2
   });
 }
-function ActiveLanding({ token, invite }) {
+function plainFirstLine(description2) {
+  if (!description2) return null;
+  const line2 = description2.replace(/<[^>]*>/g, " ").split(/\n+/).map((l) => l.replace(/\s+/g, " ").trim()).find((l) => l.length > 0);
+  if (!line2) return null;
+  const sentence = /^.*?[.!?](?=\s|$)/.exec(line2);
+  return sentence ? sentence[0] : line2;
+}
+function heroFromProduct(product, ctaLabel) {
+  const image2 = product.media[0] ?? null;
+  return {
+    image: image2,
+    desktop_image: image2,
+    headline: product.title,
+    body: plainFirstLine(product.description),
+    cta_label: ctaLabel
+  };
+}
+function ActiveLanding({ token, invite, screen: screen2 }) {
   const t = useT();
   const toast2 = useToast();
   const { api, emit } = useShop();
-  const product = useInPlaceScreen("vipProduct");
+  const navigate = useNavigate();
   const sku = invite.items[0]?.product_sku ?? "";
   const loaded = useProduct(sku, {
     showRecommendations: false
   });
+  const productPath = `/vip/${token}/product`;
+  const heroPath = `/vip/${token}`;
+  const go = useCallback((to) => {
+    if (navigate) navigate(to);
+    else window.location.assign(to);
+  }, [navigate]);
+  const fallback = useMemo(() => loaded.product ? heroFromProduct(loaded.product, t("See more")) : null, [loaded.product, t]);
   const claim = useCallback(async (variantSku) => {
     try {
       const current2 = await api.cart.get().catch(() => null);
@@ -15036,23 +15054,21 @@ function ActiveLanding({ token, invite }) {
       toast2.show(t(treatmentFor(code).body), "critical");
     }
   }, [api, emit, invite.invite_ref, t, toast2, token]);
-  if (invite.hero && product.value === null) {
-    return jsx(VipHero, {
-      hero: invite.hero,
-      onContinue: () => product.open("1")
+  if (screen2 === "hero") {
+    const hero2 = invite.hero ?? fallback;
+    if (hero2) return jsx(VipHero, {
+      hero: hero2,
+      onContinue: () => go(productPath)
     });
-  }
-  if (loaded.product) {
+  } else if (loaded.product) {
     return jsx(ProductDetail, {
       product: loaded.product,
       inventory: loaded.inventory,
       claim,
-      ...invite.hero ? {
-        breadcrumb: jsx(VipBreadcrumb, {
-          title: loaded.product.title,
-          onHome: product.close
-        })
-      } : {}
+      breadcrumb: jsx(VipBreadcrumb, {
+        title: loaded.product.title,
+        onHome: () => go(heroPath)
+      })
     }, loaded.product.sku);
   }
   if (loaded.loading) return jsx(ScreenSkeleton, {

package/dist/standalone/storefront.mjs

@@ -4993,7 +4993,7 @@ function requireErrors$1() {
     });
     exports.ErrorResponse = exports.ApiErrorBody = exports.ERROR_CODE_STATUS = exports.ErrorCode = void 0;
     const zod_1 = requireZod();
-    exports.ErrorCode = zod_1.z.enum(["invalid_request", "unauthorized", "out_of_stock", "cart_locked", "sku_not_found", "category_not_found", "amount_mismatch", "duplicate_order", "order_not_found", "order_not_cancellable", "cart_not_found", "support_ticket_not_found", "vip_invite_not_found", "vip_cart_conflict", "vip_invite_mismatch", "size_chart_not_found", "forbidden", "invalid_transition", "rate_limited", "server_error"]);
+    exports.ErrorCode = zod_1.z.enum(["invalid_request", "unauthorized", "out_of_stock", "cart_locked", "sku_not_found", "category_not_found", "amount_mismatch", "duplicate_order", "order_not_found", "order_not_cancellable", "cart_not_found", "support_ticket_not_found", "vip_invite_not_found", "vip_cart_conflict", "vip_invite_mismatch", "vip_hero_missing", "size_chart_not_found", "forbidden", "invalid_transition", "rate_limited", "server_error"]);
     exports.ERROR_CODE_STATUS = {
       invalid_request: 400,
       unauthorized: 401,
@@ -5010,6 +5010,7 @@ function requireErrors$1() {
       vip_invite_not_found: 404,
       vip_cart_conflict: 409,
       vip_invite_mismatch: 409,
+      vip_hero_missing: 422,
       size_chart_not_found: 404,
       forbidden: 403,
       invalid_transition: 409,
@@ -6252,15 +6253,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,
@@ -6600,6 +6601,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",
@@ -8082,9 +8084,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);
@@ -8308,9 +8310,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", {
@@ -8456,9 +8456,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",
@@ -9206,9 +9204,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", {
@@ -9252,9 +9248,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"),
@@ -9474,9 +9468,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"),
@@ -14142,7 +14134,7 @@ function requireErrors() {
     });
     exports.ErrorResponse = exports.ApiErrorBody = exports.ERROR_CODE_STATUS = exports.ErrorCode = void 0;
     const zod_1 = requireZod();
-    exports.ErrorCode = zod_1.z.enum(["invalid_request", "unauthorized", "out_of_stock", "cart_locked", "sku_not_found", "category_not_found", "amount_mismatch", "duplicate_order", "order_not_found", "order_not_cancellable", "cart_not_found", "support_ticket_not_found", "vip_invite_not_found", "vip_cart_conflict", "vip_invite_mismatch", "size_chart_not_found", "forbidden", "invalid_transition", "rate_limited", "server_error"]);
+    exports.ErrorCode = zod_1.z.enum(["invalid_request", "unauthorized", "out_of_stock", "cart_locked", "sku_not_found", "category_not_found", "amount_mismatch", "duplicate_order", "order_not_found", "order_not_cancellable", "cart_not_found", "support_ticket_not_found", "vip_invite_not_found", "vip_cart_conflict", "vip_invite_mismatch", "vip_hero_missing", "size_chart_not_found", "forbidden", "invalid_transition", "rate_limited", "server_error"]);
     exports.ERROR_CODE_STATUS = {
       invalid_request: 400,
       unauthorized: 401,
@@ -14159,6 +14151,7 @@ function requireErrors() {
       vip_invite_not_found: 404,
       vip_cart_conflict: 409,
       vip_invite_mismatch: 409,
+      vip_hero_missing: 422,
       size_chart_not_found: 404,
       forbidden: 403,
       invalid_transition: 409,
@@ -14902,7 +14895,7 @@ function locatorOf(segment) {
   return null;
 }
 const INVALID_LINK = /* @__PURE__ */ new Set(["invalid_request", "vip_invite_not_found", "vip_invite_mismatch"]);
-function VipLandingView({ token, onUnavailable }) {
+function VipLandingView({ token, onUnavailable, screen: screen2 = "hero" }) {
   const t = useT();
   const { api, emit } = useShop();
   const locator = locatorOf(token);
@@ -14982,18 +14975,43 @@ function VipLandingView({ token, onUnavailable }) {
   }
   return jsx(ActiveLanding, {
     token,
-    invite
+    invite,
+    screen: screen2
   });
 }
-function ActiveLanding({ token, invite }) {
+function plainFirstLine(description2) {
+  if (!description2) return null;
+  const line2 = description2.replace(/<[^>]*>/g, " ").split(/\n+/).map((l) => l.replace(/\s+/g, " ").trim()).find((l) => l.length > 0);
+  if (!line2) return null;
+  const sentence = /^.*?[.!?](?=\s|$)/.exec(line2);
+  return sentence ? sentence[0] : line2;
+}
+function heroFromProduct(product, ctaLabel) {
+  const image2 = product.media[0] ?? null;
+  return {
+    image: image2,
+    desktop_image: image2,
+    headline: product.title,
+    body: plainFirstLine(product.description),
+    cta_label: ctaLabel
+  };
+}
+function ActiveLanding({ token, invite, screen: screen2 }) {
   const t = useT();
   const toast2 = useToast();
   const { api, emit } = useShop();
-  const product = useInPlaceScreen("vipProduct");
+  const navigate = useNavigate();
   const sku = invite.items[0]?.product_sku ?? "";
   const loaded = useProduct(sku, {
     showRecommendations: false
   });
+  const productPath = `/vip/${token}/product`;
+  const heroPath = `/vip/${token}`;
+  const go = useCallback((to) => {
+    if (navigate) navigate(to);
+    else window.location.assign(to);
+  }, [navigate]);
+  const fallback = useMemo(() => loaded.product ? heroFromProduct(loaded.product, t("See more")) : null, [loaded.product, t]);
   const claim = useCallback(async (variantSku) => {
     try {
       const current2 = await api.cart.get().catch(() => null);
@@ -15036,23 +15054,21 @@ function ActiveLanding({ token, invite }) {
       toast2.show(t(treatmentFor(code).body), "critical");
     }
   }, [api, emit, invite.invite_ref, t, toast2, token]);
-  if (invite.hero && product.value === null) {
-    return jsx(VipHero, {
-      hero: invite.hero,
-      onContinue: () => product.open("1")
+  if (screen2 === "hero") {
+    const hero2 = invite.hero ?? fallback;
+    if (hero2) return jsx(VipHero, {
+      hero: hero2,
+      onContinue: () => go(productPath)
     });
-  }
-  if (loaded.product) {
+  } else if (loaded.product) {
     return jsx(ProductDetail, {
       product: loaded.product,
       inventory: loaded.inventory,
       claim,
-      ...invite.hero ? {
-        breadcrumb: jsx(VipBreadcrumb, {
-          title: loaded.product.title,
-          onHome: product.close
-        })
-      } : {}
+      breadcrumb: jsx(VipBreadcrumb, {
+        title: loaded.product.title,
+        onHome: () => go(heroPath)
+      })
     }, loaded.product.sku);
   }
   if (loaded.loading) return jsx(ScreenSkeleton, {

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.3",
+  "version": "0.29.5",
   "description": "Mountable React storefront components: catalogue, product detail and cart, mounted directly into a host DOM tree. No iframe.",
   "license": "UNLICENSED",
   "type": "module",