@merchi/cart 1.4.18 → 1.4.20

package/esm/CartProvider.js

@@ -19,13 +19,13 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 import * as React from 'react';
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, useContext, useEffect, useRef, useState } from 'react';
 import { faCheckCircle, faExclamationTriangle, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import { makeCart, makeCartItem, stripeIsValidAndActive } from './utilities/cart';
 import { cartEmbed } from './utilities/helpers';
 import { initTabs, tabIdItems, tabShipment } from './utilities/tabs';
 import { Merchi } from '@merchi/sdk';
-import { getCartCookie, getCartCookieToken, setCartCookie } from './utilities/cookie';
+import { getCartCookie, getCartCookieToken, readHandoffCart, setCartCookie } from './utilities/cookie';
 import { makeAddress, sanitizeAddressFields } from './utilities/address';
 import { appendStyleSheetText } from './utilities/helpers';
 import { makeJob } from './utilities/job';
@@ -425,6 +425,7 @@ var CartProvider = function CartProvider(_ref) {
     _useState16 = _slicedToArray(_useState15, 2),
     cartSettingsInvalid = _useState16[0],
     setCartSettingsInvalid = _useState16[1];
+  var appliedHandoffCart = useRef(null);
   function attachSavedClientIfNeeded(_x) {
     return _attachSavedClientIfNeeded.apply(this, arguments);
   } // Create cart and save cart cookie
@@ -554,7 +555,8 @@ var CartProvider = function CartProvider(_ref) {
   }
   function getCart(_x3) {
     return _getCart.apply(this, arguments);
-  }
+  } // A checkout link can name the cart. Remember it once, then keep using the cookie
+  // so a later refetch does not put that cart back after the shopper replaced it.
   function _getCart() {
     _getCart = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(cartIdAndToken) {
       var id, _cart2, cartJson, isTest, jobSource, saved, _t4;
@@ -634,28 +636,73 @@ var CartProvider = function CartProvider(_ref) {
     }));
     return _getCart.apply(this, arguments);
   }
+  function adoptHandoffCart() {
+    return _adoptHandoffCart.apply(this, arguments);
+  }
+  function _adoptHandoffCart() {
+    _adoptHandoffCart = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
+      var raw, handoff;
+      return _regenerator().w(function (_context4) {
+        while (1) switch (_context4.n) {
+          case 0:
+            if (!(typeof window === 'undefined' || !domainId)) {
+              _context4.n = 1;
+              break;
+            }
+            return _context4.a(2);
+          case 1:
+            raw = new URLSearchParams(window.location.search).get('cart');
+            if (!(!raw || raw === appliedHandoffCart.current)) {
+              _context4.n = 2;
+              break;
+            }
+            return _context4.a(2);
+          case 2:
+            handoff = readHandoffCart(window.location.search);
+            if (handoff) {
+              _context4.n = 3;
+              break;
+            }
+            return _context4.a(2);
+          case 3:
+            appliedHandoffCart.current = raw;
+            _context4.n = 4;
+            return setCartCookie(Number(domainId), {
+              id: handoff[0],
+              token: handoff[1]
+            });
+          case 4:
+            return _context4.a(2);
+        }
+      }, _callee4);
+    }));
+    return _adoptHandoffCart.apply(this, arguments);
+  }
   function actionGetMerchiCart() {
     return _actionGetMerchiCart.apply(this, arguments);
   }
   function _actionGetMerchiCart() {
-    _actionGetMerchiCart = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
+    _actionGetMerchiCart = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
       var cartIdAndToken;
-      return _regenerator().w(function (_context4) {
-        while (1) switch (_context4.n) {
+      return _regenerator().w(function (_context5) {
+        while (1) switch (_context5.n) {
           case 0:
-            _context4.n = 1;
-            return getCartCookie(domainId);
+            _context5.n = 1;
+            return adoptHandoffCart();
           case 1:
-            cartIdAndToken = _context4.v;
+            _context5.n = 2;
+            return getCartCookie(domainId);
+          case 2:
+            cartIdAndToken = _context5.v;
             if (cartIdAndToken) {
               getCart(cartIdAndToken);
             } else {
               createCartAndCookie();
             }
-          case 2:
-            return _context4.a(2);
+          case 3:
+            return _context5.a(2);
         }
-      }, _callee4);
+      }, _callee5);
     }));
     return _actionGetMerchiCart.apply(this, arguments);
   }
@@ -663,19 +710,19 @@ var CartProvider = function CartProvider(_ref) {
     return _clearCart.apply(this, arguments);
   }
   function _clearCart() {
-    _clearCart = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(callback) {
-      return _regenerator().w(function (_context5) {
-        while (1) switch (_context5.n) {
+    _clearCart = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(callback) {
+      return _regenerator().w(function (_context6) {
+        while (1) switch (_context6.n) {
           case 0:
-            _context5.n = 1;
+            _context6.n = 1;
             return createCartAndCookie();
           case 1:
             if (callback) callback();
             closeClearCart();
           case 2:
-            return _context5.a(2);
+            return _context6.a(2);
         }
-      }, _callee5);
+      }, _callee6);
     }));
     return _clearCart.apply(this, arguments);
   }
