@luxfi/ui 5.3.11 → 5.3.13

package/components/commerce/checkout-panel/checkout-panel-props.ts

@@ -1,10 +1,10 @@
-interface CheckoutPanelProps {
-  step: number
-  stepNames: string[]
-  onLeave:() => void
-  clx?: string
-}
-
-export {
-  type CheckoutPanelProps as default 
+interface CheckoutPanelProps {
+  step: number
+  stepNames: string[]
+  onLeave:() => void
+  clx?: string
+}
+
+export {
+  type CheckoutPanelProps as default 
 }

package/components/commerce/checkout-panel/desktop-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/desktop-cp.tsx

@@ -1,83 +1,83 @@
-'use client'
-import React, { type PropsWithChildren } from 'react'
-import { observer } from 'mobx-react-lite'
-
-import { ScrollArea, StepIndicator } from '@hanzo/ui/primitives'
-import { AuthWidget } from '@hanzo/auth/components'
-import { CartPanel, useCommerce } from '@hanzo/commerce'
-import { cn } from '@hanzo/ui/util'
-
-import { BackButton, Logo, Tooltip } from '../..'
-import DesktopBagCarousel from './desktop-bag-carousel'
-import LinksRow from './policy-links'
-import type CheckoutPanelProps from './checkout-panel-props'
-
-const DesktopCheckoutPanel: React.FC<PropsWithChildren & CheckoutPanelProps> = observer(({
-  step,
-  stepNames,
-  onLeave,
-  clx='',
-  children
-}) => {
-
-  const cmmc = useCommerce()
-  return ( 
-    <div /* id='CHECKOUT_PANEL' */  className={cn('grid grid-cols-2',  clx)}>
-      <div key={1} className='w-full h-full bg-background flex flex-row items-start justify-end'>
-        <div className='w-full h-full max-w-[750px] relative flex flex-col items-stretch justify-start px-8 pb-8'>
-          <div key={1} className='h-[80px] grow-0 flex flex-row items-center z-10' >
-            <Logo size='md' href='/' onClick={onLeave} variant='text-only' outerClx='logo-outer-tooltip-class' />
-            <Tooltip select='.logo-outer-tooltip-class' text='home' position='right' offset={6}/>
-          </div>
-          <BackButton 
-            size='sm' 
-            clx={
-              'z-10 absolute top-14 left-6 !px-0 aspect-square ' + 
-              'rounded-full hover:!bg-level-3 ' + 
-              'back-button-tooltip-class '
-            }
-            onBack={onLeave}
-          />
-          <Tooltip  select='.back-button-tooltip-class' text='back' position='right' offset={5}/>
-          <div key={2} className={cn(
-            'w-full grow min-h-0 max-w-[550px] mx-auto flex flex-col gap-3',
-            (cmmc.cartItems.length > 4 ? 'justify-between' : 'justify-start gap-10 pt-10')
-          )}>
-            <DesktopBagCarousel className='grow-0 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-2' 
-              totalClx='sticky bottom-0 bg-background'
-              listClx='pr-3'
-              scrollAfter={4}
-              scrollHeightClx='min-h-[50vh] grow'
-              showPromoCode
-              showShipping
-              selectItems
-            />
-          </div>
-        </div>
-      </div>
-      <div key={2} 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 key={1} className='bg-level-1 sticky h-[80px] bg-[#aaaaff] w-full top-0 flex justify-center items-end'>
-              <AuthWidget noLogin className='hidden md:flex absolute top-4 right-4 '/>
-              <StepIndicator dotSizeRem={1.35} steps={stepNames} currentStep={step} className='gap-2 text-base w-pr-70' />
-            </div>
-            <div key={2} className='w-full max-w-[550px] mx-auto py-8'>
-              {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 clx='w-full' />
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-})
-
+'use client'
+import React, { type PropsWithChildren } from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { ScrollArea, StepIndicator } from '@hanzo/ui/primitives'
+import { AuthWidget } from '@hanzo/auth/components'
+import { CartPanel, useCommerce } from '@hanzo/commerce'
+import { cn } from '@hanzo/ui/util'
+
+import { BackButton, Logo, Tooltip } from '../..'
+import DesktopBagCarousel from './desktop-bag-carousel'
+import LinksRow from './policy-links'
+import type CheckoutPanelProps from './checkout-panel-props'
+
+const DesktopCheckoutPanel: React.FC<PropsWithChildren & CheckoutPanelProps> = observer(({
+  step,
+  stepNames,
+  onLeave,
+  clx='',
+  children
+}) => {
+
+  const cmmc = useCommerce()
+  return ( 
+    <div /* id='CHECKOUT_PANEL' */  className={cn('grid grid-cols-2',  clx)}>
+      <div key={1} className='w-full h-full bg-background flex flex-row items-start justify-end'>
+        <div className='w-full h-full max-w-[750px] relative flex flex-col items-stretch justify-start px-8 pb-8'>
+          <div key={1} className='h-[80px] grow-0 flex flex-row items-center z-10' >
+            <Logo size='md' href='/' onClick={onLeave} variant='text-only' outerClx='logo-outer-tooltip-class' />
+            <Tooltip select='.logo-outer-tooltip-class' text='home' position='right' offset={6}/>
+          </div>
+          <BackButton 
+            size='sm' 
+            clx={
+              'z-10 absolute top-14 left-6 !px-0 aspect-square ' + 
+              'rounded-full hover:!bg-level-3 ' + 
+              'back-button-tooltip-class '
+            }
+            onBack={onLeave}
+          />
+          <Tooltip  select='.back-button-tooltip-class' text='back' position='right' offset={5}/>
+          <div key={2} className={cn(
+            'w-full grow min-h-0 max-w-[550px] mx-auto flex flex-col gap-3',
+            (cmmc.cartItems.length > 4 ? 'justify-between' : 'justify-start gap-10 pt-10')
+          )}>
+            <DesktopBagCarousel className='grow-0 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-2' 
+              totalClx='sticky bottom-0 bg-background'
+              listClx='pr-3'
+              scrollAfter={4}
+              scrollHeightClx='min-h-[50vh] grow'
+              showPromoCode
+              showShipping
+              selectItems
+            />
+          </div>
+        </div>
+      </div>
+      <div key={2} 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 key={1} className='bg-level-1 sticky h-[80px] bg-[#aaaaff] w-full top-0 flex justify-center items-end'>
+              <AuthWidget noLogin className='hidden md:flex absolute top-4 right-4 '/>
+              <StepIndicator dotSizeRem={1.35} steps={stepNames} currentStep={step} className='gap-2 text-base w-pr-70' />
+            </div>
+            <div key={2} className='w-full max-w-[550px] mx-auto py-8'>
+              {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 clx='w-full' />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+})
+
 export default DesktopCheckoutPanel

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

@@ -1,126 +1,126 @@
-'use client'
-import React, { useLayoutEffect, 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 './desktop-cp'
-import MobileCP from './mobile-cp'
-
-const CheckoutPanel: React.FC<{
-  clx?: string
-}> = ({
-  clx=''
-}) => {
-
-  const cmmc = useCommerce()
-    
-    // For sites that don't initialize cmmc
-  if (!cmmc) {
-    console.log("CHECKOUT PANEL: cmmc svc undefined!")
-    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')
-  }
-  
-    // Determine if mobile or desktop layout based on visibility of desktopElement
-    // This prevents issues with multiple instances of 3rd party e-commerce widgets 
-    // from ever being in the DOM.
-    // https://stackoverflow.com/a/21696585/11378853
-  const desktopElement = useRef<HTMLDivElement | null>(null)
-  const [layout, setLayout] = useState<'mobile' | 'desktop' | undefined>(undefined)
-
-  useLayoutEffect(() => {
-    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 
-      clx={cn('h-full', clx, 'hidden md:flex')} 
-      onLeave={_close}
-      step={stepIndex}
-      stepNames={STEP_NAMES}
-    >
-      {/* Element required to determine if DesktopCP is visible. See above. */}
-      <div ref={desktopElement}/>
-      {layout === 'desktop' && <StepToRender onDone={() => {setStep('next')}} orderId={orderId} setOrderId={setOrderId}/>}
-    </DesktopCP>
-    <MobileCP 
-      clx={cn('w-full h-full overflow-y-auto', clx, 'md:hidden' )} 
-      onLeave={_close}
-      step={stepIndex}
-      stepNames={STEP_NAMES}
-    >
-      {layout === 'mobile' && <StepToRender onDone={() => {setStep('next')}} orderId={orderId} setOrderId={setOrderId}/>}
-    </MobileCP>
-  </>)
-}
-
-export default CheckoutPanel
+'use client'
+import React, { useLayoutEffect, 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 './desktop-cp'
+import MobileCP from './mobile-cp'
+
+const CheckoutPanel: React.FC<{
+  clx?: string
+}> = ({
+  clx=''
+}) => {
+
+  const cmmc = useCommerce()
+    
+    // For sites that don't initialize cmmc
+  if (!cmmc) {
+    console.log("CHECKOUT PANEL: cmmc svc undefined!")
+    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')
+  }
+  
+    // Determine if mobile or desktop layout based on visibility of desktopElement
+    // This prevents issues with multiple instances of 3rd party e-commerce widgets 
+    // from ever being in the DOM.
+    // https://stackoverflow.com/a/21696585/11378853
+  const desktopElement = useRef<HTMLDivElement | null>(null)
+  const [layout, setLayout] = useState<'mobile' | 'desktop' | undefined>(undefined)
+
+  useLayoutEffect(() => {
+    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 
+      clx={cn('h-full', clx, 'hidden md:flex')} 
+      onLeave={_close}
+      step={stepIndex}
+      stepNames={STEP_NAMES}
+    >
+      {/* Element required to determine if DesktopCP is visible. See above. */}
+      <div ref={desktopElement}/>
+      {layout === 'desktop' && <StepToRender onDone={() => {setStep('next')}} orderId={orderId} setOrderId={setOrderId}/>}
+    </DesktopCP>
+    <MobileCP 
+      clx={cn('w-full h-full overflow-y-auto', clx, 'md:hidden' )} 
+      onLeave={_close}
+      step={stepIndex}
+      stepNames={STEP_NAMES}
+    >
+      {layout === 'mobile' && <StepToRender onDone={() => {setStep('next')}} orderId={orderId} setOrderId={setOrderId}/>}
+    </MobileCP>
+  </>)
+}
+
+export default CheckoutPanel

package/components/commerce/checkout-panel/mobile-cp.tsx

@@ -1,67 +1,67 @@
-'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 { BackButton, Logo } from '../..'
-import BagButton from '../bag-button'
-import PolicyLinks from './policy-links'
-import CartAccordian from './cart-accordian'
-import type CheckoutPanelProps from './checkout-panel-props'
-
-
-const MobileCheckoutPanel: React.FC<PropsWithChildren & CheckoutPanelProps> = ({
-  step,
-  stepNames,
-  onLeave,
-  clx='',
-  children
-}) => (
-
-  <div /* id='MOBILE_GRID' */ className={cn('bg-background flex flex-col justify-start px-4 pt-[101px]', clx)}>
-    <div className='fixed z-11 top-0 h-[45px] w-full flex justify-between items-stretch bg-background'>
-      <div className='flex items-stretch gap-1 grow-0'>
-        <BackButton 
-          size='sm' 
-          clx={
-            '-ml-5 !px-0 aspect-square h-full ' + 
-            'rounded-full active:!bg-level-3 ' 
-          }
-          onBack={onLeave}
-        />
-        <Logo size='xs' variant='text-only' href='/' onClick={onLeave} outerClx='-ml-2'/>
-      </div>
-      <StepIndicator 
-        dotSizeRem={1} 
-        steps={stepNames} 
-        currentStep={step} 
-        className='relative grow mx-2 top-[14px] text-xs font-semibold w-full' 
-      />
-
-      {/* 72px by observation (for centering).  Need wrapper div since 'noLogin' returns null if no logged in user */}
-      <div className='w-[72px] grow-0 shrink-0 flex items-center justify-center'><AuthWidget noLogin className=''/></div>
-    </div>
-    <CartAccordian 
-      icon={
-        <BagButton 
-          animateOnHover={false} 
-          showIfEmpty 
-          size='sm'
-          className='mr-1 relative w-5 h-6 sm:w-6 sm:h-7'
-          iconClx='fill-foreground'
-        />
-      } 
-      clx='flex items-center justify-center w-full'
-      triggerClx='bg-background fixed z-11 top-[45px] left-0 right-0 !m-0 px-4'
-      panelClx='!py-0'
-      scrollAfter={3}
-      scrollHeightClx='h-[385px]' 
-    />
-    {children}
-    <PolicyLinks clx='mt-auto mb-3 pt-2' />
-  </div>
-)
-
+'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 { BackButton, Logo } from '../..'
+import BagButton from '../bag-button'
+import PolicyLinks from './policy-links'
+import CartAccordian from './cart-accordian'
+import type CheckoutPanelProps from './checkout-panel-props'
+
+
+const MobileCheckoutPanel: React.FC<PropsWithChildren & CheckoutPanelProps> = ({
+  step,
+  stepNames,
+  onLeave,
+  clx='',
+  children
+}) => (
+
+  <div /* id='MOBILE_GRID' */ className={cn('bg-background flex flex-col justify-start px-4 pt-[101px]', clx)}>
+    <div className='fixed z-11 top-0 h-[45px] w-full flex justify-between items-stretch bg-background'>
+      <div className='flex items-stretch gap-1 grow-0'>
+        <BackButton 
+          size='sm' 
+          clx={
+            '-ml-5 !px-0 aspect-square h-full ' + 
+            'rounded-full active:!bg-level-3 ' 
+          }
+          onBack={onLeave}
+        />
+        <Logo size='xs' variant='text-only' href='/' onClick={onLeave} outerClx='-ml-2'/>
+      </div>
+      <StepIndicator 
+        dotSizeRem={1} 
+        steps={stepNames} 
+        currentStep={step} 
+        className='relative grow mx-2 top-[14px] text-xs font-semibold w-full' 
+      />
+
+      {/* 72px by observation (for centering).  Need wrapper div since 'noLogin' returns null if no logged in user */}
+      <div className='w-[72px] grow-0 shrink-0 flex items-center justify-center'><AuthWidget noLogin className=''/></div>
+    </div>
+    <CartAccordian 
+      icon={
+        <BagButton 
+          animateOnHover={false} 
+          showIfEmpty 
+          size='sm'
+          className='mr-1 relative w-5 h-6 sm:w-6 sm:h-7'
+          iconClx='fill-foreground'
+        />
+      } 
+      clx='flex items-center justify-center w-full'
+      triggerClx='bg-background fixed z-11 top-[45px] left-0 right-0 !m-0 px-4'
+      panelClx='!py-0'
+      scrollAfter={3}
+      scrollHeightClx='h-[385px]' 
+    />
+    {children}
+    <PolicyLinks clx='mt-auto mb-3 pt-2' />
+  </div>
+)
+
 export default MobileCheckoutPanel