@redotech/redo-hydrogen 1.4.5 → 1.4.7

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

@@ -0,0 +1,42 @@
+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

@@ -4,6 +4,7 @@ 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 { RedoInfoCard } from "./components/redo-info-modal";
+import { useDisablePurpleDotPreorder } from "./hooks/use-purple-dot-preorder";
 
 export {
   RedoCheckoutButtons,
@@ -12,7 +13,8 @@ export {
   useLoad,
   REDO_REQUIRED_HOSTNAMES,
   RedoErrorType,
-  RedoInfoCard
+  RedoInfoCard,
+  useDisablePurpleDotPreorder
 };
 
 export type {

package/src/utils/purple-dot.ts

@@ -0,0 +1,92 @@
+const DISABLED_ATTR = "data-redo-preorder-disabled";
+const ORIGINAL_DISABLED_ATTR = "data-redo-original-disabled";
+
+/**
+ * Finds add-to-cart buttons on the page
+ */
+function findAddToCartButtons(): HTMLButtonElement[] {
+  const buttons = document.querySelectorAll<HTMLButtonElement>(
+    'button[name="add"], button[type="submit"], .product-form__submit'
+  );
+
+  return Array.from(buttons).filter((button) => {
+    const text = button.textContent?.toLowerCase().trim() ?? "";
+    return text.includes("add to cart") || text.includes("add to bag");
+  });
+}
+
+/**
+ * Checks for Purple Dot preorder element and updates button states accordingly.
+ * Disables add-to-cart buttons when purple-dot-learn-more element is present.
+ * Re-enables them when the element is removed.
+ */
+export function updatePurpleDotButtons(): void {
+  const hasPurpleDot = document.querySelector("purple-dot-learn-more") !== null;
+  const addToCartButtons = findAddToCartButtons();
+
+  for (const button of addToCartButtons) {
+    if (hasPurpleDot) {
+      // Disable the button
+      if (!button.hasAttribute(DISABLED_ATTR)) {
+        // Preserve original disabled state
+        if (!button.hasAttribute(ORIGINAL_DISABLED_ATTR)) {
+          button.setAttribute(ORIGINAL_DISABLED_ATTR, String(button.disabled));
+        }
+
+        button.setAttribute(DISABLED_ATTR, "true");
+        button.disabled = true;
+        button.style.opacity = "0.5";
+        button.style.cursor = "not-allowed";
+        button.style.pointerEvents = "none";
+
+        // Add message if not already present
+        if (!button.parentElement?.querySelector(".redo-preorder-msg")) {
+          const msg = document.createElement("div");
+          msg.className = "redo-preorder-msg";
+          msg.textContent = "Preorder items cannot be added during exchanges";
+          msg.style.cssText =
+            "color: #d63031; font-size: 12px; margin-top: 8px; font-weight: 500;";
+          button.parentElement?.insertBefore(msg, button.nextSibling);
+        }
+      }
+    } else {
+      // Re-enable the button if we disabled it
+      if (button.hasAttribute(DISABLED_ATTR)) {
+        const wasDisabled =
+          button.getAttribute(ORIGINAL_DISABLED_ATTR) === "true";
+        button.removeAttribute(DISABLED_ATTR);
+        button.removeAttribute(ORIGINAL_DISABLED_ATTR);
+        button.disabled = wasDisabled;
+        button.style.opacity = "";
+        button.style.cursor = "";
+        button.style.pointerEvents = "";
+        button.parentElement?.querySelector(".redo-preorder-msg")?.remove();
+      }
+    }
+  }
+}
+
+/**
+ * Cleans up all disabled buttons (used on unmount).
+ * Restores original disabled state.
+ */
+export function cleanupPurpleDotButtons(): void {
+  const disabledButtons = Array.from(
+    document.querySelectorAll<HTMLButtonElement>(`button[${DISABLED_ATTR}]`)
+  );
+
+  for (const button of disabledButtons) {
+    const wasDisabled = button.getAttribute(ORIGINAL_DISABLED_ATTR) === "true";
+    button.removeAttribute(DISABLED_ATTR);
+    button.removeAttribute(ORIGINAL_DISABLED_ATTR);
+    button.disabled = wasDisabled;
+    button.style.opacity = "";
+    button.style.cursor = "";
+    button.style.pointerEvents = "";
+  }
+
+  // Remove all messages
+  document
+    .querySelectorAll(".redo-preorder-msg")
+    .forEach((msg) => msg.remove());
+}