@@ -687,55 +734,55 @@ var CartProvider = function CartProvider(_ref) {
     return _updateCartShipmentAddress.apply(this, arguments);
   }
   function _updateCartShipmentAddress() {
-    _updateCartShipmentAddress = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(address) {
+    _updateCartShipmentAddress = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7(address) {
       var token, addressFields, receiverAddress, cartEnt, cartJson, query, cartWithShipmentGroups, _t5;
-      return _regenerator().w(function (_context6) {
-        while (1) switch (_context6.p = _context6.n) {
+      return _regenerator().w(function (_context7) {
+        while (1) switch (_context7.p = _context7.n) {
           case 0:
-            _context6.n = 1;
+            _context7.n = 1;
             return getCartCookieToken(domainId);
           case 1:
-            token = _context6.v;
+            token = _context7.v;
             addressFields = sanitizeAddressFields(address);
             receiverAddress = makeAddress(addressFields, true);
             cartEnt = makeCart(cart, false, token);
             setFetchingShipmentGroups(true);
-            _context6.p = 2;
+            _context7.p = 2;
             cartEnt.receiverAddress = receiverAddress;
-            _context6.n = 3;
+            _context7.n = 3;
             return cartEnt.save({
               embed: cartEmbed
             });
           case 3:
-            cartEnt = _context6.v;
+            cartEnt = _context7.v;
             cartJson = cartEnt.toJson();
             saveCheckoutAddress(domainId, addressFields);
             query = [];
             query.push(['cart_token', cart.token]);
-            _context6.n = 4;
+            _context7.n = 4;
             return merchi.authenticatedFetch("/generate-cart-shipment-quotes/".concat(cart.id, "/"), {
               method: 'GET',
               query: query
             });
           case 4:
-            cartWithShipmentGroups = _context6.v;
+            cartWithShipmentGroups = _context7.v;
             setCart(_objectSpread(_objectSpread({}, cartJson), {}, {
               shipmentGroups: cartWithShipmentGroups.shipmentGroups || []
             }));
-            _context6.n = 6;
+            _context7.n = 6;
             break;
           case 5:
-            _context6.p = 5;
-            _t5 = _context6.v;
+            _context7.p = 5;
+            _t5 = _context7.v;
             alertError(_t5.errorMessage || _t5.message || 'Unable to set address');
           case 6:
-            _context6.p = 6;
+            _context7.p = 6;
             setFetchingShipmentGroups(false);
-            return _context6.f(6);
+            return _context7.f(6);
           case 7:
-            return _context6.a(2);
+            return _context7.a(2);
         }
-      }, _callee6, null, [[2, 5, 6, 7]]);
+      }, _callee7, null, [[2, 5, 6, 7]]);
     }));
     return _updateCartShipmentAddress.apply(this, arguments);
   }
@@ -743,39 +790,39 @@ var CartProvider = function CartProvider(_ref) {
     return _getCartShipmentOptions.apply(this, arguments);
   }
   function _getCartShipmentOptions() {
-    _getCartShipmentOptions = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7() {
+    _getCartShipmentOptions = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8() {
       var query, cartWithGroups, _t6;
-      return _regenerator().w(function (_context7) {
-        while (1) switch (_context7.p = _context7.n) {
+      return _regenerator().w(function (_context8) {
+        while (1) switch (_context8.p = _context8.n) {
           case 0:
             setFetchingShipmentGroups(true);
-            _context7.p = 1;
+            _context8.p = 1;
             query = [];
             query.push(['cart_token', cart.token]);
-            _context7.n = 2;
+            _context8.n = 2;
             return merchi.authenticatedFetch("/generate-cart-shipment-quotes/".concat(cart.id, "/"), {
               method: 'GET',
               query: query
             });
           case 2:
-            cartWithGroups = _context7.v;
+            cartWithGroups = _context8.v;
             setCart(_objectSpread(_objectSpread({}, cart), {}, {
               shipmentGroups: cartWithGroups.shipmentGroups || []
             }));
-            _context7.n = 4;
+            _context8.n = 4;
             break;
           case 3:
-            _context7.p = 3;
-            _t6 = _context7.v;
+            _context8.p = 3;
+            _t6 = _context8.v;
             alertError(_t6.errorMessage || _t6.message || 'Unable to fetch shipment options');
           case 4:
-            _context7.p = 4;
+            _context8.p = 4;
             setFetchingShipmentGroups(false);
-            return _context7.f(4);
+            return _context8.f(4);
           case 5:
-            return _context7.a(2);
+            return _context8.a(2);
         }
-      }, _callee7, null, [[1, 3, 4, 5]]);
+      }, _callee8, null, [[1, 3, 4, 5]]);
     }));
     return _getCartShipmentOptions.apply(this, arguments);
   }
