@luxfi/core 5.2.13 → 5.3.0

package/commerce/ui/context.tsx

@@ -15,7 +15,7 @@ import { useDebounceCallback } from 'usehooks-ts'
 import { preset as twConfig } from '@hanzo/ui/tailwind'
 import { useCommerce } from '@hanzo/commerce'
 
-import type { CommerceDrawer, SelectAndBuy, RecentActivity } from './store'
+import type { CommerceDrawer, SelectAndBuy } from './store'
 import { CommerceUIStore } from './store'
 import conf from './conf'
 
@@ -39,10 +39,6 @@ const useSelectAndBuy = (): SelectAndBuy => {
   return useContext(CommerceUIContext) as SelectAndBuy
 }
 
-const useRecentActivity = (): RecentActivity => {
-  return useContext(CommerceUIContext) as RecentActivity
-}
-
 const CommerceUIProvider: React.FC<PropsWithChildren> = ({ 
   children,
 }) => {
@@ -78,6 +74,7 @@ const CommerceUIProvider: React.FC<PropsWithChildren> = ({
     storeRef.current.initialize()
     onResize()
     window.addEventListener('resize', onResize_debounced);
+
     return () => {
       window.removeEventListener('resize', onResize_debounced)
       storeRef.current.dispose() 
@@ -104,8 +101,9 @@ const CommerceUIProvider: React.FC<PropsWithChildren> = ({
       &&
       prevPathRef.current !== pathname
     ) {
-      storeRef.current.reset()
+      storeRef.current.newRoute()
       prevPathRef.current = pathname
+      log("ROUTE CHANGE: " + pathname + ": " + storeRef.current._routeChangedTime)
     }  
   }, [pathname])
 
@@ -120,7 +118,6 @@ const CommerceUIProvider: React.FC<PropsWithChildren> = ({
 export {
   useCommerceDrawer, 
   useSelectAndBuy,
-  useRecentActivity,
   CommerceUIProvider
 }
 

package/commerce/ui/store.ts

@@ -8,10 +8,9 @@ import {
   type IReactionDisposer, 
 } from 'mobx'
 
-import type { CommerceService, LineItem, ObsLineItemRef } from '@hanzo/commerce/types'
+import type { CommerceService } from '@hanzo/commerce/types'
 
 const LOG = false ////////////////////
-
 const log = (s: string) => {
   if (LOG) {
     console.log('COMMERCE_UI ' + s)
@@ -32,14 +31,12 @@ type SnapPointsConfig = {
 
 type DrawerState = 'closed' | 'micro' | 'full' 
 
-interface RecentActivity extends ObsLineItemRef {
-  quantityChanged(sku: string, val: number, prevVal: number): void
-}
-
 interface SelectAndBuy {
   showVariants: (skuPath: string) => void
+  showRecentVariants: () => void
   hideVariants: () => void
   get currentSkuPath(): string | undefined
+  newRoute: () => void
 }
 
 interface CommerceDrawer {
@@ -54,7 +51,7 @@ interface CommerceDrawer {
     // Called by UI Gesture
   onActivePointChanged: (p: SnapPoint | null) => void
   get showCheckout(): boolean
-  get showAdded(): boolean
+  get showRecent(): boolean
   get showBuy(): boolean
 
   get microHeight(): SnapPoint
@@ -63,11 +60,11 @@ interface CommerceDrawer {
 }
 
 class CommerceUIStore implements 
-  RecentActivity,
   SelectAndBuy,
   CommerceDrawer
 {
   _vHeight: number = 0
+  _routeChangedTime = 0
 
   _currentSkuPath: string | undefined = undefined
   _closedByUser: boolean = false
@@ -75,7 +72,6 @@ class CommerceUIStore implements
   _ignoreStateChange: boolean = false
   _activePoint: SnapPoint | null = null 
   
-  _activeItem: LineItem | undefined = undefined
   _reactionDisposers: IReactionDisposer[] = []
   _service: CommerceService
   _pointsConfig: SnapPointsConfig 
@@ -88,32 +84,31 @@ class CommerceUIStore implements
 
     makeObservable(this, {
       _currentSkuPath: observable,
-      _activeItem: observable.ref, 
       _closedByUser: observable,
       _checkingOut: observable,
       _activePoint: observable,
       _points: observable.ref, 
       _vHeight: observable,
+      _routeChangedTime: observable,
 
       showVariants: action,
+      showRecentVariants: action,
       hideVariants: action,
-      quantityChanged: action,
       setClosedByUser: action,
       setCheckingOut: action,
       setActivePoint: action,
       setMobile: action,
       setViewportHeight: action,
-      clearActiveItem: action,
+      setRouteChangedTime: action,
       
       activePoint: computed,
       checkingOut: computed,
       closedByUser: computed,
       currentSkuPath: computed,
-      item: computed,
       microHeight: computed,
       modal: computed,
       points: computed,
-      showAdded: computed,
+      showRecent: computed,
       showBuy: computed,
       showCheckout: computed,
       snapPointPx: computed,
@@ -138,36 +133,38 @@ class CommerceUIStore implements
         }
       }
     ))
+    /*
     this._reactionDisposers.push(autorun(() => {
       log('AUTORUN: OPEN: ' + this.open)
       log('AUTORUN:' + // ===============
         '[showCheckout: '  + this.showCheckout + 
-        '], [showAdded: ' + this.showAdded + 
+        '], [showRecent: ' + this.showRecent + 
         '], [showBuy: ' + this.showBuy + 
         '], [closedByUser: ' + this._closedByUser + 
         '], [checkingOut: ' + this._checkingOut + ']'
       ) // ===========
     }))
+    */
   }
 
-  reset = () => {
+  newRoute = () => {
+    this.setRouteChangedTime(new Date().getTime())
     this.hideVariants()
     this.setClosedByUser(false)
-    this.clearActiveItem()
     // DO NOT reset _checkingOut!
   }
 
-  onActivePointChanged = (pt: SnapPoint | null): void => { 
-    log("ON onActivePointChanged: " +  pt) // ===========
-    if (pt === this._points.micro && this.activePoint === this._points.full) {
+  onActivePointChanged = (newPoint: SnapPoint | null): void => { 
+    log("ON onActivePointChanged: " +  newPoint) // ===========
+    if (newPoint === this._points.micro && this.activePoint === this._points.full) {
       this.setIgnoreStateChange(true)
       this.hideVariants()  
     }
-    else if (pt === this._points.full && this.activePoint === this._points.micro) {
+    else if (newPoint === this._points.full && this.activePoint === this._points.micro) {
       this.setIgnoreStateChange(true)
-      this.showVariants(this.item?.sku ?? '')  
+      this.showRecentVariants()
     }
-    this.setActivePoint(pt)  
+    this.setActivePoint(newPoint)  
   }
 
   showVariants = (skuPath: string): void => {
@@ -176,27 +173,17 @@ class CommerceUIStore implements
     this._closedByUser = false
   } 
 
-  hideVariants = (): void => { this._currentSkuPath = undefined }
-
-  get currentSkuPath(): string | undefined { return this._currentSkuPath } 
-
-  quantityChanged = (sku: string, val: number, oldVal: number): void  => {
-
-    if (val === 0) {
-      if (this._activeItem?.sku === sku) {
-        this._activeItem = undefined
-      }
-      // otherwise ignore
-    }
-    else {
-      if (!this._activeItem || this._activeItem.sku !== sku) {
-        this._activeItem = this._service.getItemBySku(sku)
-      }
+  showRecentVariants = (): void => {
+    const recentItemInfo = this._service.recentItem
+    if (recentItemInfo) {
+      this._service.setCurrentItem(undefined)
+      this._currentSkuPath = recentItemInfo.item.sku
+      this._closedByUser = false
     }
   } 
 
-  get item(): LineItem | undefined { return this._activeItem }
-  clearActiveItem = (): void => { this._activeItem = undefined }
+  hideVariants = (): void => { this._currentSkuPath = undefined }
+  get currentSkuPath(): string | undefined { return this._currentSkuPath } 
 
   get closedByUser(): boolean { return this._closedByUser }
   setClosedByUser = (b: boolean): void => { this._closedByUser = b}
@@ -210,13 +197,9 @@ class CommerceUIStore implements
   get activePoint(): SnapPoint | null { return this._activePoint }
   setActivePoint = (pt: SnapPoint | null): void => { this._activePoint = pt}
    
+  setRouteChangedTime = (t: number): void => {this._routeChangedTime = t}
+
   get points(): SnapPoint[] { 
-    if (this.showBuy && !(this.showAdded || this.showCheckout)) {
-      return [this._points.full]
-    }
-    else if (!this.showBuy && !this.showAdded && this.showCheckout) {
-      return [this._points.micro]
-    }
     return [this._points.micro, this._points.full]
   }
 
@@ -234,12 +217,10 @@ class CommerceUIStore implements
 
     log('open():' + // ===============
       ' showCheckout: '  + this.showCheckout + 
-      ' showAdded: ' + this.showAdded + 
+      ' showRecent: ' + this.showRecent + 
       ' showBuy: ' + this.showBuy
     ) // ===========
 
-
-
     return ( 
       this._checkingOut !== undefined
       &&
@@ -247,7 +228,7 @@ class CommerceUIStore implements
       &&
       !this.closedByUser
       && 
-      (this.showCheckout || this.showAdded || this.showBuy)
+      (this.showCheckout || this.showRecent || this.showBuy)
     )
   }
 
@@ -256,15 +237,20 @@ class CommerceUIStore implements
       if (this.showBuy) {
         return 'full'
       }
-      else if (this.showAdded || this.showCheckout) {
+      else if (this.showRecent || this.showCheckout) {
         return 'micro'
       }
     }
     return 'closed'
   }
 
+  get showRecent(): boolean {
+
+    const recentInfo = this._service.recentItem
+    return !!recentInfo && recentInfo.modified > this._routeChangedTime
+  }
+
   get showBuy(): boolean {return !!this.currentSkuPath}
-  get showAdded(): boolean { return !!this.item}
   get showCheckout(): boolean { return !this._service.cartEmpty}
   get modal(): boolean { return this.state !== 'micro'}
 
@@ -297,7 +283,6 @@ class CommerceUIStore implements
 export {
   CommerceUIStore,
   type CommerceDrawer,
-  type RecentActivity,
   type SelectAndBuy,
   type SnapPointsConfig,
   type SnapPoints,

package/components/back-button.tsx

@@ -15,6 +15,7 @@ import type { VariantProps } from '@hanzo/ui/util'
 const BackButton: React.FC<{
   variant?: VariantProps<typeof buttonVariants>['variant']
   size?: VariantProps<typeof buttonVariants>['size']
+  onBack?: () => void
   clx?: string
   iconClx?: string
 }> = ({
@@ -22,10 +23,16 @@ const BackButton: React.FC<{
   size='default',
   clx='',
   iconClx='',
+  onBack
 }) => {
 
   const router = useRouter()
-  const back = () => {router.back()}
+  const back = () => {
+    if (onBack) {
+      onBack()
+    }
+    router.back()
+  }
 
   return (
     <Button

package/components/commerce/{checkout-widget/index.tsx → _to_deprecate_checkout-widget/index.tsx_}

@@ -9,8 +9,6 @@ import { useStepAnimation } from '@hanzo/ui/util-client'
 
 import { Image } from '@hanzo/ui/primitives'
 
-import { useCommerceDrawer, useRecentActivity } from '../../../commerce/ui/context'
-
 import CheckoutButton from '../checkout-button'
 import useAnimationClxSet from './use-anim-clx-set'
 import CONST from './const'
@@ -111,8 +109,6 @@ const CheckoutWidget: React.FC<{
   const isCheckout = usePathname() === '/checkout'
   const clxSet = useAnimationClxSet(isCheckout)
 
-  const recentActivity = useRecentActivity()
-
     // for rendering content after recentActivity.item() would return false
   const persistentRef = useRef<LineItem | undefined>(undefined)
 

package/components/commerce/checkout-panel/cart-accordian.tsx

@@ -0,0 +1,66 @@
+'use client'
+import React  from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { ChevronRight } from 'lucide-react'
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+
+import { useCommerce, CartPanel, formatCurrencyValue } from '@hanzo/commerce' 
+
+const CartAccordian: React.FC<{
+  icon?: React.ReactNode
+  clx?: string
+  triggerClx?: string
+  panelClx?: string
+  scrollAfter: number
+  scrollHeightClx: string
+}> = observer(({
+  icon,
+  clx='',
+  panelClx='',
+  triggerClx='',
+  scrollAfter,
+  scrollHeightClx
+}) => { 
+  const cmmc = useCommerce()
+  return (
+    <Accordion type="single" collapsible className={clx}>
+      <AccordionItem value="cart" className='w-full border-b-0'>
+        <AccordionTrigger className={'!no-underline group flex justify-between '} headerClx={ triggerClx}>
+          <div className='flex gap-0 items-center'>
+            {icon}
+            <h5 className='text-sm sm:text-xl grow'>
+              <span className='group-data-[state=open]:hidden' >Order Total:</span>
+              <span className='group-data-[state=closed]:hidden' >Your Order</span>
+            </h5>
+          </div>
+          <div className='flex gap-1 items-center'>
+            <h5 className='text-sm sm:text-xl grow truncate'>{formatCurrencyValue(cmmc.promoAppliedCartTotal)}</h5>
+            <ChevronRight className="h-5 w-5 -mr-2 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90" />
+          </div>
+        </AccordionTrigger>
+        <AccordionContent className='data-[state=open]:mb-4'>
+          <CartPanel 
+            className={cn('w-full', panelClx)} 
+            scrollAfter={scrollAfter}
+            scrollHeightClx={scrollHeightClx}
+            listClx='mt-0'
+            itemClx='mt-0.5 mb-0'
+            totalClx='sticky px-1 pr-2 border-t -bottom-[1px] bg-background'
+            showShipping
+            showPromoCode
+          />
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  )
+})
+
+export default CartAccordian

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

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

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

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

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

@@ -26,15 +26,13 @@ const STEPS = [
 
 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'
+import DesktopCP from './desktop-cp'
+import MobileCP from './mobile-cp'
 
 const CheckoutPanel: React.FC<{
-  close: () => void
-  className?: string
+  clx?: string
 }> = ({
-  close,
-  className=''
+  clx=''
 }) => {
 
   const cmmc = useCommerce()
@@ -78,16 +76,15 @@ const CheckoutPanel: React.FC<{
 
   const _close = () => {
     setStep('first')
-    close()
   }
   
-  // Determine if mobile or desktop based on visibility of desktopElement
-  // https://stackoverflow.com/a/21696585/11378853
+    // 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>()
+  const [layout, setLayout] = useState<'mobile' | 'desktop' | undefined>(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')
@@ -106,19 +103,19 @@ const CheckoutPanel: React.FC<{
 
   return (<>
     <DesktopCP 
-      className={cn('h-full', className, 'hidden md:flex')} 
-      close={_close}
-      index={stepIndex}
+      clx={cn('h-full', clx, 'hidden md:flex')} 
+      onLeave={_close}
+      step={stepIndex}
       stepNames={STEP_NAMES}
     >
-      {/* Element required to determine if DesktopCP is visible */}
+      {/* 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 
-      className={cn('h-full overflow-y-auto', className, 'md:hidden' )} 
-      close={_close}
-      index={stepIndex}
+      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}/>}

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/drawer/index.tsx

@@ -8,7 +8,6 @@ import { CarouselBuyCard } from '@hanzo/commerce'
 import { 
   useSelectAndBuy, 
   useCommerceDrawer, 
-  useRecentActivity 
 } from '../../../commerce/ui/context'
 
 import CommerceDrawer from './shell'
@@ -19,33 +18,24 @@ const CommerceUIComponent: React.FC = observer(() => {
 
   const buy = useSelectAndBuy()
   const drawer = useCommerceDrawer()
-  const recent = useRecentActivity()
   const router = useRouter()
-  
 
   const handleCheckout = (): void => {
     router.push('/checkout')
   }
 
-
   const handleHandleClicked = (): void => {
 
     if (drawer.state === 'full') {
       buy.hideVariants()
     }
     else if (drawer.state === 'micro') {
-      if (drawer.showAdded) {
-        buy.showVariants(recent.item?.sku ?? '')
-      }
-        // checkout only
-      else {
-        drawer.setClosedByUser(true)
-      }
+      buy.showRecentVariants()
     }
   }
 
   const handleItemClicked = () => {
-    buy.showVariants(recent.item?.sku ?? '')
+    buy.showRecentVariants()
   }
 
   const handleCloseGesture = (): boolean => {
@@ -76,7 +66,6 @@ const CommerceUIComponent: React.FC = observer(() => {
                 className='w-full min-w-[160px] sm:max-w-[320px]'
               />
             }
-            onQuantityChanged={recent.quantityChanged.bind(recent)}
             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'

package/components/commerce/drawer/micro.tsx

@@ -8,7 +8,7 @@ import type { LineItem } from '@hanzo/commerce/types'
 import { useCommerce, formatCurrencyValue } from '@hanzo/commerce'
 
 import CheckoutButton from '../checkout-button'
-import { useCommerceDrawer, useRecentActivity } from '../../../commerce/ui/context'
+import { useCommerceDrawer } from '../../../commerce/ui/context'
 
 const CN = {
     // h: mind padding!
@@ -67,17 +67,16 @@ const Micro: React.FC<{
 }) => {
 
   const drawer = useCommerceDrawer()
-  const recent = useRecentActivity()
-  const mobile = drawer.isMobile
+  const cmmc = useCommerce()
 
   return (        
     <div className={cn(
-      (drawer.showAdded ? 'grid grid-cols-2' : 'flex justify-center items-center '),
-      (drawer.showAdded ? ((drawer.isMobile) ? '-mt-3' : '-mt-3') : ''),
+      (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.showAdded && (
+    {drawer.showRecent && (
       <div className={'flex flex-col items-stretch ' + (drawer.isMobile ? 'justify-start' : 'group')}>
         <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>
@@ -91,7 +90,7 @@ const Micro: React.FC<{
         <Button 
           variant='ghost'
           rounded={drawer.isMobile ? 'md' : 'lg'}
-          size={drawer.isMobile ? 'default' : 'lg'}
+          size={drawer.isMobile ? 'sm' : 'lg'}
           onClick={handleItemClicked}
           className={cn(
             'box-content',
@@ -103,14 +102,14 @@ const Micro: React.FC<{
             'group-hover:!bg-transparent '
           )}
         >
-          {recent.item?.img && (<>
-            <Image def={recent.item.img} constrainTo={CN.mobile} preload className='sm:hidden grow-0 shrink-0'/>
-            <Image def={recent.item.img} constrainTo={CN.sm} preload className='hidden sm:block md:hidden grow-0 shrink-0'/>
-            <Image def={recent.item.img} constrainTo={CN.desktop} preload className='hidden md:block grow-0 shrink-0'/>
+          {cmmc.recentItem?.item.img && (<>
+            <Image def={cmmc.recentItem.item.img} constrainTo={CN.mobile} preload className='sm:hidden grow-0 shrink-0'/>
+            <Image def={cmmc.recentItem.item.img} constrainTo={CN.sm} preload className='hidden sm:block md:hidden grow-0 shrink-0'/>
+            <Image def={cmmc.recentItem.item.img} constrainTo={CN.desktop} preload className='hidden md:block grow-0 shrink-0'/>
           </>)} 
-          {recent.item && (
+          {cmmc.recentItem && (
             <div className='grow w-full'>
-              <Info item={recent.item} clx='w-full'/>
+              <Info item={cmmc.recentItem.item} clx='w-full'/>
             </div>
           )}
         </Button>
@@ -119,20 +118,21 @@ const Micro: React.FC<{
     {drawer.showCheckout && (
       <div className={cn(
         'flex flex-col w-full', 
-        (drawer.showAdded ? 'items-stretch' : 'items-center' ),
+        (drawer.showRecent ? 'items-stretch' : 'items-center' ),
         (drawer.isMobile ? 'justify-start' : 'justify-center')
       )}>
-        {drawer.showAdded && <p className='invisible text-muted text-xxs md:text-xs leading-none pl-1 self-start'>for layout</p>}
+        {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 ? 'default' : 'lg'}
+          size={drawer.isMobile ? 'xs' : 'lg'}
           rounded={drawer.isMobile ? 'md' : 'lg'}
-          centerText={drawer.isMobile ? !drawer.showAdded : true}
+          centerText={drawer.isMobile ? !drawer.showRecent : true}
           className={cn(drawer.isMobile ? 
-            (drawer.showAdded ? 'pl-3.5 pr-2.5' : 'min-w-[320px]')
+            (drawer.showRecent ? 'pl-3.5 pr-2.5' : 'min-w-[320px]')
             :
-            (drawer.showAdded ? '' : 'w-[320px]')
+            (drawer.showRecent ? '' : 'w-[320px]'),
+            'text-sm font-semibold'
           )} 
         />
       </div>

package/components/commerce/mobile-nav-menu-ai.tsx

@@ -1,7 +1,6 @@
 'use client'
 import React, { useState } from 'react'
 import { ArrowRight, Plus } from 'lucide-react'
-import { Search } from '../icons'
 import { Button, Card } from '@hanzo/ui/primitives'
 import { Logo } from '..'
 

package/components/index.ts

@@ -11,14 +11,12 @@ export { default as MiniChart } from './mini-chart'
 export { default as NotFound } from './not-found'
 
 export { default as AuthListener } from './auth/auth-listener'
-export { default as AddWidget } from './commerce/add-widget'
 export { default as BackButton } from './back-button'
 export { default as BuyDrawer } from './commerce/drawer'
 export { default as DrawerMargin } from './drawer-margin'
 export { default as BuyButton } from './commerce/buy-button'
 export { default as CheckoutButton } from './commerce/checkout-button'
 export { default as CheckoutPanel } from './commerce/checkout-panel'
-export { default as CheckoutWidget } from './commerce/checkout-widget'
 export { default as LoginPanel } from './auth/login-panel'
 export { default as Scripts } from './scripts'
 export { default as Tooltip } from './tooltip'

package/components/mini-chart/mini-chart.tsx

@@ -39,7 +39,7 @@ const MiniChart: React.FC<MiniChartProps> = ({
         iframe.style.colorScheme = 'normal'
         setTimeout(() => {
           const value = document.querySelector('#mini-symbol-overview-ticker')
-          console.log("TICKER: " + value)
+          //console.log("TICKER: " + value)
         }, 1200) // from experimentation 
       
 
@@ -47,7 +47,7 @@ const MiniChart: React.FC<MiniChartProps> = ({
 
       const copyDiv = document.querySelector('.tradingview-widget-copyright')
       if (copyDiv) {
-        console.log("COPY: " + copyDiv)
+        //console.log("COPY: " + copyDiv)
         setTimeout(() => {
           copyDiv.classList.remove('invisible')
         }, 1200) // from experimentation 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxfi/core",
-  "version": "5.2.13",
+  "version": "5.3.0",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

package/root-layout/index.tsx

@@ -44,7 +44,7 @@ const viewport = {
   We cannot have these on body tag for scroll-snap to work on iOS!
 */
 const bodyClasses =
-  'bg-background text-foreground flex flex-col min-h-full overflow-x-hidden ' +
+  'bg-background text-foreground flex flex-col min-h-full ' +
   getAppRouterBodyFontClasses()
 
 async function RootLayout({

package/tsconfig.json

@@ -2,7 +2,7 @@
   "extends": "../tsconfig.modules.base.json",
   "include": [
     "**/*.ts",
-    "**/*.tsx",
+    "**/*.tsx", "components/commerce/_to_deprecate_checkout-widget/index.tsx_",
   ],
   "exclude": [
     "node_modules",

package/components/commerce/add-widget.tsx

@@ -1,20 +0,0 @@
-'use client'
-import React from 'react'
-
-import type { LineItem } from '@hanzo/commerce/types'
-import  { AddToCartWidget } from '@hanzo/commerce'
-
-import { useRecentActivity } from '../../commerce/ui/context'
-
-const AddWidget: React.FC<{
-  item: LineItem
-  disabled?: boolean
-  className?: string
-  buttonClx?: string
-  variant?: 'minimal' | 'primary' | 'outline'
-}> = (props) => {
-  const l = useRecentActivity()
-  return <AddToCartWidget {...props} onQuantityChanged={l.quantityChanged.bind(l)}/>
-}
-
-export default AddWidget

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

@@ -1,85 +0,0 @@
-'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 './dt-bag-carousel'
-import LinksRow from './links-row'
-
-const DesktopCheckoutPanel: React.FC<PropsWithChildren & {
-  index: number
-  stepNames: string[]
-  close: () => void
-  className?: string
-}> = observer(({
-  index,
-  stepNames,
-  close,
-  className='',
-  children
-}) => {
-
-  const cmmc = useCommerce()
-
-  return ( 
-  <div /* id='CHECKOUT_PANEL' */  className={cn('grid grid-cols-2',  className)}>
-    <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 onClick={close} size='md' href='/' 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 ' + 
-          //'border border-transparent hover:border-muted-2 ' + 
-          'back-button-tooltip-class '
-        }/>
-        <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={5}
-            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-30 pb-8 w-full top-0 flex justify-center items-end'>
-            <AuthWidget noLogin className='hidden md:flex absolute top-4 right-4 '/>
-            <StepIndicator dotSizeRem={1.5} steps={stepNames} currentStep={index} className='gap-2 text-base w-pr-70' />
-          </div>
-          <div key={2} className='w-full max-w-[550px] mx-auto pb-10'>
-            {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 className='w-full' />
-        </div>
-      </div>
-    </div>
-  </div>
-)
-})
-
-export default DesktopCheckoutPanel

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

@@ -1,21 +0,0 @@
-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,55 +0,0 @@
-'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 { Logo } from '../..'
-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'>
-      <Logo onClick={close} size='xs' href='/' />
-      {/* 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 
-          animateOnHover={false} 
-          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