@hanzo/commerce 2.0.0 → 3.0.0

package/components/checkout/pay-by-bank-transfer.tsx

@@ -1,76 +0,0 @@
-'use client'
-
-import type { ReactNode } from 'react'
-import { Copy } from 'lucide-react'
-
-import { Button, Tabs, TabsContent, TabsList, TabsTrigger, toast } from '@hanzo/ui/primitives'
-import { EnhHeadingBlockComponent, type EnhHeadingBlock, type Block } from '@hanzo/ui/blocks'
-
-const InfoField: React.FC<{label: string, value: ReactNode, copyValue: string}> = ({label, value, copyValue}) => {
-  const copyToClipboard = (label: string, text: string) => {
-    navigator.clipboard.writeText(text)
-    toast({title: `${label} copied to clipboard`})
-  }
-
-  return (
-    <div className='flex flex-col gap-1'>
-      <p className='text-xs'>{label}</p>
-      <div className='flex items-center justify-between text-lg border rounded-lg py-2 px-4'>
-        {value}
-        <Button variant='ghost' size='icon' onClick={() => copyToClipboard(label, copyValue)}>
-          <Copy className='h-4 w-4'/>
-        </Button>
-      </div>
-    </div>
-  )
-}
-
-const PayByBankTransfer: React.FC<{setCurrentStep: (step: number) => void}> = ({setCurrentStep}) => {
-  return (<>
-    <Tabs defaultValue="usd" className='w-full mx-auto max-w-[50rem]'>
-      <TabsList className="grid w-full grid-cols-2 max-w-[15rem] mx-auto bg-level-2">
-        <TabsTrigger value="usd">USD</TabsTrigger>
-        <TabsTrigger value="eur">EUR/GBP</TabsTrigger>
-      </TabsList>
-      <TabsContent value="usd">
-        <div className='flex flex-col gap-4 w-full'>
-          <InfoField
-            label='Beneficiary Bank'
-            value={<div>Bank of America<br/>NA 222 Broadway<br/>New York, New York. 10038</div>}
-            copyValue='Bank of America, NA 222 Broadway, New York, New York. 10038'
-          />
-          <InfoField
-            label='Beneficiary'
-            value={<div>Hanzo, Inc<br/>4811 Mastin Street<br/>Merriam, KS 66203</div>}
-            copyValue='Hanzo, Inc, 4811 Mastin Street, Merriam, KS 66203'
-          />
-          <InfoField label='Routing Number - ACH' value='113000023 / 111000025' copyValue='113000023 / 111000025'/>
-          <InfoField label='Routing Number - Wire' value='026009593' copyValue='026009593'/>
-          <InfoField label='Routing Number - SWIFT' value='BOFAUS3N' copyValue='BOFAUS3N'/>
-          <InfoField label='Reference' value='Lux' copyValue='Lux'/>
-        </div>
-      </TabsContent>
-      <TabsContent value="eur">
-        <div className='flex flex-col gap-4 w-full'>
-          <InfoField
-            label='Beneficiary Bank'
-            value={<div>Clear Junction Limited<br/>4th floor<br/>Imperial House</div>}
-            copyValue='Clear Junction Limited, 4th floor, Imperial House'
-          />
-          <InfoField label='Account Number (GBP)' value='33781813' copyValue='33781813'/>
-          <InfoField label='Account Name' value='AiDLT Global Ltd.' copyValue='AiDLT Global Ltd.'/>
-          <InfoField label='SWIFT/BIC' value='CLJUGB21' copyValue='CLJUGB21'/>
-          <InfoField label='Sort Code (GBP)' value='041307' copyValue='041307'/>
-          <InfoField label='IBAN' value='GB75 CLJU 0413 0733 78181 3' copyValue='GB75 CLJU 0413 0733 78181 3'/>
-          <InfoField label='Reference' value='Lux' copyValue='Lux'/>
-        </div>
-      </TabsContent>
-    </Tabs>
-    <div className='flex gap-4 items-center mt-6'>
-      <Button variant='outline' onClick={() => setCurrentStep(1)} className='mx-auto w-full'>Back</Button>
-      <Button onClick={() => setCurrentStep(3)} className='mx-auto w-full'>Continue</Button>
-    </div>
-  </>)
-}
-
-export default PayByBankTransfer

package/components/facets-widget.tsx

