@luxfi/core 5.0.2 → 5.0.4

package/commerce/AUTO-GEN-bullion-by-family.json

@@ -0,0 +1,34 @@
+[
+  {
+    "id": "LXM-AG-B",
+    "title": "Minted Bar",
+    "parentTitle": "Lux Silver",
+    "desc": "Get unprecedented access to silver with 1:1 asset-backed Lux Silver NFTs, sovereign ownership of physical silver without management fees, and mine-direct discount pricing.",
+    "img": {
+      "src": "/assets/commerce/silver/product/silver-bar-pt-800x800.png",
+      "dim": {
+        "w": 800,
+        "h": 800
+      }
+    },
+    "products": [
+      {
+        "id": "fce17569-a86c-4f69-bc61-ab435ed0c46f",
+        "sku": "LXM-AG-B-1_OZ",
+        "fullTitle": "Lux Silver, 1oz Minted Bar",
+        "optionLabel": "1oz",
+        "familyTitle": "Minted Bar",
+        "familyId": "LXM-AG-B",
+        "desc": "Get unprecedented access to silver with 1:1 asset-backed Lux Silver NFTs, sovereign ownership of physical silver without management fees, and mine-direct discount pricing.",
+        "price": 0,
+        "img": {
+          "src": "/assets/commerce/silver/product/silver-bar-pt-800x800.png",
+          "dim": {
+            "w": 800,
+            "h": 800
+          }
+        }
+      }
+    ]
+  }
+]

package/commerce/EDIT-ME-bullion-market-prices.ts

@@ -0,0 +1,12 @@
+  // updated manually apr 29, 2024
+
+export default {
+  au: {
+    market1oz: 2336.50,
+    discount: 0.01
+  },
+  ag: {
+    market1oz: 27.143,
+    discount: 0.10
+  },
+}

package/commerce/assign-prices.ts

@@ -0,0 +1,50 @@
+import type { Family } from '@hanzo/commerce/types'
+
+import prices from './EDIT-ME-bullion-market-prices'
+
+const sep = {
+  tok: '-',
+  subTok: '_',
+  decimal: '.'
+} 
+
+const GRAMS_PER_OZ = 28.3495
+
+const tree: any = {}
+for (let key in prices) {
+  const values = prices[key as keyof typeof prices]
+  tree[key] = {
+    oz: values.market1oz * (1 - values.discount),
+    g: values.market1oz * (1 - values.discount) / GRAMS_PER_OZ  
+  }
+}
+
+// LXB-AU-B-1_OZ, LXB-AU-B-2.5_g
+const priceFromSKU = (
+  sku: string
+) => {
+  const tokens = sku.split(sep.tok)
+  const type_ = tokens[1].toLowerCase()
+
+  const quanAndUnit = tokens[tokens.length - 1]
+  const quanAndUnitToks = quanAndUnit.split(sep.subTok)
+  let quantity = quanAndUnitToks[0].includes(sep.decimal) ? parseFloat(quanAndUnitToks[0].split(sep.decimal).join('.')) : parseInt(quanAndUnitToks[0])
+  let unit = quanAndUnitToks[1].toLowerCase()
+  if (unit === 'kg') {
+    quantity *= 1000
+    unit = 'g'
+  }
+  else if (unit === 'lb') {
+    quantity *= 16
+    unit = 'oz'
+  }
+
+  return tree[type_][unit] * quantity
+}
+
+export default (c: Family): Family => {
+  for (let prod of c.products) {
+    prod.price = priceFromSKU(prod.sku)
+  }
+  return c
+}

package/commerce/assign-videos-by-family-group.ts

@@ -0,0 +1,14 @@
+import type { VideoDef } from '@hanzo/ui/types'
+import type { Family } from '@hanzo/commerce/types'
+
+export default (fam: Family, map: Map<string, VideoDef>): Family => {
+  if (fam.parentTitle) {
+    for (let prod of fam.products) {
+      const video = map.get(fam.parentTitle)
+      if (video) {
+        prod.video = video
+      }
+    }
+  }
+  return fam
+}

