@redotech/redo-hydrogen 1.0.2 → 1.1.1

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';
@@ -10,9 +10,13 @@ interface RedoCoverageClient {
     disable(): Promise<boolean>;
     get loading(): boolean;
     get enabled(): boolean;
-    get price(): number;
+    get eligible(): boolean;
+    get price(): number | undefined;
+    get storeId(): string | undefined;
+    get cart(): CartReturn | undefined;
     get cartProduct(): CartProductVariantFragment | undefined;
     get cartAttribute(): CartAttributeKey | undefined;
+    get errors(): RedoError[] | undefined;
 }
 type CartInfoToEnable = {
     productId: string;
@@ -26,6 +30,17 @@ type RedoContextValue = {
     storeId?: string;
     cartInfoToEnable?: CartInfoToEnable;
     cart?: CartReturn;
+    errors?: RedoError[];
+};
+declare enum RedoErrorType {
+    ApiBadRequest = "API_BAD_REQUEST",
+    ApiServerError = "API_SERVER_ERROR",
+    ApiUnknownError = "API_UNKNOWN_ERROR"
+}
+type RedoError = {
+    type: RedoErrorType;
+    message: string;
+    context: any;
 };
 
 declare const RedoProvider: ({ cart, storeId, children }: {
@@ -37,8 +52,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.2",
+  "version": "1.1.1",
   "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,11 +3,11 @@ import {
   CartForm,
   CartActionInput,
   CartReturn,
-  Storefront,
 } from "@shopify/hydrogen";
 import { useRedoCoverageClient } from "../providers/redo-coverage-client";
 import { CartInfoToEnable, RedoCoverageClient } from "../types";
 import { REDO_PUBLIC_API_HOSTNAME } from "../utils/security";
+import { CurrencyCode } from "@shopify/hydrogen-react/storefront-api-types";
 
 type CheckoutButtonUIResponse = {
   html: string;
@@ -45,6 +45,10 @@ const getButtonsToShow = ({
         ui: json
       });
 
+      if(!ui) {
+        return reject(null);
+      }
+
       return resolve(ui);
     });
   });
@@ -59,10 +63,19 @@ const applyButtonVariables = ({
   cart: CartReturn,
   ui: CheckoutButtonUIResponse
 }): CheckoutButtonUIResponse | null => {
+  if(!redoCoverageClient.eligible || !redoCoverageClient.price) {
+    return null;
+  }
+
+  let currencyCode: CurrencyCode = cart.cost.totalAmount.currencyCode;
+  if(currencyCode === 'XXX') {
+    currencyCode = 'USD';
+  }
+
   const cartContainsRedo = !!(cart.lines.nodes.some((cartItem) => cartItem.merchandise?.product?.vendor === 're:do'));
   const combinedPrice = new Intl.NumberFormat('en-US', {
     style: 'currency',
-    currency: cart.cost.totalAmount.currencyCode
+    currency: currencyCode
   }).format(Number(cart.cost.totalAmount.amount) + (cartContainsRedo ? 0 : redoCoverageClient.price));
 
   if(!combinedPrice || !combinedPrice.length || combinedPrice.includes('NaN')) {
@@ -89,14 +102,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 +116,16 @@ const RedoCheckoutButtons = (props: {
 
   useEffect(() => {
     (async () => {
-      const buttons = await getButtonsToShow({ redoCoverageClient, cart, storeId: props.storeId });
+      if(!redoCoverageClient.eligible || !cart || !redoCoverageClient.storeId) {
+        return;
+      }
+
+      const buttons = await getButtonsToShow({ redoCoverageClient, cart, storeId: redoCoverageClient.storeId });
       if(buttons) {
         setCheckoutButtonsUI(buttons);
       }
     })();
-  }, [cart, redoCoverageClient.price]);
+  }, [cart, redoCoverageClient.eligible, redoCoverageClient.price, redoCoverageClient.storeId]);
 
   const wrapperClickHandler = async (e: MouseEvent) => {
     let clickedElement = e.target as HTMLElement;

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

@@ -1,7 +1,7 @@
 import { useFetcher } from "@remix-run/react";
 import { CartReturn } from "@shopify/hydrogen";
 import { createContext, ReactNode, useContext, useEffect, useState } from "react";
-import { CartProductVariantFragment, CartAttributeKey, CartInfoToEnable, RedoContextValue, RedoCoverageClient } from "../types";
+import { CartProductVariantFragment, CartAttributeKey, CartInfoToEnable, RedoContextValue, RedoCoverageClient, RedoError, RedoErrorType } from "../types";
 import { REDO_PUBLIC_API_HOSTNAME } from "../utils/security";
 import { addProductToCartIfNeeded, removeProductFromCartIfNeeded, setCartRedoEnabledAttribute, useFetcherWithPromise } from "../utils/cart";
 
@@ -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,
@@ -25,8 +25,21 @@ const RedoProvider = ({
   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 {
+      setErrors([...errors, newError]);
+    }
+    return newError;
+  }
 
   useEffect(() => {
+    if(!cart || !storeId) {
+      return;
+    }
+
     fetch(`https://${REDO_PUBLIC_API_HOSTNAME}/v2.2/stores/${storeId}/coverage-products`, {
       method: 'POST',
       headers: {
@@ -64,13 +77,47 @@ const RedoProvider = ({
       })
     })
     .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.",
+          context: {
+            json: await res.json()
+          }
+        });
+        return;
+      } 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.",
+          context: {
+            json: await res.json()
+          }
+        });
+        return;
+      } 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()
+          }
+        });
+        return;
+      }
+
       let json = await res.json();
 
       setLoading(false);
       
