@luxfi/ui 8.1.0 → 8.2.0

package/src/site/commerce/ui/store.ts

@@ -0,0 +1,295 @@
+import { 
+  action,
+  autorun,
+  computed, 
+  makeObservable, 
+  observable, observableRef,
+  reaction,
+  type IReactionDisposer, 
+} from 'mobx'
+
+import type { CommerceService } from '@hanzo/commerce/types'
+
+const LOG = true ////////////////////
+const log = (s: string) => {
+  if (LOG) {
+    console.log('COMMERCE_UI ' + s)
+  }
+}
+
+type SnapPoint = number | string
+
+type SnapPoints = {
+  full: SnapPoint
+  micro: SnapPoint
+}
+  
+type SnapPointsConfig = {
+  mb: SnapPoints
+  dt: SnapPoints
+}
+
+type DrawerState = 'closed' | 'micro' | 'full' 
+
+interface SelectAndBuy {
+  showVariants: (skuPath: string) => void
+  showRecentVariants: () => void
+  hideVariants: () => void
+  get currentSkuPath(): string | undefined
+  newRoute: () => void
+}
+
+interface CommerceDrawer {
+
+  get open(): boolean
+  get state(): DrawerState 
+  get closedByUser(): boolean
+  setClosedByUser(b: boolean): void
+  get modal(): boolean
+  get points(): SnapPoint[] 
+  get activePoint(): SnapPoint | null
+    // Called by UI Gesture
+  onActivePointChanged: (p: SnapPoint | null) => void
+  get showCheckout(): boolean
+  get showRecent(): boolean
+  get showBuy(): boolean
+
+  get microHeight(): SnapPoint
+  get isMobile(): boolean
+  get snapPointPx(): number
+}
+
+class CommerceUIStore implements 
+  SelectAndBuy,
+  CommerceDrawer
+{
+  _vHeight: number = 0
+  _routeChangedTime = 0
+
+  _currentSkuPath: string | undefined = undefined
+  _closedByUser: boolean = false
+  _checkingOut: boolean | undefined = undefined
+  _ignoreStateChange: boolean = false
+  _activePoint: SnapPoint | null = null 
+  
+  _reactionDisposers: IReactionDisposer[] = []
+  _service: CommerceService
+  _pointsConfig: SnapPointsConfig 
+  _points: SnapPoints  // points to either this._pointsConfig.md or this._pointsConfig.dt 
+
+  constructor(s: CommerceService, conf: SnapPointsConfig) {
+    this._service = s
+    this._pointsConfig = conf
+    this._points = this._pointsConfig.dt
+
+    makeObservable(this, {
+      _currentSkuPath: observable,
+      _closedByUser: observable,
+      _checkingOut: observable,
+      _activePoint: observable,
+      _points: observableRef, 
+      _vHeight: observable,
+      _routeChangedTime: observable,
+
+      showVariants: action,
+      showRecentVariants: action,
+      hideVariants: action,
+      setClosedByUser: action,
+      setCheckingOut: action,
+      setActivePoint: action,
+      setMobile: action,
+      setViewportHeight: action,
+      setRouteChangedTime: action,
+      
+      activePoint: computed,
+      checkingOut: computed,
+      closedByUser: computed,
+      currentSkuPath: computed,
+      microHeight: computed,
+      modal: computed,
+      points: computed,
+      showRecent: computed,
+      showBuy: computed,
+      showCheckout: computed,
+      snapPointPx: computed,
+      state: computed,
+      open: computed
+    })
+  }
+
+  initialize = (): void => {
+
+    this._reactionDisposers.push(reaction(
+      () => ( this.state ),
+      (s) => {
+        if (this.ignoreStateChange) {
+          log(`STATE CHANGE to "${s}" (IGNORED)`) // ===========
+          this.setIgnoreStateChange(false)
+          return
+        }
+        else {
+          log(`STATE CHANGE to "${s}" (UI REACTED)`) // ===========
+          this._syncUIToState(s)
+        }
+      }
+    ))
+    /*
+    this._reactionDisposers.push(autorun(() => {
+      log('AUTORUN: OPEN: ' + this.open)
+      log('AUTORUN:' + // ===============
+        '[showCheckout: '  + this.showCheckout + 
+        '], [showRecent: ' + this.showRecent + 
+        '], [showBuy: ' + this.showBuy + 
+        '], [closedByUser: ' + this._closedByUser + 
+        '], [checkingOut: ' + this._checkingOut + ']'
+      ) // ===========
+    }))
+    */
+  }
+
+  newRoute = () => {
+    this.setRouteChangedTime(new Date().getTime())
+    this.hideVariants()
+    this.setClosedByUser(false)
+    // DO NOT reset _checkingOut!
+  }
+
+  onActivePointChanged = (newPoint: SnapPoint | null): void => { 
+    log("ON onActivePointChanged: " +  newPoint) // ===========
+    if (newPoint === this._points.micro && this.activePoint === this._points.full) {
+      log("ON onActivePointChanged: to MICRO") // ===========
+      this.setIgnoreStateChange(true)
+      this.hideVariants()  
+    }
+    else if (newPoint === this._points.full && this.activePoint === this._points.micro) {
+      log("ON onActivePointChanged: to FULL") // ===========
+      this.setIgnoreStateChange(true)
+      this.showRecentVariants()
+    }
+    this.setActivePoint(newPoint)  
+  }
+
+  showVariants = (skuPath: string): void => {
+    this._service.setCurrentItem(undefined)
+    this._currentSkuPath = skuPath
+    this._closedByUser = false
+  } 
+
+  showRecentVariants = (): void => {
+    const recentItemInfo = this._service.recentItem
+    if (recentItemInfo) {
+      this._service.setCurrentItem(undefined)
+      this._currentSkuPath = recentItemInfo.item.sku
+      this._closedByUser = false
+    }
+  } 
+
+  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}
+
+  get ignoreStateChange(): boolean { return this._ignoreStateChange }
+  setIgnoreStateChange = (b: boolean): void => { this._ignoreStateChange = b}
+
+  get checkingOut(): boolean | undefined { return this._checkingOut }
+  setCheckingOut = (b: boolean): void => { this._checkingOut = b }
+
+  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[] { 
+    return [this._points.micro, this._points.full]
+  }
+
+  _syncUIToState = (s: DrawerState) => {
+    log("_syncUIToState: " +  s) // ===========
+    if (s === 'micro') {
+      this.setActivePoint(this.points[0])
+    }
+    else if (s === 'full') {
+      this.setActivePoint(this.points[this.points.length - 1])
+    }
+    else {
+      this.setActivePoint(null)
+    } 
+  }
+
+  get open(): boolean {
+
+    log('open():' + // ===============
+      ' showCheckout: '  + this.showCheckout + 
+      ' showRecent: ' + this.showRecent + 
+      ' showBuy: ' + this.showBuy
+    ) // ===========
+
+    return ( 
+      this._checkingOut !== undefined
+      &&
+      !this._checkingOut 
+      &&
+      !this.closedByUser
+      && 
+      (this.showCheckout || this.showRecent || this.showBuy)
+    )
+  }
+
+  get state(): DrawerState {
+    if (!this.closedByUser && !this._checkingOut) {
+      if (this.showBuy) {
+        return 'full'
+      }
+      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 showCheckout(): boolean { return !this._service.cartEmpty}
+  get modal(): boolean { return this.state !== 'micro'}
+
+  get microHeight(): SnapPoint {
+    return this._points.micro
+  }
+
+  get isMobile(): boolean { return this._pointsConfig.mb === this._points }
+  setMobile = (b: boolean): void => { 
+    log("setMobile: " +  b) // ===========
+    this._points = b ? this._pointsConfig.mb : this._pointsConfig.dt
+  }
+
+  setViewportHeight = (v: number) => {this._vHeight = v}
+  get snapPointPx(): number {
+    if (!this._activePoint || this._vHeight === 0) return 0
+
+    if (typeof this._activePoint === 'string') {
+      return parseInt(this._activePoint)
+    }
+
+    return this._vHeight * this._activePoint as number
+  }
+
+  dispose = () => {
+    this._reactionDisposers.forEach((d) => {d()})
+  }
+}
+
+export {
+  CommerceUIStore,
+  type CommerceDrawer,
+  type SelectAndBuy,
+  type SnapPointsConfig,
+  type SnapPoints,
+  type SnapPoint
+}

package/src/site/components/access-code-input.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import { useState } from 'react'
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '@hanzo/ui/primitives'
+import { Box, cn } from '@hanzo/ui'
+const AccessCodeInput: React.FC<{
+  onSuccess?: () => void
+  onFail?: () => void
+  validCodes?: string[]
+  className?: string
+}> = ({
+  onSuccess,
+  onFail,
+  validCodes,
+  className
+}) => {
+  const [status, setStatus] = useState<'valid' | 'invalid' | 'checking' | undefined>()
+
+  const checkAccessCode = (code: string) => {
+    setStatus(undefined)
+    if (code.length === 6) {
+      setStatus('checking')
+      setTimeout(() => {
+        if (validCodes?.includes(code) && onSuccess) {
+          setStatus('valid')
+          onSuccess()
+        }
+        else {
+          setStatus('invalid')
+          onFail && onFail()
+        }
+      }, 1000)
+    }
+  }
+
+  return (
+    <Box className={cn('flex flex-col gap-2 mx-auto w-full text-center items-center', className)}>
+      <InputOTP
+        className='mx-auto'
+        maxLength={6}
+        onInput={(event) => checkAccessCode((event.target as HTMLInputElement).value)}
+        render={({ slots }) => (
+          <>
+            <InputOTPGroup>
+              {slots.slice(0, 3).map((slot, index) => (
+                <InputOTPSlot key={index} {...slot} />
+              ))}{" "}
+            </InputOTPGroup>
+            <InputOTPSeparator />
+            <InputOTPGroup>
+              {slots.slice(3).map((slot, index) => (
+                <InputOTPSlot key={index + 3} {...slot} />
+              ))}
+            </InputOTPGroup>
+          </>
+        )}
+      />
+      <p className='h-[3rem]'>
+        {
+          status === 'checking' ? 'Checking access code...' :
+          status === 'invalid' ? <span className='text-destructive'>Invalid access code!</span> :
+          status === 'valid' ? <span>Access code is valid! Redirecting...</span> :
+          null
+        }
+      </p>
+    </Box>
+  )
+}
+
+export default AccessCodeInput

package/src/site/components/analytics.tsx

@@ -0,0 +1,14 @@
+'use client'
+
+import { GoogleAnalytics } from '@next/third-parties/google'
+
+import { FacebookPixel } from '../next/analytics'
+
+const Analytics = () => (
+  <>
+    <FacebookPixel />
+    <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID ?? ''} />
+  </>
+)
+
+export { Analytics as default }

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

