@hanzo/commerce 5.1.2 → 6.0.0

package/components/{buy-item/select-category-item-card.tsx → buy/_to_deprecate_select-category-item-card.tsx}

@@ -7,37 +7,36 @@ import { Skeleton } from '@hanzo/ui/primitives'
 
 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 AddToCartWidget from './add-to-cart-widget'
+import RadioItemSelector from '../select/radio-selector'
 import { formatCurrencyValue } from '../../util'
 
 const SelectCategoryItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & ItemSelector & {
   isLoading?: boolean
   mobile?: boolean
-  noTitle?: boolean
+  title?: string
   onQuantityChanged?: (sku: string, oldV: number, newV: number) => void
 }> = /* NOT observer */({
-  category,
+  items,
   selectedItemRef: selItemRef,
   selectSku,
   className, 
   isLoading = false, 
   mobile = false, 
-  noTitle = false,
+  title,
   onQuantityChanged,
   ...props
 }) => {
 
-  const soleOption = category.products.length === 1
+  const soleOption = items.length === 1
 
   const SelectProductComp: React.FC<{ className?: string }> = ({ 
     className = '' 
   }) => {
 
-    const mobilePicker = (mobile || category.products.length > 6) 
+    const mobilePicker = (mobile || items.length > 6) 
     if (soleOption) {
-      const item = category.products[0] as LineItem
+      const item = items[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 + ', ' + formatCurrencyValue(item.price)}</p>
@@ -50,25 +49,15 @@ const SelectCategoryItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & It
         'sm:w-pr-80 sm:mx-auto md:w-full  flex flex-col justify-start items-center',
         className
       )}>
-        {!noTitle && (<div className={'h-[1px] bg-muted-3 ' + (mobilePicker ?  'w-pr-55' :  'w-pr-60') } /> )}
-        {mobilePicker ? (
-          <CategoryItemScrollSelector
-            category={category}
-            selectedItemRef={selItemRef}  
-            selectSku={selectSku}
-            itemClx='h-10 border-b px-4'
-            outerClx='min-w-pr-80 h-[180px]' // 80% of 65% parent
-          />
-        ) : (
-          <CategoryItemRadioSelector 
-            category={category}
-            selectedItemRef={selItemRef}  
-            selectSku={selectSku}
-            groupClx='mt-2'
-            showQuantity={false}
-            itemClx='flex flex-row gap-2.5 items-center'
-          />
-        )}
+        {title && (<div className={'h-[1px] bg-muted-3 ' + (mobilePicker ?  'w-pr-55' :  'w-pr-60') } /> )}
+        <RadioItemSelector 
+          items={items}
+          selectedItemRef={selItemRef}  
+          selectSku={selectSku}
+          clx='mt-2'
+          showQuantity={false}
+          itemClx='flex flex-row gap-2.5 items-center'
+        />
       </div>
     )
   }
@@ -90,7 +79,7 @@ const SelectCategoryItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & It
     isLoading ? (<Skeleton className={'h-8 w-full ' + className} />) : (
 
       <div className={cn('text-center flex flex-col justify-start items-center', className)}>
-        <p className='font-heading text-center'>{category.title}</p>
+        <p className='font-heading text-center'>{title}</p>
       </div>
 
   )))
@@ -103,13 +92,13 @@ const SelectCategoryItemCard: React.FC<React.HTMLAttributes<HTMLDivElement> & It
       )} 
       {...props}
     >
