commerce cleanup and changes (#106)

cmmc: cleanup; +ActualLineItem.timeModified
cmmc: no slider if only one item

packages/commerce/components/buy/buy-card.tsx

@@ -14,7 +14,7 @@ import type {
   CategoryNode, 
 } from '../../types'
 
-import { useCommerce } from '../../context'
+import { useCommerce } from '../../service/context'
 import * as pathUtils from '../../service/path-utils'
 import { getFacetValuesMutator, ObsStringMutator } from '../../util'
 

packages/commerce/components/buy/carousel-buy-card.tsx

@@ -21,7 +21,7 @@ import type {
   MultiFamilySelectorOptions, 
 } from '../../types'
 
-import { useCommerce } from '../../context'
+import { useCommerce } from '../../service/context'
 import { getSelectionUISpecifier } from '../../util'
 
 import { CarouselItemSelector, ButtonItemSelector } from '../item-selector'

packages/commerce/components/cart/cart-panel/cart-line-item.tsx

@@ -9,7 +9,7 @@ import { Image } from '@hanzo/ui/primitives'
 import type { LineItem } from '../../../types'
 import { formatCurrencyValue } from '../../../util'
 import AddToCartWidget from '../../add-to-cart-widget'
-import { useCommerce } from '../../../context'
+import { useCommerce } from '../../../service/context'
 
 const DEF_IMG_SIZE=40
 

packages/commerce/components/cart/cart-panel/index.tsx

@@ -7,7 +7,7 @@ import { Button, ScrollArea } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
 
 import type { LineItem } from '../../../types'
-import { useCommerce } from '../../../context'
+import { useCommerce } from '../../../service/context'
 import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
 
 import CartLineItem from './cart-line-item'

packages/commerce/components/cart/cart-panel/promo-code.tsx

@@ -2,15 +2,23 @@
 
 import { useEffect, useState } from 'react'
 import { useSearchParams } from 'next/navigation'
+import { observer } from 'mobx-react-lite'
+
 import { useForm } from 'react-hook-form'
 import * as z from 'zod'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Check } from 'lucide-react'
-import { observer } from 'mobx-react-lite'
 
-import { Button, Form, FormControl, FormField, FormItem, Input } from '@hanzo/ui/primitives'
+import { 
+  Button, 
+  Form, 
+  FormControl, 
+  FormField, 
+  FormItem, 
+  Input 
+} from '@hanzo/ui/primitives'
 
-import { useCommerce } from '../../../context'
+import { useCommerce } from '../../../service/context'
 import type { Promo } from '../../../types'
 import getPromoFromApi from '../../../util/promo-codes'
 

packages/commerce/components/cart/cart-panel/total-area.tsx

@@ -6,7 +6,7 @@ import { cn } from '@hanzo/ui/util'
 
 import { formatCurrencyValue } from '../../../util'
 import PromoCode from './promo-code'
