@hanzo/commerce 7.3.1 → 7.3.2

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 '../../../service/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',
-        'border border-background rounded-sm p-1', 
-        selected ? 'border-foreground' : '',
-        (itemClicked && !selected ? 'cursor-pointer hover:!border-muted-4' : 'cursor-default '), 
-        className
-      )}
-      onClick={() => {itemClicked && itemClicked(item)}}
-    >
-      <div className='flex flex-row justify-between items-center gap-1' >
-        {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 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} />
-          {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 '../../../service/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',
+        'border border-background rounded-sm p-1', 
+        selected ? 'border-foreground' : '',
+        (itemClicked && !selected ? 'cursor-pointer hover:!border-muted-4' : 'cursor-default '), 
+        className
+      )}
+      onClick={() => {itemClicked && itemClicked(item)}}
+    >
+      <div className='flex flex-row justify-between items-center gap-1' >
+        {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 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} />
+          {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,154 +1,154 @@
-'use client'
-import React, { useLayoutEffect, type PropsWithChildren } from 'react'
-import { reaction } from 'mobx'
-import { observer } from 'mobx-react-lite'
-
-import { Button, ScrollArea } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
-import type { LineItem } from '../../../types'
-import { useCommerce } from '../../../service/context'
-import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
-
-import CartLineItem from './cart-line-item'
-import TotalArea from './total-area'
-
-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()
-
-  useLayoutEffect(() => {
-    if (!cmmc) {
-      return
-    }
-    if (!cmmc.cartEmpty && !cmmc.currentItem) {
-      cmmc.setCurrentItem(cmmc.cartItems[0].sku)  
-    }
-      // return mobx disposer
-    return reaction(() => (
-      cmmc.cartItems.length  
-    ), 
-    (itemCount) => {
-      if (itemCount > 0) {
-        cmmc.setCurrentItem(cmmc.cartItems[0].sku)  
-      }
-    })
-  }, [])
-  
-  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}
-      />
-    ))}
-    </>)}
-    <TotalArea clx={totalClx} showPromoCode={showPromoCode} showShipping={showShipping}/>
-  </>))
-
-  const scrolling = (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, { useLayoutEffect, type PropsWithChildren } from 'react'
+import { reaction } from 'mobx'
+import { observer } from 'mobx-react-lite'
+
+import { Button, ScrollArea } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+
+import type { LineItem } from '../../../types'
+import { useCommerce } from '../../../service/context'
+import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
+
+import CartLineItem from './cart-line-item'
+import TotalArea from './total-area'
+
+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()
+
+  useLayoutEffect(() => {
+    if (!cmmc) {
+      return
+    }
+    if (!cmmc.cartEmpty && !cmmc.currentItem) {
+      cmmc.setCurrentItem(cmmc.cartItems[0].sku)  
+    }
+      // return mobx disposer
+    return reaction(() => (
+      cmmc.cartItems.length  
+    ), 
+    (itemCount) => {
+      if (itemCount > 0) {
+        cmmc.setCurrentItem(cmmc.cartItems[0].sku)  
+      }
+    })
+  }, [])
+  
+  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}
+      />
+    ))}
+    </>)}
+    <TotalArea clx={totalClx} showPromoCode={showPromoCode} showShipping={showShipping}/>
+  </>))
+
+  const scrolling = (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

package/components/cart/cart-panel/promo-code.tsx

@@ -1,106 +1,106 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { useSearchParams } from 'next/navigation'
-import { observer } from 'mobx-react-lite'
-
-import { useForm } from 'react-hook-form'
-import * as z from 'zod'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { Check } from 'lucide-react'
-
-import { 
-  Button, 
-  Form, 
-  FormControl, 
-  FormField, 
-  FormItem, 
-  Input 
-} from '@hanzo/ui/primitives'
-
-import { useCommerce } from '../../../service/context'
-import type { Promo } from '../../../types'
-import getPromoFromApi from '../../../util/promo-codes'
-
-const formSchema = z.object({
-  code: z.string().min(1, 'Invalid code'),
-})
-
-const PromoCode = observer(() => {
-  const cmmc = useCommerce()
-  const searchParams = useSearchParams()
-
-  const [codeAccepted, setCodeAccepted] = useState<boolean>(false)
-
-  useEffect(() => {
-    const code = searchParams.get('code')
-    if (code) {
-      getPromoFromApi(code).then((promo?: Promo) => {
-        if (promo) {
-          form.setValue('code', code)
-          setCodeAccepted(true)
-          cmmc.setAppliedPromo(promo)
-        }
-      })
-    }
-  }, [searchParams])
-
-  useEffect(() => {
-    if (cmmc.appliedPromo) {
-      form.setValue('code', cmmc.appliedPromo.code)
-      setCodeAccepted(true)
-    }
-  }, [cmmc.appliedPromo])
-
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      code: '',
-    },
-  })
-
-  const applyPromoCode = async (values: z.infer<typeof formSchema>) => {
-    const { code } = values
-    const promo = await getPromoFromApi(code)
-    if (!promo) {
-      form.setError('code', { message: 'Invalid code' })
-      return
-    }
-    setCodeAccepted(true)
-    cmmc.setAppliedPromo(promo)
-  }
-
-  const removePromoCode = () => {
-    cmmc.setAppliedPromo(null)
-    setCodeAccepted(false)
-  }
-
-  return (
-    <div className='flex flex-col gap-2 border-t py-1'>
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(applyPromoCode)}>
-          <div className='flex gap-2 items-center'>
-            <FormField
-              control={form.control}
-              name='code'
-              render={({ field }) => (
-                <FormItem className='w-full'>
-                  <FormControl>
-                    <Input {...field} className='h-9' placeholder='Discount or invite code' onInput={removePromoCode}/>
-                  </FormControl>
-                </FormItem>
-              )}
-            />
-            {codeAccepted ? (
-              <Check/>
-            ) : (
-              <Button variant='outline' className='!w-fit !min-w-0 font-inter text-muted text-sm'>Apply</Button>
-            )}
-          </div>
-        </form>
-      </Form>
-    </div>
-  )
-})
-
-export default PromoCode
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useSearchParams } from 'next/navigation'
+import { observer } from 'mobx-react-lite'
+
+import { useForm } from 'react-hook-form'
+import * as z from 'zod'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Check } from 'lucide-react'
+
+import { 
+  Button, 
+  Form, 
+  FormControl, 
+  FormField, 
+  FormItem, 
+  Input 
+} from '@hanzo/ui/primitives'
+
+import { useCommerce } from '../../../service/context'
+import type { Promo } from '../../../types'
+import getPromoFromApi from '../../../util/promo-codes'
+
+const formSchema = z.object({
+  code: z.string().min(1, 'Invalid code'),
+})
+
+const PromoCode = observer(() => {
+  const cmmc = useCommerce()
+  const searchParams = useSearchParams()
+
+  const [codeAccepted, setCodeAccepted] = useState<boolean>(false)
+
+  useEffect(() => {
+    const code = searchParams.get('code')
+    if (code) {
+      getPromoFromApi(code).then((promo?: Promo) => {
+        if (promo) {
+          form.setValue('code', code)
+          setCodeAccepted(true)
+          cmmc.setAppliedPromo(promo)
+        }
+      })
+    }
+  }, [searchParams])
+
+  useEffect(() => {
+    if (cmmc.appliedPromo) {
+      form.setValue('code', cmmc.appliedPromo.code)
+      setCodeAccepted(true)
+    }
+  }, [cmmc.appliedPromo])
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      code: '',
+    },
+  })
+
+  const applyPromoCode = async (values: z.infer<typeof formSchema>) => {
+    const { code } = values
+    const promo = await getPromoFromApi(code)
+    if (!promo) {
+      form.setError('code', { message: 'Invalid code' })
+      return
+    }
+    setCodeAccepted(true)
+    cmmc.setAppliedPromo(promo)
+  }
+
+  const removePromoCode = () => {
+    cmmc.setAppliedPromo(null)
+    setCodeAccepted(false)
+  }
+
+  return (
+    <div className='flex flex-col gap-2 border-t py-1'>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(applyPromoCode)}>
+          <div className='flex gap-2 items-center'>
+            <FormField
+              control={form.control}
+              name='code'
+              render={({ field }) => (
+                <FormItem className='w-full'>
+                  <FormControl>
+                    <Input {...field} className='h-9' placeholder='Discount or invite code' onInput={removePromoCode}/>
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            {codeAccepted ? (
+              <Check/>
+            ) : (
+              <Button variant='outline' className='!w-fit !min-w-0 font-inter text-muted text-sm'>Apply</Button>
+            )}
+          </div>
+        </form>
+      </Form>
+    </div>
+  )
+})
+
+export default PromoCode