@redotech/redo-hydrogen 1.2.2 → 1.3.0

package/dist/types.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redotech/redo-hydrogen",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "Utilities to enable and disable Redo coverage on Hydrogen stores",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -26,6 +26,7 @@
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.2",
+    "@svgr/rollup": "^8.1.0",
     "@types/react": "^19.0.8",
     "nodemon": "^3.1.9",
     "react": "^18.3.1",

package/rollup.config.js

@@ -4,6 +4,7 @@ import typescript from "@rollup/plugin-typescript";
 import dts from "rollup-plugin-dts";
 import terser from "@rollup/plugin-terser";
 import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import svgr from '@svgr/rollup';
 
 const packageJson = require("./package.json");
 
@@ -30,6 +31,7 @@ export default [
       commonjs(),
       typescript({ tsconfig: "./tsconfig.json" }),
       terser(),
+      svgr(),
     ],
     external: ["react", "react-dom"],
   },

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

@@ -1,9 +1,5 @@
 import React, { MouseEvent, ReactNode, useEffect, useState } from "react";
-import {
-  CartForm,
-  CartActionInput,
-  CartReturn,
-} from "@shopify/hydrogen";
+import { CartForm, CartActionInput, CartReturn, OptimisticCart } from "@shopify/hydrogen";
 import { useRedoCoverageClient } from "../providers/redo-coverage-client";
 import { CartInfoToEnable, RedoCoverageClient } from "../types";
 import { REDO_PUBLIC_API_HOSTNAME } from "../utils/security";
