@luxfi/core 5.1.4 → 5.1.6

package/commerce/{AUTO-GEN-bullion-by-family.json → data/AUTO-GEN-bullion-by-family.json}

@@ -1,34 +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
-          }
-        }
-      }
-    ]
-  }
+[
+  {
+    "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 → data/EDIT-ME-bullion-market-prices.ts}

@@ -1,12 +1,12 @@
-  // updated manually apr 29, 2024
-
-export default {
-  au: {
-    market1oz: 2336.50,
-    discount: 0.01
-  },
-  ag: {
-    market1oz: 27.143,
-    discount: 0.10
-  },
+  // 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 → data/assign-prices.ts}

@@ -1,50 +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
+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 → data/assign-videos-by-family-group.ts}

@@ -1,14 +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
-}
+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 → data/bullion-price-1oz.ts}

@@ -1,5 +1,5 @@
-import PRICES from './EDIT-ME-bullion-market-prices'
-
-export default (type_: keyof typeof PRICES): number => (
-  PRICES[type_].market1oz * (1 - PRICES[type_].discount)  
-)
+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 → data/index.ts}

@@ -1,18 +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'
-
+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 '../../conf/lux-commerce-options'
+export { default as bullionPrice1oz } from './bullion-price-1oz'
+

package/commerce/ui/conf.ts

@@ -0,0 +1,13 @@
+import type { SnapPointsConfig } from './store'
+
+export default {
+  mb: {
+    micro: '62px',
+    full: '550px' 
+  },
+
+  dt: {
+    micro: '80px',
+    full: 0.75 
+  }
+} satisfies SnapPointsConfig

package/commerce/ui/context.tsx

@@ -0,0 +1,102 @@
+'use client'
+import React, { 
+  createContext, 
+  useContext, 
+  useRef, 
+  type PropsWithChildren, 
+  useEffect,
+  useLayoutEffect
+} from 'react'
+import { enableStaticRendering } from 'mobx-react-lite'
+import { usePathname } from 'next/navigation'
+import { useDebounceCallback } from 'usehooks-ts'
+
+
+import { preset as twConfig } from '@hanzo/ui/tailwind'
+import { useCommerce } from '@hanzo/commerce'
+
+import type { CommerceDrawer, SelectAndBuy, RecentActivity } from './store'
+import { CommerceUIStore } from './store'
+import conf from './conf'
+
+// https://dev.to/ivandotv/mobx-server-side-rendering-with-next-js-4m18
+enableStaticRendering(typeof window === "undefined")
+
+const CommerceUIContext = createContext<CommerceUIStore | undefined>(undefined)
+
+const useCommerceDrawer = (): CommerceDrawer => {
+  return useContext(CommerceUIContext) as CommerceDrawer
+}
+
+const useSelectAndBuy = (): SelectAndBuy => {
+  return useContext(CommerceUIContext) as SelectAndBuy
+}
+
+const useRecentActivity = (): RecentActivity => {
+  return useContext(CommerceUIContext) as RecentActivity
+}
+
+const CommerceUIProvider: React.FC<PropsWithChildren> = ({ 
+  children,
+}) => {
+
+  const cmmc = useCommerce()
+  const pathName = usePathname()
+  const isCheckout = pathName === '/checkout'
+  const ref = useRef<CommerceUIStore>(new CommerceUIStore(cmmc, conf))
+
+  if (ref.current.checkingOut != isCheckout) {
+    ref.current.setCheckingOut(isCheckout)
+  }
+
+  const onResize = () => { 
+    const width = window.innerWidth 
+    let desktopMin = 0
+    if (twConfig.theme?.screens) {
+        // expected form: { md: '768px' }
+      if ('md' in twConfig.theme?.screens && typeof twConfig.theme?.screens.md === 'string') {
+        desktopMin = parseInt(twConfig.theme?.screens.md)
+      }
+      if (width < desktopMin) {
+        if (!ref.current.isMobile) {
+          ref.current.setMobile(true)
+        }
+      }
+      else if (ref.current.isMobile) {
+        ref.current.setMobile(false)
+      }
+    }
+    ref.current.setViewportHeight(window.innerHeight)
+  }
+
+  const onResize_debounced = useDebounceCallback(onResize, 500)
+
+  useLayoutEffect(() => {
+    ref.current.initialize()
+    onResize()
+    window.addEventListener('resize', onResize_debounced);
+    return () => {
+      window.removeEventListener('resize', onResize_debounced)
+      ref.current.dispose() 
+    }
+  }, [])
+
+  useEffect(() => {
+    ref.current.reset()
+  }, [pathName])
+
+
+  return (
+    <CommerceUIContext.Provider value={ref.current}>
+      {children}
+    </CommerceUIContext.Provider>
+  )
+}
+
+export {
+  useCommerceDrawer, 
+  useSelectAndBuy,
+  useRecentActivity,
+  CommerceUIProvider
+}
+

package/commerce/ui/store.ts

