@wix/agent-skills 1.13.0 → 1.15.0

package/skills/wix-headless/references/astro/templates/bookings/components-bookings.css

@@ -1,424 +0,0 @@
-/* src/styles/components-bookings.css
- *
- * Bookings-pack component CSS. Pre-copied by the orchestrator before the build
- * wave (it is brand-agnostic var(--token) CSS). The designer's global.css does
- * NOT publish these classes — they live here. See references/shared/STYLING.md
- * § "Component-specific CSS is owned by the component, not the designer".
- *
- * Class groups:
- * - .service-card / .service-grid / .service-card-*  → ServiceCard.astro, services/index.astro
- * - .booking-filter-bar / .booking-filter-chip*      → services/index.astro (location + category filters)
- * - .availability-* / .time-slot*                    → AvailabilityCalendar.tsx (week calendar, slots, staff picker)
- * - .booking-*                                        → BookingForm.tsx (schema-driven form)
- *
- * Primary actions (a selected slot, the confirm button) use var(--color-accent)
- * so the flow matches the site's primary-action styling.
- *
- * Direct var(--token) only (no @apply). Fallback chains for sometimes-published
- * tokens, e.g. var(--color-paper-warm, var(--color-paper, var(--color-cream))).
- */
-
-/* ── Service grid + card ────────────────────────────────────────────────────── */
-.service-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 2rem;
-  transition: opacity 200ms ease;
-}
-body[data-navigating="true"] .service-grid {
-  opacity: 0.55;
-  pointer-events: none;
-}
-
-.service-card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  background: var(--color-paper, var(--color-cream));
-  border-radius: var(--radius-xl);
-  overflow: hidden;
-  text-decoration: none;
-  color: inherit;
-  transition: transform 280ms ease, box-shadow 280ms ease;
-  box-shadow: var(--shadow-card, 0 4px 16px -8px rgba(0, 0, 0, 0.15));
-}
-.service-card:hover {
-  transform: translateY(-4px);
-}
-.service-card:hover .service-card-image img {
-  transform: scale(1.04);
-}
-
-.service-card-image {
-  aspect-ratio: 3 / 2;
-  overflow: hidden;
-  background: var(--color-paper-warm, var(--color-surface-secondary, var(--color-cream)));
-}
-.service-card-image img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition: transform 600ms ease;
-}
-
-.service-card-meta {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 1rem 1rem 1.5rem;
-  flex: 1;
-}
-.service-card-name {
-  margin: 0;
-  font-family: var(--font-display);
-  font-size: 1.125rem;
-  line-height: 1.25;
-  color: var(--color-ink);
-}
-.service-card-tagline {
-  margin: 0;
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  color: var(--color-ink-soft, var(--color-mute));
-  line-height: 1.45;
-}
-.service-card-price {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin-top: auto;
-  padding-top: 0.75rem;
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  color: var(--color-mute);
-}
-.service-card-price span + span::before {
-  content: "·";
-  padding-right: 0.75rem;
-  color: var(--color-rule);
-}
-
-/* ── Catalog filters (location + category) ──────────────────────────────────── */
-.booking-filter-bar {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-  margin-bottom: 2rem;
-}
-.booking-filter-chip {
-  padding: 0.5rem 1rem;
-  border: 1px solid var(--color-rule);
-  border-radius: var(--radius-pill, 999px);
-  background: var(--color-paper, var(--color-cream));
-  color: var(--color-ink);
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  text-decoration: none;
-  cursor: pointer;
-  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
-}
-.booking-filter-chip:hover {
-  border-color: var(--color-ink);
-}
-.booking-filter-chip--active {
-  background: var(--color-accent);
-  border-color: var(--color-accent);
-  color: var(--color-paper);
-}
-
-/* ── Availability — week calendar ───────────────────────────────────────────── */
-.availability-calendar {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-/* Filter row — holds the optional location + staff pickers side by side. */
-.availability-filters {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1rem;
-}
-.availability-filters > * {
-  flex: 1 1 12rem;
-}
-
-/* Location / staff picker (shown only when there's >1 option). */
-.availability-staff {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-.availability-staff-label {
-  font-family: var(--font-display);
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--color-ink-soft, var(--color-mute));
-}
-.availability-staff-select {
-  width: 100%;
-  padding: 0.75rem 1rem;
-  font-family: var(--font-body);
-  font-size: 0.9375rem;
-  border: 1px solid var(--color-rule);
-  border-radius: var(--radius-sm);
-  background: var(--color-paper, var(--color-cream));
-  color: var(--color-ink);
-  box-sizing: border-box;
-}
-.availability-staff-select:focus {
-  outline: none;
-  border-color: var(--color-accent);
-}
-
-.availability-week-nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 0.75rem 0;
-  border-bottom: 1px solid var(--color-rule);
-}
-.availability-week-label {
-  font-family: var(--font-display);
-  font-size: 1rem;
-  color: var(--color-ink);
-  flex: 1;
-  text-align: center;
-}
-
-.availability-nav-btn {
-  padding: 0.75rem 1rem;
-  background: transparent;
-  border: 1px solid var(--color-rule);
-  border-radius: var(--radius-sm);
-  color: var(--color-ink);
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  cursor: pointer;
-  transition: background-color 150ms ease, border-color 150ms ease;
-}
-.availability-nav-btn:hover:not(:disabled) {
-  background: var(--color-paper-warm, var(--color-cream));
-  border-color: var(--color-ink);
-}
-.availability-nav-btn:disabled {
-  opacity: 0.35;
-  cursor: not-allowed;
-}
-
-/* The 7-day strip. */
-.availability-day-strip {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 0.75rem;
-}
-.availability-day {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2px;
-  padding: 0.75rem 0;
-  border: 1px solid var(--color-rule);
-  border-radius: var(--radius-sm);
-  background: var(--color-paper, var(--color-cream));
-  color: var(--color-ink);
-  font-family: var(--font-body);
-  cursor: pointer;
-  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
-}
-.availability-day-name {
-  font-size: 0.7rem;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--color-mute);
-}
-.availability-day-num {
-  font-size: 1rem;
-  font-weight: 600;
-}
-.availability-day--has-slots:hover {
-  border-color: var(--color-accent);
-}
-.availability-day--empty {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-.availability-day--selected {
-  background: var(--color-accent);
-  border-color: var(--color-accent);
-  color: var(--color-paper);
-}
-.availability-day--selected .availability-day-name {
-  color: var(--color-paper);
-}
-
-.availability-slots {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
-  gap: 0.75rem;
-}
-.availability-loading,
-.availability-empty,
-.availability-error {
-  font-family: var(--font-body);
-  font-size: 0.9375rem;
-  color: var(--color-ink-soft, var(--color-mute));
-  padding: 1.5rem 0;
-  text-align: center;
-}
-.availability-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-}
-.availability-error {
-  color: var(--color-error, var(--color-accent));
-}
-
-/* ── Time-slot buttons ──────────────────────────────────────────────────────── */
-.time-slot {
-  padding: 0.75rem 1rem;
-  border: 1px solid var(--color-rule);
-  border-radius: var(--radius-sm);
-  background: var(--color-paper, var(--color-cream));
-  color: var(--color-ink);
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  text-align: center;
-  cursor: pointer;
-  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
-}
-.time-slot-time {
-  font-weight: 500;
-}
-.time-slot--available {
-  border-color: var(--color-ink);
-}
-.time-slot--available:hover {
-  background: var(--color-accent);
-  border-color: var(--color-accent);
-  color: var(--color-paper);
-}
-.time-slot--selected {
-  background: var(--color-accent);
-  border-color: var(--color-accent);
-  color: var(--color-paper);
-  font-weight: 600;
-}
-
-/* ── Booking form (schema-driven) ───────────────────────────────────────────── */
-.booking-form {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  padding: 2rem;
-  border: 1px solid var(--color-rule);
-  border-radius: var(--radius-md);
-  background: var(--color-paper-warm, var(--color-paper, var(--color-cream)));
-}
-
-.booking-form-summary {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid var(--color-rule);
-}
-.booking-form-summary strong {
-  font-family: var(--font-display);
-  font-size: 1.125rem;
-  color: var(--color-ink);
-}
-.booking-form-summary span {
-  font-family: var(--font-body);
-  font-size: 0.9375rem;
-  color: var(--color-ink-soft, var(--color-mute));
-}
-.booking-form-change {
-  align-self: flex-start;
-  margin-top: 0.5rem;
-  background: none;
-  border: none;
-  padding: 0;
-  font-family: var(--font-body);
-  font-size: 0.8125rem;
-  color: var(--color-mute);
-  text-decoration: underline;
-  cursor: pointer;
-}
-.booking-form-change:hover {
-  color: var(--color-ink);
-}
-
-.booking-field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-.booking-label {
-  font-family: var(--font-display);
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--color-ink-soft, var(--color-mute));
-}
-.booking-required {
-  color: var(--color-accent);
-}
-
-.booking-input {
-  width: 100%;
-  padding: 0.75rem 1rem;
-  font-family: var(--font-body);
-  font-size: 0.9375rem;
-  border: 1px solid var(--color-rule);
-  border-radius: var(--radius-sm);
-  background: var(--color-paper, var(--color-cream));
-  color: var(--color-ink);
-  transition: border-color 150ms ease;
-  box-sizing: border-box;
-}
-.booking-input:focus {
-  outline: none;
-  border-color: var(--color-accent);
-}
-textarea.booking-input {
-  resize: vertical;
-  min-height: 6rem;
-}
-
-.booking-error {
-  font-family: var(--font-body);
-  font-size: 0.875rem;
-  color: var(--color-error, var(--color-accent));
-  padding: 0.75rem 1rem;
-  border: 1px solid var(--color-error, var(--color-accent));
-  border-radius: var(--radius-sm);
-}
-
-.booking-cta {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  padding: 1rem 2rem;
-  font-family: var(--font-display);
-  font-size: 0.9375rem;
-  font-weight: 500;
-  background: var(--color-accent);
-  color: var(--color-paper);
-  border: 1px solid var(--color-accent);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  transition: opacity 150ms ease;
-}
-.booking-cta:hover:not(:disabled) {
-  opacity: 0.9;
-}
-.booking-cta:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}