-      {!noTitle && (<TitleArea className='grow pt-3 mb-0' />)}
+      {title && (<TitleArea className='grow pt-3 mb-0' />)}
       <SelectProductComp className='w-pr-65' />
       <AddToCartComp className='w-pr-65' />
     </div>
   ) : (
     <div className={cn('', className)} {...props}>
-      {!noTitle && (<TitleArea className='' />)}
+      {title && (<TitleArea className='' />)}
       <div className='flex flex-col justify-start items-center gap-4'>
         <SelectProductComp />
         <AddToCartComp className='' />

package/components/{select-category-item-panel.tsx → buy/_to_deprecate_select-category-item-panel.tsx}

@@ -6,17 +6,20 @@ import { observer } from 'mobx-react-lite'
 import { cn } from '@hanzo/ui/util'
 import { Skeleton } from '@hanzo/ui/primitives'
 
-import type { ItemSelector } from '../types'
-import { formatCurrencyValue } from '../util'
-import { Icons } from './Icons'
+import type { Category, ObsLineItemRef, LineItem } from '../../types'
+import { formatCurrencyValue } from '../../util'
+import { Icons } from '../Icons'
 
 import AddToCartWidget from './add-to-cart-widget'
-import CategoryItemRadioSelector from './category-item-radio-selector'
-import CategoryItemScrollSelector from './category-item-scroll-selector'
+import RadioItemSelector from '../select/radio-selector'
 
 const SelectCategoryItemPanel: React.FC<
-  React.HTMLAttributes<HTMLDivElement> & ItemSelector &   
+  React.HTMLAttributes<HTMLDivElement> &   
   {
+    category: Category
+    selectedItemRef: ObsLineItemRef
+    selectSku: (sku: string) => void 
+    showQuantity?: boolean
     isLoading?: boolean
     mobile?: boolean
   }
@@ -88,25 +91,14 @@ const SelectCategoryItemPanel: React.FC<
           <h6 className='text-center font-semibold'>Available options</h6>
           <div className={'h-[1px] bg-muted-3 ' + (mobilePicker ?  'w-pr-55' :  'w-pr-60') } />
         </div>
-        {mobilePicker ? (
-          <CategoryItemScrollSelector
-            category={category}
+          <RadioItemSelector 
+            items={category.products as LineItem[]}
             selectedItemRef={selectedItemRef}  
             selectSku={selectSku}
             showQuantity={showQuantity}
-            itemClx='h-10 border-b px-4'
-            outerClx='mb-4 h-[180px]'
-          />
-        ) : (
-          <CategoryItemRadioSelector 
-            category={category}
-            selectedItemRef={selectedItemRef}  
-            selectSku={selectSku}
-            showQuantity={showQuantity}
-            groupClx='block columns-2 gap-4'
+            clx='block columns-2 gap-4'
             itemClx='flex flex-row gap-2 items-center mb-2.5'
           />
-        )}
       </div>
     )
   })

package/components/{buy-item/buy-item-popup.tsx → buy/_unused_buy-popup.tsx_}

