@pylonsync/create-pylon 0.19.0 → 0.20.0

package/templates/local-service/app/(marketing)/booking-widget.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import { db, callFn } from "@pylonsync/react";
 import { EnsureGuest } from "@pylonsync/client";
 import { siteConfig } from "@/lib/site.config";
@@ -36,18 +36,46 @@ function Picker() {
   const { services, booking } = siteConfig;
   const { data: busyRows, loading } = db.useQuery<BookedSlotRow>("BookedSlot");
 
+  // In `pylon dev` an empty booking book gets demo appointments
+  // (functions/seedDemo.ts), which show up here as taken times. The call goes
+  // out only when no time is booked, so a live site with bookings never makes it.
+  const empty = !loading && busyRows.length === 0;
+  const seedSent = useRef(false);
+  useEffect(() => {
+    if (!empty || seedSent.current) return;
+    seedSent.current = true;
+    void callFn("seedDemo", {}).catch(() => {});
+  }, [empty]);
+
   // Stamp "now" once so slot availability + the day list are stable across
   // re-renders (and only computed client-side, post-hydration).
   const [nowMs] = useState(() => Date.now());
 
   const openDays = useMemo(() => {
     const days: string[] = [];
+    const shortest = Math.min(...services.items.map((s) => s.durationMin));
     for (let i = 0; i < booking.daysAhead; i++) {
       const key = localDateKey(i, nowMs);
-      if (booking.hours[weekdayOf(key)]) days.push(key);
+      const hrs = booking.hours[weekdayOf(key)];
+      if (!hrs) continue;
+      // Today drops out once no start time is far enough ahead to book.
+      if (i === 0) {
+        const left = slotsForDay({
+          dayISODate: key,
+          open: hrs.open,
+          close: hrs.close,
+          slotMinutes: booking.slotMinutes,
+          durationMin: shortest,
+          leadTimeHours: booking.leadTimeHours,
+          busy: [],
+          nowMs,
+        }).some((s) => s.state !== "past");
+        if (!left) continue;
+      }
+      days.push(key);
     }
     return days;
-  }, [booking.daysAhead, booking.hours, nowMs]);
+  }, [booking.daysAhead, booking.hours, booking.slotMinutes, booking.leadTimeHours, services.items, nowMs]);
 
   const [serviceSlug, setServiceSlug] = useState(services.items[0]?.slug ?? "");
   const [day, setDay] = useState(openDays[0] ?? "");
@@ -75,6 +103,10 @@ function Picker() {
     // busyRows identity changes on every sync push → slots recompute live.
   }, [service, day, booking, busyRows, nowMs]);
 
+  // Times too soon to book are left out; booked times stay visible, struck out.
+  const visible = slots.filter((s) => s.state !== "past");
+  const openCount = visible.filter((s) => s.available).length;
+
   // Clear an IN-PROGRESS selection if its slot just got taken out from under us
   // (someone else booked it while this visitor was filling the form). A slot we
   // successfully booked ourselves lives in `confirmed`, not `selected`, so this
