@luxfi/ui 8.0.0 → 8.2.0

package/src/site/components/auth/login.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+
+import { cn } from '@hanzo/ui'
+import { Login as IamLogin, useIam } from '@hanzo/iam/react'
+
+import { remember } from './resume'
+
+  /**
+   * Sign-in rendered in place, on this site's own domain: IAM mints an
+   * authorization code bound to a PKCE challenge and the form navigates to
+   * /auth/callback to redeem it. No credential ever reaches this bundle's
+   * origin, and there is one sign-in surface rather than one per app.
+   */
+const Login: React.FC<{
+  className?: string
+  onSuccess?: (token: string) => void
+}> = ({
+  className,
+  onSuccess
+}) => {
+
+  const { config } = useIam()
+    /* OIDC anti-CSRF nonce, one per mounted form. */
+  const [state] = useState(() => crypto.randomUUID())
+
+    /* Sign-in leaves for /auth/callback, so record the page holding this form to
+      come back to. */
+  useEffect(remember, [])
+
+  return (
+    <IamLogin
+      serverUrl={config.serverUrl}
+      clientId={config.clientId}
+      redirectUri={config.redirectUri}
+      organization={config.organization}
+      state={state}
+        /* Naming a class replaces the view's own, so keep both: the site skins
+          .hanzo-iam-* once, in lux-global.css. */
+      className={cn('hanzo-iam-card', className)}
+      onSuccess={onSuccess}
+    />
+  )
+}
+
+export default Login

package/src/site/components/auth/provider.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import React, { type PropsWithChildren } from 'react'
+
+import { IamProvider } from '@hanzo/iam/react'
+import { BRAND_SERVER_URLS } from '@hanzo/iam/paths'
+import type { IAMConfig } from '@hanzo/iam/browser'
+
+  /* These are Lux sites, so they sign in at Lux's own issuer. Naming another
+    brand's would send a Lux user to a login page that has never heard of the
+    redirect_uri they came from. */
+const ORG = 'lux'
+
+  /* Where the authorization code comes back. Every site mounts <Callback/> here. */
+const CALLBACK = '/auth/callback'
+
+  /* The OAuth client a site presents itself as: the `<org>-<app>` pair registered
+    on lux.id, so lux.shop is `lux-shop`. */
+const configure = (app: string): IAMConfig => ({
+  serverUrl: BRAND_SERVER_URLS[ORG],
+  organization: ORG,
+  clientId: `${ORG}-${app}`,
+    /* Read per render rather than at module load: one bundle serves the real
+      host and any preview of it, and each must redeem its code back to itself. */
+  redirectUri: (typeof window === 'undefined' ? '' : window.location.origin) + CALLBACK,
+})
+
+  /* Provider is memoized on the config's values, not its identity, so building a
+    fresh object here does not rebuild the SDK. */
+const Auth: React.FC<{ app: string } & PropsWithChildren> = ({ app, children }) => (
+  <IamProvider config={configure(app)}>{children}</IamProvider>
+)
+
+export default Auth

package/src/site/components/auth/resume.ts

@@ -0,0 +1,16 @@
+  /* Where the visitor was when they chose to sign in. The OIDC round-trip lands
+    on /auth/callback, so without this every sign-in would end at the home page.
+    Session-scoped: it describes one trip through the browser, not a preference. */
+const KEY = 'lux-auth-resume'
+
+const remember = () => {
+  sessionStorage.setItem(KEY, window.location.pathname + window.location.search)
+}
+
+const resume = (): string => {
+  const to = sessionStorage.getItem(KEY)
+  sessionStorage.removeItem(KEY)
+  return to ?? '/'
+}
+
+export { remember, resume }

