@hanzo/commerce 4.4.1 → 4.5.0

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

@@ -2,7 +2,7 @@
 import React from 'react'
 import { observer } from 'mobx-react-lite'
 
-import { Button, type ButtonSizes } from '@hanzo/ui/primitives'
+import { Button, toast, type ButtonSizes } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
 
 import { Icons } from './Icons'
@@ -44,6 +44,13 @@ const AddToCartWidget: React.FC<{
     if (onQuantityChanged) {
       onQuantityChanged(item.sku, old, old + 1) 
     }
+    if (old === 0) {
+      toast(`Added ${item.title} to your bag.`)
+    }
+    else {
+      toast(`Changed quantity to ${old + 1} for ${item.title}.`)
+    }
+
   }
 
   const dec = () => {
@@ -52,6 +59,12 @@ const AddToCartWidget: React.FC<{
     if (onQuantityChanged) {
       onQuantityChanged(item.sku, old, old - 1) 
     }
+    if (old === 1) {
+      toast(`Removed ${item.title} from your bag.`)
+    }
+    else {
+      toast(`Changed quantity to ${old - 1} for ${item.title}.`)
+    }
   }
 
   return ( item.isInCart ? (

package/components/buy-item/select-category-item-card.tsx

@@ -9,7 +9,7 @@ import type { ItemSelector, LineItem } from '../../types'
 
 import AddToCartWidget from '../add-to-cart-widget'
 import CategoryItemRadioSelector from '../category-item-radio-selector'
-import CategoryItemIOSWheelSelector from '../category-item-ios-wheel-selector'
+import CategoryItemScrollSelector from '../category-item-scroll-selector'
 import { formatPrice } from '../../util'
 
 const SelectCategoryItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & ItemSelector & {
@@ -52,13 +52,12 @@ const SelectCategoryItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & It
       )}>
         {!noTitle && (<div className={'h-[1px] bg-muted-3 ' + (mobilePicker ?  'w-pr-55' :  'w-pr-60') } /> )}
         {mobilePicker ? (
-          <CategoryItemIOSWheelSelector
+          <CategoryItemScrollSelector
             category={category}
             selectedItemRef={selItemRef}  
             selectSku={selectSku}
-            height={180}
-            itemHeight={30}
-            outerClx='w-full'
+            itemClx='h-10 border-b px-4'
+            outerClx='min-w-pr-80 h-[180px]' // 80% of 65% parent
           />
         ) : (
           <CategoryItemRadioSelector 

package/components/cart-panel/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React, { useState, type PropsWithChildren } from 'react'
+import React, { type PropsWithChildren } from 'react'
 import { observer } from 'mobx-react-lite'
 
 import { Button } from '@hanzo/ui/primitives'
@@ -9,21 +9,23 @@ import { useCommerce } from '../../service/context'
 import { formatPrice } from '../../util'
 
 import CartLineItem from './cart-line-item'
-import CheckoutPanel from '../checkout-panel'
 
 const CartPanel: React.FC<PropsWithChildren & {
   className?: string
   isMobile?: boolean,
   noCheckout?: boolean
+  onCheckoutOpen?: () => void
 }> = observer(({
     /** Children is the heading area. */
   children,
   className='',
   isMobile=false,
-  noCheckout=false
+  noCheckout=false,
+  onCheckoutOpen,
 }) => {
-
-  const [checkoutOpen, setCheckoutOpen] = useState<boolean>(false)
+  /* TODO: onCheckoutOpen is a hackish way fix a bug with multiple dialog opened at the same time.
+  *  Needs refactor with context or so.
+  **/
   const cmmc = useCommerce()
   if (!cmmc) {
     return <div />
@@ -48,12 +50,11 @@ const CartPanel: React.FC<PropsWithChildren & {
             variant='primary' 
             rounded='lg' 
             className='mt-12 mx-auto w-full' 
-            onClick={() => setCheckoutOpen(true)}
+            onClick={onCheckoutOpen}
           >
             Checkout
           </Button>
         )}
-        {checkoutOpen && <CheckoutPanel open={checkoutOpen} setOpen={setCheckoutOpen}/>}
       </>)}
     </div>
   )

package/components/category-item-scroll-selector.tsx

@@ -0,0 +1,40 @@
+'use client'
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { cn } from '@hanzo/ui/util'
+import { ScrollArea } from '@hanzo/ui/primitives'
+
+import type { ItemSelector } from '../types'
+import { formatPrice } from '../util'
+
+
+const CategoryItemScrollSelector: React.FC<ItemSelector & {
+  outerClx?: string
+  itemClx?: string
+}> = observer(({
+  category,
+  selectedItemRef: iRef,
+  selectSku,
+  outerClx='',
+  itemClx=''
+}) => {
+
+  return (
+    <ScrollArea className={cn('border border-muted-4 rounded-lg', outerClx)}>
+      {category.products.map((prod) => (
+        <div key={prod.sku} onClick={() => {selectSku(prod.sku)}}>
+          <div className={cn(
+            'h-10 border-b flex flex-col justify-center px-4',
+            (iRef.item?.sku === prod.sku) ? 'font-semibold text-accent' : 'text-muted', 
+            itemClx
+          )}>
+            {prod.titleAsOption + ', ' + formatPrice(prod.price)}
+          </div>
+        </div>
+      ))}
+    </ScrollArea>
+  )
+})
+
+export default CategoryItemScrollSelector

package/components/checkout-panel/index.tsx

@@ -10,7 +10,6 @@ import {
   AccordionTrigger,
   Dialog,
   DialogPortal,
-  Toaster
 } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
 import { AuthWidget } from '@hanzo/auth/components'
@@ -26,13 +25,18 @@ import { formatPrice, useCommerce } from '../..'
 
 const CheckoutPanel: React.FC<{
   open: boolean
-  setOpen: (open: boolean) => void
+  onCheckoutClose: () => void
 }> = observer(({
   open,
-  setOpen
+  onCheckoutClose
 }) => {
 
   const cmmc = useCommerce()
+    
+    // For sites that don't initialize cmmc
+  if (!cmmc) {
+    return <></>
+  }
   
   const [step, setStep] = useState<number>(1)
   const [orderId, setOrderId] = useState<string>()
@@ -62,7 +66,7 @@ const CheckoutPanel: React.FC<{
 
   const onClose = () => {
     setStep(1)
-    setOpen(false)
+    onCheckoutClose()
   }
 
   return (
@@ -98,9 +102,8 @@ const CheckoutPanel: React.FC<{
                 </Accordion>
               </div>
             </div>
-            <div className='bg-level-1 flex flex-row items-start justify-start'>
-              <div className='h-full w-full max-w-[750px] relative flex flex-col gap-8 sm:gap-14 md:overflow-y-auto px-6 pb-6'>
-                <Toaster/>  
+            <div className='bg-level-1 flex flex-row items-start justify-start md:overflow-y-auto'>
+              <div className='h-full w-full max-w-[750px] relative flex flex-col gap-8 sm:gap-14 px-8 pb-6 pt-6 md:pt-14'>
                 <AuthWidget hideLogin className='hidden md:flex absolute top-4 right-4 '/>
                 <StepIndicator steps={steps} currentStep={step} className='flex gap-2 mx-auto items-center text-xxs sm:text-base' />
                 {steps[step].element}

package/components/checkout-panel/payment/pay-with-bank-transfer.tsx

@@ -18,7 +18,7 @@ const InfoField: React.FC<{
 }) => {
   const copyToClipboard = (label: string, text: string) => {
     navigator.clipboard.writeText(text)
-    toast({title: `${label} copied to clipboard`})
+    toast(`${label} copied to clipboard`)
   }
 
   return (

package/components/checkout-panel/payment/pay-with-crypto.tsx

@@ -116,7 +116,7 @@ const PayWithCrypto: React.FC<{
           })
         }
       } catch (err) {
-        toast({title: 'Please switch your wallet to the Ethereum network.'})
+        toast('Please switch your wallet to the Ethereum network.')
         return
       }
 
@@ -161,7 +161,7 @@ const PayWithCrypto: React.FC<{
       } catch (err) {
         console.log(err)
         // :aa TODO string table
-        toast({title: 'Not enough funds in your wallet'})
+        toast('Not enough funds in your wallet')
       }
     })()
   }

package/components/index.ts

@@ -5,7 +5,7 @@ export { default as BuyItemCard } from './buy-item/buy-item-card'
 export { default as BuyItemPopup } from './buy-item/buy-item-popup'
 export { default as CartPanel } from './cart-panel'
 export { default as CheckoutPanel } from './checkout-panel'
-export { default as CategoryItemIOSWheelSelector } from './category-item-ios-wheel-selector'
+export { default as CategoryItemIOSWheelSelector } from './category-item-scroll-selector'
 export { default as CategoryItemRadioSelector } from './category-item-radio-selector'
 export { default as FacetValuesWidget } from './facet-values-widget'
 export { default as ProductCard } from './product-card'

package/components/select-category-item-panel.tsx

@@ -12,7 +12,7 @@ import { Icons } from './Icons'
 
 import AddToCartWidget from './add-to-cart-widget'
 import CategoryItemRadioSelector from './category-item-radio-selector'
-import CategoryItemIOSWheelSelector from './category-item-ios-wheel-selector'
+import CategoryItemScrollSelector from './category-item-scroll-selector'
 
 const SelectCategoryItemPanel: React.FC<
   React.HTMLAttributes<HTMLDivElement> & ItemSelector &   
@@ -89,14 +89,13 @@ const SelectCategoryItemPanel: React.FC<
           <div className={'h-[1px] bg-muted-3 ' + (mobilePicker ?  'w-pr-55' :  'w-pr-60') } />
         </div>
         {mobilePicker ? (
-          <CategoryItemIOSWheelSelector
+          <CategoryItemScrollSelector
             category={category}
             selectedItemRef={selectedItemRef}  
             selectSku={selectSku}
             showQuantity={showQuantity}
-            height={180}
-            itemHeight={30}
-            outerClx='mb-4'
+            itemClx='h-10 border-b px-4'
+            outerClx='mb-4 h-[180px]'
           />
         ) : (
           <CategoryItemRadioSelector 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/commerce",
-  "version": "4.4.1",
+  "version": "4.5.0",
   "description": "Library with shopping cart components.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -33,20 +33,19 @@
   "dependencies": {
     "ethers": "^6.11.1",
     "next-usequerystate": "^1.17.0",
-    "react-mobile-picker": "^1.0.0",
     "react-square-web-payments-sdk": "^3.2.1",
     "square": "^35.0.0"
   },
   "peerDependencies": {
-    "@hanzo/auth": "^2.2.0",
-    "@hanzo/ui": "^3.0.2",
+    "@hanzo/auth": "^2.2.1",
+    "@hanzo/ui": "^3.0.7",
     "@hookform/resolvers": "^3.3.4",
     "firebase": "^10.8.0",
     "lucide-react": "^0.307.0",
     "mobx": "^6.12.0",
     "mobx-react-lite": "^4.0.5",
     "mobx-utils": "^6.0.8",
-    "next": "^14.1.0",
+    "next": "14.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "7.50.1",

package/components/category-item-ios-wheel-selector.tsx

@@ -1,62 +0,0 @@
-'use client'
-import React from 'react'
-import Picker from 'react-mobile-picker'
-import { observer } from 'mobx-react-lite'
-
-import type { ItemSelector } from '../types'
-import { formatPrice } from '../util'
-import { cn } from '@hanzo/ui/util'
-
-  // from source code
-interface PickerItemRenderProps {
-  selected: boolean;
-}
-
-const CategoryItemIOSWheelSelector: React.FC<ItemSelector & {
-  height?: number
-  itemHeight?: number
-  outerClx?: string
-  itemClx?: string
-}> = observer(({
-  category,
-  selectedItemRef: iRef,
-  selectSku,
-  height,
-  itemHeight,
-  outerClx='',
-  itemClx=''
-}) => {
-
-    // @ts-ignore
-  const onChange = (val, ignore) => {
-    console.log("WHEEL: ", val.item)
-    selectSku(val.item)
-  }
-
-  return (
-    <div className={cn('border border-muted-4 rounded-lg px-2', outerClx)}>
-      <Picker
-        className=''
-        value={iRef.item ? {item: iRef.item.sku} : {item: undefined}}
-        onChange={onChange}
-        wheelMode="natural"
-        height={height}
-        itemHeight={itemHeight}
-      >
-        <Picker.Column name="item">
-        {category.products.map((prod) => (
-          <Picker.Item key={prod.sku} value={prod.sku}>
-          {({ selected }: PickerItemRenderProps) => (
-            <div className={cn(selected ? 'font-semibold text-accent' : 'text-muted', itemClx)}>
-              {prod.titleAsOption + ', ' + formatPrice(prod.price)}
-            </div>
-          )}
-          </Picker.Item>
-        ))}
-        </Picker.Column>
-      </Picker>
-    </div>
-  )
-})
-
-export default CategoryItemIOSWheelSelector