@faststore/api 1.8.20 → 1.8.23

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 1.8.23 (2022-05-17)
+
+
+### Features
+
+* Sync Cart with Checkout ([#1299](https://github.com/vtex/faststore/issues/1299)) ([62e8f56](https://github.com/vtex/faststore/commit/62e8f56b31c6bb6cf7260749a90ebef8aba9982b))
+
+
+
+
+
+## 1.8.22 (2022-05-17)
+
+**Note:** Version bump only for package @faststore/api
+
+
+
+
+
+## 1.8.21 (2022-05-16)
+
+**Note:** Version bump only for package @faststore/api
+
+
+
+
+
 ## 1.8.20 (2022-05-16)
 
 **Note:** Version bump only for package @faststore/api

package/dist/api.cjs.development.js

@@ -9,6 +9,7 @@ var fetch = _interopDefault(require('isomorphic-unfetch'));
 var DataLoader = _interopDefault(require('dataloader'));
 var pLimit = _interopDefault(require('p-limit'));
 var deepEquals = _interopDefault(require('fast-deep-equal'));
+var crypto = _interopDefault(require('crypto'));
 var graphql = require('graphql');
 
 const fetchAPI = async (info, init) => {
@@ -88,6 +89,19 @@ const VtexCommerce = ({
           method: 'PATCH'
         });
       },
+      setCustomData: ({
+        id,
+        appId,
+        key,
+        value
+      }) => {
+        return fetchAPI(`${base}/api/checkout/pub/orderForm/${id}/customData/${appId}/${key}`, { ...BASE_INIT,
+          body: JSON.stringify({
+            value
+          }),
+          method: 'PUT'
+        });
+      },
       region: async ({
         postalCode,
         country,
@@ -616,6 +630,8 @@ const StoreFacetValue = {
   }) => quantity
 };
 
+const md5 = payload => crypto.createHash('md5').update(payload).digest('hex');
+
 const getId = item => [item.itemOffered.sku, item.seller.identifier, item.price].join('::');
 
 const orderFormItemToOffer = (item, index) => ({
@@ -662,6 +678,66 @@ const equals = (storeOrder, orderForm) => {
   const orderItemsAreSync = deepEquals(orderFormItems, storeOrderItems);
   return isSameOrder && orderItemsAreSync;
 };
+
+const orderFormToCart = (form, skuLoader) => {
+  return {
+    order: {
+      orderNumber: form.orderFormId,
+      acceptedOffer: form.items.map(item => ({ ...item,
+        product: skuLoader.load([{
+          key: 'id',
+          value: item.id
+        }])
+      }))
+    },
+    messages: form.messages.map(({
+      text,
+      status
+    }) => ({
+      text,
+      status: status.toUpperCase()
+    }))
+  };
+};
+
+const getOrderFormEtag = ({
+  items
+}) => md5(JSON.stringify(items));
+
+const setOrderFormEtag = async (form, commerce) => {
+  try {
+    const orderForm = await commerce.checkout.setCustomData({
+      id: form.orderFormId,
+      appId: 'faststore',
+      key: 'cartEtag',
+      value: getOrderFormEtag(form)
+    });
+    return orderForm;
+  } catch (err) {
+    console.error('Error while setting custom data to orderForm.\n Make sure to add the following custom app to the orderForm: \n{"fields":["cartEtag"],"id":"faststore","major":1}.\n More info at: https://developers.vtex.com/vtex-rest-api/docs/customizable-fields-with-checkout-api');
+    throw err;
+  }
+};
+/**
+ * Checks if cartEtag stored on customData is up to date
+ * @description If cartEtag is not up to date, this means that
+ * another system changed the cart, like Checkout UI or Order Placed
+ */
+
+
+const isOrderFormStale = form => {
+  var _form$customData, _faststoreData$fields;
+
+  const faststoreData = (_form$customData = form.customData) == null ? void 0 : _form$customData.customApps.find(app => app.id === 'faststore');
+  const oldEtag = faststoreData == null ? void 0 : (_faststoreData$fields = faststoreData.fields) == null ? void 0 : _faststoreData$fields.cartEtag;
+
+  if (oldEtag == null) {
+    return true;
+  }
+
+  const newEtag = getOrderFormEtag(form);
+  return newEtag !== oldEtag;
+};
 /**
  * This resolver implements the optimistic cart behavior. The main idea in here
  * is that we receive a cart from the UI (as query params) and we validate it with
@@ -682,6 +758,9 @@ const validateCart = async (_, {
     order
   }
 }, ctx) => {
+  const {
+    enableOrderFormSync
+  } = ctx.storage.flags;
   const {
     orderNumber,
     acceptedOffer
@@ -697,7 +776,19 @@ const validateCart = async (_, {
 
   const orderForm = await commerce.checkout.orderForm({
     id: orderNumber
-  }); // Step2: Process items from both browser and checkout so they have the same shape
+  }); // Step1.5: Check if another system changed the orderForm with this orderNumber
+  // If so, this means the user interacted with this cart elsewhere and expects
+  // to see this new cart state instead of what's stored on the user's browser.
+
+  if (enableOrderFormSync === true) {
+    const isStale = isOrderFormStale(orderForm);
+
+    if (isStale === true && orderNumber) {
+      const newOrderForm = await setOrderFormEtag(orderForm, commerce);
+      return orderFormToCart(newOrderForm, skuLoader);
+    }
+  } // Step2: Process items from both browser and checkout so they have the same shape
+
 
   const browserItemsById = groupById(acceptedOffer);
   const originItemsById = groupById(orderForm.items.map(orderFormItemToOffer));
@@ -735,34 +826,19 @@ const validateCart = async (_, {
   } // Step4: Apply delta changes to order form
 
 
-  const updatedOrderForm = await commerce.checkout.updateOrderFormItems({
+  const updatedOrderForm = await commerce.checkout // update orderForm items
+  .updateOrderFormItems({
     id: orderForm.orderFormId,
     orderItems: changes
-  }); // Step5: If no changes detected before/after updating orderForm, the order is validated
+  }) // update orderForm etag so we know last time we touched this orderForm
+  .then(form => enableOrderFormSync ? setOrderFormEtag(form, commerce) : form); // Step5: If no changes detected before/after updating orderForm, the order is validated
 
   if (equals(order, updatedOrderForm)) {
     return null;
-  } // Step6: There were changes, convert orderForm to StoreOrder
+  } // Step6: There were changes, convert orderForm to StoreCart
 
 
-  return {
-    order: {
-      orderNumber: updatedOrderForm.orderFormId,
-      acceptedOffer: updatedOrderForm.items.map(item => ({ ...item,
-        product: skuLoader.load([{
-          key: 'id',
-          value: item.id
-        }])
-      }))
-    },
-    messages: updatedOrderForm.messages.map(({
-      text,
-      status
-    }) => ({
-      text,
-      status: status.toUpperCase()
-    }))
-  };
+  return orderFormToCart(updatedOrderForm, skuLoader);
 };
 
 class ChannelMarshal {
@@ -1403,8 +1479,11 @@ const Resolvers = {
   Mutation
 };
 const getContextFactory = options => ctx => {
+  var _options$flags;
+
   ctx.storage = {
-    channel: ChannelMarshal.parse(options.channel)
+    channel: ChannelMarshal.parse(options.channel),
+    flags: (_options$flags = options.flags) != null ? _options$flags : {}
   };
   ctx.clients = getClients(options, ctx);
   ctx.loaders = getLoaders(options, ctx);