efficient-storefront-blocks 0.75.0 → 0.77.0

package/dist/render/components/booking/BookingRegions.js

@@ -1 +1 @@
-"use client";import{jsx as e,jsxs as i}from"react/jsx-runtime";import{SAMPLE_CONFIRMATION as S,useBookingForm as z}from"./BookingFormState.js";import w from"efficient-web-builder/render/components/Btn";import c from"../WebFormField.js";import{formatMoneyInCurrency as D}from"../../lib/commerce.js";import{FREE_PRICE as B}from"../../lib/wheels/price-display.js";const d="w-full border-2 border-line bg-bg px-4 py-4 font-[family-name:var(--bk-value-font,var(--font-display))] text-[length:var(--bk-value-size,17px)] text-fg outline-none transition-colors placeholder:text-fg-dim hover:border-fg-dim focus:border-accent";function I(n,t){const a=Number(n);if(a===0)return B;try{return D(a,t)}catch{return`${t} ${n}`}}function $(n,t){try{return new Intl.DateTimeFormat(void 0,{hour:"numeric",minute:"2-digit",timeZone:t}).format(new Date(n))}catch{return new Date(n).toLocaleTimeString([],{hour:"numeric",minute:"2-digit"})}}function T(n,t){try{return new Intl.DateTimeFormat(void 0,{weekday:"long",day:"numeric",month:"long",year:"numeric",hour:"numeric",minute:"2-digit",timeZone:t,timeZoneName:"short"}).format(new Date(n))}catch{return new Date(n).toLocaleString()}}const p="font-[family-name:var(--bk-name-font,var(--font-mono))] text-[length:var(--bk-name-size,12px)]";function C({number:n,children:t}){return i("div",{className:"mb-4 flex items-center gap-3",children:[e("span",{className:"flex size-8 shrink-0 items-center justify-center rounded-full border border-line font-[family-name:var(--bk-step-font,var(--font-mono))] text-[length:var(--bk-step-size,11px)] font-semibold text-fg-dim",children:n}),e("h3",{className:"font-[family-name:var(--bk-step-font,var(--font-mono))] text-[length:var(--bk-step-size,12px)] font-semibold uppercase tracking-[0.2em] text-fg",children:t})]})}function _({eyebrow:n,heading:t,intro:a}){return i("div",{className:"mb-10 max-w-[760px]",children:[(n??"").trim()&&e("p",{className:"mb-4 font-mono text-[12px] font-semibold uppercase tracking-[0.24em] text-accent",children:n}),(t??"").trim()&&e("h2",{className:"font-heading2 text-[length:min(var(--size-headingMedium,44px),var(--sf-heading-max,9999px))] font-medium uppercase leading-[0.98] tracking-[-0.025em] text-fg max-[800px]:text-[length:min(var(--size-headingMedium,32px),var(--sf-heading-max,9999px))]",children:t}),(a??"").trim()&&e("p",{className:"mt-5 max-w-[660px] font-display text-[17px] leading-[1.65] text-fg-dim",children:a})]})}function j({style:n}={}){const{fieldPrefix:t,services:a,currency:f,serviceId:g,setServiceId:b,requiresPayment:h,date:x,earliestDate:v,setDate:k,setDateTouched:y,availability:o,loadingSlots:N,noSlotsMessage:s,selectedStart:u,setSelectedStart:l,customerTimezone:m}=z();return a?i("div",{className:"flex flex-col gap-10",style:n,children:[i("div",{children:[e(C,{number:"01",children:"Choose a service"}),e("div",{className:"grid gap-3 sm:grid-cols-2",children:a.map(r=>{const F=r.id===g;return i("button",{type:"button","aria-pressed":F,onClick:()=>b(r.id),className:`min-h-11 border p-4 text-left transition-colors ${F?"border-accent bg-accent/10":"border-line bg-bg hover:border-fg-dim"}`,children:[e("span",{className:"block font-[family-name:var(--bk-name-font,var(--font-display))] text-[length:var(--bk-name-size,18px)] font-medium text-fg",children:r.name}),i("span",{className:"mt-1 block font-[family-name:var(--bk-value-font,var(--font-mono))] text-[length:var(--bk-value-size,11px)] uppercase tracking-[0.14em] text-fg-dim",children:[r.durationMinutes," min · ",I(r.price,f)]}),r.description&&e("span",{className:"mt-3 block font-[family-name:var(--bk-note-font,var(--font-display))] text-[length:var(--bk-note-size,14px)] leading-[1.5] text-fg-dim",children:r.description})]},r.id)})}),h&&e("p",{className:"mt-3 font-[family-name:var(--bk-note-font,var(--font-mono))] text-[length:var(--bk-note-size,11px)] uppercase tracking-[0.14em] text-alert",role:"alert",children:"This service requires an upfront payment and cannot be booked through this form yet."})]}),i("div",{children:[e(C,{number:"02",children:"Choose a date and time"}),e(c,{separate:!0,htmlFor:`${t}-date`,label:"Date",required:!0,labelFace:p,children:e("input",{id:`${t}-date`,type:"date",min:v,value:x,onChange:r=>{y(!0),k(r.target.value)},className:d,required:!0})}),e("div",{className:"mt-4 grid grid-cols-2 gap-2 sm:grid-cols-3 min-[1200px]:grid-cols-4",role:"group","aria-label":"Available appointment times",children:N?e("p",{className:"col-span-full py-3 font-[family-name:var(--bk-note-font,var(--font-mono))] text-[length:var(--bk-note-size,11px)] uppercase tracking-[0.18em] text-fg-dim",children:"Loading times…"}):o?.slots.length?o.slots.map(r=>i("button",{type:"button","aria-pressed":u===r.start,onClick:()=>l(r.start),className:`min-h-11 border px-3 py-2 font-[family-name:var(--bk-value-font,var(--font-mono))] text-[length:var(--bk-value-size,12px)] font-semibold uppercase tracking-[0.12em] transition-colors ${u===r.start?"border-accent bg-accent text-bg":"border-line bg-bg text-fg hover:border-accent"}`,children:[e("span",{className:"block",children:$(r.start,m||o.timezone)}),m&&m!==o.timezone&&i("span",{className:"mt-0.5 block text-[9px] font-normal tracking-[0.08em] opacity-70",children:[$(r.start,o.timezone)," business"]})]},r.start)):s?e("p",{className:"col-span-full py-3 font-[family-name:var(--bk-note-font,var(--font-mono))] text-[length:var(--bk-note-size,11px)] uppercase tracking-[0.18em] text-fg-dim",role:"status",children:s}):null}),o?.timezone&&i("p",{className:"mt-3 font-[family-name:var(--bk-note-font,var(--font-mono))] text-[length:var(--bk-note-size,10px)] uppercase tracking-[0.16em] text-fg-dim",children:["Times shown in ",m||o.timezone,m&&m!==o.timezone?` · business timezone ${o.timezone}`:""]})]})]}):null}function R({buttonLabel:n,style:t}){const{fieldPrefix:a,editing:f,name:g,setName:b,email:h,setEmail:x,phone:v,setPhone:k,notes:y,setNotes:o,submitting:N,error:s,canSubmit:u}=z();return i("div",{className:"sf-card border border-line bg-bg p-5 min-[640px]:p-8",style:t,children:[e(C,{number:"03",children:"Your details"}),i("div",{className:"flex flex-col gap-4",children:[e(c,{separate:!0,htmlFor:`${a}-name`,label:"Name",required:!0,labelFace:p,children:e("input",{id:`${a}-name`,type:"text",autoComplete:"name",value:g,onChange:l=>b(l.target.value),className:d,required:!0})}),e(c,{separate:!0,htmlFor:`${a}-email`,label:"Email",required:!0,labelFace:p,children:e("input",{id:`${a}-email`,type:"email",inputMode:"email",autoComplete:"email",value:h,onChange:l=>x(l.target.value),className:d,required:!0})}),e(c,{separate:!0,htmlFor:`${a}-phone`,label:"Phone",labelFace:p,children:e("input",{id:`${a}-phone`,type:"tel",inputMode:"tel",autoComplete:"tel",value:v,onChange:l=>k(l.target.value),className:d})}),e(c,{separate:!0,htmlFor:`${a}-notes`,label:"What would you like to cover?",labelFace:p,children:e("textarea",{id:`${a}-notes`,rows:4,value:y,onChange:l=>o(l.target.value),className:`${d} resize-y`})})]}),s&&e("p",{className:"mt-4 font-[family-name:var(--bk-note-font,var(--font-mono))] text-[length:var(--bk-note-size,11px)] uppercase tracking-[0.16em] text-alert",role:"alert",children:s}),e(w,{type:f?"button":"submit",disabled:!u,arrow:null,className:"mt-6 w-full disabled:cursor-not-allowed disabled:opacity-50",children:N?"Submitting…":(n??"").trim()||"Book appointment"})]})}function Z({successMessage:n}){const{confirmation:t,customerTimezone:a}=z();return t?i("div",{className:"sf-card max-w-[760px] border border-line bg-bg p-6 min-[640px]:p-10",role:"status",children:[i("p",{className:"font-mono text-[12px] font-semibold uppercase tracking-[0.22em] text-accent",children:["Request received · ",t.bookingNumber]}),e("h3",{className:"mt-4 font-display text-[28px] font-medium uppercase text-fg",children:t.service}),e("p",{className:"mt-2 font-display text-[17px] text-fg-dim",children:T(t.startAt,t.customerTimezone||a||t.timezone)}),t.customerTimezone&&t.timezone!==t.customerTimezone&&i("p",{className:"mt-1 font-mono text-[10px] uppercase tracking-[0.16em] text-fg-dim",children:["Business time: ",T(t.startAt,t.timezone)]}),(n??"").trim()&&e("p",{className:"mt-5 max-w-[620px] font-serif text-[18px] italic leading-[1.6] text-fg-dim",children:n}),e(w,{href:`/book/${encodeURIComponent(t.manageToken)}`,newTab:t!==S,variant:"ghost",className:"mt-8",children:"Manage booking"})]}):null}export{j as BookingChoose,Z as BookingConfirmed,R as BookingDetails,_ as BookingHead};
+"use client";import{jsx as e,jsxs as r}from"react/jsx-runtime";import{SAMPLE_CONFIRMATION as w,useBookingForm as z}from"./BookingFormState.js";import $ from"efficient-web-builder/render/components/Btn";import c from"../WebFormField.js";import{formatAppointment as T,formatAppointmentTime as S}from"../../lib/booking/appointment-time.js";import{formatMoneyInCurrency as B}from"../../lib/commerce.js";import{FREE_PRICE as A}from"../../lib/wheels/price-display.js";const d="w-full border-2 border-line bg-bg px-4 py-4 font-[family-name:var(--bk-value-font,var(--font-display))] text-[length:var(--bk-value-size,17px)] text-fg outline-none transition-colors placeholder:text-fg-dim hover:border-fg-dim focus:border-accent";function q(o,t){const a=Number(o);if(a===0)return A;try{return B(a,t)}catch{return`${t} ${o}`}}const p="font-[family-name:var(--bk-name-font,var(--font-mono))] text-[length:var(--bk-name-size,12px)]";function C({number:o,children:t}){return r("div",{className:"mb-4 flex items-center gap-3",children:[e("span",{className:"flex size-8 shrink-0 items-center justify-center rounded-full border border-line font-[family-name:var(--bk-step-font,var(--font-mono))] text-[length:var(--bk-step-size,11px)] font-semibold text-fg-dim",children:o}),e("h3",{className:"font-[family-name:var(--bk-step-font,var(--font-mono))] text-[length:var(--bk-step-size,12px)] font-semibold uppercase tracking-[0.2em] text-fg",children:t})]})}function j({eyebrow:o,heading:t,intro:a}){return r("div",{className:"mb-10 max-w-[760px]",children:[(o??"").trim()&&e("p",{className:"mb-4 font-mono text-[12px] font-semibold uppercase tracking-[0.24em] text-accent",children:o}),(t??"").trim()&&e("h2",{className:"font-heading2 text-[length:min(var(--size-headingMedium,44px),var(--sf-heading-max,9999px))] font-medium uppercase leading-[0.98] tracking-[-0.025em] text-fg max-[800px]:text-[length:min(var(--size-headingMedium,32px),var(--sf-heading-max,9999px))]",children:t}),(a??"").trim()&&e("p",{className:"mt-5 max-w-[660px] font-display text-[17px] leading-[1.65] text-fg-dim",children:a})]})}function R({style:o}={}){const{fieldPrefix:t,services:a,currency:u,serviceId:b,setServiceId:g,requiresPayment:x,date:h,earliestDate:v,setDate:k,setDateTouched:N,availability:i,loadingSlots:y,noSlotsMessage:s,selectedStart:f,setSelectedStart:l,customerTimezone:m}=z();return a?r("div",{className:"flex flex-col gap-10",style:o,children:[r("div",{children:[e(C,{number:"01",children:"Choose a service"}),e("div",{className:"grid gap-3 sm:grid-cols-2",children:a.map(n=>{const F=n.id===b;return r("button",{type:"button","aria-pressed":F,onClick:()=>g(n.id),className:`min-h-11 border p-4 text-left transition-colors ${F?"border-accent bg-accent/10":"border-line bg-bg hover:border-fg-dim"}`,children:[e("span",{className:"block font-[family-name:var(--bk-name-font,var(--font-display))] text-[length:var(--bk-name-size,18px)] font-medium text-fg",children:n.name}),r("span",{className:"mt-1 block font-[family-name:var(--bk-value-font,var(--font-mono))] text-[length:var(--bk-value-size,11px)] uppercase tracking-[0.14em] text-fg-dim",children:[n.durationMinutes," min · ",q(n.price,u)]}),n.description&&e("span",{className:"mt-3 block font-[family-name:var(--bk-note-font,var(--font-display))] text-[length:var(--bk-note-size,14px)] leading-[1.5] text-fg-dim",children:n.description})]},n.id)})}),x&&e("p",{className:"mt-3 font-[family-name:var(--bk-note-font,var(--font-mono))] text-[length:var(--bk-note-size,11px)] uppercase tracking-[0.14em] text-alert",role:"alert",children:"This service requires an upfront payment and cannot be booked through this form yet."})]}),r("div",{children:[e(C,{number:"02",children:"Choose a date and time"}),e(c,{separate:!0,htmlFor:`${t}-date`,label:"Date",required:!0,labelFace:p,children:e("input",{id:`${t}-date`,type:"date",min:v,value:h,onChange:n=>{N(!0),k(n.target.value)},className:d,required:!0})}),e("div",{className:"mt-4 grid grid-cols-2 gap-2 sm:grid-cols-3 min-[1200px]:grid-cols-4",role:"group","aria-label":"Available appointment times",children:y?e("p",{className:"col-span-full py-3 font-[family-name:var(--bk-note-font,var(--font-mono))] text-[length:var(--bk-note-size,11px)] uppercase tracking-[0.18em] text-fg-dim",children:"Loading times…"}):i?.slots.length?i.slots.map(n=>r("button",{type:"button","aria-pressed":f===n.start,onClick:()=>l(n.start),className:`min-h-11 border px-3 py-2 font-[family-name:var(--bk-value-font,var(--font-mono))] text-[length:var(--bk-value-size,12px)] font-semibold uppercase tracking-[0.12em] transition-colors ${f===n.start?"border-accent bg-accent text-bg":"border-line bg-bg text-fg hover:border-accent"}`,children:[e("span",{className:"block",children:S(n.start,m||i.timezone)}),m&&m!==i.timezone&&r("span",{className:"mt-0.5 block text-[9px] font-normal tracking-[0.08em] opacity-70",children:[S(n.start,i.timezone)," business"]})]},n.start)):s?e("p",{className:"col-span-full py-3 font-[family-name:var(--bk-note-font,var(--font-mono))] text-[length:var(--bk-note-size,11px)] uppercase tracking-[0.18em] text-fg-dim",role:"status",children:s}):null}),i?.timezone&&r("p",{className:"mt-3 font-[family-name:var(--bk-note-font,var(--font-mono))] text-[length:var(--bk-note-size,10px)] uppercase tracking-[0.16em] text-fg-dim",children:["Times shown in ",m||i.timezone,m&&m!==i.timezone?` · business timezone ${i.timezone}`:""]})]})]}):null}function O({buttonLabel:o,style:t}){const{fieldPrefix:a,editing:u,name:b,setName:g,email:x,setEmail:h,phone:v,setPhone:k,notes:N,setNotes:i,submitting:y,error:s,canSubmit:f}=z();return r("div",{className:"sf-card border border-line bg-bg p-5 min-[640px]:p-8",style:t,children:[e(C,{number:"03",children:"Your details"}),r("div",{className:"flex flex-col gap-4",children:[e(c,{separate:!0,htmlFor:`${a}-name`,label:"Name",required:!0,labelFace:p,children:e("input",{id:`${a}-name`,type:"text",autoComplete:"name",value:b,onChange:l=>g(l.target.value),className:d,required:!0})}),e(c,{separate:!0,htmlFor:`${a}-email`,label:"Email",required:!0,labelFace:p,children:e("input",{id:`${a}-email`,type:"email",inputMode:"email",autoComplete:"email",value:x,onChange:l=>h(l.target.value),className:d,required:!0})}),e(c,{separate:!0,htmlFor:`${a}-phone`,label:"Phone",labelFace:p,children:e("input",{id:`${a}-phone`,type:"tel",inputMode:"tel",autoComplete:"tel",value:v,onChange:l=>k(l.target.value),className:d})}),e(c,{separate:!0,htmlFor:`${a}-notes`,label:"What would you like to cover?",labelFace:p,children:e("textarea",{id:`${a}-notes`,rows:4,value:N,onChange:l=>i(l.target.value),className:`${d} resize-y`})})]}),s&&e("p",{className:"mt-4 font-[family-name:var(--bk-note-font,var(--font-mono))] text-[length:var(--bk-note-size,11px)] uppercase tracking-[0.16em] text-alert",role:"alert",children:s}),e($,{type:u?"button":"submit",disabled:!f,arrow:null,className:"mt-6 w-full disabled:cursor-not-allowed disabled:opacity-50",children:y?"Submitting…":(o??"").trim()||"Book appointment"})]})}function U({successMessage:o}){const{confirmation:t,customerTimezone:a}=z();return t?r("div",{className:"sf-card max-w-[760px] border border-line bg-bg p-6 min-[640px]:p-10",role:"status",children:[r("p",{className:"font-mono text-[12px] font-semibold uppercase tracking-[0.22em] text-accent",children:["Request received · ",t.bookingNumber]}),e("h3",{className:"mt-4 font-display text-[28px] font-medium uppercase text-fg",children:t.service}),e("p",{className:"mt-2 font-display text-[17px] text-fg-dim",children:T(t.startAt,t.customerTimezone||a||t.timezone)}),t.customerTimezone&&t.timezone!==t.customerTimezone&&r("p",{className:"mt-1 font-mono text-[10px] uppercase tracking-[0.16em] text-fg-dim",children:["Business time: ",T(t.startAt,t.timezone)]}),(o??"").trim()&&e("p",{className:"mt-5 max-w-[620px] font-serif text-[18px] italic leading-[1.6] text-fg-dim",children:o}),e($,{href:`/book/${encodeURIComponent(t.manageToken)}`,newTab:t!==w,variant:"ghost",className:"mt-8",children:"Manage booking"})]}):null}export{R as BookingChoose,U as BookingConfirmed,O as BookingDetails,j as BookingHead};