@@ -11,6 +7,9 @@ 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 CircleSpinner from "../utils/circle-spinner.svg";
+import { executeWithTimeout } from "../utils/timeout";
+
 type CheckoutButtonUIResponse = {
   html: string;
   css: string;
@@ -22,7 +21,7 @@ const getButtonsToShow = ({
   storeId
 }: {
   redoCoverageClient: RedoCoverageClient,
-  cart: CartReturn | CartWithActionsDocs,
+  cart: CartReturn | CartWithActionsDocs | OptimisticCart,
   storeId: string;
 }): Promise<CheckoutButtonUIResponse | null> => {
   return new Promise<CheckoutButtonUIResponse | null>((resolve, reject) => {
@@ -47,7 +46,7 @@ const getButtonsToShow = ({
         ui: json
       });
 
-      if(!ui) {
+      if (!ui) {
         return reject(null);
       }
 
@@ -62,15 +61,15 @@ const applyButtonVariables = ({
   ui
 }: {
   redoCoverageClient: RedoCoverageClient,
-  cart: CartReturn | CartWithActionsDocs,
+  cart: CartReturn | CartWithActionsDocs | OptimisticCart,
   ui: CheckoutButtonUIResponse
 }): CheckoutButtonUIResponse | null => {
-  if(!redoCoverageClient.eligible || !redoCoverageClient.price || !cart?.cost) {
+  if (!redoCoverageClient.eligible || !redoCoverageClient.price || !cart?.cost) {
     return null;
   }
 
-  let currencyCode: CurrencyCode = cart.cost.totalAmount.currencyCode;
-  if(currencyCode === 'XXX') {
+  let currencyCode: CurrencyCode = cart.cost.subtotalAmount.currencyCode;
+  if (currencyCode === 'XXX') {
     currencyCode = 'USD';
   }
 
@@ -78,9 +77,9 @@ const applyButtonVariables = ({
   const combinedPrice = new Intl.NumberFormat('en-US', {
     style: 'currency',
     currency: currencyCode
-  }).format(Number(cart.cost.totalAmount.amount) + (cartContainsRedo ? 0 : redoCoverageClient.price));
+  }).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;
   }
 
@@ -103,7 +102,7 @@ const findAncestor = (
 };
 
 const RedoCheckoutButtons = (props: {
-  cart: CartReturn | CartWithActionsDocs;
+  cart: CartReturn | CartWithActionsDocs | OptimisticCart;
   children?: ReactNode;
   onClick?: (enabled: boolean) => void;
 }) => {
@@ -112,23 +111,54 @@ const RedoCheckoutButtons = (props: {
   let checkoutUrl = redoCoverageClient.cart?.checkoutUrl || '/checkout';
   let [redoProductToAdd, setRedoProductToAdd] =
     useState<CartInfoToEnable | null>(null);
-  let [checkoutButtonsUI, setCheckoutButtonsUI] = useState<CheckoutButtonUIResponse | null>(
-    null
-  );
+  let [checkoutButtonsUI, setCheckoutButtonsUI] =
+    useState<CheckoutButtonUIResponse | null>(null);
+    
+  const [buttonPending, setButtonPending] = useState(false);
 
   useEffect(() => {
     (async () => {
-      if(!redoCoverageClient.eligible || !cart || !redoCoverageClient.storeId) {
+      if (!redoCoverageClient.eligible || !cart || !redoCoverageClient.storeId) {
         return;
       }
 
       const buttons = await getButtonsToShow({ redoCoverageClient, cart, storeId: redoCoverageClient.storeId });
-      if(buttons) {
+      if (buttons) {
         setCheckoutButtonsUI(buttons);
       }
     })();
   }, [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) */
+  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');
+      return;
+    }
+
+    setButtonPending(true);
+    try {
+      const functionToCall = isCoverage ? redoCoverageClient.enable : redoCoverageClient.disable;
+      const result = await executeWithTimeout(
+        functionToCall(),
+        TIMEOUT_FOR_CHECKOUTS
+      );
+      
+      if (props.onClick) {
+        await props.onClick(result);
+      }
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setTimeout(() => {
+        setButtonPending(false);
+      }, DELAY_TO_ALLOW_CLICKING_AGAIN);
+    }
+  };
+
   const wrapperClickHandler = async (e: MouseEvent) => {
     let clickedElement = e.target as HTMLElement;
 
@@ -136,26 +166,21 @@ const RedoCheckoutButtons = (props: {
       return;
     }
 
-    if (
-      findAncestor(
-        clickedElement,
-        (el) => el.dataset?.target == "coverage-button"
-      )
-    ) {
-      const attachResult = await redoCoverageClient.enable();
-      if (props.onClick) {
-        await props.onClick(attachResult);
-      }
-      window.location.href = checkoutUrl;
-    } else if (
-      findAncestor(
-        clickedElement,
-        (el) => el.dataset.target == "non-coverage-button"
-      )
-    ) {
-      await redoCoverageClient.disable();
-      if (props.onClick) {
-        await props.onClick(false);
+    const isCoverageButton = findAncestor(
+      clickedElement,
+      (el) => el.dataset?.target == "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);
       }
       window.location.href = checkoutUrl;
     }
@@ -164,11 +189,32 @@ const RedoCheckoutButtons = (props: {
   return (
     <div>
       {checkoutButtonsUI ? (
-        <div onClick={wrapperClickHandler}>
-          {
-            checkoutButtonsUI.css ? <style>{checkoutButtonsUI.css}</style> : ''
-          }
-          <div dangerouslySetInnerHTML={{ __html: checkoutButtonsUI.html }} />
+        <div onClick={wrapperClickHandler} style={{ position: "relative" }}>
+           {checkoutButtonsUI.css ? <style>{checkoutButtonsUI.css}</style> : ''}
+           <div
+            dangerouslySetInnerHTML={{ __html: checkoutButtonsUI.html }}
+            style={{ 
+              opacity: (buttonPending) ? 0.25 : 1,
+              transition: 'opacity 0.2s ease-in-out'
+            }}
+          />
+          {(buttonPending) && ( 
+            <div
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: "100%",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                zIndex: 1,
+              }}
+            >
+              <CircleSpinner />
+            </div>
+          )} 
         </div>
       ) : (
         props.children

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

@@ -1,9 +1,9 @@
 import { useFetcher } from "@remix-run/react";
-import { CartReturn } from "@shopify/hydrogen";
+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 { REDO_PUBLIC_API_HOSTNAME } from "../utils/security";
-import { addProductToCartIfNeeded, removeProductFromCartIfNeeded, setCartRedoEnabledAttribute, useFetcherWithPromise, isCartWithActionsDocs, getCartLines, useWaitCartIdle } from "../utils/cart";
+import { addProductToCartIfNeeded, removeProductFromCartIfNeeded, setCartRedoEnabledAttribute, useFetcherWithPromise, isCartWithActionsDocs, getCartLines, useWaitCartIdle, isOptimisticCart } from "../utils/cart";
 import { CartWithActionsDocs } from "@shopify/hydrogen-react/dist/types/cart-types";
 
 const DEFAULT_REDO_CONTEXT_VALUE: RedoContextValue = {
@@ -18,7 +18,7 @@ const RedoProvider = ({
   storeId,
   children
 }: {
-  cart: CartReturn | CartWithActionsDocs,
+  cart: CartReturn | CartWithActionsDocs | OptimisticCart,
   storeId: string,
   children: ReactNode,
 }): ReactNode => {
@@ -37,7 +37,7 @@ const RedoProvider = ({
   }
 
   useEffect(() => {
-    if(!cart || !storeId) {
+    if(!cart || !storeId || isOptimisticCart(cart)) {
       return;
     }
 

package/src/svg.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}

package/src/types.ts

@@ -1,4 +1,4 @@
-import { CartReturn } from "@shopify/hydrogen";
+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";
 
@@ -16,7 +16,7 @@ interface RedoCoverageClient {
   get eligible(): boolean;
   get price(): number | undefined;
   get storeId(): string | undefined;
-  get cart(): CartReturn | CartWithActionsDocs | undefined;
+  get cart(): CartReturn | CartWithActionsDocs | OptimisticCart | undefined;
   get cartProduct(): CartProductVariantFragment | undefined;
   get cartAttribute(): CartAttributeKey | undefined;
   get errors(): RedoError[] | undefined;
@@ -34,7 +34,7 @@ type RedoContextValue = {
   loading: boolean,
   storeId?: string,
   cartInfoToEnable?: CartInfoToEnable,
-  cart?: CartReturn | CartWithActionsDocs,
+  cart?: CartReturn | CartWithActionsDocs | OptimisticCart,
   errors?: RedoError[],
 };
 

package/src/utils/cart.ts

@@ -1,6 +1,6 @@
 import { FetcherWithComponents, useFetcher } from "@remix-run/react";
 import { CartInfoToEnable } from "../types";
-import { CartForm, CartReturn } from "@shopify/hydrogen";
+import { CartForm, CartReturn, OptimisticCart, OptimisticCartLine } from "@shopify/hydrogen";
 import type { AppData } from '@remix-run/react/dist/data';
 import React, { useCallback, useEffect, useRef } from 'react'
 import { CartWithActionsDocs } from "@shopify/hydrogen-react/dist/types/cart-types";
@@ -8,22 +8,29 @@ import { CartLine, ComponentizableCartLine } from "@shopify/hydrogen-react/store
 
 const DEFAULT_REDO_ENABLED_CART_ATTRIBUTE = 'redo_opted_in_from_cart';
 
-const isCartWithActionsDocs = (cart: CartReturn | CartWithActionsDocs): cart is CartWithActionsDocs => {
+const isCartWithActionsDocs = (cart: CartReturn | CartWithActionsDocs| OptimisticCart): 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)) {
+const getCartLines = (cart: CartReturn | CartWithActionsDocs | OptimisticCart): Array<CartLine | ComponentizableCartLine> => {
+  if (isOptimisticCart(cart)) {
+    return cart.lines.nodes;
+  } else if (isCartWithActionsDocs(cart)) {
     return cart.lines;
   } else {
     return cart.lines.nodes ?? cart.lines.edges.map((edge) => edge.node);
   }
 }
 
+// https://shopify.dev/docs/api/hydrogen/2025-01/hooks/useoptimisticcart
+const isOptimisticCart = (cart: CartReturn | CartWithActionsDocs | OptimisticCart): cart is OptimisticCart => {
+  return 'isOptimistic' in cart && (cart.isOptimistic ?? false);
+}
+
 const isRedoInCart = ({
   cart
 }: {
-  cart: CartReturn | CartWithActionsDocs
+  cart: CartReturn | CartWithActionsDocs | OptimisticCart
 }): boolean => {
   if(!cart) {
     return false;
@@ -65,7 +72,7 @@ const addProductToCartIfNeeded = async ({
   waitCartIdle,
   cartInfoToEnable
 }: {
-  cart: CartReturn | CartWithActionsDocs | undefined,
+  cart: CartReturn | CartWithActionsDocs | OptimisticCart | undefined,
   fetcher: FetcherWithComponents<unknown>,
   waitCartIdle: WaitCartIdleCallback;
   cartInfoToEnable: CartInfoToEnable
@@ -101,7 +108,7 @@ const removeLinesFromCart = async ({
   waitCartIdle,
   lineIds
 }: {
-  cart: CartReturn | CartWithActionsDocs | undefined;
+  cart: CartReturn | CartWithActionsDocs | OptimisticCart | undefined;
   fetcher: FetcherWithComponents<unknown>;
   waitCartIdle: WaitCartIdleCallback;
   lineIds: string[];
@@ -132,7 +139,7 @@ const removeProductFromCartIfNeeded = async ({
   waitCartIdle,
   cartInfoToEnable
 }: {
-  cart: CartReturn | CartWithActionsDocs | undefined,
+  cart: CartReturn | CartWithActionsDocs | OptimisticCart | undefined,
   fetcher: FetcherWithComponents<unknown>,
   waitCartIdle: WaitCartIdleCallback
   cartInfoToEnable: CartInfoToEnable
@@ -159,7 +166,7 @@ const addProductToCart = async ({
   cartInfoToEnable,
 }: {
   waitCartIdle: WaitCartIdleCallback;
-  cart: CartReturn | CartWithActionsDocs | undefined,
+  cart: CartReturn | CartWithActionsDocs | OptimisticCart | undefined,
   fetcher: FetcherWithComponents<unknown>,
   cartInfoToEnable: CartInfoToEnable
 }) => {
@@ -197,7 +204,7 @@ const setCartRedoEnabledAttribute = async ({
   cartInfoToEnable,
   enabled
 }: {
-  cart: CartReturn | CartWithActionsDocs | undefined;
+  cart: CartReturn | CartWithActionsDocs | OptimisticCart | undefined;
   fetcher: FetcherWithComponents<unknown>;
   waitCartIdle: WaitCartIdleCallback;
   cartInfoToEnable: CartInfoToEnable | null;
@@ -270,17 +277,17 @@ function useFetcherWithPromise<TData = AppData>(opts?: Parameters<typeof useFetc
   return { ...fetcher, submit }
 }
 
-type WaitCartIdleCallback = () => Promise<CartReturn | CartWithActionsDocs>;
+type WaitCartIdleCallback = () => Promise<CartReturn | CartWithActionsDocs | OptimisticCart>;
 
 // This function allows us to await a cart idle state without breaking React rules.
 // It returns a function, which returns a promise, which will resolve once the cart value passed in reaches an idle state.
 // Not intended for use with CartReturn, but will accept that value if passed in to avoid breaking rules of hooks
-const useWaitCartIdle = (cart: CartReturn | CartWithActionsDocs | undefined) => {
+const useWaitCartIdle = (cart: CartReturn | CartWithActionsDocs | OptimisticCart | undefined) => {
   const resolveRef = useRef<any>(null)
   const promiseRef = useRef<any>(null)
 
   if (!promiseRef.current) {
-    promiseRef.current = new Promise<CartReturn | CartWithActionsDocs>((resolve) => {
+    promiseRef.current = new Promise<CartReturn | CartWithActionsDocs | OptimisticCart>((resolve) => {
       resolveRef.current = resolve
     })
   }
@@ -327,5 +334,6 @@ export {
   useFetcherWithPromise,
   useWaitCartIdle,
   isCartWithActionsDocs,
-  getCartLines
+  getCartLines,
+  isOptimisticCart
 };

package/src/utils/circle-spinner.svg

@@ -0,0 +1,24 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+    fill="currentColor"
+    opacity=".25"
+  />
+  <path
+    d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
+    fill="currentColor"
+  >
+    <animateTransform
+      attributeName="transform"
+      type="rotate"
+      dur="0.75s"
+      values="0 12 12;360 12 12"
+      repeatCount="indefinite"
+    />
+  </path>
+</svg>

package/src/utils/timeout.ts

@@ -0,0 +1,12 @@
+export async function executeWithTimeout<T, E extends Error>(
+  promise: Promise<T>,
+  timeoutMs: number,
+  error: E = new Error("timeout") as E,
+): Promise<T> {
+  return Promise.race([
+    promise,
+    new Promise<never>((_, reject) =>
+      setTimeout(() => reject(error), timeoutMs),
+    ),
+  ]);
+}

package/tsconfig.json

@@ -16,5 +16,5 @@
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": ["src", "src/index.ts"]
+  "include": ["src", "src/index.ts", "src/svg.d.ts"]
 }