@hanzo/commerce 4.9.0 → 5.1.0

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

@@ -14,7 +14,8 @@ import type {
   Category, 
   LineItem,
   FacetsValue, 
-  FacetValueDesc
+  FacetValueDesc,
+  Promo
 } from '../../../types'
 
 import {
@@ -43,6 +44,7 @@ class StandaloneService
   private _categoryMap = new Map<string, Category>()
   private _rootFacet: FacetValueDesc 
   private _selectedFacets: FacetsValue = {}
+  private _promo: Promo | null = null
 
   private _options : StandaloneServiceOptions
   private _currentItem: ActualLineItem | undefined = undefined
@@ -73,23 +75,28 @@ class StandaloneService
     makeObservable<
       StandaloneService, 
         '_selectedFacets' | 
-        '_currentItem' 
+        '_currentItem' |
+        '_promo'
     >(this, {
       _selectedFacets :  observable.deep,
       _currentItem: observable,
+      _promo: observable,
     })
 
     makeObservable(this, {
       cartItems: computed,
       cartQuantity: computed,
-      cartTotal: computed, 
+      cartTotal: computed,
+      promoAppliedCartTotal: computed,
       cartEmpty: computed,
       specifiedItems: computed,
       specifiedCategories: computed, 
       setCurrentItem: action,
       currentItem: computed,
       item: computed,
-      facetsValue: computed
+      facetsValue: computed,
+      appliedPromo: computed,
+      setAppliedPromo: action,
       /* NOT setFacets. It implements it's action mechanism */
     })
   }
@@ -181,6 +188,43 @@ class StandaloneService
     )
   }
 
+  _promoValue_unsafe(value: number): number {
+    if (this._promo!.type === 'percent') {
+      return value * (1 - this._promo!.value / 100)
+    }
+    return value - this._promo!.value
+  }
+
+  get promoAppliedCartTotal(): number {   
+    if (!this._promo) {
+      return this.cartTotal
+    }
+
+    if (!this._promo.skus) {
+      return this._promoValue_unsafe(this.cartTotal)
+    }
+
+    let total = this.cartItems.reduce(
+      (total, item) => {
+        const itemPrice = this._promo!.skus!.includes(item.sku) ? 
+          this._promoValue_unsafe(item.price)
+          :
+          item.price
+        return total + itemPrice * item.quantity
+      }, 
+      0
+    )
+      
+    return total
+  }
+
+  itemPromoPrice(item: LineItem): number | undefined {
+    if (this._promo && (!this._promo.skus || this._promo.skus.includes(item.sku) )) {
+      return this._promoValue_unsafe(item.price)
+    }
+    return undefined 
+  }
+
   get cartQuantity(): number {
     return this.cartItems.reduce(
       (total, item) => (total + item.quantity), 
@@ -188,6 +232,14 @@ class StandaloneService
     )
   }
 
