4.2.1 final fixes

2026-05-06 11:36:19 +12:00
parent b8b9d12a82
commit a7ce4c74b5
22 changed files with 613 additions and 203 deletions
@@ -74,13 +74,13 @@
    enquiryType = 'booking';
  }
  $: isGeneralEnquiry = allowGeneralEnquiry && enquiryType === 'general';
-  $: ownerSubtitle = isGeneralEnquiry
+  $: ownerIntro = isGeneralEnquiry
    ? booking.generalSubtitle?.trim() || defaultGeneralSubtitle
    : booking.subtitle;
  $: ownerStepLabel = booking.ownerStepLabel?.trim() || 'Owner Details';
  $: dogStepLabel = booking.dogStepLabel?.trim() || 'Your dog';
-  $: firstStepLabel = isGeneralEnquiry ? 'Your enquiry' : dogStepLabel;
-  $: firstStepIntro = isGeneralEnquiry ? generalIntro : dogIntro;
+  $: detailsStepLabel = isGeneralEnquiry ? 'Your enquiry' : dogStepLabel;
+  $: detailsStepIntro = isGeneralEnquiry ? generalIntro : dogIntro;
  $: successPetName = petName.trim() || 'your dog';

  onMount(() => {
@@ -126,7 +126,37 @@
    errors = {};
  }

-  function validateFirstStep(): boolean {
+  function validateOwnerStep(): boolean {
+    const next: Record<string, string> = {};
+
+    if (!fullName.trim()) next.fullName = 'Please enter your full name';
+
+    const emailError = validateEmail(email);
+    if (emailError) next.email = emailError;
+
+    if (!phone.trim()) next.phone = 'Please enter your contact number';
+
+    errors = next;
+
+    if (next.fullName) {
+      fullNameInput?.focus();
+      return false;
+    }
+
+    if (next.email) {
+      emailInput?.focus();
+      return false;
+    }
+
+    if (next.phone) {
+      phoneInput?.focus();
+      return false;
+    }
+
+    return true;
+  }
+
+  function validateDetailsStep(): boolean {
    const next: Record<string, string> = {};

    if (isGeneralEnquiry) {
@@ -156,7 +186,7 @@
  }

  function goToOwnerStep() {
-    if (!validateFirstStep()) return;
+    if (!validateDetailsStep()) return;
    errors = {};
    step = 2;
  }
@@ -169,22 +199,11 @@
      return;
    }

-    const next: Record<string, string> = {};
-    if (!fullName.trim()) next.fullName = 'Please enter your full name';
-
-    const emailError = validateEmail(email);
-    if (emailError) next.email = emailError;
-
-    if (!phone.trim()) next.phone = 'Please enter your contact number';
-
-    if (Object.keys(next).length > 0) {
-      errors = next;
-      if (next.fullName) fullNameInput?.focus();
-      else if (next.email) emailInput?.focus();
-      else if (next.phone) phoneInput?.focus();
+    if (!validateOwnerStep()) {
      return;
    }

+    errors = {};
    submitting = true;
    submitErrorDetail = '';
    showErrorModal = false;
@@ -194,26 +213,27 @@
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
-            enquiryType,
-            fullName,
-            email,
-            phone,
-            petName: isGeneralEnquiry ? '' : petName,
-            location: isGeneralEnquiry ? '' : location,
-            message,
-            services: isGeneralEnquiry ? [] : selectedServices,
-            website,
-            formStartedAt,
-            referrer: document.referrer,
-            page: window.location.href,
-          })
+          enquiryType,
+          fullName,
+          email,
+          phone,
+          petName: isGeneralEnquiry ? '' : petName,
+          location: isGeneralEnquiry ? '' : location,
+          message,
+          services: isGeneralEnquiry ? [] : selectedServices,
+          website,
+          formStartedAt,
+          referrer: document.referrer,
+          page: window.location.href
+        })
      });

      if (!res.ok) {
        const body = await res.json().catch(() => ({}));
-        const detail = typeof body?.detail === 'string'
-          ? body.detail
-          : body?.detail?.message ?? body?.message ?? `Server responded with ${res.status}`;
+        const detail =
+          typeof body?.detail === 'string'
+            ? body.detail
+            : body?.detail?.message ?? body?.message ?? `Server responded with ${res.status}`;
        throw new Error(detail);
      }

@@ -229,7 +249,6 @@

 <section id="newlead" use:reveal={{ delay: 70 }} class="reveal-block">
  <div class="form-inner">
