@nok-integration/storefront-react 0.20.15 → 0.20.16

package/dist/index.d.ts

@@ -282,8 +282,8 @@ export declare interface CartLineItemProps {
  * should send it here too — the pair is what keeps the two surfaces agreeing.
  *
  * The market belongs on the validated shopping session rather than on the query string,
- * and moves there when that contract exists. This is the interim source,
- * not the intended one.
+ * and moves there when that contract exists. This is the interim source, not the intended
+ * one.
  */
 declare const CartMarketQuery: z.ZodObject<{
     country: z.ZodOptional<z.ZodString>;
@@ -3272,26 +3272,26 @@ declare const CreateReturnRequest: z.ZodObject<{
     items: z.ZodArray<z.ZodObject<{
         line_ref: z.ZodString;
         qty: z.ZodNumber;
-        reason: z.ZodEnum<["too_large", "too_small", "arrived_too_late", "item_damaged", "not_as_described", "changed_my_mind"]>;
+        reason: z.ZodEnum<["too_large", "too_small", "arrived_too_late", "item_damaged", "not_as_described"]>;
     }, "strip", z.ZodTypeAny, {
         qty: number;
-        reason: "too_small" | "changed_my_mind" | "too_large" | "arrived_too_late" | "item_damaged" | "not_as_described";
+        reason: "too_small" | "too_large" | "arrived_too_late" | "item_damaged" | "not_as_described";
         line_ref: string;
     }, {
         qty: number;
-        reason: "too_small" | "changed_my_mind" | "too_large" | "arrived_too_late" | "item_damaged" | "not_as_described";
+        reason: "too_small" | "too_large" | "arrived_too_late" | "item_damaged" | "not_as_described";
         line_ref: string;
     }>, "many">;
 }, "strict", z.ZodTypeAny, {
     items: {
         qty: number;
-        reason: "too_small" | "changed_my_mind" | "too_large" | "arrived_too_late" | "item_damaged" | "not_as_described";
+        reason: "too_small" | "too_large" | "arrived_too_late" | "item_damaged" | "not_as_described";
         line_ref: string;
     }[];
 }, {
     items: {
         qty: number;
-        reason: "too_small" | "changed_my_mind" | "too_large" | "arrived_too_late" | "item_damaged" | "not_as_described";
+        reason: "too_small" | "too_large" | "arrived_too_late" | "item_damaged" | "not_as_described";
         line_ref: string;
     }[];
 }>;
@@ -3518,8 +3518,20 @@ export declare function ExploreList({ title, links }: {
     links: ExploreLink[];
 }): JSX.Element;
 
-/** Why an item is coming back, from Figma's `Reason for return` sheet. */
-declare const FanReturnReason: z.ZodEnum<["too_large", "too_small", "arrived_too_late", "item_damaged", "not_as_described", "changed_my_mind"]>;
+/**
+ * Why an item is coming back — what a fan may CHOOSE, from Figma's `Reason for return`
+ * sheet, less one.
+ *
+ * **`changed_my_mind` was withdrawn on DAZN's instruction**, and this is a documented
+ * departure from the frame rather than a drift from it. It stays available on
+ * the CANCEL sheet, where it is the commonest honest answer; on a return it is the one
+ * reason that says nothing a warehouse or a buyer can act on.
+ *
+ * Narrowing what a fan may send is the whole point, so this is the enum the request
+ * validates against. Reading a return already recorded is a different question — see
+ * {@link RecordedReturnReason}.
+ */
+declare const FanReturnReason: z.ZodEnum<["too_large", "too_small", "arrived_too_late", "item_damaged", "not_as_described"]>;
 
 declare type FanReturnReason = z.infer<typeof FanReturnReason>;
 
@@ -5276,6 +5288,12 @@ export declare function resolveSku(variants: ProductVariant[], size: string | nu
  * Ordered by how often a fan picks them rather than alphabetically, which is the design's
  * choice and not ours to re-sort: the two sizing reasons lead because sizing is what most
  * clothing returns are about.
+ *
+ * **Five, not the frame's six.** `changed_my_mind` was withdrawn on DAZN's instruction —
+ * a documented departure, not a drift. It stays on the CANCEL sheet, where it
+ * is the commonest honest answer; on a return it is the one reason that tells neither the
+ * warehouse nor the buyer anything they can act on. Returns already reported under it are
+ * unaffected and still read — the contract keeps it as a recorded value.
  */
 export declare const RETURN_REASONS: readonly ReasonOption<FanReturnReason>[];
 
@@ -5539,14 +5557,14 @@ export declare interface ReturnLabelViewProps {
 declare const ReturnRequestItem: z.ZodObject<{
     line_ref: z.ZodString;
     qty: z.ZodNumber;
-    reason: z.ZodEnum<["too_large", "too_small", "arrived_too_late", "item_damaged", "not_as_described", "changed_my_mind"]>;
+    reason: z.ZodEnum<["too_large", "too_small", "arrived_too_late", "item_damaged", "not_as_described"]>;
 }, "strip", z.ZodTypeAny, {
     qty: number;
-    reason: "too_small" | "changed_my_mind" | "too_large" | "arrived_too_late" | "item_damaged" | "not_as_described";
+    reason: "too_small" | "too_large" | "arrived_too_late" | "item_damaged" | "not_as_described";
     line_ref: string;
 }, {
     qty: number;
-    reason: "too_small" | "changed_my_mind" | "too_large" | "arrived_too_late" | "item_damaged" | "not_as_described";
+    reason: "too_small" | "too_large" | "arrived_too_late" | "item_damaged" | "not_as_described";
     line_ref: string;
 }>;
 

package/dist/index.mjs

@@ -4695,7 +4695,7 @@ function requireOrderTracking() {
     Object.defineProperty(exports, "__esModule", {
       value: true
     });
-    exports.ReturnDetail = exports.ReturnItem = exports.ReturnProgressEntry = exports.CreateReturnRequest = exports.ReturnRequestItem = exports.FanReturnReason = exports.RequestCancellationRequest = exports.FanCancelReason = exports.OrderDetail = exports.ReturnSummary = exports.OrderList = exports.ReturnSummaryItem = exports.OrderSummaryItem = exports.ReturnOutcome = exports.ReturnStatus = exports.OrderItem = exports.OrderTracking = exports.OrderProgressEntry = exports.OrderProgressStep = void 0;
+    exports.ReturnDetail = exports.ReturnItem = exports.ReturnProgressEntry = exports.CreateReturnRequest = exports.ReturnRequestItem = exports.RecordedReturnReason = exports.FanReturnReason = exports.RequestCancellationRequest = exports.FanCancelReason = exports.OrderDetail = exports.ReturnSummary = exports.OrderList = exports.ReturnSummaryItem = exports.OrderSummaryItem = exports.ReturnOutcome = exports.ReturnStatus = exports.OrderItem = exports.OrderTracking = exports.OrderProgressEntry = exports.OrderProgressStep = void 0;
     const zod_1 = requireZod();
     const money_1 = requireMoney();
     const ids_1 = requireIds();
@@ -4786,7 +4786,8 @@ function requireOrderTracking() {
     exports.RequestCancellationRequest = zod_1.z.object({
       reason: exports.FanCancelReason
     }).strict();
-    exports.FanReturnReason = zod_1.z.enum(["too_large", "too_small", "arrived_too_late", "item_damaged", "not_as_described", "changed_my_mind"]);
+    exports.FanReturnReason = zod_1.z.enum(["too_large", "too_small", "arrived_too_late", "item_damaged", "not_as_described"]);
+    exports.RecordedReturnReason = zod_1.z.enum([...exports.FanReturnReason.options, "changed_my_mind"]);
     exports.ReturnRequestItem = zod_1.z.object({
       line_ref: zod_1.z.string().min(1),
       qty: zod_1.z.number().int().positive(),
@@ -4805,7 +4806,7 @@ function requireOrderTracking() {
       line_ref: zod_1.z.string().min(1),
       sku: common_1.Sku,
       qty: zod_1.z.number().int().positive(),
-      reason: exports.FanReturnReason,
+      reason: exports.RecordedReturnReason,
       unit_price: money_1.Money,
       compare_at_unit_price: money_1.Money.optional(),
       title: zod_1.z.string().optional(),
@@ -5728,7 +5729,7 @@ const neutral$2 = "_neutral_1bagf_12";
 const success$1 = "_success_1bagf_17";
 const critical$2 = "_critical_1bagf_22";
 const promo = "_promo_1bagf_27";
-const styles$R = {
+const styles$S = {
   badge: badge$5,
   neutral: neutral$2,
   success: success$1,
@@ -5737,39 +5738,42 @@ const styles$R = {
 };
 function Badge({ tone = "neutral", children }) {
   return jsx("span", {
-    className: [styles$R.badge, styles$R[tone]].join(" "),
+    className: [styles$S.badge, styles$S[tone]].join(" "),
     children
   });
 }
-const button$1 = "_button_17pvl_1";
-const fullWidth = "_fullWidth_17pvl_25";
-const primary = "_primary_17pvl_29";
-const secondary = "_secondary_17pvl_34";
-const ghost = "_ghost_17pvl_40";
-const spinner = "_spinner_17pvl_83";
-const spin = "_spin_17pvl_83";
-const styles$Q = {
+const button$1 = "_button_ci424_1";
+const fullWidth = "_fullWidth_ci424_25";
+const primary = "_primary_ci424_29";
+const secondary = "_secondary_ci424_34";
+const ghost = "_ghost_ci424_40";
+const styles$R = {
   button: button$1,
   fullWidth,
   primary,
   secondary,
-  ghost,
-  spinner,
-  spin
+  ghost
+};
+const spinner = "_spinner_1rueh_5";
+const styles$Q = {
+  spinner
 };
+function Spinner({ className }) {
+  return jsx("span", {
+    className: [styles$Q.spinner, className ?? ""].filter(Boolean).join(" "),
+    "aria-hidden": "true"
+  });
+}
 const Button = forwardRef(function Button2({ variant = "primary", loading = false, fullWidth: fullWidth2 = false, disabled: disabled2, children, className, type = "button", ...rest }, ref) {
   const isDisabled = disabled2 || loading;
   return jsxs("button", {
     ref,
     type,
-    className: [styles$Q.button, styles$Q[variant], fullWidth2 ? styles$Q.fullWidth : "", className ?? ""].filter(Boolean).join(" "),
+    className: [styles$R.button, styles$R[variant], fullWidth2 ? styles$R.fullWidth : "", className ?? ""].filter(Boolean).join(" "),
     disabled: isDisabled,
     "aria-busy": loading || void 0,
     ...rest,
-    children: [loading && jsx("span", {
-      className: styles$Q.spinner,
-      "aria-hidden": "true"
-    }), jsx("span", {
+    children: [loading && jsx(Spinner, {}), jsx("span", {
       children
     })]
   });
@@ -6160,6 +6164,7 @@ const ES = {
   "Your items will show up here once you've added to your cart.": "Sus artículos aparecerán aquí cuando los añada a la cesta.",
   "Complete your DAZN sign-up to check out. Your cart is saved.": "Complete su registro en DAZN para finalizar la compra. Su cesta está guardada.",
   "Your orders will show up here once you've shopped.": "Sus pedidos aparecerán aquí cuando haya comprado.",
+  "Your return label is not ready yet. Try again in a moment.": "Tu etiqueta de devolución todavía no está lista. Vuelve a intentarlo dentro de un momento.",
   "We'll let you know": "Le avisaremos",
   "{0} — as soon as it is back": "{0} — en cuanto vuelva a estar disponible",
   "Size {0}": "Talla {0}",
@@ -7583,9 +7588,6 @@ const RETURN_REASONS = [{
 }, {
   value: "not_as_described",
   label: "Item doesn't match description"
-}, {
-  value: "changed_my_mind",
-  label: "Changed my mind"
 }];
 const REASON_LABEL = new Map(RETURN_REASONS.map((r) => [r.value, r.label]));
 function unitsLeft(item2) {
@@ -7746,8 +7748,61 @@ const styles$A = {
   download,
   note: note$1
 };
+const PREPARE_TIMEOUT_MS = 6e4;
+function useLabelDownload(labelUrl) {
+  const [preparing, setPreparing] = useState(false);
+  const [unavailable, setUnavailable] = useState(false);
+  const [ready, setReady] = useState(false);
+  const live = useRef(true);
+  useEffect(() => {
+    live.current = true;
+    return () => {
+      live.current = false;
+    };
+  }, []);
+  const onDownload = useCallback((event) => {
+    if (!labelUrl || ready) return;
+    if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0) {
+      return;
+    }
+    event.preventDefault();
+    if (preparing) return;
+    setUnavailable(false);
+    setPreparing(true);
+    const until = Date.now() + PREPARE_TIMEOUT_MS;
+    void (async () => {
+      for (; ; ) {
+        let ok = false;
+        try {
+          ok = (await fetch(labelUrl, {
+            method: "HEAD"
+          })).ok;
+        } catch {
+        }
+        if (!live.current) return;
+        if (ok) {
+          setPreparing(false);
+          setReady(true);
+          window.location.href = labelUrl;
+          return;
+        }
+        if (Date.now() >= until) break;
+        await new Promise((resolve) => setTimeout(resolve, 1e3));
+        if (!live.current) return;
+      }
+      setPreparing(false);
+      setUnavailable(true);
+    })();
+  }, [labelUrl, preparing, ready]);
+  return {
+    preparing,
+    unavailable,
+    onDownload
+  };
+}
 function ReturnLabelView({ ret, onDone }) {
   const t = useT();
+  const { preparing, unavailable, onDownload } = useLabelDownload(ret.label_url);
   return jsxs("div", {
     className: styles$A.page,
     children: [jsxs("div", {
@@ -7788,10 +7843,17 @@ function ReturnLabelView({ ret, onDone }) {
             href: ret.label_url,
             target: "_blank",
             rel: "noopener noreferrer",
-            children: [t("Download return label"), jsx("span", {
+            onClick: onDownload,
+            "aria-busy": preparing || void 0,
+            "aria-disabled": preparing || void 0,
+            children: [preparing && jsx(Spinner, {}), t("Download return label"), jsx("span", {
               className: "visually-hidden",
               children: ` ${t("(opens in a new tab)")}`
             })]
+          }), unavailable && jsx("p", {
+            className: styles$A.note,
+            role: "status",
+            children: t("Your return label is not ready yet. Try again in a moment.")
           }), ret.label_email && jsxs("p", {
             className: styles$A.note,
             children: [t("You’ll receive a shipping label PDF to your email as well."), jsx("br", {}), ret.label_email]
@@ -8150,7 +8212,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
   useEffect(() => {
     void load();
   }, [load]);
-  const cancelled = order?.status === "cancelled";
+  const cancelled = state === "ready" && order?.status === "cancelled";
   const cancelledPage = useRef(null);
   useBrowserLayoutEffect(() => {
     if (!cancelled) return;
@@ -8784,6 +8846,7 @@ function ReturnCard({ ret, locale, onOpen }) {
   });
 }
 function ReturnThumbnails({ ret }) {
+  const t = useT();
   const images = ret.images ?? [];
   const hidden = ret.item_count - TILES + 1;
   const overflow = images.length >= TILES && hidden > 1 ? hidden : 0;
@@ -8815,7 +8878,7 @@ function ReturnThumbnails({ ret }) {
             children: ["+", overflow]
           }), jsx("span", {
             className: "visually-hidden",
-            children: `and ${overflow} more items`
+            children: t("and {0} more items", overflow)
           })]
         })]
       }, `${src}-${i}`);
@@ -8823,6 +8886,7 @@ function ReturnThumbnails({ ret }) {
   });
 }
 function OrderCard({ order, locale, onOpen }) {
+  const t = useT();
   const body3 = jsxs(Fragment, {
     children: [jsxs("div", {
       className: styles$v.head,
@@ -8830,7 +8894,7 @@ function OrderCard({ order, locale, onOpen }) {
         className: styles$v.heading,
         children: [jsx("span", {
           className: styles$v.title,
-          children: `Order #${shortRef(order.order_ref)}`
+          children: t("Order #{0}", shortRef(order.order_ref))
         }), jsx("span", {
           className: styles$v.date,
           children: formatPlaced(order.placed_at, locale)
@@ -8861,6 +8925,7 @@ function OrderCard({ order, locale, onOpen }) {
   });
 }
 function Thumbnails({ order }) {
+  const t = useT();
   const images = order.images ?? (order.image ? [order.image] : []);
   const hidden = order.item_count - TILES + 1;
   const overflow = images.length >= TILES && hidden > 1 ? hidden : 0;
@@ -8892,7 +8957,7 @@ function Thumbnails({ order }) {
             children: ["+", overflow]
           }), jsx("span", {
             className: "visually-hidden",
-            children: `and ${overflow} more items`
+            children: t("and {0} more items", overflow)
           })]
         })]
       }, `${src}-${i}`);
@@ -10480,7 +10545,7 @@ function ColorSelector({ colours, selected: selected2, onSelect }) {
           }), lowStock2 && jsx("span", {
             className: styles$f.stockBadge,
             "aria-hidden": "true",
-            children: `${c.remaining} left`
+            children: t("{0} left", c.remaining)
           })]
         }, c.value);
       })

package/dist/standalone/storefront.mjs

@@ -4695,7 +4695,7 @@ function requireOrderTracking() {
     Object.defineProperty(exports, "__esModule", {
       value: true
     });
-    exports.ReturnDetail = exports.ReturnItem = exports.ReturnProgressEntry = exports.CreateReturnRequest = exports.ReturnRequestItem = exports.FanReturnReason = exports.RequestCancellationRequest = exports.FanCancelReason = exports.OrderDetail = exports.ReturnSummary = exports.OrderList = exports.ReturnSummaryItem = exports.OrderSummaryItem = exports.ReturnOutcome = exports.ReturnStatus = exports.OrderItem = exports.OrderTracking = exports.OrderProgressEntry = exports.OrderProgressStep = void 0;
+    exports.ReturnDetail = exports.ReturnItem = exports.ReturnProgressEntry = exports.CreateReturnRequest = exports.ReturnRequestItem = exports.RecordedReturnReason = exports.FanReturnReason = exports.RequestCancellationRequest = exports.FanCancelReason = exports.OrderDetail = exports.ReturnSummary = exports.OrderList = exports.ReturnSummaryItem = exports.OrderSummaryItem = exports.ReturnOutcome = exports.ReturnStatus = exports.OrderItem = exports.OrderTracking = exports.OrderProgressEntry = exports.OrderProgressStep = void 0;
     const zod_1 = requireZod();
     const money_1 = requireMoney();
     const ids_1 = requireIds();
@@ -4786,7 +4786,8 @@ function requireOrderTracking() {
     exports.RequestCancellationRequest = zod_1.z.object({
       reason: exports.FanCancelReason
     }).strict();
-    exports.FanReturnReason = zod_1.z.enum(["too_large", "too_small", "arrived_too_late", "item_damaged", "not_as_described", "changed_my_mind"]);
+    exports.FanReturnReason = zod_1.z.enum(["too_large", "too_small", "arrived_too_late", "item_damaged", "not_as_described"]);
+    exports.RecordedReturnReason = zod_1.z.enum([...exports.FanReturnReason.options, "changed_my_mind"]);
     exports.ReturnRequestItem = zod_1.z.object({
       line_ref: zod_1.z.string().min(1),
       qty: zod_1.z.number().int().positive(),
@@ -4805,7 +4806,7 @@ function requireOrderTracking() {
       line_ref: zod_1.z.string().min(1),
       sku: common_1.Sku,
       qty: zod_1.z.number().int().positive(),
-      reason: exports.FanReturnReason,
+      reason: exports.RecordedReturnReason,
       unit_price: money_1.Money,
       compare_at_unit_price: money_1.Money.optional(),
       title: zod_1.z.string().optional(),
@@ -5728,7 +5729,7 @@ const neutral$2 = "_neutral_1bagf_12";
 const success$1 = "_success_1bagf_17";
 const critical$2 = "_critical_1bagf_22";
 const promo = "_promo_1bagf_27";
-const styles$R = {
+const styles$S = {
   badge: badge$5,
   neutral: neutral$2,
   success: success$1,
@@ -5737,39 +5738,42 @@ const styles$R = {
 };
 function Badge({ tone = "neutral", children }) {
   return jsx("span", {
-    className: [styles$R.badge, styles$R[tone]].join(" "),
+    className: [styles$S.badge, styles$S[tone]].join(" "),
     children
   });
 }
-const button$1 = "_button_17pvl_1";
-const fullWidth = "_fullWidth_17pvl_25";
-const primary = "_primary_17pvl_29";
-const secondary = "_secondary_17pvl_34";
-const ghost = "_ghost_17pvl_40";
-const spinner = "_spinner_17pvl_83";
-const spin = "_spin_17pvl_83";
-const styles$Q = {
+const button$1 = "_button_ci424_1";
+const fullWidth = "_fullWidth_ci424_25";
+const primary = "_primary_ci424_29";
+const secondary = "_secondary_ci424_34";
+const ghost = "_ghost_ci424_40";
+const styles$R = {
   button: button$1,
   fullWidth,
   primary,
   secondary,
-  ghost,
-  spinner,
-  spin
+  ghost
+};
+const spinner = "_spinner_1rueh_5";
+const styles$Q = {
+  spinner
 };
+function Spinner({ className }) {
+  return jsx("span", {
+    className: [styles$Q.spinner, className ?? ""].filter(Boolean).join(" "),
+    "aria-hidden": "true"
+  });
+}
 const Button = forwardRef(function Button2({ variant = "primary", loading = false, fullWidth: fullWidth2 = false, disabled: disabled2, children, className, type = "button", ...rest }, ref) {
   const isDisabled = disabled2 || loading;
   return jsxs("button", {
     ref,
     type,
-    className: [styles$Q.button, styles$Q[variant], fullWidth2 ? styles$Q.fullWidth : "", className ?? ""].filter(Boolean).join(" "),
+    className: [styles$R.button, styles$R[variant], fullWidth2 ? styles$R.fullWidth : "", className ?? ""].filter(Boolean).join(" "),
     disabled: isDisabled,
     "aria-busy": loading || void 0,
     ...rest,
-    children: [loading && jsx("span", {
-      className: styles$Q.spinner,
-      "aria-hidden": "true"
-    }), jsx("span", {
+    children: [loading && jsx(Spinner, {}), jsx("span", {
       children
     })]
   });
@@ -6160,6 +6164,7 @@ const ES = {
   "Your items will show up here once you've added to your cart.": "Sus artículos aparecerán aquí cuando los añada a la cesta.",
   "Complete your DAZN sign-up to check out. Your cart is saved.": "Complete su registro en DAZN para finalizar la compra. Su cesta está guardada.",
   "Your orders will show up here once you've shopped.": "Sus pedidos aparecerán aquí cuando haya comprado.",
+  "Your return label is not ready yet. Try again in a moment.": "Tu etiqueta de devolución todavía no está lista. Vuelve a intentarlo dentro de un momento.",
   "We'll let you know": "Le avisaremos",
   "{0} — as soon as it is back": "{0} — en cuanto vuelva a estar disponible",
   "Size {0}": "Talla {0}",
@@ -7583,9 +7588,6 @@ const RETURN_REASONS = [{
 }, {
   value: "not_as_described",
   label: "Item doesn't match description"
-}, {
-  value: "changed_my_mind",
-  label: "Changed my mind"
 }];
 const REASON_LABEL = new Map(RETURN_REASONS.map((r) => [r.value, r.label]));
 function unitsLeft(item2) {
@@ -7746,8 +7748,61 @@ const styles$A = {
   download,
   note: note$1
 };
+const PREPARE_TIMEOUT_MS = 6e4;
+function useLabelDownload(labelUrl) {
+  const [preparing, setPreparing] = useState(false);
+  const [unavailable, setUnavailable] = useState(false);
+  const [ready, setReady] = useState(false);
+  const live = useRef(true);
+  useEffect(() => {
+    live.current = true;
+    return () => {
+      live.current = false;
+    };
+  }, []);
+  const onDownload = useCallback((event) => {
+    if (!labelUrl || ready) return;
+    if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0) {
+      return;
+    }
+    event.preventDefault();
+    if (preparing) return;
+    setUnavailable(false);
+    setPreparing(true);
+    const until = Date.now() + PREPARE_TIMEOUT_MS;
+    void (async () => {
+      for (; ; ) {
+        let ok = false;
+        try {
+          ok = (await fetch(labelUrl, {
+            method: "HEAD"
+          })).ok;
+        } catch {
+        }
+        if (!live.current) return;
+        if (ok) {
+          setPreparing(false);
+          setReady(true);
+          window.location.href = labelUrl;
+          return;
+        }
+        if (Date.now() >= until) break;
+        await new Promise((resolve) => setTimeout(resolve, 1e3));
+        if (!live.current) return;
+      }
+      setPreparing(false);
+      setUnavailable(true);
+    })();
+  }, [labelUrl, preparing, ready]);
+  return {
+    preparing,
+    unavailable,
+    onDownload
+  };
+}
 function ReturnLabelView({ ret, onDone }) {
   const t = useT();
+  const { preparing, unavailable, onDownload } = useLabelDownload(ret.label_url);
   return jsxs("div", {
     className: styles$A.page,
     children: [jsxs("div", {
@@ -7788,10 +7843,17 @@ function ReturnLabelView({ ret, onDone }) {
             href: ret.label_url,
             target: "_blank",
             rel: "noopener noreferrer",
-            children: [t("Download return label"), jsx("span", {
+            onClick: onDownload,
+            "aria-busy": preparing || void 0,
+            "aria-disabled": preparing || void 0,
+            children: [preparing && jsx(Spinner, {}), t("Download return label"), jsx("span", {
               className: "visually-hidden",
               children: ` ${t("(opens in a new tab)")}`
             })]
+          }), unavailable && jsx("p", {
+            className: styles$A.note,
+            role: "status",
+            children: t("Your return label is not ready yet. Try again in a moment.")
           }), ret.label_email && jsxs("p", {
             className: styles$A.note,
             children: [t("You’ll receive a shipping label PDF to your email as well."), jsx("br", {}), ret.label_email]
@@ -8150,7 +8212,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
   useEffect(() => {
     void load();
   }, [load]);
-  const cancelled = order?.status === "cancelled";
+  const cancelled = state === "ready" && order?.status === "cancelled";
   const cancelledPage = useRef(null);
   useBrowserLayoutEffect(() => {
     if (!cancelled) return;
@@ -8784,6 +8846,7 @@ function ReturnCard({ ret, locale, onOpen }) {
   });
 }
 function ReturnThumbnails({ ret }) {
+  const t = useT();
   const images = ret.images ?? [];
   const hidden = ret.item_count - TILES + 1;
   const overflow = images.length >= TILES && hidden > 1 ? hidden : 0;
@@ -8815,7 +8878,7 @@ function ReturnThumbnails({ ret }) {
             children: ["+", overflow]
           }), jsx("span", {
             className: "visually-hidden",
-            children: `and ${overflow} more items`
+            children: t("and {0} more items", overflow)
           })]
         })]
       }, `${src}-${i}`);
@@ -8823,6 +8886,7 @@ function ReturnThumbnails({ ret }) {
   });
 }
 function OrderCard({ order, locale, onOpen }) {
+  const t = useT();
   const body3 = jsxs(Fragment, {
     children: [jsxs("div", {
       className: styles$v.head,
@@ -8830,7 +8894,7 @@ function OrderCard({ order, locale, onOpen }) {
         className: styles$v.heading,
         children: [jsx("span", {
           className: styles$v.title,
-          children: `Order #${shortRef(order.order_ref)}`
+          children: t("Order #{0}", shortRef(order.order_ref))
         }), jsx("span", {
           className: styles$v.date,
           children: formatPlaced(order.placed_at, locale)
@@ -8861,6 +8925,7 @@ function OrderCard({ order, locale, onOpen }) {
   });
 }
 function Thumbnails({ order }) {
+  const t = useT();
   const images = order.images ?? (order.image ? [order.image] : []);
   const hidden = order.item_count - TILES + 1;
   const overflow = images.length >= TILES && hidden > 1 ? hidden : 0;
@@ -8892,7 +8957,7 @@ function Thumbnails({ order }) {
             children: ["+", overflow]
           }), jsx("span", {
             className: "visually-hidden",
-            children: `and ${overflow} more items`
+            children: t("and {0} more items", overflow)
           })]
         })]
       }, `${src}-${i}`);
@@ -10480,7 +10545,7 @@ function ColorSelector({ colours, selected: selected2, onSelect }) {
           }), lowStock2 && jsx("span", {
             className: styles$f.stockBadge,
             "aria-hidden": "true",
-            children: `${c.remaining} left`
+            children: t("{0} left", c.remaining)
           })]
         }, c.value);
       })

package/dist/standalone/styles.css

@@ -133,7 +133,7 @@
   background: var(--color-surface-max);
   color: var(--color-text-strong);
 }
-._button_17pvl_1 {
+._button_ci424_1 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -151,52 +151,57 @@
   transition: background-color 120ms ease, opacity 120ms ease;
   -webkit-tap-highlight-color: transparent;
 }
-._fullWidth_17pvl_25 {
+._fullWidth_ci424_25 {
   width: 100%;
 }
-._primary_17pvl_29 {
+._primary_ci424_29 {
   background: var(--color-surface-max);
   color: var(--color-text-strong);
 }
-._secondary_17pvl_34 {
+._secondary_ci424_34 {
   background: transparent;
   color: var(--color-text-default);
   border-color: var(--color-border-default);
 }
-._ghost_17pvl_40 {
+._ghost_ci424_40 {
   background: transparent;
   color: var(--color-text-default);
   border-color: transparent;
 }
-._button_17pvl_1:disabled {
+._button_ci424_1:disabled {
   cursor: not-allowed;
 }
-._primary_17pvl_29:disabled {
+._primary_ci424_29:disabled {
   background: var(--color-surface-bold);
   color: var(--color-text-disabled);
 }
-._secondary_17pvl_34:disabled,
-._ghost_17pvl_40:disabled {
+._secondary_ci424_34:disabled,
+._ghost_ci424_40:disabled {
   opacity: 0.5;
 }
-._button_17pvl_1:focus-visible {
+._button_ci424_1:focus-visible {
   outline: 2px solid var(--color-surface-max);
   outline-offset: 2px;
 }
-._spinner_17pvl_83 {
+._spinner_1rueh_5 {
   width: 20px;
   height: 20px;
   margin: 2px;
   border-radius: var(--radius-full);
   border: 2px solid currentColor;
   border-top-color: transparent;
-  animation: _spin_17pvl_83 700ms linear infinite;
+  animation: _spin_1rueh_5 700ms linear infinite;
 }
-@keyframes _spin_17pvl_83 {
+@keyframes _spin_1rueh_5 {
   to {
     transform: rotate(360deg);
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  ._spinner_1rueh_5 {
+    animation-duration: 2400ms;
+  }
+}
 ._skeleton_1nxz7_1 {
   display: block;
   background:

package/dist/styles.css

@@ -133,7 +133,7 @@
   background: var(--color-surface-max);
   color: var(--color-text-strong);
 }
-._button_17pvl_1 {
+._button_ci424_1 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -151,52 +151,57 @@
   transition: background-color 120ms ease, opacity 120ms ease;
   -webkit-tap-highlight-color: transparent;
 }
-._fullWidth_17pvl_25 {
+._fullWidth_ci424_25 {
   width: 100%;
 }
-._primary_17pvl_29 {
+._primary_ci424_29 {
   background: var(--color-surface-max);
   color: var(--color-text-strong);
 }
-._secondary_17pvl_34 {
+._secondary_ci424_34 {
   background: transparent;
   color: var(--color-text-default);
   border-color: var(--color-border-default);
 }
-._ghost_17pvl_40 {
+._ghost_ci424_40 {
   background: transparent;
   color: var(--color-text-default);
   border-color: transparent;
 }
-._button_17pvl_1:disabled {
+._button_ci424_1:disabled {
   cursor: not-allowed;
 }
-._primary_17pvl_29:disabled {
+._primary_ci424_29:disabled {
   background: var(--color-surface-bold);
   color: var(--color-text-disabled);
 }
-._secondary_17pvl_34:disabled,
-._ghost_17pvl_40:disabled {
+._secondary_ci424_34:disabled,
+._ghost_ci424_40:disabled {
   opacity: 0.5;
 }
-._button_17pvl_1:focus-visible {
+._button_ci424_1:focus-visible {
   outline: 2px solid var(--color-surface-max);
   outline-offset: 2px;
 }
-._spinner_17pvl_83 {
+._spinner_1rueh_5 {
   width: 20px;
   height: 20px;
   margin: 2px;
   border-radius: var(--radius-full);
   border: 2px solid currentColor;
   border-top-color: transparent;
-  animation: _spin_17pvl_83 700ms linear infinite;
+  animation: _spin_1rueh_5 700ms linear infinite;
 }
-@keyframes _spin_17pvl_83 {
+@keyframes _spin_1rueh_5 {
   to {
     transform: rotate(360deg);
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  ._spinner_1rueh_5 {
+    animation-duration: 2400ms;
+  }
+}
 ._skeleton_1nxz7_1 {
   display: block;
   background:

package/package.json

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