@redotech/redo-hydrogen 1.0.0

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

@@ -0,0 +1,157 @@
+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 { REDO_PUBLIC_API_HOSTNAME_LOCAL } from "../utils/security";
+import { addProductToCartIfNeeded, removeProductFromCartIfNeeded, setCartRedoEnabledAttribute, useFetcherWithPromise } from "../utils/cart";
+
+const DEFAULT_REDO_CONTEXT_VALUE: RedoContextValue = {
+  enabled: false,
+  loading: true,
+}
+
+const RedoContext = createContext(DEFAULT_REDO_CONTEXT_VALUE);
+
+const RedoProvider = ({
+  cart,
+  storeId,
+  children
+}: {
+  cart: CartReturn,
+  storeId: string,
+  children: ReactNode,
+}): ReactNode => {
+  const [cartProduct, setCartProduct] = useState();
+  const [cartAttribute, setCartAttribute] = useState<CartAttributeKey>();
+  const [cartInfoToEnable, setCartInfoToEnable] = useState<CartInfoToEnable>();
+  const [loading, setLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    fetch(`http://${REDO_PUBLIC_API_HOSTNAME_LOCAL}/v2.2/stores/${storeId}/coverage-products`, {
+      method: 'POST',
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        cart: {
+          lineItems: cart.lines.nodes.map((cartLine) => ({
+            id: cartLine.id,
+            originalPrice: {
+              amount: cartLine.merchandise?.price?.amount,
+              currency: cartLine.merchandise?.price?.currencyCode
+            },
+            priceTotal: {
+              amount: cartLine.cost?.totalAmount?.amount,
+              currency: cartLine.cost?.totalAmount?.currencyCode
+            },
+            product: {
+              id: cartLine.merchandise?.product?.id
+            },
+            variant: {
+              id: cartLine.merchandise?.id
+            },
+            quantity: cartLine.quantity,
+          })),
+          priceTotal: {
+            amount: cart.cost?.totalAmount?.amount,
+            currency: cart.cost?.totalAmount?.currencyCode
+          },
+        },
+        customer: {
+          id: cart.buyerIdentity?.customer?.id || '',
+          country: cart.buyerIdentity?.countryCode
+        }
+      })
+    })
+    .then(async (res) => {
+      let json = await res.json();
+
+      setLoading(false);
+  
+      setCartInfoToEnable(json.cartInfoToEnable);
+      // setCartInfoToEnable(json.coverageProducts[0].cartInfoToEnable);
+    })
+  }, [cart]);
+  
+  const contextVal: RedoContextValue = {
+    enabled: true,
+    loading,
+    storeId,
+    cartInfoToEnable,
+    cart,
+  };
+
+  return (
+    <RedoContext.Provider value={contextVal}>
+      {children}
+    </RedoContext.Provider>
+  );
+};
+
+const useRedoCoverageClient = (): RedoCoverageClient => {
+  const redoContext = useContext(RedoContext);
+  const fetcher = useFetcherWithPromise();
+
+  useEffect(() => {
+    if(redoContext.loading || !redoContext.cartInfoToEnable) {
+      return;
+    }
+    removeProductFromCartIfNeeded({
+      fetcher,
+      cart: redoContext.cart,
+      cartInfoToEnable: redoContext.cartInfoToEnable
+    });
+  }, [redoContext.loading])
+  
+  return {
+    enable: async () => {
+      if(redoContext.loading || !redoContext.cartInfoToEnable) {
+        return false;
+      }
+      let addProductResult = await addProductToCartIfNeeded({
+        fetcher,
+        cart: redoContext.cart,
+        cartInfoToEnable: redoContext.cartInfoToEnable,
+      });
+      await setCartRedoEnabledAttribute({
+        fetcher,
+        cartInfoToEnable: redoContext.cartInfoToEnable,
+        enabled: true
+      });
+      return true;
+    },
+    disable: async () => {
+      if(!redoContext.cartInfoToEnable) {
+        return false;
+      }
+      await removeProductFromCartIfNeeded({
+        fetcher,
+        cart: redoContext.cart,
+        cartInfoToEnable: redoContext.cartInfoToEnable
+      });
+      await setCartRedoEnabledAttribute({
+        fetcher,
+        cartInfoToEnable: redoContext.cartInfoToEnable,
+        enabled: false
+      });
+      return true;
+    },
+    get enabled() {
+      return redoContext.enabled;
+    },
+    get price() {
+      return Number(redoContext.cartInfoToEnable?.selectedVariant.price.amount);
+    },
+    get cartProduct() {
+      return redoContext.cartInfoToEnable?.selectedVariant;
+    },
+    get cartAttribute() {
+      return redoContext.cartInfoToEnable?.cartAttribute
+    }
+  }
+};
+
+export {
+  RedoProvider,
+  useRedoCoverageClient
+}

package/src/types.ts

