@hanzo/commerce 1.1.6 → 1.1.7

package/components/facet-toggles-widget/index.tsx

@@ -12,12 +12,14 @@ const FacetTogglesWidget: React.FC<{
   mutator: StringMutator | StringArrayMutator
   multiple?: boolean
   className?: string
+  buttonClx?: string
   isMobile?: boolean
   tabSize?: string
 }> = ({
   facetValues,
   mutator,
   multiple='',
+  buttonClx='',
   className='',
   isMobile=false,
   tabSize
@@ -50,7 +52,7 @@ const FacetTogglesWidget: React.FC<{
       type={multiple ? 'multiple' : 'single'} 
       value={val}
       variant='default'
-      size={isMobile ? 'sm' : tabSize ? tabSize : 'default'}
+      size={tabSize ? tabSize : (isMobile ? 'sm' : 'default')}
       onValueChange={multiple ? handleChangeMultiple : handleChangeSingle}
       className={className}
       {...roundedToSpread}
@@ -69,6 +71,7 @@ const FacetTogglesWidget: React.FC<{
           disabled={(last && last === fv.value || fv.value === mutator.get())} 
           aria-label={`Select ${fv.label}`}
           {...roundedToSpread}
+          className={buttonClx}
         >
           <span className={cn('flex flex-row justify-center gap-1 h-4 items-center')} >
             <FacetImage facetValueDesc={fv} />

package/components/facets-widget.tsx

@@ -9,8 +9,9 @@ import FacetTogglesWidget from './facet-toggles-widget'
 
 const FacetsWidget: React.FC<PropsWithChildren & {
   facets: FacetsDesc
-  facetClassNames?: string[]
   mutators:  StringMutator[] | StringArrayMutator[]
+  facetClx?: string[]
+  facetItemClx?: string
   multiple?: boolean
   isMobile?: boolean
   id?: string
@@ -21,7 +22,8 @@ const FacetsWidget: React.FC<PropsWithChildren & {
   facets,
   mutators,
   multiple=false,
-  facetClassNames,
+  facetClx,
+  facetItemClx='',
   isMobile=false,
   className='',
   tabSize,
@@ -37,7 +39,8 @@ const FacetsWidget: React.FC<PropsWithChildren & {
         mutator={mutators[i]} 
         isMobile={isMobile}
         facetValues={facets[parseInt(key)]} 
-        className={cn((horiz ? '' : 'mb-2'), (i !== 0 && !horiz) ? 'mt-2' : '', (facetClassNames?.[i]) ?? '')} 
+        className={cn((horiz ? '' : 'mb-2'), (i !== 0 && !horiz) ? 'mt-2' : '', (facetClx?.[i]) ?? '')}
+        buttonClx={facetItemClx} 
         tabSize={tabSize}
       />
     ))}

package/components/product-selection-radio-group.tsx

@@ -19,18 +19,20 @@ const ProductSelectionRadioGroup: React.FC<{
   itemClx='',
   showPrice=true
 }) => (
-  <RadioGroup
-    className={groupClx}
-    onValueChange={onValueChange}
-    value={selectedSku}
-  >
-  {products.map((prod) => (
-    <div className={itemClx} key={prod.sku}>
-      <RadioGroupItem value={prod.sku} id={prod.sku} />
-      <Label htmlFor={prod.sku}>{prod.titleAsOption + (showPrice ? (', ' + formatPrice(prod.price)) : '')}</Label>
-    </div>
-  ))}
-  </RadioGroup>
+  products.length > 1 && (
+    <RadioGroup
+      className={groupClx}
+      onValueChange={onValueChange}
+      value={selectedSku}
+    >
+    {products.map((prod) => (
+      <div className={itemClx} key={prod.sku}>
+        <RadioGroupItem value={prod.sku} id={prod.sku} />
+        <Label htmlFor={prod.sku}>{prod.titleAsOption + (showPrice ? (', ' + formatPrice(prod.price)) : '')}</Label>
+      </div>
+    ))}
+    </RadioGroup>
+  )
 )
 
 export default ProductSelectionRadioGroup

package/package.json

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

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

@@ -76,6 +76,7 @@ class StandaloneService
 
     makeObservable(this, {
       cartItems: computed,
+      cartQuantity: computed,
       cartTotal: computed, 
       specifiedItems: computed,
       specifiedCategories: computed, 
@@ -118,6 +119,13 @@ class StandaloneService
     )
   }
 
+  get cartQuantity(): number {
+    return this.cartItems.reduce(
+      (total, item) => (total + item.quantity), 
+      0
+    )
+  }
+
   setCurrentItem(skuToFind: string | undefined): boolean {
 
     if (skuToFind === undefined || skuToFind.length === 0) {

package/types/commerce-service.ts

@@ -4,8 +4,13 @@ import type Category from './category'
 
 interface CommerceService extends ObsLineItemRef {
 
+    /** Items in cart */
   get cartItems(): LineItem[]
+    /** Total of all quantities of items in cart */
+  get cartQuantity(): number
+    /** Total of all prices X quantities of items in cart */
   get cartTotal(): number
+   
   getCartCategorySubtotal(categoryId: string): number
 
   createOrder(email: string, paymentMethod: string): Promise<string | undefined>