@hanzo/commerce 1.0.8

package/components/select-category-and-item-widget.tsx

@@ -0,0 +1,84 @@
+'use client'
+import React, { useEffect } from 'react'
+import { computed } from 'mobx'
+import { observer } from 'mobx-react-lite'
+
+import { ApplyTypography, ListBox } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+
+import type { FacetValueDesc, FacetsValue, LineItem } from '../types'
+import { useCommerce } from '../service'
+import { formatPrice } from '../util'
+
+import FacetTogglesWidget from './facet-toggles-widget'
+
+const formatItem = (item: LineItem, withQuantity: boolean = false): string => (
+  `${item.titleAsOption}, ${formatPrice(item.price)}${(withQuantity && item.quantity > 0) ? `  (${item.quantity})` : ''}`
+)
+
+const SelectCategoryAndItemWidget: React.FC<{
+  categoryLevel: number
+  parentLevelToken: string
+  categoryLevelValues: FacetValueDesc[]
+  className?: string
+}> = observer(({
+  categoryLevel, 
+  parentLevelToken,
+  categoryLevelValues,
+  className=''
+}) => {
+  const comm = useCommerce()
+
+  useEffect(() => {
+    const facets: FacetsValue = {}
+    facets[categoryLevel - 1] = [parentLevelToken]
+    facets[categoryLevel] = [categoryLevelValues[0].value]
+    comm.setFacets(facets)
+    comm.setCurrentItem(comm.specifiedCategories[0].products[0].sku)
+  }, [])
+
+  const onFacetTokenChanged = (token: string): void => {
+    const facets: FacetsValue = {}
+    facets[categoryLevel - 1] = [parentLevelToken]
+    facets[categoryLevel] = [token]
+    comm.setFacets(facets)
+  }
+
+  const currentFacetToken = computed((): string | null => {
+    if (comm.specifiedCategories.length === 0) return null
+    const skuPath = comm.specifiedCategories[0].id
+    const skuPathTokens = skuPath.split('-')
+    return skuPathTokens.length > 0 ? skuPathTokens[skuPathTokens.length - 1] : null
+  })
+
+  return (
+    <div className={cn('flex flex-col justify-start gap-4 items-start pt-3', className)}>
+      <FacetTogglesWidget 
+        facetValues={categoryLevelValues} 
+        mutator={{
+          val: currentFacetToken.get(),
+          set: onFacetTokenChanged
+        }} 
+      />
+      {comm.specifiedItems.length === 0 ? (
+        <ApplyTypography>
+          <h3>No Items</h3>
+        </ApplyTypography>
+      ) : comm.specifiedItems.length === 1 ? (
+        <ApplyTypography>
+          <h4>{formatItem(comm.specifiedItems[0])}</h4>
+        </ApplyTypography>
+      ) : (
+        <ListBox<string> 
+          values={comm.specifiedItems.map((it) => (it.sku))}   
+          labels={comm.specifiedItems.map((it) => (formatItem(it)))}   
+          isEqual={(v1: string, v2: string) => (v1 === v2)}
+          value={comm.currentItem?.sku}
+          onValueChange={comm.setCurrentItem.bind(comm)}
+        />
+      )}
+    </div>
+  )
+})
+
+export default SelectCategoryAndItemWidget

package/components/select-item-in-category-view.tsx

