@nok-integration/storefront-react 0.22.4 → 0.24.0

package/dist/index.d.ts

@@ -3014,6 +3014,7 @@ declare function createClient(options: ClientOptions): {
                 returned_qty?: number | undefined;
             }[];
             headline: string;
+            order_ref: string;
             totals: {
                 shipping: {
                     amount: number;
@@ -3036,7 +3037,6 @@ declare function createClient(options: ClientOptions): {
                     currency: string;
                 } | undefined;
             };
-            order_ref: string;
             placed_at: string;
             ship_to: {
                 country: string;
@@ -3111,6 +3111,7 @@ declare function createClient(options: ClientOptions): {
                 returned_qty?: number | undefined;
             }[];
             headline: string;
+            order_ref: string;
             totals: {
                 shipping: {
                     amount: number;
@@ -3133,7 +3134,6 @@ declare function createClient(options: ClientOptions): {
                     currency: string;
                 } | undefined;
             };
-            order_ref: string;
             placed_at: string;
             ship_to: {
                 country: string;
@@ -3266,13 +3266,13 @@ declare function createClient(options: ClientOptions): {
         }>;
     };
     vip: {
-        resolve: (token: string, query?: CartMarketQuery) => Promise<{
+        resolve: (locator: string | VipInviteResolveRequest, query?: CartMarketQuery) => Promise<{
             items: {
                 product_sku: string;
                 quantity: number;
             }[];
-            state: "active";
             invite_ref: string;
+            state: "active";
             recipient_name: string;
             personal_message: string | null;
             delivery_rule: "both_free" | "standard_free" | "both_paid";
@@ -3290,6 +3290,7 @@ declare function createClient(options: ClientOptions): {
             opens_at: string;
         } | {
             state: "claimed";
+            order_ref?: string | undefined;
         } | {
             state: "expired";
         } | {
@@ -4296,6 +4297,7 @@ declare const OrderDetail: z.ZodObject<{
         attributes?: Record<string, string> | undefined;
         returned_qty?: number | undefined;
     }[];
+    order_ref: string & z.BRAND<"OrderRef">;
     totals: {
         shipping: {
             amount: number;
@@ -4318,7 +4320,6 @@ declare const OrderDetail: z.ZodObject<{
             currency: string;
         } | undefined;
     };
-    order_ref: string & z.BRAND<"OrderRef">;
     placed_at: string;
     ship_to: {
         country: string;
@@ -4386,6 +4387,7 @@ declare const OrderDetail: z.ZodObject<{
         attributes?: Record<string, string> | undefined;
         returned_qty?: number | undefined;
     }[];
+    order_ref: string;
     totals: {
         shipping: {
             amount: number;
@@ -4408,7 +4410,6 @@ declare const OrderDetail: z.ZodObject<{
             currency: string;
         } | undefined;
     };
-    order_ref: string;
     placed_at: string;
     ship_to: {
         country: string;
@@ -5897,9 +5898,6 @@ export declare type ShopEvent = {
 | {
     type: 'support_requested';
     orderRef: string;
-} | {
-    type: 'help_requested';
-    inviteRef: string;
 }
 /**
 * The fan confirmed a cancellation and the engine accepted it.
@@ -6169,7 +6167,7 @@ export declare interface ShopMenuSheetProps {
  * implementation detail — see the versioning policy in the component SDK specification.
  */
 /** A storefront-relative identifier. NOT a URL expected to resolve on the host. */
-export declare type ShopRoute = '/' | `/category/${string}` | `/product/${string}` | '/cart';
+export declare type ShopRoute = '/' | `/category/${string}` | `/product/${string}` | '/cart' | `/vip/${string}`;
 
 /**
  * Request: the shopping session id and the one-time code, exactly as they arrive on the
@@ -6824,10 +6822,10 @@ export declare interface VariantSelectorProps {
     labelAttribute?: string;
 }
 
-declare const VipCartItemRequest: z.ZodObject<{
-    token: z.ZodString;
+declare const VipCartItemRequest: z.ZodUnion<[z.ZodObject<{
     sku: z.ZodString;
     qty: z.ZodNumber;
+    token: z.ZodString;
 }, "strict", z.ZodTypeAny, {
     sku: string;
     token: string;
@@ -6836,7 +6834,19 @@ declare const VipCartItemRequest: z.ZodObject<{
     sku: string;
     token: string;
     qty: number;
-}>;
+}>, z.ZodObject<{
+    sku: z.ZodString;
+    qty: z.ZodNumber;
+    invite_ref: z.ZodBranded<z.ZodString, "VipInviteRef">;
+}, "strict", z.ZodTypeAny, {
+    sku: string;
+    invite_ref: string & z.BRAND<"VipInviteRef">;
+    qty: number;
+}, {
+    sku: string;
+    invite_ref: string;
+    qty: number;
+}>]>;
 
 declare type VipCartItemRequest = z.infer<typeof VipCartItemRequest>;
 
@@ -6872,6 +6882,22 @@ export declare interface VipHeroProps {
     onContinue: () => void;
 }
 
+declare const VipInviteResolveRequest: z.ZodUnion<[z.ZodObject<{
+    token: z.ZodString;
+}, "strict", z.ZodTypeAny, {
+    token: string;
+}, {
+    token: string;
+}>, z.ZodObject<{
+    invite_ref: z.ZodBranded<z.ZodString, "VipInviteRef">;
+}, "strict", z.ZodTypeAny, {
+    invite_ref: string & z.BRAND<"VipInviteRef">;
+}, {
+    invite_ref: string;
+}>]>;
+
+declare type VipInviteResolveRequest = z.infer<typeof VipInviteResolveRequest>;
+
 export declare type VipInviteUnavailableState = Exclude<VipInviteView['state'], 'active'>;
 
 declare const VipInviteView: z.ZodDiscriminatedUnion<"state", [z.ZodObject<{
@@ -6914,8 +6940,8 @@ declare const VipInviteView: z.ZodDiscriminatedUnion<"state", [z.ZodObject<{
         desktop_video?: string | null | undefined;
     }>>>;
 }, "strip", z.ZodTypeAny, {
-    state: "active";
     invite_ref: string & z.BRAND<"VipInviteRef">;
+    state: "active";
     recipient_name: string;
     personal_message: string | null;
     delivery_rule: "both_free" | "standard_free" | "both_paid";
@@ -6933,8 +6959,8 @@ declare const VipInviteView: z.ZodDiscriminatedUnion<"state", [z.ZodObject<{
         desktop_video?: string | null | undefined;
     } | null | undefined;
 }, {
-    state: "active";
     invite_ref: string;
+    state: "active";
     recipient_name: string;
     personal_message: string | null;
     delivery_rule: "both_free" | "standard_free" | "both_paid";
@@ -6962,10 +6988,13 @@ declare const VipInviteView: z.ZodDiscriminatedUnion<"state", [z.ZodObject<{
     opens_at: string;
 }>, z.ZodObject<{
     state: z.ZodLiteral<"claimed">;
+    order_ref: z.ZodOptional<z.ZodBranded<z.ZodString, "OrderRef">>;
 }, "strip", z.ZodTypeAny, {
     state: "claimed";
+    order_ref?: (string & z.BRAND<"OrderRef">) | undefined;
 }, {
     state: "claimed";
+    order_ref?: string | undefined;
 }>, z.ZodObject<{
     state: z.ZodLiteral<"expired">;
 }, "strip", z.ZodTypeAny, {
@@ -6982,14 +7011,16 @@ declare const VipInviteView: z.ZodDiscriminatedUnion<"state", [z.ZodObject<{
 
 declare type VipInviteView = z.infer<typeof VipInviteView>;
 
-export declare function VipLandingView({ token, onUnavailable, onHelp }: VipLandingViewProps): JSX.Element;
+export declare function VipLandingView({ token, onUnavailable }: VipLandingViewProps): JSX.Element;
 
 export declare interface VipLandingViewProps {
-    /** The token from the invite link: the last path segment of the URL the recipient opened. */
+    /**
+     * The last path segment of the URL the recipient opened: the token from the invite link,
+     * or the invite reference that Reorder on a cancelled VIP order navigates to.
+     */
     token: string;
     /** Replaces the built-in screen for an invite that cannot be claimed. */
     onUnavailable?: (state: VipInviteUnavailableState) => ReactNode;
-    onHelp?: () => void;
 }
 
 /** "Why shop with us" reassurance tiles. */

package/dist/index.mjs

@@ -4507,9 +4507,11 @@ function requireVip() {
     exports.VipInviteRef = (0, ids_1.prefixedId)("vip_", "VipInviteRef");
     exports.VIP_TOKEN_PATTERN = /^[A-Za-z0-9_-]{43}$/;
     exports.VipDeliveryRule = zod_1.z.enum(["both_free", "standard_free", "both_paid"]);
-    exports.VipInviteResolveRequest = zod_1.z.object({
+    exports.VipInviteResolveRequest = zod_1.z.union([zod_1.z.object({
       token: zod_1.z.string().regex(exports.VIP_TOKEN_PATTERN)
-    }).strict();
+    }).strict(), zod_1.z.object({
+      invite_ref: exports.VipInviteRef
+    }).strict()]);
     exports.VipInviteOffer = zod_1.z.object({
       product_sku: common_1.Sku,
       quantity: zod_1.z.number().int().positive()
@@ -4535,17 +4537,24 @@ function requireVip() {
       state: zod_1.z.literal("scheduled"),
       opens_at: common_1.Timestamp
     }), zod_1.z.object({
-      state: zod_1.z.literal("claimed")
+      state: zod_1.z.literal("claimed"),
+      order_ref: ids_1.OrderRef.optional()
     }), zod_1.z.object({
       state: zod_1.z.literal("expired")
     }), zod_1.z.object({
       state: zod_1.z.literal("revoked")
     })]);
-    exports.VipCartItemRequest = zod_1.z.object({
-      token: zod_1.z.string().regex(exports.VIP_TOKEN_PATTERN),
+    const VipCartLine = {
       sku: common_1.Sku,
       qty: zod_1.z.number().int().positive().max(99)
-    }).strict();
+    };
+    exports.VipCartItemRequest = zod_1.z.union([zod_1.z.object({
+      token: zod_1.z.string().regex(exports.VIP_TOKEN_PATTERN),
+      ...VipCartLine
+    }).strict(), zod_1.z.object({
+      invite_ref: exports.VipInviteRef,
+      ...VipCartLine
+    }).strict()]);
     exports.VipClaimLine = zod_1.z.object({
       sku: common_1.Sku,
       qty: zod_1.z.number().int().positive()
@@ -5262,12 +5271,12 @@ function requireClient() {
         })
       },
       vip: {
-        resolve: (token, query = {}) => request({
+        resolve: (locator, query = {}) => request({
           method: "POST",
           path: "/vip/resolve",
-          body: {
-            token
-          },
+          body: typeof locator === "string" ? {
+            token: locator
+          } : locator,
           query: market(query),
           schema: vip_1.VipInviteView
         }),
@@ -6402,7 +6411,6 @@ const ES = {
   "Measurement unit": "Unidad de medida",
   "Need help?": "¿Necesita ayuda?",
   "Need help with your order?": "¿Necesita ayuda con su pedido?",
-  Homepage: "Inicio",
   Breadcrumb: "Ruta de navegación",
   "Show image {0} of {1}": "Ver imagen {0} de {1}",
   "Nothing left to return": "No queda nada por devolver",
@@ -8453,7 +8461,7 @@ function VipBreadcrumb({ title: title2, trail: trail2 = [], onHome }) {
           type: "button",
           className: styles$C.home,
           onClick: onHome,
-          children: t("Homepage")
+          children: t("DAZN Shop")
         })
       }), trail2.map((crumb, i) => jsxs(Fragment$1, {
         children: [jsx("li", {
@@ -8820,6 +8828,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
   const emit = useShopEvent();
   const navigate = useNavigate();
   const toast2 = useToast();
+  useSetScreenTitle(order?.vip ? t("DAZN Shop") : void 0, "none");
   const load = useCallback(async () => {
     setState("loading");
     try {
@@ -8899,6 +8908,10 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
       onReorder();
       return;
     }
+    if (current2.vip) {
+      navigate?.(`/vip/${encodeURIComponent(current2.vip.invite_ref)}`);
+      return;
+    }
     setReordering(true);
     try {
       let added = 0;
@@ -8934,7 +8947,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
           className: styles$A.cancelledMeta,
           children: t("Order #{0} · Placed {1}", shortRef$1(order.order_ref), placedOn(order.placed_at, locale))
         })]
-      }), !order.vip && jsx(Button, {
+      }), jsx(Button, {
         variant: "primary",
         fullWidth: true,
         loading: reordering,
@@ -9157,6 +9170,7 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone, onCont
   const { api } = useShop();
   const locale = useLocale(localeProp);
   const [order, setOrder] = useState(null);
+  useSetScreenTitle(order?.vip ? t("DAZN Shop") : void 0, "none");
   const [state, setState] = useState("loading");
   const [errorCode, setErrorCode] = useState(void 0);
   const load = useCallback(async () => {
@@ -12478,7 +12492,15 @@ function VipHero({ hero: hero2, onContinue }) {
     })
   });
 }
-function VipLandingView({ token, onUnavailable, onHelp }) {
+const INVITE_REF = /^vip_[A-Za-z0-9._-]+$/;
+function locatorOf(segment) {
+  return INVITE_REF.test(segment) && segment.length !== 43 ? {
+    invite_ref: segment
+  } : {
+    token: segment
+  };
+}
+function VipLandingView({ token, onUnavailable }) {
   const t = useT();
   const { api, emit } = useShop();
   const [load, setLoad] = useState({
@@ -12486,12 +12508,13 @@ function VipLandingView({ token, onUnavailable, onHelp }) {
   });
   const emitRef = useRef(emit);
   emitRef.current = emit;
+  useSetScreenTitle(t("DAZN Shop"), "none");
   useEffect(() => {
     let live = true;
     setLoad({
       status: "loading"
     });
-    api.vip.resolve(token).then((invite2) => {
+    api.vip.resolve(locatorOf(token)).then((invite2) => {
       if (live) setLoad({
         status: "done",
         invite: invite2
@@ -12526,6 +12549,11 @@ function VipLandingView({ token, onUnavailable, onHelp }) {
     });
   }
   const { invite } = load;
+  if (invite.state === "claimed" && invite.order_ref) {
+    return jsx(OrderTrackingView, {
+      orderRef: invite.order_ref
+    });
+  }
   if (invite.state !== "active") {
     if (onUnavailable) return jsx(Fragment, {
       children: onUnavailable(invite.state)
@@ -12541,13 +12569,10 @@ function VipLandingView({ token, onUnavailable, onHelp }) {
   }
   return jsx(ActiveLanding, {
     token,
-    invite,
-    ...onHelp ? {
-      onHelp
-    } : {}
+    invite
   });
 }
-function ActiveLanding({ token, invite, onHelp }) {
+function ActiveLanding({ token, invite }) {
   const t = useT();
   const toast2 = useToast();
   const { api, emit } = useShop();
@@ -12563,7 +12588,7 @@ function ActiveLanding({ token, invite, onHelp }) {
         for (const line2 of current2.items) await api.cart.removeItem(line2.sku);
       }
       const cart2 = await api.vip.addToCart({
-        token,
+        ...locatorOf(token),
         sku: variantSku,
         qty: 1
       });
@@ -12612,16 +12637,7 @@ function ActiveLanding({ token, invite, onHelp }) {
           title: loaded.product.title,
           onHome: product.close
         })
-      } : {},
-      help: jsx(VipHelpLink, {
-        onHelp: () => {
-          emit({
-            type: "help_requested",
-            inviteRef: invite.invite_ref
-          });
-          onHelp?.();
-        }
-      })
+      } : {}
     }, loaded.product.sku);
   }
   if (loaded.loading) return jsx(ScreenSkeleton, {
@@ -13498,7 +13514,6 @@ function toGa4Event(event) {
     case "ready":
     case "navigate":
     case "support_requested":
-    case "help_requested":
     case "order_cancellation_requested":
     case "reorder_requested":
     case "session_required":

package/dist/standalone/storefront.mjs

@@ -4507,9 +4507,11 @@ function requireVip() {
     exports.VipInviteRef = (0, ids_1.prefixedId)("vip_", "VipInviteRef");
     exports.VIP_TOKEN_PATTERN = /^[A-Za-z0-9_-]{43}$/;
     exports.VipDeliveryRule = zod_1.z.enum(["both_free", "standard_free", "both_paid"]);
-    exports.VipInviteResolveRequest = zod_1.z.object({
+    exports.VipInviteResolveRequest = zod_1.z.union([zod_1.z.object({
       token: zod_1.z.string().regex(exports.VIP_TOKEN_PATTERN)
-    }).strict();
+    }).strict(), zod_1.z.object({
+      invite_ref: exports.VipInviteRef
+    }).strict()]);
     exports.VipInviteOffer = zod_1.z.object({
       product_sku: common_1.Sku,
       quantity: zod_1.z.number().int().positive()
@@ -4535,17 +4537,24 @@ function requireVip() {
       state: zod_1.z.literal("scheduled"),
       opens_at: common_1.Timestamp
     }), zod_1.z.object({
-      state: zod_1.z.literal("claimed")
+      state: zod_1.z.literal("claimed"),
+      order_ref: ids_1.OrderRef.optional()
     }), zod_1.z.object({
       state: zod_1.z.literal("expired")
     }), zod_1.z.object({
       state: zod_1.z.literal("revoked")
     })]);
-    exports.VipCartItemRequest = zod_1.z.object({
-      token: zod_1.z.string().regex(exports.VIP_TOKEN_PATTERN),
+    const VipCartLine = {
       sku: common_1.Sku,
       qty: zod_1.z.number().int().positive().max(99)
-    }).strict();
+    };
+    exports.VipCartItemRequest = zod_1.z.union([zod_1.z.object({
+      token: zod_1.z.string().regex(exports.VIP_TOKEN_PATTERN),
+      ...VipCartLine
+    }).strict(), zod_1.z.object({
+      invite_ref: exports.VipInviteRef,
+      ...VipCartLine
+    }).strict()]);
     exports.VipClaimLine = zod_1.z.object({
       sku: common_1.Sku,
       qty: zod_1.z.number().int().positive()
@@ -5262,12 +5271,12 @@ function requireClient() {
         })
       },
       vip: {
-        resolve: (token, query = {}) => request({
+        resolve: (locator, query = {}) => request({
           method: "POST",
           path: "/vip/resolve",
-          body: {
-            token
-          },
+          body: typeof locator === "string" ? {
+            token: locator
+          } : locator,
           query: market(query),
           schema: vip_1.VipInviteView
         }),
@@ -6402,7 +6411,6 @@ const ES = {
   "Measurement unit": "Unidad de medida",
   "Need help?": "¿Necesita ayuda?",
   "Need help with your order?": "¿Necesita ayuda con su pedido?",
-  Homepage: "Inicio",
   Breadcrumb: "Ruta de navegación",
   "Show image {0} of {1}": "Ver imagen {0} de {1}",
   "Nothing left to return": "No queda nada por devolver",
@@ -8453,7 +8461,7 @@ function VipBreadcrumb({ title: title2, trail: trail2 = [], onHome }) {
           type: "button",
           className: styles$C.home,
           onClick: onHome,
-          children: t("Homepage")
+          children: t("DAZN Shop")
         })
       }), trail2.map((crumb, i) => jsxs(Fragment$1, {
         children: [jsx("li", {
@@ -8820,6 +8828,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
   const emit = useShopEvent();
   const navigate = useNavigate();
   const toast2 = useToast();
+  useSetScreenTitle(order?.vip ? t("DAZN Shop") : void 0, "none");
   const load = useCallback(async () => {
     setState("loading");
     try {
@@ -8899,6 +8908,10 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
       onReorder();
       return;
     }
+    if (current2.vip) {
+      navigate?.(`/vip/${encodeURIComponent(current2.vip.invite_ref)}`);
+      return;
+    }
     setReordering(true);
     try {
       let added = 0;
@@ -8934,7 +8947,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
           className: styles$A.cancelledMeta,
           children: t("Order #{0} · Placed {1}", shortRef$1(order.order_ref), placedOn(order.placed_at, locale))
         })]
-      }), !order.vip && jsx(Button, {
+      }), jsx(Button, {
         variant: "primary",
         fullWidth: true,
         loading: reordering,
@@ -9157,6 +9170,7 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone, onCont
   const { api } = useShop();
   const locale = useLocale(localeProp);
   const [order, setOrder] = useState(null);
+  useSetScreenTitle(order?.vip ? t("DAZN Shop") : void 0, "none");
   const [state, setState] = useState("loading");
   const [errorCode, setErrorCode] = useState(void 0);
   const load = useCallback(async () => {
@@ -12478,7 +12492,15 @@ function VipHero({ hero: hero2, onContinue }) {
     })
   });
 }
-function VipLandingView({ token, onUnavailable, onHelp }) {
+const INVITE_REF = /^vip_[A-Za-z0-9._-]+$/;
+function locatorOf(segment) {
+  return INVITE_REF.test(segment) && segment.length !== 43 ? {
+    invite_ref: segment
+  } : {
+    token: segment
+  };
+}
+function VipLandingView({ token, onUnavailable }) {
   const t = useT();
   const { api, emit } = useShop();
   const [load, setLoad] = useState({
@@ -12486,12 +12508,13 @@ function VipLandingView({ token, onUnavailable, onHelp }) {
   });
   const emitRef = useRef(emit);
   emitRef.current = emit;
+  useSetScreenTitle(t("DAZN Shop"), "none");
   useEffect(() => {
     let live = true;
     setLoad({
       status: "loading"
     });
-    api.vip.resolve(token).then((invite2) => {
+    api.vip.resolve(locatorOf(token)).then((invite2) => {
       if (live) setLoad({
         status: "done",
         invite: invite2
@@ -12526,6 +12549,11 @@ function VipLandingView({ token, onUnavailable, onHelp }) {
     });
   }
   const { invite } = load;
+  if (invite.state === "claimed" && invite.order_ref) {
+    return jsx(OrderTrackingView, {
+      orderRef: invite.order_ref
+    });
+  }
   if (invite.state !== "active") {
     if (onUnavailable) return jsx(Fragment, {
       children: onUnavailable(invite.state)
@@ -12541,13 +12569,10 @@ function VipLandingView({ token, onUnavailable, onHelp }) {
   }
   return jsx(ActiveLanding, {
     token,
-    invite,
-    ...onHelp ? {
-      onHelp
-    } : {}
+    invite
   });
 }
-function ActiveLanding({ token, invite, onHelp }) {
+function ActiveLanding({ token, invite }) {
   const t = useT();
   const toast2 = useToast();
   const { api, emit } = useShop();
@@ -12563,7 +12588,7 @@ function ActiveLanding({ token, invite, onHelp }) {
         for (const line2 of current2.items) await api.cart.removeItem(line2.sku);
       }
       const cart2 = await api.vip.addToCart({
-        token,
+        ...locatorOf(token),
         sku: variantSku,
         qty: 1
       });
@@ -12612,16 +12637,7 @@ function ActiveLanding({ token, invite, onHelp }) {
           title: loaded.product.title,
           onHome: product.close
         })
-      } : {},
-      help: jsx(VipHelpLink, {
-        onHelp: () => {
-          emit({
-            type: "help_requested",
-            inviteRef: invite.invite_ref
-          });
-          onHelp?.();
-        }
-      })
+      } : {}
     }, loaded.product.sku);
   }
   if (loaded.loading) return jsx(ScreenSkeleton, {
@@ -13498,7 +13514,6 @@ function toGa4Event(event) {
     case "ready":
     case "navigate":
     case "support_requested":
-    case "help_requested":
     case "order_cancellation_requested":
     case "reorder_requested":
     case "session_required":

package/package.json

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