@luxfi/core 5.2.7 → 5.2.9

package/commerce/ui/context.tsx

@@ -19,6 +19,13 @@ import type { CommerceDrawer, SelectAndBuy, RecentActivity } from './store'
 import { CommerceUIStore } from './store'
 import conf from './conf'
 
+const LOG = false ////////////////////
+const log = (s: string) => {
+  if (LOG) {
+    console.log('CMMC UI CONTEXT ' + s)
+  }
+}
+
 // https://dev.to/ivandotv/mobx-server-side-rendering-with-next-js-4m18
 enableStaticRendering(typeof window === "undefined")
 
@@ -41,13 +48,9 @@ const CommerceUIProvider: React.FC<PropsWithChildren> = ({
 }) => {
 
   const cmmc = useCommerce()
-  const pathName = usePathname()
-  const isCheckout = pathName === '/checkout'
-  const ref = useRef<CommerceUIStore>(new CommerceUIStore(cmmc, conf))
-
-  if (ref.current.checkingOut != isCheckout) {
-    ref.current.setCheckingOut(isCheckout)
-  }
+  const pathname = usePathname()
+  const storeRef = useRef<CommerceUIStore>(new CommerceUIStore(cmmc, conf))
+  const prevPathRef = useRef<string>('initial')
 
   const onResize = () => { 
     const width = window.innerWidth 
@@ -58,36 +61,57 @@ const CommerceUIProvider: React.FC<PropsWithChildren> = ({
         desktopMin = parseInt(twConfig.theme?.screens.md)
       }
       if (width < desktopMin) {
-        if (!ref.current.isMobile) {
-          ref.current.setMobile(true)
+        if (!storeRef.current.isMobile) {
+          storeRef.current.setMobile(true)
         }
       }
-      else if (ref.current.isMobile) {
-        ref.current.setMobile(false)
+      else if (storeRef.current.isMobile) {
+        storeRef.current.setMobile(false)
       }
     }
-    ref.current.setViewportHeight(window.innerHeight)
+    storeRef.current.setViewportHeight(window.innerHeight)
   }
 
   const onResize_debounced = useDebounceCallback(onResize, 500)
 
   useLayoutEffect(() => {
-    ref.current.initialize()
+    storeRef.current.initialize()
     onResize()
     window.addEventListener('resize', onResize_debounced);
     return () => {
       window.removeEventListener('resize', onResize_debounced)
-      ref.current.dispose() 
+      storeRef.current.dispose() 
     }
   }, [])
 
   useEffect(() => {
-    ref.current.reset()
-  }, [pathName])
+    const checkingOut = (pathname === '/checkout')
+
+    /////////////////////////////////////
+    log("useEffect: pathname: " + pathname)
+    log("useEffect: prev pathname: " + prevPathRef.current)
+    
+    if (storeRef.current.checkingOut === undefined || storeRef.current._checkingOut!== checkingOut) {
+      log("useEffect: setting checkingOut to: " + checkingOut) /////////////////////////////////////
+      storeRef.current.setCheckingOut(checkingOut)
+    }
+    if ( prevPathRef.current === 'initial') {
+      prevPathRef.current = pathname
+      // no need to reset  
+    }
+    else if (
+      !checkingOut
+      &&
+      prevPathRef.current !== pathname
+    ) {
+      storeRef.current.reset()
+      prevPathRef.current = pathname
+    }  
+  }, [pathname])
 
 
   return (
-    <CommerceUIContext.Provider value={ref.current}>
+    <CommerceUIContext.Provider value={storeRef.current}>
       {children}
     </CommerceUIContext.Provider>
   )

package/commerce/ui/store.ts

@@ -1,5 +1,6 @@
 import { 
   action,
+  autorun,
   computed, 
   makeObservable, 
   observable,
@@ -9,9 +10,10 @@ import {
 
 import type { CommerceService, LineItem, ObsLineItemRef } from '@hanzo/commerce/types'
 
-const logOn = false
+const LOG = false ////////////////////
+
 const log = (s: string) => {
-  if (logOn) {
+  if (LOG) {
     console.log('COMMERCE_UI ' + s)
   }
 }
@@ -69,7 +71,7 @@ class CommerceUIStore implements
 
   _currentSkuPath: string | undefined = undefined
   _closedByUser: boolean = false
-  _checkingOut: boolean = false
+  _checkingOut: boolean | undefined = undefined
   _ignoreStateChange: boolean = false
   _activePoint: SnapPoint | null = null 
   
@@ -116,6 +118,7 @@ class CommerceUIStore implements
       showCheckout: computed,
       snapPointPx: computed,
       state: computed,
+      open: computed
     })
   }
 
@@ -135,6 +138,16 @@ class CommerceUIStore implements
         }
       }
     ))