@@ -0,0 +1,40 @@
+import { CartReturn } from "@shopify/hydrogen";
+import { ProductVariant } from "@shopify/hydrogen-react/storefront-api-types";
+
+type CartProductVariantFragment = Omit<ProductVariant, 
+  "components" | "metafields" | "quantityPriceBreaks" | "quantityRule" | "requiresComponents" | "requiresShipping" | "storeAvailability" | "taxable" | "weightUnit"
+>;
+
+type CartAttributeKey = string;
+
+interface RedoCoverageClient {
+  enable(): Promise<boolean>;
+  disable(): Promise<boolean>;
+  get enabled(): boolean;
+  get price(): number;
+  get cartProduct(): CartProductVariantFragment | undefined
+  get cartAttribute(): CartAttributeKey | undefined
+}
+
+type CartInfoToEnable = {
+  productId: string,
+  variantId: string,
+  cartAttribute: CartAttributeKey,
+  selectedVariant: CartProductVariantFragment
+}
+
+type RedoContextValue = {
+  enabled: boolean,
+  loading: boolean,
+  storeId?: string,
+  cartInfoToEnable?: CartInfoToEnable,
+  cart?: CartReturn
+};
+
+export type {
+  CartAttributeKey,
+  CartInfoToEnable,
+  RedoContextValue,
+  RedoCoverageClient,
+  CartProductVariantFragment
+}

package/src/utils/cart.ts

@@ -0,0 +1,195 @@
+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'
+
+const DEFAULT_REDO_ENABLED_CART_ATTRIBUTE = 'redo_opted_in_from_cart';
+
+const addProductToCartIfNeeded = async ({
+  cart,
+  fetcher,
+  cartInfoToEnable
+}: {
+  cart: CartReturn | undefined,
+  fetcher: FetcherWithComponents<unknown>,
+  cartInfoToEnable: CartInfoToEnable
+}) => {
+  if(!cart) {
+    return await addProductToCart({ fetcher, cartInfoToEnable });
+  }
+
+  const redoProductsInCart = cart.lines.nodes.filter((cartLine) => {
+    return cartLine.merchandise.product.vendor === 're:do';
+  });
+  const correctRedoProductInCart = redoProductsInCart?.filter((cartLine) => {
+    return cartLine.merchandise.id === `gid://shopify/ProductVariant/${cartInfoToEnable.variantId}`;
+  });
+  if(redoProductsInCart.length === 0) {
+    return await addProductToCart({ fetcher, cartInfoToEnable });
+  } else if (redoProductsInCart.length === 1 && correctRedoProductInCart.length === 1 && correctRedoProductInCart[0].quantity === 1) {
+    // No action needed
+    return;
+  } else {
+    let isSuccess = true;
+
+    await removeLinesFromCart({ fetcher, lineIds: redoProductsInCart.map((cartLine) => cartLine.id) });
+    await addProductToCart({ fetcher, cartInfoToEnable });
+
+    return;
+  }
+};
+
+const removeLinesFromCart = async ({
+  fetcher,
+  lineIds
+}: {
+  fetcher: FetcherWithComponents<unknown>,
+  lineIds: string[]
+}) => {
+  const formInput = {
+    action: CartForm.ACTIONS.LinesRemove,
+    inputs: {
+      lineIds
+    }
+  }
+
+  await fetcher.submit(
+    {
+      [CartForm.INPUT_NAME]: JSON.stringify(formInput),
+    },
+    {method: 'POST', action: '/cart'},
+  );
+};
+
+const removeProductFromCartIfNeeded = async ({
+  cart,
+  fetcher,
+  cartInfoToEnable
+}: {
+  cart: CartReturn | undefined,
+  fetcher: FetcherWithComponents<unknown>,
+  cartInfoToEnable: CartInfoToEnable
+}) => {
+  if(!cart) {
+    console.error('No cart');
+    return;
+  }
+
+  const redoProductsInCart = cart.lines.nodes.filter((cartLine) => {
+    return cartLine.merchandise.product.vendor === 're:do';
+  });
+
+  if(redoProductsInCart.length !== 0) {
+    await removeLinesFromCart({ fetcher, lineIds: redoProductsInCart.map((cartLine) => cartLine.id) });
+  } else {
+  }
+};
+
+const addProductToCart = async ({
+  fetcher,
+  cartInfoToEnable
+}: {
+  fetcher: FetcherWithComponents<unknown>,
+  cartInfoToEnable: CartInfoToEnable
+}) => {
+  const redoProductLine = {
+    "merchandiseId": `gid://shopify/ProductVariant/${cartInfoToEnable.variantId}`,
+    "quantity": 1,
+    "selectedVariant": cartInfoToEnable.selectedVariant
+  };
+
+  const formInput = {
+    action: CartForm.ACTIONS.LinesAdd,
+    inputs: {
+      lines: [
+        redoProductLine
+      ]
+    }
+  }
+
+  await fetcher.submit(
+    {
+      [CartForm.INPUT_NAME]: JSON.stringify(formInput),
+    },
+    {method: 'POST', action: '/cart'},
+  );
+};
+
+const setCartRedoEnabledAttribute = async ({
+  fetcher,
+  cartInfoToEnable,
+  enabled
+}: {
+  fetcher: FetcherWithComponents<unknown>,
+  cartInfoToEnable: CartInfoToEnable | null,
+  enabled: boolean
+}) => {
+  const formInput = {
+    action: CartForm.ACTIONS.AttributesUpdateInput,
+    inputs: {
+      attributes: [
+        {
+          key: cartInfoToEnable?.cartAttribute || DEFAULT_REDO_ENABLED_CART_ATTRIBUTE,
+          value: enabled.toString()
+        }
+      ]
+    }
+  }
+
+  await fetcher.submit(
+    {
+      [CartForm.INPUT_NAME]: JSON.stringify(formInput),
+    },
+    {method: 'POST', action: '/cart'},
+  );
+};
+
+type FetcherData<T> = NonNullable<T | unknown> // FIXME: used to use SerializeFrom which is deprecated. Can this be better typed?
+type ResolveFunction<T> = (value: FetcherData<T>) => void
+
+function useFetcherWithPromise<TData = AppData>(opts?: Parameters<typeof useFetcher>[0]) {
+  const fetcher = useFetcher<TData>(opts)
+  const resolveRef = React.useRef<ResolveFunction<TData>>(null)
+  const promiseRef = React.useRef<Promise<FetcherData<TData>>>(null)
+
+  if (!promiseRef.current) {
+    promiseRef.current = new Promise<FetcherData<TData>>((resolve) => {
+      resolveRef.current = resolve
+    })
+  }
+
+  const resetResolver = React.useCallback(() => {
+    promiseRef.current = new Promise((resolve) => {
+      resolveRef.current = resolve
+    })
+  }, [promiseRef, resolveRef])
+
+  const submit = React.useCallback(
+    async (...args: Parameters<typeof fetcher.submit>) => {
+      fetcher.submit(...args);
+      return promiseRef.current
+    },
+    [fetcher, promiseRef]
+  )
+
+  React.useEffect(() => {
+    if (fetcher.state === 'idle') {
+      if (fetcher.data) {
+        resolveRef.current?.(fetcher.data)
+      }
+      resetResolver()
+    }
+  }, [fetcher, resetResolver])
+
+  return { ...fetcher, submit }
+}
+
+export {
+  DEFAULT_REDO_ENABLED_CART_ATTRIBUTE,
+  addProductToCartIfNeeded,
+  removeProductFromCartIfNeeded,
+  setCartRedoEnabledAttribute,
+  useFetcherWithPromise
+};