@@ -0,0 +1,277 @@
+import { 
+  action,
+  computed, 
+  makeObservable, 
+  observable,
+  reaction,
+  type IReactionDisposer, 
+} from 'mobx'
+
+import type { CommerceService, LineItem, ObsLineItemRef } from '@hanzo/commerce/types'
+
+const logOn = false
+const log = (s: string) => {
+  if (logOn) {
+    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 RecentActivity extends ObsLineItemRef {
+  quantityChanged(sku: string, val: number, prevVal: number): void
+}
+
+interface SelectAndBuy {
+  showVariants: (skuPath: string) => void
+  hideVariants: () => void
+  get currentSkuPath(): string | undefined
+}
+
+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 showAdded(): boolean
+  get showBuy(): boolean
+
+  get microHeight(): SnapPoint
+  get isMobile(): boolean
+  get snapPointPx(): number
+}
+
+class CommerceUIStore implements 
+  RecentActivity,
+  SelectAndBuy,
+  CommerceDrawer
+{
+  _vHeight: number = 0
+
+  _currentSkuPath: string | undefined = undefined
+  _closedByUser: boolean = false
+  _checkingOut: boolean = false
+  _ignoreStateChange: boolean = false
+  _activePoint: SnapPoint | null = null 
+  
+  _activeItem: LineItem | undefined = undefined
+  _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,
+      _activeItem: observable.ref, 
+      _closedByUser: observable,
+      _checkingOut: observable,
+      _activePoint: observable,
+      _points: observable.ref, 
+      _vHeight: observable,
+
+      showVariants: action,
+      hideVariants: action,
+      quantityChanged: action,
+      setClosedByUser: action,
+      setCheckingOut: action,
+      setActivePoint: action,
+      setMobile: action,
+      setViewportHeight: action,
+      clearActiveItem: action,
+      
+      activePoint: computed,
+      checkingOut: computed,
+      closedByUser: computed,
+      currentSkuPath: computed,
+      item: computed,
+      microHeight: computed,
+      modal: computed,
+      points: computed,
+      showAdded: computed,
+      showBuy: computed,
+      showCheckout: computed,
+      snapPointPx: computed,
+      state: 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)
+        }
+      }
+    ))
+  }
+
+  reset = () => {
+    this.hideVariants()
+    this.setClosedByUser(false)
+    this.clearActiveItem()
+    // DO NOT reset _checkingOut!
+  }
+
+  onActivePointChanged = (pt: SnapPoint | null): void => { 
+    log("ON onActivePointChanged: " +  pt) // ===========
+    if (pt === this._points.micro && this.activePoint === this._points.full) {
+      this.setIgnoreStateChange(true)
+      this.hideVariants()  
+    }
+    else if (pt === this._points.full && this.activePoint === this._points.micro) {
+      this.setIgnoreStateChange(true)
+      this.showVariants(this.item?.sku ?? '')  
+    }
+    this.setActivePoint(pt)  
+  }
+
+  showVariants = (skuPath: string): void => {
+    this._service.setCurrentItem(undefined)
+    this._currentSkuPath = skuPath
+    this._closedByUser = false
+  } 
+
+  hideVariants = (): void => { this._currentSkuPath = undefined }
+
+  get currentSkuPath(): string | undefined { return this._currentSkuPath } 
+
+  quantityChanged = (sku: string, val: number, oldVal: number): void  => {
+
+    if (val === 0) {
+      if (this._activeItem?.sku === sku) {
+        this._activeItem = undefined
+      }
+      // otherwise ignore
+    }
+    else {
+      if (!this._activeItem || this._activeItem.sku !== sku) {
+        this._activeItem = this._service.getItemBySku(sku)
+      }
+    }
+  } 
+
+  get item(): LineItem | undefined { return this._activeItem }
+  clearActiveItem = (): void => { this._activeItem = undefined }
+
+  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 { 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}
+   
+  get points(): SnapPoint[] { 
+    if (this.showBuy && !(this.showAdded || this.showCheckout)) {
+      return [this._points.full]
+    }
+    else if (!this.showBuy && !this.showAdded && this.showCheckout) {
+      return [this._points.micro]
+    }
+    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])
+    } 
+  }
+
+  get open(): boolean {
+    return ( 
+      !this.closedByUser 
+      && 
+      (this.showCheckout || this.showAdded || this.showBuy)
+    )
+  }
+
+  get state(): DrawerState {
+    if (this.showBuy) {
+      return 'full'
+    }
+    else if (!this.closedByUser && (this.showAdded || this.showCheckout)) {
+      return 'micro'
+    }
+    return 'closed'
+  }
+
+  get showBuy(): boolean {return !!this.currentSkuPath}
+  get showAdded(): boolean { return !this._checkingOut && !!this.item}
+  get showCheckout(): boolean { return !this._checkingOut && !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 RecentActivity,
+  type SelectAndBuy,
+  type SnapPointsConfig,
+  type SnapPoints,
+  type SnapPoint
+}