@redotech/redo-hydrogen 1.4.6 → 2.0.0

package/src/hooks/use-purple-dot-preorder.ts

@@ -0,0 +1,39 @@
+import { useEffect } from "react";
+import { updatePurpleDotButtons, cleanupPurpleDotButtons } from "../utils/purple-dot";
+
+/**
+ * React hook to disable add-to-cart buttons when a Purple Dot preorder element is present.
+ * Watches for DOM changes and automatically disables/enables buttons based on the presence
+ * of the <purple-dot-learn-more> element.
+ *
+ * @param disablePreorderButtons - When true, enables the preorder button disabling logic.
+ *                                  When false, the hook does nothing.
+ *
+ * Usage:
+ * ```tsx
+ * function ProductPage() {
+ *   const isShopOnSiteActive = true; // your condition here
+ *   useDisablePurpleDotPreorder(isShopOnSiteActive);
+ *   return <div>...</div>;
+ * }
+ * ```
+ */
+export function useDisablePurpleDotPreorder(disablePreorderButtons: boolean): void {
+  useEffect(() => {
+    if (!disablePreorderButtons) {
+      return;
+    }
+
+    // Initial check
+    updatePurpleDotButtons();
+
+    // Watch for DOM changes (variant selection, page navigation, etc.)
+    const observer = new MutationObserver(updatePurpleDotButtons);
+    observer.observe(document.body, { childList: true, subtree: true });
+
+    return () => {
+      observer.disconnect();
+      cleanupPurpleDotButtons();
+    };
+  }, [disablePreorderButtons]);
+}

package/src/index.ts

@@ -1,9 +1,18 @@
 import { RedoProvider, useRedoCoverageClient } from "./providers/redo-coverage-client";
 import { RedoCheckoutButtons } from "./components/redo-checkout-buttons";
 import { REDO_REQUIRED_HOSTNAMES } from "./utils/security";
-import { CartProductVariantFragment, CartAttributeKey, CartInfoToEnable, RedoContextValue, RedoCoverageClient, RedoError, RedoErrorType } from "./types";
-import { LoadState, Loader, useLoad } from './utils/react-utils'
+import {
+  CartProductVariantFragment,
+  CartAttributeKey,
+  CartInfoToEnable,
+  RedoContextValue,
+  RedoCoverageClient,
+  RedoError,
+  RedoErrorType,
+} from "./types";
+import { LoadState, Loader, useLoad } from "./utils/react-utils";
 import { RedoInfoCard } from "./components/redo-info-modal";