@@ -12,9 +12,9 @@ import {
 
 import { cn } from '@hanzo/ui/util'
 
-import BuyItemCard from './buy-item-card'
+import BuyCard from './buy-item-card'
 
-const BuyItemPopup: React.FC<PropsWithChildren & {
+const BuyPopup: React.FC<PropsWithChildren & {
   skuPath: string
   triggerClx?: string  
   popupClx?: string
@@ -42,10 +42,10 @@ const BuyItemPopup: React.FC<PropsWithChildren & {
       </PopoverTrigger>
       <PopoverContent className={cn('relative flex flex-col p-0 px-4 pb-4 pt-2', popupClx)}>
         <PopoverClose className='absolute z-20 right-2 top-2 self-end hover:bg-level-3 text-muted hover:text-accent p-1 rounded-full'><X className='w-5 h-5'/></PopoverClose>
-        <BuyItemCard skuPath={skuPath} onQuantityChanged={onQuantityChanged} className={cn("w-full relative ", cardClx)}/>
+        <BuyCard skuPath={skuPath} onQuantityChanged={onQuantityChanged} className={cn("w-full relative ", cardClx)}/>
       </PopoverContent>
     </Popover>
   )
 }
 
-export default BuyItemPopup
+export default BuyPopup

package/components/{add-to-cart-widget.tsx → buy/add-to-cart-widget.tsx}

@@ -5,9 +5,9 @@ import { observer } from 'mobx-react-lite'
 import { Button, toast, type ButtonSizes } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
 
-import { Icons } from './Icons'
-import type { LineItem } from '../types'
-import { sendFBEvent, sendGAEvent } from '../util/analytics'
+import { Icons } from '../Icons'
+import type { LineItem } from '../../types'
+import { sendFBEvent, sendGAEvent } from '../../util/analytics'
 
 const AddToCartWidget: React.FC<{ 
   item: LineItem
@@ -44,12 +44,14 @@ 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}.`)
     }
+    */
     sendGAEvent('add_to_cart', {
       items: [{
         item_id: item.sku,

package/components/buy/buy-button.tsx

@@ -0,0 +1,31 @@
+'use client'
+import React, {type PropsWithChildren} from 'react'
+
+import { type ButtonVariants, type ButtonSizes, Button } from '@hanzo/ui/primitives'
+
+import BuyTriggerWrapper from './buy-trigger-wrapper'
+import { cn } from '@hanzo/ui/util'
+
+const BuyButton: React.FC<PropsWithChildren & {
+  skuPath: string
+  variant? : ButtonVariants 
+  size?: ButtonSizes  
+  /* rounded?: ButtonRounded // TODO: wait for version bump*/
+  className?: string 
+  mobile?: boolean
+}> = ({
+  skuPath,
+  variant,
+  size,
+  children,
+  className='',
+  mobile=false
+}) => (
+  <BuyTriggerWrapper skuPath={skuPath} mobile={mobile}
+    trigger={  <Button size={size} variant={variant} className={cn(className, '')}>{children}</Button> }
+  />
+)
+
+
+
+export default BuyButton

package/components/buy/buy-card.tsx

@@ -0,0 +1,169 @@
+'use client'
+import React, { useRef, useEffect, type ComponentType } from 'react'
+import { autorun  } from 'mobx'
+import { observer } from 'mobx-react-lite'
+
+import { cn } from '@hanzo/ui/util'
+
+import type { SelectedPaths, ItemSelectorProps, LineItem } from '../../types'
+import { useCommerce } from '../../service/context'
+import { getFacetValuesMutator } from '../../util'
+
+import FacetValuesWidget from '../facet-values-widget'
+import AddToCartWidget from './add-to-cart-widget'
+import ItemMedia from '../item/item-media'
+import { ApplyTypography } from '@hanzo/ui/primitives'
+
+const BuyCard: React.FC<{
+  skuPath: string
+  selector: ComponentType<ItemSelectorProps>
+  selShowPrice?: boolean
+  selShowQuantity?: boolean
+  selClx?: string
+  selSoleItemClx?: string
+  selItemClx?: string
+  selExt?: any
+  allVariants?: boolean
+  className?: string
+  facetsWidgetClx?: string
+  facetsAs?: 'image' | 'label' | 'image-and-label'
+  addWidgetClx?: string
+  mobile?: boolean
+  onQuantityChanged?: (sku: string, oldV: number, newV: number) => void
+}> = observer(({
+  skuPath,
+  className='',
+  facetsWidgetClx='',
+  selector: Selector,
+  selShowPrice=true,
+  selShowQuantity=false,
+  selClx='',
+  selItemClx='',
+  selSoleItemClx='',
+  selExt,
+  addWidgetClx='',
+  facetsAs='image-and-label', 
+  allVariants=true,
+  mobile=false,
+  onQuantityChanged,
+}) => {
+
+  const cmmc = useCommerce()
+  const levelRef = useRef<number>(-1)
+
+  const requestedCat = cmmc.getCategory(skuPath) 
+  const levelNode = requestedCat ? undefined : cmmc.getNodeAtPath(skuPath)
+
+  useEffect(() => {
+
+    const toks = skuPath.split('-')
+    levelRef.current = toks.length - 1
+    if (levelRef.current === 0) {
+      throw new Error('BuyCard.useEffect(): must specify at least a Level 1 skuPath!') 
+    }
+    const fsv: SelectedPaths = {}
+    for (let level = 1; level <= levelRef.current; level++ ) {
+      fsv[level] = [toks[level]]   
+    } 
+      // Actually specify the requested Cat, 
+      // or the first Cat if no Cats at this level
+    if (!requestedCat) {
+      fsv[levelRef.current + 1] = [levelNode!.subNodes![0].skuToken]
+    }
+    cmmc.selectPaths(fsv)
+
+    return autorun(() => {
+      const cats = cmmc.selectedCategories
+        // Original requestedCat was legit
+      if (requestedCat /* && (cats.length === 0 || cats[0].id !== requestedCat.id) */) {
+        if (
+          !cmmc.currentItem 
+          || 
+          cmmc.currentItem.categoryId !== requestedCat.id 
+          || 
+          requestedCat.products.length === 1
+        ) {
+          cmmc.setCurrentItem(requestedCat.products[0].sku)
+        }
+      }
+      else if (cats.length > 0) {
+        if (!cmmc.currentItem || cmmc.currentItem.categoryId !== cats[0].id) {
+          cmmc.setCurrentItem(cats[0].products[0].sku)
+        }
+      }
+    })
+  }, [requestedCat, levelNode?.subNodes])
+
+  const TitleArea: React.FC<{
+    title: string
+    byline?: string
+    clx?: string
+  }> = ({
+    title,
+    byline,
+    clx='' 
+  }) => (
+    <ApplyTypography className={clx}>
+      <h3>{title}</h3>
+      {byline && (<h6>{byline}</h6>)}
+    </ApplyTypography>
+  )
+
+  const catTitle = requestedCat ? requestedCat.title : cmmc.selectedCategories?.[0]?.title
+
+  return (
+    <div className={cn('px-4 md:px-6 pt-3 pb-4 flex flex-col items-center', className)} >
+    {levelNode && (<>
+      <ApplyTypography className=''>
+        <h3>{levelNode.label}</h3>
+        {levelNode.subNodesLabel && (
+          <h6 className='!text-center mt-4 mb-1'>{levelNode.subNodesLabel}</h6>
+        )}
+      </ApplyTypography>
+      <FacetValuesWidget
+        className={cn(
+          'grid gap-0 ' + `grid-cols-${levelNode!.subNodes!.length}`, 
+          'border-b-2 rounded-lg border-level-3 mb-4 -mr-2 -ml-2 max-w-[460px]',
+          facetsWidgetClx  
+        )} 
+        mobile={mobile}
+        mutator={getFacetValuesMutator(levelRef.current + 1, cmmc)} 
+        itemClx='flex-col h-auto gap-0 py-1 px-3'
+        buttonClx={
+          'h-full ' +
+          '!border-level-3'
+        }
+        facetValues={levelNode!.subNodes!}
+        show={facetsAs}
+      />
+    </>)} 
+    {!levelNode && catTitle && (
+      <TitleArea title={catTitle} clx=''/>
+    )}
+    {(cmmc.currentItem) && (<ItemMedia item={cmmc.currentItem} />)} 
+    {cmmc.selectedCategories[0] && (
+      <Selector 
+        items={cmmc.selectedCategories[0].products as LineItem[]}
+        selectedItemRef={cmmc}
+        selectSku={cmmc.setCurrentItem.bind(cmmc)}
+        clx={selClx}
+        itemClx={selItemClx}
+        soleItemClx={selSoleItemClx}
+        ext={selExt}
+        showPrice={selShowPrice}
+        showQuantity={selShowQuantity}
+      />  
+    )}
+    {(cmmc.currentItem) && (
+      <AddToCartWidget 
+        size='default' 
+        item={cmmc.currentItem}
+        onQuantityChanged={onQuantityChanged} 
+        className={cn('min-w-[160px] mx-auto mt-4', addWidgetClx)}
+      />
+    )} 
+    </div >
+  )
+})
+
+export default BuyCard

package/components/buy/buy-drawer.tsx

@@ -0,0 +1,78 @@
+'use client'
+import React, { useState, type ReactNode } from 'react'
+
+import { X as LucideX} from 'lucide-react'
+
+import {
+  Drawer,
+  DrawerTrigger,
+  DrawerContent,
+  Button,
+} from '@hanzo/ui/primitives'
+
+import { cn } from '@hanzo/ui/util'
+
+import BuyCard from './buy-card'
+import RadioItemSelector from '../select/radio-selector'
+import ImageItemSelector from '../select/image-selector'
+
+const BuyDrawer: React.FC<{
+  skuPath: string
+  trigger: ReactNode
+  triggerClx?: string  
+  drawerClx?: string
+  cardClx?: string
+  mobile?: boolean
+}> = ({
+  skuPath,
+  trigger,
+  triggerClx='',
+  drawerClx='',
+  cardClx='',
+  mobile=false
+}) => {
+
+  const [open, setOpen] = useState<boolean>(false)
+
+  const onQuantityChanged = (sku: string, oldV: number, newV: number) => {
+    //if (oldV === 0 && newV === 1) {
+    //  setTimeout(() => {setOpen(false)}, 150)
+    //}
+  }
+
+  return (
+    <Drawer open={open} onOpenChange={setOpen} >
+      <DrawerTrigger asChild className={triggerClx}>
+        {trigger}
+      </DrawerTrigger>
+      <DrawerContent 
+        className={cn('rounded-t-xl z-[52] mt-6 pb-12 h-auto min-h-[35vh] pt-6 md:max-w-[550px] md:mx-auto', drawerClx)}
+        overlayClx='z-[51]'
+      >
+        <BuyCard 
+          skuPath={skuPath} 
+          mobile={mobile} 
+          onQuantityChanged={onQuantityChanged} 
+          className={cn('w-full', cardClx)}
+          selector={ImageItemSelector}
+          selClx=''
+          selItemClx=''
+          selSoleItemClx='mb-3'
+          addWidgetClx=''
+          facetsAs='label'
+        />
+        <Button
+          variant='ghost'
+          size='icon'
+          onClick={() => {setOpen(false)}}
+          className={'absolute top-4 right-4 w-8 h-8 group rounded-full p-1 hidden md:flex items-center'}
+        >
+          <LucideX className='w-6 h-6 text-muted group-hover:text-foreground'/>
+        </Button>    
+
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+export default BuyDrawer

package/components/buy/buy-trigger-wrapper.tsx

@@ -0,0 +1,20 @@
+'use client'
+import React from 'react'
+
+import BuyDrawer from './buy-drawer'
+
+const BuyTriggerWrapper: React.FC<{
+  skuPath: string
+  trigger: React.ReactNode
+  mobileTrigger?: React.ReactNode
+  mobile?: boolean
+}> = ({
+  skuPath,
+  trigger,
+  mobileTrigger,
+  mobile
+}) => (
+  <BuyDrawer skuPath={skuPath} trigger={trigger} mobile={mobile}/>
+)
+
+export default BuyTriggerWrapper

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

@@ -11,7 +11,8 @@ import {
   AccordionTrigger,
 } from '@hanzo/ui/primitives'
 
-import { formatCurrencyValue, useCommerce } from '..'
+import { formatCurrencyValue } from '../../util'
+import { useCommerce } from '../../service/context'
 
 import CartPanel from './cart-panel'
 

package/components/{cart-panel → cart/cart-panel}/cart-line-item.tsx

@@ -6,10 +6,11 @@ import { observer } from 'mobx-react-lite'
 
 import { cn } from '@hanzo/ui/util'
 
-import type { LineItem } from '../../types'
-import { formatCurrencyValue } from '../../util'
-import AddToCartWidget from '../add-to-cart-widget'
-import { useCommerce } from '../..'
+import type { LineItem } from '../../../types'
+import { formatCurrencyValue } from '../../../util'
+import AddToCartWidget from '../../buy/add-to-cart-widget'
+import { useCommerce } from '../../../service/context'
+import type { Dimensions } from '@hanzo/ui/types'
 
 const DEF_IMG_SIZE=40
 
@@ -36,11 +37,33 @@ const CartLineItem: React.FC<{
   const cmmc = useCommerce()
   const promoPrice = showPromoCode ? cmmc.itemPromoPrice(item) : undefined
   
+  let dim: Dimensions 
+  if (item.imgAR) {
+    if (item.imgAR >= 1) {
+      dim = {
+        w: imgSizePx,
+        h: imgSizePx / item.imgAR
+      }
+    }
+    else {
+      dim = {
+        w: imgSizePx * item.imgAR,
+        h: imgSizePx
+      }
+    }
+  }
+  else {
+    dim = {
+      w: imgSizePx,
+      h: imgSizePx
+    }
+  }
+
   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={imgSizePx} width={imgSizePx} className=''/>
+        <Image src={item.img} alt={item.title + ' image'} height={dim.h} width={dim.w} className=''/>
       ) : ( // placeholder so things align
         <div style={{height: imgSizePx, width: imgSizePx}}/>
       )}

package/components/{cart-panel → cart/cart-panel}/index.tsx

@@ -1,13 +1,13 @@
 'use client'
-import React, { type PropsWithChildren } from 'react'
+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 '../../service/context'
-import { formatCurrencyValue } from '../../util'
-import { sendFBEvent, sendGAEvent } from '../../util/analytics'
+import { useCommerce } from '../../../service/context'
+import { formatCurrencyValue } from '../../../util'
+import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
 
 import CartLineItem from './cart-line-item'
 import PromoCode from './promo-code'
@@ -88,7 +88,11 @@ const CartPanel: React.FC<PropsWithChildren & {
       />
     ))}
     </>)}
-    {showPromoCode && <PromoCode/>}
+    {showPromoCode && (
+      <Suspense>
+        <PromoCode/>
+      </Suspense>
+    )}
     {(showShipping || showPromoCode) && (
       <div className='flex flex-col gap-1 py-2 border-t'>
         <p className='flex justify-between'>

package/components/{cart-panel → cart/cart-panel}/promo-code.tsx

@@ -10,9 +10,9 @@ 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'
+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'),

package/components/{payment-step-form → checkout/payment-step-form}/contact-form.tsx

@@ -7,7 +7,7 @@ import {
 } from '@hanzo/ui/primitives/form'
 import { Input } from '@hanzo/ui/primitives'
 
-import type { ContactFormType } from '../../types'
+import type { ContactFormType } from '../../../types'
  
 const ContactForm: React.FC<{
   form: ContactFormType,

package/components/{payment-step-form → checkout/payment-step-form}/index.tsx

@@ -9,9 +9,9 @@ import { useForm } from 'react-hook-form'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@hanzo/ui/primitives'
 import { useAuth } from '@hanzo/auth/service'
 
-import { useCommerce } from '../../service/context'
-import { sendFBEvent, sendGAEvent } from '../../util/analytics'
-import type { CheckoutStepComponentProps, TransactionStatus } from '../../types'
+import { useCommerce } from '../../../service/context'
+import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
+import type { CheckoutStepComponentProps, TransactionStatus } from '../../../types'
 
 import METHODS from './methods'
 

package/components/{payment-step-form → checkout/payment-step-form}/methods/bank-transfer.tsx

@@ -5,7 +5,7 @@ import { Copy } from 'lucide-react'
 
 import { Button, toast } from '@hanzo/ui/primitives'
 
-import type { PaymentMethodComponentProps } from '../../../types'
+import type { PaymentMethodComponentProps } from '../../../../types'
 
 import ContactForm from '../contact-form'
 

package/components/{payment-step-form → checkout/payment-step-form}/methods/card.tsx

@@ -15,10 +15,10 @@ import {
 
 import { cn } from '@hanzo/ui/util'
 
-import { useCommerce } from '../../../service/context'
-import { processSquareCardPayment } from '../../../util'
-import type { PaymentMethodComponentProps } from '../../../types'
-import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
+import { useCommerce } from '../../../../service/context'
+import { processSquareCardPayment } from '../../../../util'
+import type { PaymentMethodComponentProps } from '../../../../types'
+import { sendFBEvent, sendGAEvent } from '../../../../util/analytics'
 
 import ContactInfo from '../contact-form'
 import PaymentMethods from '../card-icon-row'