@luxfi/core 4.4.10 → 4.4.12

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

package/components/commerce/checkout-panel/links-row.tsx

@@ -1,21 +1,21 @@
-import Link from 'next/link'
-
-import { Separator } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
-const LinksRow: React.FC<{
-  className?: string
-}> = ({
-  className=''
-}) => (
-  <div className={cn('flex flex-col', className)}>
-    <Separator/>
-    <div className='flex gap-4 text-sm py-2'>
-      {/* TODO: add Refund policy and Privacy policy links */}
-      <Link href=''>Refund policy</Link>
-      <Link href=''>Privacy policy</Link>
-    </div>
-  </div>   
-)
-
-export default LinksRow
+import Link from 'next/link'
+
+import { Separator } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+
+const LinksRow: React.FC<{
+  className?: string
+}> = ({
+  className=''
+}) => (
+  <div className={cn('flex flex-col', className)}>
+    <Separator/>
+    <div className='flex gap-4 text-sm py-2'>
+      {/* TODO: add Refund policy and Privacy policy links */}
+      <Link href=''>Refund policy</Link>
+      <Link href=''>Privacy policy</Link>
+    </div>
+  </div>   
+)
+
+export default LinksRow

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

@@ -1,56 +1,56 @@
-'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 { CartAccordian } from '@hanzo/commerce'
-
-import CloseButton from './close-button'
-import BagButton from '../bag-button'
-import LinksRow from './links-row'
-
-const MobileCheckoutPanel: 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-center bg-background'>
-      <CloseButton close={close} size='xs' />
-      {/* 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 
-      icon={
-        <BagButton 
-          noHoverEffects 
-          showIfEmpty 
-          size='sm'
-          className=
-          'mr-1 relative w-5 h-6 sm:w-6 sm:h-7 '
-          iconClx='fill-foreground '
-        />
-      } 
-      className='flex items-center justify-center w-full' 
-    />
-    <StepIndicator 
-      dotSizeRem={1} 
-      steps={stepNames} 
-      currentStep={index} 
-      className='text-xs font-semibold w-full pb-3' 
-    />
-    {children}
-    <LinksRow className='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 { CartAccordian } from '@hanzo/commerce'
+
+import CloseButton from './close-button'
+import BagButton from '../bag-button'
+import LinksRow from './links-row'
+
+const MobileCheckoutPanel: 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-center bg-background'>
+      <CloseButton close={close} size='xs' />
+      {/* 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 
+      icon={
+        <BagButton 
+          noHoverEffects 
+          showIfEmpty 
+          size='sm'
+          className=
+          'mr-1 relative w-5 h-6 sm:w-6 sm:h-7 '
+          iconClx='fill-foreground '
+        />
+      } 
+      className='flex items-center justify-center w-full' 
+    />
+    <StepIndicator 
+      dotSizeRem={1} 
+      steps={stepNames} 
+      currentStep={index} 
+      className='text-xs font-semibold w-full pb-3' 
+    />
+    {children}
+    <LinksRow className='mt-auto mb-3 pt-2' />
+  </div>
+)
+
 export default MobileCheckoutPanel

package/components/commerce/checkout-panel/steps-indicator.tsx

@@ -1,39 +1,39 @@
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbSeparator
-} from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
-const StepsIndicator: React.FC<{
-  currentStep: number
-  stepNames: string[]
-  className?: string
-}> = ({
-  currentStep,
-  stepNames,
-  className=''
-}) => (
-  <Breadcrumb className={className}>
-    <BreadcrumbList>
-      {stepNames.map((name, i) => (
-        <>
-          <BreadcrumbItem key={`item-${i}`}>
-            <BreadcrumbLink className={cn(
-                currentStep >= i ? '!text-foreground hover:text-foreground' : 'hover:text-muted-2',
-                'text-xxs sm:text-sm'  
-              )}
-            >
-              {name}
-            </BreadcrumbLink>
-          </BreadcrumbItem>
-          {i !== stepNames.length - 1 && <BreadcrumbSeparator  key={`sep-${i}`}/>}
-        </>
-      ))}
-    </BreadcrumbList>
-  </Breadcrumb>
-)
-
-export default StepsIndicator
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator
+} from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+
+const StepsIndicator: React.FC<{
+  currentStep: number
+  stepNames: string[]
+  className?: string
+}> = ({
+  currentStep,
+  stepNames,
+  className=''
+}) => (
+  <Breadcrumb className={className}>
+    <BreadcrumbList>
+      {stepNames.map((name, i) => (
+        <>
+          <BreadcrumbItem key={`item-${i}`}>
+            <BreadcrumbLink className={cn(
+                currentStep >= i ? '!text-foreground hover:text-foreground' : 'hover:text-muted-2',
+                'text-xxs sm:text-sm'  
+              )}
+            >
+              {name}
+            </BreadcrumbLink>
+          </BreadcrumbItem>
+          {i !== stepNames.length - 1 && <BreadcrumbSeparator  key={`sep-${i}`}/>}
+        </>
+      ))}
+    </BreadcrumbList>
+  </Breadcrumb>
+)
+
+export default StepsIndicator

package/components/commerce/checkout-panel/thank-you.tsx

@@ -1,18 +1,18 @@
-import React from 'react'
-import Link from 'next/link'
-
-import { ApplyTypography } from '@hanzo/ui/primitives'
-
-import type { CheckoutStepComponentProps } from '@hanzo/commerce/types'
-
-const ThankYou: React.FC<CheckoutStepComponentProps> = ({}) =>  (
-  <ApplyTypography className='flex flex-col gap-4 text-center mt-10'>
-    <h3>Thank you for your order!</h3>
-    <h6>Once your payment has been confirmed, you'll recieve an email with additional information.</h6>
-    <p>
-      While you wait, we cordially invite you to join the <Link href='https://warpcast.com/~/channel/lux'>Lux Channel</Link> on <Link href='https://warpcast.com/~/invite-page/227706?id=fbc9ca91'>Warpcast</Link>.
-    </p>
-  </ApplyTypography>
-)
-
-export default ThankYou
+import React from 'react'
+import Link from 'next/link'
+
+import { ApplyTypography } from '@hanzo/ui/primitives'
+
+import type { CheckoutStepComponentProps } from '@hanzo/commerce/types'
+
+const ThankYou: React.FC<CheckoutStepComponentProps> = ({}) =>  (
+  <ApplyTypography className='flex flex-col gap-4 text-center mt-10'>
+    <h3>Thank you for your order!</h3>
+    <h6>Once your payment has been confirmed, you'll recieve an email with additional information.</h6>
+    <p>
+      While you wait, we cordially invite you to join the <Link href='https://warpcast.com/~/channel/lux'>Lux Channel</Link> on <Link href='https://warpcast.com/~/invite-page/227706?id=fbc9ca91'>Warpcast</Link>.
+    </p>
+  </ApplyTypography>
+)
+
+export default ThankYou