@luxfi/core 5.1.4 → 5.1.6

package/components/commerce/checkout-button.tsx

@@ -1,116 +1,129 @@
-'use client'
-import React, { useEffect, useRef } from 'react'
-import { observable, type IObservableValue, reaction } from 'mobx'
-import { observer } from 'mobx-react-lite'
-import { type LucideProps } from 'lucide-react'
-
-import { Button, type ButtonProps } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-import { useCommerce } from '@hanzo/commerce'
-
-import * as Icons from '../icons'
-
-const IconAndQuantity: React.FC<{
-  animateOnQuantityChange?: boolean
-  clx?: string
-  iconClx?: string
-  digitClx?: string
-}> = observer(({
-  animateOnQuantityChange=true,
-  clx='',
-  iconClx='',
-  digitClx=''
-}) => {
-
-  const cmmc = useCommerce()
-  const wiggleRef = useRef<IObservableValue<'more' | 'less' | 'none'>>(observable.box('none'))
-
-  useEffect(() => (
-      // return IReactionDisposer
-    animateOnQuantityChange ? reaction(
-      () => (cmmc.cartQuantity),
-      (curr, prev) => {
-        if (curr > prev) {
-          wiggleRef.current.set('more')   
-        }
-        else {
-          wiggleRef.current.set('less')   
-        }    
-        setTimeout(() => {
-            // Note that this doesn't actually stop the animation
-            // just resets the styles
-          wiggleRef.current.set('none')   
-        }, 800)
-      }
-    ) : undefined
-  ), [])
-
-  return (
-    <div className={cn('flex items-center justify-center', clx)}>
-      <div className={cn(
-        'relative flex items-center justify-center mr-1', 
-        ((wiggleRef.current.get() === 'more') ? 
-          'item-added-to-cart-animation' 
-          : 
-          (wiggleRef.current.get() === 'less') ? 'item-removed-from-cart-animation' : ''), 
-      )} >
-        {cmmc.cartQuantity > 0 && (
-        <div className={cn(
-          'z-above-content flex flex-col justify-center items-center',
-          'absolute left-0 right-0 top-0 bottom-0',
-          digitClx
-        )}>
-          <div style={{color: 'white' /* tailwind bug? */, fontSize: '11px', position: 'relative', top: '1px' }}>{cmmc.cartQuantity}</div>
-        </div>
-        )}
-        <Icons.bag width='19' height='24' className={cn('relative -top-[3px] opacity-70' , iconClx)} aria-hidden="true" />
-      </div>            
-      <span style={{fontSize: '17px',}}>&rsaquo;</span>
-    </div>
-  )
-})  
-
-const CheckoutButton: React.FC<ButtonProps & {
-  handleCheckout: () => void
-  showQuantity?: boolean
-  animateOnQuantityChange?: boolean
-  centerText?: boolean
-}> = ({
-  handleCheckout,
-  variant='primary',
-  rounded='lg',
-  className,
-  showQuantity=true,
-  animateOnQuantityChange=true,
-  centerText=true,
-  ...rest
-}) => {
-
-  return (
-    <Button 
-      {...rest}
-      onClick={handleCheckout} 
-      variant={variant}
-      rounded={rounded}
-      className={cn(
-        className, 
-        'flex justify-between items-stretch', 
-        showQuantity ? (centerText ? 'px-1.5' : 'pl-2.5 pr-1.5') : ''
-      )}
-    >
-      {showQuantity && centerText && (
-        <IconAndQuantity clx='invisible' />
-      )}
-      <div className='flex justify-center items-center'>Checkout</div>
-      {showQuantity && (
-        <IconAndQuantity 
-          animateOnQuantityChange={animateOnQuantityChange}
-          iconClx='fill-fg-foreground'
-          digitClx='text-primary-fg leading-none font-bold font-sans' 
-        />
-      )}
-    </Button>
-  )
-}
-
-export default CheckoutButton
+'use client'
+import React, { useEffect, useRef } from 'react'
+import { observable, type IObservableValue, reaction, runInAction } from 'mobx'
+import { observer } from 'mobx-react-lite'
+
+import { Button, type ButtonProps } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+import { useCommerce } from '@hanzo/commerce'
+
+import * as Icons from '../icons'
+
+const IconAndQuantity: React.FC<{
+  animateOnQuantityChange?: boolean
+  showArrow?: boolean
+  showQuantity?: boolean
+  clx?: string
+  iconClx?: string
+  digitClx?: string
+}> = observer(({
+  animateOnQuantityChange=false,
+  showArrow=true,
+  showQuantity=true,
+  clx='',
+  iconClx='',
+  digitClx=''
+}) => {
+
+  const cmmc = useCommerce()
+  const wiggleRef = useRef<IObservableValue<'more' | 'less' | 'none'>>(observable.box('none'))
+
+  useEffect(() => (
+      // return IReactionDisposer
+    animateOnQuantityChange ? reaction(
+      () => (cmmc.cartQuantity),
+      (curr, prev) => {
+        if (curr > prev) {
+          runInAction(() => {wiggleRef.current.set('more') })  
+        }
+        else {
+          runInAction(() => {wiggleRef.current.set('less')  })  
+        }    
+        setTimeout(() => {
+            // Note that this doesn't actually stop the animation
+            // just resets the styles
+          runInAction(() => {wiggleRef.current.set('none') })   
+        }, 800)
+      }
+    ) : undefined
+  ), [])
+
+  return (
+    <div className={cn('flex items-center justify-center', clx)}>
+    {showQuantity && (
+      <div className={cn(
+        'relative flex items-center justify-center mr-1', 
+        ((wiggleRef.current.get() === 'more') ? 
+          'item-added-to-cart-animation' 
+          : 
+          (wiggleRef.current.get() === 'less') ? 'item-removed-from-cart-animation' : ''), 
+      )} >
+        {cmmc.cartQuantity > 0 && (
+        <div className={cn(
+          'z-above-content flex flex-col justify-center items-center',
+          'absolute left-0 right-0 top-0 bottom-0',
+          digitClx
+        )}>
+          <div style={{/* color: 'white'  tailwind bug? ,*/ fontSize: '11px', position: 'relative', top: '1px' }}>{cmmc.cartQuantity}</div>
+        </div>
+        )}
+        <Icons.bag width='19' height='24' className={cn('relative -top-[3px] opacity-70' , iconClx)} aria-hidden="true" />
+      </div>            
+    )}
+      {showArrow && (<span style={{fontSize: '17px',}}>&rsaquo;</span>)}
+    </div>
+  )
+})  
+
+const CheckoutButton: React.FC<ButtonProps & {
+  handleCheckout: () => void
+  showQuantity?: boolean
+  showArrow?: boolean
+  animateOnQuantityChange?: boolean
+  centerText?: boolean
+}> = ({
+  handleCheckout,
+  variant='primary',
+  rounded='lg',
+  className,
+  showQuantity=true,
+  showArrow=true,
+  animateOnQuantityChange=true,
+  centerText=true,
+  children,
+  ...rest
+}) => {
+
+  return (
+    <Button 
+      {...rest}
+      onClick={handleCheckout} 
+      variant={variant}
+      rounded={rounded}
+      className={cn(
+        'flex justify-between items-stretch group', 
+        showQuantity ? (centerText ? 'px-1.5' : 'pl-2.5 pr-1.5') : '',
+        className, 
+      )}
+    >
+      {centerText && ( // must scale this one too, as it effects layout
+        <IconAndQuantity 
+          showArrow={showArrow} 
+          showQuantity={showQuantity}
+          clx='invisible group-hover:scale-105 transition-scale transition-duration-300'
+        />
+      )}
+      {children ?? (<div className='flex justify-center items-center'>Checkout</div>)}
+      <IconAndQuantity 
+        clx='group-hover:scale-105 transition-scale transition-duration-300'
+        animateOnQuantityChange={animateOnQuantityChange}
+        showArrow={showArrow} 
+        showQuantity={showQuantity}
+        iconClx='fill-background'
+        digitClx='text-foreground group-hover:opacity-80 leading-none font-bold font-sans' 
+      />
+    </Button>
+  )
+}
+
+export default CheckoutButton

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