+  get appliedPromo(): Promo | null {
+    return this._promo
+  }
+
+  setAppliedPromo(promo: Promo | null): void {
+    this._promo = promo
+  }
+
   setCurrentItem(skuToFind: string | undefined): boolean {
 
     if (skuToFind === undefined || skuToFind.length === 0) {

package/types/checkout.ts

@@ -1,6 +1,47 @@
+import type { ComponentType } from 'react'
+import type { UseFormReturn } from 'react-hook-form'
 
 type TransactionStatus = 'unpaid' | 'paid' | 'confirmed' | 'error'
 
+interface CheckoutStepComponentProps {
+  onDone: () => void
+  orderId: string | undefined
+  setOrderId: (orderId: string | undefined) => void
+}
+
+interface CheckoutStep {
+  name: string  
+  label?: string 
+  Comp: ComponentType<CheckoutStepComponentProps>
+}
+
+type ContactFormType = UseFormReturn<{
+  name: string
+  email: string
+}, any, {
+  name: string
+  email: string
+}>
+
+interface PaymentMethodComponentProps {
+  onDone: () => void
+  transactionStatus: TransactionStatus
+  setTransactionStatus: (status: TransactionStatus) => void
+  storePaymentInfo: (paymentInfo: any) => Promise<void>
+  contactForm: ContactFormType
+}
+
+interface PaymentMethodDesc {
+  value: string  
+  label: string 
+  Comp: ComponentType<PaymentMethodComponentProps>
+}
+
 export {
-  type TransactionStatus as default
+  type TransactionStatus,
+  type CheckoutStepComponentProps,
+  type CheckoutStep,
+  type PaymentMethodComponentProps,
+  type PaymentMethodDesc,
+  type ContactFormType,
 }

package/types/commerce-service.ts

@@ -1,6 +1,7 @@
 import type { LineItem, ObsLineItemRef } from './line-item'
 import type { FacetValueDesc, FacetsValue } from './facet'
 import type Category from './category'
+import type Promo from './promo'
 
 interface CommerceService extends ObsLineItemRef {
 
@@ -8,10 +9,17 @@ interface CommerceService extends ObsLineItemRef {
   get cartItems(): LineItem[]
     /** Total of all quantities of all items in cart */
   get cartQuantity(): number
-    /** Total of all prices * quantities of items in cart */
+    /** Total of all prices x quantities of items in cart */
   get cartTotal(): number
 
+  get promoAppliedCartTotal(): number
+
   get cartEmpty(): boolean
+
+  get appliedPromo(): Promo | null
+  setAppliedPromo(promo: Promo | null): void
+    /** returns the price with promo applied, of undefined if no promo or promo does not apply */
+  itemPromoPrice(item: LineItem): number | undefined
    
   getCartCategorySubtotal(categoryId: string): number
 

package/types/index.ts

@@ -3,8 +3,9 @@ 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 Promo } from './promo'
 
-export type { default as TransactionStatus } from './checkout'
+export * from './checkout'
 export * from './line-item'
 export * from './facet'
 export * from './string-mutator'

package/types/promo.ts

@@ -0,0 +1,10 @@
+interface Promo {
+  type: 'percent' | 'amount'
+  code: string
+  value: number,
+  skus?: string[]
+}
+
+export {
+  type Promo as default
+}

package/util/index.ts

@@ -1,4 +1,4 @@
-import type { StringMutator, CommerceService } from '../types'
+import type { StringMutator, CommerceService, Promo } from '../types'
 
 export function toTitleCase(str: string) {
   return str.replace(
@@ -20,7 +20,7 @@ export function unslugify(str: string) {
 }
 
 
-export function formatPrice(price: number): string {
+export function formatCurrencyValue(price: number): string {
   const str = price.toLocaleString('en-US', {
     style: 'currency',
     currency: 'USD',
@@ -28,6 +28,7 @@ export function formatPrice(price: number): string {
   return (str.endsWith('.00')) ? str.replace('.00', '') : str 
 }
 
+
 export const getFacetValuesMutator = (level: number, cmmc: CommerceService): StringMutator => {
 
   const setLevel = (value: string, level: number ): void  => {

package/util/promo-codes.ts

@@ -0,0 +1,46 @@
+'use server'
+
+import type { Promo } from '../types'
+
+const PROMO_CODES: Promo[] = [
+  {
+    type: 'percent',
+    code: 'ANGEL',
+    value: 20
+  },
+  {
+    type: 'percent',
+    code: 'NASSER',
+    value: 20
+  },
+  {
+    type: 'percent',
+    code: 'DARA',
+    value: 20
+  },
+  {
+    type: 'percent',
+    code: 'ROSEY',
+    value: 20
+  },
+  {
+    type: 'percent',
+    code: 'IYKYK',
+    value: 20
+  },
+  {
+    type: 'percent',
+    code: 'GENESIS',
+    value: 99,
+    skus: ['LXM-PS-PS']
+  }
+]
+
+// TODO: implement a real API call
+const getPromoFromApi = async (code: string) => {
+  return PROMO_CODES.find(promo => promo.code === code)
+}
+
+export {
+  getPromoFromApi as default
+}

package/components/cart-panel/products-carousel.tsx

@@ -1,60 +0,0 @@
-import Spline from '@splinetool/react-spline'
-
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext
-} from '@hanzo/ui/primitives'
-import {
-  VideoBlockComponent,
-  ImageBlockComponent,
-  type ImageBlock,
-  type Block,
-  type VideoBlock
-} from '@hanzo/ui/blocks'
-
-import type { LineItem } from '../../types'
-
-  // Carousel content hierarchy: 3D > MP4 > Image
-const ProductsCarousel: React.FC<{
-  items: LineItem[]
-}> = ({ 
-  items,
-}) => (
-  <Carousel options={{ loop: true }} className='w-full max-w-sm mx-auto px-2' >
-    <CarouselContent>
-      {items.map(({title, img, video, animation}, index) => (
-        <CarouselItem key={index}>
-          <div className='flex aspect-square items-center justify-center p-6'>
-            {animation ? (
-              <Spline
-                scene={animation}
-                className='!aspect-[12/10] pointer-events-none !w-auto !h-auto'
-              />
-            ) : video ? (
-              <VideoBlockComponent
-                block={{blockType: 'video', ...video} satisfies VideoBlock as Block}
-              />
-            ) : (
-              <ImageBlockComponent
-                block={{
-                  blockType: 'image',
-                  src: img ?? '',
-                  alt: title + ' image',
-                  dim: { w: 250, h: 250 }
-                } satisfies ImageBlock as Block} 
-                className='m-auto'
-              />
-            )}
-          </div>
-        </CarouselItem>
-      ))}
-    </CarouselContent>
-    <CarouselPrevious />
-    <CarouselNext />
-  </Carousel>
-)
-
-export default ProductsCarousel

package/components/checkout-panel/_confirm-order.tsx_unused

@@ -1,143 +0,0 @@
-'use client'
-import React from 'react'
-import type { UseFormReturn } from 'react-hook-form'
-import { BookUser, Lock, User } from 'lucide-react'
-
-import { ApplyTypography, Button } from '@hanzo/ui/primitives'
-import { EnhHeadingBlockComponent, type EnhHeadingBlock } from '@hanzo/ui/blocks'
- 
-const ConfirmOrder: React.FC<{
-  paymentForm: UseFormReturn<{
-    name: string;
-    email: string;
-    cardName: string;
-    cardNumber: string;
-    cardExpiryDate: string;
-    cardCvc: string;
-  }, any, {
-    name: string;
-    email: string;
-    cardName: string;
-    cardNumber: string;
-    cardExpiryDate: string;
-    cardCvc: string;
-  }>,
-  shippingForm: UseFormReturn<{
-    firstName: string;
-    lastName: string;
-    addressLine1: string;
-    zipCode: string;
-    city: string;
-    country: string;
-    addressLine2?: string | undefined;
-    state?: string | undefined;
-  }, any, {
-    firstName: string;
-    lastName: string;
-    addressLine1: string;
-    zipCode: string;
-    city: string;
-    country: string;
-    addressLine2?: string | undefined;
-    state?: string | undefined;
-  }>,
-  setStep: (step: number) => void,
-  onPayClick: () => void
-}> = ({
-  paymentForm,
-  shippingForm,
-  setStep,
-  onPayClick
-}) => {
-
-  const paymentFormValues = paymentForm.getValues()
-  const shippingFormValues = shippingForm.getValues()
-  
-  return (
-    <div className='flex flex-col gap-6'>
-      <div className='flex gap-4 items-center'>
-        <User />
-        <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-          heading: { text: `Contact Details`, level: 4 },
-        } as EnhHeadingBlock}/>
-      </div>
-      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-        heading: { text: 'Contact name', level: 6 },
-        byline: { text: paymentFormValues.name, level: 0 },
-      } as EnhHeadingBlock}/>
-      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-        heading: { text: 'Contact email', level: 6 },
-        byline: { text: paymentFormValues.email, level: 0 },
-      } as EnhHeadingBlock}/>
-
-      <div className='flex gap-4 items-center'>
-        <ApplyTypography>
-          <h4 className='flex gap-4 items-center'><Lock /> Payment Info</h4>
-          <p>Guaranteed safe & secure checkout.</p>
-        </ApplyTypography>
-      </div>
-      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-        heading: { text: 'Name on card', level: 6 },
-        byline: { text: paymentFormValues.cardName, level: 0 },
-      } as EnhHeadingBlock}/>
-      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-        heading: { text: 'Card number', level: 6 },
-        byline: { text: paymentFormValues.cardNumber, level: 0 },
-      } as EnhHeadingBlock}/>
-      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-        heading: { text: 'Card expiry date', level: 6 },
-        byline: { text: paymentFormValues.cardExpiryDate, level: 0 },
-      } as EnhHeadingBlock}/>
-      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-        heading: { text: 'Card CVC', level: 6 },
-        byline: { text: paymentFormValues.cardCvc, level: 0 },
-      } as EnhHeadingBlock}/>
-
-      <div className='flex gap-4 items-center'>
-        <BookUser />
-        <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-          heading: { text: `Shipping address`, level: 4 },
-        } as EnhHeadingBlock}/>
-      </div>
-      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-        heading: { text: 'First name', level: 6 },
-        byline: { text: shippingFormValues.firstName, level: 0 },
-      } as EnhHeadingBlock}/>
-      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-        heading: { text: 'Last name', level: 6 },
-        byline: { text: shippingFormValues.lastName, level: 0 },
-      } as EnhHeadingBlock}/>
-      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-        heading: { text: 'Address line 1', level: 6 },
-        byline: { text: shippingFormValues.addressLine1, level: 0 },
-      } as EnhHeadingBlock}/>
-      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-        heading: { text: 'Address line 2 (optional)', level: 6 },
-        byline: { text: shippingFormValues.addressLine2, level: 0 },
-      } as EnhHeadingBlock}/>
-      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-        heading: { text: 'Zip code', level: 6 },
-        byline: { text: shippingFormValues.zipCode, level: 0 },
-      } as EnhHeadingBlock}/>
-      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-        heading: { text: 'City', level: 6 },
-        byline: { text: shippingFormValues.city, level: 0 },
-      } as EnhHeadingBlock}/>
-      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-        heading: { text: 'State (optional)', level: 6 },
-        byline: { text: shippingFormValues.state, level: 0 },
-      } as EnhHeadingBlock}/>
-      <EnhHeadingBlockComponent block={{blockType: 'enh-heading',
-        heading: { text: 'Country', level: 6 },
-        byline: { text: shippingFormValues.country, level: 0 },
-      } as EnhHeadingBlock}/>
-
-      <div className='flex justify-between mt-8'>
-        <Button variant='outline' onClick={() => setStep(1)}>Back</Button>
-        <Button onClick={onPayClick}>Pay</Button>
-      </div>
-    </div>
-  )
-}
-
-export default ConfirmOrder

