@swift-food-services/catering-widget 0.1.0 → 0.1.1

package/dist/index.cjs

@@ -6246,7 +6246,10 @@ function createPricingApi(client) {
       }
     ),
     calculateCateringPricingWithMealSessions: async (mealSessions, promoCodes, deliveryLocation, userId) => {
-      const mealSessionRequests = mealSessions.filter((s) => s.orderItems.length > 0).map((session, index) => ({
+      const HHMM = /^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/;
+      const mealSessionRequests = mealSessions.filter(
+        (s) => s.orderItems.length > 0 && !!s.sessionDate?.trim() && HHMM.test(s.eventTime ?? "")
+      ).map((session, index) => ({
         sessionName: session.sessionName || `Session ${index + 1}`,
         sessionDate: session.sessionDate,
         eventTime: session.eventTime,
@@ -6254,6 +6257,14 @@ function createPricingApi(client) {
         specialRequirements: session.specialRequirements,
         orderItems: groupItemsByRestaurant(session.orderItems)
       }));
+      if (mealSessionRequests.length === 0) {
+        return {
+          isValid: false,
+          subtotal: 0,
+          deliveryFee: 0,
+          total: 0
+        };
+      }
       try {
         return await client.requestJson(
           "/pricing/catering-verify-cart",
@@ -11264,7 +11275,8 @@ function loadGoogleMapsScript(apiKey) {
 }
 
 // src/hooks/useAddressAutocomplete.ts
-function useAddressAutocomplete(onPlaceSelect) {
+function useAddressAutocomplete(onPlaceSelect, options = {}) {
+  const countryRestriction = options.countryRestriction === void 0 ? GOOGLE_MAPS_CONFIG.COUNTRY_RESTRICTION : options.countryRestriction;
   const { googleMapsApiKey } = useCateringConfig();
   const inputRef = react.useRef(null);
   const containerRef = react.useRef(null);
@@ -11298,7 +11310,10 @@ function useAddressAutocomplete(onPlaceSelect) {
     }
     debounceRef.current = setTimeout(() => {
       autocompleteServiceRef.current.getPlacePredictions(
-        { input: query, componentRestrictions: { country: GOOGLE_MAPS_CONFIG.COUNTRY_RESTRICTION } },
+        {
+          input: query,
+          ...countryRestriction ? { componentRestrictions: { country: countryRestriction } } : {}
+        },
         (results, status) => {
           if (status === google.maps.places.PlacesServiceStatus.OK && results) {
             setPredictions(results);
@@ -15115,6 +15130,80 @@ function DeliveryAddressForm({
     ] })
   ] });
 }
+function BillingAddressAutocomplete({
+  onPlaceSelect
+}) {
+  const {
+    inputRef,
+    containerRef,
+    query,
+    setQuery,
+    predictions,
+    open,
+    activeIndex,
+    setActiveIndex,
+    handleSelect,
+    handleKeyDown
+  } = useAddressAutocomplete(onPlaceSelect, { countryRestriction: null });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-full", ref: containerRef, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "block text-[10px] font-bold text-base-content/60 uppercase tracking-widest mb-1.5", children: [
+      "Search Address",
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[9px] text-base-content/40 ml-2", children: "(Optional)" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "search",
+          value: query,
+          onChange: (e) => setQuery(e.target.value),
+          onKeyDown: handleKeyDown,
+          placeholder: "Start typing an address...",
+          autoComplete: "new-password",
+          className: "w-full bg-gray-50 border border-base-300 rounded-lg px-4 py-2.5 text-base text-base-content placeholder:text-base-content/50 focus:outline-none focus:ring-2 focus:ring-dark-pink/20 focus:border-dark-pink transition-all"
+        }
+      ),
+      open && predictions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-full left-0 right-0 mt-1 rounded-lg border border-base-200 bg-white shadow-lg overflow-hidden z-50", children: predictions.map((p, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onMouseDown: (e) => {
+            e.preventDefault();
+            handleSelect(p);
+          },
+          onMouseEnter: () => setActiveIndex(idx),
+          className: `flex w-full items-start gap-2 px-3 py-2.5 text-left transition-colors ${idx === activeIndex ? "bg-base-100" : "hover:bg-base-100"}`,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                className: "h-3.5 w-3.5 flex-shrink-0 text-base-content/40 mt-0.5",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M17.657 16.657L13.414 20.9a2 2 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0zM15 11a3 3 0 11-6 0 3 3 0 016 0z"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-base-content truncate", children: p.structured_formatting.main_text }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-base-content/50 truncate", children: p.structured_formatting.secondary_text })
+            ] })
+          ]
+        },
+        p.place_id
+      )) })
+    ] })
+  ] });
+}
 var fieldLabelClass = "block text-[10px] font-bold text-base-content/60 uppercase tracking-widest mb-1.5";
 var fieldClass = "w-full bg-gray-50 border border-base-300 rounded-lg px-4 py-2.5 text-base text-base-content placeholder:text-base-content/50 focus:outline-none focus:ring-2 focus:ring-dark-pink/20 focus:border-dark-pink transition-all";
 function ContactInfoForm({
@@ -15122,7 +15211,6 @@ function ContactInfoForm({
   errors,
   onFieldChange,
   onBlur,
-  onBillingBlur,
   ccEmails,
   onAddCcEmail,
   onRemoveCcEmail
@@ -15131,6 +15219,14 @@ function ContactInfoForm({
   const [showBillingAddress, setShowBillingAddress] = react.useState(
     !!formData.billingAddress?.line1
   );
+  const [billingFullyOpen, setBillingFullyOpen] = react.useState(showBillingAddress);
+  react.useEffect(() => {
+    if (showBillingAddress) {
+      const t = setTimeout(() => setBillingFullyOpen(true), 300);
+      return () => clearTimeout(t);
+    }
+    setBillingFullyOpen(false);
+  }, [showBillingAddress]);
   const handleBillingFieldChange = (field, value) => {
     const currentBilling = formData.billingAddress || {
       line1: "",
@@ -15147,6 +15243,50 @@ function ContactInfoForm({
       }
     );
   };
+  const handleBillingPlaceSelect = (place) => {
+    if (!place || !place.address_components) return;
+    let streetNumber = "";
+    let route = "";
+    let premise = "";
+    let subpremise = "";
+    let city = "";
+    let postalCode = "";
+    let country = "";
+    place.address_components.forEach((component) => {
+      const types = component.types;
+      if (types.includes("street_number")) streetNumber = component.long_name;
+      if (types.includes("route")) route = component.long_name;
+      if (types.includes("premise")) premise = component.long_name;
+      if (types.includes("subpremise")) subpremise = component.long_name;
+      if (types.includes("postal_town") || types.includes("locality") || types.includes("sublocality") || types.includes("administrative_area_level_2")) {
+        if (!city) city = component.long_name;
+      }
+      if (types.includes("postal_code")) postalCode = component.long_name;
+      if (types.includes("country")) country = component.short_name;
+    });
+    const streetParts = [subpremise, premise, streetNumber, route].map((p) => p.trim()).filter(Boolean);
+    let line1 = streetParts.join(" ").trim();
+    if (!line1) {
+      line1 = place.name?.trim() || place.formatted_address?.split(",")[0]?.trim() || "";
+    }
+    const currentBilling = formData.billingAddress || {
+      line1: "",
+      line2: "",
+      city: "",
+      postalCode: "",
+      country: "GB"
+    };
+    onFieldChange(
+      "billingAddress",
+      {
+        ...currentBilling,
+        line1,
+        city,
+        postalCode,
+        country: country || currentBilling.country
+      }
+    );
+  };
   const handleAddCcEmail = () => {
     const trimmedEmail = ccEmailInput.trim();
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -15353,78 +15493,72 @@ function ContactInfoForm({
         {
           "aria-hidden": !showBillingAddress,
           className: `grid transition-all duration-300 ease-out ${showBillingAddress ? "grid-rows-[1fr] opacity-100 mt-4" : "grid-rows-[0fr] opacity-0 mt-0"}`,
-          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-full", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("label", { className: fieldLabelClass, children: [
-                "Address Line 1",
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-dark-pink ml-0.5", children: "*" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  type: "text",
-                  value: formData.billingAddress?.line1 || "",
-                  onChange: (e) => handleBillingFieldChange("line1", e.target.value),
-                  onBlur: () => onBillingBlur("line1"),
-                  placeholder: "Street address",
-                  className: `${fieldClass} ${errors.billingAddress?.line1 ? "border-error" : ""}`
-                }
-              ),
-              errors.billingAddress?.line1 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-error", children: errors.billingAddress.line1 })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-full", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("label", { className: fieldLabelClass, children: [
-                "Address Line 2",
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[9px] text-base-content/40 ml-2", children: "(Optional)" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  type: "text",
-                  value: formData.billingAddress?.line2 || "",
-                  onChange: (e) => handleBillingFieldChange("line2", e.target.value),
-                  placeholder: "Apartment, suite, etc.",
-                  className: fieldClass
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("label", { className: fieldLabelClass, children: [
-                "City",
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-dark-pink ml-0.5", children: "*" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  type: "text",
-                  value: formData.billingAddress?.city || "",
-                  onChange: (e) => handleBillingFieldChange("city", e.target.value),
-                  onBlur: () => onBillingBlur("city"),
-                  placeholder: "City",
-                  className: `${fieldClass} ${errors.billingAddress?.city ? "border-error" : ""}`
-                }
-              ),
-              errors.billingAddress?.city && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-error", children: errors.billingAddress.city })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("label", { className: fieldLabelClass, children: [
-                "Postcode",
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-dark-pink ml-0.5", children: "*" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  type: "text",
-                  value: formData.billingAddress?.postalCode || "",
-                  onChange: (e) => handleBillingFieldChange("postalCode", e.target.value.toUpperCase()),
-                  onBlur: () => onBillingBlur("postalCode"),
-                  placeholder: "SW1A 1AA",
-                  className: `${fieldClass} ${errors.billingAddress?.postalCode ? "border-error" : ""}`
-                }
-              ),
-              errors.billingAddress?.postalCode && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-error", children: errors.billingAddress.postalCode })
-            ] })
-          ] }) })
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: `min-h-0 ${billingFullyOpen ? "overflow-visible" : "overflow-hidden"}`,
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  BillingAddressAutocomplete,
+                  {
+                    onPlaceSelect: handleBillingPlaceSelect
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-full", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("label", { className: fieldLabelClass, children: "Address Line 1" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      type: "text",
+                      value: formData.billingAddress?.line1 || "",
+                      onChange: (e) => handleBillingFieldChange("line1", e.target.value),
+                      placeholder: "Street address",
+                      className: fieldClass
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-full", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("label", { className: fieldLabelClass, children: "Address Line 2" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      type: "text",
+                      value: formData.billingAddress?.line2 || "",
+                      onChange: (e) => handleBillingFieldChange("line2", e.target.value),
+                      placeholder: "Apartment, suite, etc.",
+                      className: fieldClass
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("label", { className: fieldLabelClass, children: "City" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      type: "text",
+                      value: formData.billingAddress?.city || "",
+                      onChange: (e) => handleBillingFieldChange("city", e.target.value),
+                      placeholder: "City",
+                      className: fieldClass
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("label", { className: fieldLabelClass, children: "Postcode / ZIP" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      type: "text",
+                      value: formData.billingAddress?.postalCode || "",
+                      onChange: (e) => handleBillingFieldChange("postalCode", e.target.value),
+                      placeholder: "Postcode or ZIP",
+                      className: fieldClass
+                    }
+                  )
+                ] })
+              ] })
+            }
+          )
         }
       )
     ] })
