5b2207a397
Some checks failed
CI / Lint, Unit & Integration Tests (push) Has been cancelled
Also fixes the [events] gate that was blocking ALL extension generation
(discovered while starting this phase).
- shopify.app.toml: this org appears enrolled in Shopify's "Next
Generation Events" developer preview, which the CLI now treats as a
REQUIRED top-level [events] section even though nothing in this app
actually uses it (real webhook handling is entirely classic [webhooks],
unaffected). Iteratively discovered the required shape from the CLI's
own field-by-field validation errors, then found the real docs (Events
is optional/developer-preview, api_version pinned to "unstable") to
confirm rather than keep guessing. Added a functionally-inert
[[events.subscription]] placeholder + a stub handler
(webhooks.events.placeholder.tsx) solely to satisfy the gate.
- app/services/availability-request.server.ts +
app/services/hold-request.server.ts: extracted the resolution logic that
used to live directly in apps.scheduling.availability.tsx/hold.tsx into
shared functions. This is what actually makes "same capacity pool feeds
every surface" (CLAUDE.md) true by construction rather than by
convention — the storefront, POS, and checkout routes now call the exact
same code, not three copies that could quietly drift apart.
- extensions/pos-datetime (generated via `shopify app generate extension
--template=pos_smart_grid` — pos_action's flavor requirement contradicted
the CLI's own global --flavor validator, so smart_grid was used instead):
a home-screen tile opening a modal where staff pick method -> date -> time
against the same availability/hold endpoints (pos.scheduling.*.tsx,
session-token authenticated), writing the same dd_* cart properties via
CartApi.addCartProperties — booking.server.ts needed zero changes to
handle POS-originated orders. Several API-shape guesses (toast isError
option, ChoiceList's `value`/`label` props, a nonexistent
action.dismissModal(), shopify.cart.cart.current) were wrong and caught
by typechecking directly against @shopify/ui-extensions' own bundled
.d.ts files (`npm run typecheck:pos`, now also in CI) — none of this was
verified against a live POS session, which isn't possible in this
environment.
- extensions/checkout-datetime (generated via `--template=checkout_ui`):
the Plus-only native picker in checkout itself
(purchase.checkout.block.render) plus a Thank You confirmation block
(purchase.thank-you.block.render). Went looking for an order-status
target too ("all plans show confirmed slot on thank-you/order-status" is
the Phase 7 accept criterion) and confirmed via the installed package's
own type definitions that purchase.order-status.block.render does not
exist in this API version — checkout UI extensions' thank-you/order-status
surfaces are Plus-only regardless. The actual "all plans" mechanism is
extensions/datetime-widget/blocks/order-confirmation.liquid — a new Theme
App Extension block reading order.note_attributes, which works on every
plan since it's plain Liquid, not checkout extensibility.
Both new UI extensions share one real unverified assumption, called out in
code comments: process.env.APP_URL is expected to be substituted at build
time by the Shopify CLI to the app's backend origin, since these run in a
different origin than the app and need an absolute URL, unlike the
storefront widget's relative /apps/scheduling/* path. Needs confirming
against a live dev session.
Verified: lint, typecheck (root + both new extensions'
`npm run typecheck:pos`/`typecheck:checkout`, all now in CI), 102 unit +
18 integration tests (unchanged — this phase didn't touch pure business
logic, only added thin auth wrappers around already-tested services), both
admin/widget builds.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
99 lines
1.6 KiB
CSS
99 lines
1.6 KiB
CSS
.dd-widget {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
font-family: inherit;
|
|
min-height: 3.5rem; /* reserves space before JS renders content, to avoid layout shift */
|
|
}
|
|
|
|
.dd-widget__heading {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|
|
|
|
.dd-widget__row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.dd-widget__pill {
|
|
border: 1px solid currentColor;
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
padding: 0.4rem 0.9rem;
|
|
font-size: 0.875rem;
|
|
cursor: pointer;
|
|
color: inherit;
|
|
}
|
|
|
|
.dd-widget__pill[aria-pressed="true"] {
|
|
background: currentColor;
|
|
color: Canvas;
|
|
}
|
|
|
|
.dd-widget__status {
|
|
font-size: 0.875rem;
|
|
opacity: 0.75;
|
|
margin: 0;
|
|
}
|
|
|
|
.dd-widget__confirmation {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.dd-widget__link {
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
color: inherit;
|
|
font: inherit;
|
|
}
|
|
|
|
.dd-widget__input {
|
|
border: 1px solid currentColor;
|
|
border-radius: 4px;
|
|
background: transparent;
|
|
padding: 0.4rem 0.75rem;
|
|
font-size: 0.875rem;
|
|
color: inherit;
|
|
font-family: inherit;
|
|
min-width: 10rem;
|
|
}
|
|
|
|
.dd-widget__map {
|
|
width: 100%;
|
|
height: 220px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dd-order-confirmation {
|
|
border: 1px solid currentColor;
|
|
border-radius: 8px;
|
|
padding: 0.75rem 1rem;
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
gap: 0.15rem;
|
|
}
|
|
|
|
.dd-order-confirmation__label {
|
|
font-size: 0.75rem;
|
|
opacity: 0.75;
|
|
margin: 0;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
.dd-order-confirmation__value {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
}
|