package/skills/wix-headless/references/astro/templates/bookings/services/[slug].astro

@@ -1,176 +0,0 @@
----
-// src/pages/services/[slug].astro — SSR service detail + client-side booking flow.
-// Two dirs deep inside src/ → import with ../../ (not three ../).
-import Layout from "../../layouts/Layout.astro";
-import SeoTags from "../../components/SeoTags.astro";
-import ServiceBookingFlow from "../../components/ServiceBookingFlow";
-import { services } from "@wix/bookings";
-import { forms } from "@wix/forms";
-import { auth } from "@wix/essentials";
-
-const BOOKING_APP_ID = "13d21c63-b5ec-5912-8397-c3a5ddb27a97";
-const { slug } = Astro.params;
-
-// Carried from the catalog's location selector (when the site has >1 location):
-// the default location the availability picker scopes to. Absent on single-location
-// sites (and on deep links — the picker then defaults to the service's first location).
-const reqUrl = new URL(Astro.request.url);
-const locationId = reqUrl.searchParams.get("locationId") ?? undefined;
-
-let service: any = null;
-try {
-  // Ambient SSR via @wix/essentials. Single service by slug: the .eq() builder
-  // chain on mainSlug.name + appId (the form the @wix/bookings SDK expects).
-  const result = await auth
-    .elevate(services.queryServices)({ conditionalFields: ["STAFF_MEMBER_DETAILS"] })
-    .eq("mainSlug.name", slug)
-    .eq("appId", BOOKING_APP_ID)
-    .limit(1)
-    .find();
-  service = result.items?.[0] ?? null;
-} catch (err) {
-  console.error(`[services/${slug}] detail query failed:`, err);
-}
-
-if (!service) return Astro.redirect("/services", 302);
-
-// Booking-form SCHEMA — the form belongs to the service (service.form._id) in the
-// bookings namespace. Read it server-side and pass the field list to the island.
-// Same renderer the forms vertical uses (references/astro/forms/CONTACT_FORM.md):
-// keep the field's `target` — that is the key createBooking expects in formSubmission.
-let formFields: any[] = [];
-try {
-  const formId = service.form?._id;
-  if (formId) {
-    const res: any = await auth.elevate(forms.getForm)(formId);
-    const form = res?.form ?? res;
-    // Only render field types we can submit as a simple value. Skip complex,
-    // object-valued fields (e.g. a multi-line ADDRESS) — they carry no string
-    // `componentType`, and sending a string for them fails createBooking with
-    // "must be object". The booking enforces only the contact basics
-    // (first_name/last_name/email), so skipping optional complex fields is safe.
-    const RENDERABLE = ["TEXT_INPUT", "PHONE_INPUT", "DROPDOWN"];
-    formFields = (form?.formFields ?? [])
-      .filter(
-        (f: any) =>
-          f.fieldType === "INPUT" &&
-          !f.hidden &&
-          RENDERABLE.includes(f.inputOptions?.stringOptions?.componentType),
-      )
-      .map((f: any) => {
-        const opts = f.inputOptions;
-        const str = opts?.stringOptions;
-        const label =
-          str?.textInputOptions?.label ??
-          str?.dropdownOptions?.label ??
-          str?.phoneInputOptions?.label ??
-          "";
-        return {
-          label,
-          target: opts?.target ?? "",
-          required: opts?.required ?? false,
-          componentType: str?.componentType ?? "TEXT_INPUT",
-          identifier: f.identifier ?? "",
-          options: str?.dropdownOptions?.options?.map((o: any) => ({
-            value: o.value ?? o.label ?? "",
-            label: o.label ?? o.value ?? "",
-          })),
-        };
-      });
-  }
-} catch (err) {
-  console.error(`[services/${slug}] booking form schema failed:`, err);
-}
-
-const formatPrice = (p: any): string | undefined => {
-  if (!p || p.rateType === "NO_FEE") return undefined;
-  if (p.rateType === "FIXED" && p.fixed?.price) {
-    const { value, currency } = p.fixed.price;
-    if (!value) return undefined;
-    return new Intl.NumberFormat("en-US", { style: "currency", currency: currency ?? "USD" }).format(Number(value));
-  }
-  return undefined;
-};
-const price = formatPrice(service.payment);
-const duration = service.schedule?.availabilityConstraints?.sessionDurations?.[0] ?? 60;
-const imageUrl = service.media?.mainMedia?.image?.url ?? service.media?.items?.[0]?.image?.url;
-const serviceName = service.name ?? "Service";
-const seoTags = service.seoData?.tags ?? [];
-
-// Staff for the optional staff picker — carried on the service via the
-// STAFF_MEMBER_DETAILS conditional field (already requested in the query above).
-// Each entry is { staffMemberId, name } — `staffMemberId` is, despite the name,
-// the resource id (the calendar filters availability + books by it). The calendar
-// shows the picker only when there is more than one; empty/absent → "any staff
-// member" (the ANY_RESOURCE fallback).
-const staffMembers = service.staffMemberDetails?.staffMembers ?? [];
-
-// Business locations the service is offered at — sourced from `queryLocations()`
-// (the site's real business locations, whose ids the availability engine
-// recognizes), intersected with the service's own location ids. Availability is
-// scoped to one of these so a multi-location service doesn't return duplicate
-// per-location time slots (listAvailabilityTimeSlots returns one slot per location
-// otherwise). Source from `queryLocations()`, NOT from `service.locations` alone:
-// a service's location entry can carry an id the availability engine doesn't
-// recognize, and scoping to it returns zero slots. When the site has no business
-// locations this resolves to [] and the calendar fetches unscoped.
-let serviceLocations: { _id: string; name?: string }[] = [];
-try {
-  const locResult: any = await auth.elevate(services.queryLocations)();
-  const businessLocations = locResult?.businessLocations?.locations ?? [];
-  const serviceLocationIds = new Set(
-    (service.locations ?? [])
-      .filter((l: any) => (l.type ?? "BUSINESS") === "BUSINESS")
-      .map((l: any) => l.business?._id ?? l._id)
-      .filter(Boolean),
-  );
-  serviceLocations = businessLocations
-    .filter((l: any) => serviceLocationIds.has(l._id))
-    .map((l: any) => ({ _id: l._id, name: l.business?.name ?? "Location" }));
-} catch (err) {
-  console.error(`[services/${slug}] queryLocations failed:`, err);
-}
----
-
-<!--
-  Width: use `container-reading` (max-width: var(--container-prose) + auto margins)
-  for a deliberate prose measure. Bare `max-w-<size>` keys resolve to Tailwind's
-  --container-* scale, which is wider than ideal for reading text.
--->
-<Layout title={serviceName} description={service.tagLine ?? service.description}>
-  <SeoTags tags={seoTags} slot="head" />
-  <section class="container-reading px-6 py-24">
-    <a href="/services" class="inline-block text-sm text-mute hover:text-ink mb-8">← All services</a>
-
-    <!-- Optional banner image — only when the service has media (image-less is the
-         common seed case; rendering a fixed placeholder collapses the layout). -->
-    {imageUrl && (
-      <img src={imageUrl} alt={serviceName} class="w-full h-64 object-cover rounded-lg mb-8" />
-    )}
-
-    <div class="flex flex-col gap-4 mb-16">
-      <hr class="editorial-rule w-16 ml-0" />
-      <h1 class="font-display text-4xl md:text-5xl leading-tight">{serviceName}</h1>
-      {service.tagLine && <p class="text-lg text-mute leading-relaxed max-w-prose">{service.tagLine}</p>}
-      <div class="flex items-center gap-4 text-sm text-mute">
-        <span>{duration} min</span>
-        {price && <span class="text-ink font-medium">{price}</span>}
-      </div>
-      {service.description && <p class="text-ink leading-relaxed max-w-prose">{service.description}</p>}
-    </div>
-
-    <section class="border-t border-rule pt-12">
-      <h2 class="font-display text-3xl leading-tight mb-8">Book this service</h2>
-      <ServiceBookingFlow
-        service={service}
-        serviceName={serviceName}
-        serviceType={service.type ?? "APPOINTMENT"}
-        fields={formFields}
-        staffMembers={staffMembers}
-        locations={serviceLocations}
-        locationId={locationId}
-        client:only="react"
-      />
-    </section>
-  </section>
-</Layout>