@hanzo/commerce 1.1.1 → 1.1.3

package/index.ts

@@ -1,4 +1,4 @@
 export * from './types'
 export * from './service/context'
 export type { StandaloneServiceOptions as ServiceOptions } from './service/impls/standalone/standalone-service'
-export { useSkuAndFacetParams } from './util'
+export { useSyncSkuParamWithCurrentItem } from './util'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/commerce",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "Library with shopping cart components.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

package/service/impls/standalone/standalone-service.ts

@@ -207,13 +207,15 @@ class StandaloneService
     const keysStr = Object.keys(this._facetsDesc)
     const keysNum = keysStr.map((key) => (parseInt(key)))
     keysNum.forEach((key) => {
+      if (partial[key]) {
+          // If present, filter out the bad values (the one's that don't exist in the Desc)
+        const filtered = partial[key].filter((fv) => (this._facetsDesc[key].find((fvDesc) => (fvDesc.value === fv))))
+        result[key] = filtered
+      }
         // if not present, assume the facet is "off" and allow all (include all in the set).
-      if (!partial[key]) {
+      else {
         result[key] = this._facetsDesc[key].map((fv) => (fv.value))
       }
-        // If present, filter out the bad values if any
-      const filtered = partial[key].filter((fv) => this._facetsDesc[key].find((fvDesc) => (fvDesc.value === fv)))
-      result[key] = filtered
     })
     return result
   }

package/util/index.ts

@@ -25,4 +25,4 @@ export function formatPrice(price: number): string {
   });
 }
 
-export { default as useSkuAndFacetParams } from './use-sku-and-facet-params'
+export { default as useSyncSkuParamWithCurrentItem } from './use-sync-sku-param-w-current-item'

package/util/use-sync-sku-param-w-current-item.ts

@@ -0,0 +1,84 @@
+"use client"
+import {  useEffect } from 'react'
+import { reaction } from 'mobx'
+
+import {
+  useQueryState,
+  parseAsString,
+  parseAsBoolean,
+} from 'next-usequerystate'
+
+import { useCommerce } from '../service/context'
+import type { FacetsValue } from '../types'
+
+const PLEASE_SELECT_FACETS = 'Please select an option from each group above.'
+
+const useSyncSkuParamWithCurrentItem = (
+  categoryLevel: number,
+  setMessage: (m: string | undefined) => void,
+  setLoading?: (l: boolean) => void
+) => {
+
+  const cmmc = useCommerce()
+
+  const [skuParam, setSkuParam] = useQueryState('sku',  
+    parseAsString.withDefault('').withOptions({ clearOnDefault: true })
+  )
+
+  const [addParam, setAddParam] = useQueryState('add', 
+    parseAsBoolean.withDefault(false).withOptions({ clearOnDefault: true })
+  )
+
+  useEffect(() => {
+
+    return reaction(() => ({
+      specifiedCat: cmmc.specifiedCategories.length === 1 ? cmmc.specifiedCategories[0] : undefined, 
+      currentItem: cmmc.currentItem
+    }),
+    ({specifiedCat, currentItem}) => {
+      //console.log("REACTION: " + `CAT ID: ${category?.id} SKU: ${item?.sku}`)
+      if (currentItem) {
+          // if we set the currentItem w sku, then user selects other facets
+        if (specifiedCat && currentItem.categoryId != specifiedCat.id ) {
+          cmmc.setCurrentItem(specifiedCat.products[0].sku)
+        }
+        setSkuParam(cmmc.currentItem!.sku)
+      }
+      else if (specifiedCat) {
+        cmmc.setCurrentItem(specifiedCat.products[0].sku)
+        setSkuParam(cmmc.currentItem!.sku)
+      }
+    })
+  }, [])
+
+  useEffect(() => {
+    
+    const setCurrentCategoryFromSku = (sku: string) => {
+      const toks: string[] = sku.split('-')
+      const fv: FacetsValue = {}
+      for (let i = 1; i < categoryLevel; i++) {
+        fv[i] = [toks[i]]
+      } 
+      cmmc.setFacets(fv)
+    }
+
+      // setCI returns true if it's a recognized sku
+    if (skuParam && cmmc.setCurrentItem(skuParam)) {
+      if (addParam) {
+        if (cmmc.currentItem!.quantity === 0) {
+          cmmc.currentItem!.increment()  
+        }
+        setAddParam(false)
+      }
+      setCurrentCategoryFromSku(skuParam)
+      setMessage(undefined)
+    }
+    else {
+      setMessage(PLEASE_SELECT_FACETS)
+    }
+
+    setLoading && setLoading(false)
+  }, [skuParam])
+}
+
+export default useSyncSkuParamWithCurrentItem

package/util/use-sku-and-facet-params.ts

