@hanzo/commerce 1.0.9 → 1.0.11

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-category-and-item-widget.tsx

@@ -44,19 +44,19 @@ const SelectCategoryAndItemWidget: React.FC<{
     comm.setFacets(facets)
   }
 
-  const currentFacetToken = computed((): string | null => {
+  const currentFacetToken = (): string | null => {
     if (comm.specifiedCategories.length === 0) return null
     const skuPath = comm.specifiedCategories[0].id
     const skuPathTokens = skuPath.split('-')
     return skuPathTokens.length > 0 ? skuPathTokens[skuPathTokens.length - 1] : null
-  })
+  }
 
   return (
     <div className={cn('flex flex-col justify-start gap-4 items-start pt-3', className)}>
       <FacetTogglesWidget 
         facetValues={categoryLevelValues} 
         mutator={{
-          get: currentFacetToken.get, // computed's are accessed through their get()
+          get: currentFacetToken, // computed's are accessed through their get()
           set: onFacetTokenChanged
         }} 
       />

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

@@ -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.9",
+  "version": "1.0.11",
   "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",