@hanzo/commerce 4.7.0 → 4.9.0

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

@@ -29,7 +29,7 @@ const AddToCartWidget: React.FC<{
 }) => {
 
   const iconClx = ghost ? 'h-4 w-4 md:h-3 md:w-3 text-muted-3 hover:text-foreground' : 'h-5 w-7 px-1'
-  const digitClx = ghost ? 'px-2 md:px-0.5' : 'sm:px-2 font-bold '
+  const digitClx = ghost ? 'px-2 md:px-0.5 text-foreground ' : 'sm:px-2 font-bold text-primary-fg '
 
   if (disabled) {
     return (
@@ -116,7 +116,7 @@ const AddToCartWidget: React.FC<{
         <Icons.trash className={iconClx} aria-hidden='true'/>
       )}
       </Button>
-        <div className={'text-sm flex items-center cursor-default xs:px-2 text-primary-fg ' + digitClx} >{item.quantity}</div>
+        <div className={'text-sm flex items-center cursor-default xs:px-2 ' + digitClx} >{item.quantity}</div>
       <Button
         aria-label={'Add another ' + item.title + ' to the cart'}
         size={size}

package/components/cart-panel/index.tsx

@@ -15,27 +15,24 @@ import ProductsCarousel from './products-carousel'
 const CartPanel: React.FC<PropsWithChildren & {
   className?: string
   isMobile?: boolean,
-  noCheckout?: boolean
-  showProductsCarousel?: boolean
-  onCheckoutOpen?: () => void
+  showCarousel?: boolean
+    /** if not provided, checkout button will not be shown */
+  handleCheckout?: () => void
 }> = observer(({
     /** Children is the heading area. */
   children,
   className='',
   isMobile=false,
-  noCheckout=false,
-  showProductsCarousel=false,
-  onCheckoutOpen,
+  showCarousel=false,
+  handleCheckout,
 }) => {
-  /* TODO: onCheckoutOpen is a hackish way fix a bug with multiple dialog opened at the same time.
-  *  Needs refactor with context or so.
-  **/
+
   const cmmc = useCommerce()
   if (!cmmc) {
     return <div />
   }
 
-  const showCheckout = () => {
+  const _handleCheckout = () => {
     sendGAEvent('begin_checkout', {
       currency: 'USD',
       value: cmmc.cartTotal,
@@ -57,13 +54,13 @@ const CartPanel: React.FC<PropsWithChildren & {
       value: cmmc.cartTotal,
       currency: 'USD',
     })
-    onCheckoutOpen && onCheckoutOpen()
+    handleCheckout && handleCheckout()
   }
 
   return (
     <div className={cn('border p-4 rounded-lg', className)}>
       {children}
-      {showProductsCarousel && <ProductsCarousel items={cmmc.cartItems}/>}
+      {showCarousel && <ProductsCarousel items={cmmc.cartItems}/>}
       <div className='mt-2 w-full'>
         {cmmc.cartEmpty ? (
           <p className='text-center mt-4'>No items in cart</p>
@@ -74,13 +71,13 @@ const CartPanel: React.FC<PropsWithChildren & {
           <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>
-      {!noCheckout && (<>
+      {handleCheckout && (<>
         {!cmmc.cartEmpty && (
           <Button 
             variant='primary' 
             rounded='lg' 
-            className='mt-12 mx-auto w-full' 
-            onClick={showCheckout}
+            className='mt-12 mx-auto w-full sm:max-w-[220px]' 
+            onClick={_handleCheckout}
           >
             Checkout
           </Button>

package/components/checkout-panel/cart-accordian.tsx

@@ -13,6 +13,7 @@ import { formatPrice, useCommerce } from '../..'
 
 import CartPanel from '../cart-panel'
 import BagIcon from './icons/bag-icon'
+import { ChevronRight } from 'lucide-react'
 
 const CartAccordian: React.FC<{className?: string}> = observer(({
   className=''
@@ -22,14 +23,21 @@ const CartAccordian: React.FC<{className?: string}> = observer(({
   return (
     <Accordion type="single" collapsible className={className}>
       <AccordionItem value="cart" className='w-full border-b-0'>
-        <AccordionTrigger className='!no-underline py-1'>
-          <div className='flex gap-4 items-center'>
-            <BagIcon className='w-4 h-4 sm:w-6 sm:h-6'/>
-            <h5 className='text-sm sm:text-xl truncate'>Order Summary {formatPrice(cmmc.cartTotal)}</h5>
+        <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'/>
+            <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>
+            <ChevronRight className="h-5 w-5 -mr-2 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90" />
           </div>
         </AccordionTrigger>
-        <AccordionContent>
-          <CartPanel noCheckout className='border-none w-full'/>
+        <AccordionContent className='data-[state=open]:mb-4'>
+          <CartPanel className='w-full'/>
         </AccordionContent>
       </AccordionItem>
     </Accordion>

package/components/checkout-panel/close-button.tsx

@@ -5,16 +5,16 @@ import { ChevronLeft } from 'lucide-react'
 import { Button } from '@hanzo/ui/primitives'
 
 const CloseButton: React.FC<{
-  onClose: () => void
+  close: () => void
   className?: string
 }> = ({
-  onClose,
+  close,
   className=''
 }) => (
     <Button
       variant='ghost'
       size='icon'
-      onClick={onClose}
+      onClick={close}
       className={'group ' + className}
     >
       <ChevronLeft className='w-5 h-5 group-hover:scale-110 transition-scale transition-duration-300'/>

package/components/checkout-panel/desktop.tsx

@@ -0,0 +1,46 @@
+'use client'
+import React, { type PropsWithChildren } from 'react'
+
+import { ScrollArea, StepIndicator } from '@hanzo/ui/primitives'
+import { AuthWidget } from '@hanzo/auth/components'
+
+import CartPanel from '../cart-panel'
+import CloseButton from './close-button'
+
+const DesktopPanel: React.FC<PropsWithChildren & {
+  index: number
+  stepNames: string[]
+  close:() => void
+  className?: string
+}> = ({
+  index,
+  stepNames,
+  close,
+  className='',
+  children
+}) => (
+  <div /* id='DT-GRID' */ className={className}>
+    <div className='w-full bg-background flex flex-row items-start justify-end'>
+      <ScrollArea className='h-full w-full max-w-[750px] relative flex flex-col items-center justify-start px-6 pt-12 pb-9'>
+        <CloseButton close={close} className='absolute top-3 left-3 w-auto h-auto rounded-full bg-level-1 hover:bg-level-2 hover:border-muted p-2' />
+        <CartPanel showCarousel className='flex border-none mt-10 w-full max-w-[550px] flex-col' />
+      </ScrollArea>
+    </div>
+    <ScrollArea className='w-full h-full bg-level-1 flex flex-row items-start justify-start overflow-y-auto'>
+      <div className='h-full w-full max-w-[750px] relative flex flex-col items-center gap-6 px-8 pb-6 pt-0'>
+        <AuthWidget noLogin className='hidden md:flex absolute top-4 right-4 '/>
+        <div className='bg-level-1 sticky h-[90px] pb-2 w-full top-0 flex justify-center items-end'>
+          <StepIndicator 
+            dotSizeRem={1.5} 
+            steps={stepNames} 
+            currentStep={index} 
+            className='gap-2 text-base w-pr-70 ' 
+          />
+        </div>
+        {children}
+      </div>
+    </ScrollArea>
+  </div>
+)
+
+export default DesktopPanel

package/components/checkout-panel/index.tsx

@@ -1,32 +1,42 @@
 'use client'
+import React, { useState }  from 'react'
 
-import { useState }  from 'react'
-import { observer } from 'mobx-react-lite'
-
-import {
-  Dialog,
-  DialogPortal,
-  ScrollArea,
-} from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-import { AuthWidget } from '@hanzo/auth/components'
+import { capitalize } from '@hanzo/ui/util'
 
 import { useCommerce } from '../..'
 
-import ShippingInfo from './shipping-info'
-import ThankYou from './thank-you'
-import CartPanel from '../cart-panel'
-import Payment from './payment'
-import CloseButton from './close-button'
-import StepIndicator from './step-indicator'
-import CartAccordian from './cart-accordian'
+import type { CheckoutStep } from './steps/types'
+import ShippingInfo from './steps/shipping-info'
+import ThankYou from './steps/thank-you'
+import Payment from './steps/payment'
+
+const STEPS = [
+  {
+    name: 'payment',
+    Comp: Payment
+  }, 
+  {
+    name: 'delivery',
+    Comp: ShippingInfo
+  }, 
+  {
+    name: 'done',
+    label: 'Done!',
+    Comp: ThankYou
+  }
+] satisfies CheckoutStep[]
+
+const STEP_NAMES = STEPS.map((s) => (s.label ? s.label : capitalize(s.name)))
+
+import DesktopCP from './desktop'
+import MobileCP from './mobile'
 
 const CheckoutPanel: React.FC<{
-  open: boolean
-  onCheckoutClose: () => void
-}> = observer(({
-  open,
-  onCheckoutClose
+  close: () => void
+  className?: string
+}> = ({
+  close,
+  className=''
 }) => {
 
   const cmmc = useCommerce()
@@ -35,74 +45,64 @@ const CheckoutPanel: React.FC<{
   if (!cmmc) {
     return <></>
   }
-  
-  const [step, setStep] = useState<number>(1)
-  const [orderId, setOrderId] = useState<string>()
+  const [stepIndex, setStepIndex] = useState<number>(0)
+  const [orderId, setOrderId] = useState<string | undefined>(undefined)
+
+    // Step.name or 'first' or 'next' or 'last' 
+  const setStep = (name: string): void => {
 
-  const steps = {
-    1: {
-      label: 'Payment',
-      element: (
-        <Payment
-          orderId={orderId} 
-          setOrderId={setOrderId}
-          setStep={setStep}
-        />
-    )}
-    , 
-    2: {
-      label: 'Delivery',
-      element: (
-        <ShippingInfo orderId={orderId} setStep={setStep}/>   
-    )}, 
-    3: {
-      label: 'Done!',
-      element: (
-      <ThankYou/>  
-    )}
-  } as Record<number, {label: string, element: JSX.Element}>
+    if (name === 'first') {
+      setStepIndex(0)
+    }
+    else if (name === 'last') {
+      setStepIndex(STEPS.length - 1)
+    } 
+    else if (name === 'next') {
+      if (stepIndex < STEPS.length - 2) {
+        setStepIndex(stepIndex + 1)
+      }
+      else {
+        throw new Error('CheckoutPanel.setStep(): Attempting to advance past last step!')
+      }
+    } 
+    else {
+      const indexFound = STEPS.findIndex((el) => (el.name === name))
+      if (indexFound !== -1) {
+        setStepIndex(indexFound)
+      }
+      else {
+        throw new Error('CheckoutPanel.setStep(): Step named ' + name + ' not found!')
+      }
+    }
+  } 
 
-  const onClose = () => {
-    setStep(1)
-    onCheckoutClose()
+  const _close = () => {
+    setStep('first')
+    close()
   }
 
+  const StepToRender = STEPS[stepIndex].Comp  
+
   return (
-    <Dialog open={open}>
-      <DialogPortal>
-        <div /* id='PORTAL_OUTER' */
-          className={cn(
-            'fixed top-0 shadow-lg ',
-            'animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10',
-            'sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0',
-            '!max-w-none w-full h-full min-h-screen bg-transparent backdrop-blur-sm z-50'
-          )}
-        >
-          <div /* id='GRID' */ className='flex flex-col md:flex-row justify-center h-full overflow-y-auto md:overflow-y-hidden'>
-            <div className='w-full bg-background flex flex-row items-start justify-end'>
-              <ScrollArea className='h-full w-full max-w-[750px] relative flex flex-col items-center justify-start px-6 pt-12 pb-0 md:pb-9'>
-                <CloseButton onClose={onClose} className='absolute top-3 left-3 w-auto h-auto rounded-full bg-level-1 hover:bg-level-2 hover:border-muted p-2' />
-                <AuthWidget hideLogin className='flex md:hidden absolute top-3 right-3'/>
-                <CartPanel
-                  className='hidden md:flex border-none mt-10 w-full max-w-[550px] flex-col'
-                  noCheckout
-                  showProductsCarousel
-                />
-                <CartAccordian className='md:hidden flex items-center justify-center py-2 w-full' />
-              </ScrollArea>
-            </div>
-            <ScrollArea className='w-full h-full bg-level-1 flex flex-row items-start justify-start md:overflow-y-auto'>
-              <div className='h-full w-full max-w-[750px] relative flex flex-col gap-8 sm:gap-14 px-4 md:px-8 pb-6 pt-6 md:pt-14'>
-                <AuthWidget hideLogin className='hidden md:flex absolute top-4 right-4 '/>
-                <StepIndicator steps={steps} currentStep={step} className='flex gap-2 mx-auto items-center text-xxs sm:text-base' />
-                {steps[step].element}
-              </div>
-            </ScrollArea>
-          </div>
-        </div>
-      </DialogPortal>
-    </Dialog>
+    <div /* id='CHECKOUT_PANEL' */  className={className} >
+      <DesktopCP 
+        className='hidden md:flex h-full flex-row justify-center overflow-y-hidden' 
+        close={_close}
+        index={stepIndex}
+        stepNames={STEP_NAMES}
+      >
+        <StepToRender onDone={() => {setStep('next')}} orderId={orderId} setOrderId={setOrderId}/>
+      </DesktopCP>
+      <MobileCP 
+        className='md:hidden h-full overflow-y-auto' 
+        close={_close}
+        index={stepIndex}
+        stepNames={STEP_NAMES}
+      >
+        <StepToRender onDone={() => {setStep('next')}} orderId={orderId} setOrderId={setOrderId}/>
+      </MobileCP>
+    </div>
   )
-})
+}
 
 export default CheckoutPanel

package/components/checkout-panel/mobile.tsx

@@ -0,0 +1,41 @@
+'use client'
+import React, { type PropsWithChildren } from 'react'
+
+import { StepIndicator } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+import { AuthWidget } from '@hanzo/auth/components'
+
+import CloseButton from './close-button'
+import CartAccordian from './cart-accordian'
+
+const MobilePanel: React.FC<PropsWithChildren & {
+  index: number
+  stepNames: string[]
+  close:() => void
+  className?: string
+}> = ({
+  index,
+  stepNames,
+  close,
+  className='',
+  children
+}) => (
+
+  <div /* id='MOBILE_GRID' */ className={cn('bg-background flex flex-col justify-start px-4', className)}>
+    <div className='sticky top-0 w-full flex flex-row justify-between items-start bg-background'>
+      <CloseButton close={close} className='rounded-full bg-background hover:bg-background p-1 -ml-3' />
+      <StepIndicator 
+        dotSizeRem={1} 
+        steps={stepNames} 
+        currentStep={index} 
+        className='text-xs font-semibold w-pr-70 mt-3' 
+      />
+      {/* Need wrapper div since 'noLogin' returns null if no logged in user */}
+      <div className='w-10 h-10 flex items-center justify-center'><AuthWidget noLogin className=''/></div>
+    </div>
+    <CartAccordian className='flex items-center justify-center py-2 mt-2 w-full' />
+    {children}
+  </div>
+)
+
+export default MobilePanel

package/components/checkout-panel/{payment/payment-methods → steps/payment/cards}/index.tsx

@@ -6,11 +6,12 @@ import Visa from './visa'
 import DinersClub from './diners-club'
 import Jcb from './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'>
       <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/cc-button.tsx

@@ -0,0 +1,17 @@
+import { Button } from '@hanzo/ui/primitives'
+
+import PaymentMethods from './cards'
+import type { PropsWithChildren } from 'react'
+
+const CCButton: React.FC<PropsWithChildren> = ({
+  children
+}) => (
+  <Button variant='outline' size='lg' className='flex items-center' >
+    <div className='font-sans text-base mr-2 text-muted'>CC</div>
+    <PaymentMethods />
+    {children}
+  </Button>
+)
+
+
+export default CCButton

package/components/checkout-panel/{payment → steps/payment}/contact-info.tsx

@@ -3,7 +3,6 @@ import {
   FormControl,
   FormField,
   FormItem,
-  FormLabel,
   FormMessage,
 } from '@hanzo/ui/primitives/form'
 import { Input } from '@hanzo/ui/primitives'
@@ -23,16 +22,16 @@ const ContactInfo: React.FC<{
   return (
     <Form {...form}>
       <form className='text-left'>
-        <div className='flex gap-1 sm:gap-2'>
+        <div className='flex flex-col gap-1 sm:gap-2'>
           <FormField
             control={form.control}
             name='name'
             render={({ field }) => (
-              <FormItem className='space-y-1 w-full'>
+              <FormItem className='w-full'>
                 <FormControl>
                   <Input {...field} className='border-muted-4' placeholder='Full name'/>
                 </FormControl>
-                <FormMessage />
+                <FormMessage className='py-0 space-y-0 !m-0'/>
               </FormItem>
             )}
           />
@@ -40,11 +39,11 @@ const ContactInfo: React.FC<{
             control={form.control}
             name='email'
             render={({ field }) => (
-              <FormItem className='space-y-1 w-full'>
+              <FormItem className='w-full'>
                 <FormControl>
                   <Input {...field} className='border-muted-4' placeholder='Email'/>
                 </FormControl>
-                <FormMessage />
+                <FormMessage className='py-0 space-y-0 !m-0'/>
               </FormItem>
             )}
           />

package/components/checkout-panel/{payment → steps/payment}/index.tsx

@@ -12,21 +12,20 @@ import { useAuth } from '@hanzo/auth/service'
 import PayWithCrypto from './pay-with-crypto'
 import PayWithBankTransfer from './pay-with-bank-transfer'
 import PayWithCard from './pay-with-card'
-import { useCommerce } from '../../../service/context'
-import type { TransactionStatus } from '../../../types'
-import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
+
+import { useCommerce } from '../../../../service/context'
+import type { TransactionStatus } from '../../../../types'
+import { sendFBEvent, sendGAEvent } from '../../../../util/analytics'
+
+import type { StepComponentProps } from '../types'
 
 const contactFormSchema = z.object({
   name: z.string().min(1, 'Enter your full name.'),
   email: z.string().email(),
 })
 
-const Payment: React.FC<{
-  setStep: (s: number) => void
-  orderId?: string
-  setOrderId: (orderId?: string) => void
-}> = observer(({
-  setStep,
+const Payment: React.FC<StepComponentProps> = observer(({
+  onDone,
   orderId,
   setOrderId
 }) => {
@@ -51,7 +50,7 @@ const Payment: React.FC<{
 
   const storePaymentInfo = async (paymentInfo: any) => {
     const {name, email} = contactForm.getValues()
-    let id
+    let id: string | undefined = undefined
     if (!orderId) {
       id = await cmmc.createOrder(email, name)
       setOrderId(id)
@@ -81,34 +80,41 @@ const Payment: React.FC<{
     }
   }
 
+  const groupClx = 'grid w-full grid-cols-3 mx-auto ' + 
+    'p-0 h-auto overflow-hidden ' + 
+    'border-2 bg-background border-level-2 md:bg-level-1 md:border-level-3 ' 
+
+  const tabClx = 'whitespace-normal h-full text-xs sm:text-base px-1 text-muted ' + 
+    'data-[state=active]:text-accent data-[state=active]:bg-level-2 md:data-[state=active]:bg-level-3'
+
   return (
-    <Tabs defaultValue='card' className='w-full mx-auto max-w-[50rem]'>
-      <TabsList className='grid w-full grid-cols-3 mx-auto bg-level-2 h-auto'>
+    <Tabs defaultValue='card' className='w-full sm:max-w-[500px] sm:mx-auto'>
+      <TabsList className={groupClx}>
         <TabsTrigger
           value='card'
-          className='whitespace-normal h-full text-xs sm:text-base px-1'
+          className={tabClx}
           disabled={transactionStatus === 'paid' || transactionStatus === 'confirmed'}
         >
-          Pay with card
+          Card
         </TabsTrigger>
         <TabsTrigger
           value='crypto'
-          className='whitespace-normal h-full text-xs sm:text-base px-1'
+          className={tabClx}
           disabled={transactionStatus === 'paid' || transactionStatus === 'confirmed'}
         >
-          Pay with Wallet
+          Wallet
         </TabsTrigger>
         <TabsTrigger
           value='bank'
-          className='whitespace-normal h-full text-xs sm:text-base px-1'
+          className={tabClx}
           disabled={transactionStatus === 'paid' || transactionStatus === 'confirmed'}
         >
-          Pay with Wire
+          Bank Wire
         </TabsTrigger>
       </TabsList>
       <TabsContent value='card'>
         <PayWithCard
-          setStep={setStep}
+          onDone={onDone}
           transactionStatus={transactionStatus}
           setTransactionStatus={setTransactionStatus}
           storePaymentInfo={storePaymentInfo}
@@ -117,7 +123,7 @@ const Payment: React.FC<{
       </TabsContent>
       <TabsContent value='crypto'>
         <PayWithCrypto
-          setStep={setStep}
+          onDone={onDone}
           transactionStatus={transactionStatus}
           setTransactionStatus={setTransactionStatus}
           storePaymentInfo={storePaymentInfo}
@@ -126,7 +132,7 @@ const Payment: React.FC<{
       </TabsContent>
       <TabsContent value='bank'>
         <PayWithBankTransfer
-          setStep={setStep}
+          onDone={onDone}
           storePaymentInfo={storePaymentInfo}
           contactForm={contactForm}
         />

package/components/checkout-panel/{payment → steps/payment}/pay-with-bank-transfer.tsx

@@ -35,7 +35,7 @@ const InfoField: React.FC<{
 }
 
 const PayWithBankTransfer: React.FC<{
-  setStep: (step: number) => void
+  onDone: () => void
   storePaymentInfo: (paymentInfo: any) => Promise<void>
   contactForm: UseFormReturn<{
     name: string
@@ -45,24 +45,28 @@ const PayWithBankTransfer: React.FC<{
     email: string
   }>
 }> = ({
-  setStep,
+  onDone,
   storePaymentInfo,
   contactForm
 }) => {
+
   const payByBankTransfer = async () => {
-    contactForm.handleSubmit(async () => {
+    contactForm.handleSubmit( async () => {
       await storePaymentInfo({paymentMethod: 'bank-transfer'})
-      setStep(2)
+      onDone()
     })()
   }
 
+  const groupClx = 'border-2 bg-background border-level-2 md:bg-level-1 md:border-level-3 p-0 h-auto overflow-hidden rounded-md'
+  const tabClx = 'text-muted data-[state=active]:text-accent data-[state=active]:bg-level-2 md:data-[state=active]:bg-level-3'
+
   return (
     <div className='flex flex-col gap-2 mt-6'>
       <ContactInfo form={contactForm}/>
       <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 className={"grid w-full grid-cols-2 max-w-[15rem] mx-auto " + groupClx}>
+          <TabsTrigger className={tabClx} value="usd">USD</TabsTrigger>
+          <TabsTrigger className={tabClx} value="eur">EUR/GBP</TabsTrigger>
         </TabsList>
         <TabsContent value="usd">
           <div className='flex flex-col gap-4 w-full'>