@redotech/redo-hydrogen 1.2.0 → 1.2.2

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@redotech/redo-hydrogen",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "Utilities to enable and disable Redo coverage on Hydrogen stores",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
-  "types": "dist/index.d.ts",
+  "types": "dist/types.d.ts",
   "scripts": {
     "dev": "rollup -c --watch --bundleConfigAsCjs"
   },

package/src/providers/redo-coverage-client.tsx

@@ -1,9 +1,9 @@
 import { useFetcher } from "@remix-run/react";
 import { CartReturn } from "@shopify/hydrogen";
-import { createContext, ReactNode, useContext, useEffect, useState } from "react";
+import { createContext, ReactNode, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { CartProductVariantFragment, CartAttributeKey, CartInfoToEnable, RedoContextValue, RedoCoverageClient, RedoError, RedoErrorType } from "../types";
 import { REDO_PUBLIC_API_HOSTNAME } from "../utils/security";
-import { addProductToCartIfNeeded, removeProductFromCartIfNeeded, setCartRedoEnabledAttribute, useFetcherWithPromise, isCartWithActionsDocs, getCartLines } from "../utils/cart";
+import { addProductToCartIfNeeded, removeProductFromCartIfNeeded, setCartRedoEnabledAttribute, useFetcherWithPromise, isCartWithActionsDocs, getCartLines, useWaitCartIdle } from "../utils/cart";
 import { CartWithActionsDocs } from "@shopify/hydrogen-react/dist/types/cart-types";
 
 const DEFAULT_REDO_CONTEXT_VALUE: RedoContextValue = {
@@ -141,17 +141,19 @@ const RedoProvider = ({
 const useRedoCoverageClient = (): RedoCoverageClient => {
   const redoContext = useContext(RedoContext);
   const fetcher = useFetcherWithPromise();
+  const waitCartIdle = useWaitCartIdle(redoContext.cart);
 
   useEffect(() => {
     if(redoContext.loading || !redoContext.cartInfoToEnable) {
       return;
     }
     removeProductFromCartIfNeeded({
-      fetcher,
       cart: redoContext.cart,
+      fetcher,
+      waitCartIdle,
       cartInfoToEnable: redoContext.cartInfoToEnable
     });
-  }, [redoContext.loading])
+  }, [redoContext.loading]);
   
   return {
     enable: async () => {
@@ -160,12 +162,14 @@ const useRedoCoverageClient = (): RedoCoverageClient => {
       }
       let addProductResult = await addProductToCartIfNeeded({
         fetcher,
+        waitCartIdle,
         cart: redoContext.cart,
         cartInfoToEnable: redoContext.cartInfoToEnable,
       });
       await setCartRedoEnabledAttribute({
         cart: redoContext.cart,
         fetcher,
+        waitCartIdle,
         cartInfoToEnable: redoContext.cartInfoToEnable,
         enabled: true
       });
@@ -177,12 +181,14 @@ const useRedoCoverageClient = (): RedoCoverageClient => {
       }
       await removeProductFromCartIfNeeded({
         fetcher,
+        waitCartIdle,
         cart: redoContext.cart,
         cartInfoToEnable: redoContext.cartInfoToEnable
       });
       await setCartRedoEnabledAttribute({
         cart: redoContext.cart,
         fetcher,
+        waitCartIdle,
         cartInfoToEnable: redoContext.cartInfoToEnable,
         enabled: false
       });

package/src/utils/cart.ts

@@ -2,7 +2,7 @@ import { FetcherWithComponents, useFetcher } from "@remix-run/react";
 import { CartInfoToEnable } from "../types";
 import { CartForm, CartReturn } from "@shopify/hydrogen";
 import type { AppData } from '@remix-run/react/dist/data';
-import React from 'react'
+import React, { useCallback, useEffect, useRef } from 'react'
 import { CartWithActionsDocs } from "@shopify/hydrogen-react/dist/types/cart-types";
 import { CartLine, ComponentizableCartLine } from "@shopify/hydrogen-react/storefront-api-types";
 
@@ -20,28 +20,58 @@ const getCartLines = (cart: CartReturn | CartWithActionsDocs): Array<CartLine |
   }
 }
 
-const waitUntilCartIdle = (cart: CartWithActionsDocs): Promise<void> => {
+const isRedoInCart = ({
+  cart
+}: {
+  cart: CartReturn | CartWithActionsDocs
+}): boolean => {
+  if(!cart) {
+    return false;
+  }
+
+  return getCartLines(cart).some((cartLine) => {
+    return cartLine.merchandise.product.vendor === 're:do';
+  });
+}
+
+const waitForConditionsMetOrTimeout = ({
+  conditions,
+  timeoutMs
+}: {
+  conditions: (() => boolean)[];
+  timeoutMs: number;
+}): Promise<boolean> => {
   return new Promise((resolve, reject) => {
+    let start = Date.now();
     let interval = setInterval(() => {
-      if(cart.status === 'idle') {
+      if((Date.now() - start) > timeoutMs) {
         clearInterval(interval);
-        return resolve();
+        return resolve(false);
+      }
+
+      let conditionsMet = conditions.every((conditionCallback) => conditionCallback());
+
+      if(conditionsMet) {
+        clearInterval(interval);
+        return resolve(true);
       }
     }, 100);
-  });
+  })
 }
 
 const addProductToCartIfNeeded = async ({
   cart,
   fetcher,
+  waitCartIdle,
   cartInfoToEnable
 }: {
   cart: CartReturn | CartWithActionsDocs | undefined,
   fetcher: FetcherWithComponents<unknown>,
+  waitCartIdle: WaitCartIdleCallback;
   cartInfoToEnable: CartInfoToEnable
 }) => {
   if(!cart) {
-    return await addProductToCart({ cart, fetcher, cartInfoToEnable });
+    return await addProductToCart({ cart, fetcher, waitCartIdle, cartInfoToEnable });
   }
 
   const redoProductsInCart = getCartLines(cart).filter((cartLine) => {
@@ -51,15 +81,15 @@ const addProductToCartIfNeeded = async ({
     return cartLine.merchandise.id === `gid://shopify/ProductVariant/${cartInfoToEnable.variantId}`;
   });
   if(redoProductsInCart.length === 0) {
-    return await addProductToCart({ cart, fetcher, cartInfoToEnable });
+    return await addProductToCart({ cart, fetcher, waitCartIdle, cartInfoToEnable });
   } else if (redoProductsInCart.length === 1 && correctRedoProductInCart.length === 1 && correctRedoProductInCart[0].quantity === 1) {
     // No action needed
     return;
   } else {
     let isSuccess = true;
 
-    await removeLinesFromCart({ cart, fetcher, lineIds: redoProductsInCart.map((cartLine) => cartLine.id) });
-    await addProductToCart({ cart, fetcher, cartInfoToEnable });
+    await removeLinesFromCart({ cart, fetcher, waitCartIdle, lineIds: redoProductsInCart.map((cartLine) => cartLine.id) });
+    await addProductToCart({ cart, fetcher, waitCartIdle, cartInfoToEnable });
 
     return;
   }
@@ -68,10 +98,12 @@ const addProductToCartIfNeeded = async ({
 const removeLinesFromCart = async ({
   cart,
   fetcher,
+  waitCartIdle,
   lineIds
 }: {
   cart: CartReturn | CartWithActionsDocs | undefined;
   fetcher: FetcherWithComponents<unknown>;
+  waitCartIdle: WaitCartIdleCallback;
   lineIds: string[];
 }) => {
   const formInput = {
@@ -83,7 +115,7 @@ const removeLinesFromCart = async ({
 
   if(cart && isCartWithActionsDocs(cart)) {
     cart.linesRemove(lineIds);
-    await waitUntilCartIdle(cart);
+    await waitCartIdle();
   } else {
     await fetcher.submit(
       {
@@ -97,10 +129,12 @@ const removeLinesFromCart = async ({
 const removeProductFromCartIfNeeded = async ({
   cart,
   fetcher,
+  waitCartIdle,
   cartInfoToEnable
 }: {
   cart: CartReturn | CartWithActionsDocs | undefined,
   fetcher: FetcherWithComponents<unknown>,
+  waitCartIdle: WaitCartIdleCallback
   cartInfoToEnable: CartInfoToEnable
 }) => {
   if(!cart) {
@@ -113,16 +147,18 @@ const removeProductFromCartIfNeeded = async ({
   });
 
   if(redoProductsInCart.length !== 0) {
-    await removeLinesFromCart({ cart, fetcher, lineIds: redoProductsInCart.map((cartLine) => cartLine.id) });
+    await removeLinesFromCart({ cart, fetcher, waitCartIdle, lineIds: redoProductsInCart.map((cartLine) => cartLine.id) });
   } else {
   }
 };
 
 const addProductToCart = async ({
+  waitCartIdle,
   cart,
   fetcher,
   cartInfoToEnable,
 }: {
+  waitCartIdle: WaitCartIdleCallback;
   cart: CartReturn | CartWithActionsDocs | undefined,
   fetcher: FetcherWithComponents<unknown>,
   cartInfoToEnable: CartInfoToEnable
@@ -130,7 +166,6 @@ const addProductToCart = async ({
   const redoProductLine = {
     "merchandiseId": `gid://shopify/ProductVariant/${cartInfoToEnable.variantId}`,
     "quantity": 1,
-    "selectedVariant": cartInfoToEnable.selectedVariant
   };
 
   const formInput = {
@@ -144,7 +179,7 @@ const addProductToCart = async ({
 
   if(cart && isCartWithActionsDocs(cart)) {
     cart.linesAdd([redoProductLine]);
-    await waitUntilCartIdle(cart);
+    await waitCartIdle();
   } else {
     await fetcher.submit(
       {
@@ -158,11 +193,13 @@ const addProductToCart = async ({
 const setCartRedoEnabledAttribute = async ({
   cart,
   fetcher,
+  waitCartIdle,
   cartInfoToEnable,
   enabled
 }: {
   cart: CartReturn | CartWithActionsDocs | undefined;
   fetcher: FetcherWithComponents<unknown>;
+  waitCartIdle: WaitCartIdleCallback;
   cartInfoToEnable: CartInfoToEnable | null;
   enabled: boolean;
 }) => {
@@ -182,7 +219,7 @@ const setCartRedoEnabledAttribute = async ({
 
   if(cart && isCartWithActionsDocs(cart)) {
     cart.cartAttributesUpdate([redoCartAttribute]);
-    await waitUntilCartIdle(cart);
+    await waitCartIdle();
   } else {
     await fetcher.submit(
       {
@@ -233,12 +270,62 @@ function useFetcherWithPromise<TData = AppData>(opts?: Parameters<typeof useFetc
   return { ...fetcher, submit }
 }
 
+type WaitCartIdleCallback = () => Promise<CartReturn | CartWithActionsDocs>;
+
+// This function allows us to await a cart idle state without breaking React rules.
+// It returns a function, which returns a promise, which will resolve once the cart value passed in reaches an idle state.
+// Not intended for use with CartReturn, but will accept that value if passed in to avoid breaking rules of hooks
+const useWaitCartIdle = (cart: CartReturn | CartWithActionsDocs | undefined) => {
+  const resolveRef = useRef<any>(null)
+  const promiseRef = useRef<any>(null)
+
+  if (!promiseRef.current) {
+    promiseRef.current = new Promise<CartReturn | CartWithActionsDocs>((resolve) => {
+      resolveRef.current = resolve
+    })
+  }
+
+  const resetResolver = useCallback(() => {
+    promiseRef.current = new Promise((resolve) => {
+      resolveRef.current = resolve
+    })
+  }, [promiseRef, resolveRef]);
+
+  const waitCartIdle = useCallback(
+    async () => {
+      return promiseRef.current
+    },
+    [cart, promiseRef]
+  )
+
+  useEffect(() => {
+    if(!cart) {
+      return;
+    }
+    if(!isCartWithActionsDocs(cart)) {
+      // Wrong type of cart. Just resolve.
+      resolveRef.current?.(cart);
+      resetResolver();
+    } else if(cart.status === 'idle') {
+      resolveRef.current?.(cart)
+      resetResolver();
+    }
+  }, [cart, resetResolver]);
+
+  return waitCartIdle;
+}
+
+export type {
+  WaitCartIdleCallback
+}
+
 export {
   DEFAULT_REDO_ENABLED_CART_ATTRIBUTE,
   addProductToCartIfNeeded,
   removeProductFromCartIfNeeded,
   setCartRedoEnabledAttribute,
   useFetcherWithPromise,
+  useWaitCartIdle,
   isCartWithActionsDocs,
   getCartLines
 };