@@ -0,0 +1,200 @@
+'use client'
+import React, { useState } from 'react'
+import Image from 'next/image'
+import { observer } from 'mobx-react-lite'
+
+import { cn } from '@hanzo/ui/util'
+import { Skeleton } from '@hanzo/ui/primitives'
+
+import { useCommerce } from '../service'
+import type { Category, LineItem, ObsLineItemRef } from '../types'
+import { formatPrice } from '../util'
+import { Icons } from './Icons'
+
+import AddToCartWidget from './add-to-cart-widget'
+import ProductSelectionRadioGroup from './product-selection-radio-group'
+import ProductSelectionMobilePicker from './product-selection-mobile-picker'
+
+const SelectItemInCategoryView: React.FC<React.HTMLAttributes<HTMLDivElement> & {
+  category: Category
+  lineItemRef: ObsLineItemRef
+  handleItemSelected: (sku: string) => void 
+  isLoading?: boolean
+  mobile?: boolean
+}> = ({
+  category,
+  lineItemRef,
+  handleItemSelected, 
+  className, 
+  isLoading = false, 
+  mobile = false, 
+  ...props
+}) => {
+
+  const waiting = (): boolean => (isLoading || !category)
+
+  const CategoryImage: React.FC<{ className?: string }> = ({ className = '' }) => {
+
+    if (waiting()) {
+      // deliberately not Skeleton to have a better overall pulse effect.
+      return <div className={cn(
+        'bg-level-1 rounded-xl aspect-square ' +
+        ' min-h-[100px] sm:min-h-[200px] lg:aspect-auto lg:h-[300px] lg:w-[200px] 2xl:w-auto 2xl:aspect-square',
+        className)} />
+    }
+
+    if (!category.img) {
+      return (
+        <div
+          aria-label='Placeholder'
+          role='img'
+          aria-roledescription='placeholder'
+          className={cn('h-60 flex items-center justify-center', className)}
+        >
+          <Icons.barcode className='h-9 w-9 text-muted' aria-hidden='true' />
+        </div>
+      )
+    }
+
+    return (
+      <div className={cn('flex flex-col justify-start', className)}>
+        <div className={cn('w-full border rounded-xl p-6 ')}>
+          <div className={cn('w-full aspect-square  relative')}>
+            <Image
+              src={category.img!}
+              fill
+              sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, (max-width: 1200px) 50vw, 20vw"
+              alt={category.title}
+              className=''
+              loading='lazy'
+              style={{ objectFit: 'contain' }} />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  const AvailableAmounts: React.FC<{ className?: string }> = observer(({ className = '' }) => {
+
+    const soleOption = !waiting() && category.products.length === 1
+    const mobilePicker = !waiting() && (mobile && category.products.length > 8) 
+
+    return waiting() ? (
+      <Skeleton className={'min-h-[120px] w-pr-60 mx-auto ' + className} />
+    ) : (
+      <div /* id='CV_AVAIL_AMOUNTS' */ className={cn(
+        'w-full md:w-auto flex flex-col justify-start items-center',
+        (soleOption ? 'gap-2' : mobilePicker ? 'gap-4' : 'gap-8'),
+        className
+      )}>
+        <div className='w-full flex flex-col justify-start items-center'>
+          <h6 className='text-center font-semibold'>{`Available size${soleOption ? '' : 's'}`}</h6>
+          <div className={'h-[1px] bg-muted-3 ' + (mobilePicker ?  'w-pr-55' :  'w-pr-70') } />
+        </div>
+        {soleOption ? (
+          <p>{category.products[0].titleAsOption}</p>
+        ) : ( mobilePicker ? (
+            <ProductSelectionMobilePicker
+              products={category.products}
+              selectedSku={lineItemRef.item?.sku ?? undefined}  
+              onValueChange={handleItemSelected}
+              height={180}
+              itemHeight={30}
+              outerClx='mb-4'
+            />
+          ) : (
+            <ProductSelectionRadioGroup 
+              products={category.products}
+              selectedSku={lineItemRef.item?.sku ?? undefined}  
+              onValueChange={handleItemSelected}
+              groupClx='block xs:columns-2 xs:px-3 columns-3 gap-2 lg:columns-2 lg:gap-6 w-full lg:auto'
+              itemClx='flex flex-row gap-2 items-center mb-3 xs:mb-5'
+            />
+          )
+        )}
+      </div>
+    )
+  })
+
+  const AddToCartArea: React.FC<{ className?: string }> = observer(({ className = '' }) => (
+    (lineItemRef.item && !isLoading) ? (
+      <AddToCartWidget size='default' item={lineItemRef.item} className={className}/>
+    ) : (
+      <div className={cn('h-6 w-12 invisible', className)} />
+    )
+  ))
+
+  const TitleArea: React.FC<{ className?: string }> = observer(({ className = '' }) => (
+    waiting() ? (<Skeleton className={'h-12 w-pr-80 mx-auto ' + className} />) : (
+
+      <div className={cn('flex flex-col justify-start items-center mb-6', className)}>
+        <h3 className='text-lg lg:text-xl font-heading text-center'>
+          <span className='xs:inline sm:hidden md:inline lg:hidden'>
+            {category.title.split(', ').map((s, i) => (<p key={i}>{s}</p>))}
+          </span>
+          <span className='xs:hidden sm:inline md:hidden lg:inline'>
+            {category.title}
+          </span>
+        </h3>
+        {lineItemRef.item?.sku ? (
+          <h6 className='text-center font-semibold'>
+            {lineItemRef.item.titleAsOption + ': ' + formatPrice(lineItemRef.item.price)}
+          </h6>
+        ) : ''}
+      </div>
+  )))
+
+  const Desc: React.FC<{ className?: string }> = ({ className = '' }) => (
+    waiting() ? (
+      <Skeleton className={'min-h-20 w-full grow mx-auto ' + className} />
+    ) : (
+      <p className={cn('text-base lg:text-lg mb-6 xs:mb-0', className)}>{category.desc}</p>
+    )
+  )
+
+  return mobile ? (
+    <div /* id='CV_OUTER' */ 
+      className={cn(
+        'w-full h-[calc(100svh-96px)] max-h-[700px] flex flex-col justify-between ' + 
+        'items-stretch gap-[4vh] mt-[2vh] pb-[6vh]', 
+        className
+      )} 
+      {...props}
+    >
+      <div /* id='CV_TITLE_AND_IMAGE_ROW' */ className='flex flex-row justify-between items-start w-full'>
+      {waiting() ? ( <Skeleton className={'min-h-30 w-full '} /> ) : (<>
+        <CategoryImage className='w-pr-33' />
+        <TitleArea className='grow pt-3 mb-0' />
+      </>)}
+      </div> 
+      <Desc className='' />
+      <AvailableAmounts className='mb-[3vh]' />
+      <AddToCartArea className='w-pr-70 mx-auto' />
+    </div>
+  ) : (
+    <div /* id='CV_OUTERMOST' */>
+      <div /* id='CV_OUTER' */ className={cn('w-full flex flex-row justify-between items-stretch gap-6 sm:gap-4', className)} {...props}>
+        <div /* id='CV_IMAGE_COL' */ className={'relative ' + (!isLoading ? 'w-pr-33' : '')}>
+          <CategoryImage className='' />
+        </div>
+        <div /* id='CV_CONTENT_COL */ className='w-pr-66'>
+          <div /*  id='CV_CONTENT' */ className={'flex flex-col gap-2.5 ' + (isLoading ? 'justify-between h-full' : '')}>
+            <TitleArea className='' />
+            <Desc className='' />
+          </div>
+          <div /* id='CV_CTA_AREA_BIG' */ className='hidden lg:flex p-4 flex-col justify-start items-center gap-6'>
+            <AvailableAmounts />
+            <AddToCartArea className='' />
+          </div>
+        </div>
+      </div>
+      <div /* id='CV_CTA_AREA_COMPACT' */ className='lg:hidden flex p-4 flex-col justify-start items-center gap-6'>
+        <AvailableAmounts />
+        <AddToCartArea className='' />
+      </div>
+    </div>
+  )
+}
+
+
+export default SelectItemInCategoryView

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@hanzo/commerce",
+  "version": "1.0.8",
+  "description": "Library with shopping cart components.",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public",
+    "scope": "@hanzo"
+  },
+  "author": "Hanzo AI, Inc.",
+  "license": "BSD-3-Clause",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hanzoai/react-sdk.git",
+    "directory": "packages/commerce"
+  },
+  "keywords": [
+    "cart",
+    "hanzoai",
+    "hanzo"
+  ],
+  "scripts": {
+    "lat": "npm show @hanzo/commerce version",
+    "pub": "npm publish",
+    "build": "tsc",
+    "tc": "tsc",
+    "clean": "rm -rf dist && rm -rf node_modules"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.3.2",
+    "lucide-react": "^0.307.0",
+    "react-mobile-picker": "^1.0.0"
+  },
+  "peerDependencies": {
+    "@hanzo/ui": "^1.0.8",
+    "@hanzo/auth": "^1.0.9",
+    "next": "^14.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "mobx": "^6.12.0",
+    "mobx-react-lite": "^4.0.5",
+    "firebase": "^10.8.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "cross-fetch": "^4.0.0",
+    "typescript": "^5.3.3"
+  }
+}

