Design Language tweaks
This commit is contained in:
@@ -21,10 +21,10 @@
|
||||
messagePlaceholder: string;
|
||||
}
|
||||
> = {
|
||||
'Pack Walks': {
|
||||
'Tiny Gang Pack Walks': {
|
||||
intro:
|
||||
'Tell us about your dog, your area, and how they feel around other dogs so we can see if Pack Walks are the right fit.',
|
||||
messageLabel: 'Pack Walks fit',
|
||||
'Tell us about your dog, your area, and how they feel around other dogs so we can see if Tiny Gang Pack Walks are the right fit.',
|
||||
messageLabel: 'Tiny Gang Pack Walks fit',
|
||||
messagePlaceholder:
|
||||
'How old is your dog, how do they feel in groups, and is there anything about confidence, recall, or social behaviour we should know?'
|
||||
},
|
||||
@@ -75,6 +75,7 @@
|
||||
let submitted = false;
|
||||
let showErrorModal = false;
|
||||
let submitErrorDetail = '';
|
||||
let showServicePicker = false;
|
||||
|
||||
function validateEmail(raw: string): string {
|
||||
const value = raw.trim();
|
||||
@@ -134,6 +135,7 @@
|
||||
? 'Tell us if this is feedback, a complaint, a business enquiry, or anything else we should know.'
|
||||
: activeServicePrompt?.messagePlaceholder || 'Describe your pet, any special needs, or anything we should know.';
|
||||
$: successPetName = petName.trim() || 'your dog';
|
||||
$: serviceChoiceLocked = !isGeneralEnquiry && selectedServices.length === 1 && !showServicePicker;
|
||||
|
||||
onMount(() => {
|
||||
const now = Date.now();
|
||||
@@ -241,6 +243,7 @@
|
||||
}
|
||||
|
||||
selectedServices = [requestedService];
|
||||
showServicePicker = false;
|
||||
|
||||
try {
|
||||
window.sessionStorage.removeItem(requestedServiceStorageKey);
|
||||
@@ -283,6 +286,7 @@
|
||||
petName = '';
|
||||
location = '';
|
||||
selectedServices = [];
|
||||
showServicePicker = false;
|
||||
}
|
||||
errors = {};
|
||||
}
|
||||
@@ -438,7 +442,7 @@
|
||||
{/if}
|
||||
|
||||
<div class="booking-header">
|
||||
<span class="booking-eyebrow">{bookingEyebrow}</span>
|
||||
<span class="eyebrow booking-eyebrow">{bookingEyebrow}</span>
|
||||
<h2 class="booking-title">
|
||||
<span class="booking-title-plain">{headingParts.plain}</span>{' '}
|
||||
<span class="booking-title-highlight">{headingParts.highlight}</span>
|
||||
@@ -510,38 +514,12 @@
|
||||
class:booking-card-grid-with-banner={Boolean(detailsStepIntro)}
|
||||
class="booking-card-grid booking-card-grid-dog"
|
||||
>
|
||||
{#if allowGeneralEnquiry}
|
||||
<div class="booking-field-card booking-field-card-full">
|
||||
<label>
|
||||
<Icon name="fas fa-comments" /> Enquiry type
|
||||
</label>
|
||||
<div class="booking-toggle-group" role="radiogroup" aria-label="Enquiry type">
|
||||
<label class="booking-toggle-option">
|
||||
<input
|
||||
type="radio"
|
||||
name="enquiryType"
|
||||
value="booking"
|
||||
checked={enquiryType === 'booking'}
|
||||
on:change={() => setEnquiryType('booking')}
|
||||
/>
|
||||
<span class="booking-toggle-indicator" aria-hidden="true"></span>
|
||||
<span>Book a Meet & Greet</span>
|
||||
</label>
|
||||
<label class="booking-toggle-option">
|
||||
<input
|
||||
type="radio"
|
||||
name="enquiryType"
|
||||
value="general"
|
||||
checked={enquiryType === 'general'}
|
||||
on:change={() => setEnquiryType('general')}
|
||||
/>
|
||||
<span class="booking-toggle-indicator" aria-hidden="true"></span>
|
||||
<span>General enquiry</span>
|
||||
</label>
|
||||
</div>
|
||||
<p class="booking-help-text">
|
||||
General enquiries cover feedback, complaints, business enquiries, and other non-booking messages.
|
||||
</p>
|
||||
{#if allowGeneralEnquiry && !isGeneralEnquiry}
|
||||
<div class="booking-inline-switch booking-field-card-full">
|
||||
<span>Need help with something else?</span>
|
||||
<button type="button" class="booking-inline-link" on:click={() => setEnquiryType('general')}>
|
||||
Send a general enquiry
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -594,6 +572,40 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if hasServices}
|
||||
<div class="booking-field-stack booking-field-stack-full">
|
||||
<div class="booking-selected-service-row">
|
||||
<span class="booking-service-label"><Icon name="fas fa-paw" /> Service</span>
|
||||
{#if serviceChoiceLocked}
|
||||
<button type="button" class="booking-inline-link" on:click={() => (showServicePicker = true)}>
|
||||
Change
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if serviceChoiceLocked}
|
||||
<div class="booking-selected-service-chip">{selectedServices[0]}</div>
|
||||
{:else}
|
||||
<div class="booking-service-options">
|
||||
{#each booking.serviceOptions as service}
|
||||
<label class="booking-check-option">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="services"
|
||||
value={service}
|
||||
checked={selectedServices.includes(service)}
|
||||
on:change={(event) =>
|
||||
toggleService(service, (event.currentTarget as HTMLInputElement).checked)}
|
||||
/>
|
||||
<span class="booking-check-box" aria-hidden="true"></span>
|
||||
<span>{service}</span>
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div
|
||||
class="booking-field-stack booking-field-stack-full"
|
||||
class:booking-field-stack-invalid={errors.message}
|
||||
@@ -617,33 +629,17 @@
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if hasServices}
|
||||
<div class="booking-field-stack booking-field-stack-full">
|
||||
<span class="booking-service-label"><Icon name="fas fa-paw" /> Services</span>
|
||||
<div class="booking-service-options">
|
||||
{#each booking.serviceOptions as service}
|
||||
<label class="booking-check-option">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="services"
|
||||
value={service}
|
||||
checked={selectedServices.includes(service)}
|
||||
on:change={(event) =>
|
||||
toggleService(service, (event.currentTarget as HTMLInputElement).checked)}
|
||||
/>
|
||||
<span class="booking-check-box" aria-hidden="true"></span>
|
||||
<span>{service}</span>
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if isGeneralEnquiry}
|
||||
<div class="booking-inline-switch booking-field-card-full">
|
||||
<span>Want to book a Meet & Greet instead?</span>
|
||||
<button type="button" class="booking-inline-link" on:click={() => setEnquiryType('booking')}>
|
||||
Switch back to booking
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="booking-field-card booking-field-card-full"
|
||||
class:booking-field-card-invalid={errors.message}
|
||||
@@ -673,7 +669,7 @@
|
||||
</div>
|
||||
|
||||
<div class="booking-actions booking-actions-next">
|
||||
<button type="button" class="btn btn-yellow booking-next-button" on:click={goToOwnerStep}>
|
||||
<button type="button" class="btn btn-yellow btn-with-arrow booking-next-button" on:click={goToOwnerStep}>
|
||||
Next: {ownerStepLabel.toLowerCase()}
|
||||
<Icon name="fas fa-arrow-right" />
|
||||
</button>
|
||||
@@ -784,7 +780,7 @@
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button type="submit" class="btn btn-yellow booking-submit-button" disabled={submitting}>
|
||||
<button type="submit" class="btn btn-yellow btn-with-arrow booking-submit-button" disabled={submitting}>
|
||||
{#if submitting}
|
||||
Sending…
|
||||
{:else if isGeneralEnquiry}
|
||||
|
||||
Reference in New Issue
Block a user