@luxfi/core 5.2.10 → 5.2.11

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

@@ -1,129 +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 './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) {
-    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')
-    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>()
-
-    // TODO :aa I assume it's becase we don't want two instance of the Square plugin....
-    // ... wondering if there is a simpler way.
-  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 
-      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
+'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

@@ -0,0 +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>
+)
+
+export default MobileCheckoutPanel

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

@@ -0,0 +1,29 @@
+import React from 'react'
+import Link from 'next/link'
+
+import { Separator, buttonVariants } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+
+
+const linkClx = buttonVariants({ 
+  variant: 'linkMuted', 
+  size: 'link',
+  rounded: 'none', 
+})
+
+const PolicyLinks: React.FC<{
+  clx?: string
+}> = ({
+  clx=''
+}) => (
+  <div 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 className={linkClx} href=''>refund policy</Link>
+      <Link className={linkClx} href=''>privacy policy</Link>
+    </div>
+  </div>   
+)
+
+export default PolicyLinks

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

package/components/commerce/checkout-widget/const.ts

@@ -1,13 +1,13 @@
-export default {
-  itemImgConstraint: { w: 40, h: 24 },
-  animDurationMs: 400,
-  animTimingFn: 'cubic-bezier(0.4, 0, 0.2, 1)',
-  compWidthClx: {
-    checkout: 'w-pr-40',
-    itemInfo: 'w-pr-60'
-  },
-  shadowStyle: {
-    border: '1px solid rgb(100 100 100)',
-    boxShadow: '2px 4px 4px -3px rgb(125 125 125 / 0.7), 4px -4px 8px -4px rgb(125 125 125 / 0.7)'
-  }
-} 
+export default {
+  itemImgConstraint: { w: 40, h: 24 },
+  animDurationMs: 400,
+  animTimingFn: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  compWidthClx: {
+    checkout: 'w-pr-40',
+    itemInfo: 'w-pr-60'
+  },
+  shadowStyle: {
+    border: '1px solid rgb(100 100 100)',
+    boxShadow: '2px 4px 4px -3px rgb(125 125 125 / 0.7), 4px -4px 8px -4px rgb(125 125 125 / 0.7)'
+  }
+}