@redotech/redo-hydrogen 1.2.1 → 1.3.0

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import { CartReturn } from '@shopify/hydrogen';
+import { CartReturn, OptimisticCart } from '@shopify/hydrogen';
 import { ReactNode, DependencyList } from 'react';
 import { CartWithActionsDocs } from '@shopify/hydrogen-react/dist/types/cart-types';
 import { ProductVariant } from '@shopify/hydrogen-react/storefront-api-types';
@@ -14,7 +14,7 @@ interface RedoCoverageClient {
     get eligible(): boolean;
     get price(): number | undefined;
     get storeId(): string | undefined;
-    get cart(): CartReturn | CartWithActionsDocs | undefined;
+    get cart(): CartReturn | CartWithActionsDocs | OptimisticCart | undefined;
     get cartProduct(): CartProductVariantFragment | undefined;
     get cartAttribute(): CartAttributeKey | undefined;
     get errors(): RedoError[] | undefined;
@@ -30,7 +30,7 @@ type RedoContextValue = {
     loading: boolean;
     storeId?: string;
     cartInfoToEnable?: CartInfoToEnable;
-    cart?: CartReturn | CartWithActionsDocs;
+    cart?: CartReturn | CartWithActionsDocs | OptimisticCart;
     errors?: RedoError[];
 };
 declare enum RedoErrorType {
@@ -45,14 +45,14 @@ type RedoError = {
 };
 
 declare const RedoProvider: ({ cart, storeId, children }: {
-    cart: CartReturn | CartWithActionsDocs;
+    cart: CartReturn | CartWithActionsDocs | OptimisticCart;
     storeId: string;
     children: ReactNode;
 }) => ReactNode;
 declare const useRedoCoverageClient: () => RedoCoverageClient;
 
 declare const RedoCheckoutButtons: (props: {
-    cart: CartReturn | CartWithActionsDocs;
+    cart: CartReturn | CartWithActionsDocs | OptimisticCart;
     children?: ReactNode;
     onClick?: (enabled: boolean) => void;
 }) => react_jsx_runtime.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redotech/redo-hydrogen",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Utilities to enable and disable Redo coverage on Hydrogen stores",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -26,6 +26,7 @@
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.2",
+    "@svgr/rollup": "^8.1.0",
     "@types/react": "^19.0.8",
     "nodemon": "^3.1.9",
     "react": "^18.3.1",

package/rollup.config.js

@@ -4,6 +4,7 @@ import typescript from "@rollup/plugin-typescript";
 import dts from "rollup-plugin-dts";
 import terser from "@rollup/plugin-terser";
 import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import svgr from '@svgr/rollup';
 
 const packageJson = require("./package.json");
 
@@ -30,6 +31,7 @@ export default [
       commonjs(),
       typescript({ tsconfig: "./tsconfig.json" }),
       terser(),
+      svgr(),
     ],
     external: ["react", "react-dom"],
   },

package/src/components/redo-checkout-buttons.tsx

@@ -1,9 +1,5 @@
 import React, { MouseEvent, ReactNode, useEffect, useState } from "react";
-import {
-  CartForm,
-  CartActionInput,
-  CartReturn,
-} from "@shopify/hydrogen";
+import { CartForm, CartActionInput, CartReturn, OptimisticCart } from "@shopify/hydrogen";
 import { useRedoCoverageClient } from "../providers/redo-coverage-client";
 import { CartInfoToEnable, RedoCoverageClient } from "../types";
 import { REDO_PUBLIC_API_HOSTNAME } from "../utils/security";
@@ -11,6 +7,9 @@ import { CurrencyCode } from "@shopify/hydrogen-react/storefront-api-types";
 import { CartWithActionsDocs } from "@shopify/hydrogen-react/dist/types/cart-types";
 import { getCartLines, isCartWithActionsDocs } from "../utils/cart";
 
+import CircleSpinner from "../utils/circle-spinner.svg";
+import { executeWithTimeout } from "../utils/timeout";
+
 type CheckoutButtonUIResponse = {
   html: string;
   css: string;
@@ -22,7 +21,7 @@ const getButtonsToShow = ({
   storeId
 }: {
   redoCoverageClient: RedoCoverageClient,
-  cart: CartReturn | CartWithActionsDocs,
+  cart: CartReturn | CartWithActionsDocs | OptimisticCart,
   storeId: string;
 }): Promise<CheckoutButtonUIResponse | null> => {
   return new Promise<CheckoutButtonUIResponse | null>((resolve, reject) => {
@@ -47,7 +46,7 @@ const getButtonsToShow = ({
         ui: json
       });
 
-      if(!ui) {
+      if (!ui) {
         return reject(null);
       }
 
@@ -62,15 +61,15 @@ const applyButtonVariables = ({
   ui
 }: {
   redoCoverageClient: RedoCoverageClient,
-  cart: CartReturn | CartWithActionsDocs,
+  cart: CartReturn | CartWithActionsDocs | OptimisticCart,
   ui: CheckoutButtonUIResponse
 }): CheckoutButtonUIResponse | null => {
-  if(!redoCoverageClient.eligible || !redoCoverageClient.price || !cart?.cost) {
+  if (!redoCoverageClient.eligible || !redoCoverageClient.price || !cart?.cost) {
     return null;
   }
 
-  let currencyCode: CurrencyCode = cart.cost.totalAmount.currencyCode;
-  if(currencyCode === 'XXX') {
+  let currencyCode: CurrencyCode = cart.cost.subtotalAmount.currencyCode;
+  if (currencyCode === 'XXX') {
     currencyCode = 'USD';
   }
 
@@ -78,9 +77,9 @@ const applyButtonVariables = ({
   const combinedPrice = new Intl.NumberFormat('en-US', {
     style: 'currency',
     currency: currencyCode
-  }).format(Number(cart.cost.totalAmount.amount) + (cartContainsRedo ? 0 : redoCoverageClient.price));
+  }).format(Number(cart.cost.subtotalAmount.amount) + (cartContainsRedo ? 0 : redoCoverageClient.price));
 
-  if(!combinedPrice || !combinedPrice.length || combinedPrice.includes('NaN')) {
+  if (!combinedPrice || !combinedPrice.length || combinedPrice.includes('NaN')) {
     return null;
   }
 
@@ -103,7 +102,7 @@ const findAncestor = (
 };
 
 const RedoCheckoutButtons = (props: {
-  cart: CartReturn | CartWithActionsDocs;
+  cart: CartReturn | CartWithActionsDocs | OptimisticCart;
   children?: ReactNode;
   onClick?: (enabled: boolean) => void;
 }) => {
@@ -112,23 +111,54 @@ const RedoCheckoutButtons = (props: {
   let checkoutUrl = redoCoverageClient.cart?.checkoutUrl || '/checkout';
   let [redoProductToAdd, setRedoProductToAdd] =
     useState<CartInfoToEnable | null>(null);
-  let [checkoutButtonsUI, setCheckoutButtonsUI] = useState<CheckoutButtonUIResponse | null>(
-    null
-  );
+  let [checkoutButtonsUI, setCheckoutButtonsUI] =
+    useState<CheckoutButtonUIResponse | null>(null);
+    
+  const [buttonPending, setButtonPending] = useState(false);
 
   useEffect(() => {
     (async () => {
-      if(!redoCoverageClient.eligible || !cart || !redoCoverageClient.storeId) {
+      if (!redoCoverageClient.eligible || !cart || !redoCoverageClient.storeId) {
         return;
       }
 
       const buttons = await getButtonsToShow({ redoCoverageClient, cart, storeId: redoCoverageClient.storeId });
-      if(buttons) {
+      if (buttons) {
         setCheckoutButtonsUI(buttons);
       }
     })();
   }, [cart, redoCoverageClient.eligible, redoCoverageClient.price, redoCoverageClient.storeId]);
 
+    /** To avoid the inevitable spammers trying to checkout faster by clicking over and over, between the time the promise resolves and the new tab opens (or errors) */
+  const DELAY_TO_ALLOW_CLICKING_AGAIN = 2000;
+  const TIMEOUT_FOR_CHECKOUTS = 8000;
+  
+  const handleCoverageCheckoutClick = async (isCoverage: boolean) => {
+    if (!redoCoverageClient || !redoCoverageClient.enable || !redoCoverageClient.disable) {
+      console.error('Required redoCoverageClient methods not available');
+      return;
+    }
+
+    setButtonPending(true);
+    try {
+      const functionToCall = isCoverage ? redoCoverageClient.enable : redoCoverageClient.disable;
+      const result = await executeWithTimeout(
+        functionToCall(),
+        TIMEOUT_FOR_CHECKOUTS
+      );
+      
+      if (props.onClick) {
+        await props.onClick(result);
+      }
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setTimeout(() => {
+        setButtonPending(false);
+      }, DELAY_TO_ALLOW_CLICKING_AGAIN);
+    }
+  };
+
   const wrapperClickHandler = async (e: MouseEvent) => {
     let clickedElement = e.target as HTMLElement;
 
@@ -136,26 +166,21 @@ const RedoCheckoutButtons = (props: {
       return;
     }
 
-    if (
-      findAncestor(
-        clickedElement,
-        (el) => el.dataset?.target == "coverage-button"
-      )
-    ) {
-      const attachResult = await redoCoverageClient.enable();
-      if (props.onClick) {
-        await props.onClick(attachResult);
-      }
-      window.location.href = checkoutUrl;
-    } else if (
-      findAncestor(
-        clickedElement,
-        (el) => el.dataset.target == "non-coverage-button"
-      )
-    ) {
-      await redoCoverageClient.disable();
-      if (props.onClick) {
-        await props.onClick(false);
+    const isCoverageButton = findAncestor(
+      clickedElement,
+      (el) => el.dataset?.target == "coverage-button"
+    );
+
+    const isNonCoverageButton = findAncestor(
+      clickedElement,
+      (el) => el.dataset?.target == "non-coverage-button",
+    );
+
+    if (isCoverageButton || isNonCoverageButton) {
+      try {
+        await handleCoverageCheckoutClick(isCoverageButton ? true : false);
+      } catch (error) {
+        console.error('Failed to update coverage state:', error);
       }
       window.location.href = checkoutUrl;
     }
@@ -164,11 +189,32 @@ const RedoCheckoutButtons = (props: {
   return (
     <div>
       {checkoutButtonsUI ? (
-        <div onClick={wrapperClickHandler}>
-          {
-            checkoutButtonsUI.css ? <style>{checkoutButtonsUI.css}</style> : ''
-          }
-          <div dangerouslySetInnerHTML={{ __html: checkoutButtonsUI.html }} />
+        <div onClick={wrapperClickHandler} style={{ position: "relative" }}>
+           {checkoutButtonsUI.css ? <style>{checkoutButtonsUI.css}</style> : ''}
+           <div
+            dangerouslySetInnerHTML={{ __html: checkoutButtonsUI.html }}
+            style={{ 
+              opacity: (buttonPending) ? 0.25 : 1,
+              transition: 'opacity 0.2s ease-in-out'
+            }}
+          />
+          {(buttonPending) && ( 
+            <div
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: "100%",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                zIndex: 1,
+              }}
+            >
+              <CircleSpinner />
+            </div>
+          )} 
         </div>
       ) : (
         props.children

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 { CartReturn, OptimisticCart } from "@shopify/hydrogen";
+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, isOptimisticCart } from "../utils/cart";
 import { CartWithActionsDocs } from "@shopify/hydrogen-react/dist/types/cart-types";
 
 const DEFAULT_REDO_CONTEXT_VALUE: RedoContextValue = {
@@ -18,7 +18,7 @@ const RedoProvider = ({
   storeId,
   children
 }: {
-  cart: CartReturn | CartWithActionsDocs,
+  cart: CartReturn | CartWithActionsDocs | OptimisticCart,
   storeId: string,
   children: ReactNode,
 }): ReactNode => {
@@ -37,7 +37,7 @@ const RedoProvider = ({
   }
 
   useEffect(() => {
-    if(!cart || !storeId) {
+    if(!cart || !storeId || isOptimisticCart(cart)) {
       return;
     }
 
@@ -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/svg.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}

package/src/types.ts

@@ -1,4 +1,4 @@
-import { CartReturn } from "@shopify/hydrogen";
+import { CartReturn, OptimisticCart } from "@shopify/hydrogen";
 import { CartWithActionsDocs } from "@shopify/hydrogen-react/dist/types/cart-types";
 import { ProductVariant } from "@shopify/hydrogen-react/storefront-api-types";
 
@@ -16,7 +16,7 @@ interface RedoCoverageClient {
   get eligible(): boolean;
   get price(): number | undefined;
   get storeId(): string | undefined;
-  get cart(): CartReturn | CartWithActionsDocs | undefined;
+  get cart(): CartReturn | CartWithActionsDocs | OptimisticCart | undefined;
   get cartProduct(): CartProductVariantFragment | undefined;
   get cartAttribute(): CartAttributeKey | undefined;
   get errors(): RedoError[] | undefined;
@@ -34,7 +34,7 @@ type RedoContextValue = {
   loading: boolean,
   storeId?: string,
   cartInfoToEnable?: CartInfoToEnable,
-  cart?: CartReturn | CartWithActionsDocs,
+  cart?: CartReturn | CartWithActionsDocs | OptimisticCart,
   errors?: RedoError[],
 };
 

package/src/utils/cart.ts

@@ -1,47 +1,84 @@
 import { FetcherWithComponents, useFetcher } from "@remix-run/react";
 import { CartInfoToEnable } from "../types";
-import { CartForm, CartReturn } from "@shopify/hydrogen";
+import { CartForm, CartReturn, OptimisticCart, OptimisticCartLine } 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";
 
 const DEFAULT_REDO_ENABLED_CART_ATTRIBUTE = 'redo_opted_in_from_cart';
 
-const isCartWithActionsDocs = (cart: CartReturn | CartWithActionsDocs): cart is CartWithActionsDocs => {
+const isCartWithActionsDocs = (cart: CartReturn | CartWithActionsDocs| OptimisticCart): cart is CartWithActionsDocs => {
   return (Array.isArray(cart.lines) && 'linesAdd' in cart && typeof cart.linesAdd === 'function');
 }
 
-const getCartLines = (cart: CartReturn | CartWithActionsDocs): Array<CartLine | ComponentizableCartLine> => {
-  if(isCartWithActionsDocs(cart)) {
+const getCartLines = (cart: CartReturn | CartWithActionsDocs | OptimisticCart): Array<CartLine | ComponentizableCartLine> => {
+  if (isOptimisticCart(cart)) {
+    return cart.lines.nodes;
+  } else if (isCartWithActionsDocs(cart)) {
     return cart.lines;
   } else {
     return cart.lines.nodes ?? cart.lines.edges.map((edge) => edge.node);
   }
 }
 
-const waitUntilCartIdle = (cart: CartWithActionsDocs): Promise<void> => {
+// https://shopify.dev/docs/api/hydrogen/2025-01/hooks/useoptimisticcart
+const isOptimisticCart = (cart: CartReturn | CartWithActionsDocs | OptimisticCart): cart is OptimisticCart => {
+  return 'isOptimistic' in cart && (cart.isOptimistic ?? false);
+}
+
+const isRedoInCart = ({
+  cart
+}: {
+  cart: CartReturn | CartWithActionsDocs | OptimisticCart
+}): 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(false);
+      }
+
+      let conditionsMet = conditions.every((conditionCallback) => conditionCallback());
+
+      if(conditionsMet) {
         clearInterval(interval);
-        return resolve();
+        return resolve(true);
       }
     }, 100);
-  });
+  })
 }
 
 const addProductToCartIfNeeded = async ({
   cart,
   fetcher,
+  waitCartIdle,
   cartInfoToEnable
 }: {
-  cart: CartReturn | CartWithActionsDocs | undefined,
+  cart: CartReturn | CartWithActionsDocs | OptimisticCart | 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 +88,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 +105,12 @@ const addProductToCartIfNeeded = async ({
 const removeLinesFromCart = async ({
   cart,
   fetcher,
+  waitCartIdle,
   lineIds
 }: {
-  cart: CartReturn | CartWithActionsDocs | undefined;
+  cart: CartReturn | CartWithActionsDocs | OptimisticCart | undefined;
   fetcher: FetcherWithComponents<unknown>;
+  waitCartIdle: WaitCartIdleCallback;
   lineIds: string[];
 }) => {
   const formInput = {
@@ -83,7 +122,7 @@ const removeLinesFromCart = async ({
 
   if(cart && isCartWithActionsDocs(cart)) {
     cart.linesRemove(lineIds);
-    await waitUntilCartIdle(cart);
+    await waitCartIdle();
   } else {
     await fetcher.submit(
       {
@@ -97,10 +136,12 @@ const removeLinesFromCart = async ({
 const removeProductFromCartIfNeeded = async ({
   cart,
   fetcher,
+  waitCartIdle,
   cartInfoToEnable
 }: {
-  cart: CartReturn | CartWithActionsDocs | undefined,
+  cart: CartReturn | CartWithActionsDocs | OptimisticCart | undefined,
   fetcher: FetcherWithComponents<unknown>,
+  waitCartIdle: WaitCartIdleCallback
   cartInfoToEnable: CartInfoToEnable
 }) => {
   if(!cart) {
@@ -113,24 +154,25 @@ 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,
 }: {
-  cart: CartReturn | CartWithActionsDocs | undefined,
+  waitCartIdle: WaitCartIdleCallback;
+  cart: CartReturn | CartWithActionsDocs | OptimisticCart | undefined,
   fetcher: FetcherWithComponents<unknown>,
   cartInfoToEnable: CartInfoToEnable
 }) => {
   const redoProductLine = {
     "merchandiseId": `gid://shopify/ProductVariant/${cartInfoToEnable.variantId}`,
     "quantity": 1,
-    "selectedVariant": cartInfoToEnable.selectedVariant
   };
 
   const formInput = {
@@ -144,7 +186,7 @@ const addProductToCart = async ({
 
   if(cart && isCartWithActionsDocs(cart)) {
     cart.linesAdd([redoProductLine]);
-    await waitUntilCartIdle(cart);
+    await waitCartIdle();
   } else {
     await fetcher.submit(
       {
@@ -158,11 +200,13 @@ const addProductToCart = async ({
 const setCartRedoEnabledAttribute = async ({
   cart,
   fetcher,
+  waitCartIdle,
   cartInfoToEnable,
   enabled
 }: {
-  cart: CartReturn | CartWithActionsDocs | undefined;
+  cart: CartReturn | CartWithActionsDocs | OptimisticCart | undefined;
   fetcher: FetcherWithComponents<unknown>;
+  waitCartIdle: WaitCartIdleCallback;
   cartInfoToEnable: CartInfoToEnable | null;
   enabled: boolean;
 }) => {
@@ -182,7 +226,7 @@ const setCartRedoEnabledAttribute = async ({
 
   if(cart && isCartWithActionsDocs(cart)) {
     cart.cartAttributesUpdate([redoCartAttribute]);
-    await waitUntilCartIdle(cart);
+    await waitCartIdle();
   } else {
     await fetcher.submit(
       {
@@ -233,12 +277,63 @@ function useFetcherWithPromise<TData = AppData>(opts?: Parameters<typeof useFetc
   return { ...fetcher, submit }
 }
 
+type WaitCartIdleCallback = () => Promise<CartReturn | CartWithActionsDocs | OptimisticCart>;
+
+// 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 | OptimisticCart | undefined) => {
+  const resolveRef = useRef<any>(null)
+  const promiseRef = useRef<any>(null)
+
+  if (!promiseRef.current) {
+    promiseRef.current = new Promise<CartReturn | CartWithActionsDocs | OptimisticCart>((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
+  getCartLines,
+  isOptimisticCart
 };