@luxfi/core 4.3.11

package/components/access-code-input.tsx

@@ -0,0 +1,71 @@
+'use client'
+
+import { useState } from 'react'
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+
+const AccessCodeInput: React.FC<{
+  onSuccess?: () => void
+  onFail?: () => void
+  validCodes?: string[]
+  className?: string
+}> = ({
+  onSuccess,
+  onFail,
+  validCodes,
+  className
+}) => {
+  const [status, setStatus] = useState<'valid' | 'invalid' | 'checking' | undefined>()
+
+  const checkAccessCode = (code: string) => {
+    setStatus(undefined)
+    if (code.length === 6) {
+      setStatus('checking')
+      setTimeout(() => {
+        if (validCodes?.includes(code) && onSuccess) {
+          setStatus('valid')
+          onSuccess()
+        }
+        else {
+          setStatus('invalid')
+          onFail && onFail()
+        }
+      }, 1000)
+    }
+  }
+
+  return (
+    <div className={cn('flex flex-col gap-2 mx-auto w-full text-center items-center', className)}>
+      <InputOTP
+        className='mx-auto'
+        maxLength={6}
+        onInput={(event) => checkAccessCode((event.target as HTMLInputElement).value)}
+        render={({ slots }) => (
+          <>
+            <InputOTPGroup>
+              {slots.slice(0, 3).map((slot, index) => (
+                <InputOTPSlot key={index} {...slot} />
+              ))}{" "}
+            </InputOTPGroup>
+            <InputOTPSeparator />
+            <InputOTPGroup>
+              {slots.slice(3).map((slot, index) => (
+                <InputOTPSlot key={index + 3} {...slot} />
+              ))}
+            </InputOTPGroup>
+          </>
+        )}
+      />
+      <p className='h-[3rem]'>
+        {
+          status === 'checking' ? 'Checking access code...' :
+          status === 'invalid' ? <span className='text-destructive'>Invalid access code!</span> :
+          status === 'valid' ? <span>Access code is valid! Redirecting...</span> :
+          null
+        }
+      </p>
+    </div>
+  )
+}
+
+export default AccessCodeInput

package/components/auth/login-panel.tsx

