b29962bf9c
Some checks failed
CI / Lint, Unit & Integration Tests (push) Has been cancelled
Multi-pin pickup selection (study §3.4) — previously a standalone unused endpoint + TODO comments: - app/services/pickup-locations.server.ts: pure filterPickupLocationIds + I/O resolvePickupLocations (active + has a PICKUP slot template + ProductRule allowedLocationIds + inventory exclusion). - resolveAvailabilityRequest returns pickupLocations[] on method=PICKUP and defaults the active location to the first eligible pickup point. - apps.scheduling.locations.tsx refactored onto the shared resolver (was a second copy of the logic). - Storefront widget: pickup-location chooser (name + address, optional multi-pin Google map) when >1 eligible point and none block-configured; picking one re-requests availability for that location. New styles + widget.choose_pickup_location locale (en + fr). - Checkout extension Checkout.jsx: same chooser before the date list. - tests/unit/pickup-locations.test.ts (5 cases); suite 161 green. checkout-datetime follow-up fixes from the 808a3b7 review: - typescript devDep ^7.0.2 -> ^5.6.3 (there is no typescript@7 on npm). - Deleted dead shopify.d.ts (Preact-global shim, unused after the React rewrite) and dropped it from tsconfig include. Also stages the CLI-written `uid` lines in the checkout-datetime and payment-customization extension tomls. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
156 lines
2.8 KiB
CSS
156 lines
2.8 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 */
|
|
}
|
|
|
|
/* Cart-page auto-injection (datetime-widget.ts's maybeAutoPlaceOnCart) lands
|
|
the widget as a sibling immediately before the theme's own Checkout
|
|
button, which can be inside a narrow flex/inline-sized wrapper — force
|
|
full width and give it breathing room so it doesn't get visually
|
|
squeezed regardless of that wrapper's own layout rules. */
|
|
.dd-widget--cart-injected {
|
|
width: 100%;
|
|
margin-block: 1rem;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.dd-widget__preview {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.dd-widget__preview-item {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.dd-widget__pickup-locations {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.dd-widget__pickup-location {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 0.1rem;
|
|
text-align: left;
|
|
padding: 0.5rem 0.75rem;
|
|
border: 1px solid currentColor;
|
|
border-radius: 8px;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
.dd-widget__pickup-location[aria-pressed="true"] {
|
|
outline: 2px solid currentColor;
|
|
}
|
|
|
|
.dd-widget__pickup-location-name {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.dd-widget__pickup-location-address {
|
|
font-size: 0.8rem;
|
|
opacity: 0.75;
|
|
}
|