package/components/checkout-panel/close-button.tsx

@@ -1,24 +0,0 @@
-'use client'
-import React from 'react'
-
-import { ChevronLeft } from 'lucide-react'
-import { Button } from '@hanzo/ui/primitives'
-
-const CloseButton: React.FC<{
-  close: () => void
-  className?: string
-}> = ({
-  close,
-  className=''
-}) => (
-    <Button
-      variant='ghost'
-      size='icon'
-      onClick={close}
-      className={'group ' + className}
-    >
-      <ChevronLeft className='w-5 h-5 group-hover:scale-110 transition-scale transition-duration-300'/>
-    </Button>    
-)
-
-export default CloseButton

package/components/checkout-panel/desktop.tsx

@@ -1,46 +0,0 @@
-'use client'
-import React, { type PropsWithChildren } from 'react'
-
-import { ScrollArea, StepIndicator } from '@hanzo/ui/primitives'
-import { AuthWidget } from '@hanzo/auth/components'
-
-import CartPanel from '../cart-panel'
-import CloseButton from './close-button'
-
-const DesktopPanel: React.FC<PropsWithChildren & {
-  index: number
-  stepNames: string[]
-  close:() => void
-  className?: string
-}> = ({
-  index,
-  stepNames,
-  close,
-  className='',
-  children
-}) => (
-  <div /* id='DT-GRID' */ className={className}>
-    <div className='w-full bg-background flex flex-row items-start justify-end'>
-      <ScrollArea className='h-full w-full max-w-[750px] relative flex flex-col items-center justify-start px-6 pt-12 pb-9'>
-        <CloseButton close={close} className='absolute top-3 left-3 w-auto h-auto rounded-full bg-level-1 hover:bg-level-2 hover:border-muted p-2' />
-        <CartPanel showCarousel className='flex border-none mt-10 w-full max-w-[550px] flex-col' />
-      </ScrollArea>
-    </div>
-    <ScrollArea className='w-full h-full bg-level-1 flex flex-row items-start justify-start overflow-y-auto'>
-      <div className='h-full w-full max-w-[750px] relative flex flex-col items-center gap-6 px-8 pb-6 pt-0'>
-        <AuthWidget noLogin className='hidden md:flex absolute top-4 right-4 '/>
-        <div className='bg-level-1 sticky h-[90px] pb-2 w-full top-0 flex justify-center items-end'>
-          <StepIndicator 
-            dotSizeRem={1.5} 
-            steps={stepNames} 
-            currentStep={index} 
-            className='gap-2 text-base w-pr-70 ' 
-          />
-        </div>
-        {children}
-      </div>
-    </ScrollArea>
-  </div>
-)
-
-export default DesktopPanel

