@hanzo/commerce 1.0.11 → 1.1.0

package/components/cart.tsx

@@ -7,7 +7,7 @@ import { Button } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
 import { useAuth } from '@hanzo/auth/service'
 
-import { persistCart, useCommerce } from '../service'
+import { useCommerce } from '../service/context'
 import { formatPrice } from '../util'
 
 import CartLineItem from './cart-line-item'
@@ -17,6 +17,7 @@ const Cart: React.FC<PropsWithChildren & {
   isMobile?: boolean,
   hideCheckout?: boolean
 }> = observer(({
+    /** Children is the heading area. */
   children,
   className='',
   isMobile=false,
@@ -30,7 +31,7 @@ const Cart: React.FC<PropsWithChildren & {
   const checkout = async () => {
     setLoadingCheckout(true)
     if (auth.user) {
-      await persistCart(cmmc.cartItems, auth.user.email)
+      await cmmc.createOrder(auth.user.email)
     }
     router.push('/checkout')
   }
@@ -39,18 +40,18 @@ const Cart: React.FC<PropsWithChildren & {
     <div className={cn('border p-6 rounded-lg', className)}>
       {children}
       <div className='mt-2'>
-        {!!children && <div className='h-[1px] w-pr-80 mx-auto bg-muted-3'/>}
+        {!!children && <div className='h-[1px] w-pr-80 mb-3 mx-auto bg-muted-3'/>}
       {cmmc.cartItems.length === 0 ? (
         <p className='text-center mt-4'>No items in cart</p>
       ) : (<>
         {cmmc.cartItems.map((item, i) => (<CartLineItem isMobile={isMobile} item={item} key={item.sku} className='mb-4 sm:mb-2'/>))}
-        <p className='mt-6 text-right border-t pt-1'>TOTAL: {cmmc.cartTotal === 0 ? '0' : formatPrice(cmmc.cartTotal)}</p>
+        <p className='mt-6 text-right border-t pt-1'>TOTAL: <span className='font-semibold'>{cmmc.cartTotal === 0 ? '0' : formatPrice(cmmc.cartTotal)}</span></p>
       </>)}
       </div>
       {cmmc.cartItems.length > 0 && !hideCheckout && (
         <>
           {!auth.loggedIn ? (
-            <Button size='lg' variant='secondary' rounded='lg' className='mt-12 mx-auto' onClick={() => router.push('/login?redirectUrl=checkout')}>Login</Button>
+            <Button size='sm' variant='secondary' rounded='lg' className='mt-12 mx-auto' onClick={() => router.push('/login?redirectUrl=checkout')}>Login to checkout</Button>
           ) : (
             <Button size='lg' variant='secondary' rounded='lg' className='mt-12 mx-auto' onClick={checkout} disabled={loadingCheckout}>Checkout</Button>
           )}

package/components/index.ts

@@ -8,4 +8,4 @@ export { default as ProductSelectionMobilePicker } from './product-selection-mob
 export { default as ProductSelectionRadioGroup } from './product-selection-radio-group'
 export { default as SelectCategoryAndItemWidget } from './select-category-and-item-widget'
 export { default as SelectItemInCategoryView } from './select-item-in-category-view'
-export * as Icons from './Icons'
+export { Icons } from './Icons'

package/components/select-category-and-item-widget.tsx

@@ -1,13 +1,12 @@
 'use client'
 import React, { useEffect } from 'react'
-import { computed } from 'mobx'
 import { observer } from 'mobx-react-lite'
 
 import { ApplyTypography, ListBox } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
 
 import type { FacetValueDesc, FacetsValue, LineItem } from '../types'
-import { useCommerce } from '../service'
+import { useCommerce } from '../service/context'
 import { formatPrice } from '../util'
 
 import FacetTogglesWidget from './facet-toggles-widget'

package/components/select-item-in-category-view.tsx

@@ -1,13 +1,12 @@
 'use client'
-import React, { useState } from 'react'
+import React from 'react'
 import Image from 'next/image'
 import { observer } from 'mobx-react-lite'
 
 import { cn } from '@hanzo/ui/util'
 import { Skeleton } from '@hanzo/ui/primitives'
 
-import { useCommerce } from '../service'
-import type { Category, LineItem, ObsLineItemRef } from '../types'
+import type { Category, ObsLineItemRef } from '../types'
 import { formatPrice } from '../util'
 import { Icons } from './Icons'
 
@@ -31,15 +30,15 @@ const SelectItemInCategoryView: React.FC<React.HTMLAttributes<HTMLDivElement> &
   ...props
 }) => {
 
-  const waiting = (): boolean => (isLoading || !category)
+  const waiting = (): boolean => (isLoading) // keep for convenience for now
 
   const CategoryImage: React.FC<{ className?: string }> = ({ className = '' }) => {
 
     if (waiting()) {
       // deliberately not Skeleton to have a better overall pulse effect.
       return <div className={cn(
-        'bg-level-1 rounded-xl aspect-square ' +
-        ' min-h-[100px] sm:min-h-[200px] lg:aspect-auto lg:h-[300px] lg:w-[200px] 2xl:w-auto 2xl:aspect-square',
+        'bg-level-1 rounded-xl aspect-square w-full min-h-1 ', // +
+        //' min-h-[100px] sm:min-h-[200px] lg:aspect-auto  2xl:w-auto 2xl:aspect-square',
         className)} />
     }
 
@@ -49,7 +48,7 @@ const SelectItemInCategoryView: React.FC<React.HTMLAttributes<HTMLDivElement> &
           aria-label='Placeholder'
           role='img'
           aria-roledescription='placeholder'
-          className={cn('h-60 flex items-center justify-center', className)}
+          className={cn('w-full flex items-center justify-center aspect-square' , className)}
         >
           <Icons.barcode className='h-9 w-9 text-muted' aria-hidden='true' />
         </div>

package/index.ts

@@ -0,0 +1,4 @@
+export * from './types'
+export * from './service/context'
+export type { StandaloneServiceOptions as ServiceOptions } from './service/impls/standalone/standalone-service'
+export { useSkuAndFacetParams } from './util'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/commerce",
-  "version": "1.0.11",
+  "version": "1.1.0",
   "description": "Library with shopping cart components.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

package/service/context.tsx

@@ -6,21 +6,22 @@ import { enableStaticRendering } from 'mobx-react-lite'
 enableStaticRendering(typeof window === "undefined")
 
 
-import type CommerceService from './commerce-service'
-
-import getServiceSingleton from './impl'
+import type CommerceService from '../types/commerce-service'
+import type { ServiceOptions } from '..'
+import getServiceSingleton from './impls'
 import type { Category, FacetsDesc } from '../types'
 
 const CommerceServiceContext = createContext<CommerceService | undefined>(undefined)
 
-export const useCommerce = (): CommerceService => {
+
+const useCommerce = (): CommerceService => {
   return useContext(CommerceServiceContext) as CommerceService
 }
 
-export const CommerceServiceProvider: React.FC<PropsWithChildren & {
+const CommerceServiceProvider: React.FC<PropsWithChildren & {
   productsByCategory: Category[]
   facets: FacetsDesc
-  options?: any
+  options?: ServiceOptions
 }> = ({ 
   children,
   productsByCategory,
@@ -30,10 +31,12 @@ export const CommerceServiceProvider: React.FC<PropsWithChildren & {
 
   const serviceRef = useRef<CommerceService>(getServiceSingleton(productsByCategory, facets, options))
   return (
-    <CommerceServiceContext.Provider
-      value={serviceRef.current}
-    >
+    <CommerceServiceContext.Provider value={serviceRef.current}>
       {children}
     </CommerceServiceContext.Provider>
   )
 }
+
+export {
+  useCommerce, CommerceServiceProvider
+}

package/service/impls/index.ts

@@ -0,0 +1,3 @@
+import { getInstance } from './standalone'
+
+export default getInstance

package/service/{impl/standalone/obs-line-item.ts → impls/standalone/actual-line-item.ts}

@@ -7,7 +7,18 @@ import {
 
 import type { Product, LineItem } from '../../../types'
 
-class ObsLineItem implements LineItem {
+interface ActualLineItemSnapshot {
+  sku: string  
+  categoryId: string  // helps impl of restoreFromSnapshot
+  title: string
+  price: number
+  quantity: number
+  timeAdded: number   // helps to sort view of order and cart
+}
+
+class ActualLineItem 
+  implements LineItem  
+{
 
   qu: number = 0
 
@@ -18,9 +29,10 @@ class ObsLineItem implements LineItem {
   categoryId: string  
   desc?: string
   price: number
-  img?: string  
+  img?: string 
+  timeAdded: number = 0 // timeAdded of being added to cart
 
-  constructor(prod: Product) {
+  constructor(prod: Product, snap?: ActualLineItemSnapshot) {
     this.id = prod.id
     this.sku = prod.sku
     this.title = prod.title
@@ -30,8 +42,14 @@ class ObsLineItem implements LineItem {
     this.price = prod.price
     this.img = prod.img
 
+    if (snap) {
+      this.qu = snap.quantity
+      this.timeAdded = snap.quantity
+    }
+
     makeObservable(this, {
       qu: observable,
+      timeAdded: observable,
       canDecrement: computed,  
       isInCart: computed,
       
@@ -40,15 +58,32 @@ class ObsLineItem implements LineItem {
     })
   }
 
+  takeSnapshot = (): ActualLineItemSnapshot => ({
+    sku: this.sku,
+    categoryId: this.categoryId,
+    title: this.title,
+    price: this.price,
+    quantity: this.qu,
+    timeAdded: this.timeAdded
+  } satisfies ActualLineItemSnapshot)
+ 
   get canDecrement(): boolean { return this.qu > 0 }
   get quantity(): number {return this.qu}
   get isInCart(): boolean {return this.qu > 0}
 
-  increment(): void { this.qu++ }
+  increment(): void { 
+    if (this.qu === 0) {
+      this.timeAdded = new Date().getTime()
+    }
+    this.qu++ 
+  }
 
   decrement(): void {
     if (this.canDecrement) {
       this.qu--
+      if (this.qu === 0) {
+        this.timeAdded = 0  
+      }
     }
   }
 
@@ -59,4 +94,7 @@ class ObsLineItem implements LineItem {
 
 }
 
-export default ObsLineItem
+export {
+  type ActualLineItemSnapshot,
+  ActualLineItem as default
+}

package/service/impls/standalone/index.ts

@@ -0,0 +1,54 @@
+import { enableStaticRendering } from 'mobx-react-lite'
+
+import type { CommerceService, Category, FacetsDesc } from '../../../types'
+import StandaloneService, {type StandaloneServiceOptions} from './standalone-service'
+
+import { readSnapshot, listenAndWriteSnapshots } from './localStorage'
+
+enableStaticRendering(typeof window === "undefined")
+
+const _log = (s: string) => {
+  const d = new Date()
+  console.log(`TIMESTAMPED: ${d.getUTCMinutes()}:${d.getUTCSeconds()}:${d.getUTCMilliseconds()}`)
+  console.log(s)
+}
+
+// https://dev.to/ivandotv/mobx-server-side-rendering-with-next-js-4m18
+
+let instance: StandaloneService | undefined =  undefined
+
+export const getInstance = (
+  categories: Category[], 
+  facets: FacetsDesc, 
+  options?: StandaloneServiceOptions
+): CommerceService => {
+
+  if (!options) {
+    throw new Error('cmmc getInstance(): Standalone Commerce Service requires config options!')
+  }
+
+   if (typeof window === "undefined") {
+    //_log("NEW INSTANCE FOR SERVER")
+    return new StandaloneService(
+      categories, 
+      facets, 
+      options
+    )
+  }
+
+    // Client side, create the store only once in the client
+  if (!instance) {
+    //_log("NEW INSTANCE FOR CLIENT")
+    const snapShot = readSnapshot()
+    instance = new StandaloneService(
+      categories, 
+      facets, 
+      options,
+      snapShot
+    )
+    listenAndWriteSnapshots(instance)
+  }  
+
+  return instance
+}
+

package/service/impls/standalone/localStorage.ts

@@ -0,0 +1,34 @@
+import { reaction } from 'mobx'
+import StandaloneService, { type StandaloneServiceSnapshot } from './standalone-service'
+
+const LS_KEY = 'lux-cart'
+
+const readSnapshot = (): StandaloneServiceSnapshot | undefined  => {
+  const snapshotAsStr = localStorage.getItem(LS_KEY)
+  return snapshotAsStr ? JSON.parse(snapshotAsStr) as StandaloneServiceSnapshot : undefined
+}
+
+const listenAndWriteSnapshots = (cmmc: StandaloneService): void => {
+
+  if (typeof window !== 'undefined') {
+    reaction(
+      () => (cmmc.cartTotal),
+      (total) => {
+        if (total > 0) {
+          const snapshot = cmmc.takeSnapshot()
+//          console.log(`CMMC LOCAL STORAGE UPDATE. (CART TOTAL: ${total}`)
+          localStorage.setItem(LS_KEY, JSON.stringify(snapshot) )
+        }
+        else {
+          localStorage.removeItem(LS_KEY)  
+        }
+      }
+    )
+  }
+}
+
+export {
+  readSnapshot,
+  listenAndWriteSnapshots  
+}
+

package/service/impls/standalone/orders/firebase-app.ts

@@ -0,0 +1,14 @@
+import { initializeApp, getApps } from 'firebase/app'
+
+const firebaseConfig = {
+  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
+  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
+  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
+}
+
+// Initialize Firebase instance if there isn't one already
+export default getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0]

package/service/impls/standalone/orders/index.ts

@@ -0,0 +1,60 @@
+import firebaseApp from './firebase-app' 
+
+import { 
+  getFirestore, 
+  collection, 
+  setDoc, 
+  doc, 
+  serverTimestamp,
+  type Firestore,
+  type FieldValue, 
+} from 'firebase/firestore'  
+
+import type { ActualLineItemSnapshot } from '../actual-line-item'
+
+let dbInstance: Firestore | undefined = undefined
+
+const getDBInstance = (name: string): Firestore => {
+  if (!dbInstance) {
+    dbInstance = getFirestore(firebaseApp, name) 
+  }
+  return dbInstance  
+} 
+ 
+interface SavedOrder {
+  email: string
+  timestamp: FieldValue
+  items: ActualLineItemSnapshot[]
+}
+
+const createOrder = async (
+  email: string,
+  items: ActualLineItemSnapshot[],
+  options: {
+    dbName: string
+    ordersTable: string
+  }
+): Promise<{
+  success: boolean,
+  error: any
+}> => {  
+
+  let error: any | null = null
+  const ordersRef = collection(getDBInstance(options.dbName), options.ordersTable)
+
+  try {
+    await setDoc(doc(ordersRef, `${email}-${new Date().toISOString()}`), {
+      email,
+      timestamp: serverTimestamp(),
+      items,
+    } satisfies SavedOrder)
+  } 
+  catch (e) {  
+      console.error('Error writing item document: ', e)
+      error = e  
+  }  
+  
+  return { success: !error, error }  
+}
+
+export { createOrder }

package/service/{impl/standalone/service.ts → impls/standalone/standalone-service.ts}

@@ -7,22 +7,29 @@ import {
   toJS
 } from 'mobx'
 
-import type { 
+import type {
+  CommerceService, 
   Category, 
   LineItem,
   FacetsValue, 
   FacetsDesc
 } from '../../../types'
 
-import type CommerceService from '../../commerce-service'
+import { createOrder as createOrderHelper } from './orders'
 
-import ObservableLineItem from './obs-line-item'
+import ActualLineItem, { type ActualLineItemSnapshot } from './actual-line-item'
 
-export type StandaloneServiceOptions = {
+type StandaloneServiceOptions = {
   levelZeroPrefix?: string
+  dbName: string
+  ordersTable: string
 }
 
-class StandaloneCommerceService 
+interface StandaloneServiceSnapshot {
+  items: ActualLineItemSnapshot[]  
+}
+
+class StandaloneService 
   implements CommerceService
 {
   private _categoryMap = new Map<string, Category>()
@@ -30,52 +37,68 @@ class StandaloneCommerceService
   private _selectedFacets: FacetsValue = {}
 
   private _options : StandaloneServiceOptions
-
-  private _currentItemSku: string | undefined = undefined
+  private _currentItem: ActualLineItem | undefined = undefined
 
   constructor(
     categories: Category[],
     facets: FacetsDesc,
-    options: StandaloneServiceOptions={}
+    options: StandaloneServiceOptions,
+    serviceSnapshot?: StandaloneServiceSnapshot,
   ) {
 
     this._facetsDesc = facets
     this._options = options
 
     categories.forEach((c) => {
-      c.products = c.products.map((p) => (new ObservableLineItem(p)))
+      c.products = c.products.map((p) => { 
+        if (serviceSnapshot) {
+          const itemSnapshot = serviceSnapshot.items.find((is) => (is.sku === p.sku))
+          if (itemSnapshot) {
+            return new ActualLineItem(p, itemSnapshot)
+          }
+        }
+        return new ActualLineItem(p)
+      })
       this._categoryMap.set(c.id, c)
     })
 
     makeObservable<
-      StandaloneCommerceService, 
+      StandaloneService, 
         '_selectedFacets' | 
-        '_currentItemSku' 
+        '_currentItem' 
     >(this, {
       _selectedFacets :  observable.deep,
-      _currentItemSku: observable,
+      _currentItem: observable,
     })
 
     makeObservable(this, {
       cartItems: computed,
       cartTotal: computed, 
       specifiedItems: computed,
+      specifiedCategories: computed, 
       setCurrentItem: action,
       currentItem: computed,
       item: computed,
-      specifiedCategories: computed, 
       facetsValue: computed
       /* NOT setFacets. It implements it's action mechanism */
     })
+  }
 
+  async createOrder(email: string): Promise<void> {
+    const snapshot = this.takeSnapshot()
+    createOrderHelper(email, snapshot.items, this._options) // didn't want to have two levels of 'items'
   }
 
+  takeSnapshot = (): StandaloneServiceSnapshot => ({
+    items : (this.cartItems as ActualLineItem[]).map((it) => (it.takeSnapshot()))
+  })
+
   get cartItems(): LineItem[] {
     let result: LineItem[] = []
     this._categoryMap.forEach((cat) => {
       result = [...result, ...(cat.products as LineItem[]).filter((item) => (item.isInCart))]
     })
-    return result
+    return result.sort((it1, it2) => ((it1 as ActualLineItem).timeAdded - (it2 as ActualLineItem).timeAdded))
   }
   
   get cartTotal(): number {
@@ -85,39 +108,45 @@ class StandaloneCommerceService
     )
   }
 
-  setCurrentItem(sku: string | undefined): void {
-    this._currentItemSku = sku
+  setCurrentItem(skuToFind: string | undefined): boolean {
+
+    if (skuToFind === undefined || skuToFind.length === 0) {
+      this._currentItem = undefined
+      return true
+    }
+      // self calling function
+    this._currentItem = ((): ActualLineItem | undefined  => {
+
+      const categoriesTried: string[] = []
+      if (this.specifiedCategories && this.specifiedCategories.length > 0) {
+          for (let category of this.specifiedCategories) {
+          categoriesTried.push(category.id)
+          const foundItem = category.products.find((p) => (p.sku === skuToFind))
+          if (foundItem) {
+            return foundItem as ActualLineItem
+          }
+        }
+      }
+      
+      let foundItem: ActualLineItem | undefined = undefined
+      this._categoryMap.forEach((category, categoryId) => {
+        if (foundItem) return
+        if (categoriesTried.includes(categoryId)) return
+        foundItem = category.products.find((p) => (p.sku === skuToFind)) as ActualLineItem | undefined
+      }) 
+    })();
+
+    return !!this._currentItem
   }
 
+
   /* ObsLineItemRef */
   get item(): LineItem | undefined {
-    return this.currentItem
+    return this._currentItem
   }
 
   get currentItem(): LineItem | undefined {
-    if (!this._currentItemSku) return undefined
-
-    const categoriesTried: string[] = []
-    if (this.specifiedCategories && this.specifiedCategories.length > 0) {
-
-      for (let category of this.specifiedCategories) {
-        categoriesTried.push(category.id)
-        const foundItem = 
-          (category.products as LineItem[]).find((item) => (item.sku === this._currentItemSku))
-        if (foundItem) {
-          return foundItem
-        }
-      }
-    }
-    
-    let foundItem: LineItem | undefined = undefined
-    this._categoryMap.forEach((category, categoryId) => {
-      if (foundItem) return
-      if (categoriesTried.includes(categoryId)) return
-      foundItem = (category.products as LineItem[]).find((item) => (item.sku === this._currentItemSku))
-    }) 
-
-    return foundItem
+    return this._currentItem
   }
 
   setFacets(sel: FacetsValue): Category[] {
@@ -147,7 +176,7 @@ class StandaloneCommerceService
       // 1-base, visiting two per iteration
     let current: string[] = this._selectedFacets[1] 
     for (let i = 2; i <= keysStr.length; i++) {
-      current = StandaloneCommerceService._visit(current, this._selectedFacets[i])
+      current = StandaloneService._visit(current, this._selectedFacets[i])
     }
     const prefix = this._options.levelZeroPrefix ?? ''
     return current.map((almostTheCatId) => (this._categoryMap.get(prefix + almostTheCatId)!))
@@ -199,4 +228,8 @@ class StandaloneCommerceService
   }
 }
 
-export default StandaloneCommerceService
+export {
+  type StandaloneServiceOptions, 
+  type StandaloneServiceSnapshot,
+  StandaloneService as default
+} 

package/tsconfig.json

@@ -6,6 +6,5 @@
   ],
   "exclude": [
     "node_modules",
-    "service/impl/hanzo-adapter/commerceJs/Commerce.test.ts"
   ]
 }

package/types/category.ts

@@ -0,0 +1,14 @@
+import type Product from './product'
+
+interface Category {
+  id: string      // LXB-AU-B
+  title: string   // Lux Gold, Minted Bar
+  desc?: string
+  img?: string 
+    // inbound they're Products and then interally they become LineItems
+  products: Product[] 
+}
+
+export {
+  type Category as default
+}

package/{service → types}/commerce-service.ts

@@ -1,9 +1,6 @@
-import type {  
-  Category, 
-  FacetsValue,
-  LineItem ,
-  ObsLineItemRef
-} from '../types'
+import type { LineItem, ObsLineItemRef } from './line-item'
+import type { FacetsValue } from './facet'
+import type Category from './category'
 
 interface CommerceService extends ObsLineItemRef {
 
@@ -11,6 +8,8 @@ interface CommerceService extends ObsLineItemRef {
   get cartTotal(): number
   getCartCategorySubtotal(categoryId: string): number
 
+  createOrder(email: string): Promise<void>
+
     /** 
      * Sets the tokens at each level supplied.
      * If a level is specifed as [], nothing will be specified.
@@ -30,7 +29,7 @@ interface CommerceService extends ObsLineItemRef {
      * "current" is unrelated to what is "specified",
      * ie, facets' values 
      *  */ 
-  setCurrentItem(sku: string | undefined): void
+  setCurrentItem(sku: string | undefined): boolean // was valid sku and was set.
     /**
      * For convenience, so widgets can share state.
      * "current" is unrelated to what is "specified",

package/types/facet.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react'
+
+interface FacetValueDesc {
+  value: string             // a token in the sku
+  label: string
+  img : string | ReactNode  // icon is required 
+  imgAR? : number           // helps with svgs
+}
+
+/* *** FOR EXAMPLE **
+{
+  1: [ {
+      token: 'AG',
+      label: 'Silver',
+      img: '/assets/img/cart/ui/facets/silver-swatch-200x200.png'
+    },
+    ... more FaceValues describing the "type" level (Silver, Gold)
+  ],
+  2 [
+    {
+      token: 'B'
+      label: 'Minted Bar
+    },
+    ... more FaceValues describing the "form" level (Bar, Coin, )
+  ]
+}
+*/
+type FacetsDesc = Record<number, FacetValueDesc[]>
+
+  // Which facets tokens are on at each level
+type FacetsValue = Record<number, string[]>
+
+export type {
+  FacetValueDesc,
+  FacetsDesc,
+  FacetsValue
+}

package/types/index.ts

@@ -1,103 +1,10 @@
-import type { ReactNode } from 'react'
 
-interface Product {
-  id: string    // DB index // not a logical aspect of our domain.  may not be necessary at all
-  sku: string   // human visible on orders etc.
-  title: string
-  shortTitle?: string
-  titleAsOption: string
-  categoryId: string  // skuPath, eg LXB-AU-B
-  desc?: string
-  price: number
-  img?: string  // if undefined: (category's img exists) ? (use it) : (use generic placeholder)
-}
-
-interface Category {
-  id: string      // LXB-AU-B
-  title: string   // Lux Gold, Minted Bar
-  desc?: string
-  img?: string 
-    // inbound they're Products and then interally they become LineItems
-  products: Product[] | LineItem[]
-}
-
-
-interface FacetValueDesc {
-  value: string             // a token in the sku
-  label: string
-  img : string | ReactNode  // icon is required 
-  imgAR? : number           // helps with svgs
-}
-
-/* *** FOR EXAMPLE **
-{
-  1: [ {
-      token: 'AG',
-      label: 'Silver',
-      img: '/assets/img/cart/ui/facets/silver-swatch-200x200.png'
-    },
-    ... more FaceValues describing the "type" level (Silver, Gold)
-  ],
-  2 [
-    {
-      token: 'B'
-      label: 'Minted Bar
-    },
-    ... more FaceValues describing the "form" level (Bar, Coin, )
-  ]
-}
-*/
-type FacetsDesc = Record<number, FacetValueDesc[]>
-
-  // Which facets tokens are on at each level
-type FacetsValue = Record<number, string[]>
-
-  // Client code always 
-  // has a LineItem, whether the Product
-  // is in the cart or not. Something is in the cart
-  // when its quantity > 0.  That's the only difference.
-  // The ui, and as well as some Cart state, reacts to 
-  // changes in this quantity.
-
-  // It could have more accurately been named
-  // 'QuantifiedProduct' but that sucked.
-interface LineItem extends Product {
-
-  /** all observable */
-  get quantity(): number
-  get canDecrement(): boolean
-  get isInCart(): boolean
-
-  increment(): void
-  decrement(): void
-}
-
-interface ObsLineItemRef {
-  get item(): LineItem | undefined
-}
-
-
-interface StringMutator {
-  get(): string | null
-  set(v: string | null): void
-}
-
-interface StringArrayMutator {
-  get(): string[] | null
-  set(v: string[] | null): void
-}
-
-export {
-  type Product,
-  type Category,
-  type LineItem,
-  type ObsLineItemRef,
-  type FacetsDesc,
-  type FacetsValue,
-  type FacetValueDesc,
-  type StringMutator,
-  type StringArrayMutator
-}
+export type { default as CommerceService } from './commerce-service'
+export type { default as Product } from './product'
+export type { default as Category } from './category'
+export * from './line-item'
+export * from './facet'
+export * from './string-mutator'
 
 
 

package/types/line-item.ts

@@ -0,0 +1,27 @@
+import type Product from './product'
+
+  // Client code always 
+  // has a LineItem, whether the Product
+  // is in the cart or not. Something is in the cart
+  // when its quantity > 0.  That's the only difference.
+  // The ui, and as well as some Cart state, reacts to 
+  // changes in this quantity.
+
+  // It could have more accurately been named
+  // 'QuantifiedProduct' but that sucked.
+interface LineItem extends Product {
+
+  /** all observable */
+  get quantity(): number
+  get canDecrement(): boolean
+  get isInCart(): boolean
+
+  increment(): void
+  decrement(): void
+}
+
+interface ObsLineItemRef {
+  get item(): LineItem | undefined
+}
+
+export type { LineItem, ObsLineItemRef}

package/types/product.ts

@@ -0,0 +1,15 @@
+interface Product {
+  id: string    // DB index // not a logical aspect of our domain.  may not be necessary at all
+  sku: string   // human visible on orders etc.
+  title: string
+  shortTitle?: string
+  titleAsOption: string
+  categoryId: string  // skuPath, eg LXB-AU-B
+  desc?: string
+  price: number
+  img?: string  // if undefined: (category's img exists) ? (use it) : (use generic placeholder)
+}
+
+export {
+  type Product as default
+}

package/types/string-mutator.ts

@@ -0,0 +1,14 @@
+interface StringMutator {
+  get(): string | null
+  set(v: string | null): void
+}
+
+interface StringArrayMutator {
+  get(): string[] | null
+  set(v: string[] | null): void
+}
+
+export type {
+  StringMutator, 
+  StringArrayMutator
+}

package/util/use-sku-and-facet-params.ts

@@ -1,6 +1,8 @@
+"use client"
 import { 
   useEffect, 
   useRef,
+  useState,
 } from 'react'
 import { autorun, toJS, type IReactionDisposer } from 'mobx'
 
@@ -10,8 +12,10 @@ import {
   parseAsBoolean,
 } from 'next-usequerystate'
 
-import type { Category, FacetsValue, StringMutator } from '../types'
-import { useCommerce } from '../service'
+import type { FacetsValue, StringMutator } from '../types'
+import { useCommerce } from '../service/context'
+
+const PLEASE_SELECT_FACETS = 'Please select an option from each group above.'
 
 interface GetMutator {
   (level: 1 | 2): StringMutator
@@ -24,11 +28,9 @@ const useSkuAndFacetParams = (
   const cmmc = useCommerce()
 
   const encRef = useRef<{
-    category: Category | undefined
     usingSkuMode: boolean
     autoRunDisposer: IReactionDisposer | undefined
   }>({
-    category: undefined,
     usingSkuMode: false,
     autoRunDisposer: undefined,
   })
@@ -40,12 +42,15 @@ const useSkuAndFacetParams = (
     parseAsString.withDefault('').withOptions({ clearOnDefault: true })
   )
 
-  const [skuParam, setSkuParam] = useQueryState('sku')
+  const [skuParam, setSkuParam] = useQueryState('sku',  
+    parseAsString.withDefault('').withOptions({ clearOnDefault: true })
+  )
+
   const [addParam, setAddParam] = useQueryState('add', 
     parseAsBoolean.withDefault(false).withOptions({ clearOnDefault: true })
   )
 
-  let message = ''
+  const [message, setMessage] = useState<string | undefined>(undefined)
 
   const directMutator: GetMutator = (level: 1 | 2): StringMutator => {
 
@@ -83,70 +88,80 @@ const useSkuAndFacetParams = (
     
     const setCurrentCategoryFromSku = (sku: string) => {
       const toks: string[] = sku.split('-')
-      const categories = cmmc.setFacets({
+      cmmc.setFacets({
         1: [toks[1]],
         2: [toks[2]]
       })
-      encRef.current.category = categories[0] 
     }
 
     if (skuParam) {
-      cmmc.setCurrentItem(skuParam)
-      if (addParam && cmmc.currentItem!.quantity === 0) {
-        cmmc.currentItem!.increment()  
-        setAddParam(false)
+        // true if a valid sku
+      if (cmmc.setCurrentItem(skuParam)) {
+        if (addParam && cmmc.currentItem!.quantity === 0) {
+          cmmc.currentItem!.increment()  
+          setAddParam(false)
+        }
+          // Marks that we've been here so no need to 
+          // create an autorun() instance twice.
+        if (!encRef.current.usingSkuMode) {
+          setCurrentCategoryFromSku(skuParam)
+          encRef.current.autoRunDisposer = autorun(() => {
+            if (cmmc.currentItem && cmmc.currentItem.sku !== skuParam) {
+              setSkuParam(cmmc.currentItem.sku)
+            }
+          })
+        }
+        setMessage(undefined)
+        encRef.current.usingSkuMode = true
       }
-        // Marks that we've been here so no need to 
-        // create an autorun() instance twice.
-      if (!encRef.current.usingSkuMode) {
-        setCurrentCategoryFromSku(skuParam)
-        encRef.current.autoRunDisposer = autorun(() => {
-          if (cmmc.currentItem && cmmc.currentItem.sku !== skuParam) {
-            setSkuParam(cmmc.currentItem.sku)
-          }
-        })
+      else {
+        setSkuParam('')
+          // if sent here w an invalid sku, 
+          // it will effectively put us in facet params mode
+        setMessage('Invalid sku. ' + PLEASE_SELECT_FACETS)
       }
-      encRef.current.usingSkuMode = true
-    }
-    else if (encRef.current.category) {
-      //const catMutators = [{val: level1, set: setLevel1} , {val: level2, set: setLevel2}]
-      cmmc.setCurrentItem(encRef.current.category.products[0].sku)
     }
+
     setLoading && setLoading(false)
-  }, [skuParam, encRef.current.category])
+  }, [skuParam])
 
     // supposed to be when component unmounts
+  /*  
   useEffect(() => (() => {
     if (encRef.current.autoRunDisposer) {
       //encRef.current.autoRunDisposer() // no idea why this seems to be called prematurely and so many times <shrug>
     }
   }), [])
+  */
 
 
     // Level Params Mode
   useEffect(() => {
 
     if (encRef.current.usingSkuMode) return
-    
+      
     const facets: FacetsValue = { }
     if (level1) { facets[1] = [level1] }
     if (level2) { facets[2] = [level2] }
+    //console.log(`LEV1: ${level1}, LEV2: ${level2}`)
     if (level1 && level2) {
       const categories = cmmc.setFacets(facets)
-      if (categories.length > 1) {
-        console.error("CAT", categories.map((c) => (c.title)))
-        throw new Error ( "CategoryContents: More than one specified Category should never be possible with this UI!")
+      if (categories && categories.length > 0) {
+        cmmc.setCurrentItem(categories[0].products[0].sku)
+        setMessage(undefined)
+      }
+      else {
+        cmmc.setCurrentItem(undefined)
+        setMessage('Unrecognized facets. ' + PLEASE_SELECT_FACETS)
       }
-      encRef.current.category = categories[0] 
     }
     else {
-      message = 'Please select an option from each group above.'
+      setMessage(PLEASE_SELECT_FACETS)
     }
     setLoading && setLoading(false)
   }, [level1 , level2])
 
   return {
-    category: encRef.current.category,
     message,
     getMutator: encRef.current.usingSkuMode ?
       directMutator : paramsMutator

package/service/firebase-config.ts

@@ -1,17 +0,0 @@
-// Import the functions you need from the SDKs you need
-import { initializeApp, getApps } from "firebase/app"
-
-const firebaseConfig = {
-    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
-    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
-    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
-    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
-    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
-    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
-    measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
-}
-
-// Initialize Firebase
-let firebase_app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0]
-
-export default firebase_app

package/service/impl/index.ts

@@ -1,3 +0,0 @@
-import { default as getInstance } from './standalone/get-singleton'
-
-export default getInstance

package/service/impl/standalone/get-singleton.ts

@@ -1,28 +0,0 @@
-import type CommerceService from '../../commerce-service'
-
-import StandaloneCommerceService, {type StandaloneServiceOptions} from './service'
-
-import type { Category, FacetsDesc } from '../../../types'
-
-// https://dev.to/ivandotv/mobx-server-side-rendering-with-next-js-4m18
-
-let instance: CommerceService | undefined =  undefined
-
-export default (categories: Category[], facets: FacetsDesc, options?: any): CommerceService => {
-
-  const _instance = instance ?? 
-    new StandaloneCommerceService(
-      categories, 
-      facets, 
-      options ? (options as StandaloneServiceOptions) : {} 
-    )
-      // For server side rendering always create a new store
-  if (typeof window === "undefined") return _instance
-
-    // Create the store once in the client
-  if (!instance) {
-    instance = _instance
-  }  
-
-  return _instance
-}

package/service/index.ts

@@ -1,4 +0,0 @@
-export type { default as CommerceService } from './commerce-service'
-export { useCommerce, CommerceServiceProvider } from './context'
-export { default as persistCart } from './utils'
-

package/service/utils.ts

@@ -1,37 +0,0 @@
-import type { LineItem } from "../types"  
-import firebase_app from "./firebase-config"  
-import { getFirestore, collection, addDoc, setDoc, doc } from "firebase/firestore"  
-  
-const db = getFirestore(firebase_app, 'lux-commerce')  
-  
-export default async function persistCart(cart: LineItem[], userEmail: string) {  
-    let result = null  
-    let error = null
-    const ordersRef = collection(db, "orders");
-
-    const cartAsObject = cart.reduce((acc, item) => {
-        acc[item.sku] = {
-            sku: item.sku,
-            title: item.title,
-            quantity: item.quantity,
-            description: item.desc,
-            img: item.img,
-            price: item.price,
-        }
-        return acc
-    }, {} as Record<string, {}>)
-  
-    try {  
-        try {
-            result = await setDoc(doc(ordersRef, `${userEmail}-${Date.now()}`), { order: cartAsObject })
-        } catch (e) {  
-            console.error('Error writing item document: ', e)
-            error = e  
-        }  
-    } catch (e) {  
-        console.error('Error writing order document: ', e)
-        error = e  
-    }  
-  
-    return { result, error }  
-}