+    this._reactionDisposers.push(autorun(() => {
+      log('AUTORUN: OPEN: ' + this.open)
+      log('AUTORUN:' + // ===============
+        '[showCheckout: '  + this.showCheckout + 
+        '], [showAdded: ' + this.showAdded + 
+        '], [showBuy: ' + this.showBuy + 
+        '], [closedByUser: ' + this._closedByUser + 
+        '], [checkingOut: ' + this._checkingOut + ']'
+      ) // ===========
+    }))
   }
 
   reset = () => {
@@ -191,7 +204,7 @@ class CommerceUIStore implements
   get ignoreStateChange(): boolean { return this._ignoreStateChange }
   setIgnoreStateChange = (b: boolean): void => { this._ignoreStateChange = b}
 
-  get checkingOut(): boolean { return this._checkingOut }
+  get checkingOut(): boolean | undefined { return this._checkingOut }
   setCheckingOut = (b: boolean): void => { this._checkingOut = b }
 
   get activePoint(): SnapPoint | null { return this._activePoint }
@@ -218,26 +231,41 @@ class CommerceUIStore implements
   }
 
   get open(): boolean {
+
+    log('open():' + // ===============
+      ' showCheckout: '  + this.showCheckout + 
+      ' showAdded: ' + this.showAdded + 
+      ' showBuy: ' + this.showBuy
+    ) // ===========
+
+
+
     return ( 
-      !this.closedByUser 
+      this._checkingOut !== undefined
+      &&
+      !this._checkingOut 
+      &&
+      !this.closedByUser
       && 
       (this.showCheckout || this.showAdded || this.showBuy)
     )
   }
 
   get state(): DrawerState {
-    if (this.showBuy) {
-      return 'full'
-    }
-    else if (!this.closedByUser && (this.showAdded || this.showCheckout)) {
-      return 'micro'
+    if (!this.closedByUser && !this._checkingOut) {
+      if (this.showBuy) {
+        return 'full'
+      }
+      else if (this.showAdded || this.showCheckout) {
+        return 'micro'
+      }
     }
     return 'closed'
   }
 
   get showBuy(): boolean {return !!this.currentSkuPath}
-  get showAdded(): boolean { return !this._checkingOut && !!this.item}
-  get showCheckout(): boolean { return !this._checkingOut && !this._service.cartEmpty}
+  get showAdded(): boolean { return !!this.item}
+  get showCheckout(): boolean { return !this._service.cartEmpty}
   get modal(): boolean { return this.state !== 'micro'}
 
   get microHeight(): SnapPoint {

package/components/auth/login-panel.tsx

@@ -58,7 +58,7 @@ const LoginPanel: React.FC<{
               onClick={close}
               className='w-fit !min-w-0 p-2'
             >
-              <Logo size='md' spanClassName='!cursor-pointer' layout='text-only'/>
+              <Logo size='md' textClx='!cursor-pointer' variant='text-only'/>
             </Button>
             <Carousel
               options={{ align: 'center', loop: true }}

package/components/back-button.tsx

@@ -0,0 +1,42 @@
+'use client'
+import React from 'react'
+import { useRouter } from 'next/navigation'
+
+import { ChevronLeft } from 'lucide-react'
+
+
+import { 
+  Button, 
+  buttonVariants, 
+} from '@hanzo/ui/primitives'
+
+import type { VariantProps } from '@hanzo/ui/util'
+
+const BackButton: React.FC<{
+  variant?: VariantProps<typeof buttonVariants>['variant']
+  size?: VariantProps<typeof buttonVariants>['size']
+  clx?: string
+  iconClx?: string
+}> = ({
+  variant='ghost',
+  size='default',
+  clx='',
+  iconClx='',
+}) => {
+
+  const router = useRouter()
+  const back = () => {router.back()}
+
+  return (
+    <Button
+      variant={variant}
+      size={size}
+      onClick={back}
+      className={clx}
+    >
+      <ChevronLeft className={iconClx}/>
+    </Button> 
+  )
+}
+
+export default BackButton

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

@@ -1,56 +1,73 @@
 '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 } from '@hanzo/commerce'
+import { CartPanel, useCommerce } from '@hanzo/commerce'
+import { cn } from '@hanzo/ui/util'
 
-import * as Icons from '../../icons'
+import { BackButton, Logo, Tooltip } from '../..'
 import DesktopBagCarousel from './dt-bag-carousel'
-import CloseButton from './close-button'
-import { cn } from '@hanzo/ui/util'
 import LinksRow from './links-row'
 
 const DesktopCheckoutPanel: React.FC<PropsWithChildren & {
   index: number
   stepNames: string[]
-  close:() => void
+  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 className='w-full h-full bg-background flex flex-row items-start justify-end'>
-      <div className='w-full max-w-[750px] relative flex flex-col items-center justify-start p-8'>
-        <CloseButton close={close} size='md'/>
-        <div className='w-full max-w-[550px] mx-auto flex flex-col gap-3'>
-          <DesktopBagCarousel className='h-[260px] w-[360px] lg:w-[420px] mx-auto -mt-8' constrainTo={{w: 250, h: 250}}/>
+    <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-3' 
-            totalClx='sticky -bottom-1 p-1 bg-background'
+            itemClx='mb-2' 
+            totalClx='sticky bottom-0 bg-background'
             listClx='pr-3'
             scrollAfter={5}
-            scrollHeightClx='h-[50vh]'
+            scrollHeightClx='min-h-[50vh] grow'
             showPromoCode
             showShipping
+            selectItems
           />
         </div>
       </div>
     </div>
-    <div className='w-full h-full flex flex-col bg-level-1 min-h-screen justify-between'>
+    <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 className='bg-level-1 sticky h-30 pb-8 w-full top-0 flex justify-center items-end'>
+          <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 className='w-full max-w-[550px] mx-auto pb-10'>
+          <div key={2} className='w-full max-w-[550px] mx-auto pb-10'>
             {children}
           </div>
         </div>
@@ -63,5 +80,6 @@ const DesktopCheckoutPanel: React.FC<PropsWithChildren & {
     </div>
   </div>
 )
+})
 
 export default DesktopCheckoutPanel

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

@@ -6,7 +6,7 @@ import { cn } from '@hanzo/ui/util'
 import { AuthWidget } from '@hanzo/auth/components'
 import { CartAccordian } from '@hanzo/commerce'
 
-import CloseButton from './close-button'
+import { Logo } from '../..'
 import BagButton from '../bag-button'
 import LinksRow from './links-row'
 
@@ -25,7 +25,7 @@ const MobileCheckoutPanel: React.FC<PropsWithChildren & {
 
   <div /* id='MOBILE_GRID' */ className={cn('bg-background flex flex-col justify-start px-4', className)}>
     <div className='sticky top-0 w-full flex flex-row justify-between items-center bg-background'>
-      <CloseButton close={close} size='xs' />
+      <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>

package/components/commerce/desktop-nav-menu.tsx

@@ -5,7 +5,7 @@ import * as React from "react"
 import Link from "next/link"
 import { cn } from '@hanzo/ui/util'
 import type { LinkDef } from '@hanzo/ui/types'
-import type { LinkDefExtended } from "../../site-def/main-nav"
+import type { ChildMenu, LinkDefExtended } from "../../site-def/main-nav"
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -38,59 +38,25 @@ const DesktopNav: React.FC<{
                   </Link>
                 </NavigationMenuItem>
               )
-            } else if (el.title == 'Community') {
+            } else if (el.title == "Credit") {
               return (
                 <NavigationMenuItem key={index}>
                   <NavigationMenuTrigger>{el.title}</NavigationMenuTrigger>
-                  <NavigationMenuContent>
-                    <ul className="grid md:grid-cols-2 gap-3 p-6 md:w-[400px] lg:w-[500px]" key={index}>
-                      <li className="row-span-3" key='0'>
-                        <NavigationMenuLink asChild>
-                          <a
-                            className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
-                            href={el.href}
-                          >
-                            <Warpcast />
-                            <div className="mb-2 mt-4 text-lg font-medium">
-                              {el.title}
-                            </div>
-                            <p className="text-sm leading-tight text-muted-foreground">
-                              {el.details}
-                            </p>
-                          </a>
-                        </NavigationMenuLink>
-                      </li>
-                      {el.childMenu?.map((component, index) => (
-                        <div className="relative flex items-center my-2" key={index}>
-                          <div className="mr-2 mt-0">
-                          {component.icon}
-                          </div>
-                          <ListItem href={component.href} title={component.title} key={index}>
-                            {component.contents}
-                          </ListItem>
-                        </div>
-                      ))}
-
-                    </ul>
+                  <NavigationMenuContent className="!left-0">
+                    <div className="grid grid-cols-3 w-[846px]">
+                      {GroupChildMenu(el.childMenu)}
+                    </div>
                   </NavigationMenuContent>
                 </NavigationMenuItem>
               )
             } else {
               return (
                 <NavigationMenuItem key={index}>
-                  <NavigationMenuTrigger>{el.title}</NavigationMenuTrigger>
-                  <NavigationMenuContent>
-                    <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[500px] " key={index}>
-                      {el.childMenu?.map((component, index) => (
-                        <ListItem
-                          key={index}
-                          title={component.title}
-                          href={component.href}
-                        >
-                          {component.contents}
-                        </ListItem>
-                      ))}
-                    </ul>
+                  <NavigationMenuTrigger className=" !rounded-2xl">{el.title}</NavigationMenuTrigger>
+                  <NavigationMenuContent className="!left-0">
+                    <div className="flex flex-row">
+                      {GroupChildMenu(el.childMenu)}
+                    </div>
                   </NavigationMenuContent>
                 </NavigationMenuItem>
               )
@@ -128,3 +94,38 @@ const ListItem = React.forwardRef<
   )
 })
 ListItem.displayName = "ListItem"
