@luxfi/ui 8.1.0 → 8.2.0

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

@@ -0,0 +1,126 @@
+'use client'
+import React, { useLayoutEffect, useRef, useState }  from 'react'
+
+import { capitalize, cn } from '@hanzo/ui'
+
+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/src/site/components/commerce/checkout-panel/mobile-cp.tsx

@@ -0,0 +1,67 @@
+'use client'
+import React, { type PropsWithChildren } from 'react'
+
+import { StepIndicator } from '@hanzo/ui/primitives'
+import { Box, cn } from '@hanzo/ui'
+import AuthWidget from '../../auth/widget'
+
+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
+}) => (
+
+  <Box /* 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='sm' variant='wordmark' 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' />
+  </Box>
+)
+
+export default MobileCheckoutPanel

package/src/site/components/commerce/checkout-panel/policy-links.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import Link from 'next/link'
+
+import { Separator, buttonVariants } from '@hanzo/ui/primitives'
+import { Box, cn, css } from '@hanzo/ui'
+// `link` was a SIZE in the 5.x line and is a variant here; a radius is a class.
+const linkClx = cn(buttonVariants({ variant: 'linkMuted' }), 'rounded-none')
+
+const PolicyLinks: React.FC<{
+  clx?: string
+}> = ({
+  clx=''
+}) => (
+  <Box className={cn('flex flex-col items-center', clx)}>
+    <Separator/>
+    <div className='flex gap-4 py-2 text-sm'>
+      {/* TODO: add Refund policy and Privacy policy links */}
+      <Link style={css(linkClx)} href=''>refund policy</Link>
+      <Link style={css(linkClx)} href=''>privacy policy</Link>
+    </div>
+  </Box>   
+)
+
+export default PolicyLinks

package/src/site/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'
+
+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/src/site/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

package/src/site/components/commerce/desktop-bag-popup.tsx

