@hanzo/commerce 7.3.0 → 7.3.2

package/components/checkout/shipping-step-form.tsx

@@ -1,172 +1,172 @@
-'use client'
-
-import * as z from 'zod'
-import { useForm } from 'react-hook-form'
-import { zodResolver } from '@hookform/resolvers/zod'
-
-import { 
-  Input, 
-  Button, 
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormMessage,
-  Select, 
-  SelectContent, 
-  SelectItem, 
-  SelectTrigger, 
-  SelectValue 
-} from '@hanzo/ui/primitives'
-
-import { useCommerce } from '../../service/context'
-
-import countries from '../../util/countries'
-import { sendGAEvent } from '../../util/analytics'
-
-import type { CheckoutStepComponentProps } from '../../types'
-
-const shippingFormSchema = z.object({
-  addressLine1: z.string().min(2, 'Address must be at least 2 characters.'),
-  addressLine2: z.string().optional(),
-  zipCode: z.string().min(2, 'Zip code is invalid.'),
-  city: z.string().min(2, 'City is invalid.'),
-  state: z.string().optional(),
-  country: z.string().min(2, 'Country is invalid.'),
-})
-
-const ShippingStepForm: React.FC<CheckoutStepComponentProps> = ({
-  orderId,
-  onDone
-}) => { 
-  const cmmc = useCommerce()
-  
-  const shippingForm = useForm<z.infer<typeof shippingFormSchema>>({
-    resolver: zodResolver(shippingFormSchema),
-    defaultValues: {
-      addressLine1: '',
-      addressLine2: '',
-      zipCode: '',
-      city: '',
-      state: '',
-      country: '',
-    },
-  })
-
-  const onSubmit = async (values: z.infer<typeof shippingFormSchema>) => {
-    if (orderId) {
-      await cmmc.updateOrderShippingInfo(orderId, values)
-    }
-    sendGAEvent('add_shipping_info', {
-      items: cmmc.cartItems.map((item) => ({
-        item_id: item.sku,
-        item_name: item.title,
-        item_category: item.familyId,
-        price: item.price,
-        quantity: item.quantity
-      })),
-      num_items: cmmc.cartItems.length,
-      value: cmmc.cartTotal,
-      currency: 'USD',
-    })
-    onDone()
-  }
-
-  return (
-    <Form {...shippingForm}>
-      <form onSubmit={shippingForm.handleSubmit(onSubmit)} className='text-left'>
-        <div className='flex flex-col gap-4'>
-          <FormField
-            control={shippingForm.control}
-            name='addressLine1'
-            render={({ field }) => (
-              <FormItem className='space-y-1 w-full'>
-                <FormControl>
-                  <Input {...field} placeholder='Address line 1'/>
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <FormField
-            control={shippingForm.control}
-            name='addressLine2'
-            render={({ field }) => (
-              <FormItem className='space-y-1 w-full'>
-                <FormControl>
-                  <Input {...field} placeholder='Address line 2 (optional)'/>
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <div className='flex gap-4 items-end'>
-            <FormField
-              control={shippingForm.control}
-              name='zipCode'
-              render={({ field }) => (
-                <FormItem className='space-y-1 w-full'>
-                  <FormControl>
-                    <Input {...field} placeholder='Zip code'/>
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={shippingForm.control}
-              name='city'
-              render={({ field }) => (
-                <FormItem className='space-y-1 w-full'>
-                  <FormControl>
-                    <Input {...field} placeholder='City'/>
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-          </div>
-          <div className='flex gap-4 items-start'>
-            <FormField
-              control={shippingForm.control}
-              name='state'
-              render={({ field }) => (
-                <FormItem className='space-y-1 w-full'>
-                  <FormControl>
-                    <Input {...field} placeholder='State (optional)'/>
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={shippingForm.control}
-              name='country'
-              render={({ field }) => (
-                <FormItem className='space-y-1 w-full'>
-                  <Select onValueChange={field.onChange} defaultValue={field.value}>
-                    <FormControl>
-                      <SelectTrigger className='bg-level-1 border-muted-4'>
-                        <SelectValue placeholder='Country' />
-                      </SelectTrigger>
-                    </FormControl>
-                    <SelectContent>
-                      {countries.map((country) => (
-                        <SelectItem key={country.id} value={country.name}>
-                          {country.name}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </FormItem>
-              )}
-            />
-          </div>
-        </div>
-        <Button type='submit' className='mx-auto w-full mt-4'>Confirm order</Button>
-      </form>
-    </Form>
-  )
-}
-
-export default ShippingStepForm
+'use client'
+
+import * as z from 'zod'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+
+import { 
+  Input, 
+  Button, 
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+  Select, 
+  SelectContent, 
+  SelectItem, 
+  SelectTrigger, 
+  SelectValue 
+} from '@hanzo/ui/primitives'
+
+import { useCommerce } from '../../service/context'
+
+import countries from '../../util/countries'
+import { sendGAEvent } from '../../util/analytics'
+
+import type { CheckoutStepComponentProps } from '../../types'
+
+const shippingFormSchema = z.object({
+  addressLine1: z.string().min(2, 'Address must be at least 2 characters.'),
+  addressLine2: z.string().optional(),
+  zipCode: z.string().min(2, 'Zip code is invalid.'),
+  city: z.string().min(2, 'City is invalid.'),
+  state: z.string().optional(),
+  country: z.string().min(2, 'Country is invalid.'),
+})
+
+const ShippingStepForm: React.FC<CheckoutStepComponentProps> = ({
+  orderId,
+  onDone
+}) => { 
+  const cmmc = useCommerce()
+  
+  const shippingForm = useForm<z.infer<typeof shippingFormSchema>>({
+    resolver: zodResolver(shippingFormSchema),
+    defaultValues: {
+      addressLine1: '',
+      addressLine2: '',
+      zipCode: '',
+      city: '',
+      state: '',
+      country: '',
+    },
+  })
+
+  const onSubmit = async (values: z.infer<typeof shippingFormSchema>) => {
+    if (orderId) {
+      await cmmc.updateOrderShippingInfo(orderId, values)
+    }
+    sendGAEvent('add_shipping_info', {
+      items: cmmc.cartItems.map((item) => ({
+        item_id: item.sku,
+        item_name: item.title,
+        item_category: item.familyId,
+        price: item.price,
+        quantity: item.quantity
+      })),
+      num_items: cmmc.cartItems.length,
+      value: cmmc.cartTotal,
+      currency: 'USD',
+    })
+    onDone()
+  }
+
+  return (
+    <Form {...shippingForm}>
+      <form onSubmit={shippingForm.handleSubmit(onSubmit)} className='text-left'>
+        <div className='flex flex-col gap-4'>
+          <FormField
+            control={shippingForm.control}
+            name='addressLine1'
+            render={({ field }) => (
+              <FormItem className='space-y-1 w-full'>
+                <FormControl>
+                  <Input {...field} placeholder='Address line 1'/>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={shippingForm.control}
+            name='addressLine2'
+            render={({ field }) => (
+              <FormItem className='space-y-1 w-full'>
+                <FormControl>
+                  <Input {...field} placeholder='Address line 2 (optional)'/>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <div className='flex gap-4 items-end'>
+            <FormField
+              control={shippingForm.control}
+              name='zipCode'
+              render={({ field }) => (
+                <FormItem className='space-y-1 w-full'>
+                  <FormControl>
+                    <Input {...field} placeholder='Zip code'/>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={shippingForm.control}
+              name='city'
+              render={({ field }) => (
+                <FormItem className='space-y-1 w-full'>
+                  <FormControl>
+                    <Input {...field} placeholder='City'/>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+          <div className='flex gap-4 items-start'>
+            <FormField
+              control={shippingForm.control}
+              name='state'
+              render={({ field }) => (
+                <FormItem className='space-y-1 w-full'>
+                  <FormControl>
+                    <Input {...field} placeholder='State (optional)'/>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={shippingForm.control}
+              name='country'
+              render={({ field }) => (
+                <FormItem className='space-y-1 w-full'>
+                  <Select onValueChange={field.onChange} defaultValue={field.value}>
+                    <FormControl>
+                      <SelectTrigger className='bg-level-1 border-muted-4'>
+                        <SelectValue placeholder='Country' />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {countries.map((country) => (
+                        <SelectItem key={country.id} value={country.name}>
+                          {country.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </FormItem>
+              )}
+            />
+          </div>
+        </div>
+        <Button type='submit' className='mx-auto w-full mt-4'>Confirm order</Button>
+      </form>
+    </Form>
+  )
+}
+
+export default ShippingStepForm

package/components/index.ts

@@ -1,11 +1,11 @@
-export { default as AddToCartWidget } from './add-to-cart-widget'
-export { default as CarouselBuyCard } from './buy/carousel-buy-card'
-
-export { default as CartPanel } from './cart/cart-panel'
-
-export { default as Icons } from './Icons'
-export { default as PaymentStepForm } from './checkout/payment-step-form'
-export { default as ProductCard } from './item/product-card'
-export { default as ShippingStepForm } from './checkout/shipping-step-form'
-
-export * from './item-selector'
+export { default as AddToCartWidget } from './add-to-cart-widget'
+export { default as CarouselBuyCard } from './buy/carousel-buy-card'
+
+export { default as CartPanel } from './cart/cart-panel'
+
+export { default as Icons } from './Icons'
+export { default as PaymentStepForm } from './checkout/payment-step-form'
+export { default as ProductCard } from './item/product-card'
+export { default as ShippingStepForm } from './checkout/shipping-step-form'
+
+export * from './item-selector'

package/components/item/product-card.tsx

@@ -1,48 +1,48 @@
-import React from 'react'
-
-import { 
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-  MediaStack
-} from '@hanzo/ui/primitives'
-
-import { cn } from '@hanzo/ui/util'
-
-import { formatCurrencyValue } from '../../util'
-import type { LineItem } from '../../types'
-
-import AddToCartWidget from '../add-to-cart-widget'
-
-interface ProductCardProps extends React.HTMLAttributes<HTMLDivElement> {
-  item: LineItem
-}
-
-const ProductCard: React.FC<ProductCardProps> = ({
-  item,
-  className,
-  ...props
-}) => (
-  <Card
-    className={cn('max-h-[360px] lg:min-w-[200px] max-w-[260px] overflow-hidden', className)}
-    {...props}
-  >
-    <CardHeader className='w-full border-b p-6 min-h-[180px] max-h-[240px] relative'>
-      <MediaStack media={item} constrainTo={{w: 700, h:700}} clx='p-6' />
-    </CardHeader>
-    <CardContent className='grid gap-2.5 p-4'>
-      <CardTitle className='text-sm sm:text-base flex flex-col justify-start items-center line-clap-3'>
-        {item.title.split(', ').map((e, i) => (<p key={i}>{e}</p>))}
-        <p className='mt-1 font-semibold'>{formatCurrencyValue(item.price)}</p>
-      </CardTitle>
-    </CardContent>
-    <CardFooter className='p-4 flex flex-row justify-center'>
-      <AddToCartWidget item={item} />
-    </CardFooter>
-  </Card>
-)
-
-
-export default ProductCard
+import React from 'react'
+
+import { 
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  MediaStack
+} from '@hanzo/ui/primitives'
+
+import { cn } from '@hanzo/ui/util'
+
+import { formatCurrencyValue } from '../../util'
+import type { LineItem } from '../../types'
+
+import AddToCartWidget from '../add-to-cart-widget'
+
+interface ProductCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  item: LineItem
+}
+
+const ProductCard: React.FC<ProductCardProps> = ({
+  item,
+  className,
+  ...props
+}) => (
+  <Card
+    className={cn('max-h-[360px] lg:min-w-[200px] max-w-[260px] overflow-hidden', className)}
+    {...props}
+  >
+    <CardHeader className='w-full border-b p-6 min-h-[180px] max-h-[240px] relative'>
+      <MediaStack media={item} constrainTo={{w: 700, h:700}} clx='p-6' />
+    </CardHeader>
+    <CardContent className='grid gap-2.5 p-4'>
+      <CardTitle className='text-sm sm:text-base flex flex-col justify-start items-center line-clap-3'>
+        {item.title.split(', ').map((e, i) => (<p key={i}>{e}</p>))}
+        <p className='mt-1 font-semibold'>{formatCurrencyValue(item.price)}</p>
+      </CardTitle>
+    </CardContent>
+    <CardFooter className='p-4 flex flex-row justify-center'>
+      <AddToCartWidget item={item} />
+    </CardFooter>
+  </Card>
+)
+
+
+export default ProductCard