package/src/utils/react-utils.ts

@@ -0,0 +1,50 @@
+import {
+  DependencyList,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+
+export interface Loader<T> {
+  (abort: AbortSignal): Promise<T>;
+}
+
+export interface LoadState<T> {
+  error?: any;
+  pending: boolean;
+  value?: T;
+}
+
+export function useLoad<T>(fn: Loader<T>, deps: DependencyList): LoadState<T> {
+  const [state, setState] = useState<LoadState<T>>({ pending: false });
+
+  useEffect(() => {
+    const abortController = new AbortController();
+    setState((state) => ({ ...state, pending: true }));
+    fn(abortController.signal).then(
+      (value) => setState({ pending: false, value }),
+      (error) => {
+        if (
+          !(
+            error.message.includes("Request aborted for RPC method") ||
+            error.code === "ERR_CANCELED" ||
+            error.message === "Another request is in flight"
+          )
+        ) {
+          setState({ pending: false, error });
+        }
+      },
+    );
+    return () => {
+      abortController.abort();
+      setState((state) => ({ ...state, pending: false }));
+    };
+    // The way useLoad() is designed, we have no choice but to trust that the user gave us the correct deps for fn().
+    // We could fix this by marking useLoad() as a custom hook, and then exhaustive-deps would enforce that for us.
+    // https://www.npmjs.com/package/eslint-plugin-react-hooks#advanced-configuration
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+
+  return state;
+}

package/src/utils/security.ts

@@ -0,0 +1,13 @@
+const REDO_PUBLIC_API_HOSTNAME = 'api.getredo.com';
+const REDO_PUBLIC_API_HOSTNAME_LOCAL = 'localhost:8001';
+
+const REDO_REQUIRED_HOSTNAMES = [
+  REDO_PUBLIC_API_HOSTNAME,
+  REDO_PUBLIC_API_HOSTNAME_LOCAL
+];
+
+export {
+  REDO_REQUIRED_HOSTNAMES,
+  REDO_PUBLIC_API_HOSTNAME,
+  REDO_PUBLIC_API_HOSTNAME_LOCAL,
+};

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src", "src/index.ts"]
+}