@redotech/redo-hydrogen 1.1.2 → 1.2.0

package/dist/types.d.ts

@@ -1,5 +1,6 @@
 import { CartReturn } 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';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
@@ -13,7 +14,7 @@ interface RedoCoverageClient {
     get eligible(): boolean;
     get price(): number | undefined;
     get storeId(): string | undefined;
-    get cart(): CartReturn | undefined;
+    get cart(): CartReturn | CartWithActionsDocs | undefined;
     get cartProduct(): CartProductVariantFragment | undefined;
     get cartAttribute(): CartAttributeKey | undefined;
     get errors(): RedoError[] | undefined;
@@ -29,7 +30,7 @@ type RedoContextValue = {
     loading: boolean;
     storeId?: string;
     cartInfoToEnable?: CartInfoToEnable;
-    cart?: CartReturn;
+    cart?: CartReturn | CartWithActionsDocs;
     errors?: RedoError[];
 };
 declare enum RedoErrorType {
@@ -44,14 +45,14 @@ type RedoError = {
 };
 
 declare const RedoProvider: ({ cart, storeId, children }: {
-    cart: CartReturn;
+    cart: CartReturn | CartWithActionsDocs;
     storeId: string;
     children: ReactNode;
 }) => ReactNode;
 declare const useRedoCoverageClient: () => RedoCoverageClient;
 
 declare const RedoCheckoutButtons: (props: {
-    cart: CartReturn;
+    cart: CartReturn | CartWithActionsDocs;
     children?: ReactNode;
     onClick?: (enabled: boolean) => void;
 }) => react_jsx_runtime.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redotech/redo-hydrogen",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Utilities to enable and disable Redo coverage on Hydrogen stores",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

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

@@ -8,6 +8,8 @@ import { useRedoCoverageClient } from "../providers/redo-coverage-client";
 import { CartInfoToEnable, RedoCoverageClient } from "../types";
 import { REDO_PUBLIC_API_HOSTNAME } from "../utils/security";
 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";
 
 type CheckoutButtonUIResponse = {
   html: string;
@@ -20,7 +22,7 @@ const getButtonsToShow = ({
   storeId
 }: {
   redoCoverageClient: RedoCoverageClient,
-  cart: CartReturn,
+  cart: CartReturn | CartWithActionsDocs,
   storeId: string;
 }): Promise<CheckoutButtonUIResponse | null> => {
   return new Promise<CheckoutButtonUIResponse | null>((resolve, reject) => {
@@ -60,10 +62,10 @@ const applyButtonVariables = ({
   ui
 }: {
   redoCoverageClient: RedoCoverageClient,
-  cart: CartReturn,
+  cart: CartReturn | CartWithActionsDocs,
   ui: CheckoutButtonUIResponse
 }): CheckoutButtonUIResponse | null => {
-  if(!redoCoverageClient.eligible || !redoCoverageClient.price) {
+  if(!redoCoverageClient.eligible || !redoCoverageClient.price || !cart?.cost) {
     return null;
   }
 
@@ -72,7 +74,7 @@ const applyButtonVariables = ({
     currencyCode = 'USD';
   }
 
-  const cartContainsRedo = !!(cart.lines.nodes.some((cartItem) => cartItem.merchandise?.product?.vendor === 're:do'));
+  const cartContainsRedo = !!(getCartLines(cart).some((cartItem) => cartItem.merchandise?.product?.vendor === 're:do'));
   const combinedPrice = new Intl.NumberFormat('en-US', {
     style: 'currency',
     currency: currencyCode
@@ -101,7 +103,7 @@ const findAncestor = (
 };
 
 const RedoCheckoutButtons = (props: {
-  cart: CartReturn;
+  cart: CartReturn | CartWithActionsDocs;
   children?: ReactNode;
   onClick?: (enabled: boolean) => void;
 }) => {

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

@@ -3,7 +3,8 @@ import { CartReturn } from "@shopify/hydrogen";
 import { createContext, ReactNode, useContext, useEffect, 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 } from "../utils/cart";
+import { addProductToCartIfNeeded, removeProductFromCartIfNeeded, setCartRedoEnabledAttribute, useFetcherWithPromise, isCartWithActionsDocs, getCartLines } from "../utils/cart";
+import { CartWithActionsDocs } from "@shopify/hydrogen-react/dist/types/cart-types";
 
 const DEFAULT_REDO_CONTEXT_VALUE: RedoContextValue = {
   enabled: false,
@@ -17,7 +18,7 @@ const RedoProvider = ({
   storeId,
   children
 }: {
-  cart: CartReturn,
+  cart: CartReturn | CartWithActionsDocs,
   storeId: string,
   children: ReactNode,
 }): ReactNode => {
@@ -40,6 +41,8 @@ const RedoProvider = ({
       return;
     }
 
+    let cartLines = getCartLines(cart);
+
     fetch(`https://${REDO_PUBLIC_API_HOSTNAME}/v2.2/stores/${storeId}/coverage-products`, {
       method: 'POST',
       headers: {
@@ -47,7 +50,7 @@ const RedoProvider = ({
       },
       body: JSON.stringify({
         cart: {
-          lineItems: cart.lines.nodes.map((cartLine) => ({
+          lineItems: cartLines.map((cartLine) => ({
             id: cartLine.id,
             originalPrice: {
               amount: cartLine.merchandise?.price?.amount,
@@ -161,6 +164,7 @@ const useRedoCoverageClient = (): RedoCoverageClient => {
         cartInfoToEnable: redoContext.cartInfoToEnable,
       });
       await setCartRedoEnabledAttribute({
+        cart: redoContext.cart,
         fetcher,
         cartInfoToEnable: redoContext.cartInfoToEnable,
         enabled: true
@@ -177,6 +181,7 @@ const useRedoCoverageClient = (): RedoCoverageClient => {
         cartInfoToEnable: redoContext.cartInfoToEnable
       });
       await setCartRedoEnabledAttribute({
+        cart: redoContext.cart,
         fetcher,
         cartInfoToEnable: redoContext.cartInfoToEnable,
         enabled: false
@@ -187,7 +192,7 @@ const useRedoCoverageClient = (): RedoCoverageClient => {
       return redoContext.loading;
     },
     get eligible() {
-      return !this.loading && !!this.price && !!this.cartProduct;
+      return !this.loading && !!this.price && !!this.cartProduct && !!this.cart?.cost;
     },
     get enabled() {
       return redoContext.enabled;

package/src/types.ts

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

package/src/utils/cart.ts

@@ -3,49 +3,76 @@ import { CartInfoToEnable } from "../types";
 import { CartForm, CartReturn } from "@shopify/hydrogen";
 import type { AppData } from '@remix-run/react/dist/data';
 import React 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 => {
+  return (Array.isArray(cart.lines) && 'linesAdd' in cart && typeof cart.linesAdd === 'function');
+}
+
+const getCartLines = (cart: CartReturn | CartWithActionsDocs): Array<CartLine | ComponentizableCartLine> => {
+  if(isCartWithActionsDocs(cart)) {
+    return cart.lines;
+  } else {
+    return cart.lines.nodes ?? cart.lines.edges.map((edge) => edge.node);
+  }
+}
+
+const waitUntilCartIdle = (cart: CartWithActionsDocs): Promise<void> => {
+  return new Promise((resolve, reject) => {
+    let interval = setInterval(() => {
+      if(cart.status === 'idle') {
+        clearInterval(interval);
+        return resolve();
+      }
+    }, 100);
+  });
+}
+
 const addProductToCartIfNeeded = async ({
   cart,
   fetcher,
   cartInfoToEnable
 }: {
-  cart: CartReturn | undefined,
+  cart: CartReturn | CartWithActionsDocs | undefined,
   fetcher: FetcherWithComponents<unknown>,
   cartInfoToEnable: CartInfoToEnable
 }) => {
   if(!cart) {
-    return await addProductToCart({ fetcher, cartInfoToEnable });
+    return await addProductToCart({ cart, fetcher, cartInfoToEnable });
   }
 
-  const redoProductsInCart = cart.lines.nodes.filter((cartLine) => {
+  const redoProductsInCart = getCartLines(cart).filter((cartLine) => {
     return cartLine.merchandise.product.vendor === 're:do';
   });
   const correctRedoProductInCart = redoProductsInCart?.filter((cartLine) => {
     return cartLine.merchandise.id === `gid://shopify/ProductVariant/${cartInfoToEnable.variantId}`;
   });
   if(redoProductsInCart.length === 0) {
-    return await addProductToCart({ fetcher, cartInfoToEnable });
+    return await addProductToCart({ cart, fetcher, cartInfoToEnable });
   } else if (redoProductsInCart.length === 1 && correctRedoProductInCart.length === 1 && correctRedoProductInCart[0].quantity === 1) {
     // No action needed
     return;
   } else {
     let isSuccess = true;
 
-    await removeLinesFromCart({ fetcher, lineIds: redoProductsInCart.map((cartLine) => cartLine.id) });
-    await addProductToCart({ fetcher, cartInfoToEnable });
+    await removeLinesFromCart({ cart, fetcher, lineIds: redoProductsInCart.map((cartLine) => cartLine.id) });
+    await addProductToCart({ cart, fetcher, cartInfoToEnable });
 
     return;
   }
 };
 
 const removeLinesFromCart = async ({
+  cart,
   fetcher,
   lineIds
 }: {
-  fetcher: FetcherWithComponents<unknown>,
-  lineIds: string[]
+  cart: CartReturn | CartWithActionsDocs | undefined;
+  fetcher: FetcherWithComponents<unknown>;
+  lineIds: string[];
 }) => {
   const formInput = {
     action: CartForm.ACTIONS.LinesRemove,
@@ -54,12 +81,17 @@ const removeLinesFromCart = async ({
     }
   }
 
-  await fetcher.submit(
-    {
-      [CartForm.INPUT_NAME]: JSON.stringify(formInput),
-    },
-    {method: 'POST', action: '/cart'},
-  );
+  if(cart && isCartWithActionsDocs(cart)) {
+    cart.linesRemove(lineIds);
+    await waitUntilCartIdle(cart);
+  } else {
+    await fetcher.submit(
+      {
+        [CartForm.INPUT_NAME]: JSON.stringify(formInput),
+      },
+      {method: 'POST', action: '/cart'},
+    );
+  }
 };
 
 const removeProductFromCartIfNeeded = async ({
@@ -67,7 +99,7 @@ const removeProductFromCartIfNeeded = async ({
   fetcher,
   cartInfoToEnable
 }: {
-  cart: CartReturn | undefined,
+  cart: CartReturn | CartWithActionsDocs | undefined,
   fetcher: FetcherWithComponents<unknown>,
   cartInfoToEnable: CartInfoToEnable
 }) => {
@@ -76,20 +108,22 @@ const removeProductFromCartIfNeeded = async ({
     return;
   }
 
-  const redoProductsInCart = cart.lines.nodes.filter((cartLine) => {
+  const redoProductsInCart = getCartLines(cart).filter((cartLine) => {
     return cartLine.merchandise.product.vendor === 're:do';
   });
 
   if(redoProductsInCart.length !== 0) {
-    await removeLinesFromCart({ fetcher, lineIds: redoProductsInCart.map((cartLine) => cartLine.id) });
+    await removeLinesFromCart({ cart, fetcher, lineIds: redoProductsInCart.map((cartLine) => cartLine.id) });
   } else {
   }
 };
 
 const addProductToCart = async ({
+  cart,
   fetcher,
-  cartInfoToEnable
+  cartInfoToEnable,
 }: {
+  cart: CartReturn | CartWithActionsDocs | undefined,
   fetcher: FetcherWithComponents<unknown>,
   cartInfoToEnable: CartInfoToEnable
 }) => {
@@ -108,41 +142,55 @@ const addProductToCart = async ({
     }
   }
 
-  await fetcher.submit(
-    {
-      [CartForm.INPUT_NAME]: JSON.stringify(formInput),
-    },
-    {method: 'POST', action: '/cart'},
-  );
+  if(cart && isCartWithActionsDocs(cart)) {
+    cart.linesAdd([redoProductLine]);
+    await waitUntilCartIdle(cart);
+  } else {
+    await fetcher.submit(
+      {
+        [CartForm.INPUT_NAME]: JSON.stringify(formInput),
+      },
+      {method: 'POST', action: '/cart'},
+    );
+  }
 };
 
 const setCartRedoEnabledAttribute = async ({
+  cart,
   fetcher,
   cartInfoToEnable,
   enabled
 }: {
-  fetcher: FetcherWithComponents<unknown>,
-  cartInfoToEnable: CartInfoToEnable | null,
-  enabled: boolean
+  cart: CartReturn | CartWithActionsDocs | undefined;
+  fetcher: FetcherWithComponents<unknown>;
+  cartInfoToEnable: CartInfoToEnable | null;
+  enabled: boolean;
 }) => {
+  const redoCartAttribute = {
+    key: cartInfoToEnable?.cartAttribute || DEFAULT_REDO_ENABLED_CART_ATTRIBUTE,
+    value: enabled.toString()
+  };
+
   const formInput = {
     action: CartForm.ACTIONS.AttributesUpdateInput,
     inputs: {
       attributes: [
-        {
-          key: cartInfoToEnable?.cartAttribute || DEFAULT_REDO_ENABLED_CART_ATTRIBUTE,
-          value: enabled.toString()
-        }
+        redoCartAttribute
       ]
     }
   }
 
-  await fetcher.submit(
-    {
-      [CartForm.INPUT_NAME]: JSON.stringify(formInput),
-    },
-    {method: 'POST', action: '/cart'},
-  );
+  if(cart && isCartWithActionsDocs(cart)) {
+    cart.cartAttributesUpdate([redoCartAttribute]);
+    await waitUntilCartIdle(cart);
+  } else {
+    await fetcher.submit(
+      {
+        [CartForm.INPUT_NAME]: JSON.stringify(formInput),
+      },
+      {method: 'POST', action: '/cart'},
+    );
+  }
 };
 
 type FetcherData<T> = NonNullable<T | unknown> // FIXME: used to use SerializeFrom which is deprecated. Can this be better typed?
@@ -190,5 +238,7 @@ export {
   addProductToCartIfNeeded,
   removeProductFromCartIfNeeded,
   setCartRedoEnabledAttribute,
-  useFetcherWithPromise
+  useFetcherWithPromise,
+  isCartWithActionsDocs,
+  getCartLines
 };