@redotech/redo-hydrogen 1.4.6 → 2.0.0

package/dist/types.d.ts

@@ -41,10 +41,10 @@ declare enum RedoErrorType {
 type RedoError = {
     type: RedoErrorType;
     message: string;
-    context: any;
+    context: Record<string, unknown>;
 };
 
-declare const RedoProvider: ({ cart, storeId, children }: {
+declare const RedoProvider: ({ cart, storeId, children, }: {
     cart: CartReturn | CartWithActionsDocs | OptimisticCart;
     storeId: string;
     children: ReactNode;
@@ -62,7 +62,7 @@ interface Loader<T> {
     (abort: AbortSignal): Promise<T>;
 }
 interface LoadState<T> {
-    error?: any;
+    error?: unknown;
     pending: boolean;
     value?: T;
 }
@@ -78,4 +78,24 @@ interface RedoInfoModalProps {
 }
 declare const RedoInfoCard: ({ showInfoIcon, onInfoClick, infoCardImageUrl, infoModalLogoUrl, infoModalImageUrl, infoModalContent, }: RedoInfoModalProps) => react_jsx_runtime.JSX.Element;
 
-export { type CartAttributeKey, type CartInfoToEnable, type CartProductVariantFragment, type LoadState, type Loader, REDO_REQUIRED_HOSTNAMES, RedoCheckoutButtons, type RedoContextValue, type RedoCoverageClient, type RedoError, RedoErrorType, RedoInfoCard, RedoProvider, useLoad, useRedoCoverageClient };
+/**
+ * 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>;
+ * }
+ * ```
+ */
+declare function useDisablePurpleDotPreorder(disablePreorderButtons: boolean): void;
+
+export { REDO_REQUIRED_HOSTNAMES, RedoCheckoutButtons, RedoErrorType, RedoInfoCard, RedoProvider, useDisablePurpleDotPreorder, useLoad, useRedoCoverageClient };
+export type { CartAttributeKey, CartInfoToEnable, CartProductVariantFragment, LoadState, Loader, RedoContextValue, RedoCoverageClient, RedoError };

package/eslint.config.mjs

@@ -0,0 +1,22 @@
+import tseslint from "typescript-eslint";
+import prettier from "eslint-config-prettier";
+
+export default tseslint.config(
+  tseslint.configs.recommended,
+  prettier,
+  { ignores: ["dist/", "node_modules/"] },
+  {
+    rules: {
+      "@typescript-eslint/no-unused-vars": ["error", {
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_",
+        caughtErrorsIgnorePattern: "^_",
+      }],
+      "@typescript-eslint/no-explicit-any": "error",
+      "prefer-const": "error",
+      "no-empty": ["error", { allowEmptyCatch: false }],
+      "no-extra-boolean-cast": "error",
+      eqeqeq: ["error", "always"],
+    },
+  },
+);

package/package.json

@@ -1,12 +1,18 @@
 {
   "name": "@redotech/redo-hydrogen",
-  "version": "1.4.6",
+  "version": "2.0.0",
   "description": "Utilities to enable and disable Redo coverage on Hydrogen stores",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types.d.ts",
   "scripts": {
-    "dev": "rollup -c --watch --bundleConfigAsCjs"
+    "dev": "rollup -c --watch --bundleConfigAsCjs",
+    "build": "rollup -c --bundleConfigAsCjs",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src/",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx}\"",
+    "e2e": "npm run build && cd e2e && npx playwright test"
   },
   "repository": {
     "type": "git",
@@ -17,27 +23,34 @@
     "url": "https://github.com/redoapp/redo-hydrogen/issues"
   },
   "peerDependencies": {
-    "@remix-run/react": "^2.8.0",
-    "@shopify/hydrogen": ">=2024.3.1",
-    "@shopify/hydrogen-react": ">=2024.3.1",
-    "react-dom": "^18.3.1"
+    "@shopify/hydrogen": ">=2025.7.0",
+    "@shopify/hydrogen-react": ">=2025.7.0",
+    "react-dom": ">=18.3.1",
+    "react-router": "^7.0.0"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^28.0.2",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^12.1.2",
+    "@rollup/plugin-typescript": "12.1.2",
+    "@shopify/hydrogen": "2025.7.0",
+    "@shopify/hydrogen-react": "2025.7.0",
     "@svgr/rollup": "^8.1.0",
-    "@types/react": "^19.0.8",
-    "@types/react-dom": "^19.0.4",
+    "@types/react": "^18.2.22",
+    "@types/react-dom": "^18.2.7",
+    "eslint": "^10.1.0",
+    "eslint-config-prettier": "^10.1.8",
     "nodemon": "^3.1.9",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "prettier": "^3.8.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-router": "7.9.2",
     "rollup": "^4.32.1",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "tslib": "^2.8.1",
-    "typescript": "^5.7.3"
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.57.1"
   },
   "keywords": [
     "Redo",

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

@@ -1,11 +1,11 @@
-import React, { MouseEvent, ReactNode, useEffect, useState } from "react";
-import { CartForm, CartActionInput, CartReturn, OptimisticCart } from "@shopify/hydrogen";
+import { MouseEvent, ReactNode, useEffect, useState } from "react";
+import { CartReturn, OptimisticCart } from "@shopify/hydrogen";
 import { useRedoCoverageClient } from "../providers/redo-coverage-client";
-import { CartInfoToEnable, RedoCoverageClient } from "../types";
+import { 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";
+import { getCartLines } from "../utils/cart";
 
 import CircleSpinner from "../utils/circle-spinner.svg";
 import { executeWithTimeout } from "../utils/timeout";
@@ -18,23 +18,20 @@ type CheckoutButtonUIResponse = {
 const getButtonsToShow = ({
   redoCoverageClient,
   cart,
-  storeId
+  storeId,
 }: {
-  redoCoverageClient: RedoCoverageClient,
-  cart: CartReturn | CartWithActionsDocs | OptimisticCart,
+  redoCoverageClient: RedoCoverageClient;
+  cart: CartReturn | CartWithActionsDocs | OptimisticCart;
   storeId: string;
 }): Promise<CheckoutButtonUIResponse | null> => {
   return new Promise<CheckoutButtonUIResponse | null>((resolve, reject) => {
-    fetch(
-      `https://${REDO_PUBLIC_API_HOSTNAME}/v2.2/stores/${storeId}/checkout-buttons-ui`,
-      {
-        method: "GET",
-        headers: {
-          "Content-Type": "application/json",
-        },
-      }
-    ).then(async (res) => {
-      let json = await res.json();
+    fetch(`https://${REDO_PUBLIC_API_HOSTNAME}/v2.2/stores/${storeId}/checkout-buttons-ui`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    }).then(async (res) => {
+      const json = await res.json();
 
       if (!json.html) {
         return resolve(null);
@@ -43,7 +40,7 @@ const getButtonsToShow = ({
       const ui = applyButtonVariables({
         redoCoverageClient,
         cart,
-        ui: json
+        ui: json,
       });
 
       if (!ui) {
@@ -58,41 +55,38 @@ const getButtonsToShow = ({
 const applyButtonVariables = ({
   redoCoverageClient,
   cart,
-  ui
+  ui,
 }: {
-  redoCoverageClient: RedoCoverageClient,
-  cart: CartReturn | CartWithActionsDocs | OptimisticCart,
-  ui: CheckoutButtonUIResponse
+  redoCoverageClient: RedoCoverageClient;
+  cart: CartReturn | CartWithActionsDocs | OptimisticCart;
+  ui: CheckoutButtonUIResponse;
 }): CheckoutButtonUIResponse | null => {
   if (!redoCoverageClient.eligible || !redoCoverageClient.price || !cart?.cost) {
     return null;
   }
 
   let currencyCode: CurrencyCode = cart.cost.subtotalAmount.currencyCode;
-  if (currencyCode === 'XXX') {
-    currencyCode = 'USD';
+  if (currencyCode === "XXX") {
+    currencyCode = "USD";
   }
 
-  const cartContainsRedo = !!(getCartLines(cart).some((cartItem) => cartItem.merchandise?.product?.vendor === 're:do'));
-  const combinedPrice = new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: currencyCode
+  const cartContainsRedo = !!getCartLines(cart).some((cartItem) => cartItem.merchandise?.product?.vendor === "re:do");
+  const combinedPrice = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: currencyCode,
   }).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;
   }
 
-  ui.html = ui.html.replaceAll('%combinedPrice%', combinedPrice);
+  ui.html = ui.html.replaceAll("%combinedPrice%", combinedPrice);
 
   return ui;
-}
+};
 
-const findAncestor = (
-  searchEl: HTMLElement | null,
-  findFn: (el: HTMLElement) => boolean
-) => {
-  if (searchEl == null) {
+const findAncestor = (searchEl: HTMLElement | null, findFn: (el: HTMLElement) => boolean) => {
+  if (searchEl === null) {
     return null;
   } else if (findFn(searchEl)) {
     return searchEl;
@@ -101,18 +95,12 @@ const findAncestor = (
   }
 };
 
-const RedoCheckoutButtons = (props: {
-  children?: ReactNode;
-  onClick?: (enabled: boolean) => void;
-}) => {
+const RedoCheckoutButtons = (props: { children?: ReactNode; onClick?: (enabled: boolean) => void }) => {
   const redoCoverageClient = useRedoCoverageClient();
-  let cart = redoCoverageClient.cart;
-  let checkoutUrl = redoCoverageClient.cart?.checkoutUrl || '/checkout';
-  let [redoProductToAdd, setRedoProductToAdd] =
-    useState<CartInfoToEnable | null>(null);
-  let [checkoutButtonsUI, setCheckoutButtonsUI] =
-    useState<CheckoutButtonUIResponse | null>(null);
-    
+  const cart = redoCoverageClient.cart;
+  const checkoutUrl = redoCoverageClient.cart?.checkoutUrl || "/checkout";
+  const [checkoutButtonsUI, setCheckoutButtonsUI] = useState<CheckoutButtonUIResponse | null>(null);
+
   const [buttonPending, setButtonPending] = useState(false);
 
   useEffect(() => {
@@ -128,24 +116,21 @@ const RedoCheckoutButtons = (props: {
     })();
   }, [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) */
+  /** 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');
+      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
-      );
-      
+      const result = await executeWithTimeout(functionToCall(), TIMEOUT_FOR_CHECKOUTS);
+
       if (props.onClick) {
         await props.onClick(result);
       }
@@ -159,27 +144,21 @@ const RedoCheckoutButtons = (props: {
   };
 
   const wrapperClickHandler = async (e: MouseEvent) => {
-    let clickedElement = e.target as HTMLElement;
+    const clickedElement = e.target as HTMLElement;
 
     if (!clickedElement.dataset) {
       return;
     }
 
-    const isCoverageButton = findAncestor(
-      clickedElement,
-      (el) => el.dataset?.target == "coverage-button"
-    );
+    const isCoverageButton = findAncestor(clickedElement, (el) => el.dataset?.target === "coverage-button");
 
-    const isNonCoverageButton = findAncestor(
-      clickedElement,
-      (el) => el.dataset?.target == "non-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);
+        console.error("Failed to update coverage state:", error);
       }
       window.location.href = checkoutUrl;
     }
@@ -189,15 +168,15 @@ const RedoCheckoutButtons = (props: {
     <div>
       {checkoutButtonsUI ? (
         <div onClick={wrapperClickHandler} style={{ position: "relative" }}>
-           {checkoutButtonsUI.css ? <style>{checkoutButtonsUI.css}</style> : ''}
-           <div
+          {checkoutButtonsUI.css ? <style>{checkoutButtonsUI.css}</style> : ""}
+          <div
             dangerouslySetInnerHTML={{ __html: checkoutButtonsUI.html }}
-            style={{ 
-              opacity: (buttonPending) ? 0.25 : 1,
-              transition: 'opacity 0.2s ease-in-out'
+            style={{
+              opacity: buttonPending ? 0.25 : 1,
+              transition: "opacity 0.2s ease-in-out",
             }}
           />
-          {(buttonPending) && ( 
+          {buttonPending && (
             <div
               style={{
                 position: "absolute",
@@ -213,7 +192,7 @@ const RedoCheckoutButtons = (props: {
             >
               <CircleSpinner />
             </div>
-          )} 
+          )}
         </div>
       ) : (
         props.children