@nok-integration/storefront-react 0.19.29 → 0.19.31

package/dist/index.d.ts

@@ -4341,6 +4341,15 @@ export declare interface OrderTrackingViewProps {
      * "Start a return" row is there for a fan whether you route it or not.
      */
     onStartReturn?: () => void;
+    /**
+     * Open an EXISTING return's progress on a route of your own.
+     *
+     * Optional, and optional in the way every handler here is: it customises where the row
+     * goes, it does not decide whether the row is drawn. The rows follow `order.returns`
+     * from the engine and nothing else. Omit this and the return opens in place, exactly as
+     * starting one does.
+     */
+    onOpenReturn?: (returnRef: string) => void;
     /**
      * Called once the fan has confirmed a cancellation and the engine has accepted it,
      * with the order as it now stands. The screen redraws itself either way; this is for a

package/dist/index.mjs

@@ -6810,16 +6810,16 @@ function useModalDialog(open, onClose, ref) {
     };
   }, [open, handleKeyDown, ref]);
 }
-const scrim$5 = "_scrim_7on4q_8";
-const sheet$3 = "_sheet_7on4q_20";
-const body$6 = "_body_7on4q_32";
-const title$l = "_title_7on4q_46";
-const options$1 = "_options_7on4q_54";
-const option$1 = "_option_7on4q_54";
-const radio = "_radio_7on4q_88";
-const label$1 = "_label_7on4q_118";
-const footer$1 = "_footer_7on4q_127";
-const error$1 = "_error_7on4q_135";
+const scrim$5 = "_scrim_1oaa3_8";
+const sheet$3 = "_sheet_1oaa3_20";
+const body$6 = "_body_1oaa3_32";
+const title$l = "_title_1oaa3_53";
+const options$1 = "_options_1oaa3_61";
+const option$1 = "_option_1oaa3_61";
+const radio = "_radio_1oaa3_95";
+const label$1 = "_label_1oaa3_125";
+const footer$1 = "_footer_1oaa3_134";
+const error$1 = "_error_1oaa3_142";
 const styles$D = {
   scrim: scrim$5,
   sheet: sheet$3,
@@ -7564,11 +7564,14 @@ function ChevronRight$1() {
   });
 }
 function OrderTrackingView(props) {
-  const [returning, setReturning] = useState(false);
-  if (returning) {
+  const [flow, setFlow] = useState(null);
+  if (flow !== null) {
     return jsx(ReturnFlowView, {
       orderRef: props.orderRef,
-      onDone: () => setReturning(false)
+      ...flow ? {
+        returnRef: flow
+      } : {},
+      onDone: () => setFlow(null)
     });
   }
   return jsx(ShopSurface, {
@@ -7576,11 +7579,12 @@ function OrderTrackingView(props) {
     fill: true,
     children: jsx(OrderTrackingContent, {
       ...props,
-      onStartReturn: props.onStartReturn ?? (() => setReturning(true))
+      onStartReturn: props.onStartReturn ?? (() => setFlow("")),
+      onOpenReturn: props.onOpenReturn ?? ((returnRef) => setFlow(returnRef))
     })
   });
 }
-function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onContactSupport, onCancelled, onReorder }) {
+function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onOpenReturn, onContactSupport, onCancelled, onReorder }) {
   const t = useT();
   const { api } = useShop();
   const locale = useLocale(localeProp);
@@ -7757,6 +7761,9 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onC
       ...onStartReturn ? {
         onStartReturn
       } : {},
+      ...onOpenReturn ? {
+        onOpenReturn
+      } : {},
       ...onContactSupport ? {
         onContactSupport
       } : {}
@@ -7793,9 +7800,10 @@ function placedOn(iso, locale) {
   }).format(d);
   return `${day} ${month}, ${d.getUTCFullYear()}`;
 }
-function NeedHelp({ order, onStartReturn, onContactSupport }) {
+function NeedHelp({ order, onStartReturn, onOpenReturn, onContactSupport }) {
   const emit = useShopEvent();
   if (order.status !== "delivered") return null;
+  const returns = order.returns ?? [];
   return jsxs("section", {
     className: styles$y.help,
     "aria-labelledby": "order-help",
@@ -7805,7 +7813,10 @@ function NeedHelp({ order, onStartReturn, onContactSupport }) {
       children: "Need help?"
     }), jsxs("div", {
       className: styles$y.helpRows,
-      children: [order.can_return && onStartReturn && jsx(HelpRow, {
+      children: [returns.map((ret) => jsx(HelpRow, {
+        label: returns.length > 1 ? `Track return ${ret.return_ref}` : "Track your return",
+        onClick: () => onOpenReturn?.(ret.return_ref)
+      }, ret.return_ref)), order.can_return && onStartReturn && jsx(HelpRow, {
         label: "Start a return",
         onClick: onStartReturn
       }), jsx(HelpRow, {
@@ -8417,11 +8428,11 @@ function ProductGallery({ title: title2, product }) {
     })]
   });
 }
-const bar$1 = "_bar_fn0g9_1";
-const chips$1 = "_chips_fn0g9_8";
-const chip$1 = "_chip_fn0g9_8";
-const on = "_on_fn0g9_29";
-const clear = "_clear_fn0g9_35";
+const bar$1 = "_bar_6p29u_1";
+const chips$1 = "_chips_6p29u_8";
+const chip$1 = "_chip_6p29u_8";
+const on = "_on_6p29u_36";
+const clear = "_clear_6p29u_42";
 const styles$r = {
   bar: bar$1,
   chips: chips$1,
@@ -8539,13 +8550,13 @@ function ProductGrid({ category, initialProducts, initialCursor, filters = [] })
     })]
   });
 }
-const rail = "_rail_11l7h_7";
-const header$5 = "_header_11l7h_14";
-const title$d = "_title_11l7h_21";
-const seeAll = "_seeAll_11l7h_27";
-const track$3 = "_track_11l7h_33";
-const item = "_item_11l7h_50";
-const inset = "_inset_11l7h_62";
+const rail = "_rail_1rll1_7";
+const header$5 = "_header_1rll1_14";
+const title$d = "_title_1rll1_21";
+const seeAll = "_seeAll_1rll1_27";
+const track$3 = "_track_1rll1_33";
+const item = "_item_1rll1_67";
+const inset = "_inset_1rll1_79";
 const styles$p = {
   rail,
   header: header$5,
@@ -8582,16 +8593,16 @@ function RailCarousel({ title: title2, products, seeAllTo, inset: inset2 }) {
     })]
   });
 }
-const overlay$2 = "_overlay_s4eai_1";
-const scrim$4 = "_scrim_s4eai_10";
-const sheet$2 = "_sheet_s4eai_16";
-const grabArea = "_grabArea_s4eai_41";
-const grabber = "_grabber_s4eai_51";
-const header$4 = "_header_s4eai_59";
-const title$c = "_title_s4eai_67";
-const close$1 = "_close_s4eai_71";
-const body$4 = "_body_s4eai_84";
-const footer = "_footer_s4eai_90";
+const overlay$2 = "_overlay_fszc5_1";
+const scrim$4 = "_scrim_fszc5_10";
+const sheet$2 = "_sheet_fszc5_16";
+const grabArea = "_grabArea_fszc5_41";
+const grabber = "_grabber_fszc5_51";
+const header$4 = "_header_fszc5_59";
+const title$c = "_title_fszc5_67";
+const close$1 = "_close_fszc5_71";
+const body$4 = "_body_fszc5_84";
+const footer = "_footer_fszc5_97";
 const styles$o = {
   overlay: overlay$2,
   scrim: scrim$4,
@@ -9409,31 +9420,31 @@ function MediaGallery({ media: media2, alt, focus }) {
     })]
   });
 }
-const scrim$3 = "_scrim_ddqa4_8";
-const sheet$1 = "_sheet_ddqa4_2";
-const body$2 = "_body_ddqa4_40";
-const titles = "_titles_ddqa4_60";
-const title$a = "_title_ddqa4_60";
-const subtitle$3 = "_subtitle_ddqa4_76";
-const units = "_units_ddqa4_89";
-const unit = "_unit_ddqa4_89";
-const unitOn = "_unitOn_ddqa4_123";
-const unitOff = "_unitOff_ddqa4_131";
-const tableWrap = "_tableWrap_ddqa4_140";
-const table = "_table_ddqa4_140";
-const col = "_col_ddqa4_165";
-const colEdge = "_colEdge_ddqa4_169";
-const note = "_note_ddqa4_237";
-const how = "_how_ddqa4_249";
-const howTitle = "_howTitle_ddqa4_255";
-const howList = "_howList_ddqa4_263";
-const howItem = "_howItem_ddqa4_270";
-const howLabel = "_howLabel_ddqa4_295";
-const howText = "_howText_ddqa4_305";
-const fabric = "_fabric_ddqa4_314";
-const fabricLabel = "_fabricLabel_ddqa4_322";
-const fabricText = "_fabricText_ddqa4_330";
-const notes = "_notes_ddqa4_341";
+const scrim$3 = "_scrim_r4azu_8";
+const sheet$1 = "_sheet_r4azu_2";
+const body$2 = "_body_r4azu_40";
+const titles = "_titles_r4azu_67";
+const title$a = "_title_r4azu_67";
+const subtitle$3 = "_subtitle_r4azu_83";
+const units = "_units_r4azu_96";
+const unit = "_unit_r4azu_96";
+const unitOn = "_unitOn_r4azu_130";
+const unitOff = "_unitOff_r4azu_138";
+const tableWrap = "_tableWrap_r4azu_147";
+const table = "_table_r4azu_147";
+const col = "_col_r4azu_179";
+const colEdge = "_colEdge_r4azu_183";
+const note = "_note_r4azu_251";
+const how = "_how_r4azu_263";
+const howTitle = "_howTitle_r4azu_269";
+const howList = "_howList_r4azu_277";
+const howItem = "_howItem_r4azu_284";
+const howLabel = "_howLabel_r4azu_309";
+const howText = "_howText_r4azu_319";
+const fabric = "_fabric_r4azu_328";
+const fabricLabel = "_fabricLabel_r4azu_336";
+const fabricText = "_fabricText_r4azu_344";
+const notes = "_notes_r4azu_355";
 const styles$h = {
   scrim: scrim$3,
   sheet: sheet$1,
@@ -11288,18 +11299,18 @@ function ShopBar({ onBack, onMenu, title: title2, showCart, floating: floating2
     })]
   });
 }
-const overlay = "_overlay_1i5ok_5";
-const scrim = "_scrim_1i5ok_21";
-const sheet = "_sheet_1i5ok_31";
-const header = "_header_1i5ok_73";
-const close = "_close_1i5ok_79";
-const list = "_list_1i5ok_98";
-const row = "_row_1i5ok_113";
-const icon = "_icon_1i5ok_142";
-const text = "_text_1i5ok_150";
-const title = "_title_1i5ok_158";
-const subtitle = "_subtitle_1i5ok_165";
-const chevron = "_chevron_1i5ok_171";
+const overlay = "_overlay_zf09t_5";
+const scrim = "_scrim_zf09t_21";
+const sheet = "_sheet_zf09t_31";
+const header = "_header_zf09t_80";
+const close = "_close_zf09t_86";
+const list = "_list_zf09t_105";
+const row = "_row_zf09t_120";
+const icon = "_icon_zf09t_149";
+const text = "_text_zf09t_157";
+const title = "_title_zf09t_165";
+const subtitle = "_subtitle_zf09t_172";
+const chevron = "_chevron_zf09t_178";
 const styles = {
   overlay,
   scrim,
@@ -11573,4 +11584,4 @@ export {
   useToast,
   variantLabel
 };
-
+//# sourceMappingURL=index.mjs.map

package/dist/standalone/storefront.mjs

@@ -6810,16 +6810,16 @@ function useModalDialog(open, onClose, ref) {
     };
   }, [open, handleKeyDown, ref]);
 }
-const scrim$5 = "_scrim_7on4q_8";
-const sheet$3 = "_sheet_7on4q_20";
-const body$6 = "_body_7on4q_32";
-const title$l = "_title_7on4q_46";
-const options$1 = "_options_7on4q_54";
-const option$1 = "_option_7on4q_54";
-const radio = "_radio_7on4q_88";
-const label$1 = "_label_7on4q_118";
-const footer$1 = "_footer_7on4q_127";
-const error$1 = "_error_7on4q_135";
+const scrim$5 = "_scrim_1oaa3_8";
+const sheet$3 = "_sheet_1oaa3_20";
+const body$6 = "_body_1oaa3_32";
+const title$l = "_title_1oaa3_53";
+const options$1 = "_options_1oaa3_61";
+const option$1 = "_option_1oaa3_61";
+const radio = "_radio_1oaa3_95";
+const label$1 = "_label_1oaa3_125";
+const footer$1 = "_footer_1oaa3_134";
+const error$1 = "_error_1oaa3_142";
 const styles$D = {
   scrim: scrim$5,
   sheet: sheet$3,
@@ -7564,11 +7564,14 @@ function ChevronRight$1() {
   });
 }
 function OrderTrackingView(props) {
-  const [returning, setReturning] = useState(false);
-  if (returning) {
+  const [flow, setFlow] = useState(null);
+  if (flow !== null) {
     return jsx(ReturnFlowView, {
       orderRef: props.orderRef,
-      onDone: () => setReturning(false)
+      ...flow ? {
+        returnRef: flow
+      } : {},
+      onDone: () => setFlow(null)
     });
   }
   return jsx(ShopSurface, {
@@ -7576,11 +7579,12 @@ function OrderTrackingView(props) {
     fill: true,
     children: jsx(OrderTrackingContent, {
       ...props,
-      onStartReturn: props.onStartReturn ?? (() => setReturning(true))
+      onStartReturn: props.onStartReturn ?? (() => setFlow("")),
+      onOpenReturn: props.onOpenReturn ?? ((returnRef) => setFlow(returnRef))
     })
   });
 }
-function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onContactSupport, onCancelled, onReorder }) {
+function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onOpenReturn, onContactSupport, onCancelled, onReorder }) {
   const t = useT();
   const { api } = useShop();
   const locale = useLocale(localeProp);
@@ -7757,6 +7761,9 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onC
       ...onStartReturn ? {
         onStartReturn
       } : {},
+      ...onOpenReturn ? {
+        onOpenReturn
+      } : {},
       ...onContactSupport ? {
         onContactSupport
       } : {}
@@ -7793,9 +7800,10 @@ function placedOn(iso, locale) {
   }).format(d);
   return `${day} ${month}, ${d.getUTCFullYear()}`;
 }
-function NeedHelp({ order, onStartReturn, onContactSupport }) {
+function NeedHelp({ order, onStartReturn, onOpenReturn, onContactSupport }) {
   const emit = useShopEvent();
   if (order.status !== "delivered") return null;
+  const returns = order.returns ?? [];
   return jsxs("section", {
     className: styles$y.help,
     "aria-labelledby": "order-help",
@@ -7805,7 +7813,10 @@ function NeedHelp({ order, onStartReturn, onContactSupport }) {
       children: "Need help?"
     }), jsxs("div", {
       className: styles$y.helpRows,
-      children: [order.can_return && onStartReturn && jsx(HelpRow, {
+      children: [returns.map((ret) => jsx(HelpRow, {
+        label: returns.length > 1 ? `Track return ${ret.return_ref}` : "Track your return",
+        onClick: () => onOpenReturn?.(ret.return_ref)
+      }, ret.return_ref)), order.can_return && onStartReturn && jsx(HelpRow, {
         label: "Start a return",
         onClick: onStartReturn
       }), jsx(HelpRow, {
@@ -8417,11 +8428,11 @@ function ProductGallery({ title: title2, product }) {
     })]
   });
 }
-const bar$1 = "_bar_fn0g9_1";
-const chips$1 = "_chips_fn0g9_8";
-const chip$1 = "_chip_fn0g9_8";
-const on = "_on_fn0g9_29";
-const clear = "_clear_fn0g9_35";
+const bar$1 = "_bar_6p29u_1";
+const chips$1 = "_chips_6p29u_8";
+const chip$1 = "_chip_6p29u_8";
+const on = "_on_6p29u_36";
+const clear = "_clear_6p29u_42";
 const styles$r = {
   bar: bar$1,
   chips: chips$1,
@@ -8539,13 +8550,13 @@ function ProductGrid({ category, initialProducts, initialCursor, filters = [] })
     })]
   });
 }
-const rail = "_rail_11l7h_7";
-const header$5 = "_header_11l7h_14";
-const title$d = "_title_11l7h_21";
-const seeAll = "_seeAll_11l7h_27";
-const track$3 = "_track_11l7h_33";
-const item = "_item_11l7h_50";
-const inset = "_inset_11l7h_62";
+const rail = "_rail_1rll1_7";
+const header$5 = "_header_1rll1_14";
+const title$d = "_title_1rll1_21";
+const seeAll = "_seeAll_1rll1_27";
+const track$3 = "_track_1rll1_33";
+const item = "_item_1rll1_67";
+const inset = "_inset_1rll1_79";
 const styles$p = {
   rail,
   header: header$5,
@@ -8582,16 +8593,16 @@ function RailCarousel({ title: title2, products, seeAllTo, inset: inset2 }) {
     })]
   });
 }
-const overlay$2 = "_overlay_s4eai_1";
-const scrim$4 = "_scrim_s4eai_10";
-const sheet$2 = "_sheet_s4eai_16";
-const grabArea = "_grabArea_s4eai_41";
-const grabber = "_grabber_s4eai_51";
-const header$4 = "_header_s4eai_59";
-const title$c = "_title_s4eai_67";
-const close$1 = "_close_s4eai_71";
-const body$4 = "_body_s4eai_84";
-const footer = "_footer_s4eai_90";
+const overlay$2 = "_overlay_fszc5_1";
+const scrim$4 = "_scrim_fszc5_10";
+const sheet$2 = "_sheet_fszc5_16";
+const grabArea = "_grabArea_fszc5_41";
+const grabber = "_grabber_fszc5_51";
+const header$4 = "_header_fszc5_59";
+const title$c = "_title_fszc5_67";
+const close$1 = "_close_fszc5_71";
+const body$4 = "_body_fszc5_84";
+const footer = "_footer_fszc5_97";
 const styles$o = {
   overlay: overlay$2,
   scrim: scrim$4,
@@ -9409,31 +9420,31 @@ function MediaGallery({ media: media2, alt, focus }) {
     })]
   });
 }
-const scrim$3 = "_scrim_ddqa4_8";
-const sheet$1 = "_sheet_ddqa4_2";
-const body$2 = "_body_ddqa4_40";
-const titles = "_titles_ddqa4_60";
-const title$a = "_title_ddqa4_60";
-const subtitle$3 = "_subtitle_ddqa4_76";
-const units = "_units_ddqa4_89";
-const unit = "_unit_ddqa4_89";
-const unitOn = "_unitOn_ddqa4_123";
-const unitOff = "_unitOff_ddqa4_131";
-const tableWrap = "_tableWrap_ddqa4_140";
-const table = "_table_ddqa4_140";
-const col = "_col_ddqa4_165";
-const colEdge = "_colEdge_ddqa4_169";
-const note = "_note_ddqa4_237";
-const how = "_how_ddqa4_249";
-const howTitle = "_howTitle_ddqa4_255";
-const howList = "_howList_ddqa4_263";
-const howItem = "_howItem_ddqa4_270";
-const howLabel = "_howLabel_ddqa4_295";
-const howText = "_howText_ddqa4_305";
-const fabric = "_fabric_ddqa4_314";
-const fabricLabel = "_fabricLabel_ddqa4_322";
-const fabricText = "_fabricText_ddqa4_330";
-const notes = "_notes_ddqa4_341";
+const scrim$3 = "_scrim_r4azu_8";
+const sheet$1 = "_sheet_r4azu_2";
+const body$2 = "_body_r4azu_40";
+const titles = "_titles_r4azu_67";
+const title$a = "_title_r4azu_67";
+const subtitle$3 = "_subtitle_r4azu_83";
+const units = "_units_r4azu_96";
+const unit = "_unit_r4azu_96";
+const unitOn = "_unitOn_r4azu_130";
+const unitOff = "_unitOff_r4azu_138";
+const tableWrap = "_tableWrap_r4azu_147";
+const table = "_table_r4azu_147";
+const col = "_col_r4azu_179";
+const colEdge = "_colEdge_r4azu_183";
+const note = "_note_r4azu_251";
+const how = "_how_r4azu_263";
+const howTitle = "_howTitle_r4azu_269";
+const howList = "_howList_r4azu_277";
+const howItem = "_howItem_r4azu_284";
+const howLabel = "_howLabel_r4azu_309";
+const howText = "_howText_r4azu_319";
+const fabric = "_fabric_r4azu_328";
+const fabricLabel = "_fabricLabel_r4azu_336";
+const fabricText = "_fabricText_r4azu_344";
+const notes = "_notes_r4azu_355";
 const styles$h = {
   scrim: scrim$3,
   sheet: sheet$1,
@@ -11288,18 +11299,18 @@ function ShopBar({ onBack, onMenu, title: title2, showCart, floating: floating2
     })]
   });
 }
-const overlay = "_overlay_1i5ok_5";
-const scrim = "_scrim_1i5ok_21";
-const sheet = "_sheet_1i5ok_31";
-const header = "_header_1i5ok_73";
-const close = "_close_1i5ok_79";
-const list = "_list_1i5ok_98";
-const row = "_row_1i5ok_113";
-const icon = "_icon_1i5ok_142";
-const text = "_text_1i5ok_150";
-const title = "_title_1i5ok_158";
-const subtitle = "_subtitle_1i5ok_165";
-const chevron = "_chevron_1i5ok_171";
+const overlay = "_overlay_zf09t_5";
+const scrim = "_scrim_zf09t_21";
+const sheet = "_sheet_zf09t_31";
+const header = "_header_zf09t_80";
+const close = "_close_zf09t_86";
+const list = "_list_zf09t_105";
+const row = "_row_zf09t_120";
+const icon = "_icon_zf09t_149";
+const text = "_text_zf09t_157";
+const title = "_title_zf09t_165";
+const subtitle = "_subtitle_zf09t_172";
+const chevron = "_chevron_zf09t_178";
 const styles = {
   overlay,
   scrim,
@@ -11573,4 +11584,4 @@ export {
   useToast,
   variantLabel
 };
-
+//# sourceMappingURL=storefront.mjs.map