+import { useDisablePurpleDotPreorder } from "./hooks/use-purple-dot-preorder";
 
 export {
   RedoCheckoutButtons,
@@ -12,7 +21,8 @@ export {
   useLoad,
   REDO_REQUIRED_HOSTNAMES,
   RedoErrorType,
-  RedoInfoCard
+  RedoInfoCard,
+  useDisablePurpleDotPreorder,
 };
 
 export type {
@@ -23,5 +33,5 @@ export type {
   RedoCoverageClient,
   LoadState,
   Loader,
-  RedoError
+  RedoError,
 };

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

@@ -1,52 +1,56 @@
-import { useFetcher } from "@remix-run/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 { createContext, ReactNode, useContext, useEffect, useState } from "react";
+import { CartInfoToEnable, RedoContextValue, RedoCoverageClient, RedoError, RedoErrorType } from "../types";
 import { REDO_PUBLIC_API_HOSTNAME } from "../utils/security";
-import { addProductToCartIfNeeded, removeProductFromCartIfNeeded, setCartRedoEnabledAttribute, useFetcherWithPromise, isCartWithActionsDocs, getCartLines, useWaitCartIdle, isOptimisticCart } from "../utils/cart";
+import {
+  addProductToCartIfNeeded,
+  removeProductFromCartIfNeeded,
+  setCartRedoEnabledAttribute,
+  useFetcherWithPromise,
+  getCartLines,
+  useWaitCartIdle,
+  isOptimisticCart,
+} from "../utils/cart";
 import { CartWithActionsDocs } from "@shopify/hydrogen-react/dist/types/cart-types";
 
 const DEFAULT_REDO_CONTEXT_VALUE: RedoContextValue = {
   enabled: false,
   loading: true,
-}
+};
 
 const RedoContext = createContext<RedoContextValue>(DEFAULT_REDO_CONTEXT_VALUE);
 
 const RedoProvider = ({
   cart,
   storeId,
-  children
+  children,
 }: {
-  cart: CartReturn | CartWithActionsDocs | OptimisticCart,
-  storeId: string,
-  children: ReactNode,
+  cart: CartReturn | CartWithActionsDocs | OptimisticCart;
+  storeId: string;
+  children: ReactNode;
 }): ReactNode => {
-  const [cartProduct, setCartProduct] = useState();
-  const [cartAttribute, setCartAttribute] = useState<CartAttributeKey>();
   const [cartInfoToEnable, setCartInfoToEnable] = useState<CartInfoToEnable>();
   const [loading, setLoading] = useState<boolean>(true);
   const [errors, setErrors] = useState<RedoError[]>([]);
 
   const logUniqueError = (newError: RedoError) => {
-    if(errors.find((err) => err.type === newError.type)) {
-    } else {
+    if (!errors.find((err) => err.type === newError.type)) {
       setErrors([...errors, newError]);
     }
     return newError;
-  }
+  };
 
   useEffect(() => {
-    if(!cart || !storeId || isOptimisticCart(cart)) {
+    if (!cart || !storeId || isOptimisticCart(cart)) {
       return;
     }
 
-    let cartLines = getCartLines(cart);
+    const cartLines = getCartLines(cart);
 
     fetch(`https://${REDO_PUBLIC_API_HOSTNAME}/v2.2/stores/${storeId}/coverage-products`, {
-      method: 'POST',
+      method: "POST",
       headers: {
-        "Content-Type": "application/json"
+        "Content-Type": "application/json",
       },
       body: JSON.stringify({
         cart: {
@@ -54,88 +58,85 @@ const RedoProvider = ({
             id: cartLine.id,
             originalPrice: {
               amount: cartLine.merchandise?.price?.amount,
-              currency: cartLine.merchandise?.price?.currencyCode
+              currency: cartLine.merchandise?.price?.currencyCode,
             },
             priceTotal: {
               amount: cartLine.cost?.totalAmount?.amount,
-              currency: cartLine.cost?.totalAmount?.currencyCode
+              currency: cartLine.cost?.totalAmount?.currencyCode,
             },
             product: {
-              id: cartLine.merchandise?.product?.id
+              id: cartLine.merchandise?.product?.id,
             },
             variant: {
-              id: cartLine.merchandise?.id
+              id: cartLine.merchandise?.id,
             },
             quantity: cartLine.quantity,
           })),
           priceTotal: {
             amount: cart.cost?.totalAmount?.amount,
-            currency: cart.cost?.totalAmount?.currencyCode
+            currency: cart.cost?.totalAmount?.currencyCode,
           },
         },
         customer: {
-          id: cart.buyerIdentity?.customer?.id || '',
-          country: cart.buyerIdentity?.countryCode
-        }
-      })
-    })
-    .then(async (res) => {
-      if(res.status === 500) {
+          id: cart.buyerIdentity?.customer?.id || "",
+          country: cart.buyerIdentity?.countryCode,
+        },
+      }),
+    }).then(async (res) => {
+      if (res.status === 500) {
         logUniqueError({
           type: RedoErrorType.ApiServerError,
-          message: "Internal server error occured when getting available coverage products from Redo API.. Check your inputs are correct and storeId have been configured. Reach out to Redo support if the issue persists.",
+          message:
+            "Internal server error occured when getting available coverage products from Redo API.. Check your inputs are correct and storeId have been configured. Reach out to Redo support if the issue persists.",
           context: {
-            json: await res.json()
-          }
+            json: await res.json(),
+          },
         });
         return;
-      } else if(res.status === 400) {
+      } else if (res.status === 400) {
         logUniqueError({
           type: RedoErrorType.ApiBadRequest,
-          message: "Bad request when getting available coverage products from Redo API. Check that the passed in cart is of the correct type Cart/CartReturn and includes all of the correct cart information.",
+          message:
+            "Bad request when getting available coverage products from Redo API. Check that the passed in cart is of the correct type Cart/CartReturn and includes all of the correct cart information.",
           context: {
-            json: await res.json()
-          }
+            json: await res.json(),
+          },
         });
         return;
-      } else if(res.status !== 200) {
+      } else if (res.status !== 200) {
         logUniqueError({
           type: RedoErrorType.ApiUnknownError,
           message: "Unkown error occured while getting available coverage products from Redo API.",
           context: {
             status: res.status,
-            json: await res.json()
-          }
+            json: await res.json(),
+          },
         });
         return;
       }
 
-      let json = await res.json();
+      const json = await res.json();
 
       setLoading(false);
-      
-      if(!json?.coverageProducts?.[0]?.cartInfoToEnable) {
+
+      if (!json?.coverageProducts?.[0]?.cartInfoToEnable) {
         return;
       }
 
       setCartInfoToEnable(json.coverageProducts[0].cartInfoToEnable);
-    })
+    });
   }, [cart, storeId]);