package/dist/render/components/catalog/CatalogFilterBar.d.ts

@@ -1,5 +1,5 @@
 import { type CatalogVehicleControl } from "./CatalogVehiclePicker.js";
-import type { FinishFamily, Process } from "../../lib/api/index.js";
+import type { FinishFamily } from "../../lib/api/index.js";
 import { type FieldUsageAnswer } from "../../lib/content/field-usage.js";
 import { type FilterBarLayout } from "../../lib/sections/catalog-filter-layout.js";
 import { type CatalogFilterState, type SortKey } from "../../lib/wheels/catalog-filters.js";
@@ -15,7 +15,7 @@ export interface FilterBarVisibility {
 }
 export interface CatalogFilterBarProps {
     filters: CatalogFilterState;
-    setProcess: (v: Process | null) => void;
+    setProcess: (v: string | null) => void;
     setSize: (v: number | null) => void;
     setLugs: (v: number | null) => void;
     setFinish: (v: FinishFamily | null) => void;
@@ -27,7 +27,7 @@ export interface CatalogFilterBarProps {
     lugOptions?: readonly number[];
     sizeOptions?: readonly number[];
     finishOptions?: readonly string[];
-    scrollProcess: Process | null;
+    scrollProcess: string | null;
     show?: FilterBarVisibility;
     picker?: CatalogVehicleControl;
     resultsLink?: {
@@ -35,7 +35,7 @@ export interface CatalogFilterBarProps {
         label: string;
     };
     layout?: FilterBarLayout;
-    processOptions?: readonly Process[];
+    processOptions?: readonly string[];
     optionsReported?: boolean;
     fieldUsage?: readonly FieldUsageAnswer[];
 }

package/dist/render/components/catalog/CatalogFilterBar.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as U,jsxs as n}from"react/jsx-runtime";import{useState as Q}from"react";import ee from"efficient-web-builder/render/components/RMark";import{FilterPill as A,OptButton as q,PanelTitle as $,PillButton as me}from"./FilterPill.js";import le from"../ThemedSelect.js";import{useCatalogFilterLabels as he}from"./CatalogFilterLabels.js";import{CatalogVehicleNextRow as ge,CatalogVehicleFieldRow as fe,CatalogVehicleRow as re,CatalogVehicleSheet as be}from"./CatalogVehiclePicker.js";import{facetFieldKey as ne,keepForFilter as xe,orderByAnswers as ve}from"../../lib/content/field-usage.js";import{PLP_ONE_VALUE_MAX as ie}from"../../lib/wheels/plp-filters.js";import{DEFAULT_FILTER_BAR_LAYOUT as Ce}from"../../lib/sections/catalog-filter-layout.js";import{SORT_LABELS as O}from"../../lib/wheels/catalog-filters.js";import{FINISH_FAMILY_SWATCHES as ae}from"../../lib/wheels/finish-defaults.js";import{VEHICLE_FIELD_ORDER as Ne}from"../../lib/wheels/vehicle-field-focus.js";const u={body:"text-[length:var(--size-body,14px)]",labelXs:"text-[length:var(--size-label,10px)]",labelSmall:"text-[length:var(--size-label,12px)]",labelLarge:"text-[length:var(--size-label,13px)]",labelXl:"text-[length:var(--size-label,14px)]"},ye=["FusionForge®","Precision Forged","Monoblock Cast"];function te(t){return t==="FusionForge®"?n(U,{children:["FusionForge",e(ee,{})]}):t}const Y={size:ne("diameters","alloy-wheel"),finish:ne("finishes","alloy-wheel")};function oe(t,o){return ve(t,s=>Y[String(s.key)],o??[],"filterOrder")}function Fe({processCount:t,sizeCount:o,lugCount:s,finishCount:m,optionsReported:f,fieldUsage:R}){const b=M=>!f||M>ie,F=xe(R??[]);return{process:t>ie,size:F(Y.size)&&b(o),lugs:b(s),finish:F(Y.finish)&&b(m)}}function N(t,o){return t===o?null:o}function se({href:t,label:o}){return e("a",{href:t,"data-results-link":!0,className:`inline-block self-start border-0 border-b border-line bg-transparent pb-2 font-mono ${u.labelLarge} uppercase tracking-[0.2em] text-fg transition-colors hover:text-fg-dim`,children:o})}function ke({filters:t,setProcess:o,setSize:s,setLugs:m,setFinish:f,setPriceMin:R,setPriceMax:b,setSort:F,clearAll:M,total:x,scrollProcess:B,show:h,picker:c,lugOptions:I=[],sizeOptions:j=[],finishOptions:G,layout:de=Ce,processOptions:P=ye,resultsLink:v,optionsReported:ue=!1,fieldUsage:V}){const[p,g]=Q(null),[K,X]=Q(null),d=he(),{process:k,size:L,lugs:_,finish:T,priceMin:D,priceMax:W,sort:Z}=t,H=G?ae.filter(l=>G.includes(l.f)):ae,E=Fe({processCount:P.length,sizeCount:j.length,lugCount:I.length,finishCount:H.length,optionsReported:ue,fieldUsage:V}),i={process:(h?.process??!0)&&E.process,size:(h?.size??!0)&&E.size,lugs:(h?.lugs??!0)&&E.lugs,finish:(h?.finish??!0)&&E.finish,price:h?.price??!0,vehicle:(h?.vehicle??!0)&&!!c,count:h?.count??!0,sort:h?.sort??!0},C={process:k?1:0,size:L?1:0,lugs:_?1:0,finish:T?1:0,price:D!=null||W!=null?1:0,vehicle:c?.appliedName?1:0},J=()=>{M(),c?.clear(),g(null),X(null)};if(de==="columns"){const l=r=>X(K===r?null:r),a=[];i.vehicle&&c&&a.push(n(y,{name:"vehicle",label:d.vehicle,children:[Ne.map(r=>e(fe,{field:r,picker:c,open:K===r,onOpenRequest:l,onClose:()=>X(null)},r)),e(ge,{picker:c,onOpenRequest:l})]},"vehicle"));const z=[];return i.process&&z.push(e(y,{name:"process",label:d.process,rowsAreOptions:!0,children:P.map(r=>e(S,{active:k===r,onClick:()=>o(N(k,r)),children:te(r)},r))},"process")),i.size&&z.push(e(y,{name:"size",label:d.size,rowsAreOptions:!0,children:j.map(r=>n(S,{active:L===r,onClick:()=>s(N(L,r)),children:[r,'"']},r))},"size")),i.lugs&&z.push(e(y,{name:"lugs",label:d.lugs,rowsAreOptions:!0,children:I.map(r=>n(S,{active:_===r,onClick:()=>m(N(_,r)),children:[r,"-Lug"]},r))},"lugs")),i.finish&&z.push(e(y,{name:"finish",label:d.finish,rowsAreOptions:!0,children:H.map(r=>e(S,{active:T===r.f,onClick:()=>f(T===r.f?null:r.f),children:r.label},r.f))},"finish")),a.push(...oe(z,V)),i.price&&a.push(n(y,{name:"price",label:d.price,children:[e(pe,{label:"Min",value:D,onChange:R,ariaLabel:"Minimum price per wheel"}),e(pe,{label:"Max",value:W,onChange:b,ariaLabel:"Maximum price per wheel"})]},"price")),n("div",{className:"@container",children:[n("div",{className:"border-t border-line px-[var(--sf-site-gutter,40px)] pb-12 pt-10 @max-[720px]:px-4 @max-[720px]:pb-10 @max-[720px]:pt-8",children:[(i.count||i.sort)&&n("div",{className:"mb-10 flex flex-wrap items-center gap-x-6 gap-y-3 @max-[720px]:mb-8",children:[i.count&&n("span",{className:`font-mono ${u.labelLarge} uppercase tracking-[0.2em] text-fg-dim`,children:[x," ",x===1?"result":"results"]}),i.sort&&n("div",{className:"ml-auto flex items-center gap-5",children:[e("button",{type:"button",onClick:J,className:`font-mono ${u.labelLarge} uppercase tracking-[0.2em] text-fg-dim transition-colors hover:text-fg`,children:"Clear All"}),e(le,{value:Z,onChange:r=>F(r.target.value),className:`border-b border-line bg-transparent pb-2 font-mono ${u.labelLarge} uppercase tracking-[0.2em] text-fg`,children:Object.keys(O).map(r=>e("option",{value:r,children:O[r]},r))})]})]}),e("div",{"data-filter-columns":!0,className:`grid grid-cols-1 gap-x-[72px] gap-y-10 ${Le[a.length]??""}`,children:a}),v&&e("div",{className:"mt-10 flex",children:e(se,{href:v.href,label:v.label})})]}),i.vehicle&&c&&e(re,{picker:c,total:x})]})}const w=[];return i.process&&w.push(n(A,{name:"process",label:B?n(U,{children:[e("span",{className:"text-accent @min-[720px]:hidden",children:B==="FusionForge®"?n(U,{children:["FusionForge",e(ee,{})]}):B}),e("span",{className:"hidden @min-[720px]:inline",children:d.process})]}):d.process,badge:C.process,open:p==="process",onToggle:()=>g(p==="process"?null:"process"),children:[e($,{children:"Series · single-select"}),e("div",{className:"flex flex-wrap gap-2",role:"radiogroup","aria-label":"Process series",children:P.map(l=>{const a=k===l;return e(q,{active:a,role:"radio",ariaChecked:a,onClick:()=>o(N(k,l)),children:te(l)},l)})})]},"process")),i.size&&w.push(n(A,{name:"size",label:d.size,badge:C.size,open:p==="size",onToggle:()=>g(p==="size"?null:"size"),children:[e($,{children:"Diameter · single-select"}),e("div",{className:"flex flex-wrap gap-2",role:"radiogroup","aria-label":"Wheel diameter",children:j.map(l=>{const a=L===l;return n(q,{active:a,role:"radio",ariaChecked:a,onClick:()=>s(N(L,l)),children:[l,'"']},l)})})]},"size")),i.lugs&&w.push(n(A,{name:"lugs",label:d.lugs,badge:C.lugs,open:p==="lugs",onToggle:()=>g(p==="lugs"?null:"lugs"),children:[e($,{children:"Lug count · single-select"}),e("div",{className:"flex flex-wrap gap-2",role:"radiogroup","aria-label":"Lug count",children:I.map(l=>{const a=_===l;return n(q,{active:a,role:"radio",ariaChecked:a,onClick:()=>m(N(_,l)),children:[l,"-Lug"]},l)})})]},"lugs")),i.finish&&w.push(n(A,{name:"finish",label:d.finish,badge:C.finish,open:p==="finish",onToggle:()=>g(p==="finish"?null:"finish"),children:[e($,{children:"Color family · single-select"}),e("div",{className:"flex flex-col gap-2",role:"radiogroup","aria-label":"Finish color family",children:H.map(l=>{const a=T===l.f;return n("button",{type:"button",role:"radio","aria-checked":a,onClick:()=>f(a?null:l.f),className:["flex items-center gap-3 border px-3 py-2 text-left transition-colors",a?"border-accent text-fg":"border-line hover:border-fg-dim"].join(" "),children:[e("span",{className:"block h-3.5 w-3.5 shrink-0 rounded-full border border-line",style:{background:l.hex}}),e("span",{className:`font-mono ${u.labelSmall} uppercase tracking-[0.18em]`,style:a?void 0:{color:"color-mix(in oklab, currentColor 80%, transparent)"},children:l.label}),a&&e("span",{"aria-hidden":!0,className:"ml-auto text-accent",children:"●"})]},l.f)})})]},"finish")),n("div",{className:"@container sticky top-[67px] z-40 border-b border-line backdrop-blur",style:{background:"color-mix(in oklab, var(--bg) 92%, transparent)"},children:[n("div",{className:"flex items-center gap-6 px-[var(--sf-site-gutter,40px)] py-4 @max-[720px]:flex-wrap @max-[720px]:items-stretch @max-[720px]:gap-2 @max-[720px]:px-4 @max-[720px]:py-3",children:[n("div",{className:"flex flex-wrap items-center gap-1 @max-[720px]:gap-2",children:[i.count&&n("span",{className:`mr-3 border-r border-line pr-4 font-mono ${u.labelLarge} uppercase tracking-[0.2em] text-fg-dim @max-[720px]:hidden`,children:[x," ",x===1?"result":"results"]}),oe(w,V),i.price&&n(A,{name:"price",label:d.price,badge:C.price,open:p==="price",onToggle:()=>g(p==="price"?null:"price"),children:[e($,{children:"Price range (per wheel)"}),n("div",{className:"mt-1 flex items-center gap-2",children:[e("input",{type:"number",placeholder:"$ Min",value:D??"",onChange:l=>R(l.target.value?Number(l.target.value):null),className:`w-full bg-bg border border-line px-3 py-3 font-mono ${u.labelXl} text-fg`}),e("span",{className:`font-mono ${u.labelSmall} text-fg-dim`,children:"—"}),e("input",{type:"number",placeholder:"$ Max",value:W??"",onChange:l=>b(l.target.value?Number(l.target.value):null),className:`w-full bg-bg border border-line px-3 py-3 font-mono ${u.labelXl} text-fg`})]})]}),i.vehicle&&c&&e(me,{label:d.vehicle,badge:C.vehicle,open:p==="vehicle",onToggle:()=>g(p==="vehicle"?null:"vehicle")})]}),v&&e("div",{className:`flex items-center @max-[720px]:hidden ${i.sort?"":"ml-auto"}`,children:e(se,{href:v.href,label:v.label})}),i.sort&&n("div",{className:"ml-auto flex items-center gap-3 @max-[720px]:hidden",children:[e("button",{type:"button",onClick:J,className:`font-mono ${u.labelLarge} uppercase tracking-[0.2em] text-fg-dim transition-colors hover:text-accent`,children:"Clear All"}),e(le,{value:Z,onChange:l=>F(l.target.value),className:`border border-line bg-transparent px-4 py-3 font-mono ${u.labelLarge} uppercase tracking-[0.2em] text-fg`,children:Object.keys(O).map(l=>e("option",{value:l,children:O[l]},l))})]})]}),i.vehicle&&c&&p==="vehicle"&&e(be,{picker:c,onClose:()=>g(null)}),i.vehicle&&c&&e(re,{picker:c,total:x})]})}const Le={1:"@min-[720px]:grid-cols-1",2:"@min-[720px]:grid-cols-2",3:"@min-[720px]:grid-cols-2 @min-[1100px]:grid-cols-3",4:"@min-[720px]:grid-cols-2 @min-[1100px]:grid-cols-4",5:"@min-[720px]:grid-cols-2 @min-[1100px]:grid-cols-3 @min-[1400px]:grid-cols-5",6:"@min-[720px]:grid-cols-2 @min-[1100px]:grid-cols-3 @min-[1400px]:grid-cols-6"},ce=`flex w-full items-center justify-between gap-4 border-b py-3 text-left ${u.body}`;function y({name:t,label:o,rowsAreOptions:s,children:m}){return n("div",{"data-filter-column":t,className:"flex flex-col gap-6",children:[e("div",{className:`font-mono ${u.labelXs} uppercase tracking-[0.34em] text-fg-dim`,children:o}),e("div",{role:s?"radiogroup":void 0,"aria-label":s?o:void 0,children:m})]})}function S({active:t,onClick:o,children:s}){return e("button",{type:"button",role:"radio","aria-checked":t,onClick:o,className:[ce,"transition-colors",t?"border-fg text-fg":"border-line text-fg-dim hover:text-fg"].join(" "),children:e("span",{children:s})})}function pe({label:t,value:o,onChange:s,ariaLabel:m}){return n("label",{className:`${ce} border-line`,children:[e("span",{className:"text-fg-dim",children:t}),e("input",{type:"number",inputMode:"numeric","aria-label":m,placeholder:"Any",value:o??"",onChange:f=>s(f.target.value?Number(f.target.value):null),className:"w-24 bg-transparent text-right text-fg outline-none placeholder:text-fg-dim"})]})}export{ke as default,Fe as filterBarFacetsWithChoice};
+"use client";import{jsx as e,jsxs as i,Fragment as ue}from"react/jsx-runtime";import{useState as Q}from"react";import{withRMark as W}from"efficient-web-builder/render/components/RMark";import{FilterPill as A,OptButton as H,PanelTitle as z,PillButton as de}from"./FilterPill.js";import ee from"../ThemedSelect.js";import{useCatalogFilterLabels as he}from"./CatalogFilterLabels.js";import{CatalogVehicleNextRow as ge,CatalogVehicleFieldRow as fe,CatalogVehicleRow as le,CatalogVehicleSheet as be}from"./CatalogVehiclePicker.js";import{facetFieldKey as re,keepForFilter as xe,orderByAnswers as ve}from"../../lib/content/field-usage.js";import{PLP_ONE_VALUE_MAX as ie}from"../../lib/wheels/plp-filters.js";import{DEFAULT_FILTER_BAR_LAYOUT as Ce}from"../../lib/sections/catalog-filter-layout.js";import{SORT_LABELS as M}from"../../lib/wheels/catalog-filters.js";import{FINISH_FAMILY_SWATCHES as ae}from"../../lib/wheels/finish-defaults.js";import{VEHICLE_FIELD_ORDER as Ne}from"../../lib/wheels/vehicle-field-focus.js";import{CONTENT_CAP_GUTTER as ne}from"../../lib/sections/content-cap-gutter.js";const u={body:"text-[length:var(--size-body,14px)]",labelXs:"text-[length:var(--size-label,10px)]",labelSmall:"text-[length:var(--size-label,12px)]",labelLarge:"text-[length:var(--size-label,13px)]",labelXl:"text-[length:var(--size-label,14px)]"},q={size:re("diameters","alloy-wheel"),finish:re("finishes","alloy-wheel")};function te(o,t){return ve(o,s=>q[String(s.key)],t??[],"filterOrder")}function ye({processCount:o,sizeCount:t,lugCount:s,finishCount:d,optionsReported:f,fieldUsage:$}){const b=S=>!f||S>ie,k=xe($??[]);return{process:o>ie,size:k(q.size)&&b(t),lugs:b(s),finish:k(q.finish)&&b(d)}}function N(o,t){return o===t?null:t}function oe({href:o,label:t}){return e("a",{href:o,"data-results-link":!0,className:`inline-block self-start border-0 border-b border-line bg-transparent pb-2 font-mono ${u.labelLarge} uppercase tracking-[0.2em] text-fg transition-colors hover:text-fg-dim`,children:t})}function ke({filters:o,setProcess:t,setSize:s,setLugs:d,setFinish:f,setPriceMin:$,setPriceMax:b,setSort:k,clearAll:S,total:x,scrollProcess:G,show:h,picker:c,lugOptions:B=[],sizeOptions:j=[],finishOptions:Y,layout:pe=Ce,processOptions:I=[],resultsLink:v,optionsReported:me=!1,fieldUsage:P}){const[p,g]=Q(null),[K,V]=Q(null),m=he(),{process:L,size:F,lugs:_,finish:E,priceMin:X,priceMax:D,sort:Z}=o,U=Y?ae.filter(l=>Y.includes(l.f)):ae,R=ye({processCount:I.length,sizeCount:j.length,lugCount:B.length,finishCount:U.length,optionsReported:me,fieldUsage:P}),a={process:(h?.process??!0)&&R.process,size:(h?.size??!0)&&R.size,lugs:(h?.lugs??!0)&&R.lugs,finish:(h?.finish??!0)&&R.finish,price:h?.price??!0,vehicle:(h?.vehicle??!0)&&!!c,count:h?.count??!0,sort:h?.sort??!0},C={process:L?1:0,size:F?1:0,lugs:_?1:0,finish:E?1:0,price:X!=null||D!=null?1:0,vehicle:c?.appliedName?1:0},J=()=>{S(),c?.clear(),g(null),V(null)};if(pe==="columns"){const l=r=>V(K===r?null:r),n=[];a.vehicle&&c&&n.push(i(y,{name:"vehicle",label:m.vehicle,children:[Ne.map(r=>e(fe,{field:r,picker:c,open:K===r,onOpenRequest:l,onClose:()=>V(null)},r)),e(ge,{picker:c,onOpenRequest:l})]},"vehicle"));const w=[];return a.process&&w.push(e(y,{name:"process",label:m.process,rowsAreOptions:!0,children:I.map(r=>e(O,{active:L===r,onClick:()=>t(N(L,r)),children:W(r)},r))},"process")),a.size&&w.push(e(y,{name:"size",label:m.size,rowsAreOptions:!0,children:j.map(r=>i(O,{active:F===r,onClick:()=>s(N(F,r)),children:[r,'"']},r))},"size")),a.lugs&&w.push(e(y,{name:"lugs",label:m.lugs,rowsAreOptions:!0,children:B.map(r=>i(O,{active:_===r,onClick:()=>d(N(_,r)),children:[r,"-Lug"]},r))},"lugs")),a.finish&&w.push(e(y,{name:"finish",label:m.finish,rowsAreOptions:!0,children:U.map(r=>e(O,{active:E===r.f,onClick:()=>f(E===r.f?null:r.f),children:r.label},r.f))},"finish")),n.push(...te(w,P)),a.price&&n.push(i(y,{name:"price",label:m.price,children:[e(ce,{label:"Min",value:X,onChange:$,ariaLabel:"Minimum price per wheel"}),e(ce,{label:"Max",value:D,onChange:b,ariaLabel:"Maximum price per wheel"})]},"price")),i("div",{className:"@container",children:[i("div",{className:`border-t border-line ${ne} pb-12 pt-10 @max-[720px]:px-4 @max-[720px]:pb-10 @max-[720px]:pt-8`,children:[(a.count||a.sort)&&i("div",{className:"mb-10 flex flex-wrap items-center gap-x-6 gap-y-3 @max-[720px]:mb-8",children:[a.count&&i("span",{className:`font-mono ${u.labelLarge} uppercase tracking-[0.2em] text-fg-dim`,children:[x," ",x===1?"result":"results"]}),a.sort&&i("div",{className:"ml-auto flex items-center gap-5",children:[e("button",{type:"button",onClick:J,className:`font-mono ${u.labelLarge} uppercase tracking-[0.2em] text-fg-dim transition-colors hover:text-fg`,children:"Clear All"}),e(ee,{"aria-label":"Sort results",value:Z,onChange:r=>k(r.target.value),className:`border-b border-line bg-transparent pb-2 font-mono ${u.labelLarge} uppercase tracking-[0.2em] text-fg`,children:Object.keys(M).map(r=>e("option",{value:r,children:M[r]},r))})]})]}),e("div",{"data-filter-columns":!0,className:`grid grid-cols-1 gap-x-[72px] gap-y-10 ${Le[n.length]??""}`,children:n}),v&&e("div",{className:"mt-10 flex",children:e(oe,{href:v.href,label:v.label})})]}),a.vehicle&&c&&e(le,{picker:c,total:x})]})}const T=[];return a.process&&T.push(i(A,{name:"process",label:G?i(ue,{children:[e("span",{className:"text-accent @min-[720px]:hidden",children:W(G)}),e("span",{className:"hidden @min-[720px]:inline",children:m.process})]}):m.process,badge:C.process,open:p==="process",onToggle:()=>g(p==="process"?null:"process"),children:[e(z,{children:"Series · single-select"}),e("div",{className:"flex flex-wrap gap-2",role:"radiogroup","aria-label":"Process series",children:I.map(l=>{const n=L===l;return e(H,{active:n,role:"radio",ariaChecked:n,onClick:()=>t(N(L,l)),children:W(l)},l)})})]},"process")),a.size&&T.push(i(A,{name:"size",label:m.size,badge:C.size,open:p==="size",onToggle:()=>g(p==="size"?null:"size"),children:[e(z,{children:"Diameter · single-select"}),e("div",{className:"flex flex-wrap gap-2",role:"radiogroup","aria-label":"Wheel diameter",children:j.map(l=>{const n=F===l;return i(H,{active:n,role:"radio",ariaChecked:n,onClick:()=>s(N(F,l)),children:[l,'"']},l)})})]},"size")),a.lugs&&T.push(i(A,{name:"lugs",label:m.lugs,badge:C.lugs,open:p==="lugs",onToggle:()=>g(p==="lugs"?null:"lugs"),children:[e(z,{children:"Lug count · single-select"}),e("div",{className:"flex flex-wrap gap-2",role:"radiogroup","aria-label":"Lug count",children:B.map(l=>{const n=_===l;return i(H,{active:n,role:"radio",ariaChecked:n,onClick:()=>d(N(_,l)),children:[l,"-Lug"]},l)})})]},"lugs")),a.finish&&T.push(i(A,{name:"finish",label:m.finish,badge:C.finish,open:p==="finish",onToggle:()=>g(p==="finish"?null:"finish"),children:[e(z,{children:"Color family · single-select"}),e("div",{className:"flex flex-col gap-2",role:"radiogroup","aria-label":"Finish color family",children:U.map(l=>{const n=E===l.f;return i("button",{type:"button",role:"radio","aria-checked":n,onClick:()=>f(n?null:l.f),className:["flex items-center gap-3 border px-3 py-2 text-left transition-colors",n?"border-accent text-fg":"border-line hover:border-fg-dim"].join(" "),children:[e("span",{className:"block h-3.5 w-3.5 shrink-0 rounded-full border border-line",style:{background:l.hex}}),e("span",{className:`font-mono ${u.labelSmall} uppercase tracking-[0.18em]`,style:n?void 0:{color:"color-mix(in oklab, currentColor 80%, transparent)"},children:l.label}),n&&e("span",{"aria-hidden":!0,className:"ml-auto text-accent",children:"●"})]},l.f)})})]},"finish")),i("div",{className:"@container sticky top-[67px] z-40 border-b border-line backdrop-blur",style:{background:"color-mix(in oklab, var(--bg) 92%, transparent)"},children:[i("div",{className:`flex items-center gap-6 ${ne} py-4 @max-[720px]:flex-wrap @max-[720px]:items-stretch @max-[720px]:gap-2 @max-[720px]:px-4 @max-[720px]:py-3`,children:[i("div",{className:"flex flex-wrap items-center gap-1 @max-[720px]:basis-full @max-[720px]:gap-2",children:[a.count&&i("span",{className:`mr-3 border-r border-line pr-4 font-mono ${u.labelLarge} uppercase tracking-[0.2em] text-fg-dim @max-[720px]:hidden`,children:[x," ",x===1?"result":"results"]}),te(T,P),a.price&&i(A,{name:"price",label:m.price,badge:C.price,open:p==="price",onToggle:()=>g(p==="price"?null:"price"),children:[e(z,{children:"Price range (per wheel)"}),i("div",{className:"mt-1 flex items-center gap-2",children:[e("input",{type:"number",placeholder:"Min","aria-label":"Minimum price",value:X??"",onChange:l=>$(l.target.value?Number(l.target.value):null),className:`w-full bg-bg border border-line px-3 py-3 font-mono ${u.labelXl} text-fg`}),e("span",{className:`font-mono ${u.labelSmall} text-fg-dim`,children:"—"}),e("input",{type:"number",placeholder:"Max","aria-label":"Maximum price",value:D??"",onChange:l=>b(l.target.value?Number(l.target.value):null),className:`w-full bg-bg border border-line px-3 py-3 font-mono ${u.labelXl} text-fg`})]})]}),a.vehicle&&c&&e(de,{label:m.vehicle,badge:C.vehicle,open:p==="vehicle",onToggle:()=>g(p==="vehicle"?null:"vehicle")})]}),v&&e("div",{className:`flex items-center ${a.sort?"":"ml-auto"}`,children:e(oe,{href:v.href,label:v.label})}),a.sort&&i("div",{className:"ml-auto flex items-center gap-3",children:[e("button",{type:"button",onClick:J,className:`font-mono ${u.labelLarge} uppercase tracking-[0.2em] text-fg-dim transition-colors hover:text-accent`,children:"Clear All"}),e(ee,{"aria-label":"Sort results",value:Z,onChange:l=>k(l.target.value),className:`border border-line bg-transparent px-4 py-3 font-mono ${u.labelLarge} uppercase tracking-[0.2em] text-fg`,children:Object.keys(M).map(l=>e("option",{value:l,children:M[l]},l))})]})]}),a.vehicle&&c&&p==="vehicle"&&e(be,{picker:c,onClose:()=>g(null)}),a.vehicle&&c&&e(le,{picker:c,total:x})]})}const Le={1:"@min-[720px]:grid-cols-1",2:"@min-[720px]:grid-cols-2",3:"@min-[720px]:grid-cols-2 @min-[1100px]:grid-cols-3",4:"@min-[720px]:grid-cols-2 @min-[1100px]:grid-cols-4",5:"@min-[720px]:grid-cols-2 @min-[1100px]:grid-cols-3 @min-[1400px]:grid-cols-5",6:"@min-[720px]:grid-cols-2 @min-[1100px]:grid-cols-3 @min-[1400px]:grid-cols-6"},se=`flex w-full items-center justify-between gap-4 border-b py-3 text-left ${u.body}`;function y({name:o,label:t,rowsAreOptions:s,children:d}){return i("div",{"data-filter-column":o,className:"flex flex-col gap-6",children:[e("div",{className:`font-mono ${u.labelXs} uppercase tracking-[0.34em] text-fg-dim`,children:t}),e("div",{role:s?"radiogroup":void 0,"aria-label":s?t:void 0,children:d})]})}function O({active:o,onClick:t,children:s}){return e("button",{type:"button",role:"radio","aria-checked":o,onClick:t,className:[se,"transition-colors",o?"border-fg text-fg":"border-line text-fg-dim hover:text-fg"].join(" "),children:e("span",{children:s})})}function ce({label:o,value:t,onChange:s,ariaLabel:d}){return i("label",{className:`${se} border-line`,children:[e("span",{className:"text-fg-dim",children:o}),e("input",{type:"number",inputMode:"numeric","aria-label":d,placeholder:"Any",value:t??"",onChange:f=>s(f.target.value?Number(f.target.value):null),className:"w-24 bg-transparent text-right text-fg outline-none placeholder:text-fg-dim"})]})}export{ke as default,ye as filterBarFacetsWithChoice};

package/dist/render/components/catalog/CatalogFilterContext.d.ts

@@ -1,4 +1,4 @@
-import type { FinishFamily, Process } from "../../lib/api/index.js";
+import type { FinishFamily } from "../../lib/api/index.js";
 import { type CatalogFilterState, type SortKey } from "../../lib/wheels/catalog-filters.js";
 import type { VehicleFitment } from "../../lib/wheels/plp-fitment-match.js";
 export interface CatalogVehicleState {
@@ -10,7 +10,7 @@ export interface CatalogVehicleState {
 export declare const NO_VEHICLE: CatalogVehicleState;
 interface CatalogFilterContextValue {
     filters: CatalogFilterState;
-    setProcess: (v: Process | null) => void;
+    setProcess: (v: string | null) => void;
     setSize: (v: number | null) => void;
     setLugs: (v: number | null) => void;
     setFinish: (v: FinishFamily | null) => void;
@@ -26,8 +26,10 @@ interface CatalogFilterContextValue {
     sizeOptions: number[];
     reportFinishes: (id: string, families: readonly string[]) => void;
     finishOptions: string[];
+    reportCategories: (id: string, names: readonly string[]) => void;
+    categoryOptions: string[];
     optionsReported: boolean;
-    scrollProcess: Process | null;
+    scrollProcess: string | null;
     vehicle: CatalogVehicleState;
     publishVehicle: (v: CatalogVehicleState) => void;
 }

package/dist/render/components/catalog/CatalogFilterContext.js

@@ -1 +1 @@
-"use client";import{jsx as W}from"react/jsx-runtime";import{createContext as X,useCallback as n,useContext as Z,useEffect as ee,useMemo as te,useRef as b,useState as a}from"react";import{EMPTY_FILTERS as L}from"../../lib/wheels/catalog-filters.js";import{compareFinishFamily as se}from"../../lib/wheels/finish-defaults.js";const j={fit:null,name:"",resolving:!1,unresolved:!1};function oe(o,s){return o.fit===s.fit&&o.name===s.name&&o.resolving===s.resolving&&o.unresolved===s.unresolved}const r=()=>{},k=X({filters:L,setProcess:r,setSize:r,setLugs:r,setFinish:r,setPriceMin:r,setPriceMax:r,setSort:r,clearAll:r,reportCount:r,total:0,reportLugs:r,lugOptions:[],reportSizes:r,sizeOptions:[],reportFinishes:r,finishOptions:[],optionsReported:!1,scrollProcess:null,vehicle:j,publishVehicle:r}),q="data-catalog-collection",B=(o,s)=>o-s;function D(o,s){return o.length===s.length&&o.every((i,u)=>i===s[u])}function R(o){const s=b(new Map),[i,u]=a([]),g=n((p,f)=>{const v=s.current.get(p);if(v&&D(v,f))return;s.current.set(p,f);const m=new Set;for(const c of s.current.values())for(const h of c)m.add(h);const d=[...m].sort(o);u(c=>D(c,d)?c:d)},[o]);return[i,g]}function le({children:o}){const[s,i]=a(L),u=n(t=>i(e=>({...e,process:t})),[]),g=n(t=>i(e=>({...e,size:t})),[]),p=n(t=>i(e=>({...e,lugs:t})),[]),f=n(t=>i(e=>({...e,finish:t})),[]),v=n(t=>i(e=>({...e,priceMin:t})),[]),m=n(t=>i(e=>({...e,priceMax:t})),[]),d=n(t=>i(e=>({...e,sort:t})),[]),c=n(()=>i(t=>({...L,sort:t.sort})),[]),[h,H]=a(j),x=n(t=>{H(e=>oe(e,t)?e:t)},[]),C=b(new Map),[P,$]=a(0),w=n((t,e)=>{if(C.current.get(t)===e)return;C.current.set(t,e);let l=0;for(const S of C.current.values())l+=S;$(l)},[]),[O,z]=R(B),[M,T]=R(B),[A,G]=R(se),[I,E]=a(!1),_=n((t,e)=>{E(!0),z(t,e)},[z]),V=n((t,e)=>{E(!0),T(t,e)},[T]),y=n((t,e)=>{E(!0),G(t,e)},[G]),[N,J]=a(null);ee(()=>{let e=0;const F=()=>{e=0;let S=null;const Q=document.querySelectorAll(`[${q}]`);for(const U of Q){const Y=U.getBoundingClientRect();if(Y.top<=140&&Y.bottom>140){S=U.getAttribute(q)??null;break}}J(S)},l=()=>{e||(e=requestAnimationFrame(F))};return F(),window.addEventListener("scroll",l,{passive:!0}),window.addEventListener("resize",l),()=>{window.removeEventListener("scroll",l),window.removeEventListener("resize",l),e&&cancelAnimationFrame(e)}},[]);const K=te(()=>({filters:s,setProcess:u,setSize:g,setLugs:p,setFinish:f,setPriceMin:v,setPriceMax:m,setSort:d,clearAll:c,reportCount:w,total:P,reportLugs:_,lugOptions:O,reportSizes:V,sizeOptions:M,reportFinishes:y,finishOptions:A,optionsReported:I,scrollProcess:N,vehicle:h,publishVehicle:x}),[s,u,g,p,f,v,m,d,c,w,P,_,O,V,M,y,A,I,N,h,x]);return W(k.Provider,{value:K,children:o})}function ue(){return Z(k)}export{q as COLLECTION_ATTR,le as CatalogFilterProvider,j as NO_VEHICLE,ue as useCatalogFilter};
+"use client";import{jsx as Z}from"react/jsx-runtime";import{createContext as ee,useCallback as n,useContext as te,useEffect as oe,useMemo as se,useRef as k,useState as a}from"react";import{EMPTY_FILTERS as F}from"../../lib/wheels/catalog-filters.js";import{compareFinishFamily as ne}from"../../lib/wheels/finish-defaults.js";const q={fit:null,name:"",resolving:!1,unresolved:!1};function re(s,o){return s.fit===o.fit&&s.name===o.name&&s.resolving===o.resolving&&s.unresolved===o.unresolved}const r=()=>{},D=ee({filters:F,setProcess:r,setSize:r,setLugs:r,setFinish:r,setPriceMin:r,setPriceMax:r,setSort:r,clearAll:r,reportCount:r,total:0,reportLugs:r,lugOptions:[],reportSizes:r,sizeOptions:[],reportFinishes:r,finishOptions:[],reportCategories:r,categoryOptions:[],optionsReported:!1,scrollProcess:null,vehicle:q,publishVehicle:r}),B="data-catalog-collection",H=(s,o)=>s-o,ie=()=>0;function $(s,o){return s.length===o.length&&s.every((i,u)=>i===o[u])}function C(s){const o=k(new Map),[i,u]=a([]),d=n((p,f)=>{const g=o.current.get(p);if(g&&$(g,f))return;o.current.set(p,f);const v=new Set;for(const c of o.current.values())for(const h of c)v.add(h);const m=[...v].sort(s);u(c=>$(c,m)?c:m)},[s]);return[i,d]}function pe({children:s}){const[o,i]=a(F),u=n(t=>i(e=>({...e,process:t})),[]),d=n(t=>i(e=>({...e,size:t})),[]),p=n(t=>i(e=>({...e,lugs:t})),[]),f=n(t=>i(e=>({...e,finish:t})),[]),g=n(t=>i(e=>({...e,priceMin:t})),[]),v=n(t=>i(e=>({...e,priceMax:t})),[]),m=n(t=>i(e=>({...e,sort:t})),[]),c=n(()=>i(t=>({...F,sort:t.sort})),[]),[h,J]=a(q),L=n(t=>{J(e=>re(e,t)?e:t)},[]),E=k(new Map),[P,K]=a(0),x=n((t,e)=>{if(E.current.get(t)===e)return;E.current.set(t,e);let l=0;for(const R of E.current.values())l+=R;K(l)},[]),[w,z]=C(H),[M,T]=C(H),[_,A]=C(ne),[G,I]=C(ie),[y,O]=a(!1),N=n((t,e)=>{O(!0),z(t,e)},[z]),V=n((t,e)=>{O(!0),T(t,e)},[T]),U=n((t,e)=>{O(!0),A(t,e)},[A]),[Y,Q]=a(null);oe(()=>{let e=0;const S=()=>{e=0;let R=null;const X=document.querySelectorAll(`[${B}]`);for(const b of X){const j=b.getBoundingClientRect();if(j.top<=140&&j.bottom>140){R=b.getAttribute(B)??null;break}}Q(R)},l=()=>{e||(e=requestAnimationFrame(S))};return S(),window.addEventListener("scroll",l,{passive:!0}),window.addEventListener("resize",l),()=>{window.removeEventListener("scroll",l),window.removeEventListener("resize",l),e&&cancelAnimationFrame(e)}},[]);const W=se(()=>({filters:o,setProcess:u,setSize:d,setLugs:p,setFinish:f,setPriceMin:g,setPriceMax:v,setSort:m,clearAll:c,reportCount:x,total:P,reportLugs:N,lugOptions:w,reportSizes:V,sizeOptions:M,reportFinishes:U,finishOptions:_,reportCategories:I,categoryOptions:G,optionsReported:y,scrollProcess:Y,vehicle:h,publishVehicle:L}),[o,u,d,p,f,g,v,m,c,x,P,N,w,V,M,U,_,I,G,y,Y,h,L]);return Z(D.Provider,{value:W,children:s})}function fe(){return te(D)}export{B as COLLECTION_ATTR,pe as CatalogFilterProvider,q as NO_VEHICLE,fe as useCatalogFilter};

package/dist/render/components/catalog/FilterPill.d.ts

@@ -1,9 +1,11 @@
 import type React from "react";
-export declare function PillButton({ label, badge, open, onToggle, }: {
+export declare function PillButton({ label, badge, open, onToggle, controls, buttonRef, }: {
     label: React.ReactNode;
     badge: number;
     open: boolean;
     onToggle: () => void;
+    controls?: string;
+    buttonRef?: React.Ref<HTMLButtonElement>;
 }): React.JSX.Element;
 export declare function FilterPill({ label, badge, open, onToggle, children, }: {
     name: string;

package/dist/render/components/catalog/FilterPill.js

@@ -1 +1 @@
-import{jsx as a,jsxs as i}from"react/jsx-runtime";const l={body:"text-[length:var(--size-body,11px)]",labelSmall:"text-[length:var(--size-label,12px)]",labelLarge:"text-[length:var(--size-label,13px)]"};function s({label:e,badge:r,open:t,onToggle:n}){const o=r>0;return i("button",{type:"button",onClick:n,className:[`inline-flex items-center gap-2 whitespace-nowrap border px-4 py-3 font-mono ${l.labelLarge} uppercase tracking-[0.2em] transition-colors`,o?"border-accent text-accent":"border-line hover:border-fg-dim"].join(" "),style:o?void 0:{color:"color-mix(in oklab, currentColor 80%, transparent)"},children:[e,r>0&&a("span",{className:`px-2 ${l.body} tracking-[0.1em] text-bg`,style:{background:"var(--accent)"},children:r}),a("span",{className:`${l.body} opacity-65 transition-transform ${t?"rotate-180":""}`,children:"▾"})]})}function d({label:e,badge:r,open:t,onToggle:n,children:o}){return i("div",{className:"relative",children:[a(s,{label:e,badge:r,open:t,onToggle:n}),t&&a("div",{className:"absolute left-0 top-[calc(100%+6px)] z-[60] min-w-[280px] border border-line bg-surface p-5 shadow-[0_24px_60px_rgba(0,0,0,0.4)]",onClick:c=>c.stopPropagation(),children:o})]})}function b({children:e}){return a("div",{className:`mb-3 font-mono ${l.labelSmall} uppercase tracking-[0.32em] text-fg-dim`,children:e})}function x({active:e,onClick:r,children:t,role:n,ariaChecked:o}){return a("button",{type:"button",role:n,"aria-checked":n==="radio"?o:void 0,onClick:r,className:[`border px-3 py-2 font-mono ${l.labelLarge} uppercase tracking-[0.18em] transition-colors`,e?"border-accent bg-accent text-bg":"border-line hover:border-fg-dim"].join(" "),style:e?void 0:{color:"color-mix(in oklab, currentColor 75%, transparent)"},children:t})}export{d as FilterPill,x as OptButton,b as PanelTitle,s as PillButton};
+"use client";import{jsx as i,jsxs as m}from"react/jsx-runtime";import{useEffect as x,useId as g,useRef as f}from"react";const l={body:"text-[length:var(--size-body,11px)]",labelSmall:"text-[length:var(--size-label,12px)]",labelLarge:"text-[length:var(--size-label,13px)]"};function h({label:n,badge:r,open:e,onToggle:t,controls:c,buttonRef:s}){const o=r>0;return m("button",{ref:s,type:"button","aria-haspopup":"dialog","aria-expanded":e,"aria-controls":c,onClick:t,className:[`inline-flex items-center gap-2 whitespace-nowrap border px-4 py-3 font-mono ${l.labelLarge} uppercase tracking-[0.2em] transition-colors`,o?"border-accent text-accent":"border-line hover:border-fg-dim"].join(" "),style:o?void 0:{color:"color-mix(in oklab, currentColor 80%, transparent)"},children:[n,r>0&&i("span",{className:`px-2 ${l.body} tracking-[0.1em] text-bg`,style:{background:"var(--accent)"},children:r}),i("span",{className:`${l.body} opacity-65 transition-transform ${e?"rotate-180":""}`,children:"▾"})]})}function k({label:n,badge:r,open:e,onToggle:t,children:c}){const s=g(),o=f(null),u=f(null);return x(()=>{if(!e)return;const a=o.current?.ownerDocument??document,p=d=>{d.key==="Escape"&&(t(),u.current?.focus())},b=d=>{o.current?.contains(d.target)||t()};return a.addEventListener("keydown",p),a.addEventListener("pointerdown",b),()=>{a.removeEventListener("keydown",p),a.removeEventListener("pointerdown",b)}},[e,t]),m("div",{ref:o,className:"relative",children:[i(h,{label:n,badge:r,open:e,onToggle:t,controls:e?s:void 0,buttonRef:u}),e&&i("div",{id:s,className:"absolute left-0 top-[calc(100%+6px)] z-[60] min-w-[280px] border border-line bg-surface p-5 shadow-[0_24px_60px_rgba(0,0,0,0.4)]",onClick:a=>a.stopPropagation(),children:c})]})}function w({children:n}){return i("div",{className:`mb-3 font-mono ${l.labelSmall} uppercase tracking-[0.32em] text-fg-dim`,children:n})}function E({active:n,onClick:r,children:e,role:t,ariaChecked:c}){return i("button",{type:"button",role:t,"aria-checked":t==="radio"?c:void 0,onClick:r,className:[`border px-3 py-2 font-mono ${l.labelLarge} uppercase tracking-[0.18em] transition-colors`,n?"border-accent bg-accent text-bg":"border-line hover:border-fg-dim"].join(" "),style:n?void 0:{color:"color-mix(in oklab, currentColor 75%, transparent)"},children:e})}export{k as FilterPill,E as OptButton,w as PanelTitle,h as PillButton};

package/dist/render/components/checkout/CheckoutPageClient.d.ts

@@ -1,2 +1,6 @@
+import { type PayFirstResult } from "../../lib/checkout/pay-first.js";
 import { type CheckoutProps } from "./checkout-state.js";
 export default function CheckoutPageClient(props: CheckoutProps): import("react").JSX.Element;
+export declare function PayFirstResultView({ result }: {
+    result: PayFirstResult;
+}): import("react").JSX.Element;

package/dist/render/components/checkout/CheckoutPageClient.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as N,jsxs as r}from"react/jsx-runtime";import S from"next/link";import{useEffect as D,useMemo as T,useRef as j,useState as v}from"react";import{Elements as O,PaymentElement as z,useElements as L,useStripe as M}from"@stripe/react-stripe-js";import{loadStripe as $}from"@stripe/stripe-js";import{useCurrency as E}from"../CurrencyContext.js";import{resolveCopyright as F}from"../../lib/content/site.js";import{ApiError as A,products as R}from"../../lib/api/index.js";import U from"efficient-web-builder/render/components/Logo";import{CheckoutStateProvider as G,useCheckout as H}from"./checkout-state.js";import{CheckoutContact as Q,CheckoutOrderSummary as V,CheckoutPayment as W,CheckoutShippingAddress as Z,CheckoutShippingMethod as J}from"./checkout-parts.js";function X(t){return e(G,{...t,children:e(ee,{})})}function ee(){const{site:t,logo:a,items:l,placing:m,email:p,me:o,addressSaveNote:n,idemKey:d,confirmation:s,setConfirmation:c,payment:f,paypalStep:x,squareStep:y,pendingConf:i,paid:k,setPaid:h,payNote:g,afterpayConfirming:q,gocardlessConfirming:b,zipConfirming:u,klarnaConfirming:P,checkoutRootRef:C,setCheckoutHeaderEl:_}=H();return s?r("div",{className:"flex min-h-screen flex-col items-center justify-center gap-4 bg-bg px-6 text-center text-fg",children:[e("h1",{className:"font-display text-3xl",children:k?"Payment received":"Order received"}),r("p",{className:"text-fg-dim",children:[k?r(N,{children:["Thank you — your payment for order"," ",e("span",{className:"font-mono text-fg",children:s.orderNumber})," has gone through."," "]}):r(N,{children:["Thank you — your order ",e("span",{className:"font-mono text-fg",children:s.orderNumber})," is being reviewed by our team."," "]}),o?r(N,{children:["Track it under"," ",e(S,{href:"/account/orders",className:"text-accent underline",children:"your orders"}),"."]}):e(N,{children:"We’ve emailed you a link to set a password and track it."})]}),g&&e("p",{className:"text-sm text-fg-dim",children:g}),n&&e("p",{className:"text-sm text-fg-dim",children:n}),!o&&r("p",{className:"text-sm text-fg-dim",children:["You can also"," ",e(S,{href:`/track?order=${encodeURIComponent(s.orderNumber)}`,className:"text-accent underline",children:"track this order"})," ","anytime with just your order number and email — no password needed."]}),e(S,{href:"/wheels",className:"mt-2 border-2 border-line px-6 py-3 font-mono text-[12px] uppercase tracking-[0.24em] hover:border-accent",children:"Continue browsing"})]}):q?r("div",{className:"flex min-h-screen flex-col items-center justify-center gap-4 bg-bg px-6 text-center text-fg",children:[e("h1",{className:"font-display text-3xl",children:"Confirming your payment…"}),e("p",{className:"font-mono text-[12px] uppercase tracking-[0.2em] text-fg-dim",children:"Checking with Afterpay — one moment."})]}):b?r("div",{className:"flex min-h-screen flex-col items-center justify-center gap-4 bg-bg px-6 text-center text-fg",children:[e("h1",{className:"font-display text-3xl",children:"Setting up your direct debit…"}),e("p",{className:"font-mono text-[12px] uppercase tracking-[0.2em] text-fg-dim",children:"Confirming with GoCardless — one moment."})]}):u?r("div",{className:"flex min-h-screen flex-col items-center justify-center gap-4 bg-bg px-6 text-center text-fg",children:[e("h1",{className:"font-display text-3xl",children:"Confirming your payment…"}),e("p",{className:"font-mono text-[12px] uppercase tracking-[0.2em] text-fg-dim",children:"Checking with Zip — one moment."})]}):P?r("div",{className:"flex min-h-screen flex-col items-center justify-center gap-4 bg-bg px-6 text-center text-fg",children:[e("h1",{className:"font-display text-3xl",children:"Confirming your payment…"}),e("p",{className:"font-mono text-[12px] uppercase tracking-[0.2em] text-fg-dim",children:"Checking with Klarna — one moment."})]}):f?e(te,{payment:f,onPaid:()=>{h(!0),c(i)},onSkip:()=>c(i)}):x&&i?e(ae,{confirmation:i,clientId:t.paypalClientId??"",idemKey:d,onPaid:()=>{h(!0),c(i)},onSkip:()=>c(i)}):y&&i?e(se,{confirmation:i,applicationId:t.squareApplicationId??"",locationId:t.squareLocationId??"",environment:t.squareEnvironment??"production",idemKey:d,onPaid:()=>{h(!0),c(i)},onSkip:()=>c(i)}):r("div",{ref:C,className:"bg-bg text-fg",children:[r("header",{ref:_,className:"sticky top-0 z-30 grid grid-cols-[1fr_auto_1fr] items-center gap-8 border-b border-line px-[var(--sf-site-gutter,40px)] py-6 backdrop-blur-md max-[640px]:px-[min(20px,var(--sf-site-gutter,40px))] max-[640px]:py-4",style:{background:"color-mix(in oklab, var(--bg) 92%, transparent)"},children:[r(S,{href:"/",className:"inline-flex items-center gap-3 font-mono text-[13px] uppercase tracking-[0.26em] text-fg-dim transition-colors hover:text-accent",children:["←",e("span",{className:"max-[640px]:hidden",children:"Back to shop"})]}),e(S,{href:"/","aria-label":`${t.name} home`,className:"inline-flex items-center justify-center",children:e(U,{variant:"header",scrolled:!0,src:a?.url??null,reverse:a?.reverse??!1,reversedSrc:a?.reversed??null,inkIsDark:a?.inkIsDark??null,size:a?.size??"medium",sizePx:a?.sizePx??null,siteName:t.name})}),t.cardPayments?r("span",{className:"flex items-center justify-end gap-3 font-mono text-[12px] uppercase tracking-[0.26em] text-fg-dim",children:[e("span",{className:"text-green",children:"●"}),e("span",{className:"max-[640px]:hidden",children:"Encrypted ·"})," Stripe"]}):e("span",{})]}),r("section",{className:"mx-auto flex max-w-[var(--sf-site-width,1600px)] flex-wrap items-center justify-between gap-x-8 gap-y-3 border-b border-line bg-surface px-[var(--sf-site-gutter,40px)] py-4 font-mono text-[13px] font-medium uppercase tracking-[0.24em] text-fg max-[1100px]:px-[min(24px,var(--sf-site-gutter,40px))]",children:[e("span",{className:"inline-flex items-center bg-accent px-3 py-1 font-bold text-bg",children:"Checkout"}),e("nav",{"aria-label":"Checkout steps",className:"flex flex-wrap items-center gap-5",children:[{n:"01",label:"Cart",state:"done"},{n:"02",label:"Ship & pay",state:"active"},{n:"03",label:"Confirmed",state:"pending"}].map(w=>r("span",{className:["relative flex items-center gap-2 transition-colors",w.state==="pending"?"text-fg-dim":"text-fg",w.state==="active"?"font-bold after:absolute after:inset-x-0 after:-bottom-1 after:h-[2px] after:bg-accent":""].join(" "),children:[e("span",{className:w.state==="done"?"text-accent font-bold":"",children:w.n}),e("span",{children:w.label})]},w.n))})]}),r("main",{className:"mx-auto grid max-w-[var(--sf-site-width,1600px)] grid-cols-[1fr_420px] items-start gap-16 px-[var(--sf-site-gutter,40px)] pt-10 pb-[100px] max-[1100px]:grid-cols-1 max-[1100px]:gap-10 max-[1100px]:px-[min(24px,var(--sf-site-gutter,40px))] max-[1100px]:pt-8 max-[1100px]:pb-20",children:[r("div",{children:[e(Q,{}),e(Z,{}),e(J,{}),e(W,{})]}),e(V,{})]}),e("footer",{className:"flex flex-wrap items-center justify-between gap-4 border-t border-line px-[var(--sf-site-gutter,40px)] py-6 font-mono text-[12px] uppercase tracking-[0.22em] text-fg-dim max-[640px]:px-[min(20px,var(--sf-site-gutter,40px))]",children:e("span",{children:F({legalName:t.legalName,foundedYear:t.foundedYear,siteName:t.name})})})]})}function te({payment:t,onPaid:a,onSkip:l}){const{formatMoney:m}=E(),p=T(()=>$(t.publishableKey),[t.publishableKey]),o=T(()=>{if(typeof document>"u")return;const n=getComputedStyle(document.documentElement),d=(c,f)=>n.getPropertyValue(c).trim()||f,s=document.documentElement.getAttribute("data-theme")!=="light";return{theme:s?"night":"stripe",variables:{colorPrimary:d("--accent",s?"#c9a461":"#8a6a2a"),colorBackground:d("--site-surface",s?"#131313":"#ffffff"),colorText:d("--fg",s?"#f5f1e8":"#0a0a0a"),borderRadius:"0px"}}},[]);return e("div",{className:"flex min-h-screen flex-col items-center justify-center gap-6 bg-bg px-6 py-16 text-fg",children:r("div",{className:"w-full max-w-xl border border-line bg-bg",children:[r("header",{className:"flex items-center justify-between gap-4 border-b border-line bg-surface px-6 py-4",children:[e("span",{className:"inline-flex items-center justify-center bg-accent px-3 py-1 font-mono text-[11px] font-bold uppercase tracking-[0.24em] text-bg",children:t.orderNumber}),e("h1",{className:"font-display text-[26px] font-medium uppercase leading-none tracking-[-0.02em] text-fg",children:"Payment"})]}),r("div",{className:"flex flex-col gap-4 px-6 py-6",children:[r("p",{className:"font-mono text-[12px] uppercase tracking-[0.2em] text-fg-dim",children:["Your order is placed. Pay"," ",e("span",{className:"text-fg",children:m(Number(t.amount),t.currency)})," ","by card to confirm it now."]}),e(O,{stripe:p,options:{clientSecret:t.clientSecret,appearance:o},children:e(re,{payment:t,onPaid:a,onSkip:l})})]})]})})}function re({payment:t,onPaid:a,onSkip:l}){const{formatMoney:m}=E(),p=M(),o=L(),[n,d]=v(!1),[s,c]=v(null);async function f(){if(!p||!o||n)return;d(!0),c(null);const x=await p.confirmPayment({elements:o,redirect:"if_required"});if(x.error){c(x.error.message??"Payment failed. Please try again."),d(!1);return}const y=x.paymentIntent?.status;if(y==="succeeded"||y==="processing"){a();return}c("Payment did not complete. Please try again."),d(!1)}return r("div",{className:"flex flex-col gap-4",children:[e(z,{}),s&&e("p",{className:"border border-red-300 bg-red-50 px-3 py-2 text-[13px] text-red-700",children:s}),e("button",{type:"button",onClick:f,disabled:!p||!o||n,className:["group flex items-center justify-between border px-5 py-5 font-mono text-[14px] font-medium uppercase tracking-[0.3em] transition-all",!p||!o||n?"cursor-not-allowed border-line bg-surface text-fg-dim":"border-btn bg-btn text-btn-ink hover:border-fg hover:bg-fg"].join(" "),children:n?r(N,{children:["Processing… ",e("span",{children:"·"})]}):r(N,{children:["Pay ",m(Number(t.amount),t.currency),e("span",{className:"transition-transform group-hover:translate-x-1",children:"→"})]})}),e("button",{type:"button",onClick:l,disabled:n,className:"self-center font-mono text-[11px] uppercase tracking-[0.24em] text-fg-dim underline-offset-4 transition-colors hover:text-accent hover:underline",children:"Pay later — our team will be in touch"})]})}const B="paypal-sdk-js";let I=null;function ne(t,a){const l=`${t}|${a}`;if(I?.key===l)return I.promise;const m=new Promise((p,o)=>{document.getElementById(B)?.remove();const n=document.createElement("script");n.id=B;const d=new URLSearchParams({"client-id":t,currency:a,intent:"capture"});n.src=`https://www.paypal.com/sdk/js?${d}`,n.onload=()=>{const s=window.paypal;s?p(s):o(new Error("PayPal SDK loaded without its namespace"))},n.onerror=()=>o(new Error("PayPal SDK failed to load")),document.head.appendChild(n)});return I={key:l,promise:m},m}function ae({confirmation:t,clientId:a,idemKey:l,onPaid:m,onSkip:p}){const{formatMoney:o}=E(),n=j(null),[d,s]=v(!1),[c,f]=v(null),x=j(m);return x.current=m,D(()=>{let y=!1,i=null;return ne(a,t.currency).then(k=>{if(!(y||!n.current))return i=k.Buttons({style:{layout:"vertical",color:"gold",shape:"rect",label:"paypal"},createOrder:async()=>(await R.createPaypalOrder({idempotencyKey:l})).paypalOrderId,onApprove:async h=>{try{if((await R.capturePaypalOrder({idempotencyKey:l,paypalOrderId:h.orderID})).status==="paid"){x.current();return}f("PayPal did not complete the payment. Please try again.")}catch(g){f(g instanceof A?g.message:"PayPal payment failed. Please try again.")}},onError:()=>{f("PayPal could not process the payment. Please try again.")}}),i.render(n.current).then(()=>{y||s(!0)})}).catch(()=>{y||f("PayPal could not be loaded. You can pay later — your order stands either way.")}),()=>{y=!0,i?.close?.()}},[a,t.currency,l]),e("div",{className:"flex min-h-screen flex-col items-center justify-center gap-6 bg-bg px-6 py-16 text-fg",children:r("div",{className:"w-full max-w-xl border border-line bg-bg",children:[r("header",{className:"flex items-center justify-between gap-4 border-b border-line bg-surface px-6 py-4",children:[e("span",{className:"inline-flex items-center justify-center bg-accent px-3 py-1 font-mono text-[11px] font-bold uppercase tracking-[0.24em] text-bg",children:t.orderNumber}),e("h1",{className:"font-display text-[26px] font-medium uppercase leading-none tracking-[-0.02em] text-fg",children:"PayPal"})]}),r("div",{className:"flex flex-col gap-4 px-6 py-6",children:[r("p",{className:"font-mono text-[12px] uppercase tracking-[0.2em] text-fg-dim",children:["Your order is placed. Pay"," ",e("span",{className:"text-fg",children:o(Number(t.grandTotal),t.currency)})," ","with PayPal to confirm it now."]}),!d&&!c&&e("p",{className:"font-mono text-[11px] uppercase tracking-[0.2em] text-fg-dim",children:"Loading PayPal…"}),e("div",{ref:n}),c&&e("p",{className:"border border-red-300 bg-red-50 px-3 py-2 text-[13px] text-red-700",children:c}),e("button",{type:"button",onClick:p,className:"self-center font-mono text-[11px] uppercase tracking-[0.24em] text-fg-dim underline-offset-4 transition-colors hover:text-accent hover:underline",children:"Pay later — our team will be in touch"})]})]})})}const Y="square-web-sdk";let K=null;function oe(t){const a=t==="sandbox"?"sandbox":"production";if(K?.key===a)return K.promise;const l=new Promise((m,p)=>{document.getElementById(Y)?.remove();const o=document.createElement("script");o.id=Y,o.src=a==="sandbox"?"https://sandbox.web.squarecdn.com/v1/square.js":"https://web.squarecdn.com/v1/square.js",o.onload=()=>{const n=window.Square;n?m(n):p(new Error("Square SDK loaded without its namespace"))},o.onerror=()=>p(new Error("Square SDK failed to load")),document.head.appendChild(o)});return K={key:a,promise:l},l}function se({confirmation:t,applicationId:a,locationId:l,environment:m,idemKey:p,onPaid:o,onSkip:n}){const{formatMoney:d}=E(),s=j(null),c=j(null),f=j(null),[x,y]=v(!1),[i,k]=v(!1),[h,g]=v(null);D(()=>{let b=!1,u=null;return oe(m).then(async P=>{if(b||!s.current)return;const C=P.payments(a,l);f.current=C,u=await C.card(),await u.attach(s.current),c.current=u,b||y(!0)}).catch(()=>{b||g("Square could not be loaded. You can pay later — your order stands either way.")}),()=>{b=!0,u?.destroy?.()}},[a,l,m]);async function q(){const b=c.current;if(!(!b||i)){k(!0),g(null);try{const u=await b.tokenize();if(u.status!=="OK"||!u.token){g(u.errors?.[0]?.message??"Please check the card details and try again."),k(!1);return}let P;try{P=(await f.current?.verifyBuyer?.(u.token,{amount:String(t.grandTotal),currencyCode:t.currency,intent:"CHARGE"}))?.token}catch{}if((await R.chargeSquare({idempotencyKey:p,sourceId:u.token,...P?{verificationToken:P}:{}})).status==="paid"){o();return}g("Square did not complete the payment. Please try again.")}catch(u){g(u instanceof A?u.message:"Square payment failed. Please try again.")}k(!1)}}return e("div",{className:"flex min-h-screen flex-col items-center justify-center gap-6 bg-bg px-6 py-16 text-fg",children:r("div",{className:"w-full max-w-xl border border-line bg-bg",children:[r("header",{className:"flex items-center justify-between gap-4 border-b border-line bg-surface px-6 py-4",children:[e("span",{className:"inline-flex items-center justify-center bg-accent px-3 py-1 font-mono text-[11px] font-bold uppercase tracking-[0.24em] text-bg",children:t.orderNumber}),e("h1",{className:"font-display text-[26px] font-medium uppercase leading-none tracking-[-0.02em] text-fg",children:"Card"})]}),r("div",{className:"flex flex-col gap-4 px-6 py-6",children:[r("p",{className:"font-mono text-[12px] uppercase tracking-[0.2em] text-fg-dim",children:["Your order is placed. Pay"," ",e("span",{className:"text-fg",children:d(Number(t.grandTotal),t.currency)})," ","by card to confirm it now."]}),!x&&!h&&e("p",{className:"font-mono text-[11px] uppercase tracking-[0.2em] text-fg-dim",children:"Loading card form…"}),e("div",{ref:s}),h&&e("p",{className:"border border-red-300 bg-red-50 px-3 py-2 text-[13px] text-red-700",children:h}),e("button",{type:"button",onClick:q,disabled:!x||i,className:["group flex items-center justify-between border px-5 py-5 font-mono text-[14px] font-medium uppercase tracking-[0.3em] transition-all",!x||i?"cursor-not-allowed border-line bg-surface text-fg-dim":"border-btn bg-btn text-btn-ink hover:border-fg hover:bg-fg"].join(" "),children:i?r(N,{children:["Processing… ",e("span",{children:"·"})]}):r(N,{children:["Pay ",d(Number(t.grandTotal),t.currency),e("span",{className:"transition-transform group-hover:translate-x-1",children:"→"})]})}),e("button",{type:"button",onClick:n,disabled:i,className:"self-center font-mono text-[11px] uppercase tracking-[0.24em] text-fg-dim underline-offset-4 transition-colors hover:text-accent hover:underline",children:"Pay later — our team will be in touch"})]})]})})}export{X as default};
+"use client";import{jsx as e,jsxs as r,Fragment as x}from"react/jsx-runtime";import S from"next/link";import{useEffect as D,useMemo as Y,useRef as j,useState as v}from"react";import{stripeAppearance as Q}from"../../lib/checkout/stripe-appearance.js";import{Elements as V,PaymentElement as Z,useElements as J,useStripe as X}from"@stripe/react-stripe-js";import{loadStripe as ee}from"@stripe/stripe-js";import{useCurrency as R}from"../CurrencyContext.js";import{Notice as I}from"../Notice.js";import{resolveCopyright as te}from"../../lib/content/site.js";import{ApiError as O,products as T}from"../../lib/api/index.js";import re from"efficient-web-builder/render/components/Logo";import{NOT_CHECKED as _,orderReference as ne}from"../../lib/checkout/pay-first.js";import{CheckoutStateProvider as ae,useCheckout as ie}from"./checkout-state.js";import{CheckoutContact as oe,CheckoutOrderSummary as ce,CheckoutPayment as se,CheckoutShippingAddress as le,CheckoutShippingMethod as de}from"./checkout-parts.js";function me(t){return e(ae,{...t,children:e(fe,{})})}function pe({order:t,paid:n}){const{formatMoney:p}=R();if(!t.grandTotal||!t.currency)return null;const u=i=>p(Number(i),t.currency),h=Number(t.freightCharge??0),s=Number(t.discountAmount??0);return r("dl",{className:"grid w-full max-w-sm grid-cols-[1fr_auto] gap-x-6 gap-y-1 border-y border-line py-3 text-left text-sm",children:[(t.shippingMethod||h>0)&&r(x,{children:[r("dt",{className:"text-fg-dim",children:["Delivery",t.shippingMethod?` · ${t.shippingMethod}`:""]}),e("dd",{className:"text-right font-mono",children:u(t.freightCharge??"0")})]}),s>0&&r(x,{children:[r("dt",{className:"text-fg-dim",children:["Discount",t.couponCode?` · ${t.couponCode}`:""]}),r("dd",{className:"text-right font-mono",children:["−",u(t.discountAmount??"0")]})]}),e("dt",{className:"text-fg",children:n?"Total paid":"Order total"}),e("dd",{className:"text-right font-mono text-fg",children:u(t.grandTotal)})]})}function ue({result:t}){const n=e("span",{className:"font-mono text-fg",children:t.checkoutNumber});return r("div",{className:"flex min-h-screen flex-col items-center justify-center gap-4 bg-bg px-6 text-center text-fg",children:[e("h1",{className:"font-display text-3xl",children:t.kind==="refunded"||t.kind==="expired"?"Order not placed":t.kind==="processing"?"Payment processing":"Payment received"}),e("p",{className:"text-fg-dim",children:t.kind==="refunded"?r(x,{children:["An item sold out or an offer ended while you paid for checkout ",n,". Your payment is refunded to your card."]}):t.kind==="expired"?r(x,{children:["The hold on checkout ",n," ran out before your payment arrived. Your payment is refunded to your card."]}):t.kind==="processing"?r(x,{children:["Your payment for checkout ",n," is being processed. When it goes through, we will email your order confirmation."]}):r(x,{children:["Thank you — your payment for checkout ",n," has gone through. We will email you the order number shortly."]})}),e(S,{href:"/wheels",className:"mt-2 border-2 border-line px-6 py-3 font-mono text-[12px] uppercase tracking-[0.24em] hover:border-accent",children:"Continue browsing"})]})}function fe(){const{site:t,logo:n,items:p,placing:u,email:h,me:s,addressSaveNote:i,idemKey:f,confirmation:o,setConfirmation:m,payment:d,paypalStep:k,squareStep:g,pendingConf:c,paid:y,setPaid:b,payNote:N,afterpayConfirming:E,gocardlessConfirming:l,zipConfirming:a,klarnaConfirming:w,cardConfirming:P,checkoutResult:q,confirmCardPayment:L,cardStillProcessing:z,renewCardPayment:F,holdRenewed:H,leaveCardPayment:G,checkoutRootRef:U,setCheckoutHeaderEl:W}=ie();return o?r("div",{className:"flex min-h-screen flex-col items-center justify-center gap-4 bg-bg px-6 text-center text-fg",children:[e("h1",{className:"font-display text-3xl",children:y?"Payment received":"Order received"}),r("p",{className:"text-fg-dim",children:[y?r(x,{children:["Thank you — your payment for order"," ",e("span",{className:"font-mono text-fg",children:o.orderNumber})," has gone through."," "]}):r(x,{children:["Thank you — your order ",e("span",{className:"font-mono text-fg",children:o.orderNumber})," is being reviewed by our team."," "]}),s?r(x,{children:["Track it under"," ",e(S,{href:"/account/orders",className:"text-accent underline",children:"your orders"}),"."]}):e(x,{children:"We’ve emailed you a link to set a password and track it."})]}),e(pe,{order:o,paid:y}),N&&e("p",{className:"text-sm text-fg-dim",children:N}),i&&e("p",{className:"text-sm text-fg-dim",children:i}),!s&&r("p",{className:"text-sm text-fg-dim",children:["You can also"," ",e(S,{href:`/track?order=${encodeURIComponent(o.orderNumber)}`,className:"text-accent underline",children:"track this order"})," ","anytime with just your order number and email — no password needed."]}),e(S,{href:"/wheels",className:"mt-2 border-2 border-line px-6 py-3 font-mono text-[12px] uppercase tracking-[0.24em] hover:border-accent",children:"Continue browsing"})]}):q?e(ue,{result:q}):P?r("div",{className:"flex min-h-screen flex-col items-center justify-center gap-4 bg-bg px-6 text-center text-fg",children:[e("h1",{className:"font-display text-3xl",children:"Confirming your payment…"}),e("p",{className:"font-mono text-[12px] uppercase tracking-[0.2em] text-fg-dim",children:"Placing your order — one moment."})]}):E?r("div",{className:"flex min-h-screen flex-col items-center justify-center gap-4 bg-bg px-6 text-center text-fg",children:[e("h1",{className:"font-display text-3xl",children:"Confirming your payment…"}),e("p",{className:"font-mono text-[12px] uppercase tracking-[0.2em] text-fg-dim",children:"Checking with Afterpay — one moment."})]}):l?r("div",{className:"flex min-h-screen flex-col items-center justify-center gap-4 bg-bg px-6 text-center text-fg",children:[e("h1",{className:"font-display text-3xl",children:"Setting up your direct debit…"}),e("p",{className:"font-mono text-[12px] uppercase tracking-[0.2em] text-fg-dim",children:"Confirming with GoCardless — one moment."})]}):a?r("div",{className:"flex min-h-screen flex-col items-center justify-center gap-4 bg-bg px-6 text-center text-fg",children:[e("h1",{className:"font-display text-3xl",children:"Confirming your payment…"}),e("p",{className:"font-mono text-[12px] uppercase tracking-[0.2em] text-fg-dim",children:"Checking with Zip — one moment."})]}):w?r("div",{className:"flex min-h-screen flex-col items-center justify-center gap-4 bg-bg px-6 text-center text-fg",children:[e("h1",{className:"font-display text-3xl",children:"Confirming your payment…"}),e("p",{className:"font-mono text-[12px] uppercase tracking-[0.2em] text-fg-dim",children:"Checking with Klarna — one moment."})]}):d&&c?e(xe,{payment:d,checkout:c,holdRenewed:H,onPaid:L,onProcessing:z,onRenew:F,onBack:G}):k&&c?e(be,{confirmation:c,clientId:t.paypalClientId??"",idemKey:f,onPaid:()=>{b(!0),m(c)},onSkip:()=>m(c)}):g&&c?e(ke,{confirmation:c,applicationId:t.squareApplicationId??"",locationId:t.squareLocationId??"",environment:t.squareEnvironment??"production",idemKey:f,onPaid:()=>{b(!0),m(c)},onSkip:()=>m(c)}):r("div",{ref:U,className:"bg-bg text-fg",children:[r("header",{ref:W,className:"sticky top-0 z-30 grid grid-cols-[1fr_auto_1fr] items-center gap-8 border-b border-line px-[var(--sf-site-gutter,40px)] py-6 backdrop-blur-md max-[640px]:px-[min(20px,var(--sf-site-gutter,40px))] max-[640px]:py-4",style:{background:"color-mix(in oklab, var(--bg) 92%, transparent)"},children:[r(S,{href:"/",className:"inline-flex items-center gap-3 font-mono text-[13px] uppercase tracking-[0.26em] text-fg-dim transition-colors hover:text-accent",children:["←",e("span",{className:"max-[640px]:hidden",children:"Back to shop"})]}),e(S,{href:"/","aria-label":`${t.name} home`,className:"inline-flex items-center justify-center",children:e(re,{variant:"header",scrolled:!0,src:n?.url??null,reverse:n?.reverse??!1,reversedSrc:n?.reversed??null,inkIsDark:n?.inkIsDark??null,size:n?.size??"medium",sizePx:n?.sizePx??null,siteName:t.name})}),t.cardPayments?r("span",{className:"flex items-center justify-end gap-3 font-mono text-[12px] uppercase tracking-[0.26em] text-fg-dim",children:[e("span",{className:"text-green",children:"●"}),e("span",{className:"max-[640px]:hidden",children:"Encrypted ·"})," Stripe"]}):e("span",{})]}),r("section",{className:"mx-auto flex max-w-[var(--sf-site-width,1600px)] flex-wrap items-center justify-between gap-x-8 gap-y-3 border-b border-line bg-surface px-[var(--sf-site-gutter,40px)] py-4 font-mono text-[13px] font-medium uppercase tracking-[0.24em] text-fg max-[1100px]:px-[min(24px,var(--sf-site-gutter,40px))]",children:[e("span",{className:"inline-flex items-center bg-accent px-3 py-1 font-bold text-bg",children:"Checkout"}),e("nav",{"aria-label":"Checkout steps",className:"flex flex-wrap items-center gap-5",children:[{n:"01",label:"Cart",state:"done"},{n:"02",label:"Ship & pay",state:"active"},{n:"03",label:"Confirmed",state:"pending"}].map(C=>r("span",{className:["relative flex items-center gap-2 transition-colors",C.state==="pending"?"text-fg-dim":"text-fg",C.state==="active"?"font-bold after:absolute after:inset-x-0 after:-bottom-1 after:h-[2px] after:bg-accent":""].join(" "),children:[e("span",{className:C.state==="done"?"text-accent font-bold":"",children:C.n}),e("span",{children:C.label})]},C.n))})]}),r("main",{className:"mx-auto grid max-w-[var(--sf-site-width,1600px)] grid-cols-[1fr_420px] items-start gap-16 px-[var(--sf-site-gutter,40px)] pt-10 pb-[100px] max-[1100px]:grid-cols-1 max-[1100px]:gap-10 max-[1100px]:px-[min(24px,var(--sf-site-gutter,40px))] max-[1100px]:pt-8 max-[1100px]:pb-20",children:[r("div",{children:[e(oe,{}),e(le,{}),e(de,{}),e(se,{})]}),e(ce,{})]}),e("footer",{className:"flex flex-wrap items-center justify-between gap-4 border-t border-line px-[var(--sf-site-gutter,40px)] py-6 font-mono text-[12px] uppercase tracking-[0.22em] text-fg-dim max-[640px]:px-[min(20px,var(--sf-site-gutter,40px))]",children:e("span",{children:te({legalName:t.legalName,foundedYear:t.foundedYear,siteName:t.name})})})]})}function xe({payment:t,checkout:n,holdRenewed:p,onPaid:u,onProcessing:h,onRenew:s,onBack:i}){const{formatMoney:f}=R(),o=e("span",{className:"text-fg",children:f(Number(t.amount),t.currency)}),m=Y(()=>ee(t.publishableKey),[t.publishableKey]),d=Y(()=>Q(),[]);return e("div",{className:"flex min-h-screen flex-col items-center justify-center gap-6 bg-bg px-6 py-16 text-fg",children:r("div",{className:"w-full max-w-xl border border-line bg-bg",children:[r("header",{className:"flex items-center justify-between gap-4 border-b border-line bg-surface px-6 py-4",children:[e("span",{className:"inline-flex items-center justify-center bg-accent px-3 py-1 font-mono text-[11px] font-bold uppercase tracking-[0.24em] text-bg",children:ne(n)}),e("h1",{className:"font-display text-[26px] font-medium uppercase leading-none tracking-[-0.02em] text-fg",children:"Payment"})]}),r("div",{className:"flex flex-col gap-4 px-6 py-6",children:[e("p",{className:"font-mono text-[12px] uppercase tracking-[0.2em] text-fg-dim",children:n.orderNumber?r(x,{children:["Your order is placed. Pay ",o," by card to confirm it now."]}):p?r(x,{children:["Your hold ran out, so your items are held again",n.expiresAt?` until ${B(n.expiresAt)}`:"",". Enter your card again, then pay ",o,"."]}):r(x,{children:["Your items are held",n.expiresAt?` until ${B(n.expiresAt)}`:"",". Pay ",o," by card to place your order."]})}),e(V,{stripe:m,options:{clientSecret:t.clientSecret,appearance:d},children:e(he,{payment:t,checkout:n,onPaid:u,onProcessing:h,onRenew:s,onBack:i})},t.clientSecret)]})]})})}function B(t){return new Date(t).toLocaleTimeString([],{hour:"numeric",minute:"2-digit"})}const ge=5;function he({payment:t,checkout:n,onPaid:p,onProcessing:u,onRenew:h,onBack:s}){const{formatMoney:i}=R(),f=X(),o=J(),[m,d]=v(!1),[k,g]=v(null),c=j(!1);async function y(){try{return(await f.retrievePaymentIntent(t.clientSecret)).paymentIntent?.status}catch{return}}async function b(l){let a=l;for(let w=0;a==="processing"&&w<ge;w+=1)await new Promise(P=>setTimeout(P,1e3)),a=await y()??a;if(a==="succeeded"){p();return}if(a==="processing"){u();return}g("Payment did not complete. Please try again."),d(!1)}async function N(){if(!f||!o||m)return;d(!0),g(null),c.current=!0;const l=await f.confirmPayment({elements:o,redirect:"if_required"}).catch(()=>null);if(!l){const a=await y();if(a==="succeeded"||a==="processing"){await b(a);return}g(a===void 0?_:"Payment failed. Please try again."),d(!1);return}if(l.error){if(!n.orderNumber&&l.error.code==="payment_intent_unexpected_state"){const a=await y();if(a==="succeeded"||a==="processing"){await b(a);return}if(a===void 0){g(_),d(!1);return}await h(a==="canceled"),d(!1);return}g(l.error.message??"Payment failed. Please try again."),d(!1);return}await b(l.paymentIntent?.status)}async function E(){if(m)return;if(!c.current){s();return}d(!0),g(null);const l=await y();if(l==="succeeded"||l==="processing"){await b(l);return}if(d(!1),l===void 0){g(_);return}s()}return r("div",{className:"flex flex-col gap-4",children:[e(Z,{}),k&&e(I,{role:"alert",children:k}),e("button",{type:"button",onClick:N,disabled:!f||!o||m,className:["group flex items-center justify-between border px-5 py-5 font-mono text-[14px] font-medium uppercase tracking-[0.3em] transition-all",!f||!o||m?"cursor-not-allowed border-line bg-surface text-fg-dim":"border-btn bg-btn text-btn-ink hover:border-fg hover:bg-fg"].join(" "),children:m?r(x,{children:["Processing… ",e("span",{children:"·"})]}):r(x,{children:["Pay ",i(Number(t.amount),t.currency),e("span",{className:"transition-transform group-hover:translate-x-1",children:"→"})]})}),!n.orderNumber&&!m&&r("button",{type:"button",onClick:E,className:"inline-flex items-center gap-3 self-start font-mono text-[12px] uppercase tracking-[0.26em] text-fg-dim transition-colors hover:text-accent",children:["←",e("span",{children:"Back to checkout"})]})]})}const M="paypal-sdk-js";let A=null;function ye(t,n){const p=`${t}|${n}`;if(A?.key===p)return A.promise;const u=new Promise((h,s)=>{document.getElementById(M)?.remove();const i=document.createElement("script");i.id=M;const f=new URLSearchParams({"client-id":t,currency:n,intent:"capture"});i.src=`https://www.paypal.com/sdk/js?${f}`,i.onload=()=>{const o=window.paypal;o?h(o):s(new Error("PayPal SDK loaded without its namespace"))},i.onerror=()=>s(new Error("PayPal SDK failed to load")),document.head.appendChild(i)});return A={key:p,promise:u},u}function be({confirmation:t,clientId:n,idemKey:p,onPaid:u,onSkip:h}){const{formatMoney:s}=R(),i=j(null),[f,o]=v(!1),[m,d]=v(null),k=j(u);return k.current=u,D(()=>{let g=!1,c=null;return ye(n,t.currency).then(y=>{if(!(g||!i.current))return c=y.Buttons({style:{layout:"vertical",color:"gold",shape:"rect",label:"paypal"},createOrder:async()=>(await T.createPaypalOrder({idempotencyKey:p})).paypalOrderId,onApprove:async b=>{try{if((await T.capturePaypalOrder({idempotencyKey:p,paypalOrderId:b.orderID})).status==="paid"){k.current();return}d("PayPal did not complete the payment. Please try again.")}catch(N){d(N instanceof O?N.message:"PayPal payment failed. Please try again.")}},onError:()=>{d("PayPal could not process the payment. Please try again.")}}),c.render(i.current).then(()=>{g||o(!0)})}).catch(()=>{g||d("PayPal could not be loaded. You can pay later — your order stands either way.")}),()=>{g=!0,c?.close?.()}},[n,t.currency,p]),e("div",{className:"flex min-h-screen flex-col items-center justify-center gap-6 bg-bg px-6 py-16 text-fg",children:r("div",{className:"w-full max-w-xl border border-line bg-bg",children:[r("header",{className:"flex items-center justify-between gap-4 border-b border-line bg-surface px-6 py-4",children:[e("span",{className:"inline-flex items-center justify-center bg-accent px-3 py-1 font-mono text-[11px] font-bold uppercase tracking-[0.24em] text-bg",children:t.orderNumber}),e("h1",{className:"font-display text-[26px] font-medium uppercase leading-none tracking-[-0.02em] text-fg",children:"PayPal"})]}),r("div",{className:"flex flex-col gap-4 px-6 py-6",children:[r("p",{className:"font-mono text-[12px] uppercase tracking-[0.2em] text-fg-dim",children:["Your order is placed. Pay"," ",e("span",{className:"text-fg",children:s(Number(t.grandTotal),t.currency)})," ","with PayPal to confirm it now."]}),!f&&!m&&e("p",{className:"font-mono text-[11px] uppercase tracking-[0.2em] text-fg-dim",children:"Loading PayPal…"}),e("div",{ref:i}),m&&e(I,{role:"alert",children:m}),e("button",{type:"button",onClick:h,className:"self-center font-mono text-[11px] uppercase tracking-[0.24em] text-fg-dim underline-offset-4 transition-colors hover:text-accent hover:underline",children:"Pay later — our team will be in touch"})]})]})})}const $="square-web-sdk";let K=null;function Ne(t){const n=t==="sandbox"?"sandbox":"production";if(K?.key===n)return K.promise;const p=new Promise((u,h)=>{document.getElementById($)?.remove();const s=document.createElement("script");s.id=$,s.src=n==="sandbox"?"https://sandbox.web.squarecdn.com/v1/square.js":"https://web.squarecdn.com/v1/square.js",s.onload=()=>{const i=window.Square;i?u(i):h(new Error("Square SDK loaded without its namespace"))},s.onerror=()=>h(new Error("Square SDK failed to load")),document.head.appendChild(s)});return K={key:n,promise:p},p}function ke({confirmation:t,applicationId:n,locationId:p,environment:u,idemKey:h,onPaid:s,onSkip:i}){const{formatMoney:f}=R(),o=j(null),m=j(null),d=j(null),[k,g]=v(!1),[c,y]=v(!1),[b,N]=v(null);D(()=>{let l=!1,a=null;return Ne(u).then(async w=>{if(l||!o.current)return;const P=w.payments(n,p);d.current=P,a=await P.card(),await a.attach(o.current),m.current=a,l||g(!0)}).catch(()=>{l||N("Square could not be loaded. You can pay later — your order stands either way.")}),()=>{l=!0,a?.destroy?.()}},[n,p,u]);async function E(){const l=m.current;if(!(!l||c)){y(!0),N(null);try{const a=await l.tokenize();if(a.status!=="OK"||!a.token){N(a.errors?.[0]?.message??"Please check the card details and try again."),y(!1);return}let w;try{w=(await d.current?.verifyBuyer?.(a.token,{amount:String(t.grandTotal),currencyCode:t.currency,intent:"CHARGE"}))?.token}catch{}if((await T.chargeSquare({idempotencyKey:h,sourceId:a.token,...w?{verificationToken:w}:{}})).status==="paid"){s();return}N("Square did not complete the payment. Please try again.")}catch(a){N(a instanceof O?a.message:"Square payment failed. Please try again.")}y(!1)}}return e("div",{className:"flex min-h-screen flex-col items-center justify-center gap-6 bg-bg px-6 py-16 text-fg",children:r("div",{className:"w-full max-w-xl border border-line bg-bg",children:[r("header",{className:"flex items-center justify-between gap-4 border-b border-line bg-surface px-6 py-4",children:[e("span",{className:"inline-flex items-center justify-center bg-accent px-3 py-1 font-mono text-[11px] font-bold uppercase tracking-[0.24em] text-bg",children:t.orderNumber}),e("h1",{className:"font-display text-[26px] font-medium uppercase leading-none tracking-[-0.02em] text-fg",children:"Card"})]}),r("div",{className:"flex flex-col gap-4 px-6 py-6",children:[r("p",{className:"font-mono text-[12px] uppercase tracking-[0.2em] text-fg-dim",children:["Your order is placed. Pay"," ",e("span",{className:"text-fg",children:f(Number(t.grandTotal),t.currency)})," ","by card to confirm it now."]}),!k&&!b&&e("p",{className:"font-mono text-[11px] uppercase tracking-[0.2em] text-fg-dim",children:"Loading card form…"}),e("div",{ref:o}),b&&e(I,{role:"alert",children:b}),e("button",{type:"button",onClick:E,disabled:!k||c,className:["group flex items-center justify-between border px-5 py-5 font-mono text-[14px] font-medium uppercase tracking-[0.3em] transition-all",!k||c?"cursor-not-allowed border-line bg-surface text-fg-dim":"border-btn bg-btn text-btn-ink hover:border-fg hover:bg-fg"].join(" "),children:c?r(x,{children:["Processing… ",e("span",{children:"·"})]}):r(x,{children:["Pay ",f(Number(t.grandTotal),t.currency),e("span",{className:"transition-transform group-hover:translate-x-1",children:"→"})]})}),e("button",{type:"button",onClick:i,disabled:c,className:"self-center font-mono text-[11px] uppercase tracking-[0.24em] text-fg-dim underline-offset-4 transition-colors hover:text-accent hover:underline",children:"Pay later — our team will be in touch"})]})]})})}export{ue as PayFirstResultView,me as default};

package/dist/render/components/checkout/checkout-parts.js

@@ -1 +1 @@
-"use client";import{jsx as e,Fragment as N,jsxs as a}from"react/jsx-runtime";import H from"next/image";import O from"next/link";import{lineTotal as q,useCart as D}from"../CartContext.js";import{useCurrency as G}from"../CurrencyContext.js";import{FREE_PRICE as j}from"../../lib/wheels/price-display.js";import W from"../CouponField.js";import{COUPON_DEFERRED_TOTAL as K}from"../../lib/cart/coupon-preview.js";import{shippingWords as X,TAX_PENDING as Z}from"../../lib/cart/shipping-status.js";import{DEFAULT_FINISH_COLOR as J}from"../../lib/wheels/finish-defaults.js";import B from"../ThemedSelect.js";import h from"../WebFormField.js";import Q from"../WheelSvg.js";import{NO_PAYMENT_METHOD_NOTE as V,SHIPPING_RETRY_NOTE as ee,useCheckout as k}from"./checkout-state.js";function ye(){const{email:t,setEmail:i,firstName:n,setFirstName:l,lastName:s,setLastName:p,me:c,checkoutSignOut:b}=k();return a(w,{num:"N° 01",title:"Contact",children:[e(h,{label:"Email",hint:c?a(N,{children:["Signed in ·"," ",e("button",{type:"button",onClick:b,className:"underline transition-colors hover:text-accent",children:"Not you? Sign out"})]}):void 0,children:e("input",{type:"email",value:t,onChange:m=>i(m.target.value),placeholder:"you@example.com",readOnly:c!==null,className:u+(c?" opacity-70":"")})}),a(I,{children:[e(h,{label:"First name",children:e("input",{type:"text",value:n,onChange:m=>l(m.target.value),className:u})}),e(h,{label:"Last name",children:e("input",{type:"text",value:s,onChange:m=>p(m.target.value),className:u})})]})]})}function Ne(){const{pickupLocation:t,servedCountries:i,address1:n,setAddress1:l,address2:s,setAddress2:p,city:c,setCity:b,postcode:m,setPostcode:f,phone:x,setPhone:d,country:o,setCountry:y,subdivision:C,setSubdivision:g,subdivisions:E,destination:re,postcodeLabel:R,subdivisionLabel:$,me:A,savedAddresses:P,selectedAddressId:_,setSelectedAddressId:L,saveAddress:F,setSaveAddress:Y,saveLabel:M,setSaveLabel:U,fillFromAddress:z}=k();return a(w,{num:"N° 02",title:t?"Collection":"Shipping address",children:[t?a("div",{className:"grid gap-2 text-[14px] leading-[1.6]",children:[e("span",{className:"font-medium",children:t.name}),[t.address,t.city,t.state,t.zipCode,t.country].filter(Boolean).length>0&&e("span",{className:"opacity-80",children:[t.address,t.city,t.state,t.zipCode,t.country].filter(Boolean).join(", ")}),t.openingHours&&e("span",{className:"opacity-80",children:t.openingHours}),t.instructions&&e("span",{className:"opacity-80",children:t.instructions}),e("span",{className:"mt-1 font-mono text-[11px] uppercase tracking-[0.2em] text-fg-dim",children:"No delivery address needed"})]}):a(N,{children:[A!==null&&P.length>0&&a("div",{className:"grid gap-3",children:[P.map(r=>e(S,{active:_===r.id,onClick:()=>{L(r.id),z(r)},title:r.label,body:r.formatted_address,price:null},r.id)),e(S,{active:_==="new",onClick:()=>L("new"),title:"New address",body:null,price:null})]}),e(h,{label:"Address line 1",children:e("input",{type:"text",value:n,onChange:r=>l(r.target.value),className:u})}),e(h,{label:"Address line 2",children:e("input",{type:"text",value:s,onChange:r=>p(r.target.value),placeholder:"Apartment, unit, garage bay…",className:u})}),a(I,{cols:"three",children:[e(h,{label:"City",children:e("input",{type:"text",value:c,onChange:r=>b(r.target.value),className:u})}),e(h,{label:R,children:e("input",{type:"text",value:m,onChange:r=>f(r.target.value),className:u})}),e(h,{label:"Country",separate:!0,children:e(B,{value:o,onChange:r=>y(r.target.value),className:u+" pr-10",style:T,children:i.map(r=>e("option",{value:r.code,children:r.name},r.code))})})]}),e(h,{label:$,separate:!0,children:E.length>0?a(B,{value:C,onChange:r=>g(r.target.value),className:u+" pr-10",style:T,children:[e("option",{value:"",children:"Select…"}),E.map(r=>e("option",{value:r.code||r.name,children:r.name},r.code||r.name))]}):e("input",{type:"text",value:C,onChange:r=>g(r.target.value),className:u})})]}),e(h,{label:"Phone",children:e("input",{type:"tel",value:x,onChange:r=>d(r.target.value),className:u})}),!t&&A!==null&&_==="new"&&a(N,{children:[e(te,{checked:F,onChange:Y,label:"Save this address to my account"}),F&&e(h,{label:"Address label",children:e("input",{type:"text",value:M,onChange:r=>U(r.target.value),placeholder:"Home",className:u})})]})]})}function ve(){const{totals:t,coupon:i,deliveryOptions:n,shippingMethodId:l,setShippingMethodId:s,pickupLocation:p,formatMoney:c,city:b,destination:m,courierUnavailable:f,retryCourier:x}=k();return e(w,{num:"N° 03",title:"Shipping",children:a("div",{className:"grid gap-3",children:[n.map(d=>{const o=d.pickupLocation,y=o?[o.address,o.city,o.state,o.zipCode].filter(Boolean).join(", "):null;return e(S,{active:l===d.id,onClick:()=>s(d.id),title:o?`${d.name} — ${o.name}`:d.name,body:o?[y,o.openingHours,o.instructions,d.description].filter(Boolean).join(" · "):d.description||null,price:t.freeShipping||d.amount===0?j:c(d.amount,t.currency),tag:d.tag||void 0},d.id)}),f?a("p",{className:"font-mono text-[11px] uppercase tracking-[0.2em] text-fg-dim",children:[ee," ",e("button",{type:"button",onClick:x,className:"underline transition-colors hover:text-accent",children:"Try again"})]}):n.length===0&&e("p",{className:"font-mono text-[11px] uppercase tracking-[0.2em] text-fg-dim",children:"Shipping is arranged after your order is reviewed."})]})})}function ke(){const{payChoice:t,setPayChoice:i,placing:n,payment:l,payOptions:s,noPaymentMethod:p}=k();return a(w,{num:"N° 04",title:"Payment",children:[p&&e("p",{className:"font-mono text-[11px] uppercase tracking-[0.2em] text-fg-dim",children:V}),e("div",{className:"grid gap-3",children:s.map(c=>e(S,{active:t===c.key,onClick:()=>i(c.key),title:c.title,body:c.body,price:c.price,tag:c.tag},c.key))}),t==="card"?e("p",{className:"font-mono text-[11px] uppercase tracking-[0.2em] text-fg-dim",children:"You’ll enter card details on the secure payment step after placing the order."}):t==="paypal"?e("p",{className:"font-mono text-[11px] uppercase tracking-[0.2em] text-fg-dim",children:"You’ll approve the payment with PayPal on the payment step after placing the order."}):t==="afterpay"?e("p",{className:"font-mono text-[11px] uppercase tracking-[0.2em] text-fg-dim",children:"You’ll be taken to Afterpay to approve four interest-free payments, then brought straight back."}):t==="square"?e("p",{className:"font-mono text-[11px] uppercase tracking-[0.2em] text-fg-dim",children:"You’ll enter card details on the secure payment step after placing the order."}):t==="gocardless"?e("p",{className:"font-mono text-[11px] uppercase tracking-[0.2em] text-fg-dim",children:"You’ll set up a bank direct debit with GoCardless, then be brought straight back. Direct debits clear in a few days."}):t==="zip"?e("p",{className:"font-mono text-[11px] uppercase tracking-[0.2em] text-fg-dim",children:"You’ll be taken to Zip to approve four instalments, then brought straight back."}):t==="klarna"?e("p",{className:"font-mono text-[11px] uppercase tracking-[0.2em] text-fg-dim",children:"You’ll be taken to Klarna to choose how to pay, then brought straight back."}):t==="bank"?e("p",{className:"font-mono text-[11px] uppercase tracking-[0.2em] text-fg-dim",children:"Our team emails you the invoice and bank details after review."}):null]})}function Ce(){const{site:t,items:i,totals:n,coupon:l,formatMoney:s,payChoice:p,placing:c,email:b,orderError:m,payment:f,noPaymentMethod:x,placeOrder:d}=k();return a("aside",{className:"sticky top-[var(--sf-checkout-header-h,88px)] border border-line max-[1100px]:static",style:{background:"linear-gradient(180deg, color-mix(in oklab, var(--site-surface) 70%, var(--bg)) 0%, var(--bg) 100%)"},children:[a("header",{className:"flex items-center justify-between border-b border-accent bg-accent px-6 py-4 font-mono text-[13px] font-bold uppercase tracking-[0.28em] text-bg",children:[e("span",{children:"Your order"}),e(O,{href:"/wheels",className:"text-bg/80 transition-colors hover:text-bg",children:"Edit ↗"})]}),e("div",{className:"flex flex-col px-6 py-2",children:i.length===0?a("div",{className:"py-8 text-center font-serif text-[16px] italic leading-[1.5] text-fg-dim",children:["Your cart is empty. ",e(O,{href:"/wheels",className:"text-accent underline-offset-4 hover:underline",children:"Browse the catalog →"})]}):i.map(o=>e(ne,{slug:o.slug,name:o.name,qty:o.qty,config:o.config,configSummary:ae(o.config),price:q(o,n.currency)??0,currency:n.currency},o.id))}),e("div",{className:"border-t border-line px-6 pt-5",children:e(W,{customerEmail:b})}),a("div",{className:"flex flex-col gap-2 border-t border-line mt-5 px-6 pt-5",children:[e(v,{label:"Subtotal",value:s(n.subtotal,n.currency)}),n.discount>0&&l?.valid&&e(v,{label:`Coupon · ${l.code}`,value:a("span",{className:"font-semibold text-green",children:["− ",s(n.discount,n.currency)]})}),l?.deferred&&e(v,{label:`Coupon · ${l.code}`,value:K}),l?.valid&&l.effects?.gift&&e(v,{label:`Free gift · ${l.effects.gift.partNumber}${l.effects.gift.quantity>1?` ×${l.effects.gift.quantity}`:""}`,value:e("span",{className:"font-semibold text-green",children:j})}),e(v,{label:"Shipping",value:n.shippingStatus==="free"?e("span",{className:"font-semibold text-green",children:j}):X(n.shippingStatus)??s(n.shipping,n.currency)}),n.tax&&(n.tax.charged?e(v,{label:n.tax.inclusive?`${n.tax.name} included · ${n.tax.rate}%`:n.tax.name,value:s(n.tax.amount,n.currency)}):n.tax.name?e(v,{label:n.tax.name,value:Z}):null)]}),a("div",{className:"mt-4 flex items-end justify-between border-y-2 border-accent px-6 py-4",style:{background:"color-mix(in oklab, var(--accent) 10%, var(--bg))"},children:[e("span",{className:"font-display text-[20px] font-bold uppercase tracking-[0.04em] text-fg",children:"Total"}),e("span",{className:"text-right font-display text-[34px] font-bold leading-none tracking-[-0.025em] text-fg",children:n.repricing?"…":s(n.grand,n.currency)})]}),a("div",{className:"flex flex-col gap-3 px-6 pt-5 pb-6",children:[m&&e("p",{className:"border border-red-300 bg-red-50 px-3 py-2 text-[13px] text-red-700",children:m}),n.hasUnpricedLine&&a("p",{className:"border border-amber-300 bg-amber-50 px-3 py-2 text-[13px] text-amber-800",children:["One or more items have no price in ",n.currency,". Remove them, or switch region, to continue."]}),e("button",{type:"button",onClick:d,disabled:c||x||i.length===0||n.hasUnpricedLine||n.repricing,className:["group flex items-center justify-between border px-5 py-5 font-mono text-[14px] font-medium uppercase tracking-[0.3em] transition-all",i.length===0||c||x||n.hasUnpricedLine||n.repricing?"cursor-not-allowed border-line bg-surface text-fg-dim":"border-btn bg-btn text-btn-ink hover:border-fg hover:bg-fg"].join(" "),children:c?a(N,{children:["Building order… ",e("span",{children:"·"})]}):x?a(N,{children:["No online payment ",e("span",{children:"·"})]}):n.repricing?a(N,{children:["Updating total… ",e("span",{children:"·"})]}):a(N,{children:[p==="bank"?"Place order":"Continue to payment"," ·"," ",s(n.grand,n.currency),e("span",{className:"transition-transform group-hover:translate-x-1",children:"→"})]})})]})]})}const u="w-full border-2 border-line bg-bg px-4 py-4 font-display text-[17px] tracking-[-0.005em] text-fg outline-none transition-colors placeholder:text-fg-dim hover:border-fg-dim focus:border-accent",T={backgroundImage:"linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%)",backgroundPosition:"calc(100% - 18px) 50%, calc(100% - 12px) 50%",backgroundSize:"6px 6px",backgroundRepeat:"no-repeat"};function w({num:t,title:i,children:n}){return a("section",{className:"mb-6 border border-line bg-bg",children:[a("header",{className:"flex items-center gap-4 border-b border-line bg-surface px-6 py-4",children:[e("span",{className:"inline-flex items-center justify-center bg-accent px-3 py-1 font-mono text-[11px] font-bold uppercase tracking-[0.24em] text-bg",children:t}),e("h2",{className:"font-display text-[26px] font-medium uppercase leading-none tracking-[-0.02em] text-fg",children:i})]}),e("div",{className:"flex flex-col gap-4 px-6 py-6",children:n})]})}function I({cols:t="two",children:i}){return e("div",{className:["grid gap-3 max-[640px]:grid-cols-1",t==="two"?"grid-cols-2":"grid-cols-[1.2fr_1fr_1fr]"].join(" "),children:i})}function S({active:t,onClick:i,title:n,body:l,price:s,tag:p}){return a("button",{type:"button",onClick:i,"aria-pressed":t,className:["relative grid grid-cols-[auto_1fr_auto] items-center gap-5 border bg-bg px-6 py-5 text-left transition-colors",t?"border-accent outline outline-1 outline-accent -outline-offset-1":"border-line hover:border-[color-mix(in_oklab,var(--accent)_50%,var(--site-line))]"].join(" "),style:t?{background:"color-mix(in oklab, var(--accent) 14%, var(--bg))"}:void 0,children:[t&&e("span",{"aria-hidden":!0,className:"absolute inset-y-0 left-0 w-[3px] bg-accent"}),e("span",{className:["flex h-[18px] w-[18px] items-center justify-center rounded-full border-2",t?"border-accent":"border-fg-dim"].join(" "),children:t&&e("span",{className:"block h-2.5 w-2.5 rounded-full bg-accent"})}),a("span",{className:"flex min-w-0 flex-col gap-1",children:[a("span",{className:"flex flex-wrap items-baseline gap-3 font-display text-[18px] font-medium tracking-[-0.01em] text-fg",children:[n,p&&e("span",{className:"border px-2 py-0.5 font-mono text-[11px] font-normal uppercase tracking-[0.24em] text-accent",style:{background:"color-mix(in oklab, var(--accent) 14%, transparent)",borderColor:"color-mix(in oklab, var(--accent) 45%, var(--site-line))"},children:p})]}),l&&e("span",{className:"font-mono text-[12px] uppercase tracking-[0.22em] text-fg-dim",children:l})]}),e("span",{className:"whitespace-nowrap font-display text-[18px] font-medium tracking-[-0.01em] text-fg",children:s})]})}function te({checked:t,onChange:i,label:n,sub:l}){return a("div",{className:"flex items-start gap-3 border-t border-line py-4 first:border-t-0 first:pt-0",children:[e("button",{type:"button",onClick:()=>i(!t),"aria-pressed":t,"aria-label":n,className:["mt-px flex h-5 w-5 flex-shrink-0 items-center justify-center border transition-colors",t?"border-accent":"border-line"].join(" "),style:t?{background:"color-mix(in oklab, var(--accent) 18%, transparent)"}:void 0,children:t&&e("span",{className:"text-[13px] text-accent",children:"✓"})}),a("span",{className:"flex-1 font-display text-[16px] leading-[1.5] text-fg",children:[n,l&&e("small",{className:"mt-1 block font-mono text-[12px] uppercase tracking-[0.18em] text-fg-dim",children:l})]})]})}function ne({slug:t,name:i,qty:n,config:l,configSummary:s,price:p,currency:c}){const{catalog:b}=D(),{formatMoney:m}=G(),f=b.find(g=>g.slug===t),x=f?.spokes??5,d=f?.mesh??!1,o=l.find(g=>g.gold)?.label,y=f?.finishes.find(g=>g.name===o&&g.src)??f?.finishes.find(g=>g.src),C=f?.finishes[0]?.color??J;return a("div",{className:"grid grid-cols-[60px_1fr_auto] items-center gap-4 border-b border-line py-4 last:border-b-0",children:[a("div",{className:"relative flex aspect-square items-center justify-center overflow-hidden border border-line bg-surface",children:[e("span",{className:"absolute -right-1.5 -top-1.5 z-[2] flex h-[18px] w-[18px] items-center justify-center rounded-full bg-accent font-mono text-[11px] font-bold text-bg",children:n}),y?.src?e(H,{src:y.src,alt:`${i.lead}${i.accent} — ${y.name}`,width:120,height:120,sizes:"60px",className:"relative block h-full w-full object-contain p-2"}):e("div",{className:"block w-[78%]",style:{color:C},children:e(Q,{spokes:x,mesh:d,className:"block w-full"})})]}),a("div",{className:"flex min-w-0 flex-col gap-0.5",children:[a("span",{className:"font-display text-[17px] font-bold uppercase leading-none tracking-[-0.005em] text-fg",children:[i.lead,e("em",{className:"font-serif font-normal italic text-accent tracking-[-0.005em] normal-case",children:i.accent})]}),e("span",{className:"font-mono text-[12px] uppercase leading-[1.5] tracking-[0.18em] text-fg-dim",children:s})]}),e("span",{className:"text-right font-display text-[17px] font-bold tracking-[-0.005em] text-fg",children:m(p,c)})]})}function v({label:t,value:i}){return a("div",{className:"flex items-center justify-between font-mono text-[13px] font-medium uppercase tracking-[0.18em] text-fg",children:[e("span",{children:t}),e("strong",{className:"font-display text-[16px] font-medium tracking-[-0.005em] normal-case text-fg",children:i})]})}function ae(t){return t.map(i=>i.label).join(" · ")}export{ye as CheckoutContact,Ce as CheckoutOrderSummary,ke as CheckoutPayment,Ne as CheckoutShippingAddress,ve as CheckoutShippingMethod};
+"use client";import{jsx as e,Fragment as N,jsxs as a}from"react/jsx-runtime";import{useId as E}from"react";import W from"next/image";import T from"next/link";import{lineTotal as K,useCart as X}from"../CartContext.js";import{useCurrency as Z}from"../CurrencyContext.js";import{Notice as R}from"../Notice.js";import{FREE_PRICE as F}from"../../lib/wheels/price-display.js";import J from"../CouponField.js";import{COUPON_DEFERRED_TOTAL as Q}from"../../lib/cart/coupon-preview.js";import{orderReference as V}from"../../lib/checkout/pay-first.js";import{shippingWords as ee,TAX_PENDING as te}from"../../lib/cart/shipping-status.js";import{DEFAULT_FINISH_COLOR as ne}from"../../lib/wheels/finish-defaults.js";import $ from"../ThemedSelect.js";import f from"../WebFormField.js";import ae from"../WheelSvg.js";import{NO_PAYMENT_METHOD_NOTE as re,SHIPPING_RETRY_NOTE as ie,useCheckout as k}from"./checkout-state.js";import{FIELD_INPUT_CLASS as g}from"../../lib/field-input.js";function Ee(){const{email:t,setEmail:i,firstName:n,setFirstName:l,lastName:c,setLastName:u,me:o,checkoutSignOut:y}=k(),x=E();return a(w,{num:"N° 01",title:"Contact",children:[e(f,{label:"Email",htmlFor:x,hint:o?a(N,{children:["Signed in ·"," ",e("button",{type:"button",onClick:y,className:"underline transition-colors hover:text-accent",children:"Not you? Sign out"})]}):void 0,children:e("input",{id:x,type:"email",value:t,onChange:d=>i(d.target.value),placeholder:"you@example.com",readOnly:o!==null,className:g+(o?" opacity-70":"")})}),a(M,{children:[e(f,{label:"First name",children:e("input",{type:"text",value:n,onChange:d=>l(d.target.value),className:g})}),e(f,{label:"Last name",children:e("input",{type:"text",value:c,onChange:d=>u(d.target.value),className:g})})]})]})}function Fe(){const{pickupLocation:t,servedCountries:i,address1:n,setAddress1:l,address2:c,setAddress2:u,city:o,setCity:y,postcode:x,setPostcode:d,phone:b,setPhone:s,country:p,setCountry:m,subdivision:C,setSubdivision:h,subdivisions:A,destination:ce,postcodeLabel:U,subdivisionLabel:z,me:I,savedAddresses:L,selectedAddressId:_,setSelectedAddressId:P,saveAddress:O,setSaveAddress:D,saveLabel:H,setSaveLabel:q,fillFromAddress:G}=k(),B=E(),j=E();return a(w,{num:"N° 02",title:t?"Collection":"Shipping address",children:[t?a("div",{className:"grid gap-2 text-[14px] leading-[1.6]",children:[e("span",{className:"font-medium",children:t.name}),[t.address,t.city,t.state,t.zipCode,t.country].filter(Boolean).length>0&&e("span",{className:"opacity-80",children:[t.address,t.city,t.state,t.zipCode,t.country].filter(Boolean).join(", ")}),t.openingHours&&e("span",{className:"opacity-80",children:t.openingHours}),t.instructions&&e("span",{className:"opacity-80",children:t.instructions}),e("span",{className:"mt-1 font-mono text-[11px] uppercase tracking-[0.2em] text-fg-dim",children:"No delivery address needed"})]}):a(N,{children:[I!==null&&L.length>0&&a("div",{className:"grid gap-3",children:[L.map(r=>e(S,{active:_===r.id,onClick:()=>{P(r.id),G(r)},title:r.label,body:r.formatted_address,price:null},r.id)),e(S,{active:_==="new",onClick:()=>P("new"),title:"New address",body:null,price:null})]}),e(f,{label:"Address line 1",children:e("input",{type:"text",value:n,onChange:r=>l(r.target.value),className:g})}),e(f,{label:"Address line 2",children:e("input",{type:"text",value:c,onChange:r=>u(r.target.value),placeholder:"Apartment, unit, garage bay…",className:g})}),a(M,{cols:"three",children:[e(f,{label:"City",children:e("input",{type:"text",value:o,onChange:r=>y(r.target.value),className:g})}),e(f,{label:U,children:e("input",{type:"text",value:x,onChange:r=>d(r.target.value),className:g})}),e(f,{label:"Country",separate:!0,htmlFor:B,children:e($,{id:B,value:p,onChange:r=>m(r.target.value),className:g+" pr-10",style:Y,children:i.map(r=>e("option",{value:r.code,children:r.name},r.code))})})]}),e(f,{label:z,separate:!0,htmlFor:j,children:A.length>0?a($,{id:j,value:C,onChange:r=>h(r.target.value),className:g+" pr-10",style:Y,children:[e("option",{value:"",children:"Select…"}),A.map(r=>e("option",{value:r.code||r.name,children:r.name},r.code||r.name))]}):e("input",{id:j,type:"text",value:C,onChange:r=>h(r.target.value),className:g})})]}),e(f,{label:"Phone",children:e("input",{type:"tel",value:b,onChange:r=>s(r.target.value),className:g})}),!t&&I!==null&&_==="new"&&a(N,{children:[e(le,{checked:O,onChange:D,label:"Save this address to my account"}),O&&e(f,{label:"Address label",children:e("input",{type:"text",value:H,onChange:r=>q(r.target.value),placeholder:"Home",className:g})})]})]})}function Ae(){const{totals:t,coupon:i,deliveryOptions:n,shippingMethodId:l,setShippingMethodId:c,pickupLocation:u,formatMoney:o,city:y,destination:x,courierUnavailable:d,retryCourier:b}=k();return e(w,{num:"N° 03",title:"Shipping",children:a("div",{className:"grid gap-3",children:[n.map(s=>{const p=s.pickupLocation,m=p?[p.address,p.city,p.state,p.zipCode].filter(Boolean).join(", "):null;return e(S,{active:l===s.id,onClick:()=>c(s.id),title:p?`${s.name} — ${p.name}`:s.name,body:p?[m,p.openingHours,p.instructions,s.description].filter(Boolean).join(" · "):s.description||null,price:t.freeShipping||s.amount===0?F:o(s.amount,t.currency),tag:s.tag||void 0},s.id)}),d?a("p",{className:"font-mono text-[11px] uppercase tracking-[0.2em] text-fg-dim",children:[ie," ",e("button",{type:"button",onClick:b,className:"underline transition-colors hover:text-accent",children:"Try again"})]}):n.length===0&&e("p",{className:"font-mono text-[11px] uppercase tracking-[0.2em] text-fg-dim",children:"Shipping is arranged after your order is reviewed."})]})})}function Ie(){const{payChoice:t,setPayChoice:i,placing:n,payment:l,payOptions:c,noPaymentMethod:u}=k();return a(w,{num:"N° 04",title:"Payment",children:[u&&e("p",{className:"font-mono text-[11px] uppercase tracking-[0.2em] text-fg-dim",children:re}),e("div",{className:"grid gap-3",children:c.map(o=>e(S,{active:t===o.key,onClick:()=>i(o.key),title:o.title,body:o.body,price:o.price,tag:o.tag},o.key))}),t==="card"?e("p",{className:"font-mono text-[11px] uppercase tracking-[0.2em] text-fg-dim",children:"You’ll enter card details on the secure payment step after placing the order."}):t==="paypal"?e("p",{className:"font-mono text-[11px] uppercase tracking-[0.2em] text-fg-dim",children:"You’ll approve the payment with PayPal on the payment step after placing the order."}):t==="afterpay"?e("p",{className:"font-mono text-[11px] uppercase tracking-[0.2em] text-fg-dim",children:"You’ll be taken to Afterpay to approve four interest-free payments, then brought straight back."}):t==="square"?e("p",{className:"font-mono text-[11px] uppercase tracking-[0.2em] text-fg-dim",children:"You’ll enter card details on the secure payment step after placing the order."}):t==="gocardless"?e("p",{className:"font-mono text-[11px] uppercase tracking-[0.2em] text-fg-dim",children:"You’ll set up a bank direct debit with GoCardless, then be brought straight back. Direct debits clear in a few days."}):t==="zip"?e("p",{className:"font-mono text-[11px] uppercase tracking-[0.2em] text-fg-dim",children:"You’ll be taken to Zip to approve four instalments, then brought straight back."}):t==="klarna"?e("p",{className:"font-mono text-[11px] uppercase tracking-[0.2em] text-fg-dim",children:"You’ll be taken to Klarna to choose how to pay, then brought straight back."}):t==="bank"?e("p",{className:"font-mono text-[11px] uppercase tracking-[0.2em] text-fg-dim",children:"Our team emails you the invoice and bank details after review."}):null]})}function Le(){const{site:t,items:i,totals:n,coupon:l,formatMoney:c,payChoice:u,placing:o,email:y,orderError:x,payment:d,noPaymentMethod:b,unpaidOrder:s,placeOrder:p}=k();return a("aside",{className:"sticky top-[var(--sf-checkout-header-h,88px)] border border-line max-[1100px]:static",style:{background:"linear-gradient(180deg, color-mix(in oklab, var(--site-surface) 70%, var(--bg)) 0%, var(--bg) 100%)"},children:[a("header",{className:"flex items-center justify-between border-b border-accent bg-accent px-6 py-4 font-mono text-[13px] font-bold uppercase tracking-[0.28em] text-bg",children:[e("span",{children:"Your order"}),e(T,{href:"/wheels",className:"text-bg/80 transition-colors hover:text-bg",children:"Edit ↗"})]}),e("div",{className:"flex flex-col px-6 py-2",children:i.length===0?a("div",{className:"py-8 text-center font-serif text-[16px] italic leading-[1.5] text-fg-dim",children:["Your cart is empty. ",e(T,{href:"/wheels",className:"text-accent underline-offset-4 hover:underline",children:"Browse the catalog →"})]}):i.map(m=>e(oe,{slug:m.slug,name:m.name,qty:m.qty,config:m.config,configSummary:se(m.config),price:K(m,n.currency)??0,currency:n.currency},m.id))}),e("div",{className:"border-t border-line px-6 pt-5",children:e(J,{customerEmail:y})}),a("div",{className:"flex flex-col gap-2 border-t border-line mt-5 px-6 pt-5",children:[e(v,{label:"Subtotal",value:c(n.subtotal,n.currency)}),n.discount>0&&l?.valid&&e(v,{label:`Coupon · ${l.code}`,value:a("span",{className:"font-semibold text-green",children:["− ",c(n.discount,n.currency)]})}),l?.deferred&&e(v,{label:`Coupon · ${l.code}`,value:Q}),l?.valid&&l.effects?.gift&&e(v,{label:`Free gift · ${l.effects.gift.partNumber}${l.effects.gift.quantity>1?` ×${l.effects.gift.quantity}`:""}`,value:e("span",{className:"font-semibold text-green",children:F})}),e(v,{label:"Shipping",value:n.shippingStatus==="free"?e("span",{className:"font-semibold text-green",children:F}):ee(n.shippingStatus)??c(n.shipping,n.currency)}),n.tax&&(n.tax.charged?e(v,{label:n.tax.inclusive?`${n.tax.name} included · ${n.tax.rate}%`:n.tax.name,value:c(n.tax.amount,n.currency)}):n.tax.name?e(v,{label:n.tax.name,value:te}):null)]}),a("div",{className:"mt-4 flex items-end justify-between border-y-2 border-accent px-6 py-4",style:{background:"color-mix(in oklab, var(--accent) 10%, var(--bg))"},children:[e("span",{className:"font-display text-[20px] font-bold uppercase tracking-[0.04em] text-fg",children:"Total"}),e("span",{className:"text-right font-display text-[34px] font-bold leading-none tracking-[-0.025em] text-fg",children:n.repricing?"…":c(n.grand,n.currency)})]}),a("div",{className:"flex flex-col gap-3 px-6 pt-5 pb-6",children:[x&&e(R,{role:"alert",children:x}),n.hasUnpricedLine&&a(R,{role:"status",children:["One or more items have no price in ",n.currency,". Remove them, or switch region, to continue."]}),e("button",{type:"button",onClick:p,disabled:o||!s&&(b||i.length===0||n.hasUnpricedLine||n.repricing),className:["group flex items-center justify-between border px-5 py-5 font-mono text-[14px] font-medium uppercase tracking-[0.3em] transition-all",o||!s&&(i.length===0||b||n.hasUnpricedLine||n.repricing)?"cursor-not-allowed border-line bg-surface text-fg-dim":"border-btn bg-btn text-btn-ink hover:border-fg hover:bg-fg"].join(" "),children:o?a(N,{children:["Building order… ",e("span",{children:"·"})]}):b?a(N,{children:["No online payment ",e("span",{children:"·"})]}):s?a(N,{children:["Try payment again · ",V(s),e("span",{className:"transition-transform group-hover:translate-x-1",children:"→"})]}):n.repricing?a(N,{children:["Updating total… ",e("span",{children:"·"})]}):a(N,{children:[u==="bank"?"Place order":"Continue to payment"," ·"," ",c(n.grand,n.currency),e("span",{className:"transition-transform group-hover:translate-x-1",children:"→"})]})})]})]})}const Y={backgroundImage:"linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%)",backgroundPosition:"calc(100% - 18px) 50%, calc(100% - 12px) 50%",backgroundSize:"6px 6px",backgroundRepeat:"no-repeat"};function w({num:t,title:i,children:n}){return a("section",{className:"mb-6 border border-line bg-bg",children:[a("header",{className:"flex items-center gap-4 border-b border-line bg-surface px-6 py-4",children:[e("span",{className:"inline-flex items-center justify-center bg-accent px-3 py-1 font-mono text-[11px] font-bold uppercase tracking-[0.24em] text-bg",children:t}),e("h2",{className:"font-display text-[26px] font-medium uppercase leading-none tracking-[-0.02em] text-fg",children:i})]}),e("div",{className:"flex flex-col gap-4 px-6 py-6",children:n})]})}function M({cols:t="two",children:i}){return e("div",{className:["grid gap-3 max-[640px]:grid-cols-1",t==="two"?"grid-cols-2":"grid-cols-[1.2fr_1fr_1fr]"].join(" "),children:i})}function S({active:t,onClick:i,title:n,body:l,price:c,tag:u}){return a("button",{type:"button",onClick:i,"aria-pressed":t,className:["relative grid grid-cols-[auto_1fr_auto] items-center gap-5 border bg-bg px-6 py-5 text-left transition-colors",t?"border-accent outline outline-1 outline-accent -outline-offset-1":"border-line hover:border-[color-mix(in_oklab,var(--accent)_50%,var(--site-line))]"].join(" "),style:t?{background:"color-mix(in oklab, var(--accent) 14%, var(--bg))"}:void 0,children:[t&&e("span",{"aria-hidden":!0,className:"absolute inset-y-0 left-0 w-[3px] bg-accent"}),e("span",{className:["flex h-[18px] w-[18px] items-center justify-center rounded-full border-2",t?"border-accent":"border-fg-dim"].join(" "),children:t&&e("span",{className:"block h-2.5 w-2.5 rounded-full bg-accent"})}),a("span",{className:"flex min-w-0 flex-col gap-1",children:[a("span",{className:"flex flex-wrap items-baseline gap-3 font-display text-[18px] font-medium tracking-[-0.01em] text-fg",children:[n,u&&e("span",{className:"border px-2 py-0.5 font-mono text-[11px] font-normal uppercase tracking-[0.24em] text-accent",style:{background:"color-mix(in oklab, var(--accent) 14%, transparent)",borderColor:"color-mix(in oklab, var(--accent) 45%, var(--site-line))"},children:u})]}),l&&e("span",{className:"font-mono text-[12px] uppercase tracking-[0.22em] text-fg-dim",children:l})]}),e("span",{className:"whitespace-nowrap font-display text-[18px] font-medium tracking-[-0.01em] text-fg",children:c})]})}function le({checked:t,onChange:i,label:n,sub:l}){return a("div",{className:"flex items-start gap-3 border-t border-line py-4 first:border-t-0 first:pt-0",children:[e("button",{type:"button",onClick:()=>i(!t),"aria-pressed":t,"aria-label":n,className:["mt-px flex h-5 w-5 flex-shrink-0 items-center justify-center border transition-colors",t?"border-accent":"border-line"].join(" "),style:t?{background:"color-mix(in oklab, var(--accent) 18%, transparent)"}:void 0,children:t&&e("span",{className:"text-[13px] text-accent",children:"✓"})}),a("span",{className:"flex-1 font-display text-[16px] leading-[1.5] text-fg",children:[n,l&&e("small",{className:"mt-1 block font-mono text-[12px] uppercase tracking-[0.18em] text-fg-dim",children:l})]})]})}function oe({slug:t,name:i,qty:n,config:l,configSummary:c,price:u,currency:o}){const{catalog:y}=X(),{formatMoney:x}=Z(),d=y.find(h=>h.slug===t),b=d?.spokes??5,s=d?.mesh??!1,p=l.find(h=>h.gold)?.label,m=d?.finishes.find(h=>h.name===p&&h.src)??d?.finishes.find(h=>h.src),C=d?.finishes[0]?.color??ne;return a("div",{className:"grid grid-cols-[60px_1fr_auto] items-center gap-4 border-b border-line py-4 last:border-b-0",children:[a("div",{className:"relative aspect-square",children:[e("div",{className:"flex h-full w-full items-center justify-center overflow-hidden border border-line bg-surface",children:m?.src?e(W,{src:m.src,alt:`${i.lead}${i.accent} — ${m.name}`,width:120,height:120,sizes:"60px",className:"block h-full w-full object-contain p-2"}):e("div",{className:"block w-[78%]",style:{color:C},children:e(ae,{spokes:b,mesh:s,className:"block w-full"})})}),e("span",{className:"absolute -right-1.5 -top-1.5 z-[2] flex h-[18px] w-[18px] items-center justify-center rounded-full bg-accent font-mono text-[11px] font-bold text-bg",children:n})]}),a("div",{className:"flex min-w-0 flex-col gap-0.5",children:[a("span",{className:"font-display text-[17px] font-bold uppercase leading-none tracking-[-0.005em] text-fg",children:[i.lead,e("em",{className:"font-serif font-normal italic text-accent tracking-[-0.005em] normal-case",children:i.accent})]}),e("span",{className:"font-mono text-[12px] uppercase leading-[1.5] tracking-[0.18em] text-fg-dim",children:c})]}),e("span",{className:"text-right font-display text-[17px] font-bold tracking-[-0.005em] text-fg",children:x(u,o)})]})}function v({label:t,value:i}){return a("div",{className:"flex items-center justify-between font-mono text-[13px] font-medium uppercase tracking-[0.18em] text-fg",children:[e("span",{children:t}),e("strong",{className:"font-display text-[16px] font-medium tracking-[-0.005em] normal-case text-fg",children:i})]})}function se(t){return t.map(i=>i.label).join(" · ")}export{Ee as CheckoutContact,Le as CheckoutOrderSummary,Ie as CheckoutPayment,Fe as CheckoutShippingAddress,Ae as CheckoutShippingMethod};

package/dist/render/components/checkout/checkout-state.d.ts

@@ -1,6 +1,7 @@
 import { type SiteIdentity } from "../../lib/content/site.js";
-import type { ShopAddress, ShopMe } from "../../lib/api/index.js";
+import type { OrderConfirmation, ShopAddress, ShopMe } from "../../lib/api/index.js";
 import { type LandingOrder } from "../../lib/checkout/wallet-return.js";
+import { type PayFirstResult } from "../../lib/checkout/pay-first.js";
 type PayKey = "card" | "paypal" | "afterpay" | "square" | "gocardless" | "zip" | "klarna" | "bank";
 interface PayOption {
     key: PayKey;
@@ -13,6 +14,7 @@ export declare function buildPayOptions(site: SiteIdentity, { canParkContext, }?
     canParkContext: boolean;
 }): PayOption[];
 export declare const NO_PAYMENT_METHOD_NOTE = "This shop does not take payment online yet. Please contact the shop to order.";
+export declare function paymentNotStartedMessage(conf: Pick<OrderConfirmation, "orderNumber" | "checkoutNumber">, err: unknown): string;
 export declare const SHIPPING_RETRY_NOTE = "Shipping cannot be calculated right now. Please try again.";
 export interface CheckoutProps {
     site: SiteIdentity;
@@ -142,6 +144,8 @@ declare function useCheckoutState({ site, logo, preview }: CheckoutProps): {
     squareStep: boolean;
     pendingConf: {
         orderNumber: string;
+        checkoutNumber: string;
+        expiresAt: string | null;
         status: string;
         total: string;
         currency: string;
@@ -153,11 +157,31 @@ declare function useCheckoutState({ site, logo, preview }: CheckoutProps): {
     } | null;
     paid: boolean;
     setPaid: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    unpaidOrder: {
+        orderNumber: string;
+        checkoutNumber: string;
+        expiresAt: string | null;
+        status: string;
+        total: string;
+        currency: string;
+        freightCharge: string;
+        discountAmount: string;
+        grandTotal: string;
+        shippingMethod?: string | null;
+        couponCode?: string | null;
+    } | null;
     payNote: string | null;
     afterpayConfirming: boolean;
     gocardlessConfirming: boolean;
     zipConfirming: boolean;
     klarnaConfirming: boolean;
+    cardConfirming: boolean;
+    checkoutResult: PayFirstResult | null;
+    confirmCardPayment: (answer?: OrderConfirmation, held?: OrderConfirmation | null) => Promise<void>;
+    cardStillProcessing: (held?: OrderConfirmation | null) => void;
+    renewCardPayment: (cancelled: boolean) => Promise<void>;
+    holdRenewed: boolean;
+    leaveCardPayment: () => void;
     checkoutRootRef: import("react").RefObject<HTMLDivElement | null>;
     setCheckoutHeaderEl: import("react").Dispatch<import("react").SetStateAction<HTMLElement | null>>;
     fillFromAddress: (a: ShopAddress) => void;