@@ -783,14 +830,14 @@ var CartProvider = function CartProvider(_ref) {
     return _getMerchiCartValues.apply(this, arguments);
   }
   function _getMerchiCartValues() {
-    _getMerchiCartValues = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8() {
+    _getMerchiCartValues = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee9() {
       var _ref2, cartItems, currency, subtotalCost, taxAmount, totalCost, cartItemsCount;
-      return _regenerator().w(function (_context8) {
-        while (1) switch (_context8.n) {
+      return _regenerator().w(function (_context9) {
+        while (1) switch (_context9.n) {
           case 0:
             _ref2 = cart, cartItems = _ref2.cartItems, currency = _ref2.currency, subtotalCost = _ref2.subtotalCost, taxAmount = _ref2.taxAmount, totalCost = _ref2.totalCost;
             cartItemsCount = cartItems ? cartItems.length : 0;
-            return _context8.a(2, {
+            return _context9.a(2, {
               cart: cart,
               cartItemsCount: cartItemsCount,
               currency: currency || '',
@@ -799,7 +846,7 @@ var CartProvider = function CartProvider(_ref) {
               totalCost: totalCost || 0
             });
         }
-      }, _callee8);
+      }, _callee9);
     }));
     return _getMerchiCartValues.apply(this, arguments);
   }
@@ -807,13 +854,13 @@ var CartProvider = function CartProvider(_ref) {
     return _isMerchiCartFetching.apply(this, arguments);
   }
   function _isMerchiCartFetching() {
-    _isMerchiCartFetching = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee9() {
-      return _regenerator().w(function (_context9) {
-        while (1) switch (_context9.n) {
+    _isMerchiCartFetching = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee0() {
+      return _regenerator().w(function (_context0) {
+        while (1) switch (_context0.n) {
           case 0:
-            return _context9.a(2, fetchingCart);
+            return _context0.a(2, fetchingCart);
         }
-      }, _callee9);
+      }, _callee0);
     }));
     return _isMerchiCartFetching.apply(this, arguments);
   }
@@ -827,14 +874,14 @@ var CartProvider = function CartProvider(_ref) {
     return _actionFetchTheme.apply(this, arguments);
   }
   function _actionFetchTheme() {
-    _actionFetchTheme = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee0() {
+    _actionFetchTheme = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee1() {
       var domain, theme, _t7;
-      return _regenerator().w(function (_context0) {
-        while (1) switch (_context0.p = _context0.n) {
+      return _regenerator().w(function (_context1) {
+        while (1) switch (_context1.p = _context1.n) {
           case 0:
             setLoading(true);
-            _context0.p = 1;
-            _context0.n = 2;
+            _context1.p = 1;
+            _context1.n = 2;
             return merchi.Domain.get(domainId, {
               embed: {
                 activeTheme: {
@@ -843,24 +890,24 @@ var CartProvider = function CartProvider(_ref) {
               }
             });
           case 2:
-            domain = _context0.v;
+            domain = _context1.v;
             theme = domain.activeTheme;
-            _context0.n = 3;
+            _context1.n = 3;
             return appendStyleSheetText(theme.mainCss, function () {
               return setLoading(false);
             });
           case 3:
-            _context0.n = 5;
+            _context1.n = 5;
             break;
           case 4:
-            _context0.p = 4;
-            _t7 = _context0.v;
+            _context1.p = 4;
+            _t7 = _context1.v;
             alertError(_t7.errorMessage || _t7.message || 'Error fetching domain theme.');
             setLoading(false);
           case 5:
-            return _context0.a(2);
+            return _context1.a(2);
         }
-      }, _callee0, null, [[1, 4]]);
+      }, _callee1, null, [[1, 4]]);
     }));
     return _actionFetchTheme.apply(this, arguments);
   }
@@ -868,18 +915,18 @@ var CartProvider = function CartProvider(_ref) {
     return _setCartComplete.apply(this, arguments);
   }
   function _setCartComplete() {
-    _setCartComplete = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee1() {
-      return _regenerator().w(function (_context1) {
-        while (1) switch (_context1.n) {
+    _setCartComplete = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee10() {
+      return _regenerator().w(function (_context10) {
+        while (1) switch (_context10.n) {
           case 0:
-            _context1.n = 1;
+            _context10.n = 1;
             return createCartAndCookie();
           case 1:
             location.reload();
           case 2:
-            return _context1.a(2);
+            return _context10.a(2);
         }
-      }, _callee1);
+      }, _callee10);
     }));
     return _setCartComplete.apply(this, arguments);
   }
@@ -887,16 +934,16 @@ var CartProvider = function CartProvider(_ref) {
     return _refetchCart.apply(this, arguments);
   }
   function _refetchCart() {
-    _refetchCart = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee10() {
-      return _regenerator().w(function (_context10) {
-        while (1) switch (_context10.n) {
+    _refetchCart = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee11() {
+      return _regenerator().w(function (_context11) {
+        while (1) switch (_context11.n) {
           case 0:
-            _context10.n = 1;
+            _context11.n = 1;
             return actionGetMerchiCart();
           case 1:
-            return _context10.a(2);
+            return _context11.a(2);
         }
-      }, _callee10);
+      }, _callee11);
     }));
     return _refetchCart.apply(this, arguments);
   }
@@ -912,17 +959,17 @@ var CartProvider = function CartProvider(_ref) {
     return _addCartItem.apply(this, arguments);
   }
   function _addCartItem() {
-    _addCartItem = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee11(jobJson, onSuccess, onError) {
+    _addCartItem = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee12(jobJson, onSuccess, onError) {
       var jobEnt, cartToken, cartEnt, cartItemEnt, cartItemProduct, item, itemJson, _t8;
-      return _regenerator().w(function (_context11) {
-        while (1) switch (_context11.p = _context11.n) {
+      return _regenerator().w(function (_context12) {
+        while (1) switch (_context12.p = _context12.n) {
           case 0:
             setFetchingCart(true);
             jobEnt = makeJob(jobJson, true);
-            _context11.n = 1;
+            _context12.n = 1;
             return getCartCookieToken(domainId);
           case 1:
-            cartToken = _context11.v;
+            cartToken = _context12.v;
             cartEnt = makeCart(cart, false, cartToken);
             cartItemEnt = makeCartItem({}, true);
             cartItemProduct = makeProduct({
@@ -937,30 +984,30 @@ var CartProvider = function CartProvider(_ref) {
             cartItemEnt.ownDrafts = jobEnt.ownDrafts;
             cartItemEnt.clientFiles = jobEnt.clientFiles;
             cartItemEnt.tags = jobEnt.tags;
-            _context11.p = 2;
-            _context11.n = 3;
+            _context12.p = 2;
+            _context12.n = 3;
             return cartItemEnt.create();
           case 3:
-            item = _context11.v;
-            _context11.n = 4;
+            item = _context12.v;
+            _context12.n = 4;
             return item.toJson();
           case 4:
-            itemJson = _context11.v;
+            itemJson = _context12.v;
             onSuccess(itemJson);
-            _context11.n = 6;
+            _context12.n = 6;
             break;
           case 5:
-            _context11.p = 5;
-            _t8 = _context11.v;
+            _context12.p = 5;
+            _t8 = _context12.v;
             onError(_t8);
           case 6:
-            _context11.p = 6;
+            _context12.p = 6;
             setFetchingCart(false);
-            return _context11.f(6);
+            return _context12.f(6);
           case 7:
-            return _context11.a(2);
+            return _context12.a(2);
         }
-      }, _callee11, null, [[2, 5, 6, 7]]);
+      }, _callee12, null, [[2, 5, 6, 7]]);
     }));
     return _addCartItem.apply(this, arguments);
   }

package/esm/utilities/cookie.js

@@ -4,6 +4,15 @@ function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.
 function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
 import { isBrowser } from "browser-or-node";
 import { cartCookieName, readTestCheckoutFlag } from "./test_checkout";
+
+// id,token from a checkout link. The token is url-safe and has no padding.
+var HANDOFF_CART = /^\d+,[A-Za-z0-9_-]{8,}$/;
+export function readHandoffCart(search) {
+  var cart = new URLSearchParams(search).get("cart");
+  if (!cart || !HANDOFF_CART.test(cart)) return null;
+  var comma = cart.indexOf(",");
+  return [cart.slice(0, comma), cart.slice(comma + 1)];
+}
 export function getCookie(_x, _x2) {
   return _getCookie.apply(this, arguments);
 }

package/esm/utilities/cookie.test.js

@@ -0,0 +1,14 @@
+import { readHandoffCart } from './cookie';
+describe('checkout cart handoff', function () {
+  it('reads an id and token from the checkout query', function () {
+    expect(readHandoffCart('?cart=530141,AbcdEfgh_123-xyz')).toEqual(['530141', 'AbcdEfgh_123-xyz']);
+  });
+  it('reads a query where the comma was encoded', function () {
+    expect(readHandoffCart('?cart=5%2Cabcdefgh')).toEqual(['5', 'abcdefgh']);
+  });
+  it('ignores a cart value that is not an id and token', function () {
+    expect(readHandoffCart('?cart=530141')).toBeNull();
+    expect(readHandoffCart('?cart=nope,short')).toBeNull();
+    expect(readHandoffCart('')).toBeNull();
+  });
+});

package/lib/CartProvider.js

@@ -431,6 +431,7 @@ var CartProvider = function CartProvider(_ref) {
     _useState16 = _slicedToArray(_useState15, 2),
     cartSettingsInvalid = _useState16[0],
     setCartSettingsInvalid = _useState16[1];
+  var appliedHandoffCart = (0, _react.useRef)(null);
   function attachSavedClientIfNeeded(_x) {
     return _attachSavedClientIfNeeded.apply(this, arguments);
   } // Create cart and save cart cookie
@@ -560,7 +561,8 @@ var CartProvider = function CartProvider(_ref) {
   }
   function getCart(_x3) {
     return _getCart.apply(this, arguments);
-  }
+  } // A checkout link can name the cart. Remember it once, then keep using the cookie
+  // so a later refetch does not put that cart back after the shopper replaced it.
   function _getCart() {
     _getCart = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(cartIdAndToken) {
       var id, _cart2, cartJson, isTest, jobSource, saved, _t4;
@@ -640,28 +642,73 @@ var CartProvider = function CartProvider(_ref) {
     }));
     return _getCart.apply(this, arguments);
   }
+  function adoptHandoffCart() {
+    return _adoptHandoffCart.apply(this, arguments);
+  }
+  function _adoptHandoffCart() {
+    _adoptHandoffCart = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
+      var raw, handoff;
+      return _regenerator().w(function (_context4) {
+        while (1) switch (_context4.n) {
+          case 0:
+            if (!(typeof window === 'undefined' || !domainId)) {
+              _context4.n = 1;
+              break;
+            }
+            return _context4.a(2);
+          case 1:
+            raw = new URLSearchParams(window.location.search).get('cart');
+            if (!(!raw || raw === appliedHandoffCart.current)) {
+              _context4.n = 2;
+              break;
+            }
+            return _context4.a(2);
+          case 2:
+            handoff = (0, _cookie.readHandoffCart)(window.location.search);
+            if (handoff) {
+              _context4.n = 3;
+              break;
+            }
+            return _context4.a(2);
+          case 3:
+            appliedHandoffCart.current = raw;
+            _context4.n = 4;
+            return (0, _cookie.setCartCookie)(Number(domainId), {
+              id: handoff[0],
+              token: handoff[1]
+            });
+          case 4:
+            return _context4.a(2);
+        }
+      }, _callee4);
+    }));
+    return _adoptHandoffCart.apply(this, arguments);
+  }
   function actionGetMerchiCart() {
     return _actionGetMerchiCart.apply(this, arguments);
   }
   function _actionGetMerchiCart() {
-    _actionGetMerchiCart = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
+    _actionGetMerchiCart = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
       var cartIdAndToken;
-      return _regenerator().w(function (_context4) {
-        while (1) switch (_context4.n) {
+      return _regenerator().w(function (_context5) {
+        while (1) switch (_context5.n) {
           case 0:
-            _context4.n = 1;
-            return (0, _cookie.getCartCookie)(domainId);
+            _context5.n = 1;
+            return adoptHandoffCart();
           case 1:
-            cartIdAndToken = _context4.v;
+            _context5.n = 2;
+            return (0, _cookie.getCartCookie)(domainId);
+          case 2:
+            cartIdAndToken = _context5.v;
             if (cartIdAndToken) {
               getCart(cartIdAndToken);
             } else {
               createCartAndCookie();
             }
-          case 2:
-            return _context4.a(2);
+          case 3:
+            return _context5.a(2);
         }
-      }, _callee4);
+      }, _callee5);
     }));
     return _actionGetMerchiCart.apply(this, arguments);
   }
@@ -669,19 +716,19 @@ var CartProvider = function CartProvider(_ref) {
     return _clearCart.apply(this, arguments);
   }
   function _clearCart() {
-    _clearCart = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(callback) {
-      return _regenerator().w(function (_context5) {
-        while (1) switch (_context5.n) {
+    _clearCart = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(callback) {
+      return _regenerator().w(function (_context6) {
+        while (1) switch (_context6.n) {
           case 0:
-            _context5.n = 1;
+            _context6.n = 1;
             return createCartAndCookie();
           case 1:
             if (callback) callback();
             closeClearCart();
           case 2:
-            return _context5.a(2);
+            return _context6.a(2);
         }
-      }, _callee5);
+      }, _callee6);
     }));
     return _clearCart.apply(this, arguments);
   }
@@ -693,55 +740,55 @@ var CartProvider = function CartProvider(_ref) {
     return _updateCartShipmentAddress.apply(this, arguments);
   }
   function _updateCartShipmentAddress() {
-    _updateCartShipmentAddress = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6(address) {
+    _updateCartShipmentAddress = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7(address) {
       var token, addressFields, receiverAddress, cartEnt, cartJson, query, cartWithShipmentGroups, _t5;
-      return _regenerator().w(function (_context6) {
-        while (1) switch (_context6.p = _context6.n) {
+      return _regenerator().w(function (_context7) {
+        while (1) switch (_context7.p = _context7.n) {
           case 0:
-            _context6.n = 1;
+            _context7.n = 1;
             return (0, _cookie.getCartCookieToken)(domainId);
           case 1:
-            token = _context6.v;
+            token = _context7.v;
             addressFields = (0, _address.sanitizeAddressFields)(address);
             receiverAddress = (0, _address.makeAddress)(addressFields, true);
             cartEnt = (0, _cart3.makeCart)(cart, false, token);
             setFetchingShipmentGroups(true);
-            _context6.p = 2;
+            _context7.p = 2;
             cartEnt.receiverAddress = receiverAddress;
-            _context6.n = 3;
+            _context7.n = 3;
             return cartEnt.save({
               embed: _helpers.cartEmbed
             });
           case 3:
-            cartEnt = _context6.v;
+            cartEnt = _context7.v;
             cartJson = cartEnt.toJson();
             (0, _local_storage.saveCheckoutAddress)(domainId, addressFields);
             query = [];
             query.push(['cart_token', cart.token]);
-            _context6.n = 4;
+            _context7.n = 4;
             return merchi.authenticatedFetch("/generate-cart-shipment-quotes/".concat(cart.id, "/"), {
               method: 'GET',
               query: query
             });
           case 4:
-            cartWithShipmentGroups = _context6.v;
+            cartWithShipmentGroups = _context7.v;
             setCart(_objectSpread(_objectSpread({}, cartJson), {}, {
               shipmentGroups: cartWithShipmentGroups.shipmentGroups || []
             }));
-            _context6.n = 6;
+            _context7.n = 6;
             break;
           case 5:
-            _context6.p = 5;
-            _t5 = _context6.v;
+            _context7.p = 5;
+            _t5 = _context7.v;
             alertError(_t5.errorMessage || _t5.message || 'Unable to set address');
           case 6:
-            _context6.p = 6;
+            _context7.p = 6;
             setFetchingShipmentGroups(false);
-            return _context6.f(6);
+            return _context7.f(6);
           case 7:
-            return _context6.a(2);
+            return _context7.a(2);
         }
-      }, _callee6, null, [[2, 5, 6, 7]]);
+      }, _callee7, null, [[2, 5, 6, 7]]);
     }));
     return _updateCartShipmentAddress.apply(this, arguments);
   }
@@ -749,39 +796,39 @@ var CartProvider = function CartProvider(_ref) {
     return _getCartShipmentOptions.apply(this, arguments);
   }
   function _getCartShipmentOptions() {
-    _getCartShipmentOptions = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7() {
+    _getCartShipmentOptions = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8() {
       var query, cartWithGroups, _t6;
-      return _regenerator().w(function (_context7) {
-        while (1) switch (_context7.p = _context7.n) {
+      return _regenerator().w(function (_context8) {
+        while (1) switch (_context8.p = _context8.n) {
           case 0:
             setFetchingShipmentGroups(true);
-            _context7.p = 1;
+            _context8.p = 1;
             query = [];
             query.push(['cart_token', cart.token]);
-            _context7.n = 2;
+            _context8.n = 2;
             return merchi.authenticatedFetch("/generate-cart-shipment-quotes/".concat(cart.id, "/"), {
               method: 'GET',
               query: query
             });
           case 2:
-            cartWithGroups = _context7.v;
+            cartWithGroups = _context8.v;
             setCart(_objectSpread(_objectSpread({}, cart), {}, {
               shipmentGroups: cartWithGroups.shipmentGroups || []
             }));
-            _context7.n = 4;
+            _context8.n = 4;
             break;
           case 3:
-            _context7.p = 3;
-            _t6 = _context7.v;
+            _context8.p = 3;
+            _t6 = _context8.v;
             alertError(_t6.errorMessage || _t6.message || 'Unable to fetch shipment options');
           case 4:
-            _context7.p = 4;
+            _context8.p = 4;
             setFetchingShipmentGroups(false);
-            return _context7.f(4);
+            return _context8.f(4);
           case 5:
-            return _context7.a(2);
+            return _context8.a(2);
         }
-      }, _callee7, null, [[1, 3, 4, 5]]);
+      }, _callee8, null, [[1, 3, 4, 5]]);
     }));
     return _getCartShipmentOptions.apply(this, arguments);
   }
@@ -789,14 +836,14 @@ var CartProvider = function CartProvider(_ref) {
     return _getMerchiCartValues.apply(this, arguments);
   }
   function _getMerchiCartValues() {
-    _getMerchiCartValues = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8() {
+    _getMerchiCartValues = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee9() {
       var _ref2, cartItems, currency, subtotalCost, taxAmount, totalCost, cartItemsCount;
-      return _regenerator().w(function (_context8) {
-        while (1) switch (_context8.n) {
+      return _regenerator().w(function (_context9) {
+        while (1) switch (_context9.n) {
           case 0:
             _ref2 = cart, cartItems = _ref2.cartItems, currency = _ref2.currency, subtotalCost = _ref2.subtotalCost, taxAmount = _ref2.taxAmount, totalCost = _ref2.totalCost;
             cartItemsCount = cartItems ? cartItems.length : 0;
-            return _context8.a(2, {
+            return _context9.a(2, {
               cart: cart,
               cartItemsCount: cartItemsCount,
               currency: currency || '',
@@ -805,7 +852,7 @@ var CartProvider = function CartProvider(_ref) {
               totalCost: totalCost || 0
             });
         }
-      }, _callee8);
+      }, _callee9);
     }));
     return _getMerchiCartValues.apply(this, arguments);
   }
@@ -813,13 +860,13 @@ var CartProvider = function CartProvider(_ref) {
     return _isMerchiCartFetching.apply(this, arguments);
   }
   function _isMerchiCartFetching() {
-    _isMerchiCartFetching = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee9() {
-      return _regenerator().w(function (_context9) {
-        while (1) switch (_context9.n) {
+    _isMerchiCartFetching = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee0() {
+      return _regenerator().w(function (_context0) {
+        while (1) switch (_context0.n) {
           case 0:
-            return _context9.a(2, fetchingCart);
+            return _context0.a(2, fetchingCart);
         }
-      }, _callee9);
+      }, _callee0);
     }));
     return _isMerchiCartFetching.apply(this, arguments);
   }
@@ -833,14 +880,14 @@ var CartProvider = function CartProvider(_ref) {
     return _actionFetchTheme.apply(this, arguments);
   }
   function _actionFetchTheme() {
-    _actionFetchTheme = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee0() {
+    _actionFetchTheme = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee1() {
       var domain, theme, _t7;
-      return _regenerator().w(function (_context0) {
-        while (1) switch (_context0.p = _context0.n) {
+      return _regenerator().w(function (_context1) {
+        while (1) switch (_context1.p = _context1.n) {
           case 0:
             setLoading(true);
-            _context0.p = 1;
-            _context0.n = 2;
+            _context1.p = 1;
+            _context1.n = 2;
             return merchi.Domain.get(domainId, {
               embed: {
                 activeTheme: {
@@ -849,24 +896,24 @@ var CartProvider = function CartProvider(_ref) {
               }
             });
           case 2:
-            domain = _context0.v;
+            domain = _context1.v;
             theme = domain.activeTheme;
-            _context0.n = 3;
+            _context1.n = 3;
             return (0, _helpers.appendStyleSheetText)(theme.mainCss, function () {
               return setLoading(false);
             });
           case 3:
-            _context0.n = 5;
+            _context1.n = 5;
             break;
           case 4:
-            _context0.p = 4;
-            _t7 = _context0.v;
+            _context1.p = 4;
+            _t7 = _context1.v;
             alertError(_t7.errorMessage || _t7.message || 'Error fetching domain theme.');
             setLoading(false);
           case 5:
-            return _context0.a(2);
+            return _context1.a(2);
         }
-      }, _callee0, null, [[1, 4]]);
+      }, _callee1, null, [[1, 4]]);
     }));
     return _actionFetchTheme.apply(this, arguments);
   }
@@ -874,18 +921,18 @@ var CartProvider = function CartProvider(_ref) {
     return _setCartComplete.apply(this, arguments);
   }
   function _setCartComplete() {
-    _setCartComplete = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee1() {
-      return _regenerator().w(function (_context1) {
-        while (1) switch (_context1.n) {
+    _setCartComplete = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee10() {
+      return _regenerator().w(function (_context10) {
+        while (1) switch (_context10.n) {
           case 0:
-            _context1.n = 1;
+            _context10.n = 1;
             return createCartAndCookie();
           case 1:
             location.reload();
           case 2:
-            return _context1.a(2);
+            return _context10.a(2);
         }
-      }, _callee1);
+      }, _callee10);
     }));
     return _setCartComplete.apply(this, arguments);
   }
@@ -893,16 +940,16 @@ var CartProvider = function CartProvider(_ref) {
     return _refetchCart.apply(this, arguments);
   }
   function _refetchCart() {
-    _refetchCart = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee10() {
-      return _regenerator().w(function (_context10) {
-        while (1) switch (_context10.n) {
+    _refetchCart = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee11() {
+      return _regenerator().w(function (_context11) {
+        while (1) switch (_context11.n) {
           case 0:
-            _context10.n = 1;
+            _context11.n = 1;
             return actionGetMerchiCart();
           case 1:
-            return _context10.a(2);
+            return _context11.a(2);
         }
-      }, _callee10);
+      }, _callee11);
     }));
     return _refetchCart.apply(this, arguments);
   }
@@ -918,17 +965,17 @@ var CartProvider = function CartProvider(_ref) {
     return _addCartItem.apply(this, arguments);
   }
   function _addCartItem() {
-    _addCartItem = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee11(jobJson, onSuccess, onError) {
+    _addCartItem = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee12(jobJson, onSuccess, onError) {
       var jobEnt, cartToken, cartEnt, cartItemEnt, cartItemProduct, item, itemJson, _t8;
-      return _regenerator().w(function (_context11) {
-        while (1) switch (_context11.p = _context11.n) {
+      return _regenerator().w(function (_context12) {
+        while (1) switch (_context12.p = _context12.n) {
           case 0:
             setFetchingCart(true);
             jobEnt = (0, _job.makeJob)(jobJson, true);
-            _context11.n = 1;
+            _context12.n = 1;
             return (0, _cookie.getCartCookieToken)(domainId);
           case 1:
-            cartToken = _context11.v;
+            cartToken = _context12.v;
             cartEnt = (0, _cart3.makeCart)(cart, false, cartToken);
             cartItemEnt = (0, _cart3.makeCartItem)({}, true);
             cartItemProduct = (0, _product.makeProduct)({
@@ -943,30 +990,30 @@ var CartProvider = function CartProvider(_ref) {
             cartItemEnt.ownDrafts = jobEnt.ownDrafts;
             cartItemEnt.clientFiles = jobEnt.clientFiles;
             cartItemEnt.tags = jobEnt.tags;
-            _context11.p = 2;
-            _context11.n = 3;
+            _context12.p = 2;
+            _context12.n = 3;
             return cartItemEnt.create();
           case 3:
-            item = _context11.v;
-            _context11.n = 4;
+            item = _context12.v;
+            _context12.n = 4;
             return item.toJson();
           case 4:
-            itemJson = _context11.v;
+            itemJson = _context12.v;
             onSuccess(itemJson);
-            _context11.n = 6;
+            _context12.n = 6;
             break;
           case 5:
-            _context11.p = 5;
-            _t8 = _context11.v;
+            _context12.p = 5;
+            _t8 = _context12.v;
             onError(_t8);
           case 6:
-            _context11.p = 6;
+            _context12.p = 6;
             setFetchingCart(false);
-            return _context11.f(6);
+            return _context12.f(6);
           case 7:
-            return _context11.a(2);
+            return _context12.a(2);
         }
-      }, _callee11, null, [[2, 5, 6, 7]]);
+      }, _callee12, null, [[2, 5, 6, 7]]);
     }));
     return _addCartItem.apply(this, arguments);
   }

package/lib/utilities/cookie.d.ts

@@ -1,3 +1,4 @@
+export declare function readHandoffCart(search: string): string[] | null;
 export declare function getCookie(name: string, defaultValue: any): Promise<any>;
 export declare function getCartCookie(domainId: number | string, isTest?: boolean): Promise<string[]>;
 export declare function getCartCookieToken(domainId: number | string, isTest?: boolean): Promise<string>;

package/lib/utilities/cookie.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getCartCookie = getCartCookie;
 exports.getCartCookieToken = getCartCookieToken;
 exports.getCookie = getCookie;
+exports.readHandoffCart = readHandoffCart;
 exports.setCartCookie = void 0;
 var _browserOrNode = require("browser-or-node");
 var _test_checkout = require("./test_checkout");
@@ -13,6 +14,14 @@ function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present,
 function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
 function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
 function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+// id,token from a checkout link. The token is url-safe and has no padding.
+var HANDOFF_CART = /^\d+,[A-Za-z0-9_-]{8,}$/;
+function readHandoffCart(search) {
+  var cart = new URLSearchParams(search).get("cart");
+  if (!cart || !HANDOFF_CART.test(cart)) return null;
+  var comma = cart.indexOf(",");
+  return [cart.slice(0, comma), cart.slice(comma + 1)];
+}
 function getCookie(_x, _x2) {
   return _getCookie.apply(this, arguments);
 }

package/lib/utilities/cookie.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@merchi/cart",
-  "version": "1.4.18",
+  "version": "1.4.20",
   "description": "Merchi's cart",
   "source": "src/index.ts",
   "main": "lib/index.js",
@@ -98,9 +98,9 @@
     "browser-or-node": "^3.0.0-pre.0",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
-    "@merchi/product-form": "^1.19.25",
-    "@merchi/product-form-sdk": "^1.0.20",
-    "@merchi/sdk": "^1.42.9",
+    "@merchi/product-form": "^1.19.26",
+    "@merchi/product-form-sdk": "^1.0.21",
+    "@merchi/sdk": "^1.42.10",
     "react-country-region-selector": "^3.6.1",
     "react-hook-form": "7.45.4",
     "react-icons": "^4.10.1",

package/src/CartProvider.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createContext, ReactNode, useContext, useEffect, useState } from 'react';
+import { createContext, ReactNode, useContext, useEffect, useRef, useState } from 'react';
 import { faCheckCircle, faExclamationTriangle, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import { Alert, Tab } from './types';
 import {
@@ -10,7 +10,7 @@ import {
 import { cartEmbed } from './utilities/helpers';
 import { initTabs, tabIdItems, tabShipment } from './utilities/tabs';
 import { Merchi } from '@merchi/sdk';
-import { getCartCookie, getCartCookieToken, setCartCookie } from './utilities/cookie';
+import { getCartCookie, getCartCookieToken, readHandoffCart, setCartCookie } from './utilities/cookie';
 import { makeAddress, sanitizeAddressFields } from './utilities/address';
 import { appendStyleSheetText } from './utilities/helpers';
 import { makeJob } from './utilities/job';
@@ -593,6 +593,7 @@ const CartProvider = ({
 
   const [fetchingCart, setFetchingCart] = useState(false);
   const [cartSettingsInvalid, setCartSettingsInvalid] = useState(false);
+  const appliedHandoffCart = useRef<string | null>(null);
 
   async function attachSavedClientIfNeeded(cartJson: any) {
     if (cartJson?.client?.id) {
@@ -699,7 +700,20 @@ const CartProvider = ({
     }
   }
 
+  // A checkout link can name the cart. Remember it once, then keep using the cookie
+  // so a later refetch does not put that cart back after the shopper replaced it.
+  async function adoptHandoffCart() {
+    if (typeof window === 'undefined' || !domainId) return;
+    const raw = new URLSearchParams(window.location.search).get('cart');
+    if (!raw || raw === appliedHandoffCart.current) return;
+    const handoff = readHandoffCart(window.location.search);
+    if (!handoff) return;
+    appliedHandoffCart.current = raw;
+    await setCartCookie(Number(domainId), { id: handoff[0], token: handoff[1] });
+  }
+
   async function actionGetMerchiCart() {
+    await adoptHandoffCart();
     const cartIdAndToken = await getCartCookie((domainId as number));
     if (cartIdAndToken) {
       getCart(cartIdAndToken);

package/src/utilities/cookie.test.ts

@@ -0,0 +1,20 @@
+import { readHandoffCart } from './cookie';
+
+describe('checkout cart handoff', () => {
+  it('reads an id and token from the checkout query', () => {
+    expect(readHandoffCart('?cart=530141,AbcdEfgh_123-xyz')).toEqual([
+      '530141',
+      'AbcdEfgh_123-xyz',
+    ]);
+  });
+
+  it('reads a query where the comma was encoded', () => {
+    expect(readHandoffCart('?cart=5%2Cabcdefgh')).toEqual(['5', 'abcdefgh']);
+  });
+
+  it('ignores a cart value that is not an id and token', () => {
+    expect(readHandoffCart('?cart=530141')).toBeNull();
+    expect(readHandoffCart('?cart=nope,short')).toBeNull();
+    expect(readHandoffCart('')).toBeNull();
+  });
+});

package/src/utilities/cookie.ts

@@ -1,6 +1,16 @@
 import { isBrowser } from "browser-or-node";
 import { cartCookieName, readTestCheckoutFlag } from "./test_checkout";
 
+// id,token from a checkout link. The token is url-safe and has no padding.
+const HANDOFF_CART = /^\d+,[A-Za-z0-9_-]{8,}$/;
+
+export function readHandoffCart(search: string): string[] | null {
+  const cart = new URLSearchParams(search).get("cart");
+  if (!cart || !HANDOFF_CART.test(cart)) return null;
+  const comma = cart.indexOf(",");
+  return [cart.slice(0, comma), cart.slice(comma + 1)];
+}
+
 export async function getCookie(name: string, defaultValue: any) {
   if (!isBrowser) {
     return '';