@hanzo/commerce 7.3.2 → 7.3.4

package/components/buy/buy-card.tsx

@@ -1,259 +1,259 @@
-'use client'
-import React, { useRef, useEffect, type ComponentType } from 'react'
-import { reaction, type IReactionDisposer } from 'mobx'
-import { observer } from 'mobx-react-lite'
-
-import { cn } from '@hanzo/ui/util'
-import { ApplyTypography, MediaStack } from '@hanzo/ui/primitives'
-
-import type { 
-  ItemSelectorProps, 
-  ItemSelectorCompProps,
-  LineItem, 
-  Family, 
-  CategoryNode, 
-} from '../../types'
-
-import { useCommerce } from '../../service/context'
-import * as pathUtils from '../../service/path-utils'
-import { getFacetValuesMutator, ObsStringMutator } from '../../util'
-
-import NodeTabs from '../node-tabs'
-import AddToCartWidget from '../add-to-cart-widget'
-
-const BuyCard: React.FC<{
-  skuPath: string
-
-    /** For any selectors that show a list of choices,
-     * starting with 'scrollAfter' elements, 
-     * the list will scroll, and the card will
-     * have 'scrollHeightClx' applied to it to define and fix the height.
-     * This is most like something like '80vh' 
-     * defaults are '5' and 'h-[70vh]'
-     * */
-  scrollAfter?: number
-  scrollHeightClx?: string
-
-  clx?: string
-  famWidgetClx?: string
-  addWidgetClx?: string
-
-  selector: ComponentType<ItemSelectorProps>
-  selectorProps?: ItemSelectorCompProps 
-
-    /** Show all items from all sibling families
-     * If skuPath defines a Family, the first of it's items will 
-     * be selected. The facet widget will just select a the first 
-     * item in the chosen Family without changings the overall set
-     * of choices. */
-  allVariants?: boolean
-
-  familyTabAs?: 'image' | 'label' | 'image-and-label'
-  showItemMedia?: boolean
-
-  onQuantityChanged?: (sku: string, oldV: number, newV: number) => void
-  mobile?: boolean
-}> = observer(({
-  skuPath,
-  scrollAfter=5,
-  scrollHeightClx='h-[80vh]',
-  clx='',
-  famWidgetClx='',
-  addWidgetClx='',
-  selector: Selector,
-  selectorProps={
-    clx: '',
-    soleItemClx: '',
-    itemClx: '',
-    ext: {}
-  },
-  familyTabAs='image-and-label', 
-  showItemMedia=true,
-  allVariants=false,
-  mobile=false,
-  onQuantityChanged,
-}) => {
-
-  const cmmc = useCommerce()
-  const inst = useRef<{
-    level: number,
-    requestedFamily : Family | undefined
-    requestedNode: CategoryNode | undefined
-    currentFamTokenMutator: ObsStringMutator
-    disposers: IReactionDisposer[]
-  } | undefined>(undefined)
-
-
-  useEffect(() => {
-
-    let requestedFamily = cmmc.getFamilyById(skuPath) 
-    let requestedNode = requestedFamily ? undefined : cmmc.getNodeAtPath(skuPath)
-    let initialFamily = undefined
-
-    const { paths, level } = pathUtils.getSelectedPaths(skuPath)
-
-    if (level === 0) {
-      throw new Error('BuyCard.useEffect(): must specify at least at least one Level in skuPath!') 
-    }
-    if (requestedFamily) { 
-      if (allVariants && level >= 2) {
-          // select all siblings of requestedFamily.
-          // ie, go one level back
-        delete paths[level]
-        initialFamily = requestedFamily
-        requestedFamily = undefined
-        requestedNode = cmmc.getNodeAtPath(pathUtils.getParentPath(skuPath))
-      }
-    }
-    else {
-        // select siblings paths
-      if (allVariants) {
-        paths[level + 1] = [...requestedNode!.subNodes!.map((node) => (node.skuToken))]
-      }
-        // Actually select the the first fam at the fam level, 
-      else {
-        paths[level + 1] = [requestedNode!.subNodes![0].skuToken]
-      }
-    }
-
-    const selectedFams = cmmc.selectPaths(paths)
-    initialFamily = initialFamily ? initialFamily : (requestedFamily ? requestedFamily : selectedFams[0])
-    cmmc.setCurrentItem(initialFamily.products[0].sku)
-    const currentFamTokenMutator = new ObsStringMutator(pathUtils.lastToken(initialFamily!.id))
-
-    inst.current = {
-      level,
-      requestedFamily,
-      requestedNode,
-      currentFamTokenMutator,
-      disposers: []
-    }
-
-    if (!allVariants) {
-      inst.current?.disposers.push(reaction(
-        () => {
-          const fams = cmmc.selectedFamilies
-          return (fams.length > 0) ? fams[0].id : undefined
-        },
-        (famId) => {
-          if (famId && famId !== cmmc.currentItem?.familyId) {
-            const fam = cmmc.getFamilyById(famId)
-            if (fam) { 
-              cmmc.setCurrentItem(fam.products[0].sku) 
-            }
-          }
-        }
-      ))
-    }
-
-    return () => {
-      inst.current?.disposers.forEach((d) => {d()})
-    }
-
-  }, [])
-
-  const setFamilyPath = (pathValue: string | null) => {
-    if (inst.current?.currentFamTokenMutator.get() !== pathValue) {
-      inst.current?.currentFamTokenMutator.set(pathValue) 
-    }
-    const found = cmmc.selectedItems.find((item) => (item.familyId.endsWith(pathValue!)))
-    if (found) { 
-      cmmc.setCurrentItem(found.sku) 
-    }
-  }
-
-  const selectSku = (sku: string) => {
-    cmmc.setCurrentItem(sku)
-    const pathValue = pathUtils.lastToken(cmmc.currentItem!.familyId)
-    if (pathValue !== inst.current?.currentFamTokenMutator.get()) {
-      inst.current?.currentFamTokenMutator.set(pathValue) 
-    }
-  }
-
-  const famTitle = inst.current?.requestedFamily ? inst.current.requestedFamily.title : cmmc.selectedFamilies[0].title
-
-  const itemsToShow = (!cmmc.hasSelection) ? undefined : 
-    allVariants ? cmmc.selectedItems : cmmc.selectedFamilies[0].products as LineItem[]
-
-
-  const TitleArea: React.FC<{
-    title: string
-    byline?: string
-    clx?: string
-  }> = ({
-    title,
-    byline,
-    clx='' 
-  }) => (
-    <ApplyTypography className={clx}>
-      <h3>{title}</h3>
-      {byline && (<h6>{byline}</h6>)}
-    </ApplyTypography>
-  )
-
-  const scroll = !!(itemsToShow && itemsToShow.length > scrollAfter)
-  return (
-    <div className={cn(
-      'px-4 md:px-6 pt-3 pb-4 flex flex-col items-center min-h-[60vh]', 
-      clx,
-      scroll ? scrollHeightClx : 'h-auto'
-    )} >
-    {inst.current?.requestedNode && (<>
-      <ApplyTypography className={'mb-2 ' + (scroll ? 'shrink-0' : '')}>
-        <h3>{inst.current!.requestedNode.label}</h3>
-        {inst.current!.requestedNode.subNodesLabel && (
-          <h6 className='!text-center font-bold text-muted mt-3'>{inst.current!.requestedNode.subNodesLabel}</h6>
-        )}
-      </ApplyTypography>
-      <NodeTabs
-        className={cn(
-          'grid gap-0 align-stretch justify-normal ' + `grid-cols-${inst.current.requestedNode.subNodes!.length}`, 
-          'border-b-2 rounded-lg border-level-3 mb-4 -mr-2 -ml-2 max-w-[460px] h-10', // height is needed for iPhone bug
-          (scroll ? 'shrink-0' : ''),
-          famWidgetClx  
-        )} 
-        mobile={mobile}
-        mutator={allVariants ? 
-          {
-            get: () => (inst.current!.currentFamTokenMutator.get()),
-            set: setFamilyPath
-          }
-          : 
-          getFacetValuesMutator(inst.current.level + 1, cmmc)
-        } 
-        itemClx='flex-col h-auto gap-0 py-1 px-3'
-        buttonClx={
-          'h-full ' +
-          '!border-level-3'
-        }
-        levelNodes={inst.current.requestedNode.subNodes!}
-        show={familyTabAs}
-      />
-    </>)} 
-    {!inst.current?.requestedNode && famTitle && (
-      <TitleArea title={famTitle} clx=''/>
-    )}
-    {(cmmc.currentItem && showItemMedia) && (
-      <MediaStack media={cmmc.currentItem} constrainTo={{w: 200, h: 200}} clx={(scroll ? 'shrink-0' : '')}/>
-    )} 
-    {itemsToShow && (
-      <Selector 
-        items={itemsToShow}
-        selectedItemRef={cmmc}
-        selectSku={selectSku}
-        {...selectorProps}
-        scrollable={scroll}
-      />  
-    )}
-    {(cmmc.currentItem) && (
-      <AddToCartWidget 
-        item={cmmc.currentItem}
-        onQuantityChanged={onQuantityChanged} 
-        className={cn('min-w-[160px] mx-auto mt-4', (scroll ? 'shrink-0' : ''), addWidgetClx)}
-      />
-    )} 
-    </div >
-  )
-})
-
-export default BuyCard
+'use client'
+import React, { useRef, useEffect, type ComponentType } from 'react'
+import { reaction, type IReactionDisposer } from 'mobx'
+import { observer } from 'mobx-react-lite'
+
+import { cn } from '@hanzo/ui/util'
+import { ApplyTypography, MediaStack } from '@hanzo/ui/primitives'
+
+import type { 
+  ItemSelectorProps, 
+  ItemSelectorCompProps,
+  LineItem, 
+  Family, 
+  CategoryNode, 
+} from '../../types'
+
+import { useCommerce } from '../../service/context'
+import * as pathUtils from '../../service/path-utils'
+import { getFacetValuesMutator, ObsStringMutator } from '../../util'
+
+import NodeTabs from '../node-tabs'
+import AddToCartWidget from '../add-to-cart-widget'
+
+const BuyCard: React.FC<{
+  skuPath: string
+
+    /** For any selectors that show a list of choices,
+     * starting with 'scrollAfter' elements, 
+     * the list will scroll, and the card will
+     * have 'scrollHeightClx' applied to it to define and fix the height.
+     * This is most like something like '80vh' 
+     * defaults are '5' and 'h-[70vh]'
+     * */
+  scrollAfter?: number
+  scrollHeightClx?: string
+
+  clx?: string
+  famWidgetClx?: string
+  addWidgetClx?: string
+
+  selector: ComponentType<ItemSelectorProps>
+  selectorProps?: ItemSelectorCompProps 
+
+    /** Show all items from all sibling families
+     * If skuPath defines a Family, the first of it's items will 
+     * be selected. The facet widget will just select a the first 
+     * item in the chosen Family without changings the overall set
+     * of choices. */
+  allVariants?: boolean
+
+  familyTabAs?: 'image' | 'label' | 'image-and-label'
+  showItemMedia?: boolean
+
+  onQuantityChanged?: (sku: string, oldV: number, newV: number) => void
+  mobile?: boolean
+}> = observer(({
+  skuPath,
+  scrollAfter=5,
+  scrollHeightClx='h-[80vh]',
+  clx='',
+  famWidgetClx='',
+  addWidgetClx='',
+  selector: Selector,
+  selectorProps={
+    clx: '',
+    soleItemClx: '',
+    itemClx: '',
+    ext: {}
+  },
+  familyTabAs='image-and-label', 
+  showItemMedia=true,
+  allVariants=false,
+  mobile=false,
+  onQuantityChanged,
+}) => {
+
+  const cmmc = useCommerce()
+  const inst = useRef<{
+    level: number,
+    requestedFamily : Family | undefined
+    requestedNode: CategoryNode | undefined
+    currentFamTokenMutator: ObsStringMutator
+    disposers: IReactionDisposer[]
+  } | undefined>(undefined)
+
+
+  useEffect(() => {
+
+    let requestedFamily = cmmc.getFamilyById(skuPath) 
+    let requestedNode = requestedFamily ? undefined : cmmc.getNodeAtPath(skuPath)
+    let initialFamily = undefined
+
+    const { paths, level } = pathUtils.getSelectedPaths(skuPath)
+
+    if (level === 0) {
+      throw new Error('BuyCard.useEffect(): must specify at least at least one Level in skuPath!') 
+    }
+    if (requestedFamily) { 
+      if (allVariants && level >= 2) {
+          // select all siblings of requestedFamily.
+          // ie, go one level back
+        delete paths[level]
+        initialFamily = requestedFamily
+        requestedFamily = undefined
+        requestedNode = cmmc.getNodeAtPath(pathUtils.getParentPath(skuPath))
+      }
+    }
+    else {
+        // select siblings paths
+      if (allVariants) {
+        paths[level + 1] = [...requestedNode!.subNodes!.map((node) => (node.skuToken))]
+      }
+        // Actually select the the first fam at the fam level, 
+      else {
+        paths[level + 1] = [requestedNode!.subNodes![0].skuToken]
+      }
+    }
+
+    const selectedFams = cmmc.selectPaths(paths)
+    initialFamily = initialFamily ? initialFamily : (requestedFamily ? requestedFamily : selectedFams[0])
+    cmmc.setCurrentItem(initialFamily.products[0].sku)
+    const currentFamTokenMutator = new ObsStringMutator(pathUtils.lastToken(initialFamily!.id))
+
+    inst.current = {
+      level,
+      requestedFamily,
+      requestedNode,
+      currentFamTokenMutator,
+      disposers: []
+    }
+
+    if (!allVariants) {
+      inst.current?.disposers.push(reaction(
+        () => {
+          const fams = cmmc.selectedFamilies
+          return (fams.length > 0) ? fams[0].id : undefined
+        },
+        (famId) => {
+          if (famId && famId !== cmmc.currentItem?.familyId) {
+            const fam = cmmc.getFamilyById(famId)
+            if (fam) { 
+              cmmc.setCurrentItem(fam.products[0].sku) 
+            }
+          }
+        }
+      ))
+    }
+
+    return () => {
+      inst.current?.disposers.forEach((d) => {d()})
+    }
+
+  }, [])
+
+  const setFamilyPath = (pathValue: string | null) => {
+    if (inst.current?.currentFamTokenMutator.get() !== pathValue) {
+      inst.current?.currentFamTokenMutator.set(pathValue) 
+    }
+    const found = cmmc.selectedItems.find((item) => (item.familyId.endsWith(pathValue!)))
+    if (found) { 
+      cmmc.setCurrentItem(found.sku) 
+    }
+  }
+
+  const selectSku = (sku: string) => {
+    cmmc.setCurrentItem(sku)
+    const pathValue = pathUtils.lastToken(cmmc.currentItem!.familyId)
+    if (pathValue !== inst.current?.currentFamTokenMutator.get()) {
+      inst.current?.currentFamTokenMutator.set(pathValue) 
+    }
+  }
+
+  const famTitle = inst.current?.requestedFamily ? inst.current.requestedFamily.title : cmmc.selectedFamilies[0].title
+
+  const itemsToShow = (!cmmc.hasSelection) ? undefined : 
+    allVariants ? cmmc.selectedItems : cmmc.selectedFamilies[0].products as LineItem[]
+
+
+  const TitleArea: React.FC<{
+    title: string
+    byline?: string
+    clx?: string
+  }> = ({
+    title,
+    byline,
+    clx='' 
+  }) => (
+    <ApplyTypography className={clx}>
+      <h3>{title}</h3>
+      {byline && (<h6>{byline}</h6>)}
+    </ApplyTypography>
+  )
+
+  const scroll = !!(itemsToShow && itemsToShow.length > scrollAfter)
+  return (
+    <div className={cn(
+      'px-4 md:px-6 pt-3 pb-4 flex flex-col items-center min-h-[60vh]', 
+      clx,
+      scroll ? scrollHeightClx : 'h-auto'
+    )} >
+    {inst.current?.requestedNode && (<>
+      <ApplyTypography className={'mb-2 ' + (scroll ? 'shrink-0' : '')}>
+        <h3>{inst.current!.requestedNode.label}</h3>
+        {inst.current!.requestedNode.subNodesLabel && (
+          <h6 className='!text-center font-bold text-muted mt-3'>{inst.current!.requestedNode.subNodesLabel}</h6>
+        )}
+      </ApplyTypography>
+      <NodeTabs
+        className={cn(
+          'grid gap-0 align-stretch justify-normal ' + `grid-cols-${inst.current.requestedNode.subNodes!.length}`, 
+          'border-b-2 rounded-lg border-level-3 mb-4 -mr-2 -ml-2 max-w-[460px] h-10', // height is needed for iPhone bug
+          (scroll ? 'shrink-0' : ''),
+          famWidgetClx  
+        )} 
+        mobile={mobile}
+        mutator={allVariants ? 
+          {
+            get: () => (inst.current!.currentFamTokenMutator.get()),
+            set: setFamilyPath
+          }
+          : 
+          getFacetValuesMutator(inst.current.level + 1, cmmc)
+        } 
+        itemClx='flex-col h-auto gap-0 py-1 px-3'
+        buttonClx={
+          'h-full ' +
+          '!border-level-3'
+        }
+        levelNodes={inst.current.requestedNode.subNodes!}
+        show={familyTabAs}
+      />
+    </>)} 
+    {!inst.current?.requestedNode && famTitle && (
+      <TitleArea title={famTitle} clx=''/>
+    )}
+    {(cmmc.currentItem && showItemMedia) && (
+      <MediaStack media={cmmc.currentItem} constrainTo={{w: 200, h: 200}} clx={(scroll ? 'shrink-0' : '')}/>
+    )} 
+    {itemsToShow && (
+      <Selector 
+        items={itemsToShow}
+        selectedItemRef={cmmc}
+        selectSku={selectSku}
+        {...selectorProps}
+        scrollable={scroll}
+      />  
+    )}
+    {(cmmc.currentItem) && (
+      <AddToCartWidget 
+        item={cmmc.currentItem}
+        onQuantityChanged={onQuantityChanged} 
+        className={cn('min-w-[160px] mx-auto mt-4', (scroll ? 'shrink-0' : ''), addWidgetClx)}
+      />
+    )} 
+    </div >
+  )
+})
+
+export default BuyCard