create-brainerce-store 1.61.0 → 1.62.0

package/dist/index.js

@@ -31,7 +31,7 @@ var require_package = __commonJS({
   "package.json"(exports2, module2) {
     module2.exports = {
       name: "create-brainerce-store",
-      version: "1.61.0",
+      version: "1.62.0",
       description: "Scaffold a production-ready e-commerce storefront connected to Brainerce",
       bin: {
         "create-brainerce-store": "dist/index.js"
@@ -187,7 +187,12 @@ var BRAINERCE_RUNTIME_DEPS = Object.freeze({
   // label live carrier rates, so an older SDK fails type-check at scaffold time
   // — plus getBusinessHoursForDate(), which the scaffolded DATETIME checkout
   // field uses to tell "day closed" from "field isn't slot-based".
-  brainerce: "^1.52.0",
+  // 1.53 strips lat/lng/formattedAddress from setShippingAddress/
+  // setBillingAddress bodies. The address endpoints reject ANY unknown
+  // property with a 400 that blocks checkout outright, and those three come
+  // straight off getAddressDetails() — so a scaffolded store on an older SDK
+  // is one `...address` spread away from a checkout nobody can complete.
+  brainerce: "^1.53.0",
   "isomorphic-dompurify": "^3.8.0"
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-brainerce-store",
-  "version": "1.61.0",
+  "version": "1.62.0",
   "description": "Scaffold a production-ready e-commerce storefront connected to Brainerce",
   "bin": {
     "create-brainerce-store": "dist/index.js"

package/templates/nextjs/base/src/components/checkout/checkout-form.tsx

@@ -13,6 +13,18 @@ import { getClient } from '@/core/lib/brainerce';
 const ADDRESS_SEARCH_DEBOUNCE_MS = 300;
 const ADDRESS_SEARCH_MIN_CHARS = 3;
 
+// Editing any of these invalidates a previously picked suggestion: its
+// coordinates describe the address the shopper selected, not what is in the
+// inputs now. See `pickedPlace` below.
+const PLACE_INVALIDATING_FIELDS = new Set<string>([
+  'line1',
+  'line2',
+  'city',
+  'region',
+  'postalCode',
+  'country',
+]);
+
 interface CheckoutConsent {
   acceptsMarketing: boolean;
   saveDetails: boolean;
@@ -65,6 +77,16 @@ export function CheckoutForm({
   const [showAddressSuggestions, setShowAddressSuggestions] = useState(false);
   const [isSearchingAddress, setIsSearchingAddress] = useState(false);
   const [outsideDeliveryZone, setOutsideDeliveryZone] = useState(false);
+  // The suggestion the shopper actually picked, kept so it can ride along to
+  // `setShippingAddress`. That is what lets the server match map-drawn
+  // ("polygon") delivery zones against this address's exact coordinates
+  // instead of geocoding the typed text — skipping it is the most common
+  // cause of "the store says it doesn't deliver here, but it does". Null
+  // whenever the address was typed by hand or edited after picking.
+  const [pickedPlace, setPickedPlace] = useState<{
+    placeId: string;
+    sessionToken: string;
+  } | null>(null);
   const addressSessionToken = useRef(
     typeof crypto !== 'undefined' ? crypto.randomUUID() : `${Date.now()}-${Math.random()}`
   );
@@ -108,10 +130,14 @@ export function CheckoutForm({
 
   async function handleSelectAddressSuggestion(suggestion: AddressSuggestion) {
     setShowAddressSuggestions(false);
+    // The token this resolution is billed under — hand the SAME one to
+    // `setShippingAddress` so a server-side cache miss re-resolves within this
+    // autocomplete session instead of opening a new (billed) one.
+    const resolvingSessionToken = addressSessionToken.current;
     try {
       const { address, inZone } = await getClient().getAddressDetails(
         suggestion.placeId,
-        addressSessionToken.current
+        resolvingSessionToken
       );
       setFormData((prev) => {
         const country = address.country || prev.country;
@@ -138,9 +164,15 @@ export function CheckoutForm({
         };
       });
       setOutsideDeliveryZone(!inZone);
+      // Note we deliberately do NOT copy address.lat/lng into the form: no
+      // address endpoint accepts coordinates (zone matching decides which rate
+      // is charged, so the server resolves them from the placeId itself).
+      // They're yours to use for a map pin and nothing else.
+      setPickedPlace({ placeId: suggestion.placeId, sessionToken: resolvingSessionToken });
     } catch {
       // Resolution failed — keep whatever the shopper had typed/selected as
       // the visible text; they can still fill in the rest manually.
+      setPickedPlace(null);
     } finally {
       // New session for the next address-entry attempt.
       addressSessionToken.current =
@@ -212,7 +244,17 @@ export function CheckoutForm({
   function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     if (validate()) {
-      onSubmit(formData, { acceptsMarketing, saveDetails: showSaveDetails && saveDetails });
+      onSubmit(
+        {
+          ...formData,
+          // Both undefined when the shopper typed the address by hand or
+          // edited it after picking a suggestion — the server then geocodes
+          // the text, which is the right behaviour once the two disagree.
+          placeId: pickedPlace?.placeId,
+          placeSessionToken: pickedPlace?.sessionToken,
+        },
+        { acceptsMarketing, saveDetails: showSaveDetails && saveDetails }
+      );
     }
   }
 
@@ -225,6 +267,12 @@ export function CheckoutForm({
       }
       return next;
     });
+    // Once any address field is edited, the picked suggestion no longer
+    // describes what is in the form — keeping its placeId would match delivery
+    // zones against the address the shopper originally selected.
+    if (PLACE_INVALIDATING_FIELDS.has(field)) {
+      setPickedPlace(null);
+    }
     if (errors[field]) {
       setErrors((prev) => {
         const next = { ...prev };