@luxfi/core 4.4.14 → 4.4.16

package/components/commerce/bag-button.tsx

@@ -1,67 +1,67 @@
-'use client'
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import { buttonVariants, type ButtonSizes } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-import { useCommerce } from '@hanzo/commerce'
-
-import * as Icons from '../icons'
-
-const BagButton: React.FC<{
-  showIfEmpty?: boolean  
-  noHoverEffects?: boolean
-  size?: ButtonSizes
-  className?: string
-  iconClx?: string
-  onClick?: () => void
-}> = observer(({
-  showIfEmpty=false,
-  noHoverEffects=false,
-  size='default',
-  className='',
-  iconClx='',
-  onClick
-}) => {
-
-  const c = useCommerce()
-
-    // undefined means context is not installed, ie commerce functions are not in use
-  if (!c || (!showIfEmpty && c.cartEmpty)) {
-    return <div /> // trigger code needs non-null 
-  }
-
-  return (
-    <div
-      aria-label="Bag"
-      role='button'
-      onClick={onClick}
-      className={cn(
-        buttonVariants({ variant: 'ghost', size, rounded: 'md' }),
-          // Overides the bg change on hover --not a "hover effect" 
-        'relative group p-0 aspect-square hover:bg-background', 
-        className
-      )}
-    >
-    {!c.cartEmpty && (
-      <div className={
-        'z-above-content flex flex-col justify-center items-center  ' +
-        'absolute left-0 right-0 top-0 bottom-0 ' + 
-        'leading-none font-sans font-bold text-primary-fg text-xs ' 
-      }>
-        <div className='h-[3px] w-full' />
-        <div>{c.cartQuantity}</div>
-      </div>
-    )}
-      <Icons.bag className={cn(
-        'relative -top-[3px] fill-primary w-6 h-7 ',
-        iconClx,
-        (noHoverEffects ? '' : (
-          'group-hover:fill-primary-hover group-hover:scale-105 transition-scale transition-duration-300'
-        )) 
-      )} aria-hidden="true" />
-    </div>            
-  )
-})
-
-export default BagButton
+'use client'
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { buttonVariants, type ButtonSizes } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+import { useCommerce } from '@hanzo/commerce'
+
+import * as Icons from '../icons'
+
+const BagButton: React.FC<{
+  showIfEmpty?: boolean  
+  noHoverEffects?: boolean
+  size?: ButtonSizes
+  className?: string
+  iconClx?: string
+  onClick?: () => void
+}> = observer(({
+  showIfEmpty=false,
+  noHoverEffects=false,
+  size='default',
+  className='',
+  iconClx='',
+  onClick
+}) => {
+
+  const c = useCommerce()
+
+    // undefined means context is not installed, ie commerce functions are not in use
+  if (!c || (!showIfEmpty && c.cartEmpty)) {
+    return <div /> // trigger code needs non-null 
+  }
+
+  return (
+    <div
+      aria-label="Bag"
+      role='button'
+      onClick={onClick}
+      className={cn(
+        buttonVariants({ variant: 'ghost', size, rounded: 'md' }),
+          // Overides the bg change on hover --not a "hover effect" 
+        'relative group p-0 aspect-square hover:bg-background', 
+        className
+      )}
+    >
+    {!c.cartEmpty && (
+      <div className={
+        'z-above-content flex flex-col justify-center items-center  ' +
+        'absolute left-0 right-0 top-0 bottom-0 ' + 
+        'leading-none font-sans font-bold text-primary-fg text-xs ' 
+      }>
+        <div className='h-[3px] w-full' />
+        <div>{c.cartQuantity}</div>
+      </div>
+    )}
+      <Icons.bag className={cn(
+        'relative -top-[3px] fill-primary w-6 h-7 ',
+        iconClx,
+        (noHoverEffects ? '' : (
+          'group-hover:fill-primary-hover group-hover:scale-105 transition-scale transition-duration-300'
+        )) 
+      )} aria-hidden="true" />
+    </div>            
+  )
+})
+
+export default BagButton

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

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

