@hanzo/commerce 1.1.0 → 1.1.2

package/components/cart.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React, { type PropsWithChildren, useState } from 'react'
+import React, { type PropsWithChildren } from 'react'
 import { useRouter } from 'next/navigation'
 import { observer } from 'mobx-react-lite'
 
@@ -23,18 +23,9 @@ const Cart: React.FC<PropsWithChildren & {
   isMobile=false,
   hideCheckout=false
 }) => {
-  const [loadingCheckout, setLoadingCheckout] = useState(false)
   const cmmc = useCommerce()
   const router = useRouter()
   const auth = useAuth()
-
-  const checkout = async () => {
-    setLoadingCheckout(true)
-    if (auth.user) {
-      await cmmc.createOrder(auth.user.email)
-    }
-    router.push('/checkout')
-  }
   
   return (
     <div className={cn('border p-6 rounded-lg', className)}>
@@ -50,10 +41,10 @@ const Cart: React.FC<PropsWithChildren & {
       </div>
       {cmmc.cartItems.length > 0 && !hideCheckout && (
         <>
-          {!auth.loggedIn ? (
+          {!(auth && auth.loggedIn) ? (
             <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>
+            <Button size='lg' variant='secondary' rounded='lg' className='mt-12 mx-auto' onClick={() => router.push('/checkout')}>Checkout</Button>
           )}
         </>
       )}

package/index.ts

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

package/package.json

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

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

@@ -23,12 +23,52 @@ const getDBInstance = (name: string): Firestore => {
  
 interface SavedOrder {
   email: string
+  paymentMethod: string
+  status: string
   timestamp: FieldValue
   items: ActualLineItemSnapshot[]
 }
 
 const createOrder = async (
   email: string,
+  paymentMethod: string,
+  items: ActualLineItemSnapshot[],
+  options: {
+    dbName: string
+    ordersTable: string
+  }
+): Promise<{
+  success: boolean,
+  error: any,
+  id?: string
+}> => {  
+
+  let error: any | null = null
+  const ordersRef = collection(getDBInstance(options.dbName), options.ordersTable)
+  const orderId = `${email}-${new Date().toISOString()}`
+
+  try {
+    await setDoc(doc(ordersRef, orderId), {
+      email,
+      paymentMethod,
+      status: 'open',
+      timestamp: serverTimestamp(),
+      items,
+    } satisfies SavedOrder)
+    return { success: !error, error, id: orderId }
+  }
+  catch (e) {  
+    console.error('Error writing item document: ', e)
+    error = e  
+  }  
+  
+  return { success: !error, error }  
+}
+
+const updateOrder = async (
+  orderId: string,
+  email: string,
+  paymentMethod: string,
   items: ActualLineItemSnapshot[],
   options: {
     dbName: string
@@ -43,8 +83,10 @@ const createOrder = async (
   const ordersRef = collection(getDBInstance(options.dbName), options.ordersTable)
 
   try {
-    await setDoc(doc(ordersRef, `${email}-${new Date().toISOString()}`), {
+    await setDoc(doc(ordersRef, orderId), {
       email,
+      paymentMethod,
+      status: 'open',
       timestamp: serverTimestamp(),
       items,
     } satisfies SavedOrder)
@@ -57,4 +99,4 @@ const createOrder = async (
   return { success: !error, error }  
 }
 
-export { createOrder }
+export { createOrder, updateOrder }

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

@@ -15,7 +15,10 @@ import type {
   FacetsDesc
 } from '../../../types'
 
-import { createOrder as createOrderHelper } from './orders'
+import {
+  createOrder as createOrderHelper,
+  updateOrder as updateOrderHelper
+} from './orders'
 
 import ActualLineItem, { type ActualLineItemSnapshot } from './actual-line-item'
 
@@ -84,9 +87,15 @@ class StandaloneService
     })
   }
 
-  async createOrder(email: string): Promise<void> {
+  async createOrder(email: string, paymentMethod: string): Promise<string | undefined> {
     const snapshot = this.takeSnapshot()
-    createOrderHelper(email, snapshot.items, this._options) // didn't want to have two levels of 'items'
+    const order = await createOrderHelper(email, paymentMethod, snapshot.items, this._options) // didn't want to have two levels of 'items'
+    return order.id
+  }
+
+  async updateOrder(orderId: string, email: string, paymentMethod: string): Promise<void> {
+    const snapshot = this.takeSnapshot()
+    updateOrderHelper(orderId, email, paymentMethod, snapshot.items, this._options) // didn't want to have two levels of 'items'
   }
 
   takeSnapshot = (): StandaloneServiceSnapshot => ({
@@ -127,13 +136,14 @@ class StandaloneService
           }
         }
       }
-      
-      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
-      }) 
+      for( const [categoryId, category] of this._categoryMap.entries()) {
+        if (categoriesTried.includes(categoryId)) continue
+        const foundItem = category.products.find((p) => (p.sku === skuToFind)) as ActualLineItem | undefined
+        if (foundItem) {
+          return foundItem as ActualLineItem
+        }
+      }
+      return undefined
     })();
 
     return !!this._currentItem
@@ -197,13 +207,15 @@ class StandaloneService
     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).
-      if (!partial[key]) {
+      else {
         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
   }

package/types/commerce-service.ts

@@ -8,7 +8,8 @@ interface CommerceService extends ObsLineItemRef {
   get cartTotal(): number
   getCartCategorySubtotal(categoryId: string): number
 
-  createOrder(email: string): Promise<void>
+  createOrder(email: string, paymentMethod: string): Promise<string | undefined>
+  updateOrder(orderId: string, email: string, paymentMethod: string): Promise<void>
 
     /** 
      * Sets the tokens at each level supplied.
@@ -29,7 +30,7 @@ interface CommerceService extends ObsLineItemRef {
      * "current" is unrelated to what is "specified",
      * ie, facets' values 
      *  */ 
-  setCurrentItem(sku: string | undefined): boolean // was valid sku and was set.
+  setCurrentItem(sku: string | undefined): boolean // valid sku and was set.
     /**
      * For convenience, so widgets can share state.
      * "current" is unrelated to what is "specified",

package/util/index.ts

@@ -25,4 +25,4 @@ export function formatPrice(price: number): string {
   });
 }
 
-export { default as useSkuAndFacetParams } from './use-sku-and-facet-params'
+export { default as useSyncSkuParamWithCurrentItem } from './use-sync-sku-param-w-current-item'

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

@@ -0,0 +1,81 @@
+"use client"
+import {  useEffect } from 'react'
+import { reaction } from 'mobx'
+
+import {
+  useQueryState,
+  parseAsString,
+  parseAsBoolean,
+} from 'next-usequerystate'
+
+import { useCommerce } from '../service/context'
+
+const PLEASE_SELECT_FACETS = 'Please select an option from each group above.'
+
+const useSyncSkuParamWithCurrentItem = (
+  setMessage: (m: string | undefined) => void,
+  setLoading?: (l: boolean) => void
+) => {
+
+  const cmmc = useCommerce()
+
+  const [skuParam, setSkuParam] = useQueryState('sku',  
+    parseAsString.withDefault('').withOptions({ clearOnDefault: true })
+  )
+
+  const [addParam, setAddParam] = useQueryState('add', 
+    parseAsBoolean.withDefault(false).withOptions({ clearOnDefault: true })
+  )
+
+  useEffect(() => {
+
+    return reaction(() => ({
+      specifiedCat: cmmc.specifiedCategories.length === 1 ? cmmc.specifiedCategories[0] : undefined, 
+      currentItem: cmmc.currentItem
+    }),
+    ({specifiedCat, currentItem}) => {
+      //console.log("REACTION: " + `CAT ID: ${category?.id} SKU: ${item?.sku}`)
+      if (currentItem) {
+          // if we set the currentItem w sku, then user selects other facets
+        if (specifiedCat && currentItem.categoryId != specifiedCat.id ) {
+          cmmc.setCurrentItem(specifiedCat.products[0].sku)
+        }
+        setSkuParam(cmmc.currentItem!.sku)
+      }
+      else if (specifiedCat) {
+        cmmc.setCurrentItem(specifiedCat.products[0].sku)
+        setSkuParam(cmmc.currentItem!.sku)
+      }
+    })
+  }, [])
+
+  useEffect(() => {
+    
+    const setCurrentCategoryFromSku = (sku: string) => {
+      const toks: string[] = sku.split('-')
+      cmmc.setFacets({
+        1: [toks[1]],
+        2: [toks[2]]
+      })
+    }
+
+      // setCI returns true if it's a recognized sku
+    if (skuParam && cmmc.setCurrentItem(skuParam)) {
+      if (addParam) {
+        if (cmmc.currentItem!.quantity === 0) {
+          cmmc.currentItem!.increment()  
+        }
+        setAddParam(false)
+      }
+      setCurrentCategoryFromSku(skuParam)
+      setMessage(undefined)
+    }
+    else {
+      setMessage(PLEASE_SELECT_FACETS)
+    }
+
+    setLoading && setLoading(false)
+  }, [skuParam])
+}
+
+export default useSyncSkuParamWithCurrentItem

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

@@ -1,172 +0,0 @@
-"use client"
-import { 
-  useEffect, 
-  useRef,
-  useState,
-} from 'react'
-import { autorun, toJS, type IReactionDisposer } from 'mobx'
-
-import {
-  useQueryState,
-  parseAsString,
-  parseAsBoolean,
-} from 'next-usequerystate'
-
-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
-}
-
-const useSkuAndFacetParams = (
-  setLoading?: (l: boolean) => void
-) => {
-
-  const cmmc = useCommerce()
-
-  const encRef = useRef<{
-    usingSkuMode: boolean
-    autoRunDisposer: IReactionDisposer | undefined
-  }>({
-    usingSkuMode: false,
-    autoRunDisposer: undefined,
-  })
-
-  const [level1, setLevel1] = useQueryState('lev1',  
-    parseAsString.withDefault('').withOptions({ clearOnDefault: true })
-  )
-   const [level2, setLevel2] = useQueryState('lev2',  
-    parseAsString.withDefault('').withOptions({ clearOnDefault: true })
-  )
-
-  const [skuParam, setSkuParam] = useQueryState('sku',  
-    parseAsString.withDefault('').withOptions({ clearOnDefault: true })
-  )
-
-  const [addParam, setAddParam] = useQueryState('add', 
-    parseAsBoolean.withDefault(false).withOptions({ clearOnDefault: true })
-  )
-
-  const [message, setMessage] = useState<string | undefined>(undefined)
-
-  const directMutator: GetMutator = (level: 1 | 2): StringMutator => {
-
-    const setLevel = (value: string, level: 1 | 2 ): void  => {
-      const facets = cmmc.facetsValue
-      facets[level] = [value]
-      cmmc.setFacets(facets)
-    }
-  
-    const getLevelValueSafe = (level: 1 | 2): 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)}
-    }
-  } 
-
-  const paramsMutator: GetMutator = (level: 1 | 2): StringMutator => {
-    return level === 1 ? {
-      get: () => (level1),
-      set: setLevel1
-    } : {
-      get: () => (level2),
-      set: setLevel2
-    }
-  }
-
-  useEffect(() => {
-    
-    const setCurrentCategoryFromSku = (sku: string) => {
-      const toks: string[] = sku.split('-')
-      cmmc.setFacets({
-        1: [toks[1]],
-        2: [toks[2]]
-      })
-    }
-
-    if (skuParam) {
-        // 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
-      }
-      else {
-        setSkuParam('')
-          // if sent here w an invalid sku, 
-          // it will effectively put us in facet params mode
-        setMessage('Invalid sku. ' + PLEASE_SELECT_FACETS)
-      }
-    }
-
-    setLoading && setLoading(false)
-  }, [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 && categories.length > 0) {
-        cmmc.setCurrentItem(categories[0].products[0].sku)
-        setMessage(undefined)
-      }
-      else {
-        cmmc.setCurrentItem(undefined)
-        setMessage('Unrecognized facets. ' + PLEASE_SELECT_FACETS)
-      }
-    }
-    else {
-      setMessage(PLEASE_SELECT_FACETS)
-    }
-    setLoading && setLoading(false)
-  }, [level1 , level2])
-
-  return {
-    message,
-    getMutator: encRef.current.usingSkuMode ?
-      directMutator : paramsMutator
-  }
-
-}
-
-export default useSkuAndFacetParams