);
}
function SFZoneHead({ method, title }) {
const t = title || (method === "pickup" ? "Choose your pickup date" : "Choose your delivery date");
return (
{t}{SF_AREA}
);
}
function SFSlotLabel({ day }) {
return (
{sfDow(day)} · Choose a slot
);
}
// the cream widget card with the shared chrome; `children` is a render-fn receiving the method
function SFShell({ relative, children }) {
const [method, setMethod] = React.useState("delivery");
return (
)}
);
}
function LDStorefront() {
const variants = [
{ id: "strip", name: "Day strip", desc: "A horizontal row of days with time slots underneath — compact and quick. The default." },
{ id: "dropdowns", name: "Dropdowns", desc: "Two tidy dropdowns for date and time, plus an optional note — great for narrow cart drawers." },
{ id: "calendar", name: "Calendar", desc: "A full month grid for stores whose customers book further ahead." },
{ id: "stepped", name: "Stepped", desc: "A guided, one-step-at-a-time flow: pick a date, then a slot, then leave a note." },
{ id: "sheet", name: "Bottom sheet", desc: "A sheet that slides up from the bottom of the screen — ideal on mobile." },
];
const [vid, setVid] = React.useState("strip");
const [open, setOpen] = React.useState(false);
const ref = React.useRef(null);
React.useEffect(() => {
function onDoc(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }
document.addEventListener("mousedown", onDoc);
return () => document.removeEventListener("mousedown", onDoc);
}, []);
const cur = variants.find((v) => v.id === vid);
const body = { strip: , dropdowns: , calendar: , stepped: , sheet: }[vid];
const [theme, setTheme] = React.useState("Classic");
const [wstyle, setWstyle] = React.useState("Bold");
return (
On your storefront
One date picker, five ways to show it.
Pick the layout that fits your theme and your customers. Every variant comes in ready-made theme presets and works on the cart drawer and the cart page.
Ready-made theme presets and a bold or flat style — the preview updates live. No custom code.
{body}
{/* postcode availability check */}
🌸
Wild Garden Bouquet
$68.00
Local same-day delivery available
Enter your postcode
2000
Same-day to Inner West
Order before 2pm · pick your slot in the cart
Postcode check
Shoppers check delivery right inside the cart.
The picker checks the customer’s postcode against your delivery areas and shows whether you deliver there — and on which days — before they reach checkout.
{["Matches the postcode to the right delivery area", "Shows the days and slots available for that area", "Offers pickup when an address is outside your delivery areas"].map((t) => (
{t}
))}
{/* unavailable / out-of-area state */}
);
}
function SFUnavailable() {
return (
When delivery isn’t available
Never a dead end at the cart.
If an address is outside your delivery areas, the picker says so and offers pickup instead — so you don’t lose the sale.
Schedule Delivery
We don’t deliver to 9999 yet
Your address is outside our delivery zones. You can pick up at our store instead.