-import { useCommerce } from '../../../context'
+import { useCommerce } from '../../../service/context'
 
 const TotalArea: React.FC<{
   showPromoCode?: boolean

packages/commerce/components/checkout/payment-step-form/index.tsx

@@ -9,7 +9,7 @@ import { useForm } from 'react-hook-form'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@hanzo/ui/primitives'
 import { useAuth } from '@hanzo/auth/service'
 
-import { useCommerce } from '../../../context'
+import { useCommerce } from '../../../service/context'
 import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
 import type { CheckoutStepComponentProps, TransactionStatus } from '../../../types'
 

packages/commerce/components/checkout/payment-step-form/methods/card.tsx

@@ -15,7 +15,7 @@ import {
 
 import { cn } from '@hanzo/ui/util'
 
-import { useCommerce } from '../../../../context'
+import { useCommerce } from '../../../../service/context'
 import { processSquareCardPayment } from '../../../../util'
 import type { PaymentMethodComponentProps } from '../../../../types'
 import { sendFBEvent, sendGAEvent } from '../../../../util/analytics'

packages/commerce/components/checkout/payment-step-form/methods/crypto.tsx

@@ -19,7 +19,7 @@ import {
 } from '@hanzo/ui/primitives'
 
 import Eth from '../crypto-icons/eth'
-import { useCommerce } from '../../../../context'
+import { useCommerce } from '../../../../service/context'
 import type { PaymentMethodComponentProps } from '../../../../types'
 import { sendFBEvent, sendGAEvent } from '../../../../util/analytics'
 

packages/commerce/components/checkout/shipping-step-form.tsx

@@ -19,7 +19,7 @@ import {
   SelectValue 
 } from '@hanzo/ui/primitives'
 
-import { useCommerce } from '../../context'
+import { useCommerce } from '../../service/context'
 
 import countries from '../../util/countries'
 import { sendGAEvent } from '../../util/analytics'

packages/commerce/components/item-selector/carousel/index.tsx

@@ -178,7 +178,7 @@ const CarouselItemSelector: React.FC<ItemSelectorProps> = observer(({
           </div>
           {showByline && itemRef.item.byline && (<p>{itemRef.item.byline}</p>)}
         </ApplyTypography>
-        {showSlider && (
+        {showSlider && items.length > 1 && (
           <ItemCarouselSlider 
             clx='mt-5 w-[320px]' 
             numStops={items.length}  

packages/commerce/index.ts

@@ -1,7 +1,7 @@
-export * from './context'
+export * from './service/context'
 export * from './components'
   // Impl-dependent, so leave w impl
-export type { StandaloneServiceOptions as ServiceOptions } from './service/impls/standalone/standalone-service'
+export type { StandaloneServiceOptions as ServiceOptions } from './service/impls/standalone'
 export { 
   useSyncSkuParamWithCurrentItem, 
   getFacetValuesMutator, 

packages/commerce/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/commerce",
-  "version": "7.1.34",
+  "version": "7.3.1",
   "description": "e-commerce framework.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

packages/commerce/context/index.tsx → packages/commerce/service/context.tsx

@@ -11,8 +11,8 @@ import { enableStaticRendering } from 'mobx-react-lite'
 enableStaticRendering(typeof window === "undefined")
 
 import type CommerceService from '../types/commerce-service'
-import getInstance from '../service/get-instance'
 import type { CommerceConfig } from '../types'
+import { getInstance } from './impls/standalone'
 
 const CommerceContext = createContext<CommerceService | undefined>(undefined)
 

packages/commerce/service/impls/standalone/actual-line-item.ts

@@ -15,13 +15,13 @@ interface ActualLineItemSnapshot {
   title: string
   price: number
   quantity: number
-  timeAdded: number   // helps to sort view of order and cart
+  timeAdded: number     
+  timeModified: number  
 }
 
 class ActualLineItem 
   implements LineItem  
 {
-
   qu: number = 0
 
   id: string    
@@ -39,7 +39,9 @@ class ActualLineItem
   animation?: string
   mediaTransform?: MediaTransform 
   optionImg?: ImageDef
-  timeAdded: number = 0 // timeAdded of being added to cart
+
+  timeAdded: number = 0       // Timestamp when added
+  timeModified: number = 0    // Timestamp quantity last modified (0 if not in cart)
 
   constructor(prod: Product, snap?: ActualLineItemSnapshot) {
     this.id = prod.id
@@ -61,11 +63,13 @@ class ActualLineItem
     if (snap) {
       this.qu = snap.quantity
       this.timeAdded = snap.timeAdded
+      this.timeModified = snap.timeModified
     }
 
     makeObservable(this, {
       qu: observable,
       timeAdded: observable,
+      timeModified: observable,
       canDecrement: computed,  
       isInCart: computed,
       title: computed,
@@ -74,6 +78,7 @@ class ActualLineItem
     })
   }
 
+    // TODO: create a way to pass template strings to the ui conf per sku path!
   get title(): string {
     return this.fullTitle ? this.fullTitle : (this.familyTitle + ', ' + this.optionLabel)
   }
@@ -91,7 +96,8 @@ class ActualLineItem
       title,
       price: this.price,
       quantity: this.qu,
-      timeAdded: this.timeAdded
+      timeAdded: this.timeAdded,
+      timeModified: this.timeModified
     } satisfies ActualLineItemSnapshot)
   }
 
@@ -102,6 +108,10 @@ class ActualLineItem
   increment(): void { 
     if (this.qu === 0) {
       this.timeAdded = new Date().getTime()
+      this.timeModified = this.timeAdded
+    }
+    else {
+      this.timeModified = new Date().getTime()
     }
     this.qu++ 
   }
@@ -111,6 +121,10 @@ class ActualLineItem
       this.qu--
       if (this.qu === 0) {
         this.timeAdded = 0  
+        this.timeModified = 0  
+      }
+      else {
+        this.timeModified = new Date().getTime()
       }
     }
   }

packages/commerce/service/impls/standalone/get-instance.ts

@@ -0,0 +1,64 @@
+import { enableStaticRendering } from 'mobx-react-lite'
+
+import type { CommerceService, CommerceConfig } from '../../../types'
+import { StandaloneService }  from './index'
+import { initSelectionUI } from '../../../util'
+
+import { readSnapshot, writeSnapshotsOnChange } from './persistence'
+
+enableStaticRendering(typeof window === "undefined")
+
+const _LOG = false
+const _log = (s: string) => {
+  if (!_LOG) return;
+  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 = ({
+  families, 
+  rootNode, 
+  options, 
+  uiSpecifiers 
+}: CommerceConfig) : CommerceService => {
+
+  if (!options) {
+    throw new Error('cmmc getInstance(): Standalone Commerce Service requires config options!')
+  }
+
+   if (typeof window === "undefined") {
+    if (uiSpecifiers) {
+      initSelectionUI(uiSpecifiers)
+    }
+    _log("NEW INSTANCE: SERVER") //////////
+    return new StandaloneService(
+      families, 
+      rootNode, 
+      options
+    )
+  }
+
+    // Client side, create the store only once in the client
+  if (!instance) {
+    if (uiSpecifiers) {
+      initSelectionUI(uiSpecifiers)
+    }
+    _log("NEW INSTANCE: CLIENT") ///////////
+    const snapShot = readSnapshot(options.localStorageKey)
+    instance = new StandaloneService(
+      families, 
+      rootNode, 
+      options,
+      snapShot
+    )
+    writeSnapshotsOnChange(instance, options.localStorageKey)
+  }  
+
+  return instance
+}
+