@@ -1,124 +1,124 @@
-'use client'
-import React, { useEffect, useRef, useState }  from 'react'
-
-import { capitalize, cn } from '@hanzo/ui/util'
-
-import { useCommerce, ShippingStepForm, PaymentStepForm } from '@hanzo/commerce'
-import type { CheckoutStep } from '@hanzo/commerce/types'
-
-import ThankYou from './thank-you'
-
-const STEPS = [
-  {
-    name: 'payment',
-    Comp: PaymentStepForm
-  }, 
-  {
-    name: 'delivery',
-    Comp: ShippingStepForm
-  }, 
-  {
-    name: 'done',
-    label: 'Done!',
-    Comp: ThankYou
-  }
-] satisfies CheckoutStep[]
-
-const STEP_NAMES = STEPS.map((s) => (s.label ? s.label : capitalize(s.name)))
-
-import DesktopCP from './dt-checkout-panel'
-import MobileCP from './mb-checkout-panel'
-
-const CheckoutPanel: React.FC<{
-  close: () => void
-  className?: string
-}> = ({
-  close,
-  className=''
-}) => {
-
-  const cmmc = useCommerce()
-    
-    // For sites that don't initialize cmmc
-  if (!cmmc) {
-    return <></>
-  }
-  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 => {
-
-    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 _close = () => {
-    setStep('first')
-    close()
-  }
-  
-  // Determine if mobile or desktop based on visibility of desktopElement
-  // https://stackoverflow.com/a/21696585/11378853
-  const desktopElement = useRef<HTMLDivElement | null>(null)
-  const [layout, setLayout] = useState<'mobile' | 'desktop' | undefined>()
-  useEffect(() => {
-    const checkLayout = () => {
-      setLayout(!!desktopElement.current?.offsetParent ? 'desktop' : 'mobile')
-    }
-
-    // initial layout check
-    checkLayout()
-    
-    window.addEventListener('resize', checkLayout)
-    return () => {
-      window.removeEventListener('resize', checkLayout)
-    }
-  }, [])
-
-  const StepToRender = STEPS[stepIndex].Comp  
-
-  return (<>
-    <DesktopCP 
-      className={cn('h-full', className, 'hidden md:flex')} 
-      close={_close}
-      index={stepIndex}
-      stepNames={STEP_NAMES}
-    >
-      {/* Element required to determine if DesktopCP is visible */}
-      <div ref={desktopElement}/>
-      {layout === 'desktop' && <StepToRender onDone={() => {setStep('next')}} orderId={orderId} setOrderId={setOrderId}/>}
-    </DesktopCP>
-    <MobileCP 
-      className={cn('h-full overflow-y-auto', className, 'md:hidden' )} 
-      close={_close}
-      index={stepIndex}
-      stepNames={STEP_NAMES}
-    >
-      {layout === 'mobile' && <StepToRender onDone={() => {setStep('next')}} orderId={orderId} setOrderId={setOrderId}/>}
-    </MobileCP>
-  </>)
-}
-
+'use client'
+import React, { useEffect, useRef, useState }  from 'react'
+
+import { capitalize, cn } from '@hanzo/ui/util'
+
+import { useCommerce, ShippingStepForm, PaymentStepForm } from '@hanzo/commerce'
+import type { CheckoutStep } from '@hanzo/commerce/types'
+
+import ThankYou from './thank-you'
+
+const STEPS = [
+  {
+    name: 'payment',
+    Comp: PaymentStepForm
+  }, 
+  {
+    name: 'delivery',
+    Comp: ShippingStepForm
+  }, 
+  {
+    name: 'done',
+    label: 'Done!',
+    Comp: ThankYou
+  }
+] satisfies CheckoutStep[]
+
+const STEP_NAMES = STEPS.map((s) => (s.label ? s.label : capitalize(s.name)))
+
+import DesktopCP from './dt-checkout-panel'
+import MobileCP from './mb-checkout-panel'
+
+const CheckoutPanel: React.FC<{
+  close: () => void
+  className?: string
+}> = ({
+  close,
+  className=''
+}) => {
+
+  const cmmc = useCommerce()
+    
+    // For sites that don't initialize cmmc
+  if (!cmmc) {
+    return <></>
+  }
+  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 => {
+
+    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 _close = () => {
+    setStep('first')
+    close()
+  }
+  
+  // Determine if mobile or desktop based on visibility of desktopElement
+  // https://stackoverflow.com/a/21696585/11378853
+  const desktopElement = useRef<HTMLDivElement | null>(null)
+  const [layout, setLayout] = useState<'mobile' | 'desktop' | undefined>()
+  useEffect(() => {
+    const checkLayout = () => {
+      setLayout(!!desktopElement.current?.offsetParent ? 'desktop' : 'mobile')
+    }
+
+    // initial layout check
+    checkLayout()
+    
+    window.addEventListener('resize', checkLayout)
+    return () => {
+      window.removeEventListener('resize', checkLayout)
+    }
+  }, [])
+
+  const StepToRender = STEPS[stepIndex].Comp  
+
+  return (<>
+    <DesktopCP 
+      className={cn('h-full', className, 'hidden md:flex')} 
+      close={_close}
+      index={stepIndex}
+      stepNames={STEP_NAMES}
+    >
+      {/* Element required to determine if DesktopCP is visible */}
+      <div ref={desktopElement}/>
+      {layout === 'desktop' && <StepToRender onDone={() => {setStep('next')}} orderId={orderId} setOrderId={setOrderId}/>}
+    </DesktopCP>
+    <MobileCP 
+      className={cn('h-full overflow-y-auto', className, 'md:hidden' )} 
+      close={_close}
+      index={stepIndex}
+      stepNames={STEP_NAMES}
+    >
+      {layout === 'mobile' && <StepToRender onDone={() => {setStep('next')}} orderId={orderId} setOrderId={setOrderId}/>}
+    </MobileCP>
+  </>)
+}
+
 export default CheckoutPanel