@hanzo/commerce 4.9.0 → 5.1.0

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

@@ -15,7 +15,6 @@ const AddToCartWidget: React.FC<{
   disabled?: boolean
   className?: string
   buttonClx?: string
-  isMobile?: boolean
   size?: ButtonSizes
   onQuantityChanged?: (sku: string, oldV: number, newV: number) => void
 }> = observer(({

package/components/buy-item/select-category-and-item-widget.tsx

@@ -7,12 +7,12 @@ import { cn } from '@hanzo/ui/util'
 
 import type { FacetValueDesc, FacetsValue, LineItem } from '../../types'
 import { useCommerce } from '../../service/context'
-import { formatPrice } from '../../util'
+import { formatCurrencyValue } from '../../util'
 
 import FacetTogglesWidget from '../facet-values-widget'
 
 const formatItem = (item: LineItem, withQuantity: boolean = false): string => (
-  `${item.titleAsOption}, ${formatPrice(item.price)}${(withQuantity && item.quantity > 0) ? `  (${item.quantity})` : ''}`
+  `${item.titleAsOption}, ${formatCurrencyValue(item.price)}${(withQuantity && item.quantity > 0) ? `  (${item.quantity})` : ''}`
 )
 
 const SelectCategoryAndItemWidget: React.FC<{

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

@@ -10,7 +10,7 @@ import type { ItemSelector, LineItem } from '../../types'
 import AddToCartWidget from '../add-to-cart-widget'
 import CategoryItemRadioSelector from '../category-item-radio-selector'
 import CategoryItemScrollSelector from '../category-item-scroll-selector'
-import { formatPrice } from '../../util'
+import { formatCurrencyValue } from '../../util'
 
 const SelectCategoryItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & ItemSelector & {
   isLoading?: boolean
@@ -40,7 +40,7 @@ const SelectCategoryItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & It
       const item = category.products[0] as LineItem
       return (
         <div className={cn('flex flex-col justify-center items-center ' + (mobilePicker ? 'h-[180px] ' : 'h-auto min-h-24'), className)}>
-          <p className='text-lg text-center font-semibold'>{item.titleAsOption + ', ' + formatPrice(item.price)}</p>
+          <p className='text-lg text-center font-semibold'>{item.titleAsOption + ', ' + formatCurrencyValue(item.price)}</p>
         </div>
       )
     }

package/components/{checkout-panel/cart-accordian.tsx → cart-accordian.tsx}

@@ -2,6 +2,8 @@
 import React  from 'react'
 import { observer } from 'mobx-react-lite'
 
+import { ChevronRight } from 'lucide-react'
+
 import {
   Accordion,
   AccordionContent,
@@ -9,35 +11,44 @@ import {
   AccordionTrigger,
 } from '@hanzo/ui/primitives'
 
-import { formatPrice, useCommerce } from '../..'
+import { formatCurrencyValue, useCommerce } from '..'
 
-import CartPanel from '../cart-panel'
-import BagIcon from './icons/bag-icon'
-import { ChevronRight } from 'lucide-react'
+import CartPanel from './cart-panel'
 
-const CartAccordian: React.FC<{className?: string}> = observer(({
+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-1 items-center'>
-            <BagIcon className='w-4 h-4 relative -top-0.5 sm:w-6 shrink-0 sm:h-6'/>
+          <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'>{formatPrice(cmmc.cartTotal)}</h5>
+            <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'/>
+          <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>

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

@@ -1,15 +1,17 @@
+'use client'
+
 import React from 'react'
-import { observer } from 'mobx-react-lite'
 import Image from 'next/image'
+import { observer } from 'mobx-react-lite'
 
 import { cn } from '@hanzo/ui/util'
 
 import type { LineItem } from '../../types'
-import { formatPrice } from '../../util'
-
+import { formatCurrencyValue } from '../../util'
 import AddToCartWidget from '../add-to-cart-widget'
+import { useCommerce } from '../..'
 
-const IMG_SIZE=40
+const DEF_IMG_SIZE=40
 
 const renderTitle = (t: string): React.ReactNode => {
   const toks = t.split(', ')
@@ -22,32 +24,36 @@ const renderTitle = (t: string): React.ReactNode => {
 const CartLineItem: React.FC<{
   item: LineItem
   className?: string
-  isMobile?: boolean
-}> = observer(({ 
+  imgSizePx?: number
+  showPromoCode?: boolean
+}> = observer(({
   item,
   className='',
-  isMobile=false 
+  imgSizePx=DEF_IMG_SIZE,
+  showPromoCode
 }) => {
 
-  const imgSize = (isMobile) ? IMG_SIZE * 0.65 : IMG_SIZE
-
+  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-2'>
       {!!item.img ? (
-        <Image src={item.img} alt={item.title + ' image'} height={imgSize} width={imgSize} className=''/>
-      ) : (
-        <div style={{height: imgSize, width: imgSize}}/ >
+        <Image src={item.img} alt={item.title + ' image'} height={imgSizePx} width={imgSizePx} className=''/>
+      ) : ( // placeholder so things align
+        <div style={{height: imgSizePx, width: imgSizePx}}/>
       )}
         <div className='grow leading-tight'>{renderTitle(item.title)}</div>
       </div>
       <div className='flex flex-row items-center justify-between w-full'>
         <div className='flex flex-row items-center'>
-          <AddToCartWidget isMobile={isMobile} className='' item={item} size='xs' buttonClx='h-8 md:h-6' ghost/>
-          {item.quantity > 1 && (<span className='pl-2.5'>{'@' + formatPrice(item.price)}</span>)}
+          <AddToCartWidget className='' item={item} size='xs' buttonClx='h-8 md:h-6' ghost/>
+          {item.quantity > 1 && (<span className='pl-2.5'>{'@' + formatCurrencyValue(item.price)}</span>)}
         </div>
-        <div className='flex flex-row items-center justify-end'>
-          {formatPrice(item.price * item.quantity)}
+        <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>

package/components/cart-panel/index.tsx

@@ -2,28 +2,45 @@
 import React, { type PropsWithChildren } from 'react'
 import { observer } from 'mobx-react-lite'
 
-import { Button } from '@hanzo/ui/primitives'
+import { Button, ScrollArea } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
 
 import { useCommerce } from '../../service/context'
-import { formatPrice } from '../../util'
+import { formatCurrencyValue } from '../../util'
+import { sendFBEvent, sendGAEvent } from '../../util/analytics'
 
 import CartLineItem from './cart-line-item'
-import { sendFBEvent, sendGAEvent } from '../../util/analytics'
-import ProductsCarousel from './products-carousel'
+import PromoCode from './promo-code'
 
 const CartPanel: React.FC<PropsWithChildren & {
+    /** fix size and scroll after 'scrollAfter items in teh cart. */
+  scrollAfter?: number
+  scrollHeightClx?: string
+  imgSizePx?: number
   className?: string
-  isMobile?: boolean,
-  showCarousel?: boolean
-    /** if not provided, checkout button will not be shown */
+  itemClx?: string
+  listClx?: string
+  noItemsClx?: string
+  totalClx?: string
+  buttonClx?: string
+  showPromoCode?: boolean
+  showShipping?: boolean
+    /** if not provided, 'checkout' button will be rendered */
   handleCheckout?: () => void
 }> = observer(({
-    /** Children is the heading area. */
+    /** If provided, 'children' is rendered above the items. eg, a heading. */
   children,
+  scrollAfter=5,
+  scrollHeightClx='h-[70vh]',
+  imgSizePx=40,
   className='',
-  isMobile=false,
-  showCarousel=false,
+  itemClx='',
+  listClx='',
+  noItemsClx='',
+  totalClx='',
+  buttonClx='',
+  showPromoCode=false,
+  showShipping=false,
   handleCheckout,
 }) => {
 
@@ -57,32 +74,71 @@ const CartPanel: React.FC<PropsWithChildren & {
     handleCheckout && handleCheckout()
   }
 
+  const Main: React.FC = observer(() => (<>
+    {cmmc.cartEmpty ? (
+      <p className={cn('text-center mt-4', noItemsClx)}>No items in cart</p>
+    ) : (<>
+    {cmmc.cartItems.map((item) => (
+      <CartLineItem
+        key={`mobile-${item.sku}`}
+        imgSizePx={imgSizePx}
+        item={item}
+        className={cn('mb-2', itemClx)}
+        showPromoCode={showPromoCode}
+      />
+    ))}
+    </>)}
+    {showPromoCode && <PromoCode/>}
+    {(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', className)}>
+    <div className={cn('border p-4 rounded-lg flex flex-col', className, scrolling() ? scrollHeightClx : 'h-auto')}>
       {children}
-      {showCarousel && <ProductsCarousel items={cmmc.cartItems}/>}
-      <div className='mt-2 w-full'>
-        {cmmc.cartEmpty ? (
-          <p className='text-center mt-4'>No items in cart</p>
-        ) : (<>
-          {cmmc.cartItems.map((item, i) => (
-            <CartLineItem isMobile={isMobile} item={item} key={item.sku} className='mb-2 md:mb-3'/>
-          ))}
-          <p className='mt-6 text-right border-t pt-1'>TOTAL: <span className='font-semibold'>{cmmc.cartTotal === 0 ? '0' : formatPrice(cmmc.cartTotal)}</span></p>
-        </>)}
-      </div>
-      {handleCheckout && (<>
-        {!cmmc.cartEmpty && (
-          <Button 
-            variant='primary' 
-            rounded='lg' 
-            className='mt-12 mx-auto w-full sm:max-w-[220px]' 
-            onClick={_handleCheckout}
-          >
-            Checkout
-          </Button>
-        )}
-      </>)}
+      {scrolling() ? (
+        <ScrollArea className={cn('mt-2 w-full shrink py-0', listClx)}>
+          <Main />
+        </ScrollArea>
+      ) : (
+        <div className={cn('mt-2 w-full', listClx)}>
+          <Main />
+        </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>
   )
 })

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

@@ -0,0 +1,98 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useSearchParams } from 'next/navigation'
+import { useForm } from 'react-hook-form'
+import * as z from 'zod'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Check } from 'lucide-react'
+import { observer } from 'mobx-react-lite'
+
+import { Button, Form, FormControl, FormField, FormItem, Input } from '@hanzo/ui/primitives'
+
+import { useCommerce } from '../..'
+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-2'>
+      <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} placeholder='Discount or invite code' onInput={removePromoCode}/>
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            {codeAccepted ? (
+              <Check/>
+            ) : (
+              <Button variant='outline' className='!w-fit !min-w-0 font-inter'>Apply</Button>
+            )}
+          </div>
+        </form>
+      </Form>
+    </div>
+  )
+})
+
+export default PromoCode

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

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react-lite'
 
 import { Label, RadioGroup, RadioGroupItem } from '@hanzo/ui/primitives'
 import type { ItemSelector, LineItem, Product } from '../types'
-import { formatPrice } from '../util'
+import { formatCurrencyValue } from '../util'
 import { cn } from '@hanzo/ui/util'
 
 const CategoryItemRadioSelector: React.FC<ItemSelector & {
@@ -29,7 +29,7 @@ const CategoryItemRadioSelector: React.FC<ItemSelector & {
   }) => (
     <div className={cn(className, itemClx)}>
       <RadioGroupItem value={item.sku} id={item.sku} />
-      <Label htmlFor={item.sku}>{item.titleAsOption + (showPrice ? (', ' + formatPrice(item.price)) : '')}</Label>
+      <Label htmlFor={item.sku}>{item.titleAsOption + (showPrice ? (', ' + formatCurrencyValue(item.price)) : '')}</Label>
     </div>
   )
 

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

@@ -6,7 +6,7 @@ import { cn } from '@hanzo/ui/util'
 import { ScrollArea } from '@hanzo/ui/primitives'
 
 import type { ItemSelector } from '../types'
-import { formatPrice } from '../util'
+import { formatCurrencyValue } from '../util'
 
 
 const CategoryItemScrollSelector: React.FC<ItemSelector & {
@@ -29,7 +29,7 @@ const CategoryItemScrollSelector: React.FC<ItemSelector & {
             (iRef.item?.sku === prod.sku) ? 'font-semibold text-accent' : 'text-muted', 
             itemClx
           )}>
-            {prod.titleAsOption + ', ' + formatPrice(prod.price)}
+            {prod.titleAsOption + ', ' + formatCurrencyValue(prod.price)}
           </div>
         </div>
       ))}

package/components/index.ts

@@ -3,13 +3,16 @@ export { default as BuyItemButtonWrapper } from './buy-item/buy-item-button-wrap
 export { default as BuyItemButton } from './buy-item/buy-item-button'
 export { default as BuyItemCard } from './buy-item/buy-item-card'
 export { default as BuyItemPopup } from './buy-item/buy-item-popup'
+export { default as CartAccordian } from './cart-accordian'
 export { default as CartPanel } from './cart-panel'
-export { default as CheckoutPanel } from './checkout-panel'
 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 ItemCarousel } from './item-carousel'
+export { default as PaymentStepForm } from './payment-step-form'
 export { default as ProductCard } from './product-card'
 export { default as SelectCategoryAndItemWidget } from './buy-item/select-category-and-item-widget'
 export { default as SelectCategoryItemCard } from './buy-item/select-category-item-card'
 export { default as SelectCategoryItemPanel } from './select-category-item-panel'
+export { default as ShippingStepForm } from './shipping-step-form'
 export { Icons } from './Icons'

package/components/item-carousel.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+
+import Spline from '@splinetool/react-spline'
+
+import { cn } from '@hanzo/ui/util'
+
+import {
+  type CarouselOptionsType,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext
+} from '@hanzo/ui/primitives'
+
+import {
+  VideoBlockComponent,
+  ImageBlockComponent,
+  type ImageBlock,
+  type Block,
+  type VideoBlock
+} from '@hanzo/ui/blocks'
+
+import type { LineItem } from '../types'
+import type { Dimensions } from '@hanzo/ui/types'
+
+  // Order of precedence of visuals: 3D > MP4 > Image
+const ItemCarousel: React.FC<{
+  items: LineItem[]
+  constrainTo: Dimensions
+  options?: CarouselOptionsType 
+  className?: string
+  itemClx?: string  
+}> = ({ 
+  items,
+  options,
+  className='',
+  constrainTo,
+  itemClx=''
+}) => ( 
+  // className: 'w-full max-w-sm mx-auto 
+  // itemClx:  'flex aspect-square items-center justify-center '
+  <Carousel options={options} className={cn('px-2', className)} >
+    <CarouselContent>
+    {items.map(({title, img, video, animation}, index) => (
+      <CarouselItem key={index} className={cn('p-2 flex flex-row justify-center items-center', itemClx)}>
+      {animation ? (
+        <Spline
+          scene={animation}
+          className='pointer-events-none' // !aspect-[12/10] 
+          style={{
+            width: (6/5 * (typeof constrainTo.h === 'number' ? constrainTo.h as number : parseInt(constrainTo.h as string)) ),
+            height: constrainTo.h
+          }}
+        />
+      ) : video ? (
+        <VideoBlockComponent
+          constraint={constrainTo}
+          block={{blockType: 'video', ...video} satisfies VideoBlock as Block}
+        />
+      ) : (
+        <ImageBlockComponent
+          block={{
+            blockType: 'image',
+            src: img ?? '',
+            alt: title + ' image',
+            dim: constrainTo
+          } satisfies ImageBlock as Block} 
+          className='m-auto'
+        />
+      )}
+      </CarouselItem>
+    ))}
+    </CarouselContent>
+    <CarouselPrevious className='left-1'/>
+    <CarouselNext className='right-1'/>
+  </Carousel>
+)
+
+export default ItemCarousel

package/components/{checkout-panel/steps/payment/cards/index.tsx → payment-step-form/card-icon-row.tsx}

@@ -1,17 +1,18 @@
 import { LockKeyhole } from 'lucide-react'
-import Amex from './amex'
-import Discover from './discover'
-import Mastercard from './mastercard'
-import Visa from './visa'
-import DinersClub from './diners-club'
-import Jcb from './jcb'
+import Amex from './card-icons/amex'
+import Discover from './card-icons/discover'
+import Mastercard from './card-icons/mastercard'
+import Visa from './card-icons/visa'
+import DinersClub from './card-icons/diners-club'
+import Jcb from './card-icons/jcb'
 
 //       <span className='hidden sm:flex text-sm'>Secure payments with</span>
 
 const PaymentMethods: React.FC = () => {
   return (
-    <div className='flex gap-1 items-center text-muted-1'>
+    <div className='flex gap-1 items-center text-muted-1 pb-3'>
       <LockKeyhole className='w-4 h-4'/>
+      <span className='hidden sm:flex text-sm'>Secure payments with</span>
       <Amex className='w-9 h-5'/>
       <Discover className='w-9 h-5'/>
       <Mastercard className='w-9 h-5'/>

package/components/{checkout-panel/steps/payment → payment-step-form}/cc-button.tsx

@@ -1,6 +1,6 @@
 import { Button } from '@hanzo/ui/primitives'
 
-import PaymentMethods from './cards'
+import PaymentMethods from './card-icon-row'
 import type { PropsWithChildren } from 'react'
 
 const CCButton: React.FC<PropsWithChildren> = ({

package/components/payment-step-form/contact-form.tsx

@@ -0,0 +1,49 @@
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@hanzo/ui/primitives/form'
+import { Input } from '@hanzo/ui/primitives'
+
+import type { ContactFormType } from '../../types'
+ 
+const ContactForm: React.FC<{
+  form: ContactFormType,
+}> = ({
+  form,
+}) => (
+  <Form {...form}>
+    <form className='text-left'>
+      <div className='flex flex-col gap-1 sm:gap-2'>
+        <FormField
+          control={form.control}
+          name='name'
+          render={({ field }) => (
+            <FormItem className='w-full'>
+              <FormControl>
+                <Input {...field} className='border-muted-4' placeholder='Full name'/>
+              </FormControl>
+              <FormMessage className='py-0 space-y-0 !m-0'/>
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name='email'
+          render={({ field }) => (
+            <FormItem className='w-full'>
+              <FormControl>
+                <Input {...field} className='border-muted-4' placeholder='Email'/>
+              </FormControl>
+              <FormMessage className='py-0 space-y-0 !m-0'/>
+            </FormItem>
+          )}
+        />
+      </div>
+    </form>
+  </Form>
+)
+
+export default ContactForm