@@ -161,12 +193,14 @@ function Picker() {
         {loading ? (
           <SlotsSkeleton />
         ) : slots.length === 0 ? (
+          <p className="py-6 text-center text-sm text-ink/60">Closed that day. Pick another.</p>
+        ) : visible.length === 0 ? (
           <p className="py-6 text-center text-sm text-ink/60">
-            Closed that day. Pick another.
+            No times left that day. Pick another.
           </p>
         ) : (
           <div className="grid grid-cols-3 gap-2 sm:grid-cols-4">
-            {slots.map((slot) => {
+            {visible.map((slot) => {
               const isSelected = selected?.startsAt === slot.startsAt;
               return (
                 <button
@@ -175,10 +209,13 @@ function Picker() {
                   disabled={!slot.available}
                   onClick={() => pick(slot)}
                   aria-pressed={isSelected}
+                  aria-label={
+                    slot.available ? labelTime(slot.startsAt) : `${labelTime(slot.startsAt)}, booked`
+                  }
                   className={
                     "border py-2 text-[13px] font-medium tabular-nums transition-colors " +
                     (!slot.available
-                      ? "cursor-not-allowed border-ink/20 bg-paper text-ink/30 line-through"
+                      ? "cursor-not-allowed border-ink/15 bg-paper/60 text-ink/35 line-through decoration-ink/40"
                       : isSelected
                         ? "border-brand bg-brand text-cream"
                         : "border-ink/40 text-ink hover:border-brand hover:text-brand")
@@ -190,9 +227,11 @@ function Picker() {
             })}
           </div>
         )}
-        <p className="mt-3 text-[12px] text-ink/60">
-          Greyed-out times are booked. The list updates live as others book.
-        </p>
+        {!loading && visible.length > 0 ? (
+          <p className="mt-3 text-[12px] text-ink/60">
+            {openCount} open · struck-out times are booked. The grid updates live as people book.
+          </p>
+        ) : null}
       </div>
 
       {/* Confirmation persists after a successful booking… */}

package/templates/local-service/app/(marketing)/page.tsx

@@ -3,6 +3,7 @@ import { type Metadata } from "@pylonsync/react";
 import { WRAP, Divider, ImagePlaceholder, LiveBadge } from "@/components/marketing";
 import { BookingWidget } from "./booking-widget";
 import { siteConfig } from "@/lib/site.config";
+import { directionsUrl, hoursRows } from "@/lib/hours";
 
 export const metadata: Metadata = {
   title: siteConfig.seo.title,
@@ -30,13 +31,13 @@ export default function LandingPage() {
   return (
     <div className="bg-cream text-ink">
       {/* ============================= HERO ============================= */}
-      <section className={`${WRAP} pt-10 pb-12 sm:pt-14`}>
-        <h1 className="font-display text-balance text-[4.25rem] leading-[0.9] tracking-[0.005em] sm:text-[7rem] lg:text-[9.5rem]">
+      <section className={`${WRAP} pt-10 pb-12 sm:pt-12`}>
+        <h1 className="font-display text-balance text-[4.25rem] leading-[0.9] tracking-[0.005em] sm:text-[7rem] lg:text-[8rem]">
           {hero.headline}
         </h1>
 
-        <div className="mt-8 grid gap-8 lg:mt-10 lg:grid-cols-[minmax(0,3fr)_minmax(0,2fr)] lg:gap-12">
-          <div className="flex flex-col justify-between gap-8">
+        <div className="mt-8 grid gap-8 lg:mt-8 lg:grid-cols-[minmax(0,3fr)_minmax(0,2fr)] lg:gap-12">
+          <div className="flex flex-col gap-8">
             <p className="max-w-xl text-[17px] leading-relaxed sm:text-[19px]">{hero.subcopy}</p>
             <div>
               <div className="flex flex-wrap items-center gap-4">
@@ -108,9 +109,9 @@ export default function LandingPage() {
       {booking.enabled ? (
         <section id="book" className="bg-ink text-cream">
           <div className={`${WRAP} py-14`}>
-            <div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] lg:gap-12">
-              <div>
-                <h2 className="font-display text-[3rem] leading-none sm:text-[4rem]">
+            <div className="grid grid-cols-[minmax(0,1fr)] gap-8 lg:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] lg:gap-12">
+              <div className="min-w-0">
+                <h2 className="font-display text-balance text-[3rem] leading-none sm:text-[4rem]">
                   {booking.headline}
                 </h2>
                 <p className="mt-5 max-w-sm text-[15px] leading-relaxed text-cream/75">
@@ -156,49 +157,44 @@ export default function LandingPage() {
       {/* =========================== LOCATION ========================== */}
       <Divider />
       <section id="visit" className={`${WRAP} py-12`}>
-        <div className="grid gap-8 lg:grid-cols-2 lg:gap-12">
-          <div>
+        <div className="grid grid-cols-[minmax(0,1fr)] gap-8 lg:grid-cols-2 lg:gap-12">
+          <div className="min-w-0">
             <h2 className="font-display text-[3rem] leading-none sm:text-[4rem]">{location.headline}</h2>
-            <dl className="mt-6 grid gap-5 text-[15px] leading-relaxed">
-              <div>
-                <dt className="text-[11px] font-medium uppercase tracking-wide text-ink/60">Address</dt>
-                <dd className="mt-1">{location.address}</dd>
-              </div>
-              <div>
-                <dt className="text-[11px] font-medium uppercase tracking-wide text-ink/60">Hours</dt>
-                <dd className="mt-1">{location.hoursText}</dd>
-              </div>
-              <div>
-                <dt className="text-[11px] font-medium uppercase tracking-wide text-ink/60">Contact</dt>
-                <dd className="mt-1">
-                  <a href={`tel:${location.phone}`} className="text-brand">
-                    {location.phone}
-                  </a>{" "}
-                  ·{" "}
-                  <a href={`mailto:${location.email}`} className="underline underline-offset-4">
-                    {location.email}
-                  </a>
-                </dd>
-              </div>
-            </dl>
-            <a
-              href="#book"
-              className="mt-8 inline-flex h-12 items-center bg-ink px-7 font-display text-[22px] tracking-[0.04em] text-cream transition-opacity hover:opacity-90"
-            >
-              {hero.ctaLabel}
-            </a>
+            <p className="mt-6 max-w-sm font-display text-[2rem] leading-[1.05] sm:text-[2.5rem]">
+              {location.address}
+            </p>
+            <div className="mt-6 flex flex-wrap items-center gap-3">
+              <a
+                href={directionsUrl(location.address)}
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex h-12 items-center bg-ink px-6 font-display text-[22px] tracking-[0.04em] text-cream transition-opacity hover:opacity-90"
+              >
+                Get directions
+              </a>
+              <a
+                href={`tel:${location.phone}`}
+                className="inline-flex h-12 items-center border border-ink px-6 font-display text-[22px] tracking-[0.04em] transition-colors hover:bg-ink hover:text-cream"
+              >
+                Call {location.phone}
+              </a>
+            </div>
+            <p className="mt-5 text-[14px] text-ink/70">
+              Or email{" "}
+              <a href={`mailto:${location.email}`} className="underline underline-offset-4 hover:text-ink">
+                {location.email}
+              </a>
+            </p>
           </div>
           {location.mapEmbedUrl ? (
             <iframe
-              title="Map"
+              title={`Map to ${siteConfig.brand.name}`}
               src={location.mapEmbedUrl}
-              className="h-72 w-full border border-ink"
+              className="h-80 w-full border border-ink"
               loading="lazy"
             />
           ) : (
-            <div className="grid h-72 place-items-center border border-ink bg-paper text-sm text-ink/60">
-              Drop a Google Maps embed URL in <code className="mx-1">location.mapEmbedUrl</code>
-            </div>
+            <HoursBoard />
           )}
         </div>
       </section>
@@ -229,6 +225,34 @@ export default function LandingPage() {
   );
 }
 
+// The weekly hours as a printed board, read from the same config the booking
+// grid uses. Shown in place of a map when `location.mapEmbedUrl` is empty.
+function HoursBoard() {
+  const rows = hoursRows(siteConfig.booking.hours);
+  return (
+    <div className="border border-ink bg-paper">
+      <div className="flex items-baseline justify-between border-b border-ink px-5 py-4">
+        <h3 className="font-display text-[2rem] leading-none">Hours</h3>
+        <span className="text-[13px] text-ink/60">{siteConfig.hero.quickFacts.area}</span>
+      </div>
+      <dl className="divide-y divide-ink/20 px-5">
+        {rows.map((r) => (
+          <div key={r.days} className="flex items-baseline justify-between gap-4 py-3">
+            <dt className="font-display text-[1.5rem] leading-none">{r.days}</dt>
+            <dd
+              className={
+                "text-[15px] tabular-nums " + (r.closed ? "text-ink/50" : "font-medium text-ink")
+              }
+            >
+              {r.time}
+            </dd>
+          </div>
+        ))}
+      </dl>
+    </div>
+  );
+}
+
 function QuickFact({ label, value }: { label: string; value: string }) {
   return (
     <div>

package/templates/local-service/app/auth-form.tsx

@@ -51,7 +51,7 @@ export function AuthForm() {
     <div className="space-y-5">
       <form onSubmit={onSubmit} className="space-y-4">
         <label className="block">
-          <span className="mb-1.5 block text-[13px] font-medium text-zinc-700">Email</span>
+          <span className="mb-1.5 block text-[11px] font-medium uppercase tracking-wide text-ink/60">Email</span>
           <input
             type="email"
             value={email}
@@ -59,11 +59,11 @@ export function AuthForm() {
             required
             autoComplete="email"
             placeholder="you@yourbusiness.com"
-            className="h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 text-sm text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-brand focus:ring-2 focus:ring-brand/20"
+            className="h-11 w-full border border-ink/40 bg-white px-3 text-[15px] text-ink outline-none transition placeholder:text-ink/40 focus:border-brand focus:ring-2 focus:ring-brand/20"
           />
         </label>
         <label className="block">
-          <span className="mb-1.5 block text-[13px] font-medium text-zinc-700">Password</span>
+          <span className="mb-1.5 block text-[11px] font-medium uppercase tracking-wide text-ink/60">Password</span>
           <input
             type="password"
             value={password}
@@ -71,24 +71,24 @@ export function AuthForm() {
             required
             autoComplete={mode === "login" ? "current-password" : "new-password"}
             placeholder={mode === "login" ? "Your password" : "At least 10 characters"}
-            className="h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 text-sm text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-brand focus:ring-2 focus:ring-brand/20"
+            className="h-11 w-full border border-ink/40 bg-white px-3 text-[15px] text-ink outline-none transition placeholder:text-ink/40 focus:border-brand focus:ring-2 focus:ring-brand/20"
           />
         </label>
         {error ? (
-          <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-[13px] leading-snug text-red-700">
+          <p className="border border-brand bg-brand-soft px-3 py-2 text-[13px] leading-snug text-brand">
             {error}
           </p>
         ) : null}
         <button
           type="submit"
           disabled={pending}
-          className="inline-flex h-10 w-full items-center justify-center rounded-lg bg-zinc-900 text-sm font-medium text-white transition-colors hover:bg-zinc-700 disabled:opacity-60"
+          className="inline-flex h-12 w-full items-center justify-center bg-brand font-display text-[22px] tracking-[0.04em] text-cream transition-opacity hover:opacity-90 disabled:opacity-60"
         >
           {pending ? "…" : mode === "login" ? "Sign in" : "Create account"}
         </button>
       </form>
 
-      <p className="text-center text-[13px] text-zinc-500">
+      <p className="text-center text-[13px] text-ink/60">
         {mode === "login" ? "First time here?" : "Already have an account?"}{" "}
         <button
           type="button"
@@ -96,7 +96,7 @@ export function AuthForm() {
             setMode(mode === "login" ? "signup" : "login");
             setError(null);
           }}
-          className="font-medium text-zinc-900 underline underline-offset-2"
+          className="font-medium text-ink underline underline-offset-4"
         >
           {mode === "login" ? "Create the owner account" : "Sign in"}
         </button>