package/components/checkout-panel/icons/bag-icon.tsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import { type LucideProps } from 'lucide-react'
-
-const BagIcon: React.FC<LucideProps> = (props: LucideProps) => (
-  <svg fill="currentColor" viewBox='0 0 20 23' {...props}>
-    <path fillRule="evenodd" d="M5 5a5 5 0 0 1 10 0v1h-2V5a3 3 0 1 0-6 0v1H5V5Zm0 1v4h2V6h6v4h2V6h3.5a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1h-17a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1H5Z" clipRule="evenodd"/>
-  </svg>
-)
-
-export default BagIcon

package/components/checkout-panel/index.tsx

@@ -1,108 +0,0 @@
-'use client'
-import React, { useState }  from 'react'
-
-import { capitalize } from '@hanzo/ui/util'
-
-import { useCommerce } from '../..'
-
-import type { CheckoutStep } from './steps/types'
-import ShippingInfo from './steps/shipping-info'
-import ThankYou from './steps/thank-you'
-import Payment from './steps/payment'
-
-const STEPS = [
-  {
-    name: 'payment',
-    Comp: Payment
-  }, 
-  {
-    name: 'delivery',
-    Comp: ShippingInfo
-  }, 
-  {
-    name: 'done',
-    label: 'Done!',
-    Comp: ThankYou
-  }
-] satisfies CheckoutStep[]
-
-const STEP_NAMES = STEPS.map((s) => (s.label ? s.label : capitalize(s.name)))
-
-import DesktopCP from './desktop'
-import MobileCP from './mobile'
-
-const CheckoutPanel: React.FC<{
-  close: () => void
-  className?: string
-}> = ({
-  close,
-  className=''
-}) => {
-
-  const cmmc = useCommerce()
-    
-    // For sites that don't initialize cmmc
-  if (!cmmc) {
-    return <></>
-  }
-  const [stepIndex, setStepIndex] = useState<number>(0)
-  const [orderId, setOrderId] = useState<string | undefined>(undefined)
-
-    // Step.name or 'first' or 'next' or 'last' 
-  const setStep = (name: string): void => {
-
-    if (name === 'first') {
-      setStepIndex(0)
-    }
-    else if (name === 'last') {
-      setStepIndex(STEPS.length - 1)
-    } 
-    else if (name === 'next') {
-      if (stepIndex < STEPS.length - 2) {
-        setStepIndex(stepIndex + 1)
-      }
-      else {
-        throw new Error('CheckoutPanel.setStep(): Attempting to advance past last step!')
-      }
-    } 
-    else {
-      const indexFound = STEPS.findIndex((el) => (el.name === name))
-      if (indexFound !== -1) {
-        setStepIndex(indexFound)
-      }
-      else {
-        throw new Error('CheckoutPanel.setStep(): Step named ' + name + ' not found!')
-      }
-    }
-  } 
-
-  const _close = () => {
-    setStep('first')
-    close()
-  }
-
-  const StepToRender = STEPS[stepIndex].Comp  
-
-  return (
-    <div /* id='CHECKOUT_PANEL' */  className={className} >
-      <DesktopCP 
-        className='hidden md:flex h-full flex-row justify-center overflow-y-hidden' 
-        close={_close}
-        index={stepIndex}
-        stepNames={STEP_NAMES}
-      >
-        <StepToRender onDone={() => {setStep('next')}} orderId={orderId} setOrderId={setOrderId}/>
-      </DesktopCP>
-      <MobileCP 
-        className='md:hidden h-full overflow-y-auto' 
-        close={_close}
-        index={stepIndex}
-        stepNames={STEP_NAMES}
-      >
-        <StepToRender onDone={() => {setStep('next')}} orderId={orderId} setOrderId={setOrderId}/>
-      </MobileCP>
-    </div>
-  )
-}
-
-export default CheckoutPanel