@hanzo/commerce 7.1.5 → 7.1.6

package/components/cart/cart-accordian.tsx

@@ -1,59 +1,59 @@
-'use client'
-import React  from 'react'
-import { observer } from 'mobx-react-lite'
-
-import { ChevronRight } from 'lucide-react'
-
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '@hanzo/ui/primitives'
-
-import { formatCurrencyValue } from '../../util'
-import { useCommerce } from '../../context'
-
-import CartPanel from './cart-panel'
-
-const CartAccordian: React.FC<{
-  icon?: React.ReactNode
-  className?: string
-}> = observer(({
-  icon,
-  className=''
-}) => { 
-  const cmmc = useCommerce()
-  return (
-    <Accordion type="single" collapsible className={className}>
-      <AccordionItem value="cart" className='w-full border-b-0'>
-        <AccordionTrigger className='!no-underline group flex justify-between'>
-          <div className='flex gap-0 items-center'>
-            {icon}
-            <h5 className='text-sm sm:text-xl grow'>
-              <span className='group-data-[state=open]:hidden' >Order Total:</span>
-              <span className='group-data-[state=closed]:hidden' >Your Order</span>
-            </h5>
-          </div>
-          <div className='flex gap-1 items-center'>
-            <h5 className='text-sm sm:text-xl grow truncate'>{formatCurrencyValue(cmmc.promoAppliedCartTotal)}</h5>
-            <ChevronRight className="h-5 w-5 -mr-2 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90" />
-          </div>
-        </AccordionTrigger>
-        <AccordionContent className='data-[state=open]:mb-4'>
-          <CartPanel 
-            className='w-full '
-            scrollAfter={4}
-            scrollHeightClx='h-[350px]'
-            itemClx='mt-2'
-            totalClx='sticky px-1 pr-2 border-t -bottom-[1px] bg-background'
-            showShipping
-            showPromoCode
-          />
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  )
-})
-
-export default CartAccordian
+'use client'
+import React  from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { ChevronRight } from 'lucide-react'
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@hanzo/ui/primitives'
+
+import { formatCurrencyValue } from '../../util'
+import { useCommerce } from '../../context'
+
+import CartPanel from './cart-panel'
+
+const CartAccordian: React.FC<{
+  icon?: React.ReactNode
+  className?: string
+}> = observer(({
+  icon,
+  className=''
+}) => { 
+  const cmmc = useCommerce()
+  return (
+    <Accordion type="single" collapsible className={className}>
+      <AccordionItem value="cart" className='w-full border-b-0'>
+        <AccordionTrigger className='!no-underline group flex justify-between'>
+          <div className='flex gap-0 items-center'>
+            {icon}
+            <h5 className='text-sm sm:text-xl grow'>
+              <span className='group-data-[state=open]:hidden' >Order Total:</span>
+              <span className='group-data-[state=closed]:hidden' >Your Order</span>
+            </h5>
+          </div>
+          <div className='flex gap-1 items-center'>
+            <h5 className='text-sm sm:text-xl grow truncate'>{formatCurrencyValue(cmmc.promoAppliedCartTotal)}</h5>
+            <ChevronRight className="h-5 w-5 -mr-2 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90" />
+          </div>
+        </AccordionTrigger>
+        <AccordionContent className='data-[state=open]:mb-4'>
+          <CartPanel 
+            className='w-full '
+            scrollAfter={4}
+            scrollHeightClx='h-[350px]'
+            itemClx='mt-2'
+            totalClx='sticky px-1 pr-2 border-t -bottom-[1px] bg-background'
+            showShipping
+            showPromoCode
+          />
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  )
+})
+
+export default CartAccordian

package/components/cart/cart-panel/cart-line-item.tsx

