@nok-integration/storefront-react 0.20.9 → 0.20.11

package/dist/index.mjs

@@ -5713,16 +5713,21 @@ function withoutRestoration() {
     history.scrollRestoration = previous;
   };
 }
-const RELEASES = ["touchstart", "wheel", "keydown", "pointerdown"];
-function anchorTop(shouldHold = () => true) {
+const RELEASES = ["touchmove", "wheel", "keydown", "pointerdown"];
+function movesThePage(event) {
+  if (event.type === "pointerdown") return event.pointerType !== "touch";
+  return true;
+}
+function anchorTop(onMoved = () => true) {
   let released = false;
   const top2 = () => {
     if (released) return;
     const scrolled2 = window.scrollY || document.documentElement.scrollTop || 0;
-    if (scrolled2 > 0 && shouldHold()) window.scrollTo(0, 0);
+    if (scrolled2 > 0 && onMoved()) window.scrollTo(0, 0);
   };
-  const release = () => {
+  const release = (event) => {
     if (released) return;
+    if (event && !movesThePage(event)) return;
     released = true;
     if (frame2 !== null && typeof cancelAnimationFrame === "function") cancelAnimationFrame(frame2);
     clearTimeout(timer2);
@@ -5738,7 +5743,23 @@ function anchorTop(shouldHold = () => true) {
   for (const type of RELEASES) window.addEventListener(type, release, {
     passive: true
   });
-  return release;
+  return () => release();
+}
+function onReveal(el, revealed) {
+  if (typeof IntersectionObserver === "undefined") return () => {
+  };
+  let seen = false;
+  let visible = true;
+  const observer = new IntersectionObserver((entries) => {
+    const entry = entries[entries.length - 1];
+    if (!entry) return;
+    const now = entry.isIntersecting;
+    if (seen && now && !visible) revealed();
+    seen = true;
+    visible = now;
+  });
+  observer.observe(el);
+  return () => observer.disconnect();
 }
 const useMountEffect$1 = typeof window === "undefined" ? useEffect : useLayoutEffect;
 function documentTop(el) {
@@ -5756,8 +5777,13 @@ function useScreenAnchor(ref, enabled = true) {
     const el = ref.current;
     if (!el || !enabled) return;
     const restore = withoutRestoration();
-    const release = anchorTop(() => beginsOnTheFirstViewport(el));
+    let release = anchorTop(() => beginsOnTheFirstViewport(el));
+    const unobserve = onReveal(el, () => {
+      release();
+      release = anchorTop(() => beginsOnTheFirstViewport(el));
+    });
     return () => {
+      unobserve();
       release();
       restore();
     };
@@ -5976,7 +6002,58 @@ const ES = {
   Received: "Recibida",
   Completed: "Completada",
   item: "artículo",
-  items: "artículos"
+  items: "artículos",
+  "(opens in a new tab)": "(se abre en nueva pestaña)",
+  "Arrived too late": "Llegó demasiado tarde",
+  "Cancel order": "Cancelar pedido",
+  "Changed my mind": "Cambié de opinión",
+  "Contact support": "Contactar atención al cliente",
+  "Delivery takes too long": "Demora en la entrega",
+  Discount: "Descuento",
+  Done: "Listo",
+  "Download return label": "Descargar etiqueta de devolución",
+  "Download your return label": "Descargar tu etiqueta de devolución",
+  "Drop it off at your local carrier or post office.": "Entréguelo en su transportista local o oficina de correos.",
+  "Every item on this order has already been returned or cancelled.": "Todos los artículos de este pedido ya han sido devueltos o cancelados.",
+  Fabric: "Tela",
+  "Follow the instructions below to complete your return": "Siga las instrucciones a continuación para completar su devolución",
+  "How to measure": "Cómo medir",
+  "Item doesn't match description": "El artículo no coincide con la descripción",
+  "Item is damaged": "El artículo está dañado",
+  "Measurement unit": "Unidad de medida",
+  "Need help?": "¿Necesita ayuda?",
+  "Nothing left to return": "No queda nada por devolver",
+  "Order #{0} · Placed {1}": "Pedido n.º {0} · Realizado el {1}",
+  "Order cancelled": "Pedido cancelado",
+  "Order confirmation": "Confirmación del pedido",
+  "Ordered by mistake": "Pedido por error",
+  "Pack and ship the item": "Empaque y envíe el artículo",
+  "Reason for cancelling": "Motivo de la cancelación",
+  "Reason for return": "Motivo de la devolución",
+  Reorder: "Volver a pedir",
+  "Repackage the item securely and attach the return label to the outside of the package.": "Vuelva a empaquetar el artículo de forma segura y pegue la etiqueta de devolución en el exterior del paquete.",
+  "Request not found": "Solicitud no encontrada",
+  "Return #{0} · Reported {1}": "Devolución n.º {0} · Notificada el {1}",
+  "Return in progress": "Devolución en curso",
+  "Return selected items": "Devolver artículos seleccionados",
+  "Select items you want to return": "Seleccione los artículos que desea devolver",
+  "Size guide unavailable": "Guía de tallas no disponible",
+  "Size: {0}": "Talla: {0}",
+  "Start a return": "Iniciar una devolución",
+  "Tap the button below to download your pre-paid return label": "Toque el botón de abajo para descargar su etiqueta de devolución prepagada",
+  "Too large": "Demasiado grande",
+  "Too small": "Demasiado pequeño",
+  Track: "Seguir envío",
+  "We could not find that support request.": "No pudimos encontrar esa solicitud de ayuda.",
+  "We could not load the size guide for this item.": "No pudimos cargar la guía de tallas de este artículo.",
+  "We’ve generated your return label": "Hemos generado su etiqueta de devolución",
+  "We’ve sent a confirmation to {0}": "Hemos enviado una confirmación a {0}",
+  "What do you want to return?": "¿Qué desea devolver?",
+  "Your order is confirmed": "Su pedido está confirmado",
+  "You’ll receive a shipping label PDF to your email as well.": "Recibirá un PDF de la etiqueta de envío en su correo electrónico.",
+  "{0} photographs": "{0} fotografías",
+  "{0}, opens in a new tab": "{0}, se abre en una pestaña nueva",
+  "Zip Ups": "Sudaderas con cremalleras"
 };
 const CATALOGUES = {
   es: ES
@@ -6482,6 +6559,7 @@ const styles$I = {
 };
 function PriceBlock({ price: price2, compareAt: compareAt2, discountPct: discountPct$1, size = "md", variant = "strikethrough", align = "baseline" }) {
   const { format } = useMoney();
+  const t = useT();
   const pct = discountPct$1 ?? discountPct(price2, compareAt2);
   const hasCompare = compareAt2 && compareAt2.amount > price2.amount;
   return jsxs("div", {
@@ -6493,7 +6571,7 @@ function PriceBlock({ price: price2, compareAt: compareAt2, discountPct: discoun
       className: styles$I.compareAt,
       children: [jsx("span", {
         className: "visually-hidden",
-        children: `Was ${format(compareAt2)}`
+        children: t("Was {0}", format(compareAt2))
       }), jsx("span", {
         "aria-hidden": "true",
         children: format(compareAt2)
@@ -6503,6 +6581,50 @@ function PriceBlock({ price: price2, compareAt: compareAt2, discountPct: discoun
     })]
   });
 }
+const STATE_KEY = "__daznShop";
+function current$1(name2) {
+  if (typeof window === "undefined") return null;
+  const state = window.history.state;
+  const ours = state?.[STATE_KEY];
+  if (!ours || ours.href !== window.location.href) return null;
+  const value2 = ours[name2];
+  return typeof value2 === "string" ? value2 : null;
+}
+function useInPlaceScreen(name2) {
+  const [value2, setValue] = useState(() => current$1(name2));
+  useEffect(() => {
+    const onPop = () => setValue(current$1(name2));
+    window.addEventListener("popstate", onPop);
+    return () => window.removeEventListener("popstate", onPop);
+  }, [name2]);
+  const open = useCallback((next) => {
+    const history = window.history;
+    const state = history.state ?? {};
+    const href = window.location.href;
+    const ours = state[STATE_KEY]?.href === href ? state[STATE_KEY] : {};
+    history.pushState({
+      ...state,
+      [STATE_KEY]: {
+        ...ours,
+        href,
+        [name2]: next
+      }
+    }, "", href);
+    setValue(next);
+  }, [name2]);
+  const close2 = useCallback(() => {
+    if (current$1(name2) !== null) {
+      window.history.back();
+      return;
+    }
+    setValue(null);
+  }, [name2]);
+  return {
+    value: value2,
+    open,
+    close: close2
+  };
+}
 const timeline = "_timeline_1cum7_7";
 const row$8 = "_row_1cum7_15";
 const line$3 = "_line_1cum7_20";
@@ -6891,7 +7013,7 @@ function OrderLine({ item: item2 }) {
           className: styles$F.was,
           children: [jsx("span", {
             className: "visually-hidden",
-            children: `Was ${format(compareAt2)}`
+            children: t("Was {0}", format(compareAt2))
           }), jsx("span", {
             "aria-hidden": "true",
             children: format(compareAt2)
@@ -6955,7 +7077,7 @@ function OrderSummaryCard({ order }) {
     "aria-label": t("Order summary"),
     children: [jsx("h2", {
       className: styles$F.cardTitle,
-      children: "Order summary"
+      children: t("Order summary")
     }), jsx(OrderSummary, {
       pricing: toPricing(order),
       rows: rowsFor(order),
@@ -7106,6 +7228,7 @@ const styles$D = {
 function ReasonSheet({ title: title2, options: options2, ctaLabel, selected: selected2, onConfirm, onClose, closeLabel, busy = false, error: error2 }) {
   const sheetRef = useRef(null);
   const [choice, setChoice] = useState(selected2);
+  const t = useT();
   useModalDialog(true, onClose, sheetRef);
   return jsx("div", {
     className: styles$D.scrim,
@@ -7126,7 +7249,7 @@ function ReasonSheet({ title: title2, options: options2, ctaLabel, selected: sel
         children: [jsx("h2", {
           id: "reason-sheet-title",
           className: styles$D.title,
-          children: title2
+          children: t(title2)
         }), jsx("div", {
           className: styles$D.options,
           role: "radiogroup",
@@ -7160,7 +7283,7 @@ function ReasonSheet({ title: title2, options: options2, ctaLabel, selected: sel
               })
             }), jsx("span", {
               className: styles$D.label,
-              children: o.label
+              children: t(o.label)
             })]
           }, o.value))
         })]
@@ -7176,7 +7299,7 @@ function ReasonSheet({ title: title2, options: options2, ctaLabel, selected: sel
           disabled: !choice,
           loading: busy,
           onClick: () => choice && onConfirm(choice),
-          children: ctaLabel
+          children: t(ctaLabel)
         })]
       })]
     })
@@ -7206,6 +7329,7 @@ const styles$C = {
 };
 function ReturnItemRow({ item: item2, className }) {
   const { format } = useMoney();
+  const t = useT();
   return jsxs("div", {
     className: [styles$C.line, className ?? ""].join(" ").trim(),
     children: [jsx("div", {
@@ -7227,7 +7351,7 @@ function ReturnItemRow({ item: item2, className }) {
         children: item2.title ?? item2.sku
       }), item2.attributes?.size && jsx("p", {
         className: styles$C.attrs,
-        children: `Size: ${item2.attributes.size}`
+        children: t("Size: {0}", item2.attributes.size)
       })]
     }), jsxs("div", {
       className: styles$C.price,
@@ -7238,7 +7362,7 @@ function ReturnItemRow({ item: item2, className }) {
         className: styles$C.was,
         children: [jsx("span", {
           className: "visually-hidden",
-          children: `Was ${format(item2.compare_at_unit_price)}`
+          children: t("Was {0}", format(item2.compare_at_unit_price))
         }), jsx("span", {
           "aria-hidden": "true",
           children: format(item2.compare_at_unit_price)
@@ -7334,6 +7458,7 @@ function unitsLeft(item2) {
 function ReturnItemsView({ order, onSubmit, busy = false }) {
   const [chosen, setChosen] = useState({});
   const [reasonFor, setReasonFor] = useState(null);
+  const t = useT();
   const returnable = useMemo(() => order.items.filter((i) => unitsLeft(i) > 0), [order.items]);
   const selected2 = Object.entries(chosen).filter(([, reason2]) => reason2 !== void 0);
   const canSubmit = selected2.length > 0;
@@ -7372,10 +7497,10 @@ function ReturnItemsView({ order, onSubmit, busy = false }) {
         className: styles$B.titles,
         children: [jsx("h1", {
           className: styles$B.title,
-          children: "Nothing left to return"
+          children: t("Nothing left to return")
         }), jsx("p", {
           className: styles$B.subtitle,
-          children: "Every item on this order has already been returned or cancelled."
+          children: t("Every item on this order has already been returned or cancelled.")
         })]
       })
     });
@@ -7386,10 +7511,10 @@ function ReturnItemsView({ order, onSubmit, busy = false }) {
       className: styles$B.titles,
       children: [jsx("h1", {
         className: styles$B.title,
-        children: "What do you want to return?"
+        children: t("What do you want to return?")
       }), jsx("p", {
         className: styles$B.subtitle,
-        children: "Select items you want to return"
+        children: t("Select items you want to return")
       })]
     }), jsx("div", {
       className: styles$B.list,
@@ -7419,7 +7544,7 @@ function ReturnItemsView({ order, onSubmit, busy = false }) {
               onClick: () => setReasonFor(item2.line_ref),
               "aria-haspopup": "dialog",
               children: [jsx("span", {
-                children: reason2 ? REASON_LABEL.get(reason2) : "Select reason"
+                children: t(reason2 ? REASON_LABEL.get(reason2) ?? reason2 : "Select reason")
               }), jsx(Chevron$1, {})]
             })]
           })]
@@ -7431,7 +7556,7 @@ function ReturnItemsView({ order, onSubmit, busy = false }) {
       disabled: !canSubmit,
       loading: busy,
       onClick: submit,
-      children: "Return selected items"
+      children: t("Return selected items")
     }), reasonFor && jsx(ReasonSheet, {
       title: "Reason for return",
       options: RETURN_REASONS,
@@ -7486,6 +7611,7 @@ const styles$A = {
   note: note$1
 };
 function ReturnLabelView({ ret, onDone }) {
+  const t = useT();
   return jsxs("div", {
     className: styles$A.page,
     children: [jsxs("div", {
@@ -7499,10 +7625,10 @@ function ReturnLabelView({ ret, onDone }) {
         className: styles$A.intro,
         children: [jsx("h1", {
           className: styles$A.title,
-          children: "We’ve generated your return label"
+          children: t("We’ve generated your return label")
         }), jsx("p", {
           className: styles$A.subtitle,
-          children: "Follow the instructions below to complete your return"
+          children: t("Follow the instructions below to complete your return")
         })]
       }), jsxs("div", {
         className: styles$A.card,
@@ -7516,23 +7642,23 @@ function ReturnLabelView({ ret, onDone }) {
               children: "1"
             }), jsx("h2", {
               className: styles$A.stepTitle,
-              children: "Download your return label"
+              children: t("Download your return label")
             })]
           }), jsx("p", {
             className: styles$A.body,
-            children: "Tap the button below to download your pre-paid return label"
+            children: t("Tap the button below to download your pre-paid return label")
           }), ret.label_url && jsxs("a", {
             className: styles$A.download,
             href: ret.label_url,
             target: "_blank",
             rel: "noopener noreferrer",
-            children: ["Download return label", jsx("span", {
+            children: [t("Download return label"), jsx("span", {
               className: "visually-hidden",
-              children: " (opens in a new tab)"
+              children: ` ${t("(opens in a new tab)")}`
             })]
           }), ret.label_email && jsxs("p", {
             className: styles$A.note,
-            children: ["You’ll receive a shipping label PDF to your email as well.", jsx("br", {}), ret.label_email]
+            children: [t("You’ll receive a shipping label PDF to your email as well."), jsx("br", {}), ret.label_email]
           })]
         }), jsxs("section", {
           className: styles$A.step2,
@@ -7544,11 +7670,11 @@ function ReturnLabelView({ ret, onDone }) {
               children: "2"
             }), jsx("h2", {
               className: styles$A.stepTitle,
-              children: "Pack and ship the item"
+              children: t("Pack and ship the item")
             })]
           }), jsxs("p", {
             className: styles$A.body2,
-            children: ["Repackage the item securely and attach the return label to the outside of the package.", jsx("br", {}), "Drop it off at your local carrier or post office."]
+            children: [t("Repackage the item securely and attach the return label to the outside of the package."), jsx("br", {}), t("Drop it off at your local carrier or post office.")]
           })]
         })]
       })]
@@ -7556,7 +7682,7 @@ function ReturnLabelView({ ret, onDone }) {
       variant: "primary",
       fullWidth: true,
       onClick: onDone,
-      children: "Done"
+      children: t("Done")
     })]
   });
 }
@@ -7598,6 +7724,7 @@ function pctOff(item2) {
 function ReturnTrackingView({ ret, locale: localeProp }) {
   const locale = useLocale(localeProp);
   const { format } = useMoney();
+  const t = useT();
   const reported = new Date(ret.reported_at).toLocaleDateString(locale, {
     day: "numeric",
     month: "short",
@@ -7613,10 +7740,10 @@ function ReturnTrackingView({ ret, locale: localeProp }) {
         className: styles$z.titles,
         children: [jsx("h1", {
           className: styles$z.title,
-          children: "Return in progress"
+          children: t("Return in progress")
         }), jsx("p", {
           className: styles$z.subtitle,
-          children: `Return #${ret.return_ref} · Reported ${reported}`
+          children: t("Return #{0} · Reported {1}", ret.return_ref, reported)
         })]
       }), jsx(OrderTimeline, {
         progress: ret.progress,
@@ -7645,7 +7772,7 @@ function ReturnTrackingView({ ret, locale: localeProp }) {
             }), (item2.attributes?.size || pctOff(item2)) && jsxs("p", {
               className: styles$z.attrs,
               children: [item2.attributes?.size && jsx("span", {
-                children: `Size: ${item2.attributes.size}`
+                children: t("Size: {0}", item2.attributes.size)
               }), pctOff(item2) !== void 0 && jsx(SaleBadge, {
                 pct: pctOff(item2)
               })]
@@ -7838,15 +7965,16 @@ function ChevronRight$1() {
     })
   });
 }
+const useBrowserLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 function OrderTrackingView(props) {
-  const [flow, setFlow] = useState(null);
-  if (flow !== null) {
+  const flow = useInPlaceScreen("returnFlow");
+  if (flow.value !== null) {
     return jsx(ReturnFlowView, {
       orderRef: props.orderRef,
-      ...flow ? {
-        returnRef: flow
+      ...flow.value ? {
+        returnRef: flow.value
       } : {},
-      onDone: () => setFlow(null)
+      onDone: flow.close
     });
   }
   return jsx(ShopSurface, {
@@ -7854,8 +7982,8 @@ function OrderTrackingView(props) {
     fill: true,
     children: jsx(OrderTrackingContent, {
       ...props,
-      onStartReturn: props.onStartReturn ?? (() => setFlow("")),
-      onOpenReturn: props.onOpenReturn ?? ((returnRef) => setFlow(returnRef))
+      onStartReturn: props.onStartReturn ?? (() => flow.open("")),
+      onOpenReturn: props.onOpenReturn ?? flow.open
     })
   });
 }
@@ -7886,6 +8014,11 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
   useEffect(() => {
     void load();
   }, [load]);
+  const cancelled = order?.status === "cancelled";
+  useBrowserLayoutEffect(() => {
+    if (!cancelled) return;
+    return anchorTop();
+  }, [cancelled]);
   if (state === "loading") {
     return jsxs("div", {
       className: styles$y.page,
@@ -7971,17 +8104,17 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
         className: styles$y.cancelledHead,
         children: [jsx("h1", {
           className: styles$y.cancelledTitle,
-          children: "Order cancelled"
+          children: t("Order cancelled")
         }), jsx("p", {
           className: styles$y.cancelledMeta,
-          children: `Order #${shortRef$1(order.order_ref)} · Placed ${placedOn(order.placed_at, locale)}`
+          children: t("Order #{0} · Placed {1}", shortRef$1(order.order_ref), placedOn(order.placed_at, locale))
         })]
       }), jsx(Button, {
         variant: "primary",
         fullWidth: true,
         loading: reordering,
         onClick: () => void reorder(order),
-        children: "Reorder"
+        children: t("Reorder")
       }), jsx(OrderItemsCard, {
         order
       }), jsx(ShippingAddressCard, {
@@ -8000,15 +8133,15 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
         className: styles$y.titleRow,
         children: [jsx("h1", {
           className: styles$y.headline,
-          children: `Order #${shortRef$1(order.order_ref)}`
+          children: t("Order #{0}", shortRef$1(order.order_ref))
         }), order.tracking?.url && inTransit && jsxs("a", {
           className: styles$y.track,
           href: order.tracking.url,
           target: "_blank",
           rel: "noopener noreferrer",
-          children: ["Track", jsx("span", {
+          children: [t("Track"), jsx("span", {
             className: "visually-hidden",
-            children: ` ${order.tracking.carrier}, opens in a new tab`
+            children: ` ${t("{0}, opens in a new tab", order.tracking.carrier)}`
           }), jsx(RedirectLink, {})]
         })]
       }), jsx(OrderTimeline, {
@@ -8030,7 +8163,7 @@ function OrderTrackingContent({ orderRef, locale: localeProp, onStartReturn, onO
       type: "button",
       className: styles$y.cancel,
       onClick: () => setCancelOpen(true),
-      children: "Cancel order"
+      children: t("Cancel order")
     }), jsx(NeedHelp, {
       order,
       ...onStartReturn ? {
@@ -8077,6 +8210,7 @@ function placedOn(iso, locale) {
 }
 function NeedHelp({ order, onStartReturn, onOpenReturn, onContactSupport }) {
   const emit = useShopEvent();
+  const t = useT();
   if (order.status !== "delivered") return null;
   const returns = order.returns ?? [];
   return jsxs("section", {
@@ -8085,11 +8219,11 @@ function NeedHelp({ order, onStartReturn, onOpenReturn, onContactSupport }) {
     children: [jsx("h2", {
       className: styles$y.helpTitle,
       id: "order-help",
-      children: "Need help?"
+      children: t("Need help?")
     }), jsxs("div", {
       className: styles$y.helpRows,
       children: [returns.map((ret) => jsx(HelpRow, {
-        label: returns.length > 1 ? `Track return ${ret.return_ref}` : "Track your return",
+        label: returns.length > 1 ? t("Track return {0}", ret.return_ref) : "Track your return",
         status: RETURN_STATUS[ret.status] ?? ret.status.replace(/_/g, " "),
         onClick: () => onOpenReturn?.(ret.return_ref)
       }, ret.return_ref)), order.can_return && onStartReturn && jsx(HelpRow, {
@@ -8120,7 +8254,7 @@ function HelpRow({ label: label2, status, onClick }) {
     className: styles$y.helpRow,
     onClick,
     children: [jsx("span", {
-      children: label2
+      children: t(label2)
     }), jsxs("span", {
       className: styles$y.helpRowEnd,
       children: [status && jsx("span", {
@@ -8173,6 +8307,7 @@ function confirmationProgress(progress2) {
   });
 }
 function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
+  const t = useT();
   const { api } = useShop();
   const locale = useLocale(localeProp);
   const [order, setOrder] = useState(null);
@@ -8219,15 +8354,15 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
     className: styles$x.page,
     children: [jsxs("section", {
       className: styles$x.confirmed,
-      "aria-label": "Order confirmation",
+      "aria-label": t("Order confirmation"),
       children: [jsxs("div", {
         className: styles$x.title,
         children: [jsx("h1", {
           className: styles$x.headline,
-          children: "Your order is confirmed"
+          children: t("Your order is confirmed")
         }), order.email && jsx("p", {
           className: styles$x.subtitle,
-          children: `We’ve sent a confirmation to ${order.email}`
+          children: t("We’ve sent a confirmation to {0}", order.email)
         })]
       }), jsx(OrderTimeline, {
         progress: confirmationProgress(order.progress),
@@ -8249,7 +8384,7 @@ function OrderConfirmationContent({ orderRef, locale: localeProp, onDone }) {
       fullWidth: true,
       className: styles$x.done,
       onClick: onDone,
-      children: "Done"
+      children: t("Done")
     })]
   });
 }
@@ -8361,11 +8496,11 @@ function Chevron() {
   });
 }
 function OrderListView(props) {
-  const [opened, setOpened] = useState(null);
-  if (opened !== null) {
+  const opened = useInPlaceScreen("return");
+  if (opened.value !== null) {
     return jsx(ReturnFlowView, {
-      returnRef: opened,
-      onDone: () => setOpened(null)
+      returnRef: opened.value,
+      onDone: opened.close
     });
   }
   return jsx(ShopSurface, {
@@ -8373,7 +8508,7 @@ function OrderListView(props) {
     fill: true,
     children: jsx(OrderListContent, {
       ...props,
-      onOpenReturn: props.onOpenReturn ?? setOpened
+      onOpenReturn: props.onOpenReturn ?? opened.open
     })
   });
 }
@@ -8779,6 +8914,7 @@ const styles$s = {
 };
 function ProductGallery({ title: title2, product }) {
   const { format } = useMoney();
+  const t = useT();
   const pct = product.compare_at ? discountPct(product.price, product.compare_at) : void 0;
   const inStock = product.variants.some((v) => v.in_stock);
   const images = product.media.length > 0 ? product.media : [void 0];
@@ -8794,7 +8930,7 @@ function ProductGallery({ title: title2, product }) {
       className: styles$s.link,
       children: [jsx("ul", {
         className: styles$s.track,
-        "aria-label": `${product.title} photographs`,
+        "aria-label": t("{0} photographs", product.title),
         children: images.map((src, i) => jsxs("li", {
           className: styles$s.frame,
           children: [src ? jsx(ShopImage, {
@@ -8833,7 +8969,7 @@ function ProductGallery({ title: title2, product }) {
             className: styles$s.was,
             children: [jsx("span", {
               className: "visually-hidden",
-              children: `Was ${format(product.compare_at)}`
+              children: t("Was {0}", format(product.compare_at))
             }), jsx("span", {
               "aria-hidden": "true",
               children: format(product.compare_at)
@@ -9946,7 +10082,7 @@ function SizeGuideSheet({ guide, onClose }) {
         }), hasTable && authored && unit2 && jsx("div", {
           className: styles$h.units,
           role: "radiogroup",
-          "aria-label": "Measurement unit",
+          "aria-label": t("Measurement unit"),
           children: [authored, otherUnit(authored)].map((u) => jsx("button", {
             type: "button",
             role: "radio",
@@ -9990,7 +10126,7 @@ function SizeGuideSheet({ guide, onClose }) {
           children: [jsx("h3", {
             id: "size-guide-how",
             className: styles$h.howTitle,
-            children: "How to measure"
+            children: t("How to measure")
           }), jsx("dl", {
             className: styles$h.howList,
             children: measurements.map((m) => jsxs("div", {
@@ -10008,7 +10144,7 @@ function SizeGuideSheet({ guide, onClose }) {
           className: styles$h.fabric,
           children: [jsx("p", {
             className: styles$h.fabricLabel,
-            children: "Fabric"
+            children: t("Fabric")
           }), jsx("p", {
             className: styles$h.fabricText,
             children: guide.fabric
@@ -11291,24 +11427,64 @@ function useDocumentSnap(ref, enabled = true) {
     const root2 = document.documentElement;
     const previousType = root2.style.scrollSnapType;
     const previousPadding = root2.style.scrollPaddingTop;
-    root2.style.scrollSnapType = "y mandatory";
     root2.style.scrollPaddingTop = "0px";
+    let snapping = false;
+    let awaitingTouch = false;
+    const snapOn = () => {
+      root2.style.scrollSnapType = "y mandatory";
+      snapping = true;
+    };
+    const snapOff = () => {
+      root2.style.scrollSnapType = "none";
+      snapping = false;
+    };
+    const snapOnAtTouch = () => {
+      if (awaitingTouch) return;
+      awaitingTouch = true;
+      window.addEventListener("touchstart", snapOn, {
+        once: true,
+        passive: true
+      });
+    };
     const top2 = () => window.scrollTo(0, 0);
-    top2();
-    const frame2 = typeof window.requestAnimationFrame === "function" ? window.requestAnimationFrame(top2) : null;
-    const release = anchorTop();
+    let frame2 = null;
+    let release = () => {
+    };
+    const anchor2 = () => {
+      release();
+      if (frame2 !== null && typeof window.cancelAnimationFrame === "function") {
+        window.cancelAnimationFrame(frame2);
+      }
+      snapOff();
+      top2();
+      frame2 = typeof window.requestAnimationFrame === "function" ? window.requestAnimationFrame(() => {
+        top2();
+        snapOn();
+      }) : null;
+      release = anchorTop(() => {
+        if (snapping) {
+          snapOff();
+          snapOnAtTouch();
+        }
+        return true;
+      });
+    };
+    anchor2();
     const history = window.history;
     const previousRestoration = history && "scrollRestoration" in history ? history.scrollRestoration : null;
     if (previousRestoration !== null) history.scrollRestoration = "manual";
     const onPageShow = (event) => {
-      if (event.persisted) top2();
+      if (event.persisted) anchor2();
     };
     window.addEventListener("pageshow", onPageShow);
+    const unobserve = onReveal(el, anchor2);
     return () => {
+      unobserve();
       release();
       if (frame2 !== null && typeof window.cancelAnimationFrame === "function") {
         window.cancelAnimationFrame(frame2);
       }
+      window.removeEventListener("touchstart", snapOn);
       window.removeEventListener("pageshow", onPageShow);
       if (previousRestoration !== null) history.scrollRestoration = previousRestoration;
       root2.style.scrollSnapType = previousType;