@faststore/api 1.8.22 → 1.8.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/api",
-  "version": "1.8.22",
+  "version": "1.8.23",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -45,5 +45,5 @@
   "peerDependencies": {
     "graphql": "^15.6.0"
   },
-  "gitHead": "8feb71286b28d2308d4b11b37dbb62c2d5c76838"
+  "gitHead": "a8958ead23ee3df81fbb78d35f06726e7b290874"
 }

package/src/platforms/vtex/clients/commerce/index.ts

@@ -103,6 +103,26 @@ export const VtexCommerce = (
           }
         )
       },
+      setCustomData: ({
+        id,
+        appId,
+        key,
+        value,
+      }: {
+        id: string
+        appId: string
+        key: string
+        value: string
+      }): Promise<OrderForm> => {
+        return fetchAPI(
+          `${base}/api/checkout/pub/orderForm/${id}/customData/${appId}/${key}`,
+          {
+            ...BASE_INIT,
+            body: JSON.stringify({ value }),
+            method: 'PUT',
+          }
+        )
+      },
       region: async ({
         postalCode,
         country,

package/src/platforms/vtex/clients/commerce/types/OrderForm.ts

@@ -136,7 +136,7 @@ export interface OrderForm {
   giftRegistryData: any | null
   openTextField: any | null
   invoiceData: any | null
-  customData: any | null
+  customData: OrderFormCustomData | null
   itemMetadata: {
     items: MetadataItem[]
   }
@@ -149,6 +149,14 @@ export interface OrderForm {
   itemsOrdination: any | null
 }
 
+export interface OrderFormCustomData {
+  customApps: Array<{
+    fields: Record<string, string>
+    id: string
+    major: number
+  }>
+}
+
 export interface OrderFormMarketingData {
   utmCampaign?: string
   utmMedium?: string

package/src/platforms/vtex/index.ts

@@ -25,6 +25,11 @@ export interface Options {
   // Default sales channel to use for fetching products
   channel: string
   hideUnavailableItems: boolean
+  flags?: FeatureFlags
+}
+
+interface FeatureFlags {
+  enableOrderFormSync?: boolean
 }
 
 export interface Context {
@@ -38,6 +43,7 @@ export interface Context {
    * */
   storage: {
     channel: Required<Channel>
+    flags: FeatureFlags
   }
   headers: Record<string, string>
 }
@@ -68,6 +74,7 @@ const Resolvers = {
 export const getContextFactory = (options: Options) => (ctx: any): Context => {
   ctx.storage = {
     channel: ChannelMarshal.parse(options.channel),
+    flags: options.flags ?? {},
   }
   ctx.clients = getClients(options, ctx)
   ctx.loaders = getLoaders(options, ctx)

package/src/platforms/vtex/resolvers/validateCart.ts

@@ -1,14 +1,15 @@
 import deepEquals from 'fast-deep-equal'
 
+import { md5 } from '../utils/md5'
 import type {
-  IStoreOrder,
   IStoreCart,
   IStoreOffer,
+  IStoreOrder,
 } from '../../../__generated__/schema'
 import type {
   OrderForm,
-  OrderFormItem,
   OrderFormInputItem,
+  OrderFormItem,
 } from '../clients/commerce/types/OrderForm'
 import type { Context } from '..'
 
@@ -69,6 +70,70 @@ const equals = (storeOrder: IStoreOrder, orderForm: OrderForm) => {
   return isSameOrder && orderItemsAreSync
 }
 
+const orderFormToCart = (
+  form: OrderForm,
+  skuLoader: Context['loaders']['skuLoader']
+) => {
+  return {
+    order: {
+      orderNumber: form.orderFormId,
+      acceptedOffer: form.items.map((item) => ({
+        ...item,
+        product: skuLoader.load([{ key: 'id', value: item.id }]), // TODO: add channel
+      })),
+    },
+    messages: form.messages.map(({ text, status }) => ({
+      text,
+      status: status.toUpperCase(),
+    })),
+  }
+}
+
+const getOrderFormEtag = ({ items }: OrderForm) => md5(JSON.stringify(items))
+
+const setOrderFormEtag = async (
+  form: OrderForm,
+  commerce: Context['clients']['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: OrderForm) => {
+  const faststoreData = form.customData?.customApps.find(
+    (app) => app.id === 'faststore'
+  )
+
+  const oldEtag = 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
@@ -87,6 +152,7 @@ export const validateCart = async (
   { cart: { order } }: { cart: IStoreCart },
   ctx: Context
 ) => {
+  const { enableOrderFormSync } = ctx.storage.flags
   const { orderNumber, acceptedOffer } = order
   const {
     clients: { commerce },
@@ -98,6 +164,19 @@ export const validateCart = async (
     id: orderNumber,
   })
 
+  // 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))
@@ -139,28 +218,22 @@ export const validateCart = async (
   }
 
   // Step4: Apply delta changes to order form
-  const updatedOrderForm = await commerce.checkout.updateOrderFormItems({
-    id: orderForm.orderFormId,
-    orderItems: changes,
-  })
+  const updatedOrderForm = await commerce.checkout
+    // update orderForm items
+    .updateOrderFormItems({
+      id: orderForm.orderFormId,
+      orderItems: changes,
+    })
+    // 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
-  return {
-    order: {
-      orderNumber: updatedOrderForm.orderFormId,
-      acceptedOffer: updatedOrderForm.items.map((item) => ({
-        ...item,
-        product: skuLoader.load([{ key: 'id', value: item.id }]), // TODO: add channel
-      })),
-    },
-    messages: updatedOrderForm.messages.map(({ text, status }) => ({
-      text,
-      status: status.toUpperCase(),
-    })),
-  }
+  // Step6: There were changes, convert orderForm to StoreCart
+  return orderFormToCart(updatedOrderForm, skuLoader)
 }

package/src/platforms/vtex/utils/md5.ts

@@ -0,0 +1,4 @@
+import crypto from 'crypto'
+
+export const md5 = (payload: string) =>
+  crypto.createHash('md5').update(payload).digest('hex')