@@ -1,76 +1,76 @@
-'use client'
-
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import { cn } from '@hanzo/ui/util'
-import { Image } from '@hanzo/ui/primitives'
-
-import type { LineItem } from '../../../types'
-import { formatCurrencyValue } from '../../../util'
-import AddToCartWidget from '../../add-to-cart-widget'
-import { useCommerce } from '../../../context'
-
-const DEF_IMG_SIZE=40
-
-const renderTitle = (t: string): React.ReactNode => {
-  const toks = t.split(', ')
-  if (toks.length === 2) {
-    return <><p>{toks[0]},</p><p className=''>{toks[1]}</p></>
-  }
-  return <p>{t}</p>
-}
-
-const CartLineItem: React.FC<{
-  item: LineItem
-  className?: string
-  imgSizePx?: number
-  showPromoCode?: boolean
-  itemClicked?: (item: LineItem) => void
-  selected?: boolean
-}> = observer(({
-  item,
-  className='',
-  imgSizePx=DEF_IMG_SIZE,
-  showPromoCode=false,
-  itemClicked,
-  selected=false
-}) => {
-
-  const cmmc = useCommerce()
-  const promoPrice = showPromoCode ? cmmc.itemPromoPrice(item) : undefined
-
-  return (
-    <div className={cn('flex flex-col justify-start items-start text-sm font-sans', className)}>
-      <div 
-        className={
-          'flex flex-row justify-between items-center gap-1 ' + 
-          (itemClicked && !selected ? 'cursor-pointer ' : 'cursor-default ') 
-        } 
-        onClick={() => {itemClicked && itemClicked(item)}}
-      >
-        {/* 1px gap between image and border for better emphasis w small images */}
-        <div className={selected ? 'border-foreground p-[1px] border rounded-sm' : 'p-[2px]'}>
-        {item.img ? (
-          <Image def={item.img} constrainTo={{w: imgSizePx, h: imgSizePx}} />
-        ) : ( // placeholder so things align
-          <div style={{height: imgSizePx, width: imgSizePx}} className='bg-level-3'/>
-        )}
-        </div>
-        <div className='grow leading-tight ml-1'>{renderTitle(item.title)}</div>
-      </div>
-      <div className='flex flex-row items-center justify-between w-full'>
-        <div className='flex flex-row items-center'>
-          <AddToCartWidget variant='minimal' item={item} buttonClx='!h-8 md:!h-6' />
-          {item.quantity > 1 && (<span className='pl-2.5'>{'@' + formatCurrencyValue(item.price)}</span>)}
-        </div>
-        <div className='flex flex-row gap-1 items-center justify-end'>
-          <span className={promoPrice ? 'line-through	text-muted-2' : ''}>{formatCurrencyValue(item.price * item.quantity)}</span>
-          {promoPrice && <span>{formatCurrencyValue(promoPrice * item.quantity)}</span>}
-        </div>
-      </div>
-    </div>
-  )
-})
-
-export default CartLineItem
+'use client'
+
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { cn } from '@hanzo/ui/util'
+import { Image } from '@hanzo/ui/primitives'
+
+import type { LineItem } from '../../../types'
+import { formatCurrencyValue } from '../../../util'
+import AddToCartWidget from '../../add-to-cart-widget'
+import { useCommerce } from '../../../context'
+
+const DEF_IMG_SIZE=40
+
+const renderTitle = (t: string): React.ReactNode => {
+  const toks = t.split(', ')
+  if (toks.length === 2) {
+    return <><p>{toks[0]},</p><p className=''>{toks[1]}</p></>
+  }
+  return <p>{t}</p>
+}
+
+const CartLineItem: React.FC<{
+  item: LineItem
+  className?: string
+  imgSizePx?: number
+  showPromoCode?: boolean
+  itemClicked?: (item: LineItem) => void
+  selected?: boolean
+}> = observer(({
+  item,
+  className='',
+  imgSizePx=DEF_IMG_SIZE,
+  showPromoCode=false,
+  itemClicked,
+  selected=false
+}) => {
+
+  const cmmc = useCommerce()
+  const promoPrice = showPromoCode ? cmmc.itemPromoPrice(item) : undefined
+
+  return (
+    <div className={cn('flex flex-col justify-start items-start text-sm font-sans', className)}>
+      <div 
+        className={
+          'flex flex-row justify-between items-center gap-1 ' + 
+          (itemClicked && !selected ? 'cursor-pointer ' : 'cursor-default ') 
+        } 
+        onClick={() => {itemClicked && itemClicked(item)}}
+      >
+        {/* 1px gap between image and border for better emphasis w small images */}
+        <div className={selected ? 'border-foreground p-[1px] border rounded-sm' : 'p-[2px]'}>
+        {item.img ? (
+          <Image def={item.img} constrainTo={{w: imgSizePx, h: imgSizePx}} />
+        ) : ( // placeholder so things align
+          <div style={{height: imgSizePx, width: imgSizePx}} className='bg-level-3'/>
+        )}
+        </div>
+        <div className='grow leading-tight ml-1'>{renderTitle(item.title)}</div>
+      </div>
+      <div className='flex flex-row items-center justify-between w-full'>
+        <div className='flex flex-row items-center'>
+          <AddToCartWidget variant='minimal' item={item} buttonClx='!h-8 md:!h-6' />
+          {item.quantity > 1 && (<span className='pl-2.5'>{'@' + formatCurrencyValue(item.price)}</span>)}
+        </div>
+        <div className='flex flex-row gap-1 items-center justify-end'>
+          <span className={promoPrice ? 'line-through	text-muted-2' : ''}>{formatCurrencyValue(item.price * item.quantity)}</span>
+          {promoPrice && <span>{formatCurrencyValue(promoPrice * item.quantity)}</span>}
+        </div>
+      </div>
+    </div>
+  )
+})
+
+export default CartLineItem

