@luxfi/core 4.3.15 → 4.3.18

package/components/commerce/bag-button.tsx

@@ -47,7 +47,7 @@ const BagButton: React.FC<{
       <div className={
         'z-above-content flex flex-col justify-center items-center  ' +
         'absolute left-0 right-0 top-0 bottom-0 ' + 
-        'leading-none font-sans font-bold text-primary-fg text-accent text-xs ' 
+        'leading-none font-sans font-bold text-foreground text-xs ' 
       }>
         <div className='h-[3px] w-full' />
         <div>{c.cartQuantity}</div>

package/components/commerce/checkout-panel/close-button.tsx

@@ -4,19 +4,22 @@ import React from 'react'
 import { cn } from '@hanzo/ui/util'
 
 import Logo from '../../logo'
+import type { TShirtSize } from '@hanzo/ui/types'
 
 const CloseButton: React.FC<{
   close: () => void
+  size?: TShirtSize 
   className?: string
 }> = ({
   close,
+  size,
   className=''
 }) => (
   <div
     onClick={close}
     className={cn('md:self-start', className)}
   >
-    <Logo layout='text-only' href='/'/>
+    <Logo layout='text-only' href='/' size={size}/>
   </div>    
 )
 

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

@@ -1,53 +1,67 @@
 'use client'
-
 import React, { type PropsWithChildren } from 'react'
 
-import { StepIndicator } from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
+import { ScrollArea, StepIndicator } from '@hanzo/ui/primitives'
+import { AuthWidget } from '@hanzo/auth/components'
 import { CartPanel } from '@hanzo/commerce'
 
 import * as Icons from '../../icons'
 import DesktopBagCarousel from './dt-bag-carousel'
+import CloseButton from './close-button'
+import { cn } from '@hanzo/ui/util'
+import LinksRow from './links-row'
 
 const DesktopCheckoutPanel: React.FC<PropsWithChildren & {
   index: number
   stepNames: string[]
+  close:() => void
   className?: string
 }> = ({
   index,
   stepNames,
+  close,
   className='',
   children
 }) => ( 
 
   <div /* id='CHECKOUT_PANEL' */  className={cn('grid grid-cols-2',  className)}>
-    <div className='w-full h-full flex flex-col items-center py-8 px-10'>
-      <div className='flex items-center justify-center pt-2'>
-        <Icons.bag className='fill-foreground mr-2 relative -top-1 w-6 h-7'/>
-        <p className='font-heading text-default'>Order Summary</p>
+    <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}}/>
+          <CartPanel 
+            className='w-full border-none p-0' 
+            itemClx='mb-3' 
+            totalClx='sticky -bottom-1 p-1 bg-background'
+            listClx='pr-3'
+            scrollAfter={5}
+            scrollHeightClx='h-[50vh]'
+            showPromoCode
+            showShipping
+          />
+        </div>
       </div>
-      <DesktopBagCarousel className='mx-auto' constrainTo={{w: 250, h: 250}}/>
-      <CartPanel 
-        className='w-full border-none p-0 pr-3' 
-        itemClx='mb-3' 
-        totalClx='sticky -bottom-1 p-1 bg-background'
-        scrollAfter={5}
-        scrollHeightClx='h-[45vh]'
-        selectItems
-        showPromoCode
-        showShipping
-      />
     </div>
-    <div className='w-full h-full flex flex-col gap-3 min-h-screen items-center py-8 px-10 bg-level-1'>
-      <StepIndicator
-        dotSizeRem={1.2}
-        steps={stepNames}
-        currentStep={index}
-        className='gap-2 text-sm w-pr-70'
-      />
-      {children}
+    <div 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'>
+            <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'>
+            {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
+export default DesktopCheckoutPanel

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

@@ -30,8 +30,10 @@ import DesktopCP from './dt-checkout-panel'
 import MobileCP from './mb-checkout-panel'
 
 const CheckoutPanel: React.FC<{
+  close: () => void
   className?: string
 }> = ({
+  close,
   className=''
 }) => {
 
@@ -72,6 +74,11 @@ 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
   const desktopElement = useRef<HTMLDivElement | null>(null)
@@ -90,11 +97,12 @@ const CheckoutPanel: React.FC<{
     }
   }, [])
 
