@hanzo/commerce 6.4.4 → 6.4.6

package/components/buy/buy-card.tsx

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

package/components/buy/carousel-buy-card.tsx

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

package/components/cart/cart-accordian.tsx

@@ -12,7 +12,7 @@ import {
 } from '@hanzo/ui/primitives'
 
 import { formatCurrencyValue } from '../../util'
-import { useCommerce } from '../../service/context'
+import { useCommerce } from '../../context'
 
 import CartPanel from './cart-panel'
 

package/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 '../../buy/add-to-cart-widget'
-import { useCommerce } from '../../../service/context'
+import { useCommerce } from '../../../context'
 
 const DEF_IMG_SIZE=40
 

package/components/cart/cart-panel/index.tsx

@@ -5,7 +5,7 @@ import { observer } from 'mobx-react-lite'
 import { Button, ScrollArea } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
 
-import { useCommerce } from '../../../service/context'
+import { useCommerce } from '../../../context'
 import { formatCurrencyValue } from '../../../util'
 import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
 

package/components/cart/cart-panel/promo-code.tsx

@@ -10,7 +10,7 @@ import { observer } from 'mobx-react-lite'
 
 import { Button, Form, FormControl, FormField, FormItem, Input } from '@hanzo/ui/primitives'
 
-import { useCommerce } from '../../../service/context'
+import { useCommerce } from '../../../context'
 import type { Promo } from '../../../types'
 import getPromoFromApi from '../../../util/promo-codes'
 

package/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 '../../../service/context'
+import { useCommerce } from '../../../context'
 import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
 import type { CheckoutStepComponentProps, TransactionStatus } from '../../../types'
 

package/components/checkout/payment-step-form/methods/card.tsx

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

package/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 '../../../../service/context'
+import { useCommerce } from '../../../../context'
 import type { PaymentMethodComponentProps } from '../../../../types'
 import { sendFBEvent, sendGAEvent } from '../../../../util/analytics'
 

package/components/checkout/shipping-step-form.tsx

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

package/context/commerce-ui.ts

@@ -0,0 +1,61 @@
+import { 
+  action,
+  computed, 
+  makeObservable, 
+  observable, 
+} from 'mobx'
+
+interface CommerceUI {
+  showBuyOptions: (skuPath: string) => void
+  hideBuyOptions: () => void
+
+  get buyOptionsShowing(): boolean
+
+  get skuPath(): string | undefined
+  clearSkuPath: () => void
+}
+
+class CommerceUIStore implements CommerceUI {
+
+  _skuPath: string | undefined = undefined
+  _optionsShowing: boolean = false
+
+  constructor() {
+    makeObservable(this, {
+      _skuPath: observable, 
+      _optionsShowing: observable,
+      showBuyOptions: action,
+      hideBuyOptions: action,
+      buyOptionsShowing: computed,
+      skuPath: computed,
+      clearSkuPath: action
+    })
+  }
+
+  showBuyOptions = (skuPath: string): void => {
+    this._skuPath = skuPath
+    this._optionsShowing = true
+  } 
+
+  hideBuyOptions = (): void => {
+    this._optionsShowing = false
+  }
+
+  get buyOptionsShowing(): boolean {
+    return this._optionsShowing
+  } 
+
+  get skuPath(): string | undefined {
+    return this._skuPath
+  } 
+
+  clearSkuPath = (): void => {
+    this._skuPath = undefined
+    this._optionsShowing = false
+  }
+}
+
+export {
+  CommerceUIStore,
+  type CommerceUI
+}

package/context/index.tsx

@@ -0,0 +1,63 @@
+'use client'
+import React, { 
+  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 { ServiceOptions } from '..'
+import type CommerceService from '../types/commerce-service'
+import getInstance from '../service/get-instance'
+import type { Family, CategoryNode, SelectionUISpecifier } from '../types'
+import  { type CommerceUI, CommerceUIStore } from './commerce-ui'
+
+type CommerceContextValue = {
+  service: CommerceService
+  ui: CommerceUI  
+}
+
+const CommerceContext = createContext<CommerceContextValue | undefined>(undefined)
+
+const useCommerce = (): CommerceService => {
+  return (useContext(CommerceContext) as CommerceContextValue)?.service
+}
+
+const useCommerceUI = (): CommerceUI => {
+  return (useContext(CommerceContext) as CommerceContextValue)?.ui
+}
+
+const CommerceProvider: React.FC<PropsWithChildren & {
+  families: Family[]
+  rootNode: CategoryNode
+  options?: ServiceOptions
+  uiSpecs?: Record<string, SelectionUISpecifier>
+}> = ({ 
+  children,
+  families,
+  rootNode,
+  options,
+  uiSpecs
+}) => {
+
+    // TODO: Inject Promo fixture here from siteDef
+  const serviceRef = useRef<CommerceContextValue>({
+    service: getInstance(families, rootNode, options, uiSpecs),
+    ui: new CommerceUIStore()
+  })
+  return (
+    <CommerceContext.Provider value={serviceRef.current}>
+      {children}
+    </CommerceContext.Provider>
+  )
+}
+
+export {
+  useCommerce, 
+  useCommerceUI, 
+  CommerceProvider
+}

package/index.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/commerce",
-  "version": "6.4.4",
+  "version": "6.4.6",
   "description": "e-commerce framework.",
   "type": "module",
   "publishConfig": {
@@ -40,8 +40,8 @@
     "square": "^35.0.0"
   },
   "peerDependencies": {
-    "@hanzo/auth": "^2.4.4",
-    "@hanzo/ui": "^3.6.3",
+    "@hanzo/auth": "^2.4.5",
+    "@hanzo/ui": "^3.6.4",
     "@hookform/resolvers": "^3.3.4",
     "@radix-ui/react-radio-group": "^1.1.3",
     "firebase": "^10.8.0",

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

@@ -8,7 +8,7 @@ import {
   parseAsBoolean,
 } from 'next-usequerystate'
 
-import { useCommerce } from '../service/context'
+import { useCommerce } from '../context'
 import type { SelectedPaths } from '../types'
 import sep from '../service/sep'
 

package/service/context.tsx

@@ -1,44 +0,0 @@
-'use client'
-import { createContext, useContext, useRef, type PropsWithChildren, useEffect } 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 '../types/commerce-service'
-import type { ServiceOptions } from '..'
-import getInstance from './get-instance'
-import type { Family, CategoryNode, SelectionUISpecifier } from '../types'
-
-const CommerceServiceContext = createContext<CommerceService | undefined>(undefined)
-
-const useCommerce = (): CommerceService => {
-  return useContext(CommerceServiceContext) as CommerceService
-}
-
-const CommerceServiceProvider: React.FC<PropsWithChildren & {
-  productsByFamily: Family[]
-  rootNode: CategoryNode
-  options?: ServiceOptions
-  uiSpecs?: Record<string, SelectionUISpecifier>
-}> = ({ 
-  children,
-  productsByFamily,
-  rootNode,
-  options,
-  uiSpecs
-}) => {
-
-    // TODO: Inject Promo fixture here
-  const serviceRef = useRef<CommerceService>(getInstance(productsByFamily, rootNode, options, uiSpecs))
-  return (
-    <CommerceServiceContext.Provider value={serviceRef.current}>
-      {children}
-    </CommerceServiceContext.Provider>
-  )
-}
-
-export {
-  useCommerce, CommerceServiceProvider
-}