package/components/cart/cart-panel/index.tsx

@@ -1,159 +1,161 @@
-'use client'
-import React, { Suspense, type PropsWithChildren } from 'react'
-import { observer } from 'mobx-react-lite'
-
-import { Button, ScrollArea } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
-import { useCommerce } from '../../../context'
-import { formatCurrencyValue } from '../../../util'
-import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
-
-import CartLineItem from './cart-line-item'
-import PromoCode from './promo-code'
-import type { LineItem } from '../../../types'
-
-const CartPanel: React.FC<PropsWithChildren & {
-    /** fix size and scroll after 'scrollAfter items in teh cart. */
-  scrollAfter?: number
-  scrollHeightClx?: string
-  imgSizePx?: number
-  className?: string
-  itemClx?: string
-  listClx?: string
-  noItemsClx?: string
-  totalClx?: string
-  buttonClx?: string
-  showPromoCode?: boolean
-  showShipping?: boolean
-  selectItems?: boolean
-    /** if not provided, 'checkout' button will be rendered */
-  handleCheckout?: () => void
-}> = observer(({
-    /** If provided, 'children' is rendered above the items. eg, a heading. */
-  children,
-  scrollAfter=5,
-  scrollHeightClx='h-[70vh]',
-  imgSizePx=40,
-  className='',
-  itemClx='',
-  listClx='',
-  noItemsClx='',
-  totalClx='',
-  buttonClx='',
-  showPromoCode=false,
-  showShipping=false,
-  selectItems=false,
-  handleCheckout,
-}) => {
-
-  const cmmc = useCommerce()
-  if (!cmmc) {
-    return <div />
-  }
-
-  const _handleCheckout = () => {
-    sendGAEvent('begin_checkout', {
-      currency: 'USD',
-      value: cmmc.cartTotal,
-      items: cmmc.cartItems.map((item) => ({
-        item_id: item.sku,
-        item_name: item.title,
-        item_category: item.familyId,
-        price: item.price,
-        quantity: item.quantity
-      })),
-    })
-    sendFBEvent('InitiateCheckout', {
-      content_ids: cmmc.cartItems.map((item) => item.sku),
-      contents: cmmc.cartItems.map(item => ({
-        id: item.sku,
-        quantity: item.quantity
-      })),
-      num_items: cmmc.cartItems.length,
-      value: cmmc.cartTotal,
-      currency: 'USD',
-    })
-    handleCheckout && handleCheckout()
-  }
-
-  const itemClicked = (item: LineItem) => { 
-    cmmc.setCurrentItem(item.sku) 
-  }
-
-  const MainStuff: React.FC = observer(() => (<>
-    {cmmc.cartEmpty ? (
-      <p className={cn('text-center my-3', noItemsClx)}>No items</p>
-    ) : (<>
-    {cmmc.cartItems.map((item) => (
-      <CartLineItem
-        key={`mobile-${item.sku}`}
-        imgSizePx={imgSizePx}
-        item={item}
-        className={cn('mb-2', itemClx)}
-        showPromoCode={showPromoCode}
-        itemClicked={selectItems ? itemClicked : undefined}
-        selected={selectItems ? cmmc.currentItem?.sku === item.sku : false}
-      />
-    ))}
-    </>)}
-    {showPromoCode && (
-      <Suspense>
-        <PromoCode/>
-      </Suspense>
-    )}
-    {(showShipping || showPromoCode) && (
-      <div className='flex flex-col gap-1 py-2 border-t'>
-        <p className='flex justify-between'>
-          <span className='text-muted-1'>Subtotal</span>
-          <span className='font-semibold'>{cmmc.cartTotal === 0 ? '0' : formatCurrencyValue(cmmc.cartTotal)}</span>
-        </p>
-        {cmmc.promoAppliedCartTotal !== cmmc.cartTotal && (
-          <p className='flex justify-between'>
-            <span className='text-muted-1'>Promo Discount</span>
-            <span className='font-semibold'>-{formatCurrencyValue(cmmc.cartTotal - cmmc.promoAppliedCartTotal)}</span>
-          </p>
-        )}
-        {showShipping && (
-          <p className='flex justify-between'>
-            <span className='text-muted-1'>Shipping</span>
-            <span className='font-semibold'>Free Global Shipping</span>
-          </p>
-        )}
-      </div>
-    )}
-    <p className={cn('border-t py-2 flex justify-between', totalClx)}>
-      TOTAL
-      <span className='font-semibold'>{formatCurrencyValue(showPromoCode ? cmmc.promoAppliedCartTotal : cmmc.cartTotal)}</span>
-    </p>
-  </>))
-
-  const scrolling = (): boolean => (cmmc.cartItems.length > scrollAfter)
-
-  return (
-    <div className={cn('border p-4 rounded-lg flex flex-col', className, scrolling() ? scrollHeightClx : 'h-auto')}>
-      {children}
-      {scrolling() ? (
-        <ScrollArea className={cn('mt-2 w-full shrink py-0', listClx)}>
-          <MainStuff />
-        </ScrollArea>
-      ) : (
-        <div className={cn('mt-2 w-full', listClx)}>
-          <MainStuff />
-        </div>
-      )}
-      {handleCheckout && !cmmc.cartEmpty && (
-        <Button 
-          onClick={_handleCheckout} 
-          variant='primary' 
-          rounded='lg' 
-          className={cn('mt-12 mx-auto w-full sm:max-w-[220px]', buttonClx)} 
-        >
-          Checkout
-        </Button>
-      )}
-    </div>
-  )
-})
-
-export default CartPanel
+'use client'
+import React, { Suspense, type PropsWithChildren } from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { Button, ScrollArea } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+
+import { useCommerce } from '../../../context'
+import { formatCurrencyValue } from '../../../util'
+import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
+
+import CartLineItem from './cart-line-item'
+import PromoCode from './promo-code'
+import type { LineItem } from '../../../types'
+
+const CartPanel: React.FC<PropsWithChildren & {
+    /** fix size and scroll after 'scrollAfter items in teh cart. */
+  scrollAfter?: number
+  scrollHeightClx?: string
+  imgSizePx?: number
+  className?: string
+  itemClx?: string
+  listClx?: string
+  noItemsClx?: string
+  totalClx?: string
+  buttonClx?: string
+  showPromoCode?: boolean
+  showShipping?: boolean
+  selectItems?: boolean
+    /** if not provided, 'checkout' button will be rendered */
+  handleCheckout?: () => void
+}> = observer(({
+    /** If provided, 'children' is rendered above the items. eg, a heading. */
+  children,
+  scrollAfter=5,
+  scrollHeightClx='h-[70vh]',
+  imgSizePx=40,
+  className='',
+  itemClx='',
+  listClx='',
+  noItemsClx='',
+  totalClx='',
+  buttonClx='',
+  showPromoCode=false,
+  showShipping=false,
+  selectItems=false,
+  handleCheckout,
+}) => {
+
+  const cmmc = useCommerce()
+  if (!cmmc) {
+    return <div />
+  }
+
+  const _handleCheckout = () => {
+    sendGAEvent('begin_checkout', {
+      currency: 'USD',
+      value: cmmc.cartTotal,
+      items: cmmc.cartItems.map((item) => ({
+        item_id: item.sku,
+        item_name: item.title,
+        item_category: item.familyId,
+        price: item.price,
+        quantity: item.quantity
+      })),
+    })
+    sendFBEvent('InitiateCheckout', {
+      content_ids: cmmc.cartItems.map((item) => item.sku),
+      contents: cmmc.cartItems.map(item => ({
+        id: item.sku,
+        quantity: item.quantity
+      })),
+      num_items: cmmc.cartItems.length,
+      value: cmmc.cartTotal,
+      currency: 'USD',
+    })
+    handleCheckout && handleCheckout()
+  }
+
+  const itemClicked = (item: LineItem) => { 
+    cmmc.setCurrentItem(item.sku) 
+  }
+
+  const MainStuff: React.FC = observer(() => (<>
+    {cmmc.cartEmpty ? (
+      <p className={cn('text-center my-3', noItemsClx)}>No items</p>
+    ) : (<>
+    {cmmc.cartItems.map((item) => (
+      <CartLineItem
+        key={`mobile-${item.sku}`}
+        imgSizePx={imgSizePx}
+        item={item}
+        className={cn('mb-2', itemClx)}
+        showPromoCode={showPromoCode}
+        itemClicked={selectItems ? itemClicked : undefined}
+        selected={selectItems ? cmmc.currentItem?.sku === item.sku : false}
+      />
+    ))}
+    </>)}
+    <div className={totalClx}> 
+    {showPromoCode && (
+      <Suspense>
+        <PromoCode/>
+      </Suspense>
+    )}
+    {(showShipping || showPromoCode) && (
+      <div className='flex flex-col gap-1 py-2 border-t text-sm'>
+        <p className='flex justify-between'>
+          <span className='text-muted-1'>Subtotal</span>
+          <span className='font-semibold'>{cmmc.cartTotal === 0 ? '0' : formatCurrencyValue(cmmc.cartTotal)}</span>
+        </p>
+        {cmmc.promoAppliedCartTotal !== cmmc.cartTotal && (
+          <p className='flex justify-between'>
+            <span className='text-muted-1'>Promo Discount</span>
+            <span className='font-semibold'>-{formatCurrencyValue(cmmc.cartTotal - cmmc.promoAppliedCartTotal)}</span>
+          </p>
+        )}
+        {showShipping && (
+          <p className='flex justify-between'>
+            <span className='text-muted-1'>Shipping</span>
+            <span className='font-semibold'>Free Global Shipping</span>
+          </p>
+        )}
+      </div>
+    )}
+    <p className={cn('border-t py-2 flex justify-between')}>
+      TOTAL
+      <span className='font-semibold'>{formatCurrencyValue(showPromoCode ? cmmc.promoAppliedCartTotal : cmmc.cartTotal)}</span>
+    </p>
+    </div>
+  </>))
+
+  const scrolling = (): boolean => (cmmc.cartItems.length > scrollAfter)
+
+  return (
+    <div className={cn('border p-4 rounded-lg flex flex-col', className, scrolling() ? scrollHeightClx : 'h-auto')}>
+      {children}
+      {scrolling() ? (
+        <ScrollArea className={cn('mt-2 w-full shrink py-0', listClx)}>
+          <MainStuff />
+        </ScrollArea>
+      ) : (
+        <div className={cn('mt-2 w-full', listClx)}>
+          <MainStuff />
+        </div>
+      )}
+      {handleCheckout && !cmmc.cartEmpty && (
+        <Button 
+          onClick={_handleCheckout} 
+          variant='primary' 
+          rounded='lg' 
+          className={cn('mt-12 mx-auto w-full sm:max-w-[220px]', buttonClx)} 
+        >
+          Checkout
+        </Button>
+      )}
+    </div>
+  )
+})
+
+export default CartPanel