Expose cartReady (#1885)

* Convert cartReady to a state variable so it can be exposed and reacted to in components that use rely on it.

.changeset/tame-cobras-sort.md

@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen-react': patch
+---
+
+Expose `cartReady` state from the cart context.

packages/hydrogen-react/src/CartProvider.stories.tsx

@@ -20,6 +20,7 @@ function CartComponent() {
     discountCodes,
     linesAdd,
     cartCreate,
+    cartReady,
     linesUpdate,
     linesRemove,
     noteUpdate,
@@ -51,6 +52,8 @@ function CartComponent() {
         <h1>This is your current cart</h1>
         <h3>Cart status</h3>
         <p>{status}</p>
+        <h3>Cart ready</h3>
+        <p>{cartReady ? 'true' : 'false'}</p>
         <h3>Fetched from local storage with this cart id</h3>
         <p>{localStorageId}</p>
         <h3>Cart lines</h3>

packages/hydrogen-react/src/CartProvider.tsx

@@ -271,6 +271,7 @@ export function CartProvider({
   });
 
   const cartReady = useRef(false);
+  const [isCartReady, setIsCartReady] = useState(false);
   const cartCompleted = cartState.matches('cartCompleted');
 
   const countryChanged =
@@ -302,6 +303,8 @@ export function CartProvider({
         }
       }
       cartReady.current = true;
+      // Providing a separate cart ready state variable to avoid re-renders in this logic while still being able to pass the reactive status through context.
+      setIsCartReady(true);
     }
   }, [cart, cartReady, cartSend]);
 
@@ -393,6 +396,7 @@ export function CartProvider({
       error: cartDisplayState?.context?.errors,
       totalQuantity: cartDisplayState?.context?.cart?.totalQuantity ?? 0,
       cartCreate,
+      cartReady: isCartReady,
       linesAdd(lines: CartLineInput[]): void {
         if (cartDisplayState?.context?.cart?.id) {
           onCartReadySend({
@@ -455,6 +459,7 @@ export function CartProvider({
     };
   }, [
     cartCreate,
+    isCartReady,
     cartDisplayState?.context?.cart,
     cartDisplayState?.context?.errors,
     cartDisplayState.value,

packages/hydrogen-react/src/cart-types.ts

@@ -62,6 +62,8 @@ interface CartActions {
   totalQuantity?: number;
   /** The fragment used to query the cart object for all queries and mutations. */
   cartFragment: string;
+  /** A boolean indicating if the cart is ready to be interacted with. */
+  cartReady?: boolean;
 }
 
 export type Cart = PartialDeep<CartBase, {recurseIntoArrays: true}>;