@@ -0,0 +1,80 @@
+import Link from 'next/link'
+import Autoplay from 'embla-carousel-autoplay'
+
+import { cn } from '@hanzo/ui/util'
+import { Button, Carousel, CarouselContent, CarouselItem } from '@hanzo/ui/primitives'
+import { LoginPanel as Login } from '@hanzo/auth/components'
+
+import { Logo } from '..'
+import LuxLogo from '../icons/lux-logo'
+
+const LoginPanel: React.FC<{
+  close: () => void
+  getStartedUrl?: string
+  redirectUrl?: string
+  className?: string
+  reviews: { text: string, author: string, href: string }[]
+}> = ({
+  close,
+  getStartedUrl='/',
+  redirectUrl,
+  className='',
+  reviews
+}) => {
+  return (
+    <div className={cn('grid grid-cols-1 md:grid-cols-2', className)}>
+      <div className='hidden md:flex w-full h-full bg-level-1 flex-row items-end justify-end overflow-y-auto min-h-screen'>
+        <div className='h-full w-full max-w-[750px] px-8 pt-0'>
+          <div className='h-full w-full max-w-[550px] mx-auto flex flex-col justify-between min-h-screen py-10'>
+            <Button
+              variant='ghost'
+              onClick={close}
+              className='w-fit !min-w-0 p-2'
+            >
+              <Logo size='md' spanClassName='!cursor-pointer' layout='text-only'/>
+            </Button>  
+            <Carousel
+              options={{ align: 'center', loop: true }}
+              className='w-full'
+              plugins={[Autoplay({ delay: 5000, stopOnInteraction: true })]}
+            >
+              <CarouselContent>
+                {reviews.map(({text, author, href}, index) => (
+                  <CarouselItem key={index}>
+                    <Link href={href} className='flex flex-col gap-3 cursor-pointer'>
+                      <p>“{text}“</p>
+                      <p className='text-sm'>{author}</p>
+                    </Link>
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+            </Carousel>
+          </div>
+        </div>
+      </div>
+      <div className='w-full h-full bg-background flex flex-row items-center'>
+        <div className='w-full max-w-[750px] relative flex flex-col items-center px-8 pt-0 text-center'>
+          <div className='relative h-full w-full max-w-[400px] mx-auto flex flex-col gap-4 items-center py-10'>
+            <Button
+              variant='ghost'
+              onClick={close}
+              className='block md:hidden absolute rounded-full p-2 left-0 h-auto hover:bg-background'
+            >
+              <LuxLogo className='w-5 h-5'/>
+            </Button>
+            {/* TODO: add Terms of Service and Privacy Policy links */}
+            <Login 
+              getStartedUrl={getStartedUrl} 
+              redirectUrl={redirectUrl}
+              className='w-full max-w-sm'
+              termsOfServiceUrl=''
+              privacyPolicyUrl=''
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default LoginPanel

package/components/chat-widget.tsx

@@ -0,0 +1,77 @@
+'use client'
+import React from 'react'
+
+import { Button, Card } from '@hanzo/ui/primitives'
+
+import LuxLogo from './icons/lux-logo'
+import { cn } from '@hanzo/ui/util'
+
+const ChatWidget: React.FC<{
+  title: string,
+  chatbotUrl: string,
+  subtitle?: string,
+  question?: string,
+  /* 
+    Currently supports these icons from remix icons (https://remixicon.com/):
+      GlobalLineIcon,
+      ShieldFlashLineIcon,
+      BankCardLineIcon,
+      GroupLineIcon,
+      QuestionnaireLineIcon
+  */
+  suggestedQuestions?: { heading: string, message: string, icon?: string }[]
+}> = ({
+  title,
+  chatbotUrl,
+  subtitle,
+  question,
+  suggestedQuestions
+}) => {
+
+  const [showChatbot, setShowChatbot] = React.useState<boolean>(false)
+
+  const onClick = () => { setShowChatbot(!showChatbot) }
+
+  const searchParams = new URLSearchParams()
+  if (question) {
+    searchParams.append('question', question)
+  }
+  if (suggestedQuestions) {
+    searchParams.append('sQuestions', suggestedQuestions.map(({ message }) => message).join(','))
+    searchParams.append('sHeadings', suggestedQuestions.map(({ heading }) => heading).join(','))
+    searchParams.append('sIcons', suggestedQuestions.map(({ icon }) => icon).join(','))
+  }
+
+  const iframeSrc = `${chatbotUrl}?${searchParams.toString()}`
+
+  return (<>
+    <div className={
+      'fixed bottom-0 sm:bottom-16 right-0 w-full h-full ' +
+      'sm:max-w-[400px] sm:max-h-[550px] sm:px-4 z-above-floating ' +
+      (showChatbot ? 'flex' : 'hidden')
+    }>
+      <Card className='flex flex-col h-full w-full'>
+        <div className='flex px-4 py-2 h-12 bg-level-0 items-center justify-between'>
+          <h3 className='font-semibold font-heading'>{title} <span className='opacity-60'>{subtitle}</span></h3>
+          <Button onClick={onClick} variant='link' size='icon' className='w-fit sm:hidden'>
+            <LuxLogo width={24} height={24}/>
+          </Button>
+        </div>
+        <iframe src={iframeSrc} className='h-full' />
+      </Card>
+    </div>
+
+    <LuxLogo
+      width={28}
+      height={28}
+      onClick={onClick}
+      className={cn(
+        'fixed bottom-5 right-5 z-floating transition-all cursor-pointer hover:drop-shadow-[0_2px_6px_rgba(255,255,255,1)]',
+        showChatbot ? 'rotate-180' : ''
+      )}
+      strokeWidth={1}
+    />
+  </>)
+}
+
+export default ChatWidget

package/components/commerce/bag-button.tsx

@@ -0,0 +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-accent 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

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

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

@@ -0,0 +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

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

@@ -0,0 +1,68 @@
+'use client'
+import React, { type PropsWithChildren } from 'react'
+
+import { ScrollArea } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+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 LinksRow from './links-row'
+import StepsIndicator from './steps-indicator'
+
+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)}>
+    <ScrollArea className='w-full h-full bg-level-1 flex flex-row items-start overflow-y-auto min-h-screen'>
+      <div className='h-full w-full flex justify-end'>
+        <div className='h-full w-full max-w-[750px] px-8 pt-0'>
+          <div className='h-full w-full max-w-[550px] mx-auto flex flex-col gap-3 justify-end min-h-screen'>
+            <div className='flex flex-col gap-3 h-30 justify-center'>
+              <CloseButton close={close} />
+              <StepsIndicator currentStep={index} stepNames={stepNames}/>
+            </div>
+            {children}
+            <LinksRow className='mt-auto mb-3' />
+          </div>
+        </div>
+      </div>
+    </ScrollArea>
+    <div className='w-full h-full bg-background flex flex-row items-start justify-start'>
+      <div className='w-full max-w-[750px] relative flex flex-col items-center justify-start px-8 pt-0'>
+        <AuthWidget noLogin className='hidden md:flex absolute top-4 right-4 '/>
+        <div className='flex items-center justify-center h-30'>
+          <Icons.bag className='fill-foreground mr-2 relative -top-1 w-6 h-7'/>
+          <p className='font-heading text-default'>Order Summary</p>
+        </div>
+        <div className='w-full max-w-[550px] mx-auto'>
+          <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 pr-3' 
+            itemClx='mb-3' 
+            totalClx='sticky bottom-0 p-1 bg-background'
+            scrollAfter={5}
+            scrollHeightClx='h-[50vh]'
+            selectItems
+            showPromoCode
+            showShipping
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+)
+
+export default DesktopCheckoutPanel

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

@@ -0,0 +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>
+  </>)
+}
+
+export default CheckoutPanel

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

@@ -0,0 +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 className='my-1'/>
+    <div className='flex gap-4 text-sm'>
+      {/* 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

@@ -0,0 +1,51 @@
+'use client'
+import React, { type PropsWithChildren } from 'react'
+
+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'
+import StepsIndicator from './steps-indicator'
+
+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} />
+      <StepsIndicator currentStep={index} stepNames={stepNames}/>
+  	  {/* 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 py-2 w-full' 
+    />
+    {children}
+    <LinksRow className='mt-auto mb-3 pt-2' />
+  </div>
+)
+
+export default MobileCheckoutPanel

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

@@ -0,0 +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

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

@@ -0,0 +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