@@ -1,26 +1,26 @@
-'use client'
-import React from 'react'
-
-import { cn } from '@hanzo/ui/util'
-
-import Logo from '../../logo'
-import type { TShirtSize } from '@hanzo/ui/types'
-
-const CloseButton: React.FC<{
-  close: () => void
-  size?: TShirtSize 
-  className?: string
-}> = ({
-  close,
-  size,
-  className=''
-}) => (
-  <div
-    onClick={close}
-    className={cn('md:self-start', className)}
-  >
-    <Logo layout='text-only' href='/' size={size}/>
-  </div>    
-)
-
-export default CloseButton
+'use client'
+import React from 'react'
+
+import { cn } from '@hanzo/ui/util'
+
+import Logo from '../../logo'
+import type { TShirtSize } from '@hanzo/ui/types'
+
+const CloseButton: React.FC<{
+  close: () => void
+  size?: TShirtSize 
+  className?: string
+}> = ({
+  close,
+  size,
+  className=''
+}) => (
+  <div
+    onClick={close}
+    className={cn('md:self-start', className)}
+  >
+    <Logo layout='text-only' href='/' size={size}/>
+  </div>    
+)
+
+export default CloseButton

package/components/commerce/checkout-panel/dt-bag-carousel.tsx

@@ -1,36 +1,36 @@
-'use client'
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import { 
-  useCommerce, 
-  CarouselItemSelector, 
-  type CarouselItemSelectorPropsExt 
-} from '@hanzo/commerce'
-
-const DesktopBagCarousel: React.FC<{
-  constrainTo: {w: number, h: number}
-  className?: string
-}> = observer(({
-  constrainTo,
-  className=''
-  
-}) => {
-  const cmmc = useCommerce()
-  return (
-    <CarouselItemSelector 
-      items={cmmc.cartItems} 
-      selectedItemRef={cmmc}
-      scrollable={false} // ignored
-      selectSku={cmmc.setCurrentItem.bind(cmmc)}
-      clx={className}
-      ext={{
-        options: {loop: true},  
-        constrainTo,  
-        imageOnly: true
-      } satisfies CarouselItemSelectorPropsExt}
-    />
-  )
-})
-
-export default DesktopBagCarousel
+'use client'
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { 
+  useCommerce, 
+  CarouselItemSelector, 
+  type CarouselItemSelectorPropsExt 
+} from '@hanzo/commerce'
+
+const DesktopBagCarousel: React.FC<{
+  constrainTo: {w: number, h: number}
+  className?: string
+}> = observer(({
+  constrainTo,
+  className=''
+  
+}) => {
+  const cmmc = useCommerce()
+  return (
+    <CarouselItemSelector 
+      items={cmmc.cartItems} 
+      selectedItemRef={cmmc}
+      scrollable={false} // ignored
+      selectSku={cmmc.setCurrentItem.bind(cmmc)}
+      clx={className}
+      ext={{
+        options: {loop: true},  
+        constrainTo,  
+        imageOnly: true
+      } satisfies CarouselItemSelectorPropsExt}
+    />
+  )
+})
+
+export default DesktopBagCarousel

