merchi_cart 1.3.2 → 1.3.4

package/src/CartProvider.tsx

@@ -15,6 +15,11 @@ import { makeAddress } from './utilities/address';
 import { appendStyleSheetText } from './utilities/helpers';
 import { makeJob } from './utilities/job';
 import { makeProduct } from './utilities/product';
+import {
+  getSavedCheckoutCustomer,
+  saveCheckoutAddress,
+} from './utilities/local_storage';
+import { makeUser } from './utilities/user';
 
 export interface PropsCart {
   cart: any;
@@ -577,15 +582,44 @@ const CartProvider = ({
   const [fetchingCart, setFetchingCart] = useState(false);
   const [cartSettingsInvalid, setCartSettingsInvalid] = useState(false);
 
+  async function attachSavedClientIfNeeded(cartJson: any) {
+    if (cartJson?.client?.id) {
+      setCartClient(cartJson.client);
+      return cartJson;
+    }
+    const savedCustomer = getSavedCheckoutCustomer(domainId);
+    if (!savedCustomer?.id) {
+      setCartClient(null);
+      return cartJson;
+    }
+    try {
+      const cartToken =
+        cartJson.token || (await getCartCookieToken(domainId as number));
+      const clientEnt = makeUser({ id: savedCustomer.id }, true);
+      const cartEnt = makeCart({ ...cartJson }, false, cartToken);
+      cartEnt.client = clientEnt;
+      const savedCart = await cartEnt.save({ embed: cartEmbed });
+      const nextCart = savedCart.toJson();
+      if (nextCart?.client?.id) {
+        setCartClient(nextCart.client);
+        return nextCart;
+      }
+    } catch {
+      // Stale saved customer id — leave customer forms available.
+    }
+    setCartClient(null);
+    return cartJson;
+  }
+
   // Create cart and save cart cookie
   async function createCartAndCookie(callback?: () => void) {
     setFetchingCart(true);
     try {
       const cart = makeCart({domain: {id: domainId}}, true);
       await cart.create({embed: cartEmbed});
-      const cartJson = await cart.toJson();
+      let cartJson = await cart.toJson();
       if (domainId) setCartCookie(Number(domainId), cartJson, undefined);
-      setCartClient(null);
+      cartJson = await attachSavedClientIfNeeded(cartJson);
       setCart({...cartJson});
       if (callback) callback();
     } catch (e: any) {
@@ -603,8 +637,9 @@ const CartProvider = ({
     setFetchingCart(true);
     try {
       const cart = await merchi.Cart.get(id, {embed: cartEmbed});
-      const cartJson = await cart.toJson();
+      let cartJson = await cart.toJson();
       if (stripeIsValidAndActive(cartJson)) {
+        cartJson = await attachSavedClientIfNeeded(cartJson);
         setCart({...cartJson});
       } else {
         console.error(
@@ -648,6 +683,7 @@ const CartProvider = ({
       cartEnt.receiverAddress = receiverAddress;
       cartEnt = await cartEnt.save({embed: cartEmbed});
       const cartJson = cartEnt.toJson();
+      saveCheckoutAddress(domainId, address);
       const query: Array<any> = [];
       query.push(['cart_token', cart.token]);
       const cartWithShipmentGroups = await merchi.authenticatedFetch(

package/src/forms/FormNewCustomer.tsx

@@ -10,6 +10,10 @@ import InputError from './InputError';
 import { createNewCustomer, makeUser } from '../utilities/user';
 import { makeCart } from '../utilities/cart';
 import { getCartCookieToken } from '../utilities/cookie';
+import {
+  getSavedCheckoutCustomer,
+  saveCheckoutCustomer,
+} from '../utilities/local_storage';
 
 export const emailValidation = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]/i;
 
@@ -27,6 +31,7 @@ export function FormCustomerNew() {
   const [loading, setLoading] = React.useState(false);
   const [error, setError] = React.useState(({} as any));
   const [acceptConditions, setAcceptConditions] = React.useState(true);
+  const savedCustomer = getSavedCheckoutCustomer(domainId);
 
   async function actionCreateNewCustomer(customerJson: any) {
     setError({});
@@ -50,6 +55,12 @@ export function FormCustomerNew() {
       if (!cartJson?.client?.id) {
         throw new Error('Unable to attach client to cart.');
       }
+      saveCheckoutCustomer(domainId, {
+        id: user.id,
+        name: customerJson.name,
+        emailAddress: customerJson.emailAddresses?.[0]?.emailAddress,
+        phoneNumbers: customerJson.phoneNumbers,
+      });
       setCartClient(cartJson.client);
       setCart(cartJson);
     } catch (e: any) {
@@ -61,9 +72,14 @@ export function FormCustomerNew() {
 
   const { control, handleSubmit, watch } = useForm({
     defaultValues: {
-      emailAddresses: [{ emailAddress: '' }],
-      name: '',
-      phoneNumbers: [{ code: 'AU', number: '' }],
+      emailAddresses: [{
+        emailAddress: savedCustomer?.emailAddress || '',
+      }],
+      name: savedCustomer?.name || '',
+      phoneNumbers: [{
+        code: savedCustomer?.phoneNumbers?.[0]?.code || 'AU',
+        number: savedCustomer?.phoneNumbers?.[0]?.number || '',
+      }],
       registeredAsGuest: false,
     },
   });

package/src/forms/FormReturningCustomer.tsx

@@ -10,6 +10,10 @@ import {
 import { makeCart } from '../utilities/cart';
 import { getCartCookieToken } from '../utilities/cookie';
 import { cartEmbed } from '../utilities/helpers';
+import {
+  getSavedCheckoutCustomer,
+  saveCheckoutCustomer,
+} from '../utilities/local_storage';
 
 const emailValidation = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]/i;
 
@@ -27,8 +31,11 @@ function FormReturningCustomer() {
   } = useCartContext();
   const [loading, setLoading] = React.useState(false);
   const [error, setError] = React.useState(({} as any));
+  const savedCustomer = getSavedCheckoutCustomer(domainId);
 
-  const hookForm = useForm({ defaultValues: { emailAddress: '' } });
+  const hookForm = useForm({
+    defaultValues: { emailAddress: savedCustomer?.emailAddress || '' },
+  });
   const {
     handleSubmit,
     formState: { errors },
@@ -46,15 +53,10 @@ function FormReturningCustomer() {
       if (!userId) {
         throw new Error('Unable to find returning customer.');
       }
-      const userJson = {
-        id: userId,
-        emailAddresses: [{emailAddress}],
-        name: user.name || 'Hidden for privacy'
-      };
 
-      // patch cart with returning user
+      // Attach by id only — extra user fields trigger a forbidden user PATCH.
       const cartToken = await getCartCookieToken((domainId as number));
-      const clientEnt = makeUser(userJson, true);
+      const clientEnt = makeUser({id: userId}, true);
       const cartEnt = makeCart({...cart}, false, cartToken);
       cartEnt.client = clientEnt;
       const _cart = await cartEnt.save({embed: cartEmbed});
@@ -62,6 +64,11 @@ function FormReturningCustomer() {
       if (!cartJson?.client?.id) {
         throw new Error('Unable to attach client to cart.');
       }
+      saveCheckoutCustomer(domainId, {
+        id: userId,
+        name: user.name || savedCustomer?.name,
+        emailAddress,
+      });
       setCartClient(cartJson.client);
       setCart(cartJson);
     } catch(e: any) {

package/src/forms/FormShipmentAddressAndNotes.tsx

@@ -11,6 +11,11 @@ import { makeAddress } from "../utilities/address";
 import { makeCart } from "../utilities/cart";
 import { cartEmbed } from "../utilities/helpers";
 import { tabIdCheckout } from "../utilities/tabs";
+import {
+  addressHasContent,
+  getSavedCheckoutAddress,
+  saveCheckoutAddress,
+} from "../utilities/local_storage";
 
 interface PropsAddress {
   defaultAddress?: any;
@@ -110,7 +115,12 @@ export function ActiveFormShipmentAddressAndNotes() {
     setLoadingTotals,
     setActiveTabAndEditDisabled,
   } = useCartContext();
-  const { receiverAddress = {}, receiverNotes } = cart;
+  const saved = getSavedCheckoutAddress(domainId);
+  const cartAddress = cart?.receiverAddress;
+  const receiverAddress = addressHasContent(cartAddress)
+    ? cartAddress
+    : saved.address || {};
+  const receiverNotes = cart?.receiverNotes || saved.receiverNotes || "";
   const [addressFieldsOpen, setAddressFieldsOpen] = useState(false);
 
   async function saveCartShipmentAddressAndGoToNextTab(values: any) {
@@ -123,6 +133,7 @@ export function ActiveFormShipmentAddressAndNotes() {
     cartEnt.receiverNotes = receiverNotes;
     try {
       await cartEnt.save({ embed: cartEmbed });
+      saveCheckoutAddress(domainId, address, receiverNotes);
       setCart(cartEnt.toJson()); // Update cart context
       setActiveTabAndEditDisabled({
         tabId: tabIdCheckout,

package/src/utilities/index.ts

@@ -6,6 +6,7 @@ export * from './currency';
 export * from './helpers';
 export * from './invoice';
 export * from './job';
+export * from './local_storage';
 export * from './product';
 export * from './shipment';
 export * from './tabs';

package/src/utilities/local_storage.ts

@@ -0,0 +1,130 @@
+import { isBrowser } from 'browser-or-node';
+
+export interface SavedCheckoutCustomer {
+  id?: number;
+  name?: string;
+  emailAddress?: string;
+  phoneNumbers?: Array<{ code?: string; number?: string }>;
+}
+
+export interface SavedCheckoutAddress {
+  city?: string;
+  country?: string;
+  lineOne?: string;
+  lineTwo?: string;
+  postcode?: string;
+  state?: string;
+}
+
+export interface SavedCheckoutDraft {
+  customer?: SavedCheckoutCustomer;
+  address?: SavedCheckoutAddress;
+  receiverNotes?: string;
+}
+
+function storageKey(domainId: number | string) {
+  return `merchi-cart-checkout-${domainId}`;
+}
+
+function readDraft(domainId?: number | string | null): SavedCheckoutDraft {
+  if (!isBrowser || domainId === undefined || domainId === null) {
+    return {};
+  }
+  try {
+    const raw = localStorage.getItem(storageKey(domainId));
+    if (!raw) return {};
+    const parsed = JSON.parse(raw);
+    return parsed && typeof parsed === 'object' ? parsed : {};
+  } catch {
+    return {};
+  }
+}
+
+function writeDraft(domainId: number | string | undefined | null, draft: SavedCheckoutDraft) {
+  if (!isBrowser || domainId === undefined || domainId === null) {
+    return;
+  }
+  try {
+    localStorage.setItem(storageKey(domainId), JSON.stringify(draft));
+  } catch {
+    // Ignore quota / private-mode failures.
+  }
+}
+
+export function getSavedCheckoutDraft(domainId?: number | string | null): SavedCheckoutDraft {
+  return readDraft(domainId);
+}
+
+export function getSavedCheckoutCustomer(
+  domainId?: number | string | null
+): SavedCheckoutCustomer | undefined {
+  return readDraft(domainId).customer;
+}
+
+export function getSavedCheckoutAddress(
+  domainId?: number | string | null
+): { address?: SavedCheckoutAddress; receiverNotes?: string } {
+  const draft = readDraft(domainId);
+  return {
+    address: draft.address,
+    receiverNotes: draft.receiverNotes,
+  };
+}
+
+export function saveCheckoutCustomer(
+  domainId: number | string | undefined | null,
+  customer: SavedCheckoutCustomer
+) {
+  const draft = readDraft(domainId);
+  const nextCustomer: SavedCheckoutCustomer = {
+    ...draft.customer,
+    ...customer,
+  };
+  // Drop empty phone entries.
+  if (nextCustomer.phoneNumbers) {
+    nextCustomer.phoneNumbers = nextCustomer.phoneNumbers.filter(
+      (phone) => phone && (phone.number || phone.code)
+    );
+    if (!nextCustomer.phoneNumbers.length) {
+      delete nextCustomer.phoneNumbers;
+    }
+  }
+  writeDraft(domainId, { ...draft, customer: nextCustomer });
+}
+
+export function saveCheckoutAddress(
+  domainId: number | string | undefined | null,
+  address: SavedCheckoutAddress | null | undefined,
+  receiverNotes?: string
+) {
+  if (!address) return;
+  const draft = readDraft(domainId);
+  const nextAddress: SavedCheckoutAddress = {
+    city: address.city || '',
+    country: address.country || '',
+    lineOne: address.lineOne || '',
+    lineTwo: address.lineTwo || '',
+    postcode: address.postcode || '',
+    state: address.state || '',
+  };
+  const next: SavedCheckoutDraft = {
+    ...draft,
+    address: nextAddress,
+  };
+  if (receiverNotes !== undefined) {
+    next.receiverNotes = receiverNotes;
+  }
+  writeDraft(domainId, next);
+}
+
+export function addressHasContent(address?: SavedCheckoutAddress | null) {
+  if (!address) return false;
+  return Boolean(
+    address.lineOne ||
+      address.lineTwo ||
+      address.city ||
+      address.state ||
+      address.postcode ||
+      address.country
+  );
+}