-
    {#if submitted}
      <SuccessModal
        firstName={fullName.split(' ')[0]}
@@ -251,7 +270,8 @@

    <div class="booking-header">
      <h2 class="booking-title">
-        <span class="booking-title-plain">{headingParts.plain}</span>{' '}<span class="booking-title-highlight">{headingParts.highlight}</span>
+        <span class="booking-title-plain">{headingParts.plain}</span>{' '}
+        <span class="booking-title-highlight">{headingParts.highlight}</span>
      </h2>

      <div class="booking-stepper" aria-label="Booking form steps">
@@ -259,10 +279,13 @@
          type="button"
          class:active={step === 1}
          class="booking-step"
-          on:click={() => (step = 1)}
+          on:click={() => {
+            step = 1;
+            errors = {};
+          }}
        >
          <span class="booking-step-number">1</span>
-          <span class="booking-step-label">{firstStepLabel}</span>
+          <span class="booking-step-label">{detailsStepLabel}</span>
        </button>
        <span class="booking-step-divider" aria-hidden="true"></span>
        <button
@@ -277,12 +300,7 @@
      </div>
    </div>

-    <form
-      class="booking-form"
-      id="bookingForm"
-      novalidate
-      on:submit={handleSubmit}
-    >
+    <form class="booking-form" id="bookingForm" novalidate on:submit={handleSubmit}>
      <div class="booking-honeypot" aria-hidden="true">
        <label for="website">Website</label>
        <input
@@ -296,12 +314,16 @@
      </div>

      {#if step === 1}
+        <input type="hidden" name="enquiryType" value={enquiryType} />
        <div class="booking-panel">
-          {#if firstStepIntro}
-            <div class="booking-panel-banner">{firstStepIntro}</div>
+          {#if detailsStepIntro}
+            <div class="booking-panel-banner">{detailsStepIntro}</div>
          {/if}

-          <div class:booking-card-grid-with-banner={Boolean(firstStepIntro)} class="booking-card-grid booking-card-grid-dog">
+          <div
+            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>
@@ -361,7 +383,10 @@
                {/if}
              </div>

-              <div class="booking-field-card booking-field-card-wide" class:booking-field-card-invalid={errors.location}>
+              <div
+                class="booking-field-card booking-field-card-wide"
+                class:booking-field-card-invalid={errors.location}
+              >
                <label for="location">
                  <Icon name="fas fa-location-dot" />&nbsp;Location <span class="booking-required">*</span>
                </label>
@@ -385,7 +410,10 @@
              </div>
            {/if}

-            <div class="booking-field-card booking-field-card-full" class:booking-field-card-invalid={errors.message}>
+            <div
+              class="booking-field-card booking-field-card-full"
+              class:booking-field-card-invalid={errors.message}
+            >
              <label for="message">
                <Icon name="fas fa-comment" />&nbsp;{isGeneralEnquiry ? 'Your Message' : 'About Your Dog'}
                {#if isGeneralEnquiry}<span class="booking-required">*</span>{/if}
@@ -438,26 +466,25 @@
            {ownerStepLabel}
            <Icon name="fas fa-arrow-right" />
          </button>
+          <p class="booking-next-note">Response from us within 24 hours</p>
        </div>
      {:else}
-        <input type="hidden" name="enquiryType" value={enquiryType} />
-        {#if !isGeneralEnquiry}
-          <input type="hidden" name="petName" value={petName} />
-          <input type="hidden" name="location" value={location} />
-        {/if}
+        <input type="hidden" name="fullName" value={fullName} />
+        <input type="hidden" name="email" value={email} />
+        <input type="hidden" name="phone" value={phone} />
+        <input type="hidden" name="petName" value={petName} />
+        <input type="hidden" name="location" value={location} />
        <input type="hidden" name="message" value={message} />
-        {#if !isGeneralEnquiry}
-          {#each selectedServices as service}
-            <input type="hidden" name="services" value={service} />
-          {/each}
-        {/if}

        <div class="booking-panel">
-          {#if ownerSubtitle}
-            <div class="booking-panel-banner">{ownerSubtitle}</div>
+          {#if ownerIntro}
+            <div class="booking-panel-banner">{ownerIntro}</div>
          {/if}

-          <div class:booking-card-grid-with-banner={Boolean(ownerSubtitle)} class="booking-card-grid booking-card-grid-owner">
+          <div
+            class:booking-card-grid-with-banner={Boolean(ownerIntro)}
+            class="booking-card-grid booking-card-grid-owner"
+          >
            <div class="booking-field-card booking-field-card-group booking-field-card-full">
              <div class="booking-field-group booking-field-group-owner">
                <div class="booking-field-stack" class:booking-field-stack-invalid={errors.fullName}>
@@ -542,7 +569,10 @@
          <button
            type="button"
            class="btn btn-outline btn-outline-green"
-            on:click={() => { step = 1; errors = {}; }}
+            on:click={() => {
+              step = 1;
+              errors = {};
+            }}
          >
            Back
          </button>