@hanzo/commerce 2.0.0 → 3.0.0

package/components/{checkout → checkout-panel/payment}/pay-with-crypto.tsx

@@ -1,7 +1,5 @@
 'use client'
-
 import React, { useEffect, useState } from 'react'
-
 import { autorun } from 'mobx'
 import { observer } from 'mobx-react-lite'
 
@@ -22,11 +20,10 @@ import {
 import { useAuth } from '@hanzo/auth/service'
 import { Ethereum as EthIconFromAuth }  from '@hanzo/auth/icons'
 
-import Eth from './icons/eth'
-import Btc from './icons/btc'
-import Usdt from './icons/usdt'
-import { useCommerce } from '../..'
-import { formatPrice } from '../../util'
+import Eth from '../icons/eth'
+import { useCommerce } from '../../../service/context'
+import type { TransactionStatus } from '../../../types'
+import { formatPrice } from '../../../util'
 
 declare global {
   interface Window{
@@ -36,10 +33,15 @@ declare global {
 
 const PayWithCrypto: React.FC<{
   setCurrentStep: (currentStep: number) => void
+  transactionStatus: TransactionStatus
+  setTransactionStatus: (status: TransactionStatus) => void
+  storePaymentInfo: (paymentInfo: any) => Promise<void>
 }> = observer(({
-  setCurrentStep
+  setCurrentStep,
+  transactionStatus,
+  setTransactionStatus,
+  storePaymentInfo
 }) => {
-
   const c = useCommerce()
   const auth = useAuth()
   const [loadingPrice, setLoadingPrice] = useState(false)
@@ -47,7 +49,6 @@ const PayWithCrypto: React.FC<{
   const [amount, setAmount] = useState<number>()
   const [availableAmount, setAvailableAmount] = useState<number>()
   const [provider, setProvider] = useState<ethers.BrowserProvider>()
-  const [transactionStatus, setTransactionStatus] = useState<'unpaid' | 'paid' | 'confirmed' | 'error'>('unpaid')
 
   //const selectedToken = 'eth'
 
@@ -126,12 +127,17 @@ const PayWithCrypto: React.FC<{
       setTransactionStatus('paid')
 
       provider.waitForTransaction(tx.hash)
-        .then((receipt) => {
+        .then(async (receipt) => {
           console.log(receipt)
+          await storePaymentInfo({
+            ether,
+            addr: process.env.NEXT_PUBLIC_ETH_PAYMENT_ADDRESS,
+            receipt
+          })
           setTransactionStatus('confirmed')
         })
         .catch((error) => {
-          console.log(error)
+          console.error(error)
           setTransactionStatus('error')
         })
     } catch (err) {
@@ -141,9 +147,20 @@ const PayWithCrypto: React.FC<{
     }
   }
 
-  const payWidget = !!!(auth.user?.walletAddress) ? (
+  const nextStep = async () => {
+    await storePaymentInfo({
+      paymentMethod: 'crypto'
+    })
+    setCurrentStep(2)
+  }
+
+  const cryptoPriceWidget = !!!(auth.user?.walletAddress) ? (
     <div className='w-full mx-auto max-w-[20rem]'>
-      <Button variant='outline' className='w-full flex items-center gap-2' onClick={auth.associateWallet.bind(auth)}>
+      <Button
+        variant='outline'
+        className='w-full flex items-center gap-2'
+        onClick={auth.associateWallet.bind(auth)}
+      >
         <EthIconFromAuth height={20}/>Connect your wallet
       </Button>
     </div>
@@ -165,30 +182,35 @@ const PayWithCrypto: React.FC<{
       <div>Available funds in your wallet: {availableAmount} ETH</div>
       <div>
         <Input value={amount ? amount/(10**18) : amount} contentEditable={false}/>
-        <div className='relative flex items-center gap-2 -top-[32px] justify-end px-2 py-1 rounded-lg bg-muted-4 w-fit text-xs float-right mr-3'><Eth height={10}/>ETH</div>
+        <div className='relative flex items-center gap-2 -top-[32px] justify-end px-2 py-1 rounded-lg bg-muted-4 w-fit text-xs float-right mr-3'>
+          <Eth height={10}/>
+          ETH
+        </div>
       </div>
-      {transactionStatus === 'unpaid' || transactionStatus === 'error' ? (
-        <Button
-          onClick={() => sendPayment(amount ? amount/(10**18) : 0)}
-          disabled={!amount || loadingPrice}
-        >
-          Pay now
-        </Button>
+      {transactionStatus === 'error' ? (
+        <h4 className='text-destructive'>There was an error while confirming the transaction.</h4>
       ) : transactionStatus === 'paid' ? (
         <h4>Waiting for transaction to be confirmed on chain.</h4>
-      ) : (
+      ) : transactionStatus === 'confirmed' ? (
         <h4>Transaction confirmed!</h4>
-      )}
+      ) : null}
     </div>
   )
 
   return (
-    <div className='flex flex-col gap-6'>
-      {payWidget}
-      <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)} disabled={transactionStatus !== 'confirmed'} className='mx-auto w-full'>Continue</Button>
-      </div>
+    <div className='flex flex-col gap-6 mt-6'>
+      {cryptoPriceWidget}
+      {transactionStatus === 'unpaid' ? (
+        <Button
+          onClick={() => sendPayment(amount ? amount/(10**18) : 0)}
+          className='mx-auto w-full'
+          disabled={loadingPrice}
+        >
+          Pay
+        </Button>
+      ) : (
+        <Button onClick={nextStep} className='mx-auto w-full'>Continue</Button>
+      )}
     </div>
   )
 })

package/components/checkout-panel/payment/payment-methods/amex.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const Amex: React.FC<LucideProps> = (props: LucideProps) => (
+	<svg
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    viewBox="0 0 38 24"
+    aria-labelledby="pi-american_express"
+    {...props}
+  >
+    <title id="pi-american_express">American Express</title>
+    <g fill="none">
+      <path
+        fill="#000"
+        d="M35,0 L3,0 C1.3,0 0,1.3 0,3 L0,21 C0,22.7 1.4,24 3,24 L35,24 C36.7,24 38,22.7 38,21 L38,3 C38,1.3 36.6,0 35,0 Z"
+        opacity=".07"
+      />
+      <path
+        fill="#006FCF"
+        d="M35,1 C36.1,1 37,1.9 37,3 L37,21 C37,22.1 36.1,23 35,23 L3,23 C1.9,23 1,22.1 1,21 L1,3 C1,1.9 1.9,1 3,1 L35,1"
+      />
+      <path
+        fill="#FFF"
+        d="M8.971,10.268 L9.745,12.144 L8.203,12.144 L8.971,10.268 Z M25.046,10.346 L22.069,10.346 L22.069,11.173 L24.998,11.173 L24.998,12.412 L22.075,12.412 L22.075,13.334 L25.052,13.334 L25.052,14.073 L27.129,11.828 L25.052,9.488 L25.046,10.346 L25.046,10.346 Z M10.983,8.006 L14.978,8.006 L15.865,9.941 L16.687,8 L27.057,8 L28.135,9.19 L29.25,8 L34.013,8 L30.494,11.852 L33.977,15.68 L29.143,15.68 L28.065,14.49 L26.94,15.68 L10.03,15.68 L9.536,14.49 L8.406,14.49 L7.911,15.68 L4,15.68 L7.286,8 L10.716,8 L10.983,8.006 Z M19.646,9.084 L17.407,9.084 L15.907,12.62 L14.282,9.084 L12.06,9.084 L12.06,13.894 L10,9.084 L8.007,9.084 L5.625,14.596 L7.18,14.596 L7.674,13.406 L10.27,13.406 L10.764,14.596 L13.484,14.596 L13.484,10.661 L15.235,14.602 L16.425,14.602 L18.165,10.673 L18.165,14.603 L19.623,14.603 L19.647,9.083 L19.646,9.084 Z M28.986,11.852 L31.517,9.084 L29.695,9.084 L28.094,10.81 L26.546,9.084 L20.652,9.084 L20.652,14.602 L26.462,14.602 L28.076,12.864 L29.624,14.602 L31.499,14.602 L28.987,11.852 L28.986,11.852 Z"
+      />
+    </g>
+  </svg>
+
+)
+
+export default Amex

package/components/checkout-panel/payment/payment-methods/diners-club.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const DinersClub: React.FC<LucideProps> = (props: LucideProps) => (
+  <svg enableBackground="new 0 0 780 500" viewBox="0 0 780 500" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="m40 0h700c22.092 0 40 17.909 40 40v420c0 22.092-17.908 40-40 40h-700c-22.091 0-40-17.908-40-40v-420c0-22.091 17.909-40 40-40z" fill="#0079be"/>
+    <path d="m599.93 251.45c0-99.415-82.98-168.13-173.9-168.1h-78.242c-92.003-.033-167.73 68.705-167.73 168.1 0 90.93 75.727 165.64 167.73 165.2h78.242c90.914.436 173.9-74.294 173.9-165.2z" fill="#fff"/>
+    <path d="m348.28 97.43c-84.07.027-152.19 68.308-152.21 152.58.02 84.258 68.144 152.53 152.21 152.56 84.09-.027 152.23-68.303 152.24-152.56-.011-84.272-68.149-152.55-152.24-152.58z" fill="#0079be"/>
+    <path d="m252.07 249.6c.08-41.181 25.746-76.297 61.94-90.25v180.48c-36.194-13.948-61.861-49.045-61.94-90.23zm131 90.274v-180.53c36.207 13.92 61.914 49.057 61.979 90.257-.065 41.212-25.772 76.322-61.979 90.269z" fill="#fff"/>
+  </svg>
+)
+
+export default DinersClub

package/components/checkout-panel/payment/payment-methods/discover.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const Discover: React.FC<LucideProps> = (props: LucideProps) => (
+	<svg
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    viewBox="0 0 38 24"
+    aria-labelledby="pi-discover"
+    {...props}
+  >
+    <title id="pi-discover">Discover</title>
+    <path
+      d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"
+      fill="#000"
+      opacity=".07"
+    />
+    <path d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32" fill="#FFF" />
+    <path d="M37 16.95V21c0 1.1-.9 2-2 2H23.228c7.896-1.815 12.043-4.601 13.772-6.05z" fill="#EDA024" />
+    <path fill="#494949" d="M9 11h20v2H9z" />
+    <path d="M22 12c0 1.7-1.3 3-3 3s-3-1.4-3-3 1.4-3 3-3c1.7 0 3 1.3 3 3z" fill="#EDA024" />
+  </svg>
+)
+
+export default Discover

package/components/checkout-panel/payment/payment-methods/index.tsx

@@ -0,0 +1,24 @@
+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'
+
+const PaymentMethods: React.FC = () => {
+  return (
+    <div className='flex gap-1 items-center'>
+      <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'/>
+      <Visa className='w-9 h-5'/>
+      <DinersClub className='w-9 h-5'/>
+      <Jcb className='w-9 h-5'/>
+    </div>
+  )
+}
+
+export default PaymentMethods

package/components/checkout-panel/payment/payment-methods/jcb.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const Jcb: React.FC<LucideProps> = (props: LucideProps) => (
+  <svg viewBox="0 0 750 471" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <linearGradient id="a" x1=".031608%" x2="99.974315%" y1="49.999857%" y2="49.999857%">
+      <stop offset="0" stop-color="#007b40"/>
+      <stop offset="1" stop-color="#55b330"/>
+    </linearGradient>
+    <linearGradient id="b" x1=".471693%" x2="99.986009%" y1="49.999826%" y2="49.999826%">
+      <stop offset="0" stop-color="#1d2970"/><stop offset="1" stop-color="#006dba"/>
+    </linearGradient>
+    <linearGradient id="c" x1=".113881%" x2="99.986%" y1="50.000896%" y2="50.000896%">
+      <stop offset="0" stop-color="#6e2b2f"/><stop offset="1" stop-color="#e30138"/>
+    </linearGradient>
+    <g fill="none">
+      <rect fill="#0e4c96" height="471" rx="40" width="750"/>
+      <path d="m617.243183 346.766281c0 41.614606-33.728291 75.359693-75.359693 75.359693h-409.126667v-297.881058c0-41.6262334 33.733028-75.3704593 75.36486-75.3704593l409.1215-.0004307-.000431 297.892255z" fill="#fff"/>
+      <path d="m483.858874 242.044797c11.683825.253488 23.437314-.515991 35.07713.400086 11.78724 2.200795 14.627911 20.042991 4.156336 25.887628-7.141594 3.849604-15.632844 1.432185-23.379012 2.113697h-15.854454zm41.832952-32.14431c2.596665 9.164192-6.237923 17.391631-15.065909 16.130079h-26.767043c.184884-8.642125-.367529-18.021593.272179-26.208903 10.723889.301723 21.548523-.615814 32.209341.48019 4.581405 1.149705 8.413541 4.915859 9.351432 9.598634zm64.428586-135.9032616c.49746 17.5012286.071059 35.9264246.213178 53.7829666-.034453 72.596166.072352 145.193982-.054694 217.789111-.468476 27.207289-24.582372 50.844375-51.600147 51.387391-27.045829.111757-54.094452.015934-81.141353.047803v-109.751206c29.469604-.153488 58.958644.307709 88.416125-.231697 13.667199-.858825 28.632506-9.875899 29.269759-24.91422 1.610381-15.101891-12.631152-25.550189-26.152184-27.20169-5.198323-.135142-5.043964-1.514838 0-2.116712 12.891974-2.786489 23.019579-16.133185 19.22569-29.498743-3.236266-14.057855-18.772947-19.498809-31.69642-19.472461-26.351818-.179156-52.709067-.025409-79.06297-.076658.171189-20.488702-.35448-41.000457.285314-61.473746 2.087651-26.7159874 26.805893-48.7478321 53.447049-48.269708 26.283407-.0002868 52.567978.0005741 78.850653-.0004306z" fill="url(#a)"/>
+      <path d="m159.740429 125.040498c.67326-27.1638388 24.88819-50.6114681 51.874368-51.0079582 26.944696-.0825712 53.891407-.0116279 80.836874-.0353144-.074031 90.8852626.148234 181.7764466-.11137 272.6579966-1.038003 26.83358-24.989753 49.833439-51.678945 50.30707-26.996341.098665-53.995081.013782-80.992344.042205v-113.453622c26.222611 6.194616 53.722126 8.831643 80.473394 4.721367 15.992103-2.574874 33.487529-10.424216 38.901855-27.014675 3.985861-14.1913 1.741462-29.125965 2.333766-43.691102v-33.824924h-46.296781c-.20814 22.370604.426012 44.780906-.3351 67.125566-1.248296 13.734107-14.845999 22.459889-27.799718 21.994694-16.066681.168734-47.898878-11.640005-47.898878-11.640005-.080058-41.916996.466764-94.407411.692879-136.181298z" fill="url(#b)"/>
+      <path d="m309.719995 197.390136c-2.434207.517244-.490854-8.300677-1.113697-11.646172.165935-21.150327-.346253-42.323013.28342-63.458137 2.082823-26.8287443 26.991544-48.9157165 53.73903-48.288171h78.765812c-.073902 90.88469.147933 181.775284-.111154 272.656278-1.038994 26.834093-24.992062 49.833168-51.681319 50.308358-26.997482.099699-53.99738.014212-80.995789.042636v-124.297304c18.440112 15.128222 43.49944 17.484624 66.471655 17.52586 17.317057-.006029 34.533908-2.675619 51.35019-6.67055v-22.772637c-18.953485 9.446312-41.233335 15.445518-62.243398 10.017669-14.655694-3.650599-25.293855-17.811283-25.056232-32.935762-1.698503-15.72852 7.524118-32.335319 22.981724-37.011349 19.190686-6.00831 40.10755-1.412401 58.096107 6.39794 3.854182 2.018155 7.764316 4.521547 6.221799-1.920751v-17.899686c-30.084562-7.157407-62.101499-9.791953-92.328705-2.004739-8.748245 2.468155-17.271248 6.211028-24.379443 11.956517z" fill="url(#c)"/>
+    </g>
+  </svg>
+)
+
+export default Jcb

package/components/checkout-panel/payment/payment-methods/mastercard.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const Mastercard: React.FC<LucideProps> = (props: LucideProps) => (
+	<svg
+    viewBox="0 0 38 24"
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    aria-labelledby="pi-master"
+    {...props}
+  >
+    <title id="pi-master">Mastercard</title>
+    <path
+      opacity=".07"
+      d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"
+    />
+    <path fill="#fff" d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32" />
+    <circle fill="#EB001B" cx="15" cy="12" r="7" />
+    <circle fill="#F79E1B" cx="23" cy="12" r="7" />
+    <path
+      fill="#FF5F00"
+      d="M22 12c0-2.4-1.2-4.5-3-5.7-1.8 1.3-3 3.4-3 5.7s1.2 4.5 3 5.7c1.8-1.2 3-3.3 3-5.7z"
+    />
+  </svg>
+)
+
+export default Mastercard

package/components/checkout-panel/payment/payment-methods/visa.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { type LucideProps } from 'lucide-react'
+
+const Visa: React.FC<LucideProps> = (props: LucideProps) => (
+	<svg
+    viewBox="0 0 38 24"
+    xmlns="http://www.w3.org/2000/svg"
+    role="img"
+    aria-labelledby="pi-visa"
+    {...props}
+  >
+    <title id="pi-visa">Visa</title>
+    <path
+      opacity=".07"
+      d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"
+    />
+    <path fill="#fff" d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32" />
+    <path
+      d="M28.3 10.1H28c-.4 1-.7 1.5-1 3h1.9c-.3-1.5-.3-2.2-.6-3zm2.9 5.9h-1.7c-.1 0-.1 0-.2-.1l-.2-.9-.1-.2h-2.4c-.1 0-.2 0-.2.2l-.3.9c0 .1-.1.1-.1.1h-2.1l.2-.5L27 8.7c0-.5.3-.7.8-.7h1.5c.1 0 .2 0 .2.2l1.4 6.5c.1.4.2.7.2 1.1.1.1.1.1.1.2zm-13.4-.3l.4-1.8c.1 0 .2.1.2.1.7.3 1.4.5 2.1.4.2 0 .5-.1.7-.2.5-.2.5-.7.1-1.1-.2-.2-.5-.3-.8-.5-.4-.2-.8-.4-1.1-.7-1.2-1-.8-2.4-.1-3.1.6-.4.9-.8 1.7-.8 1.2 0 2.5 0 3.1.2h.1c-.1.6-.2 1.1-.4 1.7-.5-.2-1-.4-1.5-.4-.3 0-.6 0-.9.1-.2 0-.3.1-.4.2-.2.2-.2.5 0 .7l.5.4c.4.2.8.4 1.1.6.5.3 1 .8 1.1 1.4.2.9-.1 1.7-.9 2.3-.5.4-.7.6-1.4.6-1.4 0-2.5.1-3.4-.2-.1.2-.1.2-.2.1zm-3.5.3c.1-.7.1-.7.2-1 .5-2.2 1-4.5 1.4-6.7.1-.2.1-.3.3-.3H18c-.2 1.2-.4 2.1-.7 3.2-.3 1.5-.6 3-1 4.5 0 .2-.1.2-.3.2M5 8.2c0-.1.2-.2.3-.2h3.4c.5 0 .9.3 1 .8l.9 4.4c0 .1 0 .1.1.2 0-.1.1-.1.1-.1l2.1-5.1c-.1-.1 0-.2.1-.2h2.1c0 .1 0 .1-.1.2l-3.1 7.3c-.1.2-.1.3-.2.4-.1.1-.3 0-.5 0H9.7c-.1 0-.2 0-.2-.2L7.9 9.5c-.2-.2-.5-.5-.9-.6-.6-.3-1.7-.5-1.9-.5L5 8.2z"
+      fill="#142688"
+    />
+  </svg>
+)
+
+export default Visa

package/components/{checkout → checkout-panel}/shipping-info.tsx

@@ -40,11 +40,9 @@ const shippingFormSchema = z.object({
 
 const ShippingInfo: React.FC<{
   orderId?: string,
-  paymentMethod?: string,
   setCurrentStep: (currentStep: number) => void
 }> = ({
   orderId,
-  paymentMethod,
   setCurrentStep
 }) => { 
   const auth = useAuth()
@@ -65,10 +63,10 @@ const ShippingInfo: React.FC<{
   })
 
   const onSubmit = async (values: z.infer<typeof shippingFormSchema>) => {
-    if (auth.user && orderId && paymentMethod) {
-      await cmmc.updateOrder(orderId, auth.user.email, paymentMethod, values)
+    if (auth.user && orderId) {
+      await cmmc.updateOrderShippingInfo(orderId, values)
     }
-    setCurrentStep(4)
+    setCurrentStep(3)
   }
 
   return (
@@ -198,11 +196,7 @@ const ShippingInfo: React.FC<{
             />
           </div>
         </div>
-
-        <div className='flex gap-4 items-center mt-6'>
-          <Button variant='outline' onClick={() => setCurrentStep(2)} className='mx-auto w-full'>Back</Button>
-          <Button type='submit' className='mx-auto w-full'>Confirm order</Button>
-        </div>
+        <Button type='submit' className='mx-auto w-full mt-4'>Confirm order</Button>
       </form>
     </Form>
   )

package/components/{facet-toggles-widget → facet-values-widget}/facet-image.tsx

@@ -3,7 +3,7 @@ import Image from 'next/image'
 
 import type { FacetValueDesc } from '../../types'
 
-const ICON_SIZE = 16
+const ICON_SIZE = 20
 const SVG_MULT = 1.5
 
 const FacetImage: React.FC<{
@@ -27,16 +27,19 @@ const FacetImage: React.FC<{
       <Image 
         src={img as string} 
         alt={`Toggle ${label}`} 
-        className={'block mr-1 rounded border border-muted-2 ' + (ar ? '' : 'aspect-square')} 
+        className={'block mr-1 '} 
         width={ar ?  ar * ICON_SIZE : ICON_SIZE}
         height={ICON_SIZE}
       />
     )
   }
 
+  return img as React.ReactNode
+
     // Otherwise, assume it's a ReactNode of an imported SVG
 
     // If it's not square, center it in the appropriate dimension
+    /*
   const svgStyle: any = { position: 'relative' }
   if (ar) {
     if (ar < 1) {
@@ -51,7 +54,7 @@ const FacetImage: React.FC<{
 
   return (
     <span 
-      className='block overflow-hidden ' 
+      className='flex justify-center items-center overflow-hidden ' 
       style={{
         color: 'inherit',
         width: ICON_SIZE * SVG_MULT, 
@@ -65,6 +68,7 @@ const FacetImage: React.FC<{
       })}
     </span>
   )
+  */
 } 
 
 export default FacetImage

package/components/{facet-toggles-widget → facet-values-widget}/index.tsx

@@ -1,25 +1,27 @@
 'use client'
 import React, { useState } from 'react'
 
-import { ToggleGroup, ToggleGroupItem, type toggleVariants} from "@hanzo/ui/primitives"
+import { ToggleGroup, ToggleGroupItem} from "@hanzo/ui/primitives"
 import { cn } from '@hanzo/ui/util'
 
 import type { FacetValueDesc, StringMutator, StringArrayMutator } from '../../types'
 import FacetImage from './facet-image'
 
-const FacetTogglesWidget: React.FC<{
+const FacetValuesWidget: React.FC<{
   facetValues: FacetValueDesc[]
   mutator: StringMutator | StringArrayMutator
   multiple?: boolean
   className?: string
   buttonClx?: string
+  itemClx?: string
   isMobile?: boolean
   tabSize?: string
 }> = ({
   facetValues,
   mutator,
-  multiple='',
+  multiple=false,
   buttonClx='',
+  itemClx='',
   className='',
   isMobile=false,
   tabSize
@@ -73,7 +75,7 @@ const FacetTogglesWidget: React.FC<{
           {...roundedToSpread}
           className={buttonClx}
         >
-          <span className={cn('flex flex-row justify-center gap-1 h-4 items-center')} >
+          <span className={cn('flex flex-row justify-center gap-1 h-6 items-center', itemClx)} >
             <FacetImage facetValueDesc={fv} />
             {(!isMobile || !fv.img) && (<span className='whitespace-nowrap'>{fv.label}</span>)}
           </span>
@@ -85,4 +87,4 @@ const FacetTogglesWidget: React.FC<{
 }
 // hidden md:block 
 
-export default FacetTogglesWidget
+export default FacetValuesWidget

package/components/index.ts

@@ -1,12 +1,14 @@
 export { default as AddToCartWidget } from './add-to-cart-widget'
-export { default as Cart } from './cart'
-export { default as CartLineItem } from './cart-line-item'
-export { default as FacetsWidget } from './facets-widget'
-export { default as FacetTogglesWidget } from './facet-toggles-widget'
+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 CartPanel } from './cart-panel'
+export { default as CheckoutPanel } from './checkout-panel'
+export { default as CategoryItemIOSWheelSelector } from './category-item-ios-wheel-selector'
+export { default as CategoryItemRadioSelector } from './category-item-radio-selector'
+export { default as FacetValuesWidget } from './facet-values-widget'
 export { default as ProductCard } from './product-card'
-export { default as ProductSelectionMobilePicker } from './product-selection-mobile-picker'
-export { default as ProductSelectionRadioGroup } from './product-selection-radio-group'
-export { default as SelectCategoryAndItemWidget } from './select-category-and-item-widget'
-export { default as SelectItemInCategoryView } from './select-item-in-category-view'
-export { default as Checkout } from './checkout'
+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 { Icons } from './Icons'