-  const StepToRender = STEPS[stepIndex].Comp
+  const StepToRender = STEPS[stepIndex].Comp  
 
   return (<>
     <DesktopCP 
-      className={cn('h-full', className, 'hidden md:grid')} 
+      className={cn('h-full', className, 'hidden md:flex')} 
+      close={_close}
       index={stepIndex}
       stepNames={STEP_NAMES}
     >
@@ -104,6 +112,7 @@ const CheckoutPanel: React.FC<{
     </DesktopCP>
     <MobileCP 
       className={cn('h-full overflow-y-auto', className, 'md:hidden' )} 
+      close={_close}
       index={stepIndex}
       stepNames={STEP_NAMES}
     >
@@ -112,4 +121,4 @@ const CheckoutPanel: React.FC<{
   </>)
 }
 
-export default CheckoutPanel
+export default CheckoutPanel

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

@@ -9,8 +9,8 @@ const LinksRow: React.FC<{
   className=''
 }) => (
   <div className={cn('flex flex-col', className)}>
-    <Separator className='my-1'/>
-    <div className='flex gap-4 text-sm'>
+    <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>

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

@@ -1,32 +1,34 @@
 '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 CloseButton from './close-button'
 import BagButton from '../bag-button'
-import { StepIndicator } from '@hanzo/ui/primitives'
+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('flex flex-col items-center justify-start px-4 pt-11', className)}>
-    <StepIndicator 
-      dotSizeRem={0.8} 
-      steps={stepNames} 
-      currentStep={index} 
-      className='text-xs w-full'
-      muted
-    />
+  <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' />
+      {/* 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 
@@ -38,10 +40,17 @@ const MobileCheckoutPanel: React.FC<PropsWithChildren & {
           iconClx='fill-foreground '
         />
       } 
-      className='flex items-center justify-center py-2 w-full' 
+      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
+export default MobileCheckoutPanel

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

@@ -57,7 +57,7 @@ const DesktopBagPopup: React.FC<{
         <CartPanel 
           handleCheckout={() => {router.push('/checkout')}} 
           className='mt-4 mb-4 border-none py-0 px-4'
-          listClx='rounded-sm'
+          listClx='rounded-sm pr-3'
           scrollAfter={5}
           scrollHeightClx='h-[70vh]'
           itemClx='mt-3'

package/components/commerce/mobile-bag-drawer.tsx

@@ -25,7 +25,7 @@ const MobileBagDrawer: React.FC<{
         <CartPanel 
           handleCheckout={handleCheckout} 
           className='mt-4 mb-4 border-none py-0 px-4 w-full '
-          listClx='rounded-sm'
+          listClx='rounded-sm pr-3'
           scrollAfter={5}
           itemClx='mt-2'
           totalClx='sticky px-1 pr-2 border rounded-sm -bottom-[1px] bg-background'

package/components/icons/bag-icon.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 import { type LucideProps } from 'lucide-react'
 
 const BagIcon: React.FC<LucideProps> = (props: LucideProps) => (
-  <svg fill="currentColor" viewBox='0 0 20 23' {...props}>
-    <path fillRule="evenodd" d="M5 5a5 5 0 0 1 10 0v1h-2V5a3 3 0 1 0-6 0v1H5V5Zm0 1v4h2V6h6v4h2V6h3.5a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1h-17a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1H5Z" clipRule="evenodd"/>
+  <svg fill="none" viewBox="0 0 15 18" {...props}>
+    <path d="m13.6501 5.19282h-2.3255v-.82146c0-2.01258-1.74959-3.634971-3.87568-3.634971s-3.87572 1.622401-3.87572 3.634971v.82146h-2.32543c-.31008 0-.553678.22588-.553678.51341v10.26827c0 .7393.642278 1.3349 1.439548 1.3349h10.63056c.7973 0 1.4395-.5956 1.4395-1.3349v-10.26827c0-.28753-.2436-.51341-.5536-.51341zm-8.96955-.84198c0-1.43756 1.24021-2.60814 2.76837-2.60814 1.52815 0 2.76838 1.17055 2.76838 2.60814v.82146h-5.53675zm8.08365 11.93176h-10.63056c-.1772 0-.3322-.1438-.3322-.3081v-9.75484h1.77176v2.83405c0 .28753.2436.51341.55367.51341.31008 0 .55368-.22588.55368-.51341v-2.83405h5.53675v2.83405c0 .28753.2436.51341.5537.51341.31 0 .5536-.22588.5536-.51341v-2.83405h1.7718v9.75484c0 .1643-.155.3081-.3322.3081z" fill="currentColor"/>
   </svg>
 )
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxfi/core",
-  "version": "4.3.15",
+  "version": "4.3.18",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "@hanzo/auth": "2.3.6",
-    "@hanzo/commerce": "6.3.3",
+    "@hanzo/commerce": "6.3.4",
     "@hanzo/ui": "3.6.3",
     "@next/third-parties": "^14.1.0",
     "embla-carousel-autoplay": "^8.0.1",