@hanzo/commerce 7.1.33 → 7.2.0

package/components/index.ts

@@ -1,7 +1,6 @@
 export { default as AddToCartWidget } from './add-to-cart-widget'
 export { default as CarouselBuyCard } from './buy/carousel-buy-card'
 
-export { default as CartAccordian } from './cart/cart-accordian'
 export { default as CartPanel } from './cart/cart-panel'
 
 export { default as Icons } from './Icons'

package/package.json

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

package/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,
@@ -91,7 +95,8 @@ class ActualLineItem
       title,
       price: this.price,
       quantity: this.qu,
-      timeAdded: this.timeAdded
+      timeAdded: this.timeAdded,
+      timeModified: this.timeModified
     } satisfies ActualLineItemSnapshot)
   }
  
@@ -102,6 +107,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 +120,10 @@ class ActualLineItem
       this.qu--
       if (this.qu === 0) {
         this.timeAdded = 0  
+        this.timeModified = 0  
+      }
+      else {
+        this.timeModified = new Date().getTime()
       }
     }
   }

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

@@ -39,7 +39,6 @@ interface StandaloneServiceSnapshot {
   items: ActualLineItemSnapshot[]  
 }
 
-
 class StandaloneService 
   implements CommerceService
 {
@@ -80,16 +79,25 @@ class StandaloneService
         '_selectedPaths' | 
         '_currentItem' |
         '_currentFamily' |
-        '_promo'
+        '_promo' | 
+        '_cartItems' 
     >(this, {
       _selectedPaths : observable.deep,
       _currentItem: observable.shallow,
       _currentFamily: observable.shallow,
       _promo: observable,
+      _cartItems: computed
     })
 
     makeObservable(this, {
+
+      setCurrentItem: action,
+      setCurrentFamily: action,
+      setAppliedPromo: action,
+      /* NOT selectPaths. It implements it's action mechanism */
+
       cartItems: computed,
+      recentItem: computed,
       cartQuantity: computed,
       cartTotal: computed,
       promoAppliedCartTotal: computed,
@@ -97,16 +105,12 @@ class StandaloneService
       selectedItems: computed,
       selectedFamilies: computed, 
       hasSelection: computed, 
-      setCurrentItem: action,
-      setCurrentFamily: action,
       currentItem: computed,
       currentFamily: computed,
       item: computed,
       family: computed,
       selectedPaths: computed,
       appliedPromo: computed,
-      setAppliedPromo: action,
-      /* NOT selectPaths. It implements it's action mechanism */
     })
   }
 
@@ -270,25 +274,45 @@ class StandaloneService
   async updateOrderPaymentInfo(orderId: string, paymentInfo: any): Promise<void> {
     updateOrderPaymentInfoHelper(orderId, paymentInfo, this._options)
   }
-
+    // Might as well use the ordered set.
   takeSnapshot = (): StandaloneServiceSnapshot => ({
     items : (this.cartItems as ActualLineItem[]).map((it) => (it.takeSnapshot(this)))
   })
 
