@hanzo/commerce 2.0.0 → 3.0.0

package/service/impls/standalone/standalone-service.ts

@@ -7,21 +7,26 @@ import {
   toJS
 } from 'mobx'
 
+import { computedFn } from 'mobx-utils'
+
 import type {
   CommerceService, 
   Category, 
   LineItem,
   FacetsValue, 
-  FacetsDesc
+  FacetValueDesc
 } from '../../../types'
 
 import {
   createOrder as createOrderHelper,
-  updateOrder as updateOrderHelper
+  updateOrderShippingInfo as updateOrderShippingInfoHelper,
+  updateOrderPaymentInfo as updateOrderPaymentInfoHelper
 } from './orders'
 
 import ActualLineItem, { type ActualLineItemSnapshot } from './actual-line-item'
 
+const SEP = '-'
+
 type StandaloneServiceOptions = {
   levelZeroPrefix?: string
   dbName: string
@@ -36,7 +41,7 @@ class StandaloneService
   implements CommerceService
 {
   private _categoryMap = new Map<string, Category>()
-  private _facetsDesc: FacetsDesc 
+  private _rootFacet: FacetValueDesc 
   private _selectedFacets: FacetsValue = {}
 
   private _options : StandaloneServiceOptions
@@ -44,12 +49,12 @@ class StandaloneService
 
   constructor(
     categories: Category[],
-    facets: FacetsDesc,
+    rootFacet: FacetValueDesc,
     options: StandaloneServiceOptions,
     serviceSnapshot?: StandaloneServiceSnapshot,
   ) {
 
-    this._facetsDesc = facets
+    this._rootFacet = rootFacet
     this._options = options
 
     categories.forEach((c) => {
@@ -78,6 +83,7 @@ class StandaloneService
       cartItems: computed,
       cartQuantity: computed,
       cartTotal: computed, 
+      cartEmpty: computed,
       specifiedItems: computed,
       specifiedCategories: computed, 
       setCurrentItem: action,
@@ -88,16 +94,68 @@ class StandaloneService
     })
   }
 
-  async createOrder(email: string, paymentMethod: string): Promise<string | undefined> {
+
+  getCategory(id: string): Category | undefined {
+    return this._categoryMap.get(id)
+  }
+
+  getFacetValuesAtSkuPath(skuPath: string): FacetValueDesc[] | undefined {
+    const toks = skuPath.split(SEP)
+    let level = 1
+    let valuesAtLevel: FacetValueDesc[] | undefined  = this._rootFacet.sub
+    do {
+      const fvalue = valuesAtLevel!.find((vf) => (vf.value === toks[level])) 
+      valuesAtLevel = fvalue ? fvalue.sub : undefined
+      level++
+    }
+    while (valuesAtLevel && (level < toks.length))
+    return level === toks.length ? valuesAtLevel : undefined 
+  } 
+
+  getFacetValuesSpecified = computedFn((level: number): FacetValueDesc[] | undefined => {
+
+    let lvl = 1
+    let valuesAtLevel: FacetValueDesc[] | undefined  = this._rootFacet.sub
+
+    do {
+      let selectedAtLevel: FacetValueDesc[] | undefined = undefined
+        // If not specified, assume all
+      if (lvl in this._selectedFacets) {
+        selectedAtLevel = valuesAtLevel!.filter((fv) => (this._selectedFacets[lvl].includes(fv.value))) 
+      }
+      else {
+        selectedAtLevel = valuesAtLevel 
+      }
+      let allSubsOfSelected: FacetValueDesc[] = []
+      selectedAtLevel?.forEach((fvd: FacetValueDesc) => {
+        if (fvd.sub) {
+          allSubsOfSelected = [...allSubsOfSelected, ...fvd.sub] 
+        }  
+      })
+
+      valuesAtLevel = allSubsOfSelected
+      lvl++
+    } while (valuesAtLevel.length > 0 && lvl <= level)
+
+    return (valuesAtLevel.length > 0 && ((lvl - 1) === level)) ? valuesAtLevel : undefined
+  })
+
+
+  //async createOrder(email: string, paymentMethod: string): Promise<string | undefined> {
+  async createOrder(email: string, name?: string): Promise<string | undefined> {
     const snapshot = this.takeSnapshot()
-    const order = await createOrderHelper(email, paymentMethod, snapshot.items, this._options) // didn't want to have two levels of 'items'
+    const order = await createOrderHelper(email, snapshot.items, this._options, name) // didn't want to have two levels of 'items'
     return order.id
   }
 
   // TODO: add shippingInfo type
-  async updateOrder(orderId: string, email: string, paymentMethod: string, shippingInfo?: any): Promise<void> {
-    const snapshot = this.takeSnapshot()
-    updateOrderHelper(orderId, email, paymentMethod, snapshot.items, this._options, shippingInfo) // didn't want to have two levels of 'items'
+  async updateOrderShippingInfo(orderId: string, shippingInfo: any): Promise<void> {
+    updateOrderShippingInfoHelper(orderId, shippingInfo, this._options)
+  }
+
+  // TODO: add paymentInfo type
+  async updateOrderPaymentInfo(orderId: string, paymentInfo: any): Promise<void> {
+    updateOrderPaymentInfoHelper(orderId, paymentInfo, this._options)
   }
 
   takeSnapshot = (): StandaloneServiceSnapshot => ({
@@ -112,6 +170,10 @@ class StandaloneService
     return result.sort((it1, it2) => ((it1 as ActualLineItem).timeAdded - (it2 as ActualLineItem).timeAdded))
   }
   
+  get cartEmpty(): boolean {
+    return this.cartItems.length === 0    
+  }
+
   get cartTotal(): number {
     return this.cartItems.reduce(
       (total, item) => (total + item.price * item.quantity), 
@@ -158,7 +220,6 @@ class StandaloneService
     return !!this._currentItem
   }
 
-
   /* ObsLineItemRef */
   get item(): LineItem | undefined {
     return this._currentItem
@@ -170,10 +231,7 @@ class StandaloneService
 
   setFacets(sel: FacetsValue): Category[] {
     runInAction (() => {
-      const res = this._processAndValidate(sel) 
-      if (res) {
-        this._selectedFacets = res
-      }
+      this._selectedFacets = this._processAndValidate(sel) 
     })
     return this.specifiedCategories
   }
@@ -186,46 +244,72 @@ class StandaloneService
     return result
   }
 
+
   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 = StandaloneService._visit(current, this._selectedFacets[i])
-    }
-    const prefix = this._options.levelZeroPrefix ?? ''
-    return current.map((almostTheCatId) => (this._categoryMap.get(prefix + almostTheCatId)!))
+
+    return this._rootFacet.sub!.reduce(
+      (acc: Category[], subFacet: FacetValueDesc) => (
+          // Pass the root token as a one member array
+        this._reduceNode([this._rootFacet.value], acc, subFacet)   
+      ), 
+      []
+    )
   }
 
-  private static _visit(current: string[], next: string[]): string[] {
-    const result: string[] = []
-    current.forEach((c) => {
-      next.forEach((n) => {
-        result.push(`${c}-${n}`)
-      })
-    })
-    return result
+  private _reduceNode(parentPath: string[], acc: Category[], node: FacetValueDesc): Category[] {
+    const path = [...parentPath, node.value] // Don't mutate original please :) 
+    const level = path.length - 1
+      // If there is no token array supplied for this level,
+      // assume all are specified.  Otherwise, see if the 
+      // current node is in the array
+    const specified = (
+      !this._selectedFacets[level] 
+      || 
+      this._selectedFacets[level].includes(node.value)
+    ) 
+    if (specified) {
+        // Process subnodes
+      if (node.sub && node.sub.length > 0) {
+        return node.sub.reduce((acc, n) => (
+          this._reduceNode(path, acc, n)
+        ) 
+        , acc)
+      }
+        // Process leaf
+      const cat = this._categoryMap.get(path.join(SEP))
+      if (!cat) {
+        throw new Error("specifiedCategories WTF?!" + path.join(SEP))
+      }
+      acc.push(cat)    
+    }
+    return acc
   }
 
-  private _processAndValidate(partial: FacetsValue): FacetsValue | undefined {
+  private _processAndValidate(partial: FacetsValue): FacetsValue  {
+
     const result: FacetsValue = {}
-    const keysStr = Object.keys(this._facetsDesc)
-    const keysNum = keysStr.map((key) => (parseInt(key)))
-    keysNum.forEach((key) => {
-      if (partial[key]) {
-          // If present, filter out the bad values (the one's that don't exist in the Desc)
-        const filtered = partial[key].filter((fv) => (this._facetsDesc[key].find((fvDesc) => (fvDesc.value === fv))))
-        result[key] = filtered
-      }
-        // if not present, assume the facet is "off" and allow all (include all in the set).
-      else {
-        result[key] = this._facetsDesc[key].map((fv) => (fv.value))
+
+    let level = 1
+    let currentSet = this._rootFacet.sub!
+    
+    while (true) {
+      let possibleCurrent = currentSet.map((el) => (el.value))
+      const validTokens = !partial[level] ? undefined : partial[level].filter((tok) => possibleCurrent.includes(tok))
+      if (!validTokens) {
+        break
       }
-    })
+      result[level] = validTokens
+      currentSet = validTokens.map((tok) => {
+        const fd = currentSet.find((node) => ( node.value === tok ))
+        return (fd && fd.sub && fd.sub.length > 0) ? fd.sub : []
+      }).flat()
+      level++
+    }
+    
     return result
   }
 

package/types/category.ts

@@ -1,8 +1,9 @@
 import type Product from './product'
 
 interface Category {
-  id: string      // LXB-AU-B
-  title: string   // Lux Gold, Minted Bar
+  id: string          // LXB-AU-B
+  title: string       // Minted Bar
+  parentTitle?: string // Lux Gold
   desc?: string
   img?: string 
     // inbound they're Products and then interally they become LineItems

package/types/checkout.ts

@@ -0,0 +1,6 @@
+
+type TransactionStatus = 'unpaid' | 'paid' | 'confirmed' | 'error'
+
+export {
+  type TransactionStatus as default
+}

package/types/commerce-service.ts

@@ -1,21 +1,23 @@
 import type { LineItem, ObsLineItemRef } from './line-item'
-import type { FacetsValue } from './facet'
+import type { FacetValueDesc, FacetsValue } from './facet'
 import type Category from './category'
 
 interface CommerceService extends ObsLineItemRef {
 
     /** Items in cart */
   get cartItems(): LineItem[]
-    /** Total of all quantities of items in cart */
+    /** Total of all quantities of all products in cart */
   get cartQuantity(): number
-    /** Total of all prices X quantities of items in cart */
+    /** Total of all prices * quantities of products in cart */
   get cartTotal(): number
+
+  get cartEmpty(): boolean
    
   getCartCategorySubtotal(categoryId: string): number
 
-  createOrder(email: string, paymentMethod: string): Promise<string | undefined>
-  // TODO: add shippingInfo type
-  updateOrder(orderId: string, email: string, paymentMethod: string, shippingInfo?: any): Promise<void>
+  createOrder(email: string, name?: string): Promise<string | undefined>
+  updateOrderShippingInfo(orderId: string, shippingInfo: any): Promise<void>
+  updateOrderPaymentInfo(orderId: string, paymentInfo: any): Promise<void>
 
     /** 
      * Sets the tokens at each level supplied.
@@ -31,7 +33,16 @@ interface CommerceService extends ObsLineItemRef {
   get specifiedItems(): LineItem[]
   get specifiedCategories(): Category[] 
 
-    /**
+    /** Whether this path defines a Category, or if it has further levels */
+  getFacetValuesAtSkuPath(skuPath: string): FacetValueDesc[] | undefined 
+
+    /** Based on current value of 'level', what are the available subfacets? 
+     *  If more than one value is specified at 'level' returned FacetValueDesc[]
+     * may represent multiple sets. 
+     * */ 
+  getFacetValuesSpecified(level: number): FacetValueDesc[] | undefined 
+
+      /**
      * For convenience, so widgets can share state.
      * "current" is unrelated to what is "specified",
      * ie, facets' values 
@@ -48,6 +59,8 @@ interface CommerceService extends ObsLineItemRef {
      *  */ 
   get currentItem(): LineItem | undefined
 
+  getCategory(id: string): Category | undefined
+
 }
 
 export {

package/types/facet.ts

@@ -5,6 +5,7 @@ interface FacetValueDesc {
   label: string
   img? : string | ReactNode  // icon is required 
   imgAR? : number           // helps with svgs
+  sub?: FacetValueDesc[]
 }
 
 /* *** FOR EXAMPLE **
@@ -25,13 +26,10 @@ interface FacetValueDesc {
   ]
 }
 */
-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,10 +1,10 @@
 
+export type { default as Category } from './category'
 export type { default as CommerceService } from './commerce-service'
+export type { default as ItemSelector } from './item-selector'
 export type { default as Product } from './product'
-export type { default as Category } from './category'
+
+export type { default as TransactionStatus } from './checkout'
 export * from './line-item'
 export * from './facet'
 export * from './string-mutator'
-
-
-

package/types/item-selector.ts

@@ -0,0 +1,14 @@
+import type Category from './category'
+import type { ObsLineItemRef } from './line-item'
+
+interface ItemSelector {
+  category: Category
+  selectedItemRef: ObsLineItemRef
+  selectSku: (sku: string) => void 
+  showPrice?: boolean       // true by default
+  showQuantity?: boolean    // true by default (not impl)
+}
+
+export {
+  type ItemSelector as default
+}

package/util/index.ts

@@ -1,3 +1,4 @@
+import type { StringMutator, CommerceService } from '../types'
 
 export function toTitleCase(str: string) {
   return str.replace(
@@ -27,5 +28,34 @@ export function formatPrice(price: number): string {
   return (str.endsWith('.00')) ? str.replace('.00', '') : str 
 }
 
+export const getFacetValuesMutator = (level: number, cmmc: CommerceService): StringMutator => {
 
-export { default as useSyncSkuParamWithCurrentItem } from './use-sync-sku-param-w-current-item'
+  const setLevel = (value: string, level: number ): void  => {
+    const facets = cmmc.facetsValue
+    facets[level] = [value]
+    cmmc.setFacets(facets)
+    const subFacets = cmmc.getFacetValuesSpecified(level)
+    if (subFacets) {
+      const facets = cmmc.facetsValue
+      facets[level + 1] = [subFacets[0].value]
+      cmmc.setFacets(facets)
+    }
+  }
+
+  const getLevelValueSafe = (level: number): string | null => {
+    const facets = cmmc.facetsValue
+    if (!(level in facets) || facets[level].length === 0 ) {
+      return null
+    }
+    return facets[level][0]
+  }
+
+  return {
+    get: () => (getLevelValueSafe(level)),
+    set: (v: string) => {setLevel(v, level)}
+  } satisfies StringMutator
+}
+
+
+export { default as useSyncSkuParamWithCurrentItem } from './use-sync-sku-param-w-current-item'
+export { default as processSquareCardPayment } from './square-payment'

package/util/square-payment.ts

@@ -0,0 +1,43 @@
+'use server'
+
+import { Client, Environment } from 'square'
+import { randomUUID } from 'crypto'
+
+// https://developer.squareup.com/blog/online-payments-with-square-and-react/
+declare global {
+  interface BigInt {
+    toJSON(): string;
+  }
+}
+
+BigInt.prototype.toJSON = function() { return this.toString(); }
+
+const { paymentsApi } = new Client({
+  accessToken: process.env.SQUARE_ACCESS_TOKEN,
+  environment: process.env.SQUARE_ENVIRONMENT as Environment
+})
+
+const processPayment = async (sourceId: string, amount: number, verificationToken: string) => {
+  // Square API accepts amount in cents
+  const amountInCents = amount * 100
+
+  try {
+    const { result } = await paymentsApi.createPayment({
+      idempotencyKey: randomUUID(),
+      sourceId: sourceId,
+      amountMoney: {
+        currency: 'USD',
+        amount: BigInt(amountInCents)
+      },
+      verificationToken
+    })
+    return result
+  } catch (error) {
+    console.error('Error processing payment:', error)
+    return null
+  }
+}
+
+export {
+  processPayment as default 
+}

package/util/use-sync-sku-param-w-current-item.ts

@@ -56,8 +56,11 @@ const useSyncSkuParamWithCurrentItem = (
     const setCurrentCategoryFromSku = (sku: string) => {
       const toks: string[] = sku.split('-')
       const fv: FacetsValue = {}
+        // TODO: confirm that extra trailing nonsense tokens won't break setFacets()
       for (let i = 1; i < categoryLevel; i++) {
-        fv[i] = [toks[i]]
+        if (i in toks) {
+          fv[i] = [toks[i]]
+        } 
       } 
       cmmc.setFacets(fv)
     }

package/blocks/components/commerce-cat-and-item-block.tsx

@@ -1,13 +0,0 @@
-import React from 'react'
-import type  CommerceCatAndItemBlock from '../def/commerce-cat-and-item-block'
-
-/*
-
-interface CommerceCatAndItemBlock extends Block {
-  blockType: 'commerce-cat-and-item'
-  parentPath: string        // SKU path of parent of Category ... eg, in Market, LXB-AU or LXB-AG.  Next level is Cat.
-  defaultCatPath?: string   // SKU path of default Category... eg, in Market, LXB-AU-B (Minted Bar) 
-}
-
-*/
-

package/blocks/def/commerce-cat-and-item-block.ts

@@ -1,9 +0,0 @@
-import type  { Block } from '@hanzo/ui/blocks'
-
-interface CommerceCatAndItemBlock extends Block {
-  blockType: 'commerce-cat-and-item'
-  parentPath: string        // SKU path of parent of Category ... eg, in Market, LXB-AU or LXB-AG.  Next level is Cat.
-  defaultCatPath?: string   // SKU path of default Category... eg, in Market, LXB-AU-B (Minted Bar) 
-}
-
-export { type CommerceCatAndItemBlock as default }

package/components/checkout/contact-info.tsx

@@ -1,83 +0,0 @@
-'use client'
- 
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@hanzo/ui/primitives/form'
-import { Input, Button } from '@hanzo/ui/primitives'
-import { User } from 'lucide-react'
-import { EnhHeadingBlockComponent, type EnhHeadingBlock } from '@hanzo/ui/blocks'
-import type { UseFormReturn } from 'react-hook-form'
- 
-const ContactInfo: React.FC<{
-  form: UseFormReturn<{
-    name: string;
-    email: string;
-  }, any, {
-    name: string;
-    email: string;
-  }>,
-  selectPaymentMethod: (method: 'crypto' | 'bank') => Promise<void>,
-}> = ({
-  form,
-  selectPaymentMethod,
-}) => {
-  return (
-    <Form {...form}>
-      <form className='text-left'>
-        <div className='flex flex-col gap-4'>
-          <div className='flex flex-col sm:flex-row gap-4'>
-            <FormField
-              control={form.control}
-              name='name'
-              render={({ field }) => (
-                <FormItem className='space-y-1 w-full'>
-                  <FormLabel>Name</FormLabel>
-                  <FormControl>
-                    <Input {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-            <FormField
-              control={form.control}
-              name='email'
-              render={({ field }) => (
-                <FormItem className='space-y-1 w-full'>
-                  <FormLabel>Email</FormLabel>
-                  <FormControl>
-                    <Input {...field} />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-          </div>
-          <div className='flex flex-col sm:flex-row gap-4 items-center'>
-            <Button
-              type='button'
-              onClick={() => selectPaymentMethod('crypto')}
-              className='mx-auto w-full'
-            >
-              Pay with crypto
-            </Button>
-            <Button
-              type='button'
-              onClick={() => selectPaymentMethod('bank')}
-              className='mx-auto w-full'
-            >
-              Bank transfer
-            </Button>
-          </div>
-        </div>
-      </form>
-    </Form>
-  )
-}
-
-export default ContactInfo