feat: shopper common (#92)

* feat: created shopper common

* feat: updated react shopper hooks to use common elements from shopper common

* chore: changeset

* fix: import was using local path

* chore: changeset

* chore: updated examples

.changeset/modern-experts-do.md

@@ -0,0 +1,7 @@
+---
+"@elasticpath/react-shopper-hooks": minor
+"@elasticpath/shopper-common": patch
+---
+
+- created shopper common package for common utilities and types
+- updated react shopper hooks to use common elements from shopper common

.changeset/violet-cameras-allow.md

@@ -0,0 +1,5 @@
+---
+"@elasticpath/d2c-schematics": patch
+---
+
+import was using local path

examples/algolia/src/components/header/cart/CartMenu.tsx

@@ -8,7 +8,7 @@ import {
 } from "@elasticpath/react-shopper-hooks";
 import { Popover, Transition } from "@headlessui/react";
 import { Fragment } from "react";
-import { ReadonlyNonEmptyArray } from "@elasticpath/react-shopper-hooks/dist/shared/types/read-only-non-empty-array";
+import { ReadonlyNonEmptyArray } from "@elasticpath/react-shopper-hooks";
 
 export default function CartMenu(): JSX.Element {
   const { state } = useCart();

examples/basic/src/components/header/cart/CartMenu.tsx

@@ -8,7 +8,7 @@ import {
 } from "@elasticpath/react-shopper-hooks";
 import { Popover, Transition } from "@headlessui/react";
 import { Fragment } from "react";
-import { ReadonlyNonEmptyArray } from "@elasticpath/react-shopper-hooks/dist/shared/types/read-only-non-empty-array";
+import { ReadonlyNonEmptyArray } from "@elasticpath/react-shopper-hooks";
 
 export default function CartMenu(): JSX.Element {
   const { state } = useCart();

packages/d2c-schematics/header/files/src/components/header/cart/CartMenu.tsx.template

@@ -8,7 +8,7 @@ import {
 } from "@elasticpath/react-shopper-hooks";
 import { Popover, Transition } from "@headlessui/react";
 import { Fragment } from "react";
-import { ReadonlyNonEmptyArray } from "@elasticpath/react-shopper-hooks/dist/shared/types/read-only-non-empty-array";
+import { ReadonlyNonEmptyArray } from "@elasticpath/react-shopper-hooks";
 
 export default function CartMenu(): JSX.Element {
   const { state } = useCart();

packages/react-shopper-hooks/lib/cart/cart-reducer.ts

@@ -4,31 +4,31 @@ import {
   CartState,
   CustomCartItem,
   PresentCartState,
-  RegularCartItem
+  RegularCartItem,
 } from "./types/cart-reducer-types"
 import { groupCartItems } from "./util/group-cart-items"
-import { isNonEmpty } from "../shared/types/read-only-non-empty-array"
+import { isNonEmpty } from "@elasticpath/shopper-common"
 
 export function calculateCartNumbers(
-  meta?: Cart["meta"]
+  meta?: Cart["meta"],
 ): Pick<PresentCartState, "withTax" | "withoutTax"> {
   const { without_tax, with_tax } = meta?.display_price ?? {}
 
   if (!with_tax?.formatted) {
     throw Error(
-      "Unexpected value was undefined: display_price.with_tax.formatted can't calculate cart numbers."
+      "Unexpected value was undefined: display_price.with_tax.formatted can't calculate cart numbers.",
     )
   }
 
   if (!without_tax?.formatted) {
     throw Error(
-      "Unexpected value was undefined: display_price.without_tax.formatted can't calculate cart numbers."
+      "Unexpected value was undefined: display_price.without_tax.formatted can't calculate cart numbers.",
     )
   }
 
   return {
     withTax: with_tax.formatted,
-    withoutTax: without_tax.formatted
+    withoutTax: without_tax.formatted,
   }
 }
 
@@ -39,7 +39,7 @@ export function cartReducer(state: CartState, action: CartAction): CartState {
         return state
       }
       return {
-        kind: "loading-cart-state"
+        kind: "loading-cart-state",
       }
     }
     case "updating-cart": {
@@ -50,7 +50,7 @@ export function cartReducer(state: CartState, action: CartAction): CartState {
         return {
           kind: "updating-cart-state",
           previousCart: state,
-          updateAction: action.payload.action
+          updateAction: action.payload.action,
         }
       }
       return state
@@ -73,18 +73,18 @@ export function cartReducer(state: CartState, action: CartAction): CartState {
       if (!items || items.length < 1) {
         return {
           kind: "empty-cart-state",
-          id
+          id,
         }
       }
 
       const filteredItems = items.filter(
-        item => item.type === "cart_item" || item.type === "custom_item"
+        (item) => item.type === "cart_item" || item.type === "custom_item",
       ) as (RegularCartItem | CustomCartItem)[]
 
       if (!isNonEmpty(filteredItems)) {
         return {
           kind: "empty-cart-state",
-          id
+          id,
         }
       }
 
@@ -94,7 +94,7 @@ export function cartReducer(state: CartState, action: CartAction): CartState {
         groupedItems: groupedItems,
         id,
         items: filteredItems,
-        ...calculateCartNumbers(meta)
+        ...calculateCartNumbers(meta),
       }
     default:
       return state

packages/react-shopper-hooks/lib/cart/types/cart-reducer-types.ts

@@ -1,6 +1,8 @@
 import { Cart, CartItem } from "@moltin/sdk"
-import { ReadonlyNonEmptyArray } from "@lib/shared/types/read-only-non-empty-array"
-import { DeepReadonly } from "@lib/shared/types/deep-read-only"
+import {
+  DeepReadonly,
+  ReadonlyNonEmptyArray,
+} from "@elasticpath/shopper-common"
 
 /** --------------------------------- Cart State --------------------------------- */
 

packages/react-shopper-hooks/lib/cart/util/get-initial-cart-state.ts

@@ -1,33 +1,33 @@
 import { Cart, CartIncluded, ResourceIncluded } from "@moltin/sdk"
 import { CartState, CustomCartItem, RegularCartItem } from "@lib/cart"
-import { isNonEmpty } from "@lib/shared/types/read-only-non-empty-array"
+import { isNonEmpty } from "@elasticpath/shopper-common"
 import { groupCartItems } from "./group-cart-items"
 import { calculateCartNumbers } from "../cart-reducer"
 
 export function getInitialState(
-  cart?: ResourceIncluded<Cart, CartIncluded>
+  cart?: ResourceIncluded<Cart, CartIncluded>,
 ): CartState {
   if (!cart) {
     return {
-      kind: "uninitialised-cart-state"
+      kind: "uninitialised-cart-state",
     }
   }
 
   if (!cart.included?.items) {
     return {
       kind: "empty-cart-state",
-      id: cart.data.id
+      id: cart.data.id,
     }
   }
 
   const items = cart.included.items.filter(
-    item => item.type === "cart_item" || item.type === "custom_item"
+    (item) => item.type === "cart_item" || item.type === "custom_item",
   ) as (RegularCartItem | CustomCartItem)[]
 
   if (!isNonEmpty(items)) {
     return {
       kind: "empty-cart-state",
-      id: cart.data.id
+      id: cart.data.id,
     }
   }
 
@@ -37,6 +37,6 @@ export function getInitialState(
     items,
     groupedItems: groupedItems,
     id: cart.data.id,
-    ...calculateCartNumbers(cart.data.meta)
+    ...calculateCartNumbers(cart.data.meta),
   }
 }

packages/react-shopper-hooks/lib/main.ts

@@ -4,3 +4,4 @@ export * from "./shared"
 export * from "./payment-gateway-register"
 export * from "./store"
 export * from "./product"
+export * from "@elasticpath/shopper-common"

packages/react-shopper-hooks/lib/payment-gateway-register/use-payment-gateway.ts

@@ -1,34 +1,41 @@
-import { useContext } from "react";
-import { PGRContext } from "./payment-gateway-provider";
+import { useContext } from "react"
+import { PGRContext } from "./payment-gateway-provider"
 import {
   PGRAction,
+  PGRState,
   ResolvePaymentFunction,
   SupportedGateway,
-} from "./types/payment-gateway-reducer-types";
+} from "./types/payment-gateway-reducer-types"
 
-export function usePaymentGateway() {
-  const context = useContext(PGRContext);
+export function usePaymentGateway(): {
+  registerGateway: (
+    resolvePayment: ResolvePaymentFunction,
+    type: SupportedGateway,
+  ) => void
+  state: PGRState
+} {
+  const context = useContext(PGRContext)
 
   if (context === undefined) {
-    throw new Error("usePaymentGateway must be used within a PGRProvider");
+    throw new Error("usePaymentGateway must be used within a PGRProvider")
   }
 
-  const { state, dispatch } = context;
+  const { state, dispatch } = context
 
   return {
     registerGateway: _registerGateway(dispatch),
     state,
-  };
+  }
 }
 
 function _registerGateway(dispatch: (action: PGRAction) => void) {
   return (
     resolvePayment: ResolvePaymentFunction,
-    type: SupportedGateway
+    type: SupportedGateway,
   ): void => {
     dispatch({
       type: "update-payment-gateway-register",
       payload: { type, resolvePayment },
-    });
-  };
+    })
+  }
 }

packages/react-shopper-hooks/lib/product/bundle/bundle-provider.tsx

@@ -7,16 +7,16 @@ import {
   useEffect,
   useState,
 } from "react"
-import type {
+import {
   BundleComponents,
   BundleConfiguration,
   BundleConfigurationSelectedOptions,
   ComponentProduct,
-} from "@lib/product/bundle/bundle.types"
+  BundleProduct,
+  configureBundle as _configureBundle,
+  createBundleConfigureValidator,
+} from "@elasticpath/shopper-common"
 import type { Moltin as EpccClient, ProductResponse, File } from "@moltin/sdk"
-import { createBundleConfigureValidator } from "@lib/product/bundle/util/create-bundle-configure-validator"
-import { BundleProduct } from "@lib/product"
-import { configureBundle as _configureBundle } from "@lib/product/services/product"
 import { useStore } from "@lib/store"
 
 interface BundleProductState {
@@ -38,7 +38,7 @@ interface BundleProductState {
 }
 
 export const BundleProductContext = createContext<BundleProductState | null>(
-  null
+  null,
 )
 
 export function BundleProductProvider({
@@ -68,7 +68,7 @@ export function BundleProductProvider({
 
   if (!initBundleConfiguration) {
     throw new Error(
-      "bundle_configuration on bundle product was unexpectedly undefined!"
+      "bundle_configuration on bundle product was unexpectedly undefined!",
     )
   }
 
@@ -80,7 +80,7 @@ export function BundleProductProvider({
   >(componentProductResponses)
 
   const [componentProductImages, setComponentProductImages] = useState<File[]>(
-    srcComponentProductImages
+    srcComponentProductImages,
   )
 
   const validator = useCallback(createBundleConfigureValidator(srcComponents), [
@@ -89,7 +89,7 @@ export function BundleProductProvider({
 
   const [selectedOptions, setSelectedOptions] =
     useState<BundleConfigurationSelectedOptions>(
-      initBundleConfiguration.selected_options
+      initBundleConfiguration.selected_options,
     )
 
   const configureBundle = useCallback(
@@ -100,15 +100,15 @@ export function BundleProductProvider({
         const updatedBundleProduct = await _configureBundle(
           configuredProduct.response.id,
           selectedOptions,
-          client
+          client,
         )
         setConfiguredProduct((prevState) => ({
           ...prevState,
           response: updatedBundleProduct,
         }))
       }
     },
-    [configuredProduct, setConfiguredProduct, validator, client]
+    [configuredProduct, setConfiguredProduct, validator, client],
   )
 
   // Sync the configured product details when selected options change

packages/react-shopper-hooks/lib/product/bundle/index.ts

@@ -1,6 +1,4 @@
 export * from "./bundle-provider"
 export * from "./use-bundle-hook"
-export * from "./util/create-bundle-configure-validator"
 export * from "./use-bundle-component-options-hook"
-export * from "./bundle.types"
 export * from "./use-bundle-component-hook"

packages/react-shopper-hooks/lib/product/bundle/use-bundle-component-hook.ts

@@ -1,16 +1,22 @@
 import { useCallback, useContext, useMemo } from "react"
-import {
-  BundleConfigurationSelectedOptions,
-  BundleProductContext,
-} from "@lib/product"
+import { BundleProductContext } from "@lib/product"
 import { isSelectedOption as _isSelectedOption } from "@lib/product/bundle/util/is-selected-option"
-
-export function useBundleComponent(componentKey: string) {
+import type { BundleConfigurationSelectedOptions } from "@elasticpath/shopper-common"
+import { ProductComponents } from "@moltin/sdk"
+
+export function useBundleComponent(componentKey: string): {
+  selected: BundleConfigurationSelectedOptions[0]
+  component: ProductComponents[0]
+  updateSelectedOptions: (
+    selected: BundleConfigurationSelectedOptions[0],
+  ) => void
+  isSelectedOption: (optionId: string) => boolean
+} {
   const ctx = useContext(BundleProductContext)
 
   if (!ctx) {
     throw new Error(
-      "Product Component Context was unexpectedly null, make sure you are using the useBundleComponent hook inside a BundleProductProvider!"
+      "Product Component Context was unexpectedly null, make sure you are using the useBundleComponent hook inside a BundleProductProvider!",
     )
   }
 
@@ -20,12 +26,12 @@ export function useBundleComponent(componentKey: string) {
 
   const updateSelectedOptions = useCallback(
     async (selected: BundleConfigurationSelectedOptions[0]) => {
-      setSelectedOptions((prevState) => ({
+      setSelectedOptions((prevState: any) => ({
         ...prevState,
         [componentKey]: selected,
       }))
     },
-    [setSelectedOptions, selected]
+    [setSelectedOptions, selected],
   )
 
   const component = useMemo(() => {