package/commerce/bullion-price-1oz.ts

@@ -0,0 +1,5 @@
+import PRICES from './EDIT-ME-bullion-market-prices'
+
+export default (type_: keyof typeof PRICES): number => (
+  PRICES[type_].market1oz * (1 - PRICES[type_].discount)  
+)

package/commerce/index.ts

@@ -0,0 +1,18 @@
+import type { VideoDef } from '@hanzo/ui/types'
+
+import bullionByFamily from './AUTO-GEN-bullion-by-family.json'
+
+import assignPrices from './assign-prices'
+import assignVideosByFamilyGroup from './assign-videos-by-family-group'
+
+export const getBullionFamilies = (videoMap: Map<string, VideoDef>) => (
+  bullionByFamily.map(
+    (fam) => (assignPrices(fam))).map(
+      (fam) => (assignVideosByFamilyGroup(fam, videoMap)
+    )
+  )
+)
+
+export { default as serviceOptions } from './lux-service-options'
+export { default as bullionPrice1oz } from './bullion-price-1oz'
+

package/commerce/lux-service-options.ts

@@ -0,0 +1,6 @@
+import type { ServiceOptions } from '@hanzo/commerce'
+
+export default {
+  dbName: 'lux-commerce',
+  ordersTable: 'orders'
+} satisfies ServiceOptions

package/components/chat-widget.tsx

@@ -2,9 +2,10 @@
 import React from 'react'
 
 import { Button, Card } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
 
 import LuxLogo from './icons/lux-logo'