package/service/commerce-service.ts

@@ -0,0 +1,49 @@
+import type {  
+  Category, 
+  FacetsValue,
+  LineItem ,
+  ObsLineItemRef
+} from '../types'
+
+interface CommerceService extends ObsLineItemRef {
+
+  get cartItems(): LineItem[]
+  get cartTotal(): number
+  getCartCategorySubtotal(categoryId: string): number
+
+    /** 
+     * Sets the tokens at each level supplied.
+     * If a level is specifed as [], nothing will be specified.
+     * If a level is missing (undefined), everything at that level is included
+     * 
+     * This specifies one or more Category's, and all the LineItem's in them
+     * 
+     * An empty value object specifies all Category's and all LineItem's,
+     * */ 
+  setFacets(value: FacetsValue): Category[]
+  get facetsValue(): FacetsValue // returns a copy
+  get specifiedItems(): LineItem[]
+  get specifiedCategories(): Category[] 
+
+    /**
+     * For convenience, so widgets can share state.
+     * "current" is unrelated to what is "specified",
+     * ie, facets' values 
+     *  */ 
+  setCurrentItem(sku: string | undefined): void
+    /**
+     * For convenience, so widgets can share state.
+     * "current" is unrelated to what is "specified",
+     * ie, facets' values 
+     * 
+     * note: for ObsLineItemRef, there is also
+     *  get item(): LineItem | undefined
+     * which simply delegates to this function
+     *  */ 
+  get currentItem(): LineItem | undefined
+
+}
+
+export {
+  type CommerceService as default
+}

