@hanzo/commerce 1.0.8

package/service/impl/standalone/service.ts

@@ -0,0 +1,198 @@
+import { 
+  computed, 
+  makeObservable, 
+  observable, 
+  runInAction, 
+  action,
+  toJS
+} from 'mobx'
+
+import type { 
+  Category, 
+  LineItem,
+  FacetsValue, 
+  FacetsDesc
+} from '../../../types'
+
+import type CommerceService from '../../commerce-service'
+
+import ObservableLineItem from './obs-line-item'
+
+export type StandaloneServiceOptions = {
+  levelZeroPrefix?: string
+}
+
+class StandaloneCommerceService 
+  implements CommerceService
+{
+  private _categoryMap = new Map<string, Category>()
+  private _facetsDesc: FacetsDesc 
+  private _selectedFacets: FacetsValue = {}
+
+  private _options : StandaloneServiceOptions
+
+  private _currentItemSku: string | undefined = undefined
+
+  constructor(
+    categories: Category[],
+    facets: FacetsDesc,
+    options: StandaloneServiceOptions={}
+  ) {
+
+    this._facetsDesc = facets
+    this._options = options
+
+    categories.forEach((c) => {
+      c.products = c.products.map((p) => (new ObservableLineItem(p)))
+      this._categoryMap.set(c.id, c)
+    })
+
+    makeObservable<
+      StandaloneCommerceService, 
+        '_selectedFacets' | 
+        '_currentItemSku' 
+    >(this, {
+      _selectedFacets :  observable.deep,
+      _currentItemSku: observable,
+    })
+
+    makeObservable(this, {
+      cartItems: computed,
+      cartTotal: computed, 
+      specifiedItems: computed,
+      setCurrentItem: action,
+      currentItem: computed,
+      item: computed,
+      specifiedCategories: computed, 
+      facets: computed
+      /* NOT setFacets. It implements it's action mechanism */
+    })
+
+  }
+
+  get cartItems(): LineItem[] {
+    let result: LineItem[] = []
+    this._categoryMap.forEach((cat) => {
+      result = [...result, ...(cat.products as LineItem[]).filter((item) => (item.isInCart))]
+    })
+    return result
+  }
+  
+  get cartTotal(): number {
+    return this.cartItems.reduce(
+      (total, item) => (total + item.price * item.quantity), 
+      0
+    )
+  }
+
+  setCurrentItem(sku: string | undefined): void {
+    this._currentItemSku = sku
+  }
+
+  /* ObsLineItemRef */
+  get item(): LineItem | undefined {
+    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
+  }
+
+  setFacets(sel: FacetsValue): Category[] {
+    runInAction (() => {
+      const res = this._processAndValidate(sel) 
+      if (res) {
+        this._selectedFacets = res
+      }
+    })
+    return this.specifiedCategories
+  }
+
+  get facets(): FacetsValue {
+    return this._selectedFacets
+  }
+
+  get specifiedCategories(): Category[] {
+    if (Object.keys(toJS(this._selectedFacets)).length === 0) {
+      // FacetsDesc have never been set or unset, so cannot evaluate them
+      return []
+    }
+    const keysStr = Object.keys(this._facetsDesc)
+      // 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])
+    }
+    const prefix = this._options.levelZeroPrefix ?? ''
+    return current.map((almostTheCatId) => (this._categoryMap.get(prefix + almostTheCatId)!))
+  }
+
+  private static _visit(current: string[], next: string[]): string[] {
+    const result: string[] = []
+    current.forEach((c) => {
+      next.forEach((n) => {
+        result.push(`${c}-${n}`)
+      })
+    })
+    return result
+  }
+
+  private _processAndValidate(partial: FacetsValue): FacetsValue | undefined {
+    const result: FacetsValue = {}
+    const keysStr = Object.keys(this._facetsDesc)
+    const keysNum = keysStr.map((key) => (parseInt(key)))
+    keysNum.forEach((key) => {
+        // if not present, assume the facet is "off" and allow all (include all in the set).
+      if (!partial[key]) {
+        result[key] = this._facetsDesc[key].map((fv) => (fv.value))
+      }
+        // If present, filter out the bad values if any
+      const filtered = partial[key].filter((fv) => this._facetsDesc[key].find((fvDesc) => (fvDesc.value === fv)))
+      result[key] = filtered
+    })
+    return result
+  }
+
+  get specifiedItems(): LineItem[] {
+    if (Object.keys(toJS(this._selectedFacets)).length === 0) {
+      // FacetsDesc have never been set or unset, so cannot evaluate them
+      return []
+    }
+
+    return this.specifiedCategories.reduce(
+      (allProducts, cat) => ([...allProducts, ...(cat.products as LineItem[])]), [] as LineItem[])
+  }
+
+  getCartCategorySubtotal(categoryId: string): number {
+    const c = this._categoryMap.get(categoryId)!
+    return (c.products as LineItem[]).reduce(
+        // avoid floating point bs around zero
+      (total, item) => (item.quantity > 0 ? total + item.price * item.quantity : total),
+      0
+    )
+  }
+}
+
+export default StandaloneCommerceService

package/service/index.ts

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

package/service/utils.ts

@@ -0,0 +1,37 @@
+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 }  
+}

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../tsconfig.hanzo-modules.base.json",
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+  ],
+  "exclude": [
+    "node_modules",
+    "service/impl/hanzo-adapter/commerceJs/Commerce.test.ts"
+  ]
+}

package/types/README.md

@@ -0,0 +1,2 @@
+These are the types that the card ui expects and understands.
+There should always be adaptors both ways from Hanzo commerceJs types.

package/types/index.ts

@@ -0,0 +1,103 @@
+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
+}
+
+
+

package/util/index.ts

@@ -0,0 +1,25 @@
+export function toTitleCase(str: string) {
+  return str.replace(
+    /\w\S*/g,
+    (txt) => txt.charAt(0).toUpperCase() + txt.slice(1).toLowerCase()
+  )
+}
+
+export function slugify(str: string) {
+  return str
+    .toLowerCase()
+    .replace(/ /g, '-')
+    .replace(/[^\w-]+/g, '')
+    .replace(/--+/g, '-')
+}
+
+export function unslugify(str: string) {
+  return str.replace(/-/g, ' ')
+}
+
+export function formatPrice(price: number): string {
+  return price.toLocaleString('en-US', {
+    style: 'currency',
+    currency: 'USD',
+  });
+}