@@ -1,170 +0,0 @@
-"use client"
-import { 
-  useEffect, 
-  useRef,
-  useState,
-} from 'react'
-import { autorun, toJS, type IReactionDisposer } from 'mobx'
-
-import {
-  useQueryState,
-  parseAsString,
-  parseAsBoolean,
-} from 'next-usequerystate'
-
-import type { FacetsValue, StringMutator } from '../types'
-import { useCommerce } from '../service/context'
-
-const PLEASE_SELECT_FACETS = 'Please select an option from each group above.'
-
-interface GetMutator {
-  (level: 1 | 2): StringMutator
-}
-
-const useSkuAndFacetParams = (
-  setMessage: (m: string | undefined) => void,
-  setLoading?: (l: boolean) => void
-) => {
-
-  const cmmc = useCommerce()
-
-  const encRef = useRef<{
-    usingSkuMode: boolean
-    autoRunDisposer: IReactionDisposer | undefined
-  }>({
-    usingSkuMode: false,
-    autoRunDisposer: undefined,
-  })
-
-  const [level1, setLevel1] = useQueryState('lev1',  
-    parseAsString.withDefault('').withOptions({ clearOnDefault: true })
-  )
-   const [level2, setLevel2] = useQueryState('lev2',  
-    parseAsString.withDefault('').withOptions({ clearOnDefault: true })
-  )
-
-  const [skuParam, setSkuParam] = useQueryState('sku',  
-    parseAsString.withDefault('').withOptions({ clearOnDefault: true })
-  )
-
-  const [addParam, setAddParam] = useQueryState('add', 
-    parseAsBoolean.withDefault(false).withOptions({ clearOnDefault: true })
-  )
-
-  const directMutator: GetMutator = (level: 1 | 2): StringMutator => {
-
-    const setLevel = (value: string, level: 1 | 2 ): void  => {
-      const facets = cmmc.facetsValue
-      facets[level] = [value]
-      cmmc.setFacets(facets)
-    }
-  
-    const getLevelValueSafe = (level: 1 | 2): string | null => {
-      const facets = cmmc.facetsValue
-      if (!(level in facets) || facets[level].length === 0 ) {
-        return null
-      }
-      return facets[level][0]
-    }
-
-    return {
-      get: () => (getLevelValueSafe(level)),
-      set: (v: string) => {setLevel(v, level)}
-    }
-  } 
-
-  const paramsMutator: GetMutator = (level: 1 | 2): StringMutator => {
-    return level === 1 ? {
-      get: () => (level1),
-      set: setLevel1
-    } : {
-      get: () => (level2),
-      set: setLevel2
-    }
-  }
-
-  let message: string | undefined = undefined
-
-  useEffect(() => {
-    
-    const setCurrentCategoryFromSku = (sku: string) => {
-      const toks: string[] = sku.split('-')
-      cmmc.setFacets({
-        1: [toks[1]],
-        2: [toks[2]]
-      })
-    }
-
-    if (skuParam) {
-        // true if a valid sku
-      if (cmmc.setCurrentItem(skuParam)) {
-        if (addParam && cmmc.currentItem!.quantity === 0) {
-          cmmc.currentItem!.increment()  
-          setAddParam(false)
-        }
-          // Marks that we've been here so no need to 
-          // create an autorun() instance twice.
-        if (!encRef.current.usingSkuMode) {
-          setCurrentCategoryFromSku(skuParam)
-          encRef.current.autoRunDisposer = autorun(() => {
-            if (cmmc.currentItem && cmmc.currentItem.sku !== skuParam) {
-              setSkuParam(cmmc.currentItem.sku)
-            }
-          })
-        }
-        encRef.current.usingSkuMode = true
-      }
-      else {
-
-        setSkuParam('')
-          // if sent here w an invalid sku, 
-          // it will effectively put us in facet params mode
-        message = 'Invalid sku. ' + PLEASE_SELECT_FACETS
-      }
-    }
-
-    setLoading && setLoading(false)
-  }, [skuParam])
-
-    // supposed to be when component unmounts
-  /*  
-  useEffect(() => (() => {
-    if (encRef.current.autoRunDisposer) {
-      //encRef.current.autoRunDisposer() // no idea why this seems to be called prematurely and so many times <shrug>
-    }
-  }), [])
-  */
-
-
-    // Level Params Mode
-  useEffect(() => {
-
-    if (encRef.current.usingSkuMode) return
-      
-    const facets: FacetsValue = { }
-    if (level1) { facets[1] = [level1] }
-    if (level2) { facets[2] = [level2] }
-    //console.log(`LEV1: ${level1}, LEV2: ${level2}`)
-    if (level1 && level2) {
-      const categories = cmmc.setFacets(facets)
-      if (categories && categories.length > 0) {
-        cmmc.setCurrentItem(categories[0].products[0].sku)
-      }
-      else {
-        cmmc.setCurrentItem(undefined)
-        setMessage('Unrecognized facets. ' + PLEASE_SELECT_FACETS)
-      }
-    }
-    else {
-      setMessage(message ?? PLEASE_SELECT_FACETS)
-    }
-    setLoading && setLoading(false)
-  }, [level1 , level2])
-
-  return {
-    getMutator: encRef.current.usingSkuMode ?
-      directMutator : paramsMutator
-  }
-}
-
-export default useSkuAndFacetParams