+      if(!json?.coverageProducts?.[0]?.cartInfoToEnable) {
+        return;
+      }
+
       setCartInfoToEnable(json.coverageProducts[0].cartInfoToEnable);
     })
-  }, [cart]);
+  }, [cart, storeId]);
   
   const contextVal: RedoContextValue = {
     enabled: true,
@@ -78,6 +125,7 @@ const RedoProvider = ({
     storeId,
     cartInfoToEnable,
     cart,
+    errors: (errors?.length && errors.length > 0) ? errors : undefined
   };
 
   return (
@@ -138,17 +186,34 @@ const useRedoCoverageClient = (): RedoCoverageClient => {
     get loading() {
       return redoContext.loading;
     },
+    get eligible() {
+      return !this.loading && !!this.price && !!this.cartProduct;
+    },
     get enabled() {
       return redoContext.enabled;
     },
     get price() {
-      return Number(redoContext.cartInfoToEnable?.selectedVariant.price.amount);
+      let priceToEnable = redoContext.cartInfoToEnable?.selectedVariant?.price?.amount;
+      if(!priceToEnable || Number(priceToEnable).toString() === 'NaN') {
+        return undefined;
+      }
+
+      return Number(priceToEnable);
+    },
+    get cart() {
+      return redoContext.cart;
     },
     get cartProduct() {
       return redoContext.cartInfoToEnable?.selectedVariant;
     },
     get cartAttribute() {
       return redoContext.cartInfoToEnable?.cartAttribute
+    },
+    get storeId() {
+      return redoContext.storeId;
+    },
+    get errors() {
+      return redoContext.errors;
     }
   }
 };

package/src/types.ts

@@ -12,9 +12,13 @@ interface RedoCoverageClient {
   disable(): Promise<boolean>;
   get loading(): boolean;
   get enabled(): boolean;
-  get price(): number;
-  get cartProduct(): CartProductVariantFragment | undefined
-  get cartAttribute(): CartAttributeKey | undefined
+  get eligible(): boolean;
+  get price(): number | undefined;
+  get storeId(): string | undefined;
+  get cart(): CartReturn | undefined;
+  get cartProduct(): CartProductVariantFragment | undefined;
+  get cartAttribute(): CartAttributeKey | undefined;
+  get errors(): RedoError[] | undefined;
 }
 
 type CartInfoToEnable = {
@@ -29,13 +33,31 @@ type RedoContextValue = {
   loading: boolean,
   storeId?: string,
   cartInfoToEnable?: CartInfoToEnable,
-  cart?: CartReturn
+  cart?: CartReturn,
+  errors?: RedoError[],
 };
 
+enum RedoErrorType {
+  ApiBadRequest = "API_BAD_REQUEST",
+  ApiServerError = "API_SERVER_ERROR",
+  ApiUnknownError = "API_UNKNOWN_ERROR"
+};
+
+type RedoError = {
+  type: RedoErrorType,
+  message: string,
+  context: any
+};
+
+export {
+  RedoErrorType,
+}
+
 export type {
   CartAttributeKey,
   CartInfoToEnable,
   RedoContextValue,
   RedoCoverageClient,
-  CartProductVariantFragment
+  CartProductVariantFragment,
+  RedoError
 }

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'