-  get cartItems(): LineItem[] {
+    // last cartItem whose quantity was modified (undefined if cartEmpty)
+  get recentItem(): { item: LineItem, modified: number}  | undefined  {
+
+    if (this.cartEmpty) return undefined;
+
+    const mostRecent = this._cartItems.reduce(
+      (newest, item) => ((!newest) ? item : (
+        (item as ActualLineItem).timeModified > (newest as ActualLineItem).timeModified) ? item : newest 
+      ), 
+      undefined as LineItem | undefined
+    )  
+    return { item: mostRecent!, modified: (mostRecent! as ActualLineItem).timeModified } 
+  }
+
+  private get _cartItems(): LineItem[] {
     let result: LineItem[] = []
     this._familyMap.forEach((fam) => {
       result = [...result, ...(fam.products as LineItem[]).filter((item) => (item.isInCart))]
     })
-    return result.sort((it1, it2) => ((it1 as ActualLineItem).timeAdded - (it2 as ActualLineItem).timeAdded))
+    return result
   }
   
+  get cartItems(): LineItem[] {
+    return this._cartItems.sort((it1, it2) => ((it1 as ActualLineItem).timeAdded - (it2 as ActualLineItem).timeAdded))
+  }
+
+
+
   get cartEmpty(): boolean {
-    return this.cartItems.length === 0    
+    return this._cartItems.length === 0    
   }
 
   get cartTotal(): number {
-    return this.cartItems.reduce(
+    return this._cartItems.reduce(
       (total, item) => (total + item.price * item.quantity), 
       0
     )
@@ -308,7 +332,7 @@ class StandaloneService
     if (!this._promo.skus) {
       return this._promoValue_unsafe(this.cartTotal)
     }
-    let total = this.cartItems.reduce(
+    let total = this._cartItems.reduce(
       (total, item) => {
         const itemPrice = this._promo!.skus!.includes(item.sku) ? 
           this._promoValue_unsafe(item.price)

package/types/commerce-service.ts

@@ -13,6 +13,12 @@ interface CommerceService extends ObsLineItemRef, ObsFamilyRef {
     /** Total of all prices x quantities of items in cart */
   get cartTotal(): number
 
+    /** cartItem whose quantity was modified most recently 
+     * item: LineItem
+     * modified: number (timestamp)
+     * (undefined if cartEmpty)
+     */
+  get recentItem(): { item: LineItem, modified: number }  | undefined 
   get promoAppliedCartTotal(): number
 
   get cartEmpty(): boolean

package/components/cart/cart-accordian.tsx

@@ -1,69 +0,0 @@
-'use client'
-import React  from 'react'
-import { observer } from 'mobx-react-lite'
-
-import { ChevronRight } from 'lucide-react'
-
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '@hanzo/ui/primitives'
-import { cn } from '@hanzo/ui/util'
-
-import { formatCurrencyValue } from '../../util'
-import { useCommerce } from '../../context'
-
-import CartPanel from './cart-panel'
-
-const CartAccordian: React.FC<{
-  icon?: React.ReactNode
-  clx?: string
-  triggerClx?: string
-  panelClx?: string
-  scrollAfter: number
-  scrollHeightClx: string
-}> = observer(({
-  icon,
-  clx='',
-  panelClx='',
-  triggerClx='',
-  scrollAfter,
-  scrollHeightClx
-}) => { 
-  const cmmc = useCommerce()
-  return (
-    <Accordion type="single" collapsible className={clx}>
-      <AccordionItem value="cart" className='w-full border-b-0'>
-        <AccordionTrigger className={'!no-underline group flex justify-between '} headerClx={ triggerClx}>
-          <div className='flex gap-0 items-center'>
-            {icon}
-            <h5 className='text-sm sm:text-xl grow'>
-              <span className='group-data-[state=open]:hidden' >Order Total:</span>
-              <span className='group-data-[state=closed]:hidden' >Your Order</span>
-            </h5>
-          </div>
-          <div className='flex gap-1 items-center'>
-            <h5 className='text-sm sm:text-xl grow truncate'>{formatCurrencyValue(cmmc.promoAppliedCartTotal)}</h5>
-            <ChevronRight className="h-5 w-5 -mr-2 shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90" />
-          </div>
-        </AccordionTrigger>
-        <AccordionContent className='data-[state=open]:mb-4'>
-          <CartPanel 
-            className={cn('w-full', panelClx)} 
-            scrollAfter={scrollAfter}
-            scrollHeightClx={scrollHeightClx}
-            listClx='mt-0'
-            itemClx='mt-1'
-            totalClx='sticky px-1 pr-2 border-t -bottom-[1px] bg-background'
-            showShipping
-            showPromoCode
-          />
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  )
-})
-
-export default CartAccordian