@redotech/redo-hydrogen 1.0.1 → 1.1.0

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import { CartReturn, Storefront } from '@shopify/hydrogen';
+import { CartReturn } from '@shopify/hydrogen';
 import { ReactNode, DependencyList } from 'react';
 import { ProductVariant } from '@shopify/hydrogen-react/storefront-api-types';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -8,8 +8,11 @@ type CartAttributeKey = string;
 interface RedoCoverageClient {
     enable(): Promise<boolean>;
     disable(): Promise<boolean>;
+    get loading(): boolean;
     get enabled(): boolean;
     get price(): number;
+    get storeId(): string | undefined;
+    get cart(): CartReturn | undefined;
     get cartProduct(): CartProductVariantFragment | undefined;
     get cartAttribute(): CartAttributeKey | undefined;
 }
@@ -36,8 +39,6 @@ declare const useRedoCoverageClient: () => RedoCoverageClient;
 
 declare const RedoCheckoutButtons: (props: {
     cart: CartReturn;
-    storefront: Storefront;
-    storeId: string;
     children?: ReactNode;
     onClick?: (enabled: boolean) => void;
 }) => react_jsx_runtime.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redotech/redo-hydrogen",
-  "version": "1.0.1",
+  "version": "1.1.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

@@ -3,7 +3,6 @@ import {
   CartForm,
   CartActionInput,
   CartReturn,
-  Storefront,
 } from "@shopify/hydrogen";
 import { useRedoCoverageClient } from "../providers/redo-coverage-client";
 import { CartInfoToEnable, RedoCoverageClient } from "../types";
@@ -89,14 +88,12 @@ const findAncestor = (
 
 const RedoCheckoutButtons = (props: {
   cart: CartReturn;
-  storefront: Storefront;
-  storeId: string;
   children?: ReactNode;
   onClick?: (enabled: boolean) => void;
 }) => {
   const redoCoverageClient = useRedoCoverageClient();
-  let cart = props.cart;
-  let checkoutUrl = cart.checkoutUrl;
+  let cart = redoCoverageClient.cart;
+  let checkoutUrl = redoCoverageClient.cart?.checkoutUrl || '/checkout';
   let [redoProductToAdd, setRedoProductToAdd] =
     useState<CartInfoToEnable | null>(null);
   let [checkoutButtonsUI, setCheckoutButtonsUI] = useState<CheckoutButtonUIResponse | null>(
@@ -105,12 +102,16 @@ const RedoCheckoutButtons = (props: {
 
   useEffect(() => {
     (async () => {
-      const buttons = await getButtonsToShow({ redoCoverageClient, cart, storeId: props.storeId });
+      if(!redoCoverageClient.storeId || !cart) {
+        return;
+      }
+
+      const buttons = await getButtonsToShow({ redoCoverageClient, cart, storeId: redoCoverageClient.storeId });
       if(buttons) {
         setCheckoutButtonsUI(buttons);
       }
     })();
-  }, [cart, redoCoverageClient.price]);
+  }, [cart, redoCoverageClient.price, redoCoverageClient.storeId]);
 
   const wrapperClickHandler = async (e: MouseEvent) => {
     let clickedElement = e.target as HTMLElement;

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

@@ -10,7 +10,7 @@ const DEFAULT_REDO_CONTEXT_VALUE: RedoContextValue = {
   loading: true,
 }
 
-const RedoContext = createContext(DEFAULT_REDO_CONTEXT_VALUE);
+const RedoContext = createContext<RedoContextValue>(DEFAULT_REDO_CONTEXT_VALUE);
 
 const RedoProvider = ({
   cart,
@@ -27,6 +27,10 @@ const RedoProvider = ({
   const [loading, setLoading] = useState<boolean>(true);
 
   useEffect(() => {
+    if(!cart) {
+      return;
+    }
+
     fetch(`https://${REDO_PUBLIC_API_HOSTNAME}/v2.2/stores/${storeId}/coverage-products`, {
       method: 'POST',
       headers: {
@@ -67,9 +71,12 @@ const RedoProvider = ({
       let json = await res.json();
 
       setLoading(false);
-  
-      setCartInfoToEnable(json.cartInfoToEnable);
-      // setCartInfoToEnable(json.coverageProducts[0].cartInfoToEnable);
+      
+      if(!json?.coverageProducts?.[0]?.cartInfoToEnable) {
+        return;
+      }
+
+      setCartInfoToEnable(json.coverageProducts[0].cartInfoToEnable);
     })
   }, [cart]);
   
@@ -136,17 +143,26 @@ const useRedoCoverageClient = (): RedoCoverageClient => {
       });
       return true;
     },
+    get loading() {
+      return redoContext.loading;
+    },
     get enabled() {
       return redoContext.enabled;
     },
     get price() {
       return Number(redoContext.cartInfoToEnable?.selectedVariant.price.amount);
     },
+    get cart() {
+      return redoContext.cart;
+    },
     get cartProduct() {
       return redoContext.cartInfoToEnable?.selectedVariant;
     },
     get cartAttribute() {
       return redoContext.cartInfoToEnable?.cartAttribute
+    },
+    get storeId() {
+      return redoContext.storeId;
     }
   }
 };

package/src/types.ts

@@ -10,8 +10,11 @@ type CartAttributeKey = string;
 interface RedoCoverageClient {
   enable(): Promise<boolean>;
   disable(): Promise<boolean>;
+  get loading(): boolean;
   get enabled(): boolean;
   get price(): number;
+  get storeId(): string | undefined;
+  get cart(): CartReturn | undefined;
   get cartProduct(): CartProductVariantFragment | undefined
   get cartAttribute(): CartAttributeKey | undefined
 }

package/src/utils/cart.ts

@@ -1,7 +1,6 @@
 import { FetcherWithComponents, useFetcher } from "@remix-run/react";
 import { CartInfoToEnable } from "../types";
 import { CartForm, CartReturn } from "@shopify/hydrogen";
-import { CartLine } from "@shopify/hydrogen-react/storefront-api-types";
 import type { AppData } from '@remix-run/react/dist/data';
 import React from 'react'