@@ -15726,37 +15860,6 @@ function CheckoutScreen() {
       [field]: error
     }));
   };
-  const handleBillingBlur = (field) => {
-    if (!hasBillingAddressData()) return;
-    const billing = formData.billingAddress;
-    let error;
-    switch (field) {
-      case "line1":
-        if (!billing?.line1?.trim()) {
-          error = "Address line 1 is required";
-        }
-        break;
-      case "city":
-        if (!billing?.city?.trim()) {
-          error = "City is required";
-        }
-        break;
-      case "postalCode":
-        if (!billing?.postalCode?.trim()) {
-          error = "Postcode is required";
-        } else if (!validateUKPostcode(billing.postalCode)) {
-          error = "Please enter a valid UK postcode (e.g., SW1A 1AA)";
-        }
-        break;
-    }
-    setErrors((prev) => ({
-      ...prev,
-      billingAddress: {
-        ...prev.billingAddress,
-        [field]: error
-      }
-    }));
-  };
   const handleChange = (field, value) => {
     setFormData((prev) => ({ ...prev, [field]: value }));
     if (field in errors) {
@@ -15768,28 +15871,6 @@ function CheckoutScreen() {
     if (!postcode) return false;
     return UK_POSTCODE_REGEX.test(postcode.trim());
   };
-  const hasBillingAddressData = () => {
-    const billing = formData.billingAddress;
-    if (!billing) return false;
-    return !!(billing.line1?.trim() || billing.city?.trim() || billing.postalCode?.trim());
-  };
-  const validateBillingAddress = () => {
-    if (!hasBillingAddressData()) return void 0;
-    const billing = formData.billingAddress;
-    const billingErrors = {};
-    if (!billing?.line1?.trim()) {
-      billingErrors.line1 = "Address line 1 is required";
-    }
-    if (!billing?.city?.trim()) {
-      billingErrors.city = "City is required";
-    }
-    if (!billing?.postalCode?.trim()) {
-      billingErrors.postalCode = "Postcode is required";
-    } else if (!validateUKPostcode(billing.postalCode)) {
-      billingErrors.postalCode = "Please enter a valid UK postcode (e.g., SW1A 1AA)";
-    }
-    return Object.keys(billingErrors).length > 0 ? billingErrors : void 0;
-  };
   const validateForm = () => {
     const newErrors = {
       fullName: validateFullName(formData.fullName),
@@ -15812,11 +15893,8 @@ function CheckoutScreen() {
         newErrors.addressLine1 = "Please select an address from the Google autocomplete dropdown";
       }
     }
-    newErrors.billingAddress = validateBillingAddress();
     setErrors(newErrors);
-    const hasBasicErrors = Object.entries(newErrors).filter(([key]) => key !== "billingAddress").some(([, error]) => error !== void 0);
-    const hasBillingErrors = newErrors.billingAddress !== void 0;
-    return !hasBasicErrors && !hasBillingErrors;
+    return !Object.values(newErrors).some((error) => error !== void 0);
   };
   const handleAddCcEmail = (email) => {
     setCcEmails([...ccEmails, email]);
@@ -16677,7 +16755,6 @@ function CheckoutScreen() {
                   errors,
                   onFieldChange: handleChange,
                   onBlur: handleBlur,
-                  onBillingBlur: handleBillingBlur,
                   ccEmails,
                   onAddCcEmail: handleAddCcEmail,
                   onRemoveCcEmail: handleRemoveCcEmail