package/service/context.tsx

@@ -0,0 +1,39 @@
+'use client'
+import { createContext, useContext, useRef, type PropsWithChildren } from 'react'
+
+// https://dev.to/ivandotv/mobx-server-side-rendering-with-next-js-4m18
+import { enableStaticRendering } from 'mobx-react-lite'
+enableStaticRendering(typeof window === "undefined")
+
+
+import type CommerceService from './commerce-service'
+
+import getServiceSingleton from './impl'
+import type { Category, FacetsDesc } from '../types'
+
+const CommerceServiceContext = createContext<CommerceService | undefined>(undefined)
+
+export const useCommerce = (): CommerceService => {
+  return useContext(CommerceServiceContext) as CommerceService
+}
+
+export const CommerceServiceProvider: React.FC<PropsWithChildren & {
+  productsByCategory: Category[]
+  facets: FacetsDesc
+  options?: any
+}> = ({ 
+  children,
+  productsByCategory,
+  facets,
+  options
+}) => {
+
+  const serviceRef = useRef<CommerceService>(getServiceSingleton(productsByCategory, facets, options))
+  return (
+    <CommerceServiceContext.Provider
+      value={serviceRef.current}
+    >
+      {children}
+    </CommerceServiceContext.Provider>
+  )
+}

package/service/firebase-config.ts

@@ -0,0 +1,17 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp, getApps } from "firebase/app"
+
+const firebaseConfig = {
+    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
+    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
+    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
+    measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
+}
+
+// Initialize Firebase
+let firebase_app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0]
+
+export default firebase_app

package/service/impl/index.ts

@@ -0,0 +1,3 @@
+import { default as getInstance } from './standalone/get-singleton'
+
+export default getInstance

package/service/impl/standalone/get-singleton.ts

@@ -0,0 +1,28 @@
+import type CommerceService from '../../commerce-service'
+
+import StandaloneCommerceService, {type StandaloneServiceOptions} from './service'
+
+import type { Category, FacetsDesc } from '../../../types'
+
+// https://dev.to/ivandotv/mobx-server-side-rendering-with-next-js-4m18
+
+let instance: CommerceService | undefined =  undefined
+
+export default (categories: Category[], facets: FacetsDesc, options?: any): CommerceService => {
+
+  const _instance = instance ?? 
+    new StandaloneCommerceService(
+      categories, 
+      facets, 
+      options ? (options as StandaloneServiceOptions) : {} 
+    )
+      // For server side rendering always create a new store
+  if (typeof window === "undefined") return _instance
+
+    // Create the store once in the client
+  if (!instance) {
+    instance = _instance
+  }  
+
+  return _instance
+}

package/service/impl/standalone/obs-line-item.ts

@@ -0,0 +1,62 @@
+import { 
+  action,
+  computed, 
+  makeObservable, 
+  observable, 
+} from 'mobx'
+
+import type { Product, LineItem } from '../../../types'
+
+class ObsLineItem implements LineItem {
+
+  qu: number = 0
+
+  id: string    
+  sku: string   
+  title: string
+  titleAsOption: string
+  categoryId: string  
+  desc?: string
+  price: number
+  img?: string  
+
+  constructor(prod: Product) {
+    this.id = prod.id
+    this.sku = prod.sku
+    this.title = prod.title
+    this.titleAsOption = prod.titleAsOption
+    this.categoryId = prod.categoryId
+    this.desc = prod.desc
+    this.price = prod.price
+    this.img = prod.img
+
+    makeObservable(this, {
+      qu: observable,
+      canDecrement: computed,  
+      isInCart: computed,
+      
+      increment: action,
+      decrement: action,
+    })
+  }
+
+  get canDecrement(): boolean { return this.qu > 0 }
+  get quantity(): number {return this.qu}
+  get isInCart(): boolean {return this.qu > 0}
+
+  increment(): void { this.qu++ }
+
+  decrement(): void {
+    if (this.canDecrement) {
+      this.qu--
+    }
+  }
+
+  inCategory(id: string): boolean {
+      // TODO: will break for level one (which is ok for lux, but not generally)
+    return this.sku.includes(`-${id}-`)
+  }
+
+}
+
+export default ObsLineItem