package/components/commerce/checkout-panel/dt-checkout-panel.tsx

@@ -1,67 +1,67 @@
-'use client'
-import React, { type PropsWithChildren } from 'react'
-
-import { ScrollArea, StepIndicator } from '@hanzo/ui/primitives'
-import { AuthWidget } from '@hanzo/auth/components'
-import { CartPanel } from '@hanzo/commerce'
-
-import * as Icons from '../../icons'
-import DesktopBagCarousel from './dt-bag-carousel'
-import CloseButton from './close-button'
-import { cn } from '@hanzo/ui/util'
-import LinksRow from './links-row'
-
-const DesktopCheckoutPanel: React.FC<PropsWithChildren & {
-  index: number
-  stepNames: string[]
-  close:() => void
-  className?: string
-}> = ({
-  index,
-  stepNames,
-  close,
-  className='',
-  children
-}) => ( 
-
-  <div /* id='CHECKOUT_PANEL' */  className={cn('grid grid-cols-2',  className)}>
-    <div className='w-full h-full bg-background flex flex-row items-start justify-end'>
-      <div className='w-full max-w-[750px] relative flex flex-col items-center justify-start p-8'>
-        <CloseButton close={close} size='md'/>
-        <div className='w-full max-w-[550px] mx-auto flex flex-col gap-3'>
-          <DesktopBagCarousel className='h-[260px] w-[360px] lg:w-[420px] mx-auto -mt-8' constrainTo={{w: 250, h: 250}}/>
-          <CartPanel 
-            className='w-full border-none p-0' 
-            itemClx='mb-3' 
-            totalClx='sticky -bottom-1 p-1 bg-background'
-            listClx='pr-3'
-            scrollAfter={5}
-            scrollHeightClx='h-[50vh]'
-            showPromoCode
-            showShipping
-          />
-        </div>
-      </div>
-    </div>
-    <div className='w-full h-full flex flex-col bg-level-1 min-h-screen justify-between'>
-      <ScrollArea className='w-full 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 px-8 pt-0'>
-          <div className='bg-level-1 sticky h-30 pb-8 w-full top-0 flex justify-center items-end'>
-            <AuthWidget noLogin className='hidden md:flex absolute top-4 right-4 '/>
-            <StepIndicator dotSizeRem={1.5} steps={stepNames} currentStep={index} className='gap-2 text-base w-pr-70' />
-          </div>
-          <div className='w-full max-w-[550px] mx-auto pb-10'>
-            {children}
-          </div>
-        </div>
-      </ScrollArea>
-      <div className='w-full max-w-[750px] relative flex flex-col items-center px-8 pt-0'>
-        <div className='w-full max-w-[550px] mx-auto flex flex-col items-center'>
-          <LinksRow className='w-full' />
-        </div>
-      </div>
-    </div>
-  </div>
-)
-
+'use client'
+import React, { type PropsWithChildren } from 'react'
+
+import { ScrollArea, StepIndicator } from '@hanzo/ui/primitives'
+import { AuthWidget } from '@hanzo/auth/components'
+import { CartPanel } from '@hanzo/commerce'
+
+import * as Icons from '../../icons'
+import DesktopBagCarousel from './dt-bag-carousel'
+import CloseButton from './close-button'
+import { cn } from '@hanzo/ui/util'
+import LinksRow from './links-row'
+
+const DesktopCheckoutPanel: React.FC<PropsWithChildren & {
+  index: number
+  stepNames: string[]
+  close:() => void
+  className?: string
+}> = ({
+  index,
+  stepNames,
+  close,
+  className='',
+  children
+}) => ( 
+
+  <div /* id='CHECKOUT_PANEL' */  className={cn('grid grid-cols-2',  className)}>
+    <div className='w-full h-full bg-background flex flex-row items-start justify-end'>
+      <div className='w-full max-w-[750px] relative flex flex-col items-center justify-start p-8'>
+        <CloseButton close={close} size='md'/>
+        <div className='w-full max-w-[550px] mx-auto flex flex-col gap-3'>
+          <DesktopBagCarousel className='h-[260px] w-[360px] lg:w-[420px] mx-auto -mt-8' constrainTo={{w: 250, h: 250}}/>
+          <CartPanel 
+            className='w-full border-none p-0' 
+            itemClx='mb-3' 
+            totalClx='sticky -bottom-1 p-1 bg-background'
+            listClx='pr-3'
+            scrollAfter={5}
+            scrollHeightClx='h-[50vh]'
+            showPromoCode
+            showShipping
+          />
+        </div>
+      </div>
+    </div>
+    <div className='w-full h-full flex flex-col bg-level-1 min-h-screen justify-between'>
+      <ScrollArea className='w-full 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 px-8 pt-0'>
+          <div className='bg-level-1 sticky h-30 pb-8 w-full top-0 flex justify-center items-end'>
+            <AuthWidget noLogin className='hidden md:flex absolute top-4 right-4 '/>
+            <StepIndicator dotSizeRem={1.5} steps={stepNames} currentStep={index} className='gap-2 text-base w-pr-70' />
+          </div>
+          <div className='w-full max-w-[550px] mx-auto pb-10'>
+            {children}
+          </div>
+        </div>
+      </ScrollArea>
+      <div className='w-full max-w-[750px] relative flex flex-col items-center px-8 pt-0'>
+        <div className='w-full max-w-[550px] mx-auto flex flex-col items-center'>
+          <LinksRow className='w-full' />
+        </div>
+      </div>
+    </div>
+  </div>
+)
+
 export default DesktopCheckoutPanel