@redotech/redo-hydrogen 1.1.0 → 1.1.1

package/dist/types.d.ts

@@ -10,11 +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;
@@ -28,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 }: {

package/package.json

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

@@ -7,6 +7,7 @@ import {
 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;
@@ -44,6 +45,10 @@ const getButtonsToShow = ({
         ui: json
       });
 
+      if(!ui) {
+        return reject(null);
+      }
+
       return resolve(ui);
     });
   });
@@ -58,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')) {
@@ -102,7 +116,7 @@ const RedoCheckoutButtons = (props: {
 
   useEffect(() => {
     (async () => {
-      if(!redoCoverageClient.storeId || !cart) {
+      if(!redoCoverageClient.eligible || !cart || !redoCoverageClient.storeId) {
         return;
       }
 
@@ -111,7 +125,7 @@ const RedoCheckoutButtons = (props: {
         setCheckoutButtonsUI(buttons);
       }
     })();
-  }, [cart, redoCoverageClient.price, redoCoverageClient.storeId]);
+  }, [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";
 
@@ -25,9 +25,18 @@ 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) {
+    if(!cart || !storeId) {
       return;
     }
 
@@ -68,6 +77,36 @@ 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);
@@ -78,7 +117,7 @@ const RedoProvider = ({
 
       setCartInfoToEnable(json.coverageProducts[0].cartInfoToEnable);
     })
-  }, [cart]);
+  }, [cart, storeId]);
   
   const contextVal: RedoContextValue = {
     enabled: true,
@@ -86,6 +125,7 @@ const RedoProvider = ({
     storeId,
     cartInfoToEnable,
     cart,
+    errors: (errors?.length && errors.length > 0) ? errors : undefined
   };
 
   return (
@@ -146,11 +186,19 @@ 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;
@@ -163,6 +211,9 @@ const useRedoCoverageClient = (): RedoCoverageClient => {
     },
     get storeId() {
       return redoContext.storeId;
+    },
+    get errors() {
+      return redoContext.errors;
     }
   }
 };

package/src/types.ts

@@ -12,11 +12,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 cartProduct(): CartProductVariantFragment | undefined;
+  get cartAttribute(): CartAttributeKey | undefined;
+  get errors(): RedoError[] | undefined;
 }
 
 type CartInfoToEnable = {
@@ -31,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
 }