@@ -0,0 +1,40 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+
+import { useIam } from '@hanzo/iam/react'
+
+import { resume } from './resume'
+
+  /**
+   * The site's OAuth redirect target. IAM sends the authorization code here and
+   * this redeems it for tokens with the PKCE verifier the browser kept, then
+   * returns the visitor to the page they left.
+   */
+const Callback = () => {
+
+  const { handleCallback } = useIam()
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    handleCallback()
+      .then(() => { window.location.replace(resume()) })
+      .catch((e: Error) => { setError(e.message) })
+      /* Runs once: the authorization code is single-use. */
+  }, [])
+
+  return (
+    <main className='flex min-h-screen items-center justify-center p-8 text-center'>
+      {error ? (
+        <div className='flex flex-col gap-4'>
+          <p role='alert'>{error}</p>
+          <a href='/' className='underline'>Back to the site</a>
+        </div>
+      ) : (
+        <p>Signing you in…</p>
+      )}
+    </main>
+  )
+}
+
+export default Callback

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

@@ -0,0 +1,83 @@
+'use client'
+
+import React from 'react'
+import Link from 'next/link'
+
+import { Box, cn } from '@hanzo/ui'
+import { Button, Carousel, CarouselContent, CarouselItem } from '@hanzo/ui/primitives'
+
+import Login from './login'
+import { LuxLogo } from '@luxfi/logo'
+import Logo from '../logo'
+import { legal } from '../../site-def/footer'
+
+const LoginPanel: React.FC<{
+  close: () => void
+  className?: string
+  reviews: { text: string, author: string, href: string }[]
+}> = ({
+  close,
+  className = '',
+  reviews
+}) => {
+
+    return (
+      <Box className={cn('grid grid-cols-1 md:grid-cols-2', className)}>
+        <div className='hidden md:flex w-full h-full bg-[radial-gradient(circle_at_24.1%_68.8%_,_rgba(15,14,14,0)_,_rgba(9,9,9,99.4))] flex-row items-end justify-end overflow-y-auto min-h-screen'>
+          <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 justify-between min-h-screen py-10'>
+              <Button
+                variant='ghost'
+                onClick={close}
+                className='w-fit !min-w-0 p-2'
+              >
+                <Logo size='md' variant='wordmark' />
+              </Button>
+              <Carousel
+                // Autoplay is an option now, not a plugin — and it holds while the
+                  // pointer is over the carousel or focus is inside it, which is
+                  // what `stopOnInteraction` was asking for.
+                  options={{ align: 'center', loop: true, autoplay: 5000 }}
+                className='w-full'
+              >
+                <CarouselContent>
+                  {reviews.map(({ text, author, href }, index) => (
+                    <CarouselItem key={index}>
+                      <Link href={href} className='flex flex-col gap-3 cursor-pointer'>
+                        <p>“{text}“</p>
+                        <p className='text-sm'>{author}</p>
+                      </Link>
+                    </CarouselItem>
+                  ))}
+                </CarouselContent>
+              </Carousel>
+            </div>
+          </div>
+        </div>
+        <div className='w-full h-full bg-background flex flex-row items-center'>
+          <div className='w-full max-w-[750px] relative flex flex-col items-center px-8 pt-0 text-center'>
+            <div className='relative h-full w-full max-w-[400px] mx-auto flex flex-col gap-4 items-center py-10'>
+              <Button
+                variant='ghost'
+                onClick={close}
+                className='block md:hidden absolute rounded-full p-2 left-0 h-auto hover:bg-background'
+              >
+                <LuxLogo variant='white' size={20} />
+              </Button>
+              <Login className='w-full max-w-sm' />
+              <p className='text-sm opacity-50'>
+                {legal.map(({ title, href }, index) => (
+                  <React.Fragment key={href}>
+                    {index > 0 && ' · '}
+                    <Link href={href} className='underline'>{title}</Link>
+                  </React.Fragment>
+                ))}
+              </p>
+            </div>
+          </div>
+        </div>
+      </Box>
+    )
+  }
+
+export default LoginPanel

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