@hanzo/commerce 1.0.10 → 1.0.12

package/components/cart.tsx

@@ -1,17 +1,16 @@
 'use client'
 import React, { type PropsWithChildren, useState } from 'react'
+import { useRouter } from 'next/navigation'
 import { observer } from 'mobx-react-lite'
 
 import { Button } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
+import { useAuth } from '@hanzo/auth/service'
 
 import { persistCart, useCommerce } from '../service'
 import { formatPrice } from '../util'
 
 import CartLineItem from './cart-line-item'
-import { useRouter } from 'next/navigation'
-import { useAuth } from '@hanzo/auth/service'
-
 
 const Cart: React.FC<PropsWithChildren & {
   className?: string
@@ -24,14 +23,14 @@ const Cart: React.FC<PropsWithChildren & {
   hideCheckout=false
 }) => {
   const [loadingCheckout, setLoadingCheckout] = useState(false)
-  const c = useCommerce()
+  const cmmc = useCommerce()
   const router = useRouter()
   const auth = useAuth()
 
   const checkout = async () => {
     setLoadingCheckout(true)
     if (auth.user) {
-      await persistCart(c.cartItems, auth.user.email)
+      await persistCart(cmmc.cartItems, auth.user.email)
     }
     router.push('/checkout')
   }
@@ -41,14 +40,14 @@ const Cart: React.FC<PropsWithChildren & {
       {children}
       <div className='mt-2'>
         {!!children && <div className='h-[1px] w-pr-80 mx-auto bg-muted-3'/>}
-      {c.cartItems.length === 0 ? (
+      {cmmc.cartItems.length === 0 ? (
         <p className='text-center mt-4'>No items in cart</p>
       ) : (<>
-        {c.cartItems.map((item, i) => (<CartLineItem isMobile={isMobile} item={item} key={item.sku} className='mb-4 sm:mb-2'/>))}
-        <p className='mt-6 text-right border-t pt-1'>TOTAL: {c.cartTotal === 0 ? '0' : formatPrice(c.cartTotal)}</p>
+        {cmmc.cartItems.map((item, i) => (<CartLineItem isMobile={isMobile} item={item} key={item.sku} className='mb-4 sm:mb-2'/>))}
+        <p className='mt-6 text-right border-t pt-1'>TOTAL: {cmmc.cartTotal === 0 ? '0' : formatPrice(cmmc.cartTotal)}</p>
       </>)}
       </div>
-      {c.cartItems.length > 0 && !hideCheckout && (
+      {cmmc.cartItems.length > 0 && !hideCheckout && (
         <>
           {!auth.loggedIn ? (
             <Button size='lg' variant='secondary' rounded='lg' className='mt-12 mx-auto' onClick={() => router.push('/login?redirectUrl=checkout')}>Login</Button>

package/components/select-item-in-category-view.tsx

@@ -31,15 +31,15 @@ const SelectItemInCategoryView: React.FC<React.HTMLAttributes<HTMLDivElement> &
   ...props
 }) => {
 
-  const waiting = (): boolean => (isLoading || !category)
+  const waiting = (): boolean => (isLoading) // keep for convenience for now
 
   const CategoryImage: React.FC<{ className?: string }> = ({ className = '' }) => {
 
     if (waiting()) {
       // deliberately not Skeleton to have a better overall pulse effect.
       return <div className={cn(
-        'bg-level-1 rounded-xl aspect-square ' +
-        ' min-h-[100px] sm:min-h-[200px] lg:aspect-auto lg:h-[300px] lg:w-[200px] 2xl:w-auto 2xl:aspect-square',
+        'bg-level-1 rounded-xl aspect-square w-full min-h-1 ', // +
+        //' min-h-[100px] sm:min-h-[200px] lg:aspect-auto  2xl:w-auto 2xl:aspect-square',
         className)} />
     }
 
@@ -49,7 +49,7 @@ const SelectItemInCategoryView: React.FC<React.HTMLAttributes<HTMLDivElement> &
           aria-label='Placeholder'
           role='img'
           aria-roledescription='placeholder'
-          className={cn('h-60 flex items-center justify-center', className)}
+          className={cn('w-full flex items-center justify-center aspect-square' , className)}
         >
           <Icons.barcode className='h-9 w-9 text-muted' aria-hidden='true' />
         </div>
@@ -83,13 +83,13 @@ const SelectItemInCategoryView: React.FC<React.HTMLAttributes<HTMLDivElement> &
       <Skeleton className={'min-h-[120px] w-pr-60 mx-auto ' + className} />
     ) : (
       <div /* id='CV_AVAIL_AMOUNTS' */ className={cn(
-        'w-full md:w-auto flex flex-col justify-start items-center',
+        'sm:w-pr-80 sm:mx-auto md:w-full  flex flex-col justify-start items-center',
         (soleOption ? 'gap-2' : mobilePicker ? 'gap-4' : 'gap-8'),
         className
       )}>
         <div className='w-full flex flex-col justify-start items-center'>
           <h6 className='text-center font-semibold'>{`Available size${soleOption ? '' : 's'}`}</h6>
-          <div className={'h-[1px] bg-muted-3 ' + (mobilePicker ?  'w-pr-55' :  'w-pr-70') } />
+          <div className={'h-[1px] bg-muted-3 ' + (mobilePicker ?  'w-pr-55' :  'w-pr-80') } />
         </div>
         {soleOption ? (
           <p>{category.products[0].titleAsOption}</p>
@@ -107,8 +107,8 @@ const SelectItemInCategoryView: React.FC<React.HTMLAttributes<HTMLDivElement> &
               products={category.products}
               selectedSku={lineItemRef.item?.sku ?? undefined}  
               onValueChange={handleItemSelected}
-              groupClx='block xs:columns-2 xs:px-3 columns-3 gap-2 lg:columns-2 lg:gap-6 w-full lg:auto'
-              itemClx='flex flex-row gap-2 items-center mb-3 xs:mb-5'
+              groupClx='grid grid-cols-2 gap-0 gap-y-3 gap-x-8 '
+              itemClx='flex flex-row gap-2 items-center'
             />
           )
         )}
@@ -128,11 +128,11 @@ const SelectItemInCategoryView: React.FC<React.HTMLAttributes<HTMLDivElement> &
     waiting() ? (<Skeleton className={'h-12 w-pr-80 mx-auto ' + className} />) : (
 
       <div className={cn('flex flex-col justify-start items-center mb-6', className)}>
-        <h3 className='text-lg lg:text-xl font-heading text-center'>
-          <span className='xs:inline sm:hidden md:inline lg:hidden'>
+        <h3 className='text-base md:text-lg lg:text-2xl md:mt-[2vw] font-nav text-center'>
+          <span className='xs:inline md:hidden'>
             {category.title.split(', ').map((s, i) => (<p key={i}>{s}</p>))}
           </span>
-          <span className='xs:hidden sm:inline md:hidden lg:inline'>
+          <span className='xs:hidden md:inline '>
             {category.title}
           </span>
         </h3>
@@ -174,12 +174,17 @@ const SelectItemInCategoryView: React.FC<React.HTMLAttributes<HTMLDivElement> &
   ) : (
     <div /* id='CV_OUTERMOST' */>
       <div /* id='CV_OUTER' */ className={cn('w-full flex flex-row justify-between items-stretch gap-6 sm:gap-4', className)} {...props}>
-        <div /* id='CV_IMAGE_COL' */ className={'relative ' + (!isLoading ? 'w-pr-33' : '')}>
-          <CategoryImage className='' />
+        <div /* id='CV_IMAGE_COL_SEP' */ className={'relative ' + (!isLoading ? 'md:hidden sm:min-w-[185px] xl:flex xl:w-pr-40' : '')}>
+          <CategoryImage className='w-full' />
         </div>
-        <div /* id='CV_CONTENT_COL */ className='w-pr-66'>
+        <div /* id='CV_CONTENT_COL */ className='flex flex-col gap-y-6 xl:w-pr-60'>
+          <div /* id='CV_MD_IMAGE_AND_TITLE */ className='hidden md:flex xl:hidden flex-row gap-x-3'>
+            <CategoryImage className='min-w-pr-30' />
+            <TitleArea className='grow' />
+          </div>
+          
           <div /*  id='CV_CONTENT' */ className={'flex flex-col gap-2.5 ' + (isLoading ? 'justify-between h-full' : '')}>
-            <TitleArea className='' />
+            <TitleArea className='md:hidden xl:flex' />
             <Desc className='' />
           </div>
           <div /* id='CV_CTA_AREA_BIG' */ className='hidden lg:flex p-4 flex-col justify-start items-center gap-6'>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/commerce",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "Library with shopping cart components.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -33,7 +33,7 @@
     "react-mobile-picker": "^1.0.0"
   },
   "peerDependencies": {
-    "@hanzo/auth": "^1.0.9",
+    "@hanzo/auth": "^1.0.12",
     "@hanzo/ui": "^1.0.8",
     "firebase": "^10.8.0",
     "mobx": "^6.12.0",

package/service/commerce-service.ts

@@ -30,7 +30,7 @@ interface CommerceService extends ObsLineItemRef {
      * "current" is unrelated to what is "specified",
      * ie, facets' values 
      *  */ 
-  setCurrentItem(sku: string | undefined): void
+  setCurrentItem(sku: string | undefined): boolean // was valid sku and was set.
     /**
      * For convenience, so widgets can share state.
      * "current" is unrelated to what is "specified",

package/service/impl/standalone/service.ts

@@ -31,7 +31,7 @@ class StandaloneCommerceService
 
   private _options : StandaloneServiceOptions
 
-  private _currentItemSku: string | undefined = undefined
+  private _currentItem: LineItem | undefined = undefined
 
   constructor(
     categories: Category[],
@@ -50,20 +50,20 @@ class StandaloneCommerceService
     makeObservable<
       StandaloneCommerceService, 
         '_selectedFacets' | 
-        '_currentItemSku' 
+        '_currentItem' 
     >(this, {
       _selectedFacets :  observable.deep,
-      _currentItemSku: observable,
+      _currentItem: observable,
     })
 
     makeObservable(this, {
       cartItems: computed,
       cartTotal: computed, 
       specifiedItems: computed,
+      specifiedCategories: computed, 
       setCurrentItem: action,
       currentItem: computed,
       item: computed,
-      specifiedCategories: computed, 
       facetsValue: computed
       /* NOT setFacets. It implements it's action mechanism */
     })
@@ -85,39 +85,46 @@ class StandaloneCommerceService
     )
   }
 
-  setCurrentItem(sku: string | undefined): void {
-    this._currentItemSku = sku
+  setCurrentItem(skuToFind: string | undefined): boolean {
+
+    if (skuToFind === undefined || skuToFind.length === 0) {
+      this._currentItem = undefined
+      return true
+    }
+    
+    this._currentItem = ((): LineItem | undefined  => {
+      const categoriesTried: string[] = []
+      if (this.specifiedCategories && this.specifiedCategories.length > 0) {
+  
+        for (let category of this.specifiedCategories) {
+          categoriesTried.push(category.id)
+          const foundItem = 
+            (category.products as LineItem[]).find((item) => (item.sku === skuToFind))
+          if (foundItem) {
+            return foundItem
+          }
+        }
+      }
+      
+      let foundItem: LineItem | undefined = undefined
+      this._categoryMap.forEach((category, categoryId) => {
+        if (foundItem) return
+        if (categoriesTried.includes(categoryId)) return
+        foundItem = (category.products as LineItem[]).find((item) => (item.sku === skuToFind))
+      }) 
+    })();
+
+    return !!this._currentItem
   }
 
+
   /* ObsLineItemRef */
   get item(): LineItem | undefined {
     return this.currentItem
   }
 
   get currentItem(): LineItem | undefined {
-    if (!this._currentItemSku) return undefined
-
-    const categoriesTried: string[] = []
-    if (this.specifiedCategories && this.specifiedCategories.length > 0) {
-
-      for (let category of this.specifiedCategories) {
-        categoriesTried.push(category.id)
-        const foundItem = 
-          (category.products as LineItem[]).find((item) => (item.sku === this._currentItemSku))
-        if (foundItem) {
-          return foundItem
-        }
-      }
-    }
-    
-    let foundItem: LineItem | undefined = undefined
-    this._categoryMap.forEach((category, categoryId) => {
-      if (foundItem) return
-      if (categoriesTried.includes(categoryId)) return
-      foundItem = (category.products as LineItem[]).find((item) => (item.sku === this._currentItemSku))
-    }) 
-
-    return foundItem
+    return this._currentItem
   }
 
   setFacets(sel: FacetsValue): Category[] {

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

@@ -1,6 +1,7 @@
 import { 
   useEffect, 
   useRef,
+  useState,
 } from 'react'
 import { autorun, toJS, type IReactionDisposer } from 'mobx'
 
@@ -13,6 +14,8 @@ import {
 import type { Category, FacetsValue, StringMutator } from '../types'
 import { useCommerce } from '../service'
 
+const PLEASE_SELECT_FACETS = 'Please select an option from each group above.'
+
 interface GetMutator {
   (level: 1 | 2): StringMutator
 }
@@ -24,11 +27,9 @@ const useSkuAndFacetParams = (
   const cmmc = useCommerce()
 
   const encRef = useRef<{
-    category: Category | undefined
     usingSkuMode: boolean
     autoRunDisposer: IReactionDisposer | undefined
   }>({
-    category: undefined,
     usingSkuMode: false,
     autoRunDisposer: undefined,
   })
@@ -40,12 +41,15 @@ const useSkuAndFacetParams = (
     parseAsString.withDefault('').withOptions({ clearOnDefault: true })
   )
 
-  const [skuParam, setSkuParam] = useQueryState('sku')
+  const [skuParam, setSkuParam] = useQueryState('sku',  
+    parseAsString.withDefault('').withOptions({ clearOnDefault: true })
+  )
+
   const [addParam, setAddParam] = useQueryState('add', 
     parseAsBoolean.withDefault(false).withOptions({ clearOnDefault: true })
   )
 
-  let message = ''
+  const [message, setMessage] = useState<string | undefined>(undefined)
 
   const directMutator: GetMutator = (level: 1 | 2): StringMutator => {
 
@@ -83,70 +87,80 @@ const useSkuAndFacetParams = (
     
     const setCurrentCategoryFromSku = (sku: string) => {
       const toks: string[] = sku.split('-')
-      const categories = cmmc.setFacets({
+      cmmc.setFacets({
         1: [toks[1]],
         2: [toks[2]]
       })
-      encRef.current.category = categories[0] 
     }
 
     if (skuParam) {
-      cmmc.setCurrentItem(skuParam)
-      if (addParam && cmmc.currentItem!.quantity === 0) {
-        cmmc.currentItem!.increment()  
-        setAddParam(false)
+        // 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)
+            }
+          })
+        }
+        setMessage(undefined)
+        encRef.current.usingSkuMode = true
       }
-        // 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)
-          }
-        })
+      else {
+        setSkuParam('')
+          // if sent here w an invalid sku, 
+          // it will effectively put us in facet params mode
+        setMessage('Invalid sku. ' + PLEASE_SELECT_FACETS)
       }
-      encRef.current.usingSkuMode = true
-    }
-    else if (encRef.current.category) {
-      //const catMutators = [{val: level1, set: setLevel1} , {val: level2, set: setLevel2}]
-      cmmc.setCurrentItem(encRef.current.category.products[0].sku)
     }
+
     setLoading && setLoading(false)
-  }, [skuParam, encRef.current.category])
+  }, [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.length > 1) {
-        console.error("CAT", categories.map((c) => (c.title)))
-        throw new Error ( "CategoryContents: More than one specified Category should never be possible with this UI!")
+      if (categories && categories.length > 0) {
+        cmmc.setCurrentItem(categories?.[0].products[0].sku)
+        setMessage(undefined)
+      }
+      else {
+        cmmc.setCurrentItem(undefined)
+        setMessage('Unrecognized facets. ' + PLEASE_SELECT_FACETS)
       }
-      encRef.current.category = categories[0] 
     }
     else {
-      message = 'Please select an option from each group above.'
+      setMessage(PLEASE_SELECT_FACETS)
     }
     setLoading && setLoading(false)
   }, [level1 , level2])
 
   return {
-    category: encRef.current.category,
     message,
     getMutator: encRef.current.usingSkuMode ?
       directMutator : paramsMutator