@nok-integration/storefront-react 0.29.3 → 0.29.4

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,
@@ -14142,7 +14143,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 +14160,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 +14904,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 +14984,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 +15063,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,
@@ -14142,7 +14143,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 +14160,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 +14904,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 +14984,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 +15063,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/package.json

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