+
+const GroupChildMenu = (childs: ChildMenu[] | undefined) => {
+  // Initialize groupedChildMenus with the type specification
+  if (!childs) {
+    return null
+  }
+  let groupedChildMenus = childs.reduce((grouped: Record<string, ChildMenu[]>, childLink) => {
+    if (childLink.groupName) {
+      if (!grouped[childLink.groupName]) {
+        grouped[childLink.groupName] = []
+      }
+      grouped[childLink.groupName].push(childLink)
+    }
+    return grouped
+  }, {} as Record<string, ChildMenu[]>) // added explicit type here
+
+  // Convert groups object to array
+  return Object.entries(groupedChildMenus).map(([groupName, childLinks]: [string, ChildMenu[]]) => { // added type specification here
+    return (
+      <div key={groupName} className={` py-4 px-4 ${groupName === "Elite Card" || groupName === "Sovereign Card" ? " -mt-34" : ""}` }>
+        <h2 className="text-muted-1">{groupName}</h2>
+        <ul className=" w-[200px] gap-3 md:w-[250px] lg:w-[250px]">
+          {childLinks.map((link) => (
+            <div className={"flex items-center"} key={link.title}>
+              {link.icon}
+              <ListItem key={link.title} title={link.title} href={link.href} className="text-muted-1 hover:text-primary hover:bg-transparent">
+                {link.contents}
+              </ListItem>
+            </div>
+          ))}
+        </ul>
+      </div>
+    )
+  })
+}

