From 1be34538f80092f0dc6f3784672c9f7e28b1e075 Mon Sep 17 00:00:00 2001 From: Robert Field Date: Thu, 19 Oct 2023 20:06:06 +0200 Subject: [PATCH] feat: updated react shopper hooks to use common elements from shopper common --- .../lib/cart/cart-reducer.ts | 24 +++++++-------- .../lib/cart/types/cart-reducer-types.ts | 6 ++-- .../lib/cart/util/get-initial-cart-state.ts | 14 ++++----- packages/react-shopper-hooks/lib/main.ts | 1 + .../use-payment-gateway.ts | 29 ++++++++++++------- .../lib/product/bundle/bundle-provider.tsx | 22 +++++++------- .../lib/product/bundle/index.ts | 2 -- .../bundle/use-bundle-component-hook.ts | 24 +++++++++------ .../use-bundle-component-options-hook.ts | 18 ++++++++---- .../lib/product/bundle/use-bundle-hook.tsx | 27 +++++++++++++---- .../product/bundle/util/is-selected-option.ts | 6 ++-- .../react-shopper-hooks/lib/product/index.ts | 2 -- .../lib/product/simple/simple-provider.tsx | 4 +-- .../variation/base-product-provider.tsx | 3 +- .../lib/product/variation/index.ts | 1 - .../product/variation/use-variation-hook.tsx | 21 +++++++++++--- .../all-variations-have-selected-option.ts | 4 +-- .../util/create-empty-options-dict.ts | 4 +-- .../util/get-options-from-product-id.ts | 7 ++--- .../util/get-product-id-from-options.ts | 7 ++--- .../util/map-options-to-variations.ts | 8 ++--- .../product/variation/variation-provider.tsx | 17 ++++++----- .../lib/store/use-store.tsx | 5 ++-- packages/react-shopper-hooks/package.json | 2 +- yarn.lock | 25 ---------------- 25 files changed, 151 insertions(+), 132 deletions(-) diff --git a/packages/react-shopper-hooks/lib/cart/cart-reducer.ts b/packages/react-shopper-hooks/lib/cart/cart-reducer.ts index 522152c0..dbd8d0d2 100644 --- a/packages/react-shopper-hooks/lib/cart/cart-reducer.ts +++ b/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 { 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 diff --git a/packages/react-shopper-hooks/lib/cart/types/cart-reducer-types.ts b/packages/react-shopper-hooks/lib/cart/types/cart-reducer-types.ts index 9d3fbf0a..faed5cc9 100644 --- a/packages/react-shopper-hooks/lib/cart/types/cart-reducer-types.ts +++ b/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 --------------------------------- */ diff --git a/packages/react-shopper-hooks/lib/cart/util/get-initial-cart-state.ts b/packages/react-shopper-hooks/lib/cart/util/get-initial-cart-state.ts index 9a3e3264..4014e6b1 100644 --- a/packages/react-shopper-hooks/lib/cart/util/get-initial-cart-state.ts +++ b/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?: ResourceIncluded, ): 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), } } diff --git a/packages/react-shopper-hooks/lib/main.ts b/packages/react-shopper-hooks/lib/main.ts index c193933c..92c8c3de 100644 --- a/packages/react-shopper-hooks/lib/main.ts +++ b/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" diff --git a/packages/react-shopper-hooks/lib/payment-gateway-register/use-payment-gateway.ts b/packages/react-shopper-hooks/lib/payment-gateway-register/use-payment-gateway.ts index 52183e4a..e109389a 100644 --- a/packages/react-shopper-hooks/lib/payment-gateway-register/use-payment-gateway.ts +++ b/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 }, - }); - }; + }) + } } diff --git a/packages/react-shopper-hooks/lib/product/bundle/bundle-provider.tsx b/packages/react-shopper-hooks/lib/product/bundle/bundle-provider.tsx index 556248bd..c4fdba5d 100644 --- a/packages/react-shopper-hooks/lib/product/bundle/bundle-provider.tsx +++ b/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( - 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( - srcComponentProductImages + srcComponentProductImages, ) const validator = useCallback(createBundleConfigureValidator(srcComponents), [ @@ -89,7 +89,7 @@ export function BundleProductProvider({ const [selectedOptions, setSelectedOptions] = useState( - initBundleConfiguration.selected_options + initBundleConfiguration.selected_options, ) const configureBundle = useCallback( @@ -100,7 +100,7 @@ export function BundleProductProvider({ const updatedBundleProduct = await _configureBundle( configuredProduct.response.id, selectedOptions, - client + client, ) setConfiguredProduct((prevState) => ({ ...prevState, @@ -108,7 +108,7 @@ export function BundleProductProvider({ })) } }, - [configuredProduct, setConfiguredProduct, validator, client] + [configuredProduct, setConfiguredProduct, validator, client], ) // Sync the configured product details when selected options change diff --git a/packages/react-shopper-hooks/lib/product/bundle/index.ts b/packages/react-shopper-hooks/lib/product/bundle/index.ts index 7f44c5f9..8a120364 100644 --- a/packages/react-shopper-hooks/lib/product/bundle/index.ts +++ b/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" diff --git a/packages/react-shopper-hooks/lib/product/bundle/use-bundle-component-hook.ts b/packages/react-shopper-hooks/lib/product/bundle/use-bundle-component-hook.ts index e3034e93..d0709c72 100644 --- a/packages/react-shopper-hooks/lib/product/bundle/use-bundle-component-hook.ts +++ b/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(() => { diff --git a/packages/react-shopper-hooks/lib/product/bundle/use-bundle-component-options-hook.ts b/packages/react-shopper-hooks/lib/product/bundle/use-bundle-component-options-hook.ts index 41055eb7..3d80fbf1 100644 --- a/packages/react-shopper-hooks/lib/product/bundle/use-bundle-component-options-hook.ts +++ b/packages/react-shopper-hooks/lib/product/bundle/use-bundle-component-options-hook.ts @@ -1,16 +1,22 @@ import { useContext, useMemo } from "react" import { isSelectedOption as _isSelectedOption } from "@lib/product/bundle/util/is-selected-option" import { BundleProductContext } from "@lib/product/bundle/bundle-provider" +import { File, ProductComponentOption, ProductResponse } from "@moltin/sdk" export function useBundleComponentOption( componentKey: string, - optionId: string -) { + optionId: string, +): { + isSelected: boolean + optionProduct: ProductResponse + option?: ProductComponentOption + mainImage: File | null +} { const ctx = useContext(BundleProductContext) if (!ctx) { throw new Error( - "Product Component Context was unexpectedly null, make sure you are using the useBundleComponentOption hook inside a BundleProductProvider!" + "Product Component Context was unexpectedly null, make sure you are using the useBundleComponentOption hook inside a BundleProductProvider!", ) } @@ -31,13 +37,13 @@ export function useBundleComponentOption( if (!optionProduct) { throw new Error( - `Could not find component product for option id ${optionId}` + `Could not find component product for option id ${optionId}`, ) } const isSelected = useMemo( () => _isSelectedOption(selectedOptions[componentKey])(optionId), - [selectedOptions, componentKey, optionId] + [selectedOptions, componentKey, optionId], ) const mainImageId = optionProduct.relationships?.main_image?.data?.id @@ -46,7 +52,7 @@ export function useBundleComponentOption( mainImageId ? componentProductImages.find((img) => img.id === mainImageId) ?? null : null, - [componentProductImages] + [componentProductImages], ) return { diff --git a/packages/react-shopper-hooks/lib/product/bundle/use-bundle-hook.tsx b/packages/react-shopper-hooks/lib/product/bundle/use-bundle-hook.tsx index 68bf44e2..a81f2333 100644 --- a/packages/react-shopper-hooks/lib/product/bundle/use-bundle-hook.tsx +++ b/packages/react-shopper-hooks/lib/product/bundle/use-bundle-hook.tsx @@ -1,13 +1,30 @@ -import { useCallback, useContext } from "react" -import { BundleConfigurationSelectedOptions } from "@lib/product/bundle/bundle.types" +import { Dispatch, SetStateAction, useCallback, useContext } from "react" import { BundleProductContext } from "@lib/product/bundle/bundle-provider" +import { + BundleConfiguration, + BundleConfigurationSelectedOptions, + BundleProduct, +} from "@elasticpath/shopper-common" +import { ProductResponse, File, ProductComponents } from "@moltin/sdk" -export function useBundle() { +export function useBundle(): { + setComponents: Dispatch> + components: ProductComponents + bundleConfiguration: BundleConfiguration + setBundleConfiguration: (bundleConfiguration: BundleConfiguration) => void + componentProducts: ProductResponse[] + selectedOptions: BundleConfigurationSelectedOptions + configuredProduct: BundleProduct + updateSelectedOptions: ( + selectedOptions: BundleConfigurationSelectedOptions, + ) => void + componentProductImages: File[] +} { const ctx = useContext(BundleProductContext) if (!ctx) { throw new Error( - "Product Component Context was unexpectedly null, make sure you are using the useComponents hook inside a BundleProductProvider!" + "Product Component Context was unexpectedly null, make sure you are using the useComponents hook inside a BundleProductProvider!", ) } @@ -27,7 +44,7 @@ export function useBundle() { (selectedOptions: BundleConfigurationSelectedOptions) => { setSelectedOptions(selectedOptions) }, - [setSelectedOptions] + [setSelectedOptions], ) return { diff --git a/packages/react-shopper-hooks/lib/product/bundle/util/is-selected-option.ts b/packages/react-shopper-hooks/lib/product/bundle/util/is-selected-option.ts index fb42605a..c35f1d53 100644 --- a/packages/react-shopper-hooks/lib/product/bundle/util/is-selected-option.ts +++ b/packages/react-shopper-hooks/lib/product/bundle/util/is-selected-option.ts @@ -1,11 +1,11 @@ -import { BundleConfigurationSelectedOptions } from "@lib/product/bundle/bundle.types" +import { BundleConfigurationSelectedOptions } from "@elasticpath/shopper-common" export function isSelectedOption( - selectedOptions: BundleConfigurationSelectedOptions[0] + selectedOptions: BundleConfigurationSelectedOptions[0], ) { return function _innerIsSelectedOption(optionId: string): boolean { return Object.keys(selectedOptions).some( - (optionKey) => optionKey === optionId + (optionKey) => optionKey === optionId, ) } } diff --git a/packages/react-shopper-hooks/lib/product/index.ts b/packages/react-shopper-hooks/lib/product/index.ts index 4cb1fb1e..cd1f8b72 100644 --- a/packages/react-shopper-hooks/lib/product/index.ts +++ b/packages/react-shopper-hooks/lib/product/index.ts @@ -1,5 +1,3 @@ export * from "./bundle" -export * from "./product.types" -export * from "./util" export * from "./simple" export * from "./variation" diff --git a/packages/react-shopper-hooks/lib/product/simple/simple-provider.tsx b/packages/react-shopper-hooks/lib/product/simple/simple-provider.tsx index 3d78ce77..40f0dd8b 100644 --- a/packages/react-shopper-hooks/lib/product/simple/simple-provider.tsx +++ b/packages/react-shopper-hooks/lib/product/simple/simple-provider.tsx @@ -6,7 +6,7 @@ import { useState, } from "react" import type { Moltin as EpccClient } from "@moltin/sdk" -import { SimpleProduct } from "@lib/product" +import { SimpleProduct } from "@elasticpath/shopper-common" import { useStore } from "@lib/store" interface SimpleProductState { @@ -16,7 +16,7 @@ interface SimpleProductState { } export const SimpleProductContext = createContext( - null + null, ) export function SimpleProductProvider({ diff --git a/packages/react-shopper-hooks/lib/product/variation/base-product-provider.tsx b/packages/react-shopper-hooks/lib/product/variation/base-product-provider.tsx index 6776e322..90a86c22 100644 --- a/packages/react-shopper-hooks/lib/product/variation/base-product-provider.tsx +++ b/packages/react-shopper-hooks/lib/product/variation/base-product-provider.tsx @@ -1,4 +1,4 @@ -import { BaseProduct } from "@lib/product" +import { BaseProduct, MatrixObjectEntry } from "@elasticpath/shopper-common" import { createContext, Dispatch, @@ -6,7 +6,6 @@ import { SetStateAction, useState, } from "react" -import { MatrixObjectEntry } from "@lib/shared/types/matrix-object-entry" import { CatalogsProductVariation, Moltin as EpccClient } from "@moltin/sdk" interface BaseProductState { diff --git a/packages/react-shopper-hooks/lib/product/variation/index.ts b/packages/react-shopper-hooks/lib/product/variation/index.ts index 5ddedd9a..5c26b10e 100644 --- a/packages/react-shopper-hooks/lib/product/variation/index.ts +++ b/packages/react-shopper-hooks/lib/product/variation/index.ts @@ -1,3 +1,2 @@ export * from "./variation-provider" export * from "./use-variation-hook" -export * from "./variation.types" diff --git a/packages/react-shopper-hooks/lib/product/variation/use-variation-hook.tsx b/packages/react-shopper-hooks/lib/product/variation/use-variation-hook.tsx index 5246d299..6636e421 100644 --- a/packages/react-shopper-hooks/lib/product/variation/use-variation-hook.tsx +++ b/packages/react-shopper-hooks/lib/product/variation/use-variation-hook.tsx @@ -1,12 +1,25 @@ import { useCallback, useContext } from "react" import { VariationProductContext } from "@lib/product/variation/variation-provider" +import { + VariationProduct, + MatrixObjectEntry, +} from "@elasticpath/shopper-common" +import { CatalogsProductVariation } from "@moltin/sdk" -export function useVariationProduct() { +export function useVariationProduct(): { + product: VariationProduct + isBaseProduct: boolean + variations: CatalogsProductVariation[] + variationsMatrix: MatrixObjectEntry + selectedOptions: Record + updateSelectedOptions: (variationId: string, optionId: string) => void + getSelectedOption: (variationId: string) => string +} { const ctx = useContext(VariationProductContext) if (!ctx) { throw new Error( - "Variation Product Context was unexpectedly null, make sure you are using the useVariationProduct hook inside a VariationProductProvider!" + "Variation Product Context was unexpectedly null, make sure you are using the useVariationProduct hook inside a VariationProductProvider!", ) } @@ -31,14 +44,14 @@ export function useVariationProduct() { } } }, - [setSelectedOptions, selectedOptions] + [setSelectedOptions, selectedOptions], ) const getSelectedOption = useCallback( (variationId: string): string => { return selectedOptions[variationId] }, - [selectedOptions] + [selectedOptions], ) return { diff --git a/packages/react-shopper-hooks/lib/product/variation/util/all-variations-have-selected-option.ts b/packages/react-shopper-hooks/lib/product/variation/util/all-variations-have-selected-option.ts index 5c580cfa..ab931a85 100644 --- a/packages/react-shopper-hooks/lib/product/variation/util/all-variations-have-selected-option.ts +++ b/packages/react-shopper-hooks/lib/product/variation/util/all-variations-have-selected-option.ts @@ -1,9 +1,9 @@ -import type { OptionDict } from "@lib/product" +import type { OptionDict } from "@elasticpath/shopper-common" import type { CatalogsProductVariation } from "@moltin/sdk" export function allVariationsHaveSelectedOption( optionsDict: OptionDict, - variations: CatalogsProductVariation[] + variations: CatalogsProductVariation[], ): boolean { return !variations.some((variation) => !optionsDict[variation.id]) } diff --git a/packages/react-shopper-hooks/lib/product/variation/util/create-empty-options-dict.ts b/packages/react-shopper-hooks/lib/product/variation/util/create-empty-options-dict.ts index ee176cdb..9ef4b161 100644 --- a/packages/react-shopper-hooks/lib/product/variation/util/create-empty-options-dict.ts +++ b/packages/react-shopper-hooks/lib/product/variation/util/create-empty-options-dict.ts @@ -1,7 +1,7 @@ import { CatalogsProductVariation } from "@moltin/sdk" -import { OptionDict } from "@lib/product" +import { OptionDict } from "@elasticpath/shopper-common" export const createEmptyOptionDict = ( - variations: CatalogsProductVariation[] + variations: CatalogsProductVariation[], ): OptionDict => variations.reduce((acc, c) => ({ ...acc, [c.id]: undefined }), {}) diff --git a/packages/react-shopper-hooks/lib/product/variation/util/get-options-from-product-id.ts b/packages/react-shopper-hooks/lib/product/variation/util/get-options-from-product-id.ts index ad40da9c..47811cf7 100644 --- a/packages/react-shopper-hooks/lib/product/variation/util/get-options-from-product-id.ts +++ b/packages/react-shopper-hooks/lib/product/variation/util/get-options-from-product-id.ts @@ -1,12 +1,9 @@ -import { - MatrixObjectEntry, - MatrixValue, -} from "@lib/shared/types/matrix-object-entry" +import { MatrixObjectEntry, MatrixValue } from "@elasticpath/shopper-common" export const getOptionsFromProductId = ( skuId: string, entry: MatrixObjectEntry | MatrixValue, - options: string[] = [] + options: string[] = [], ): string[] | undefined => { if (typeof entry === "string") { return entry === skuId ? options : undefined diff --git a/packages/react-shopper-hooks/lib/product/variation/util/get-product-id-from-options.ts b/packages/react-shopper-hooks/lib/product/variation/util/get-product-id-from-options.ts index 7806449d..332bea04 100644 --- a/packages/react-shopper-hooks/lib/product/variation/util/get-product-id-from-options.ts +++ b/packages/react-shopper-hooks/lib/product/variation/util/get-product-id-from-options.ts @@ -1,11 +1,8 @@ -import { - MatrixObjectEntry, - MatrixValue, -} from "@lib/shared/types/matrix-object-entry" +import { MatrixObjectEntry, MatrixValue } from "@elasticpath/shopper-common" export const getProductIdFromOptions = ( options: string[], - matrix: MatrixObjectEntry | MatrixValue + matrix: MatrixObjectEntry | MatrixValue, ): string | undefined => { if (typeof matrix === "string") { return matrix diff --git a/packages/react-shopper-hooks/lib/product/variation/util/map-options-to-variations.ts b/packages/react-shopper-hooks/lib/product/variation/util/map-options-to-variations.ts index 814c425e..686ac0ec 100644 --- a/packages/react-shopper-hooks/lib/product/variation/util/map-options-to-variations.ts +++ b/packages/react-shopper-hooks/lib/product/variation/util/map-options-to-variations.ts @@ -1,18 +1,18 @@ // TODO refactor import { CatalogsProductVariation } from "@moltin/sdk" -import { OptionDict } from "@lib/product" +import { OptionDict } from "@elasticpath/shopper-common" export const mapOptionsToVariation = ( options: string[], - variations: CatalogsProductVariation[] + variations: CatalogsProductVariation[], ): OptionDict => { return variations.reduce( (acc: OptionDict, variation: CatalogsProductVariation) => { const x = variation.options.find((varOption) => - options.some((selectedOption) => varOption.id === selectedOption) + options.some((selectedOption) => varOption.id === selectedOption), )?.id return { ...acc, [variation.id]: x ? x : "" } }, - {} + {}, ) } diff --git a/packages/react-shopper-hooks/lib/product/variation/variation-provider.tsx b/packages/react-shopper-hooks/lib/product/variation/variation-provider.tsx index bc0e276e..c53d2df1 100644 --- a/packages/react-shopper-hooks/lib/product/variation/variation-provider.tsx +++ b/packages/react-shopper-hooks/lib/product/variation/variation-provider.tsx @@ -9,8 +9,11 @@ import type { CatalogsProductVariation, Moltin as EpccClient, } from "@moltin/sdk" -import type { OptionDict, VariationProduct } from "@lib/product" -import type { MatrixObjectEntry } from "@lib/shared/types/matrix-object-entry" +import type { + OptionDict, + VariationProduct, + MatrixObjectEntry, +} from "@elasticpath/shopper-common" import { getOptionsFromProductId } from "@lib/product/variation/util/get-options-from-product-id" import { mapOptionsToVariation } from "@lib/product/variation/util/map-options-to-variations" import { createEmptyOptionDict } from "@lib/product/variation/util/create-empty-options-dict" @@ -45,14 +48,14 @@ export function VariationProductProvider({ const [product, setProduct] = useState(variationProduct) const [isBaseProduct, setIsBaseProduct] = useState( - variationProduct.kind === "base-product" + variationProduct.kind === "base-product", ) const [selectedOptions, setSelectedOptions] = useState( resolveInitialSelectedOptions( product, product.variations, - product.variationsMatrix - ) + product.variationsMatrix, + ), ) return ( @@ -77,11 +80,11 @@ export function VariationProductProvider({ function resolveInitialSelectedOptions( product: VariationProduct, variations: CatalogsProductVariation[], - variationsMatrix: MatrixObjectEntry + variationsMatrix: MatrixObjectEntry, ) { const currentSkuOptions = getOptionsFromProductId( product.response.id, - variationsMatrix + variationsMatrix, ) return currentSkuOptions diff --git a/packages/react-shopper-hooks/lib/store/use-store.tsx b/packages/react-shopper-hooks/lib/store/use-store.tsx index 7c18c5ca..ce90976f 100644 --- a/packages/react-shopper-hooks/lib/store/use-store.tsx +++ b/packages/react-shopper-hooks/lib/store/use-store.tsx @@ -1,12 +1,13 @@ import { useContext } from "react" import { StoreProviderContext } from "@lib/store/store-provider" +import { Moltin } from "@moltin/sdk" -export function useStore() { +export function useStore(): { client: Moltin } { const ctx = useContext(StoreProviderContext) if (!ctx) { throw new Error( - "Store context was unexpectedly null, make sure you are using the useStore hook inside a StoreProvider!" + "Store context was unexpectedly null, make sure you are using the useStore hook inside a StoreProvider!", ) } diff --git a/packages/react-shopper-hooks/package.json b/packages/react-shopper-hooks/package.json index 54efe549..c6323ca9 100644 --- a/packages/react-shopper-hooks/package.json +++ b/packages/react-shopper-hooks/package.json @@ -32,7 +32,6 @@ "vitest": "^0.31.1" }, "peerDependencies": { - "@moltin/sdk": "^23.3.0", "react": "^18.2.0", "react-dom": "^18.2.0" }, @@ -41,6 +40,7 @@ }, "dependencies": { "@moltin/sdk": "^25.0.2", + "@elasticpath/shopper-common": "*", "rxjs": "7.5.7" } } diff --git a/yarn.lock b/yarn.lock index 7b0eb19c..84dc86f3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15492,11 +15492,6 @@ prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1: object-assign "^4.1.1" react-is "^16.13.1" -property-expr@^2.0.5: - version "2.0.6" - resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.6.tgz#f77bc00d5928a6c748414ad12882e83f24aec1e8" - integrity sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA== - proto-list@~1.2.1: version "1.2.4" resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849" @@ -17603,11 +17598,6 @@ timers-ext@^0.1.7: es5-ext "~0.10.46" next-tick "1" -tiny-case@^1.0.3: - version "1.0.3" - resolved "https://registry.yarnpkg.com/tiny-case/-/tiny-case-1.0.3.tgz#d980d66bc72b5d5a9ca86fb7c9ffdb9c898ddd03" - integrity sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q== - tiny-inflate@^1.0.0: version "1.0.3" resolved "https://registry.yarnpkg.com/tiny-inflate/-/tiny-inflate-1.0.3.tgz#122715494913a1805166aaf7c93467933eea26c4" @@ -17761,11 +17751,6 @@ tomlify-j0.4@^3.0.0: resolved "https://registry.yarnpkg.com/tomlify-j0.4/-/tomlify-j0.4-3.0.0.tgz#99414d45268c3a3b8bf38be82145b7bba34b7473" integrity sha512-2Ulkc8T7mXJ2l0W476YC/A209PR38Nw8PuaCNtk9uI3t1zzFdGQeWYGQvmj2PZkVvRC/Yoi4xQKMRnWc/N29tQ== -toposort@^2.0.2: - version "2.0.2" - resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330" - integrity sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg== - totalist@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/totalist/-/totalist-1.1.0.tgz#a4d65a3e546517701e3e5c37a47a70ac97fe56df" @@ -19137,16 +19122,6 @@ yoga-wasm-web@~0.3.3: resolved "https://registry.yarnpkg.com/yoga-wasm-web/-/yoga-wasm-web-0.3.3.tgz#eb8e9fcb18e5e651994732f19a220cb885d932ba" integrity sha512-N+d4UJSJbt/R3wqY7Coqs5pcV0aUj2j9IaQ3rNj9bVCLld8tTGKRa2USARjnvZJWVx1NDmQev8EknoczaOQDOA== -yup@^1.3.0: - version "1.3.2" - resolved "https://registry.yarnpkg.com/yup/-/yup-1.3.2.tgz#afffc458f1513ed386e6aaf4bcaa4e67a9e270dc" - integrity sha512-6KCM971iQtJ+/KUaHdrhVr2LDkfhBtFPRnsG1P8F4q3uUVQ2RfEM9xekpha9aA4GXWJevjM10eDcPQ1FfWlmaQ== - dependencies: - property-expr "^2.0.5" - tiny-case "^1.0.3" - toposort "^2.0.2" - type-fest "^2.19.0" - z-schema@~5.0.2: version "5.0.6" resolved "https://registry.yarnpkg.com/z-schema/-/z-schema-5.0.6.tgz#46d6a687b15e4a4369e18d6cb1c7b8618fc256c5"