cmmc: @hanzo/cart --> @hanzo/commerce; @1.0.9; improvements support /buy pages

packages/auth/package.json

@@ -28,23 +28,21 @@
     "clean": "rm -rf dist && rm -rf node_modules"
   },
   "dependencies": {
+    "firebase-admin": "^12.0.0"
+  },
+  "peerDependencies": {
     "@hanzo/ui": "^1.0.8",
     "@hookform/resolvers": "^3.3.4",
     "firebase": "^10.8.0",
-    "firebase-admin": "^12.0.0",
     "lucide-react": "^0.336.0",
+    "react-hook-form": "^7.50.1",
     "mobx": "^6.12.0",
     "mobx-react-lite": "^4.0.5",
-    "react-hook-form": "^7.50.1",
-    "zod": "3.21.4"
-  },
-  "peerDependencies": {
     "next": "^14.1.0",
-    "react": "^18.2.0"
+    "react": "^18.2.0",
+    "zod": "3.21.4"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
     "@types/react": "^18.2.48",
     "cross-fetch": "^4.0.0",
     "typescript": "^5.3.3"

packages/commerce/components/facet-toggles-widget/index.tsx

@@ -4,22 +4,12 @@ import React, { useState } from 'react'
 import { ToggleGroup, ToggleGroupItem,} from "@hanzo/ui/primitives"
 import { cn } from '@hanzo/ui/util'
 
-import type { FacetValueDesc } from '../../types'
+import type { FacetValueDesc, StringMutator, StringArrayMutator } from '../../types'
 import FacetImage from './facet-image'
 
-interface FacetMutatorSingle {
-  val: string | null
-  set(v: string | null): void
-}
-
-interface FacetMutatorMultiple {
-  val: string[] | null
-  set(v: string[] | null): void
-}
-
 const FacetTogglesWidget: React.FC<{
   facetValues: FacetValueDesc[]
-  mutator: FacetMutatorSingle | FacetMutatorMultiple
+  mutator: StringMutator | StringArrayMutator
   multiple?: boolean
   className?: string
   isMobile?: boolean
@@ -34,31 +24,29 @@ const FacetTogglesWidget: React.FC<{
   const [last, setLast] = useState<string | undefined>(undefined)
 
   const handleChangeMultiple = (selected: string[]) => {
-    (mutator as FacetMutatorMultiple).set(selected)
-    if (selected.length === 1) {
-      setLast(selected[0])
-    }
-    else {
-      setLast(undefined)   
-    }
+    (mutator as StringArrayMutator).set(selected)
+    setLast(selected.length === 1 ? selected[0] : undefined)
   }
 
   const handleChangeSingle = (selected: string) => {
-    (mutator as FacetMutatorSingle).set(selected)
-    if (selected) {
-      setLast(selected)
-    }
+    (mutator as StringMutator).set(selected)
+    if (selected) { setLast(selected) }
   }
 
   const roundedToSpread: any = {}
   if (multiple) {
     roundedToSpread.rounded = 'xl'   
   }
 
+  const val = multiple ? 
+    (mutator as StringArrayMutator).get() 
+    : 
+    (mutator as StringMutator).get()
+
   return (
     <ToggleGroup 
       type={multiple ? 'multiple' : 'single'} 
-      value={multiple ? mutator.val as string[] : mutator.val as string}
+      value={val}
       variant='default'
       size={isMobile ? 'sm' : 'default'}
       onValueChange={multiple ? handleChangeMultiple : handleChangeSingle}
@@ -76,7 +64,7 @@ const FacetTogglesWidget: React.FC<{
         <ToggleGroupItem 
           key={fv.value}
           value={fv.value} 
-          disabled={(last && last === fv.value || fv.value === mutator.val)} 
+          disabled={(last && last === fv.value || fv.value === mutator.get())} 
           aria-label={`Select ${fv.label}`}
           {...roundedToSpread}
         >
@@ -91,8 +79,4 @@ const FacetTogglesWidget: React.FC<{
   )
 }
 
-export {
-  FacetTogglesWidget as default,
-  type FacetMutatorSingle,
-  type FacetMutatorMultiple
-}
+export default FacetTogglesWidget

packages/commerce/components/facets-widget.tsx

@@ -3,17 +3,14 @@ import React, { type PropsWithChildren } from 'react'
 
 import { cn } from '@hanzo/ui/util'
 
-import type { FacetsDesc } from '../types'
+import type { FacetsDesc, StringMutator, StringArrayMutator } from '../types'
 
-import FacetTogglesWidget, { 
-  type FacetMutatorSingle, 
-  type FacetMutatorMultiple
-} from './facet-toggles-widget'
+import FacetTogglesWidget from './facet-toggles-widget'
 
 const FacetsWidget: React.FC<PropsWithChildren & {
   facets: FacetsDesc
   facetClassNames?: string[]
-  mutators:  FacetMutatorSingle[] | FacetMutatorMultiple[]
+  mutators:  StringMutator[] | StringArrayMutator[]
   multiple?: boolean
   isMobile?: boolean
   id?: string

packages/commerce/components/index.ts

@@ -1,11 +1,11 @@
-export { default as ProductCard } from './product-card'
 export { default as AddToCartWidget } from './add-to-cart-widget'
 export { default as Cart } from './cart'
 export { default as CartLineItem } from './cart-line-item'
-export { default as CategoryView } from './category-view'
 export { default as FacetsWidget } from './facets-widget'
 export { default as FacetTogglesWidget } from './facet-toggles-widget'
+export { default as ProductCard } from './product-card'
 export { default as ProductSelectionMobilePicker } from './product-selection-mobile-picker'
 export { default as ProductSelectionRadioGroup } from './product-selection-radio-group'
-export { default as CategoryAndItemWidget } from './category-and-item-widget'
+export { default as SelectCategoryAndItemWidget } from './select-category-and-item-widget'
+export { default as SelectItemInCategoryView } from './select-item-in-category-view'
 export * as Icons from './Icons'

packages/commerce/components/category-and-item-widget.tsx → packages/commerce/components/select-category-and-item-widget.tsx

@@ -16,7 +16,7 @@ const formatItem = (item: LineItem, withQuantity: boolean = false): string => (
   `${item.titleAsOption}, ${formatPrice(item.price)}${(withQuantity && item.quantity > 0) ? `  (${item.quantity})` : ''}`
 )
 
-const CategoryAndItemWidget: React.FC<{
+const SelectCategoryAndItemWidget: React.FC<{
   categoryLevel: number
   parentLevelToken: string
   categoryLevelValues: FacetValueDesc[]
@@ -56,7 +56,7 @@ const CategoryAndItemWidget: React.FC<{
       <FacetTogglesWidget 
         facetValues={categoryLevelValues} 
         mutator={{
-          val: currentFacetToken.get(),
+          get: currentFacetToken.get, // computed's are accessed through their get()
           set: onFacetTokenChanged
         }} 
       />
@@ -81,4 +81,4 @@ const CategoryAndItemWidget: React.FC<{
   )
 })
 
-export default CategoryAndItemWidget
+export default SelectCategoryAndItemWidget