@@ -1,55 +0,0 @@
-'use client'
-import React, { type PropsWithChildren } from 'react'
-
-import { cn } from '@hanzo/ui/util'
-
-import type { FacetsDesc, StringMutator, StringArrayMutator } from '../types'
-
-import FacetTogglesWidget from './facet-toggles-widget'
-
-const FacetsWidget: React.FC<PropsWithChildren & {
-  facets: FacetsDesc
-  mutators:  StringMutator[] | StringArrayMutator[]
-  facetClx?: string[]
-  facetItemClx?: string
-  multiple?: boolean
-  isMobile?: boolean
-  id?: string
-  className?: string
-  tabSize?: string 
-  childrenAfter?: boolean
-}> = ({
-  children,
-  facets,
-  mutators,
-  multiple=false,
-  facetClx,
-  facetItemClx='',
-  isMobile=false,
-  className='',
-  tabSize,
-  id='FacetsWidget',
-  childrenAfter=true
-}) => {
-  const horiz = className.includes('flex-row')
-  return (
-    <div id={id} className={className} >
-    {!childrenAfter && children}
-    {Object.keys(facets).map((key, i) => (
-      <FacetTogglesWidget 
-        key={i}
-        multiple={multiple}
-        mutator={mutators[i]} 
-        isMobile={isMobile}
-        facetValues={facets[parseInt(key)]} 
-        className={cn((horiz ? '' : 'mb-2'), (i !== 0 && !horiz) ? 'mt-2' : '', (facetClx?.[i]) ?? '')}
-        buttonClx={facetItemClx} 
-        tabSize={tabSize}
-      />
-    ))}
-      {childrenAfter && children}
-    </div>
-  )
-}
-
-export default FacetsWidget

package/components/product-selection-mobile-picker.tsx

@@ -1,78 +0,0 @@
-import React, { useState } from 'react'
-import Picker from 'react-mobile-picker'
-
-import type { Product } from '../types'
-import { formatPrice } from '../util'
-import { cn } from '@hanzo/ui/util'
-
-  // from source code
-interface PickerItemRenderProps {
-  selected: boolean;
-}
-
-function renderOptions(options: string[], selectedColor: string) {
-  return options.map((option) => (
-    <Picker.Item key={option} value={option}>
-      {({ selected }: PickerItemRenderProps) => (
-        <div className={selected ? `font-semibold ${selectedColor}` : 'text-neutral-400'}>{option}</div>
-      )}
-    </Picker.Item>
-  ))
-}
-
-// const DEFAULT_HEIGHT = 216
-// const DEFAULT_ITEM_HEIGHT = 36
-
-
-const ProductSelectionMobilePicker: React.FC<{
-  products: Product[]
-  selectedSku: string | undefined
-  onValueChange: (v: string) => void
-  height?: number
-  itemHeight?: number
-  outerClx?: string
-  itemClx?: string
-}> = ({
-  products,
-  selectedSku,
-  onValueChange,
-  height,
-  itemHeight,
-  outerClx='',
-  itemClx=''
-}) => {
-
-    // @ts-ignore
-  const onChange = (val, ignore) => {
-    console.log("VAL", val)
-    console.log("key")
-    onValueChange(val.item)
-  }
-
-return (
-  <div className={cn('border border-muted-4 rounded-lg px-2', outerClx)}>
-    <Picker
-      className=''
-      value={selectedSku ? {item: selectedSku} : {item: undefined}}
-      onChange={onChange}
-      wheelMode="natural"
-      height={height}
-      itemHeight={itemHeight}
-    >
-      <Picker.Column name="item">
-      {products.map((prod) => (
-        <Picker.Item key={prod.sku} value={prod.sku}>
-        {({ selected }: PickerItemRenderProps) => (
-          <div className={cn(selected ? 'font-semibold text-accent' : 'text-muted', itemClx)}>
-            {prod.titleAsOption + ', ' + formatPrice(prod.price)}
-          </div>
-        )}
-        </Picker.Item>
-      ))}
-      </Picker.Column>
-    </Picker>
-  </div>
-)
-}
-
-export default ProductSelectionMobilePicker

package/components/product-selection-radio-group.tsx

@@ -1,38 +0,0 @@
-'use client'
-
-import { Label, RadioGroup, RadioGroupItem } from '@hanzo/ui/primitives'
-import type { Product } from '../types'
-import { formatPrice } from '../util'
-
-const ProductSelectionRadioGroup: React.FC<{
-  products: Product[]
-  selectedSku: string | undefined
-  onValueChange: (v: string) => void
-  groupClx?: string
-  itemClx?: string
-  showPrice?: boolean
-}> = ({
-  products,
-  selectedSku,
-  onValueChange,
-  groupClx='',
-  itemClx='',
-  showPrice=true
-}) => (
-  products.length > 1 && (
-    <RadioGroup
-      className={groupClx}
-      onValueChange={onValueChange}
-      value={selectedSku}
-    >
-    {products.map((prod) => (
-      <div className={itemClx} key={prod.sku}>
-        <RadioGroupItem value={prod.sku} id={prod.sku} />
-        <Label htmlFor={prod.sku}>{prod.titleAsOption + (showPrice ? (', ' + formatPrice(prod.price)) : '')}</Label>
-      </div>
-    ))}
-    </RadioGroup>
-  )
-)
-
-export default ProductSelectionRadioGroup