package/components/commerce/drawer/index.tsx

@@ -27,14 +27,6 @@ const CommerceUIComponent: React.FC = observer(() => {
     router.push('/checkout')
   }
 
-    // see handleCloseGesture()
-  const setOpen = (b: boolean): void => {
-    if (!b) {
-      if (!drawer.closedByUser) {
-        drawer.setClosedByUser(true)
-      }
-    }
-  }
 
   const handleHandleClicked = (): void => {
 
@@ -64,19 +56,10 @@ const CommerceUIComponent: React.FC = observer(() => {
     return false
   }
 
-
   return (
     <CommerceDrawer 
-      open={drawer.open} 
-      setOpen={setOpen}
-      snapPoints={drawer.points}
-      modal={drawer.modal}
-      activeSnapPoint={drawer.activePoint}
-      setActiveSnapPoint={drawer.onActivePointChanged.bind(drawer)}
       handleHandleClicked={handleHandleClicked}
       handleCloseGesture={handleCloseGesture}
-      micro={drawer.state === 'micro'}
-      mobile={drawer.isMobile}
       drawerClx='flex flex-col'
     >
       {drawer.state === 'full' && (

package/components/commerce/drawer/shell.tsx

@@ -1,5 +1,6 @@
 'use client'
 import React, {type PropsWithChildren } from 'react'
+import { observer } from 'mobx-react-lite'
 
 import { 
   Drawer, 
@@ -10,74 +11,75 @@ import {
 import { cn } from '@hanzo/ui/util'
 
 import '../../../style/drawer-handle-overrides.css'
+import { useCommerceDrawer } from '../../../commerce/ui/context'
 
 const CommerceDrawer: React.FC<PropsWithChildren & 
-  Omit<DrawerProps, 'onOpenChange'> & 
+  Omit<DrawerProps, 
+    'onOpenChange' | 
+    'open' | 
+    'snapPoints' | 
+    'modal' |
+    'setActiveSnapPoint' | 
+    'activeSnapPoint' 
+  > & 
   {
-    setOpen: (b: boolean) => void
     handleHandleClicked: () => void
     drawerClx?: string
-    mobile?: boolean
-    micro?: boolean
   }
-> = ({
+> = observer(({
   children,
-  open,
-  setOpen,
-  modal,
-  snapPoints,
-  setActiveSnapPoint,
-  activeSnapPoint,
   handleHandleClicked,
   drawerClx='',
-  mobile=false,
-  micro=false,
   ...rest
-}) => (
-    // @ts-ignore
-  <Drawer 
-    open={open} 
-    onOpenChange={setOpen} 
-    modal={modal} 
-    snapPoints={snapPoints}
-    setActiveSnapPoint={setActiveSnapPoint}
-    activeSnapPoint={activeSnapPoint}
-    fastDragSkipsToEnd={false}
-    dragHandleOnly={true}
-    handleHandleClicked={handleHandleClicked}
-    extendHandleDragRegion={false}
-//    debugOutput
-    {...rest}
-  >
-    <DrawerContent 
-      defaultHandle={false} 
-      className={cn(
-        'border-0',
-        //(micro ? (mobile ? 'mt-4 pt-1.5' : 'mt-5 pt-4') : 'mt-5 pt-5'),
-        mobile ? 'pt-5' : 'pt-6',
-        'w-full h-full',
-      )}
-       // https://github.com/radix-ui/primitives/discussions/935
-      onOpenAutoFocus={(e) => {e.preventDefault()}}
+}) => {
+  
+  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}
     >
-      <DrawerHandle 
+      <DrawerContent 
+        defaultHandle={false} 
         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-2',
-          mobile ? 'h-5 touch-pan-y' : 'h-6',
-        )} 
+          'border-0',
+          drawer.isMobile ? 'pt-5' : 'pt-6',
+          'w-full h-full',
+        )}
+        // https://github.com/radix-ui/primitives/discussions/935
+        onOpenAutoFocus={(e) => {e.preventDefault()}}
       >
-        <div className={cn(
-            // pseudo-handle
-          'rounded-[3px] bg-level-3',
-          mobile ? 'w-[155px] mt-[5px] h-1.5' : 'w-[180px] mt-[3px] h-2.5 hover:bg-level-4',
-          !mobile ? 'cursor-grab active:cursor-grabbing' : '',
-        )} />
-      </DrawerHandle>
-      {children}
-    </DrawerContent>
-  </Drawer>
-)
+        <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',
+          )} 
+        >
+          <div 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