@luxfi/core 4.3.11 → 4.3.13

package/components/auth/login-panel.tsx

@@ -7,6 +7,7 @@ import { LoginPanel as Login } from '@hanzo/auth/components'
 
 import { Logo } from '..'
 import LuxLogo from '../icons/lux-logo'
+import { legal } from '../../site-def/footer'
 
 const LoginPanel: React.FC<{
   close: () => void
@@ -21,6 +22,9 @@ const LoginPanel: React.FC<{
   className='',
   reviews
 }) => {
+  const termsOfServiceUrl = legal.find(({title}) => title === 'Terms and Conditions')?.href || ''
+  const privacyPolicyUrl = legal.find(({title}) => title === 'Privacy Policy')?.href || ''
+
   return (
     <div className={cn('grid grid-cols-1 md:grid-cols-2', className)}>
       <div className='hidden md:flex w-full h-full bg-level-1 flex-row items-end justify-end overflow-y-auto min-h-screen'>
@@ -62,13 +66,12 @@ const LoginPanel: React.FC<{
             >
               <LuxLogo className='w-5 h-5'/>
             </Button>
-            {/* TODO: add Terms of Service and Privacy Policy links */}
             <Login 
               getStartedUrl={getStartedUrl} 
               redirectUrl={redirectUrl}
               className='w-full max-w-sm'
-              termsOfServiceUrl=''
-              privacyPolicyUrl=''
+              termsOfServiceUrl={termsOfServiceUrl}
+              privacyPolicyUrl={privacyPolicyUrl}
             />
           </div>
         </div>

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

@@ -1,66 +1,51 @@
 'use client'
+
 import React, { type PropsWithChildren } from 'react'
 
-import { ScrollArea } from '@hanzo/ui/primitives'
+import { StepIndicator } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
-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 LinksRow from './links-row'
-import StepsIndicator from './steps-indicator'
 
 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)}>
-    <ScrollArea className='w-full h-full bg-level-1 flex flex-row items-start overflow-y-auto min-h-screen'>
-      <div className='h-full w-full flex justify-end'>
-        <div className='h-full w-full max-w-[750px] px-8 pt-0'>
-          <div className='h-full w-full max-w-[550px] mx-auto flex flex-col gap-3 justify-end min-h-screen'>
-            <div className='flex flex-col gap-3 h-30 justify-center'>
-              <CloseButton close={close} />
-              <StepsIndicator currentStep={index} stepNames={stepNames}/>
-            </div>
-            {children}
-            <LinksRow className='mt-auto mb-3' />
-          </div>
-        </div>
-      </div>
-    </ScrollArea>
-    <div className='w-full h-full bg-background flex flex-row items-start justify-start'>
-      <div className='w-full max-w-[750px] relative flex flex-col items-center justify-start px-8 pt-0'>
-        <AuthWidget noLogin className='hidden md:flex absolute top-4 right-4 '/>
-        <div className='flex items-center justify-center h-30'>
-          <Icons.bag className='fill-foreground mr-2 relative -top-1 w-6 h-7'/>
-          <p className='font-heading text-default'>Order Summary</p>
-        </div>
-        <div className='w-full max-w-[550px] mx-auto'>
-          <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 pr-3' 
-            itemClx='mb-3' 
-            totalClx='sticky bottom-0 p-1 bg-background'
-            scrollAfter={5}
-            scrollHeightClx='h-[50vh]'
-            selectItems
-            showPromoCode
-            showShipping
-          />
-        </div>
+    <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>
+      <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>
   </div>
 )

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

@@ -30,10 +30,8 @@ import DesktopCP from './dt-checkout-panel'
 import MobileCP from './mb-checkout-panel'
 
 const CheckoutPanel: React.FC<{
-  close: () => void
   className?: string
 }> = ({
-  close,
   className=''
 }) => {
 
@@ -74,11 +72,6 @@ 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)
@@ -101,8 +94,7 @@ const CheckoutPanel: React.FC<{
 
   return (<>
     <DesktopCP 
-      className={cn('h-full', className, 'hidden md:flex')} 
-      close={_close}
+      className={cn('h-full', className, 'hidden md:grid')} 
       index={stepIndex}
       stepNames={STEP_NAMES}
     >
@@ -112,7 +104,6 @@ const CheckoutPanel: React.FC<{
     </DesktopCP>
     <MobileCP 
       className={cn('h-full overflow-y-auto', className, 'md:hidden' )} 
-      close={_close}
       index={stepIndex}
       stepNames={STEP_NAMES}
     >

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

@@ -1,35 +1,32 @@
 'use client'
+
 import React, { type PropsWithChildren } from 'react'
 
 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 LinksRow from './links-row'
-import StepsIndicator from './steps-indicator'
+import { StepIndicator } from '@hanzo/ui/primitives'
 
 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'>
-      <CloseButton close={close} />
-      <StepsIndicator currentStep={index} stepNames={stepNames}/>
-  	  {/* 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>
+  <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
+    />
     <CartAccordian 
       icon={
         <BagButton 
@@ -44,7 +41,6 @@ const MobileCheckoutPanel: React.FC<PropsWithChildren & {
       className='flex items-center justify-center py-2 w-full' 
     />
     {children}
-    <LinksRow className='mt-auto mb-3 pt-2' />
   </div>
 )
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxfi/core",
-  "version": "4.3.11",
+  "version": "4.3.13",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -19,7 +19,7 @@
     "luxdefi"
   ],
   "scripts": {
-    "lat": "npm show @luxfi/common version",
+    "lat": "npm show @luxfi/core version",
     "pub": "npm publish",
     "build": "tsc",
     "tc": "tsc",
@@ -39,8 +39,8 @@
     "./conf": "./conf/index.ts"
   },
   "dependencies": {
-    "@hanzo/auth": "2.3.5",
-    "@hanzo/commerce": "6.3.2",
+    "@hanzo/auth": "2.3.6",
+    "@hanzo/commerce": "6.3.3",
     "@hanzo/ui": "3.6.3",
     "@next/third-parties": "^14.1.0",
     "embla-carousel-autoplay": "^8.0.1",

package/site-def/footer/legal.ts

@@ -3,12 +3,12 @@ import type { LinkDef } from '@hanzo/ui/types'
 const legal: LinkDef[] = [
   {
     title: 'Terms and Conditions',
-    href: '/terms',
+    href: 'https://docs.google.com/document/d/1mvkjr1w8Rv8ttirs1mu-_2fw_PXclOyS/preview',
     newTab: true,
   },
   {
     title: 'Privacy Policy',
-    href: '/privacy',
+    href: 'https://docs.google.com/document/d/1vZjOKaNdOoThDIaVLERWxflQLtOsuvLn/preview',
     newTab: true,
   },
 ]