-  
+
   const contextVal: RedoContextValue = {
     enabled: true,
     loading,
     storeId,
     cartInfoToEnable,
     cart,
-    errors: (errors?.length && errors.length > 0) ? errors : undefined
+    errors: errors?.length && errors.length > 0 ? errors : undefined,
   };
 
-  return (
-    <RedoContext.Provider value={contextVal}>
-      {children}
-    </RedoContext.Provider>
-  );
+  return <RedoContext.Provider value={contextVal}>{children}</RedoContext.Provider>;
 };
 
 const useRedoCoverageClient = (): RedoCoverageClient => {
@@ -144,23 +145,23 @@ const useRedoCoverageClient = (): RedoCoverageClient => {
   const waitCartIdle = useWaitCartIdle(redoContext.cart);
 
   useEffect(() => {
-    if(redoContext.loading || !redoContext.cartInfoToEnable) {
+    if (redoContext.loading || !redoContext.cartInfoToEnable) {
       return;
     }
     removeProductFromCartIfNeeded({
       cart: redoContext.cart,
       fetcher,
       waitCartIdle,
-      cartInfoToEnable: redoContext.cartInfoToEnable
+      cartInfoToEnable: redoContext.cartInfoToEnable,
     });
   }, [redoContext.loading]);
-  
+
   return {
     enable: async () => {
-      if(redoContext.loading || !redoContext.cartInfoToEnable) {
+      if (redoContext.loading || !redoContext.cartInfoToEnable) {
         return false;
       }
-      let addProductResult = await addProductToCartIfNeeded({
+      await addProductToCartIfNeeded({
         fetcher,
         waitCartIdle,
         cart: redoContext.cart,
@@ -171,26 +172,26 @@ const useRedoCoverageClient = (): RedoCoverageClient => {
         fetcher,
         waitCartIdle,
         cartInfoToEnable: redoContext.cartInfoToEnable,
-        enabled: true
+        enabled: true,
       });
       return true;
     },
     disable: async () => {
-      if(!redoContext.cartInfoToEnable) {
+      if (!redoContext.cartInfoToEnable) {
         return false;
       }
       await removeProductFromCartIfNeeded({
         fetcher,
         waitCartIdle,
         cart: redoContext.cart,
-        cartInfoToEnable: redoContext.cartInfoToEnable
+        cartInfoToEnable: redoContext.cartInfoToEnable,
       });
       await setCartRedoEnabledAttribute({
         cart: redoContext.cart,
         fetcher,
         waitCartIdle,
         cartInfoToEnable: redoContext.cartInfoToEnable,
-        enabled: false
+        enabled: false,
       });
       return true;
     },
@@ -204,8 +205,8 @@ const useRedoCoverageClient = (): RedoCoverageClient => {
       return redoContext.enabled;
     },
     get price() {
-      let priceToEnable = redoContext.cartInfoToEnable?.selectedVariant?.price?.amount;
-      if(!priceToEnable || Number(priceToEnable).toString() === 'NaN') {
+      const priceToEnable = redoContext.cartInfoToEnable?.selectedVariant?.price?.amount;
+      if (!priceToEnable || Number(priceToEnable).toString() === "NaN") {
         return undefined;
       }
 
@@ -218,18 +219,15 @@ const useRedoCoverageClient = (): RedoCoverageClient => {
       return redoContext.cartInfoToEnable?.selectedVariant;
     },
     get cartAttribute() {
-      return redoContext.cartInfoToEnable?.cartAttribute
+      return redoContext.cartInfoToEnable?.cartAttribute;
     },
     get storeId() {
       return redoContext.storeId;
     },
     get errors() {
       return redoContext.errors;
-    }
-  }
+    },
+  };
 };
 
-export {
-  RedoProvider,
-  useRedoCoverageClient
-}
+export { RedoProvider, useRedoCoverageClient };

package/src/svg.d.ts

@@ -1,5 +1,5 @@
 declare module "*.svg" {
   import { JSX } from "react";
-  function component(props: any): JSX.Element;
+  function component(props: React.SVGProps<SVGSVGElement>): JSX.Element;
   export default component;
-}
+}

package/src/types.ts

@@ -2,8 +2,17 @@ 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";
 
-type CartProductVariantFragment = Omit<ProductVariant, 
-  "components" | "metafields" | "quantityPriceBreaks" | "quantityRule" | "requiresComponents" | "requiresShipping" | "storeAvailability" | "taxable" | "weightUnit"
+type CartProductVariantFragment = Omit<
+  ProductVariant,
+  | "components"
+  | "metafields"
+  | "quantityPriceBreaks"
+  | "quantityRule"
+  | "requiresComponents"
+  | "requiresShipping"
+  | "storeAvailability"
+  | "taxable"
+  | "weightUnit"
 >;
 
 type CartAttributeKey = string;
@@ -23,36 +32,34 @@ interface RedoCoverageClient {
 }
 
 type CartInfoToEnable = {
-  productId: string,
-  variantId: string,
-  cartAttribute: CartAttributeKey,
-  selectedVariant: CartProductVariantFragment
-}
+  productId: string;
+  variantId: string;
+  cartAttribute: CartAttributeKey;
+  selectedVariant: CartProductVariantFragment;
+};
 
 type RedoContextValue = {
-  enabled: boolean,
-  loading: boolean,
-  storeId?: string,
-  cartInfoToEnable?: CartInfoToEnable,
-  cart?: CartReturn | CartWithActionsDocs | OptimisticCart,
-  errors?: RedoError[],
+  enabled: boolean;
+  loading: boolean;
+  storeId?: string;
+  cartInfoToEnable?: CartInfoToEnable;
+  cart?: CartReturn | CartWithActionsDocs | OptimisticCart;
+  errors?: RedoError[];
 };
 
 enum RedoErrorType {
   ApiBadRequest = "API_BAD_REQUEST",
   ApiServerError = "API_SERVER_ERROR",
-  ApiUnknownError = "API_UNKNOWN_ERROR"
-};
+  ApiUnknownError = "API_UNKNOWN_ERROR",
+}
 
 type RedoError = {
-  type: RedoErrorType,
-  message: string,
-  context: any
+  type: RedoErrorType;
+  message: string;
+  context: Record<string, unknown>;
 };
 
-export {
-  RedoErrorType,
-}
+export { RedoErrorType };
 
 export type {
   CartAttributeKey,
@@ -60,5 +67,5 @@ export type {
   RedoContextValue,
   RedoCoverageClient,
   CartProductVariantFragment,
-  RedoError
-}
+  RedoError,
+};