package/src/site/components/auth/widget.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import React, { useContext } from 'react'
+
+import { Button, Popover, PopoverContent, PopoverTrigger, Separator } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui'
+import { IamContext, useIam, useIamIdentity } from '@hanzo/iam/react'
+
+import { remember } from './resume'
+
+interface Props {
+    /** Hide the sign-in button, leaving only the profile of an already signed-in
+      user. Checkout wants this: it has its own sign-in step. */
+  noLogin?: boolean
+  className?: string
+    /** Sign in in place instead of leaving for lux.id — the mobile drawer opens
+      its own panel. */
+  handleLogin?: () => void
+}
+
+const Widget: React.FC<Props> = ({
+  noLogin = false,
+  handleLogin,
+  className
+}) => {
+
+  const { isAuthenticated, isLoading, login, logout } = useIam()
+  const identity = useIamIdentity()
+
+    /* Say nothing until the stored token has been read, rather than flashing
+      "Login" at someone who is already signed in. */
+  if (isLoading) {
+    return null
+  }
+
+  if (!isAuthenticated) {
+    return noLogin ? null : (
+      <Button
+        variant='primary'
+        className={cn('h-8 w-fit !min-w-0', className)}
+        onClick={handleLogin ?? (() => { remember(); void login() })}
+      >
+        Login
+      </Button>
+    )
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant='outline'
+          size='icon'
+          className={cn('rounded-full text-muted border-2 border-muted bg-level-1 hover:bg-level-2 hover:border-foreground hover:text-foreground uppercase w-8 h-8', className)}
+        >{identity?.initials}</Button>
+      </PopoverTrigger>
+      <PopoverContent className='bg-level-0'>
+        <div className='grid gap-4'>
+          <div className='space-y-2 truncate'>
+            <h4 className='font-medium leading-none truncate'>{identity?.name}</h4>
+            {identity?.email && identity.email !== identity.name && (
+              <p className='text-sm opacity-50 truncate'>{identity.email}</p>
+            )}
+          </div>
+          <Separator />
+          <Button variant='outline' onClick={() => { logout() }}>Logout</Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+  /* The widget rides in shared chrome, and not every site mounts <Auth> —
+    app/credit carries its own root layout. A site that offers no sign-in shows
+    no sign-in, which is why the context is read before any hook that needs it. */
+const AuthWidget: React.FC<Props> = (props) => (
+  useContext(IamContext) ? <Widget {...props} /> : null
+)
+
+export default AuthWidget

package/src/site/components/back-button.tsx

@@ -0,0 +1,46 @@
+'use client'
+import React from 'react'
+import { useRouter } from 'next/navigation'
+
+import { ChevronLeft } from 'lucide-react'
+
+import { 
+  Button, 
+  buttonVariants, 
+} from '@hanzo/ui/primitives'
+import { css, type ButtonSize, type ButtonVariant } from '@hanzo/ui'
+const BackButton: React.FC<{
+  variant?: { variant?: ButtonVariant | null; size?: ButtonSize | null }['variant']
+  size?: { variant?: ButtonVariant | null; size?: ButtonSize | null }['size']
+  onBack?: () => void
+  clx?: string
+  iconClx?: string
+}> = ({
+  variant='ghost',
+  size='default',
+  clx='',
+  iconClx='',
+  onBack
+}) => {
+
+  const router = useRouter()
+  const back = () => {
+    if (onBack) {
+      onBack()
+    }
+    router.back()
+  }
+
+  return (
+    <Button
+      variant={variant}
+      size={size}
+      onClick={back}
+      className={clx}
+    >
+      <ChevronLeft style={css(iconClx)}/>
+    </Button> 
+  )
+}
+
+export default BackButton

package/src/site/components/chat-widget.tsx

@@ -0,0 +1,83 @@
+'use client'
+import React from 'react'
+
+import { Button, Card } from '@hanzo/ui/primitives'
+import { Box, cn } from '@hanzo/ui'
+import { LuxLogo } from '@luxfi/logo'
+import type { ChatbotSuggestedQuestion } from '../types'
+
+const ChatWidget: React.FC<{
+  title: string
+  chatbotUrl: string
+  subtitle?: string
+  question?: string
+  buttonClx?: string
+  /* 
+    ChatBotSuggestQuestion.icon
+    Currently supports these icons from remix icons (https://remixicon.com/):
+      GlobalLineIcon,
+      ShieldFlashLineIcon,
+      BankCardLineIcon,
+      GroupLineIcon,
+      QuestionnaireLineIcon
+  */
+  suggestedQuestions?: ChatbotSuggestedQuestion[]
+}> = ({
+  title,
+  chatbotUrl,
+  subtitle,
+  question,
+  suggestedQuestions,
+  buttonClx=''
+}) => {
+
+  const [showChatbot, setShowChatbot] = React.useState<boolean>(false)
+
+  const onClick = () => { setShowChatbot(!showChatbot) }
+
+  const searchParams = new URLSearchParams()
+  if (question) {
+    searchParams.append('question', question)
+  }
+  if (suggestedQuestions) {
+    searchParams.append('sQuestions', suggestedQuestions.map(({ message }) => message).join(','))
+    searchParams.append('sHeadings', suggestedQuestions.map(({ heading }) => heading).join(','))
+    searchParams.append('sIcons', suggestedQuestions.map(({ icon }) => icon).join(','))
+  }
+
+  const iframeSrc = `${chatbotUrl}?${searchParams.toString()}`
+
+  return (<>
+    <Box className={
+      'fixed bottom-0 sm:bottom-16 right-0 w-full h-full ' +
+      'sm:max-w-[400px] sm:max-h-[550px] sm:px-4 z-floating ' +
+      (showChatbot ? 'flex' : 'hidden')
+    }>
+      <Card className='flex flex-col h-full w-full'>
+        <div className='flex px-4 py-2 h-12 bg-level-0 items-center justify-between'>
+          <h1 className='font-semibold font-heading'>{title} <span className='opacity-60'>{subtitle}</span></h1>
+          <Button onClick={onClick} variant='link' size='icon' className='w-fit sm:hidden'>
+            <LuxLogo variant='white' size={24}/>
+          </Button>
+        </div>
+        <iframe src={iframeSrc} className='h-full' />
+      </Card>
+    </Box>
+
+    <Box tag="span"
+      onClick={onClick}
+      className={cn(
+          // z-index should be below anything in commerce-iu (buy drawer and checkout widget)
+        'fixed bottom-5 right-[24px] md:z-floating z-16 cursor-pointer',
+        'hover:drop-shadow-[0_2px_6px_rgba(255,255,255,1)]',
+        'transition-transform', 
+        showChatbot ? 'rotate-180' : '',
+        buttonClx
+      )}
+    >
+      <LuxLogo variant='white' size={28} />
+    </Box>
+  </>)
+}
+
+export default ChatWidget

package/src/site/components/commerce/bag-button.tsx

@@ -0,0 +1,99 @@
+'use client'
+import React, { useEffect, useRef } from 'react'
+import { observable, type IObservableValue, reaction, runInAction } from 'mobx'
+import { observer } from 'mobx-react-lite'
+
+import { buttonVariants } from '@hanzo/ui/primitives'
+import { Box, cn, type ButtonSize, type ButtonVariant } from '@hanzo/ui'
+import { useCommerce } from '@hanzo/commerce'
+
+import { Bag } from '../icons'
+
+const BagButton: React.FC<{
+  showIfEmpty?: boolean  
+  animateOnHover?: boolean
+  animateOnQuantityChange?: boolean
+  size?: { variant?: ButtonVariant | null; size?: ButtonSize | null }['size']
+  className?: string
+  iconClx?: string
+  onClick?: () => void
+}> = observer(({
+  showIfEmpty=false,
+  animateOnHover=true,
+  animateOnQuantityChange=true,
+  size='default',
+  className='',
+  iconClx='',
+  onClick
+}) => {
+
+  const c = useCommerce()
+  const wiggleRef = useRef<IObservableValue<'more' | 'less' | 'none'>>(observable.box('none'))
+
+  useEffect(() => (
+      // return IReactionDisposer
+    (animateOnQuantityChange && c) ? reaction(
+      () => (c.cartQuantity),
+      (curr, prev) => {
+        if (curr > prev) {
+          runInAction(() => {wiggleRef.current.set('more')})   
+        }
+        else {
+          runInAction(() => {wiggleRef.current.set('less')})   
+        }    
+        setTimeout(() => {
+            // Note that this doesn't actually stop the animation
+            // just resets the styles
+          runInAction(() => {wiggleRef.current.set('none')})    
+        }, 800)
+      }
+    ) : undefined
+  ), [])
+
+    // undefined means context is not installed, ie commerce functions are not in use
+  if (!c || (!showIfEmpty && c.cartEmpty)) {
+    return <div /> // trigger code needs non-null 
+  }
+
+
+  return (
+    <Box
+      aria-label="Bag"
+      role='button'
+      onClick={onClick}
+      className={cn(
+        buttonVariants({ variant: 'ghost', size }),
+          'rounded-md',
+          // Overides the bg change on hover --not a "hover effect" 
+        'relative group p-0 aspect-square hover:bg-background', 
+        ((wiggleRef.current.get() === 'more') ? 
+          'item-added-to-cart-animation' 
+          : 
+          (wiggleRef.current.get() === 'less') ? 'item-removed-from-cart-animation' : ''), 
+        className
+      )}
+    >
+    {!c.cartEmpty && (
+      <Box 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-xs ' 
+      }>
+        <div className='h-[3px] w-full' />
+        <div>{c.cartQuantity}</div>
+      </Box>
+    )}
+      <Bag width='24' height='28' className={cn(
+        'relative -top-[3px] fill-primary',
+        iconClx,
+        (animateOnHover ? 
+          'group-hover:fill-primary-hover group-hover:scale-105 transition-scale transition-duration-300'
+          : 
+          ''
+        ) 
+      )} aria-hidden="true" />
+    </Box>            
+  )
+})
+
+export default BagButton

package/src/site/components/commerce/buy-button.tsx

@@ -0,0 +1,33 @@
+'use client'
+import React, {type PropsWithChildren} from 'react'
+
+import { Button, buttonVariants } from '@hanzo/ui/primitives'
+
+import { cn, type ButtonSize, type ButtonVariant } from '@hanzo/ui'
+import { useSelectAndBuy } from '../../commerce/ui/context'
+
+const BuyButton: React.FC<
+  PropsWithChildren & 
+  { variant?: ButtonVariant | null; size?: ButtonSize | null } & 
+  {
+    skuPath: string
+    className?: string 
+  }
+> = ({
+  skuPath,
+  children,
+  className='',
+  ...rest
+}) => {
+
+  const buyOptions = useSelectAndBuy()
+  const handleClick = (): void => { buyOptions.showVariants(skuPath) }
+  
+  return (
+    <Button onClick={handleClick} {...rest} className={cn(className, '')}>
+      {children}
+    </Button>
+  )
+}
+
+export default BuyButton

package/src/site/components/commerce/checkout-button.tsx

@@ -0,0 +1,131 @@
+'use client'
+import React, { useEffect, useRef } from 'react'
+import { observable, type IObservableValue, reaction, runInAction } from 'mobx'
+import { observer } from 'mobx-react-lite'
+
+import { Button, type ButtonProps } from '@hanzo/ui/primitives'
+import { Box, cn } from '@hanzo/ui'
+import { useCommerce } from '@hanzo/commerce'
+
+import { Bag } from '../icons'
+
+const IconAndQuantity: React.FC<{
+  animateOnQuantityChange?: boolean
+  showArrow?: boolean
+  showQuantity?: boolean
+  clx?: string
+  iconClx?: string
+  digitClx?: string
+}> = observer(({
+  animateOnQuantityChange=false,
+  showArrow=true,
+  showQuantity=true,
+  clx='',
+  iconClx='',
+  digitClx=''
+}) => {
+
+  const cmmc = useCommerce()
+  const wiggleRef = useRef<IObservableValue<'more' | 'less' | 'none'>>(observable.box('none'))
+
+  useEffect(() => (
+      // return IReactionDisposer
+    animateOnQuantityChange ? reaction(
+      () => (cmmc.cartQuantity),
+      (curr, prev) => {
+        if (curr > prev) {
+          runInAction(() => {wiggleRef.current.set('more') })  
+        }
+        else {
+          runInAction(() => {wiggleRef.current.set('less')  })  
+        }    
+        setTimeout(() => {
+            // Note that this doesn't actually stop the animation
+            // just resets the styles
+          runInAction(() => {wiggleRef.current.set('none') })   
+        }, 800)
+      }
+    ) : undefined
+  ), [])
+
+  return (
+    <Box className={cn('flex items-center justify-center', clx)}>
+    {showQuantity && (
+      <Box className={cn(
+        'relative flex items-center justify-center mr-1', 
+        ((wiggleRef.current.get() === 'more') ? 
+          'item-added-to-cart-animation' 
+          : 
+          (wiggleRef.current.get() === 'less') ? 'item-removed-from-cart-animation' : ''), 
+      )} >
+        {cmmc.cartQuantity > 0 && (
+        <Box className={cn(
+          'z-above-content flex flex-col justify-center items-center',
+          'absolute left-0 right-0 top-0 bottom-0',
+          digitClx
+        )}>
+          <div style={{/* color: 'white'  tailwind bug? ,*/ fontSize: '11px', position: 'relative', top: '1px' }}>{cmmc.cartQuantity}</div>
+        </Box>
+        )}
+        <Bag width='19' height='24' className={cn('relative -top-[3px] opacity-70' , iconClx)} aria-hidden="true" />
+      </Box>            
+    )}
+      {showArrow && (<span style={{fontSize: '17px',}}>&rsaquo;</span>)}
+    </Box>
+  )
+})  
+
+const CheckoutButton: React.FC<ButtonProps & {
+  handleCheckout: () => void
+  showQuantity?: boolean
+  showArrow?: boolean
+  animateOnQuantityChange?: boolean
+  centerText?: boolean
+  /** A corner off the radius scale. It was a Button variant in the 5.x line. */
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'
+}> = ({
+  handleCheckout,
+  variant='primary',
+  rounded='lg',
+  className,
+  showQuantity=true,
+  showArrow=true,
+  animateOnQuantityChange=true,
+  centerText=true,
+  children,
+  ...rest
+}) => {
+
+  return (
+    <Button 
+      {...rest}
+      onClick={handleCheckout} 
+      variant={variant}
+      className={cn(`rounded-${rounded}`, cn(
+        'flex justify-between items-stretch group', 
+        showQuantity ? (centerText ? 'px-1.5' : 'pl-2.5 pr-1.5') : '',
+        className, 
+      ))}
+      
+    >
+      {centerText && ( // must scale this one too, as it effects layout
+        <IconAndQuantity 
+          showArrow={showArrow} 
+          showQuantity={showQuantity}
+          clx='invisible group-hover:scale-105 transition-scale transition-duration-300'
+        />
+      )}
+      {children ?? (<div className='flex justify-center items-center'>Checkout</div>)}
+      <IconAndQuantity 
+        clx='group-hover:scale-105 transition-scale transition-duration-300'
+        animateOnQuantityChange={animateOnQuantityChange}
+        showArrow={showArrow} 
+        showQuantity={showQuantity}
+        iconClx='fill-background'
+        digitClx='text-foreground group-hover:opacity-80 leading-none font-bold font-sans' 
+      />
+    </Button>
+  )
+}
+
+export default CheckoutButton

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

@@ -0,0 +1,65 @@
+'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, css } from '@hanzo/ui'
+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 ">
+          <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 style={css('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/src/site/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/src/site/components/commerce/checkout-panel/desktop-bag-carousel.tsx

@@ -0,0 +1,36 @@
+'use client'
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { 
+  useCommerce, 
+  CarouselItemSelector, 
+  type CarouselItemSelectorPropsExt 
+} from '@hanzo/commerce'
+
+const DesktopBagCarousel: React.FC<{
+  constrainTo: {w: number, h: number}
+  className?: string
+}> = observer(({
+  constrainTo,
+  className=''
+  
+}) => {
+  const cmmc = useCommerce()
+  return (
+    <CarouselItemSelector 
+      items={cmmc.cartItems} 
+      selectedItemRef={cmmc}
+      scrollable={false} // ignored
+      selectSku={cmmc.setCurrentItem.bind(cmmc)}
+      clx={className}
+      ext={{
+        options: {loop: true},  
+        constrainTo,  
+        imageOnly: true
+      } satisfies CarouselItemSelectorPropsExt}
+    />
+  )
+})
+
+export default DesktopBagCarousel