@hanzo/commerce 7.0.1 → 7.0.3

package/components/add-to-cart-widget.tsx

@@ -9,11 +9,9 @@ import { cn, type VariantProps } from '@hanzo/ui/util'
 import Icons from './Icons'
 import type { LineItem } from '../types'
 import { sendFBEvent, sendGAEvent } from '../util/analytics'
-import { useCommerceUI } from '..'
 
 const AddToCartWidget: React.FC<{ 
   item: LineItem
-  registerAdd?: boolean
   disabled?: boolean
   className?: string
   buttonClx?: string
@@ -22,26 +20,19 @@ const AddToCartWidget: React.FC<{
 }> = observer(({
   item,
   variant='primary',
-  registerAdd=true,
   disabled=false,
   className='',
   buttonClx='',
   onQuantityChanged
 }) => {
 
-  const ui = useCommerceUI()
-
   const reactionDisposer = useRef<IReactionDisposer | undefined>(undefined)
-
   useEffect(() => {
-      // Only tell the micro-drawer 
-      // if we're not part of the cart ui,
-      // or part of the main drawer.
-    if (registerAdd && variant !== 'minimal') {
+    if (onQuantityChanged) {
       reactionDisposer.current = reaction(
         () => (item.quantity),
         (quantity: number, previous: number) => {
-          ui.itemQuantityChanged(item, quantity, previous)
+          onQuantityChanged(item.sku, quantity, previous)
         }  
       )
     }
@@ -75,11 +66,7 @@ const AddToCartWidget: React.FC<{
   }
 
   const inc = () => {
-    const old = item.quantity
     item.increment()
-    if (onQuantityChanged) {
-      onQuantityChanged(item.sku, old, old + 1) 
-    }
     sendGAEvent('add_to_cart', {
       items: [{
         item_id: item.sku,
@@ -104,11 +91,7 @@ const AddToCartWidget: React.FC<{
   }
 
   const dec = () => {
-    const old = item.quantity
     item.decrement()
-    if (onQuantityChanged) {
-      onQuantityChanged(item.sku, old, old - 1) 
-    }
     sendGAEvent('remove_from_cart', {
       items: [{
         item_id: item.sku,

package/components/buy/buy-card.tsx

@@ -86,7 +86,7 @@ const BuyCard: React.FC<{
 
   useEffect(() => {
 
-    let requestedFamily = cmmc.getFamily(skuPath) 
+    let requestedFamily = cmmc.getFamilyById(skuPath) 
     let requestedNode = requestedFamily ? undefined : cmmc.getNodeAtPath(skuPath)
     let initialFamily = undefined
 
@@ -137,7 +137,7 @@ const BuyCard: React.FC<{
         },
         (famId) => {
           if (famId && famId !== cmmc.currentItem?.familyId) {
-            const fam = cmmc.getFamily(famId)
+            const fam = cmmc.getFamilyById(famId)
             if (fam) { 
               cmmc.setCurrentItem(fam.products[0].sku) 
             }
@@ -248,7 +248,6 @@ const BuyCard: React.FC<{
     {(cmmc.currentItem) && (
       <AddToCartWidget 
         item={cmmc.currentItem}
-        registerAdd={false}
         onQuantityChanged={onQuantityChanged} 
         className={cn('min-w-[160px] mx-auto mt-4', (scroll ? 'shrink-0' : ''), addWidgetClx)}
       />

package/components/buy/carousel-buy-card.tsx

@@ -203,7 +203,6 @@ const CarouselBuyCard: React.FC<{
     <div className={clx}>
       <AddToCartWidget 
         item={cmmc.currentItem}
-        registerAdd={true}
         onQuantityChanged={onQuantityChanged} 
         variant={cmmc.cartEmpty ? 'primary' : 'outline'}
         className={addBtnClx} 

package/components/cart/cart-panel/cart-line-item.tsx

@@ -61,7 +61,7 @@ const CartLineItem: React.FC<{
       </div>
       <div className='flex flex-row items-center justify-between w-full'>
         <div className='flex flex-row items-center'>
-          <AddToCartWidget variant='minimal' registerAdd={false} item={item} buttonClx='!h-8 md:!h-6' />
+          <AddToCartWidget variant='minimal' item={item} buttonClx='!h-8 md:!h-6' />
           {item.quantity > 1 && (<span className='pl-2.5'>{'@' + formatCurrencyValue(item.price)}</span>)}
         </div>
         <div className='flex flex-row gap-1 items-center justify-end'>

package/components/index.ts

@@ -1,5 +1,4 @@
 export { default as AddToCartWidget } from './add-to-cart-widget'
-export { default as BuyButton } from './buy/buy-button'
 export { default as CarouselBuyCard } from './buy/carousel-buy-card'
 
 export { default as CartAccordian } from './cart/cart-accordian'

package/context/index.tsx

@@ -4,7 +4,6 @@ import React, {
   useContext, 
   useRef, 
   type PropsWithChildren, 
-  useEffect
 } from 'react'
 
 // https://dev.to/ivandotv/mobx-server-side-rendering-with-next-js-4m18
@@ -15,21 +14,11 @@ import type { ServiceOptions } from '..'
 import type CommerceService from '../types/commerce-service'
 import getInstance from '../service/get-instance'
 import type { Family, CategoryNode, SelectionUISpecifier } from '../types'
-import  { type CommerceUI, CommerceUIStore } from './commerce-ui'
 
-type CommerceContextValue = {
-  service: CommerceService
-  ui: CommerceUI  
-}
-
-const CommerceContext = createContext<CommerceContextValue | undefined>(undefined)
+const CommerceContext = createContext<CommerceService | undefined>(undefined)
 
 const useCommerce = (): CommerceService => {
-  return (useContext(CommerceContext) as CommerceContextValue)?.service
-}
-
-const useCommerceUI = (): CommerceUI => {
-  return (useContext(CommerceContext) as CommerceContextValue)?.ui
+  return useContext(CommerceContext) as CommerceService
 }
 
 const CommerceProvider: React.FC<PropsWithChildren & {
@@ -37,29 +26,17 @@ const CommerceProvider: React.FC<PropsWithChildren & {
   rootNode: CategoryNode
   options?: ServiceOptions
   uiSpecs?: Record<string, SelectionUISpecifier>
-  DEBUG_NO_TICK?: boolean
 }> = ({ 
   children,
   families,
   rootNode,
   options,
-  uiSpecs,
-  DEBUG_NO_TICK=false
+  uiSpecs
 }) => {
 
-  useEffect(() => {
-    if (DEBUG_NO_TICK) return
-    const intervalId = setInterval(() => {
-      (valueRef.current.ui as CommerceUIStore).tick()   
-    }, 250)  
-    return () => { clearInterval(intervalId) }
-  }, [])
-
     // TODO: Inject Promo fixture here from siteDef
   const service = getInstance(families, rootNode, options, uiSpecs)
-  const ui = new CommerceUIStore(service)
-
-  const valueRef = useRef<CommerceContextValue>({service, ui})
+  const valueRef = useRef<CommerceService>(service)
 
   return (
     <CommerceContext.Provider value={valueRef.current}>
@@ -70,7 +47,6 @@ const CommerceProvider: React.FC<PropsWithChildren & {
 
 export {
   useCommerce, 
-  useCommerceUI, 
   CommerceProvider
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/commerce",
-  "version": "7.0.1",
+  "version": "7.0.3",
   "description": "e-commerce framework.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -26,9 +26,7 @@
   },
   "exports": {
     ".": "./index.ts",
-    "./path-utils": "./service/path-utils.ts",
-    "./types": "./types/index.ts",
-    "./debug": "./service/debug.ts"
+    "./types": "./types/index.ts"
   },
   "dependencies": {
     "ethers": "^6.12.0",
@@ -37,8 +35,8 @@
     "square": "^35.1.0"
   },
   "peerDependencies": {
-    "@hanzo/auth": "^2.4.5",
-    "@hanzo/ui": "^3.7.0",
+    "@hanzo/auth": "^2.4.6",
+    "@hanzo/ui": "^3.7.22",
     "@hookform/resolvers": "^3.3.4",
     "@radix-ui/react-radio-group": "^1.1.3",
     "firebase": "^10.8.0",
@@ -47,14 +45,14 @@
     "mobx-react-lite": "^4.0.5",
     "mobx-utils": "^6.0.8",
     "next": "14.1.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-hook-form": "^7.51.3",
-    "zod": "3.21.4"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.51.4",
+    "zod": "3.23.8"
   },
   "devDependencies": {
-    "@types/react": "^18.2.79",
-    "@types/react-dom": "^18.2.25",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "cross-fetch": "^4.0.0",
     "typescript": "^5.4.5"
   }

package/service/debug.ts

@@ -1,6 +1,6 @@
 import type { CategoryNode,  CategoryNodeRole, Family, LineItem } from '../types'
 
-  // Note recursion
+  // Node recursion
 export const categoryNodeDump = (node: CategoryNode, level: number = 0): void => {
   const spacers: string[] = []
   for (let i = 0; i < level; i++) {
@@ -9,9 +9,9 @@ export const categoryNodeDump = (node: CategoryNode, level: number = 0): void =>
   console.log("NODE:" + spacers.join(''), node.skuToken)
   node.subNodes?.forEach((sn: CategoryNode) => {categoryNodeDump(sn, level + 1)})
 }
- 
+
 export const selectedFamiliesDump = (result: Family[]): string => {
-  const toDisplay = result.map((c) => (c.id)) 
+  const toDisplay = result.map((c) => (c.id))
   return JSON.stringify(toDisplay, null, 2)
 }
 
@@ -32,10 +32,10 @@ export const peekDump = (result : {
     item: result.item ? result.item.sku : 'UNDEF',
     family: result.family ? result.family.id : 'UNDEF',
     families: result.families ? result.families.map((f) => (f.id)) : 'UNDEF',
-    node: result.node ? 
-      (result.node.skuToken + (result.node.label ? (': ' + result.node.label) : '')) 
-      : 
+    node: result.node ?
+      (result.node.skuToken + (result.node.label ? (': ' + result.node.label) : ''))
+      :
       'UNDEF'
   }
   return JSON.stringify(toDisplay, null, 2)
-}
+}

package/service/impls/standalone/actual-line-item.ts

@@ -81,7 +81,7 @@ class ActualLineItem
     const title = this.fullTitle ? 
       this.fullTitle 
       : 
-      ((cmmc.getFamily(this.familyId)?.title ?? this.familyTitle) + ', ' + this.optionLabel)
+      ((cmmc.getFamilyById(this.familyId)?.title ?? this.familyTitle) + ', ' + this.optionLabel)
 
     return({
       sku: this.sku,

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

@@ -110,7 +110,7 @@ class StandaloneService
     })
   }
 
-  getFamily(id: string): Family | undefined {
+  getFamilyById(id: string): Family | undefined {
     return this._familyMap.get(id)
   }
 
@@ -343,14 +343,13 @@ class StandaloneService
     this._promo = promo
   }
 
-  setCurrentItem(skuToFind: string | undefined): boolean {
+  getItemBySku = (skuToFind: string | undefined): LineItem | undefined => {
 
     if (skuToFind === undefined || skuToFind.length === 0) {
-      this._currentItem = undefined
-      return true
+      return undefined
     }
-      // self calling function
-    this._currentItem = ((): ActualLineItem | undefined  => {
+      // Self-calling
+    const found = ((): ActualLineItem | undefined  => {
 
       const familiesTried: string[] = []
       if (this.selectedFamilies && this.selectedFamilies.length > 0) {
@@ -370,8 +369,19 @@ class StandaloneService
         }
       }
       return undefined
-    })(); // necessary semi
+    })(); // Self-calling, necessary semi
+
+    return found
+  }
 
+  setCurrentItem = (skuToFind: string | undefined): boolean  => {
+
+    if (skuToFind === undefined || skuToFind.length === 0) {
+      this._currentItem = undefined
+      return true
+    }
+      // self calling function
+    this._currentItem = this.getItemBySku(skuToFind) as ActualLineItem | undefined
     this.setCurrentFamily(this._currentItem ? this._currentItem.familyId : undefined)
     return !!this._currentItem
   }

package/tsconfig.json

@@ -1,8 +1,8 @@
 {
-  "extends": "../tsconfig.hanzo-modules.base.json",
+  "extends": "../tsconfig.hanzo.base.json",
   "include": [
     "**/*.ts",
-    "**/*.tsx", "types/string-mutator.ts",
+    "**/*.tsx",
   ],
   "exclude": [
     "node_modules",

package/types/commerce-service.ts

@@ -112,7 +112,8 @@ interface CommerceService extends ObsLineItemRef, ObsFamilyRef {
   get currentFamily(): Family | undefined
 
     // utility
-  getFamily(id: string): Family | undefined
+  getFamilyById(id: string): Family | undefined
+  getItemBySku(sku: string): LineItem | undefined
 }
 
 

package/components/buy/buy-button.tsx

@@ -1,35 +0,0 @@
-'use client'
-import React, {type PropsWithChildren} from 'react'
-
-import { Button, buttonVariants } from '@hanzo/ui/primitives'
-import { type VariantProps } from '@hanzo/ui/util'
-
-import { cn } from '@hanzo/ui/util'
-import { useCommerceUI } from '../..'
-
-const BuyButton: React.FC<
-  PropsWithChildren & 
-  VariantProps<typeof buttonVariants> & 
-  {
-    skuPath: string
-    className?: string 
-  }
-> = ({
-  skuPath,
-  children,
-  className='',
-  ...rest
-}) => {
-
-  const ui = useCommerceUI()
-  const handleClick = () => { ui.showBuyOptions(skuPath) }
-  
-  return (
-    <Button onClick={handleClick} {...rest} className={cn(className, '')}>
-      {children}
-    </Button>
-  )
-}
-
-
-export default BuyButton

package/context/commerce-ui.ts

@@ -1,101 +0,0 @@
-import { 
-  action,
-  computed, 
-  makeObservable, 
-  observable, 
-} from 'mobx'
-import type { CommerceService, LineItem, ObsLineItemRef } from '../types'
-
-
-interface CommerceUI extends ObsLineItemRef {
-  showBuyOptions: (skuPath: string) => void
-  hideBuyOptions: () => void
-  get buyOptionsSkuPath(): string | undefined
-
-  itemQuantityChanged(item: LineItem, val: number, prevVal: number): void
-}
-
-class CommerceUIStore implements CommerceUI {
-
-  static readonly TIMEOUT = 1500
-  _buyOptionsSkuPath: string | undefined = undefined
-  _paused: boolean = false
-  _activeItem: LineItem | undefined = undefined
-  _lastActivity: number | undefined = undefined
-  _service: CommerceService
-
-  constructor(s: CommerceService) {
-    this._service = s
-    makeObservable(this, {
-      _buyOptionsSkuPath: observable,
-      _activeItem: observable.shallow, 
-      showBuyOptions: action,
-      hideBuyOptions: action,
-      buyOptionsSkuPath: computed,
-      itemQuantityChanged: action,
-      tick: action,
-      item: computed
-    })
-  }
-
-  showBuyOptions = (skuPath: string): void => {
-    this._service.setCurrentItem(undefined)
-    this._buyOptionsSkuPath = skuPath
-    this._paused = true
-  } 
-
-  hideBuyOptions = (): void => {
-    this._buyOptionsSkuPath = undefined
-    this._paused = false
-    if (this._lastActivity) {
-      this._lastActivity = Date.now()
-    }
-  }
-
-  get buyOptionsSkuPath(): string | undefined {
-    return this._buyOptionsSkuPath
-  } 
-
-  tick = () => {
-    if (
-      !this._paused
-      &&
-      this._lastActivity 
-      && 
-      (Date.now() - this._lastActivity >= CommerceUIStore.TIMEOUT)
-    ) {
-      this._activeItem = undefined
-      this._lastActivity = undefined
-    }
-  }
-
-  itemQuantityChanged = (item: LineItem, val: number, oldVal: number, ): void  => {
-
-    if (val === 0) {
-      if (this._activeItem?.sku === item.sku) {
-        this._activeItem = undefined
-        this._lastActivity = undefined
-      }
-      // otherwise ignore
-    }
-    else if (val < oldVal) {
-      if (this._activeItem?.sku === item.sku) {
-        this._lastActivity = Date.now()
-      }
-      // otherwise ignore
-    }
-    else {
-        this._activeItem = item
-        this._lastActivity = Date.now()
-    }
-  } 
-
-  get item(): LineItem | undefined {
-    return this._activeItem
-  }
-}
-
-export {
-  CommerceUIStore,
-  type CommerceUI
-}