@@ -0,0 +1,78 @@
+'use client'
+import React, { useState, useEffect } from 'react'
+import { useRouter } from 'next/navigation'
+
+import { X } from 'lucide-react'
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  PopoverClose,
+} from "@hanzo/ui/primitives"
+
+import { cn } from '@hanzo/ui'
+import { CartPanel, useCommerce } from '@hanzo/commerce'
+
+import { Bag } from '../icons'
+import sendGAEvent from '../../next/analytics/google-analytics'
+
+const DesktopBagPopup: React.FC<{
+  triggerClx?: string  
+  popupClx?: string
+  trigger: React.ReactNode
+}> = ({
+  triggerClx='',
+  popupClx='',
+  trigger
+}) => {
+  const cmmc = useCommerce()
+
+  const [bagOpen, setBagOpen] = useState<boolean>(false)
+  const router = useRouter()
+
+  useEffect(() => {
+    if (bagOpen) {
+      sendGAEvent('view_cart', {
+        items: cmmc.cartItems.map((item) => ({
+          item_id: item.sku,
+          item_name: item.title,
+          item_category: item.familyId,
+          price: item.price,
+          quantity: item.quantity
+        })),
+        value: cmmc.cartTotal,
+        currency: 'USD',
+      })
+    }
+  }, [bagOpen])
+
+  return (
+    <Popover open={bagOpen} onOpenChange={setBagOpen}>
+      <PopoverTrigger className={triggerClx}>
+        {trigger}
+      </PopoverTrigger>
+      <PopoverContent sideOffset={28} className={cn('relative  flex flex-col p-0 px-4 pb-4 pt-2', popupClx)}>
+        <PopoverClose className='absolute z-above-content right-2 top-2 self-end hover:bg-level-3 text-muted hover:text-accent p-1 rounded-full'><X className='w-5 h-5'/></PopoverClose>
+        <CartPanel 
+          handleCheckout={() => {router.push('/checkout')}} 
+          className='mt-4 mb-4 border-none py-0 px-4'
+          listClx='rounded-sm pr-3'
+          scrollAfter={5}
+          scrollHeightClx='h-[70vh]'
+          itemClx='mt-3'
+          totalClx='sticky px-1 pr-2 -bottom-[1px] bg-level-1'
+          buttonClx='max-w-[220px] flex-none'
+        >
+          <div className='flex flex-row items-center flex-none justify-center '>
+            <Bag  className='mr-2 relative w-6 h-7 fill-foreground ' />
+            <p className='font-heading text-foreground text-default'>Your Bag</p>
+          </div>
+          <div className='h-[1px] w-pr-80 bg-muted-3 mx-auto mt-1.5 flex-none'/>
+        </CartPanel>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default DesktopBagPopup

package/src/site/components/commerce/drawer/index.tsx

@@ -0,0 +1,88 @@
+'use client'
+import React from 'react'
+import { useRouter } from 'next/navigation'
+import { observer } from 'mobx-react-lite'
+
+import { CarouselBuyCard } from '@hanzo/commerce'
+
+import { 
+  useSelectAndBuy, 
+  useCommerceDrawer, 
+} from '../../../commerce/ui/context'
+
+import CommerceDrawer from './shell'
+import CheckoutButton from '../checkout-button'
+import Micro from './micro'
+
+const CommerceUIComponent: React.FC = observer(() => {
+
+  const buy = useSelectAndBuy()
+  const drawer = useCommerceDrawer()
+  const router = useRouter()
+
+  const handleCheckout = (): void => {
+    router.push('/checkout')
+  }
+
+  const handleHandleClicked = (): void => {
+
+    if (drawer.state === 'full') {
+      buy.hideVariants()
+    }
+    else if (drawer.state === 'micro') {
+      buy.showRecentVariants()
+    }
+  }
+
+  const handleItemClicked = () => {
+    buy.showRecentVariants()
+  }
+
+  const handleCloseGesture = (): boolean => {
+    if (drawer.state === 'full') {
+      buy.hideVariants()
+      return true // "handled!"
+    }
+    return false
+  }
+
+  return (
+    <CommerceDrawer 
+      handleHandleClicked={handleHandleClicked}
+      handleCloseGesture={handleCloseGesture}
+      drawerClx='flex flex-col'
+    >
+      {drawer.state === 'full' && (
+        /* The actual drawer is larger than the visible area (due to awkward
+        vaul impl.  So we have to ask the drawer for its currect snappoint 
+        and constrain layout to that.  
+        */
+        <div style={{height: drawer.snapPointPx - 24 /* fudge factor for handle area */}} >
+          <CarouselBuyCard 
+            skuPath={buy.currentSkuPath!} 
+            checkoutButton={
+              <CheckoutButton 
+                handleCheckout={handleCheckout} 
+                className='w-full min-w-[160px] sm:max-w-[320px]'
+              />
+            }
+            clx='justify-between h-full pb-3 gap-8'
+            addBtnClx='w-full min-w-[160px] sm:max-w-[320px]' 
+            buttonsAreaClx='grow-0 shrink-0 mt-0'
+            selectorClx='max-w-[475px] justify-between grow'
+            
+          />
+        </div>
+      )}
+      {drawer.state === 'micro' && (
+        <Micro 
+          handleCheckout={handleCheckout}
+          handleItemClicked={handleItemClicked}
+          clx='w-full px-2 sm:w-[460px] sm:mx-auto md:w-[550px]'
+        />
+      )}
+    </CommerceDrawer>
+  )
+})
+
+export default CommerceUIComponent

package/src/site/components/commerce/drawer/micro.tsx

@@ -0,0 +1,145 @@
+'use client'
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { Button, } from '@hanzo/ui/primitives'
+import { Box, MediaStack, cn } from '@hanzo/ui'
+import type { LineItem } from '@hanzo/commerce/types'
+import { useCommerce, formatCurrencyValue } from '@hanzo/commerce'
+
+import CheckoutButton from '../checkout-button'
+import { useCommerceDrawer } from '../../../commerce/ui/context'
+
+const CN = {
+    // h: mind padding!
+  mobile: { w: 36, h: 32 },
+  sm:  { w: 60, h: 34 },
+  desktop: { w: 60, h: 32 },
+}
+
+const Info: React.FC<{
+  item: LineItem
+  clx?: string
+}> = ({
+  item,
+  clx=''
+}) => {
+
+  const cmmc = useCommerce()
+  const family = cmmc.getFamilyById(item.familyId)
+
+  let topLine = family!.title
+  if (item.sku.startsWith('LXM-AG') || item.sku.startsWith('LXM-AU')) {
+    topLine = family!.parentTitle + ', ' + family!.title   
+  }
+
+  const optionLabel = item.optionLabelShort ?? item.optionLabel
+  const priceStr = formatCurrencyValue(item.price)
+
+  return (<>
+    <Box className={cn('sm:hidden flex flex-col !text-muted items-stretch whitespace-nowrap text-ellipsis ', clx)}>
+      <p className='text-left text-xs'>{topLine}</p>
+      <div className='flex justify-between text-xxs'>
+        <div>{optionLabel}</div>
+        <div className='pl-2.5'>{priceStr}</div>
+      </div>
+    </Box>
+    <Box className={cn('hidden sm:flex !text-muted  flex-col items-stretch whitespace-nowrap text-ellipsis text-xs', clx)}>
+      <p className='text-left'>{topLine}</p>
+      <div className='flex justify-between'>
+        <div>{optionLabel}</div>
+        <div className='pl-2.5'>{priceStr}</div>
+      </div>
+    </Box>
+  </>)
+}
+
+const PROMPT_COMMON_CLX = 'block absolute top-0 left-0 bg-transparent duration-400 transition-opacity' 
+
+const Micro: React.FC<{
+  clx?: string
+  handleCheckout: () => void
+  handleItemClicked: () => void 
+}> = observer(({
+  clx='',
+  handleCheckout,
+  handleItemClicked 
+}) => {
+
+  const drawer = useCommerceDrawer()
+  const cmmc = useCommerce()
+
+  return (        
+    <Box className={cn(
+      (drawer.showRecent ? 'grid grid-cols-2' : 'flex justify-center items-center '),
+      (drawer.showRecent ? ((drawer.isMobile) ? '-mt-3' : '-mt-3') : ''),
+      'gap-2 md:gap-3 relative',
+      clx
+    )}>
+    {drawer.showRecent && (
+      <Box className={'flex flex-col items-stretch ' + (drawer.isMobile ? 'justify-start' : 'group')}>
+        <Box tag="p" className={'relative text-muted text-xxs md:text-xs leading-none pl-1 self-start ' + (drawer.isMobile ? 'top-[3px]' : 'top-[1px]')}>
+          <span className='invisible'>scrictly for layout</span>
+          {drawer.isMobile ? (
+            <Box tag="span" className={PROMPT_COMMON_CLX}>tap for options:</Box>
+          ) : (<>
+            <Box tag="span" className={PROMPT_COMMON_CLX + ' group-hover:opacity-0'}>recent item:</Box>
+            <Box tag="span" className={PROMPT_COMMON_CLX + ' opacity-0 group-hover:opacity-100'}>view options:</Box>
+          </>)}
+        </Box>
+        <Button 
+          variant='ghost'
+          className={cn(`rounded-${drawer.isMobile ? 'md' : 'lg'}`, cn(
+            'box-content',
+            'flex flex-row justify-between items-center gap-1',
+            '-ml-1.5',
+            'overflow-hidden ', 
+            'px-1 md:px-2 py-[2px]',
+            'border border-transparent group-hover:border-muted-3',
+            'group-hover:!bg-transparent',
+            '!min-w-0'
+          ))}
+          size={drawer.isMobile ? 'sm' : 'default'}
+          onClick={handleItemClicked}
+          
+        >
+          {cmmc.recentItem?.item.img && (<>
+            <MediaStack media={{img: cmmc.recentItem.item.img}} constrainTo={CN.mobile} className='sm:hidden grow-0 shrink-0' />
+            <MediaStack media={{img: cmmc.recentItem.item.img}} constrainTo={CN.sm} className='hidden sm:block md:hidden grow-0 shrink-0' />
+            <MediaStack media={{img: cmmc.recentItem.item.img}} constrainTo={CN.desktop} className='hidden md:block grow-0 shrink-0' />
+          </>)} 
+          {cmmc.recentItem && (
+            <div className='grow w-full'>
+              <Info item={cmmc.recentItem.item} clx='w-full'/>
+            </div>
+          )}
+        </Button>
+      </Box>
+    )}
+    {drawer.showCheckout && (
+      <Box className={cn(
+        'flex flex-col w-full', 
+        (drawer.showRecent ? 'items-stretch' : 'items-center' ),
+        (drawer.isMobile ? 'justify-start' : 'justify-center')
+      )}>
+        {drawer.showRecent && <p className='invisible text-muted text-xxs md:text-xs leading-none pl-1 self-start'>for layout</p>}
+        <CheckoutButton 
+          handleCheckout={handleCheckout} 
+          variant='primary' 
+          size={drawer.isMobile ? 'sm' : 'lg'}
+          className={cn(`rounded-${drawer.isMobile ? 'md' : 'lg'}`, cn(drawer.isMobile ? 
+            (drawer.showRecent ? 'pl-3.5 pr-2.5' : 'min-w-[320px]')
+            :
+            (drawer.showRecent ? '' : 'w-[320px]'),
+            'text-sm font-semibold'
+          ))}
+          centerText={drawer.isMobile ? !drawer.showRecent : true}
+           
+        />
+      </Box>
+    )}
+    </Box>
+  )
+})
+
+export default Micro

package/src/site/components/commerce/drawer/shell.tsx

@@ -0,0 +1,83 @@
+'use client'
+import React, {type PropsWithChildren } from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { 
+  Drawer, 
+  DrawerContent, 
+  DrawerHandle,
+  type DrawerProps,
+} from '@hanzo/ui/primitives'
+import { Box, cn } from '@hanzo/ui'
+import '../../../style/drawer-handle-overrides.css'
+import { useCommerceDrawer } from '../../../commerce/ui/context'
+
+const CommerceDrawer: React.FC<PropsWithChildren & 
+  Omit<DrawerProps, 
+    'onOpenChange' | 
+    'open' | 
+    'snapPoints' | 
+    'modal' |
+    'setActiveSnapPoint' | 
+    'activeSnapPoint' 
+  > & 
+  {
+    handleHandleClicked: () => void
+    drawerClx?: string
+  }
+> = observer(({
+  children,
+  handleHandleClicked,
+  drawerClx='',
+  ...rest
+}) => {
+  
+  const drawer = useCommerceDrawer()
+
+  return (
+    <Drawer 
+      open={drawer.open} 
+      onOpenChange={() => {}} 
+      modal={drawer.modal} 
+      snapPoints={drawer.points}
+      activeSnapPoint={drawer.activePoint}
+      setActiveSnapPoint={drawer.onActivePointChanged.bind(drawer)}
+      fastDragSkipsToEnd={false}
+      dragHandleOnly={true}
+      handleHandleClicked={handleHandleClicked}
+      extendHandleDragRegion={false}
+  //    debugOutput
+      {...rest}
+    >
+      <DrawerContent 
+        defaultHandle={false} 
+        className={cn(
+          'border-0',
+          drawer.isMobile ? 'pt-5' : 'pt-6',
+          'w-full h-full',
+        )}
+        // https://github.com/radix-ui/primitives/discussions/935
+        onOpenAutoFocus={(e: Event) => { e.preventDefault() }}
+      >
+        <DrawerHandle 
+          className={cn(
+            'absolute top-0 left-0 right-0 mx-auto z-10',
+            'flex justify-center items-start',
+            'border-t rounded-t-lg border-muted-3',
+            drawer.isMobile ? 'h-5 touch-pan-y' : 'h-6',
+          )} 
+        >
+          <Box className={cn(
+              // pseudo-handle
+            'rounded-[3px] bg-level-3',
+            drawer.isMobile ? 'w-[155px] mt-[5px] h-1.5' : 'w-[180px] mt-[3px] h-2.5 hover:bg-level-4',
+            !drawer.isMobile ? 'cursor-grab active:cursor-grabbing' : '',
+          )} />
+        </DrawerHandle>
+        {children}
+      </DrawerContent>
+    </Drawer>
+  )
+})
+
+export default CommerceDrawer