-import { cn } from '@hanzo/ui/util'
+import type { ChatbotSuggestedQuestion } from '../types'
 
 const ChatWidget: React.FC<{
   title: string,
@@ -12,6 +13,7 @@ const ChatWidget: React.FC<{
   subtitle?: string,
   question?: string,
   /* 
+    ChatBotSuggestQuestion.icon
     Currently supports these icons from remix icons (https://remixicon.com/):
       GlobalLineIcon,
       ShieldFlashLineIcon,
@@ -19,7 +21,7 @@ const ChatWidget: React.FC<{
       GroupLineIcon,
       QuestionnaireLineIcon
   */
-  suggestedQuestions?: { heading: string, message: string, icon?: string }[]
+  suggestedQuestions?: ChatbotSuggestedQuestion[]
 }> = ({
   title,
   chatbotUrl,

package/components/commerce/buy-drawer/index.tsx

@@ -1,109 +1,17 @@
 'use client'
-import React, { useEffect, useRef } from 'react'
-import { createPortal } from 'react-dom'
-import { useRouter, usePathname } from 'next/navigation'
-import { ObservableSet, observable, reaction, type IReactionDisposer, runInAction} from 'mobx'
+import React from 'react'
+import { useRouter } from 'next/navigation'
 import { observer } from 'mobx-react-lite'
 
-import { cn } from '@hanzo/ui/util'
-import { Image } from '@hanzo/ui/primitives'
-
-import { useCommerce, useCommerceUI, CarouselBuyCard, LineItemRef } from '@hanzo/commerce'
-import type { LineItem } from '@hanzo/commerce/types'
+import { useCommerceUI, CarouselBuyCard } from '@hanzo/commerce'
 
 import CommerceDrawer from './drawer'
 import CheckoutButton from '../checkout-button'
 
-const DEF_IMG_CONSTRAINT={w: 40, h: 24}
-const CO_ANIM_DURATION = 400
-const CO_ANIM_TIMING_FN = 'cubic-bezier(0.4, 0, 0.2, 1)'
-const CO_WIDGET_W_CLX = {
-  checkout: 'w-pr-40',
-  itemInfo: 'w-pr-60'
-}
-
-const CO_WIDGET_SHADOW_STYLE = {
-  border: '1px solid rgb(100 100 100)',
-  boxShadow: '2px 4px 4px -3px rgb(125 125 125 / 0.7), 4px -4px 8px -4px rgb(125 125 125 / 0.7)'
-}
-
 const CommerceUIComponent: React.FC = observer(() => {
 
   const ui = useCommerceUI()
-  const cmmc = useCommerce()
   const router = useRouter()
-  const isCheckout = usePathname() === '/checkout'
-
-  const animClxRef = useRef<ObservableSet<string>>(observable.set(new Set<string>(
-    (cmmc.cartEmpty || ui.buyOptionsSkuPath || isCheckout) ? ['hidden'] : []
-  )))
-
-    // a ref that is synced to ui.activeItem, but persists for CO_ANIM_DURATION longer
-    // so ui does not jump while animating "out"
-  const laggingActiveItemRef = useRef<LineItemRef>(new LineItemRef())
-  const disposersRef = useRef<IReactionDisposer[]>([])
-
-  useEffect(() => {
-    disposersRef.current.push(
-      reaction(
-        () => (ui.activeItem),
-        (item: LineItem | undefined) => {
-          if (item) { 
-            laggingActiveItemRef.current.set(item) 
-          }
-          else { 
-            setTimeout(() => { laggingActiveItemRef.current.set(undefined) }, CO_ANIM_DURATION) 
-          }
-        },
-        {equals: (val, prev) => (val?.sku === prev?.sku)}
-      )
-    )
-
-    disposersRef.current.push(
-      reaction(
-        () => ({
-          microOpen: !(cmmc.cartEmpty || !!ui.buyOptionsSkuPath || isCheckout),
-          buyOpen: !!ui.buyOptionsSkuPath
-        }),
-        (val, prev) => {
-
-          runInAction(() => {
-            if (!val.microOpen && prev.microOpen) {
-              animClxRef.current.add('checkout-widget-disappears')   
-            }
-            else if (val.microOpen && !prev.microOpen) {
-              animClxRef.current.delete('hidden')   
-              animClxRef.current.add('checkout-widget-appears')   
-            }
-            if (!val.buyOpen && prev.buyOpen) {
-              animClxRef.current.add('checkout-widget-appears-after-buy-drawer-closes')   
-            }
-            else {
-              animClxRef.current.delete('checkout-widget-appears-after-buy-drawer-closes')   
-            }
-          })
-
-          setTimeout(() => {runInAction(() => {
-            animClxRef.current.delete('checkout-widget-appears')   
-            animClxRef.current.delete('checkout-widget-appears-after-buy-drawer-closes')   
-            if (animClxRef.current.has('checkout-widget-disappears') ) {
-              animClxRef.current.delete('checkout-widget-disappears')   
-              animClxRef.current.add('hidden')   
-            }
-          })}, 800)
-        },
-        {equals: (val, prev) => (
-          val.microOpen === prev.microOpen 
-          && 
-          val.buyOpen === prev.buyOpen
-        )}
-      )
-    )
-
-    return () => {
-      disposersRef.current.forEach((d) => {d()}) 
-    }
-  }, [])
 
   const handleCheckout = () => {
     router.push('/checkout')
@@ -116,11 +24,10 @@ const CommerceUIComponent: React.FC = observer(() => {
     }
   }
 
-  return (<>
+  return (
     <CommerceDrawer 
       open={!!ui.buyOptionsSkuPath} 
       setOpen={reallyOnlyCloseDrawer}
-      modal={true}
       drawerClx={'w-full md:max-w-[550px] md:mx-auto lg:max-w-[50vw]'}
     >
       <CarouselBuyCard 
@@ -133,58 +40,7 @@ const CommerceUIComponent: React.FC = observer(() => {
         selectorClx='max-w-[475px]'
       />
     </CommerceDrawer>
-    {globalThis?.document?.body && createPortal(
-      <div 
-        className={cn(
-          'min-w-[160px] sm:max-w-[320px] w-[calc(100%-72px)] ml-2 !h-10',
-          'z-below-modal-2 fixed bottom-[20px] left-0 right-0',
-          'rounded-lg bg-background',
-          'flex',
-          ui.activeItem ? 'gap-2' : '',
-          Array.from(animClxRef.current).join(' ')
-        )}
-        style={laggingActiveItemRef.current.item ? {} : CO_WIDGET_SHADOW_STYLE}
-      >
-        <div 
-          className={cn(
-            'flex flex-row justify-between items-center', 
-            ui.activeItem ? CO_WIDGET_W_CLX.itemInfo : 'w-0',
-            laggingActiveItemRef.current.item ? 'px-3 border rounded-lg border-muted-3' : '' 
-          )}
-          style={{
-            transitionProperty: 'width',
-            transitionTimingFunction: CO_ANIM_TIMING_FN,
-            transitionDuration: `${CO_ANIM_DURATION}ms`
-          }}
-        >
-          {laggingActiveItemRef.current.item?.img ? (
-            <Image def={laggingActiveItemRef.current.item.img} constrainTo={DEF_IMG_CONSTRAINT} preload className='grow-0 shrink-0'/>
-          ) : ( // placeholder so things align
-            <div style={{height: DEF_IMG_CONSTRAINT.h, width: DEF_IMG_CONSTRAINT.w}} className='bg-level-3 grow-0 shrink-0'/>
-          )}
-
-          <div className='text-muted grow ml-1'>
-            {laggingActiveItemRef.current.item && (<>
-              <p className='whitespace-nowrap text-sm'>{laggingActiveItemRef.current.item.title}</p>
-              <p className='whitespace-nowrap text-xxs' >recently added...</p>
-            </>)}
-          </div>
-        </div>
-        <CheckoutButton 
-          handleCheckout={handleCheckout} 
-          centerText={!!!ui.activeItem}
-          variant='primary' rounded='lg' 
-          className={cn(ui.activeItem ? CO_WIDGET_W_CLX.checkout : 'w-full')} 
-          style={{
-            transitionProperty: 'width',
-            transitionTimingFunction: CO_ANIM_TIMING_FN,
-            transitionDuration: `${CO_ANIM_DURATION}ms`
-          }}
-        />        
-      </div>,
-      globalThis?.document?.body
-    )}
-  </>)
+  )
 })
 
 export default CommerceUIComponent

package/components/commerce/checkout-widget/const.ts

@@ -0,0 +1,13 @@
+export default {
+  itemImgConstraint: { w: 40, h: 24 },
+  animDurationMs: 400,
+  animTimingFn: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  compWidthClx: {
+    checkout: 'w-pr-40',
+    itemInfo: 'w-pr-60'
+  },
+  shadowStyle: {
+    border: '1px solid rgb(100 100 100)',
+    boxShadow: '2px 4px 4px -3px rgb(125 125 125 / 0.7), 4px -4px 8px -4px rgb(125 125 125 / 0.7)'
+  }
+} 

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

@@ -0,0 +1,86 @@
+'use client'
+import React from 'react'
+import { createPortal } from 'react-dom'
+import { usePathname, useRouter } from 'next/navigation'
+import { observer } from 'mobx-react-lite'
+
+import { cn } from '@hanzo/ui/util'
+import { Image } from '@hanzo/ui/primitives'
+
+import { useCommerceUI } from '@hanzo/commerce'
+
+import CheckoutButton from '../checkout-button'
+import useAnimationClxSet from './use-anim-clx-set'
+import useLaggingItemRef from './use-lagging-item-ref'
+import CONST from './const'
+
+const CheckoutWidget: React.FC<{
+  clx?: string
+}> = observer(({
+  clx=''
+}) => {
+
+  const router = useRouter()
+
+  const isCheckout = usePathname() === '/checkout'
+  const clxSet = useAnimationClxSet(isCheckout)
+
+  const itemRef = useCommerceUI()
+  const laggingRef = useLaggingItemRef(itemRef, CONST.animDurationMs)
+
+  const handleCheckout = () => { router.push('/checkout')}
+
+  return globalThis?.document?.body && createPortal(
+    (<div 
+      className={cn(
+        'min-w-[160px] sm:max-w-[320px] w-[calc(100%-72px)] ml-2 !h-10',
+        'z-below-modal-2 fixed bottom-[20px] left-0 right-0',
+        'rounded-lg bg-background',
+        'flex',
+        itemRef.item ? 'gap-2' : '',
+        clxSet.asArray.join(' ')
+      )}
+      style={laggingRef.item ? {} : CONST.shadowStyle}
+    >
+      <div 
+        className={cn(
+          'flex flex-row justify-between items-center', 
+          itemRef.item ? CONST.compWidthClx.itemInfo : 'w-0',
+          laggingRef.item ? 'px-3 border rounded-lg border-muted-3' : '' 
+        )}
+        style={{
+          transitionProperty: 'width',
+          transitionTimingFunction: CONST.animTimingFn,
+          transitionDuration: `${CONST.animDurationMs}ms`
+        }}
+      >
+        {laggingRef.item?.img ? (
+          <Image def={laggingRef.item.img} constrainTo={CONST.itemImgConstraint} preload className='grow-0 shrink-0'/>
+        ) : ( // placeholder so things align
+          <div style={{height: CONST.itemImgConstraint.h, width: CONST.itemImgConstraint.w}} className='bg-level-3 grow-0 shrink-0'/>
+        )}
+
+        <div className='text-muted grow ml-1'>
+          {laggingRef.item && (<>
+            <p className='whitespace-nowrap text-sm'>{laggingRef.item.title}</p>
+            <p className='whitespace-nowrap text-xxs' >recently added...</p>
+          </>)}
+        </div>
+      </div>
+      <CheckoutButton 
+        handleCheckout={handleCheckout} 
+        centerText={!!!itemRef.item}
+        variant='primary' rounded='lg' 
+        className={cn(itemRef.item ? CONST.compWidthClx.checkout : 'w-full')} 
+        style={{
+          transitionProperty: 'width',
+          transitionTimingFunction: CONST.animTimingFn,
+          transitionDuration: `${CONST.animDurationMs}ms`
+        }}
+      />        
+    </div>),
+    globalThis?.document?.body
+  )
+})
+
+export default CheckoutWidget

package/components/commerce/checkout-widget/obs-string-set.ts

@@ -0,0 +1,48 @@
+import { 
+  action, 
+  computed, 
+  makeObservable, 
+  observable 
+} from 'mobx'
+
+class ObsStringSet {
+
+  private _set = observable.set(new Set<string>())
+
+  constructor(initial: string[] = []) {
+    initial.forEach((el)  => {this._set.add(el)})
+    makeObservable(this, {
+      add: action,
+      remove: action,   
+      asArray: computed
+    })
+  }  
+
+  add = (v: string | string[]): void => {
+    if (Array.isArray(v)) {
+      v.forEach((el)  => {this._set.add(el)})
+    }
+    else {
+      this._set.add(v) 
+    }
+  }
+
+  remove = (v: string | string[]): void => {
+    if (Array.isArray(v)) {
+      v.forEach((el)  => {this._set.delete(el)})
+    }
+    else {
+      this._set.delete(v) 
+    }
+  }
+
+  has = (v: string): boolean => (
+    this._set.has(v)
+  )
+
+  get asArray() {
+    return Array.from(this._set)
+  }
+}
+
+export default ObsStringSet

package/components/commerce/checkout-widget/use-anim-clx-set.ts

@@ -0,0 +1,57 @@
+import { useEffect, useRef } from 'react'
+import { reaction, runInAction} from 'mobx'
+
+import ObsStringSet from './obs-string-set'
+import { useCommerce, useCommerceUI } from '@hanzo/commerce'
+
+export default (isCheckout: boolean): ObsStringSet => {
+
+  const ui = useCommerceUI()
+  const cmmc = useCommerce()
+
+  const clxSetRef = useRef<ObsStringSet>(new ObsStringSet(
+    (cmmc.cartEmpty || ui.buyOptionsSkuPath || isCheckout) ? ['hidden'] : []
+  ))
+
+  useEffect(() => (
+    reaction(
+      () => ({
+        microOpen: !(cmmc.cartEmpty || !!ui.buyOptionsSkuPath || isCheckout),
+        buyOpen: !!ui.buyOptionsSkuPath
+      }),
+      (val, prev) => {
+
+        runInAction(() => {
+          if (!val.microOpen && prev.microOpen) {
+            clxSetRef.current.add('checkout-widget-disappears')   
+          }
+          else if (val.microOpen && !prev.microOpen) {
+            clxSetRef.current.remove('hidden')   
+            clxSetRef.current.add('checkout-widget-appears')   
+          }
+          if (!val.buyOpen && prev.buyOpen) {
+            clxSetRef.current.add('checkout-widget-appears-after-buy-drawer-closes')   
+          }
+          else {
+            clxSetRef.current.remove('checkout-widget-appears-after-buy-drawer-closes')   
+          }
+        })
+
+        setTimeout(() => {runInAction(() => {
+          clxSetRef.current.remove(['checkout-widget-appears', 'checkout-widget-appears-after-buy-drawer-closes'])   
+          if (clxSetRef.current.has('checkout-widget-disappears') ) {
+            clxSetRef.current.remove('checkout-widget-disappears')   
+            clxSetRef.current.add('hidden')   
+          }
+        })}, 800)
+      },
+      {equals: (val, prev) => (
+        val.microOpen === prev.microOpen 
+        && 
+        val.buyOpen === prev.buyOpen
+      )}
+    )
+  ), [isCheckout])
+
+  return clxSetRef.current
+}

package/components/commerce/checkout-widget/use-lagging-item-ref.ts

@@ -0,0 +1,30 @@
+import { useEffect, useRef } from 'react'
+import { reaction } from 'mobx'
+
+import type { LineItem, ObsLineItemRef } from "@hanzo/commerce/types"
+import { LineItemRef } from '@hanzo/commerce'
+
+export default (orig: ObsLineItemRef, lagMs: number): ObsLineItemRef => {
+
+    // a ref that is synced to 'orig', but persists for lagMs longer
+    // so ui does not jump while animating out.
+    // (Fascilitates for start and end states in animation) 
+  const laggingRef = useRef<LineItemRef>(new LineItemRef())
+
+  useEffect(() => (
+    reaction(
+      () => (orig.item),
+      (item: LineItem | undefined) => {
+        if (item) { 
+          laggingRef.current.set(item) 
+        }
+        else { 
+          setTimeout(() => { laggingRef.current.set(undefined) }, lagMs) 
+        }
+      },
+      {equals: (val, prev) => (val?.sku === prev?.sku)}
+    )
+  ), [])
+
+  return laggingRef.current
+}

package/components/index.ts

@@ -9,13 +9,12 @@ export { default as Logo } from './logo'
 export { default as MiniChart } from './mini-chart'
 export { default as NotFound } from './not-found'
 
-
-
+export { default as AuthListener } from './auth/auth-listener'
 export { default as BuyDrawer } from './commerce/buy-drawer'
-export { default as CheckoutPanel } from './commerce/checkout-panel'
 export { default as CheckoutButton } from './commerce/checkout-button'
+export { default as CheckoutPanel } from './commerce/checkout-panel'
+export { default as CheckoutWidget } from './commerce/checkout-widget'
 export { default as LoginPanel } from './auth/login-panel'
-export { default as AuthListener } from './auth/auth-listener'
 export { default as Scripts } from './scripts'
 
 

package/next/index.ts

@@ -1 +1 @@
-export { default as determineDeviceMW } from './determine-device-mw'
+export { default as determineDeviceMW } from './middleware/determine-device-mw'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxfi/core",
-  "version": "5.0.2",
+  "version": "5.0.4",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -27,6 +27,7 @@
   },
   "exports": {
     ".": "./components/index.ts",
+    "./commerce": "./commerce/index.ts",
     "./root-layout": "./root-layout/index.tsx",
     "./server-actions": "./server-actions/index.ts",
     "./next": "./next/index.ts",
@@ -36,6 +37,9 @@
     "./conf": "./conf/index.ts"
   },
   "dependencies": {
+    "@hanzo/auth": "2.4.6",
+    "@hanzo/commerce": "7.0.1",
+    "@hanzo/ui": "3.7.0",
     "@next/third-parties": "^14.1.0",
     "cookies-next": "^4.1.1",
     "date-fns": "^3.6.0",
@@ -44,9 +48,6 @@
     "react-social-icons": "^6.4.0"
   },
   "peerDependencies": {
-    "@hanzo/auth": "2.4.6",
-    "@hanzo/commerce": "7.0.0",
-    "@hanzo/ui": "3.7.0",
     "@hookform/resolvers": "^3.3.2",
     "lucide-react": "^0.344.0",
     "next": "14.1.3",

package/root-layout/index.tsx

@@ -12,9 +12,10 @@ import { FacebookPixelHead } from '../next/analytics/pixel-analytics'
 
 import { AuthListener, ChatWidget, Header, Scripts } from '../components'
 import BuyDrawer from '../components/commerce/buy-drawer'
+import CheckoutWidget from '../components/commerce/checkout-widget'
 
 import { selectionUISpecifiers } from '../conf'
-import type SiteDef from '../site-def/site-def'
+import type SiteDef from '../types/site-def'
 
 import '../style/lux-global.css'
 import '../style/cart-animation.css'
@@ -58,7 +59,6 @@ const RootLayout: React.FC<PropsWithChildren & {
 }) =>  {
 
   const currentUser = await getUserServerSide()
-  const usingCommerce = siteDef?.ext?.commerce && siteDef.ext.commerce.rootNode && siteDef.ext.commerce.families
 
   const Guts: React.FC = () => (<>
     {showHeader && <Header siteDef={siteDef}/>}
@@ -68,7 +68,7 @@ const RootLayout: React.FC<PropsWithChildren & {
         title='LUX'
         subtitle='AI'
         chatbotUrl='https://lux.chat/iframe'
-        suggestedQuestions={siteDef.ext?.chatBot?.suggestedQuestions ?? []}
+        suggestedQuestions={siteDef.chatbot?.suggestedQuestions ?? []}
       />
     )}
   </>)
@@ -92,15 +92,16 @@ const RootLayout: React.FC<PropsWithChildren & {
       }}>
         <Scripts/>
         <AuthServiceProvider user={currentUser} conf={{} as AuthServiceConf}>
-        {usingCommerce ? (
+        {siteDef?.commerce ? (
           <CommerceProvider
-            rootNode={siteDef.ext.commerce.rootNode}
-            families={siteDef.ext.commerce.families}
-            options={siteDef.ext.commerce.options}
+            rootNode={siteDef.commerce!.rootNode}
+            families={siteDef.commerce!.families}
+            options={siteDef.commerce!.options}
             uiSpecs={selectionUISpecifiers}
           >
             <Guts />
             <BuyDrawer />
+            <CheckoutWidget />
           </CommerceProvider>
         ) : (
           <Guts />

package/site-def/index.ts

@@ -1,3 +1,3 @@
 export * as footer from './footer' // so footer.standard, footer.community, etc
 export { default as mainNav } from './main-nav'
-export type { default as SiteDef } from './site-def'
+export type { SiteDef } from '../types'

package/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig.hanzo-modules.base.json",
+  "extends": "../tsconfig.lux.base.json",
   "include": [
     "**/*.ts",
     "**/*.tsx",

package/types/chatbot-config.ts

@@ -0,0 +1,7 @@
+import type ChatbotSuggestQuestion from './chatbot-suggested-question'
+
+interface ChatbotConfig {
+  suggestedQuestions?: ChatbotSuggestQuestion[] 
+}
+
+export { type ChatbotConfig as default } 

package/types/chatbot-suggested-question.ts

@@ -0,0 +1,7 @@
+interface ChatbotSuggestedQuestion {
+  heading: string 
+  message: string 
+  icon?: string
+}
+
+export { type ChatbotSuggestedQuestion as default }

package/types/commerce-config.ts

@@ -0,0 +1,10 @@
+import type { ServiceOptions } from '@hanzo/commerce'
+import type { CategoryNode, Family } from '@hanzo/commerce/types'
+
+interface CommerceConfig {
+  families: Family[]
+  rootNode: CategoryNode
+  options?: ServiceOptions
+}
+
+export { type CommerceConfig as default }

package/types/index.ts

@@ -1 +1,5 @@
-export type { ContactInfo, ContactInfoFields } from './contact-info'
+export type { ContactInfo, ContactInfoFields } from './contact-info'
+export type { default as SiteDef } from './site-def'
+export type { default as ChatbotSuggestedQuestion } from './chatbot-suggested-question'
+export type { default as ChatbotConfig } from './chatbot-config'
+export type { default as CommerceConfig } from './commerce-config'

package/{site-def → types}/site-def.ts

@@ -1,9 +1,15 @@
 import React from 'react'
+
 import type { LinkDef } from '@hanzo/ui/types'
 
+import type CommerceConfig from './commerce-config'
+import type ChatbotConfig from './chatbot-config'
+
 interface SiteDef {
+
     /** url of this site.  All nav links in the system will show it in 'current' state */
   currentAs?: string
+
   nav: {
       /** common elements (will auto-select currentAs if it's provide) */
       /** optional feature element. right-most after 'elements' (any min-w is ignored) */
@@ -25,13 +31,15 @@ interface SiteDef {
      */
   footer: LinkDef[][]  
 
-    /** optional override of default 'above copyright' horizantal links */
-    /** default (undefined or absent): @ui/sideDef/footer/legal are rendered */
-    /** [] renders nothing above the copyright */
+    /** 
+     * optional override of default 'above copyright' horizantal links 
+      default (undefined / absent): links in side-def/footer/legal are rendered 
+      [] renders nothing above the copyright 
+    */
   aboveCopyright?: LinkDef[] 
 
-      /** any site-specific stuff we'd like access to (link urls, etc) */
-  ext?: any 
+  commerce?: CommerceConfig
+  chatbot?: ChatbotConfig
 }
 
-export { type SiteDef as default }
+export { type SiteDef as default }

package/components/commerce/buy-drawer/checkout.svg

@@ -1,4 +0,0 @@
-<svg viewBox="0 0 32 40" >
-  <path d="M27.724,27.85a3.4,3.4,0,0,0,.825-2.672l-1.8-14.4A3.405,3.405,0,0,0,23.375,7.8h-.521a5.173,5.173,0,0,0-10.32,0H3.894a1,1,0,0,0,0,2H8.929a3.316,3.316,0,0,0-.29.978l-.382,3.055a.889.889,0,0,0-.163-.033h-3a1,1,0,0,0,0,2H8.011L6.839,25.178A3.4,3.4,0,0,0,10.212,29H25.175A3.4,3.4,0,0,0,27.724,27.85ZM17.694,5a3.2,3.2,0,0,1,3.16,2.8h-6.32A3.194,3.194,0,0,1,17.694,5ZM9.163,26.526a1.384,1.384,0,0,1-.34-1.1l1.8-14.4A1.4,1.4,0,0,1,12.013,9.8h.481V13a1,1,0,0,0,2,0V9.8h6.4V13a1,1,0,0,0,2,0V9.8h.481a1.4,1.4,0,0,1,1.39,1.226l1.8,14.4A1.4,1.4,0,0,1,25.175,27H10.212A1.38,1.38,0,0,1,9.163,26.526Z"/>
-  <path d="M7.894,11.8a1,1,0,0,0-1-1h-3a1,1,0,0,0,0,2h3A1,1,0,0,0,7.894,11.8Z"/>
-</svg>