@hanzo/commerce 6.2.3 → 6.3.0

package/components/{select-family → buy/multi-family}/family-carousel/index.tsx

@@ -11,30 +11,20 @@ import {
   CarouselPrevious,
   CarouselNext,
 } from '@hanzo/ui/primitives'
-import type { Dimensions } from '@hanzo/ui/types'
 
-import type { Family, FamilyCarouselSlideOptions } from '../../../types'
+import type { MultiFamilySelectorProps } from '../../../../types'
 
 import FamilySlide from './slide'
-import {
-  SlideState,
-  FamilyCarouselState
-} from './state'
+import { FamilyCarouselState } from './state'
 
-import { useCommerce } from '../../..'
+import { useCommerce } from '../../../..'
 
-const FamilyCarousel: React.FC<{
-  families: Family[]
-  clx?: string
-  itemClx?: string
-  slideOptions?: FamilyCarouselSlideOptions
-  mediaConstraint?: Dimensions
-  mobile?: boolean
-}> = ({ 
+const FamilyCarousel: React.FC<MultiFamilySelectorProps> = ({ 
   families,
   clx='',
   itemClx='',
-  slideOptions, 
+  itemOptions, 
+  selectorOptions,
   mediaConstraint={w: 250, h: 250},
   mobile=false,
 }) => {
@@ -70,7 +60,7 @@ const FamilyCarousel: React.FC<{
               selectedItemRef={slideState}
               selectSku={slideState.selectSku.bind(slideState)}
               mediaConstraint={mediaConstraint}
-              options={slideOptions}
+              options={itemOptions}
               mobile={mobile}
               clx={itemClx}
             />

package/components/{select-family → buy/multi-family}/family-carousel/slide.tsx

@@ -7,8 +7,8 @@ import {
 } from '@hanzo/ui/primitives'
 import type { Dimensions } from '@hanzo/ui/types'
 
-import type { FamilyCarouselSlideOptions, Family, LineItem, ItemSelector } from '../../../types'
-import { ButtonItemSelector } from '../..'
+import type { ItemSelectorOptions, Family, LineItem, ItemSelector } from '../../../../types'
+import { ButtonItemSelector } from '../../..'
 import { cn } from '@hanzo/ui/util'
 
 const FamilySlide: React.FC<Omit<ItemSelector, 'items'> & {
@@ -16,7 +16,7 @@ const FamilySlide: React.FC<Omit<ItemSelector, 'items'> & {
   mediaConstraint: Dimensions
   clx?: string
   mobile?: boolean,
-  options?: FamilyCarouselSlideOptions
+  options?: ItemSelectorOptions
 }> = ({
   family,
   selectedItemRef,

package/components/{select-family → buy/multi-family}/family-carousel/state.ts

@@ -1,4 +1,4 @@
-import type { Family, LineItem, ObsLineItemRef, Product } from '../../../types'
+import type { Family, LineItem, ObsLineItemRef, Product } from '../../../../types'
 import { observable, action, computed, makeObservable } from 'mobx'
 
 class SlideState implements ObsLineItemRef {
@@ -49,7 +49,11 @@ class FamilyCarouselState {
   _map = new Map<string, SlideState>()
   _syncSku: (sku: string) => void
 
-  constructor(fams: Family[], syncSkuToCurrentSlide: (sku: string) => void) {
+  constructor(
+    fams: Family[], 
+//    initialFamilyId: string,
+    syncSkuToCurrentSlide: (sku: string) => void
+  ) {
 
     fams.forEach((f, index) => {this._map.set(f.id, new SlideState(
       f,

package/components/buy/multi-family/index.ts

@@ -0,0 +1,2 @@
+export { default as FamilyCarousel } from './family-carousel'
+export { default as AllVariantsCarousel } from './all-variants-carousel'

package/components/buy/{foo.txt → please-keep.txt}

@@ -1,5 +1,5 @@
     {/*
-      <LevelNodesWidget
+      <NodeTabs
         className={cn(
           'grid gap-0 align-stretch justify-normal ' + `grid-cols-${inst.current.parentNode.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

package/components/buy/single-family-selector.tsx

@@ -0,0 +1,90 @@
+import React from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { MediaStack, Skeleton } from '@hanzo/ui/primitives'
+import type { Dimensions } from '@hanzo/ui/types'
+
+import { useCommerce } from '../..'
+
+import type { ItemSelectorOptions, ItemSelectorProps, LineItem } from '../../types'
+import TitleAndByline from './title-and-byline'
+import { accessItemOptions } from '../../util'
+import { cn } from '@hanzo/ui/util'
+
+
+const DEF_MEDIA_CONSTRAINT = {w: 200, h: 200}
+
+const SingleFamilySelector: React.FC<{
+  items: LineItem[] // these may be sorted, so are we can't just use currentFamily.products
+  Selector: React.ComponentType<ItemSelectorProps>
+  selOptions: ItemSelectorOptions | undefined
+  scrollable?: boolean
+  showItemMedia?: boolean
+  mediaConstraint?: Dimensions
+  mobile?: boolean
+  clx?: string
+  titleAreaClx?: string
+}> = ({
+  items,
+  Selector,
+  selOptions,
+  scrollable=false,
+  showItemMedia=true,
+  mediaConstraint=DEF_MEDIA_CONSTRAINT,
+  mobile=false,
+  clx='',
+  titleAreaClx=''
+}) => {
+  
+  const cmmc = useCommerce()
+
+
+  const MyTitleAndByline: React.FC<{clx?: string}> = observer(({
+    clx=''
+  }) => {
+    const { familyTitle, showFamilyByline } = accessItemOptions(selOptions)
+    const title = (familyTitle === 'none' ? 
+      undefined 
+      : 
+      (familyTitle === 'long' ? 
+        cmmc.currentFamily?.title 
+        : 
+        (cmmc.currentFamily?.titleShort ?? cmmc.currentFamily?.title)
+      ) 
+    )
+    const byline = (familyTitle !== 'none') && showFamilyByline ? cmmc.currentFamily?.byline :  undefined
+    return ( <TitleAndByline clx={clx} title={title} byline={byline}/> )
+  })
+
+  const ItemMedia: React.FC = observer(() => (
+    cmmc.currentItem ? (
+      <MediaStack 
+        media={cmmc.currentItem!} 
+        constrainTo={mediaConstraint} 
+        clx={'mb-2 ' + (scrollable ? 'shrink-0' : '')}
+      />
+    ) : (
+      <Skeleton className={'w-[200px] h-[200px] my-2 ' + (scrollable ? 'shrink-0' : '')}/>
+    )
+  ))
+
+  return (
+    <div className={cn(clx, 'flex flex-col items-center', (scrollable ? 'shrink' : ''))}>
+      <MyTitleAndByline clx={cn(titleAreaClx, (scrollable ? 'shrink-0' : ''))} />
+      {showItemMedia && (<ItemMedia />)}
+      {items && (
+        <Selector 
+          items={items}
+          selectedItemRef={cmmc}
+          selectSku={cmmc.setCurrentItem.bind(cmmc)}
+          scrollable={scrollable}
+          mobile={mobile}
+          options={selOptions}
+          clx={(scrollable ? 'shrink' : '')}
+        />  
+      )}
+    </div>
+  )
+}
+
+export default SingleFamilySelector

package/components/buy/title-and-byline.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import { ApplyTypography } from '@hanzo/ui/primitives'
+import { cn } from '@hanzo/ui/util'
+
+const TitleAndByline: React.FC<{
+  title: string | undefined
+  byline?: string | undefined
+  clx?: string
+  bylineClx?: string
+}> = ({
+  title,
+  byline,
+  clx='',
+  bylineClx=''
+}) => ( (title || byline) ? (
+    <ApplyTypography className={cn('flex flex-col items-center !gap-0 [&>*]:!m-0 ', clx)} >
+      <h4>{title}</h4>
+      {byline && (<h6 className={bylineClx}>{byline}</h6>)}
+    </ApplyTypography>
+  ) : (null)
+)
+
+export default TitleAndByline
+

package/components/cart/cart-panel/cart-line-item.tsx

@@ -61,7 +61,7 @@ const CartLineItem: React.FC<{
       </div>
       <div className='flex flex-row items-center justify-between w-full'>
         <div className='flex flex-row items-center'>
-          <AddToCartWidget className='' item={item} size='xs' buttonClx='h-8 md:h-6' variant='minimal'/>
+          <AddToCartWidget variant='minimal' item={item} buttonClx='!h-8 md:!h-6' />
           {item.quantity > 1 && (<span className='pl-2.5'>{'@' + formatCurrencyValue(item.price)}</span>)}
         </div>
         <div className='flex flex-row gap-1 items-center justify-end'>

package/components/index.ts

@@ -7,8 +7,7 @@ export { default as BuyDrawer } from './buy/buy-drawer'
 export { default as CartAccordian } from './cart/cart-accordian'
 export { default as CartPanel } from './cart/cart-panel'
 
-export { default as LevelNodesWidget } from './select-family/level-nodes-widget'
-
+export { default as NodeTabs } from './node-tabs'
 export { default as PaymentStepForm } from './checkout/payment-step-form'
 export { default as ShippingStepForm } from './checkout/shipping-step-form'
 

package/components/item-selector/button.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
 import { observer } from 'mobx-react-lite'
 
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
@@ -14,7 +14,7 @@ import { cn } from '@hanzo/ui/util'
 import type { Dimensions } from '@hanzo/ui/types'
 
 import type { ItemSelectorProps, LineItem } from '../../types'
-import { formatCurrencyValue } from '../../util'
+import { accessItemOptions, formatCurrencyValue } from '../../util'
 
 import QuantityIndicator from '../quantity-indicator'
 
@@ -72,15 +72,21 @@ const ButtonItemSelector: React.FC<ItemSelectorProps> = observer(({
   options={}
 }) => {
 
-  const imageButtons = 'imageButtons' in options ? options.imageButtons : false
-  const showFamily = 'showFamily' in options ? options.showFamily : false
-  const showPrice = 'showPrice' in options ? options.showPrice : true
-  const showQuantity = 'showQuantity' in options ? options.showQuantity : false
-  const horizButtons = 'horizButtons' in options ? options.horizButtons : false
+  const {
+    showPrice, 
+    showQuantity,
+    showFamilyInOption,
+    buttonType,
+    horizButtons,
+  } = accessItemOptions(options)
+
+  const showImage = buttonType !== 'text'
+  const showText = buttonType !== 'image' 
+  const showBoth = buttonType === 'image-and-text' 
 
   const labelAndPrice = (item : LineItem) => (
-    (showFamily ? (item.familyTitle + ', ' + item.optionLabel) : item.optionLabel) + 
-    (showPrice ? ((showFamily ? ': ' : ', ') + formatCurrencyValue(item.price)) : '')
+    (showFamilyInOption ? (item.familyTitle + ', ' + item.optionLabel) : item.optionLabel) + 
+    (showPrice ? ((showFamilyInOption ? ': ' : ', ') + formatCurrencyValue(item.price)) : '')
   )
 
   const Item: React.FC<{ 
@@ -91,22 +97,24 @@ const ButtonItemSelector: React.FC<ItemSelectorProps> = observer(({
     selected
   }) => {
     
-    const textClx = (selected) ? 'text-accent ' : 'text-muted'
+    const textClx = (selected) ? 'text-accent' : 'text-muted'
     const cursorClx = (selected) ? 'hover:cursor-default' : 'hover:cursor-pointer' 
-    const justifyClx = (!imageButtons) ? 'justify-center ' : ''
-    const paddingClx = (imageButtons) ? (scrollable ? 'px-4' : 'px-2' ) : ''
+    const justifyClx = (showBoth) ?  '' : 'justify-center'
+      // If no image, the Label must fill the entire button since it has to be
+      // clickable all the way to the border
+    const paddingClx = (showImage) ? (scrollable ? 'px-4 py-2' : 'px-2 py-2' ) : '' 
     let bgClx = '' 
     let borderClx = ''
     if (scrollable) {
       borderClx += (selected) ? 'border-foreground border ' : 'border-b border-muted-2 '
     }
-    else if (!imageButtons) {
+    else if (!showImage) {
       borderClx += 'border rounded-lg ' 
       borderClx += (selected) ? 'border-foreground ' : 'border-muted-2 ' 
       bgClx += 'hover:bg-level-2' 
     }
 
-    const outerClx = ['h-10 py-2 flex items-center', justifyClx, paddingClx, bgClx, borderClx]
+    const outerClx = ['h-10 flex items-center', justifyClx, paddingClx, bgClx, borderClx]
 
     return (
       <div className={cn(...outerClx, itemClx )}  data-vaul-no-drag >
@@ -116,13 +124,15 @@ const ButtonItemSelector: React.FC<ItemSelectorProps> = observer(({
           className={cn(
             cursorClx,
             (scrollable ?  '' : 'border-transparent border-2 data-[state=checked]:border-foreground'),
-            imageButtons ? 'mr-2' : 'hidden'
+            showBoth ? 'mr-2' : (showImage ? '' : 'hidden') 
           )}
         />
         <Label htmlFor={item.sku} className={cn(
           showQuantity ? 'flex items-center' : 'block',
           textClx, 
           cursorClx,
+          (showImage ? '' : 'self-stretch w-full flex items-center justify-center px-3 py-2'),
+          (showText ? '' : 'hidden') 
         )}>
           <div className={showQuantity ? 'grow' : ''}>{labelAndPrice(item)}</div>
           {showQuantity && (
@@ -140,10 +150,10 @@ const ButtonItemSelector: React.FC<ItemSelectorProps> = observer(({
  
   return items.length > 1 ? (
     <RadioGroup
-      className={cn('flex', 
+      className={cn( 
         (scrollable ? 'shrink min-h-0 gap-0' : (mobile ? 'gap-3' : 'gap-1')), 
-        (horizButtons ? 'flex-row gap-0' : 'flex-col'),
-        (mobile && !imageButtons) ? 'min-w-pr-50' : '',
+        (horizButtons ? `grid grid-cols-${items.length} gap-1` : 'flex flex-col'),
+        (mobile && showText) ? 'min-w-pr-50' : '',
         clx,
       )}
       onValueChange={selectSku}

package/components/item-selector/carousel/index.tsx

@@ -0,0 +1,197 @@
+'use client'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { reaction } from 'mobx'
+import { observer } from 'mobx-react-lite'
+
+import { cn } from '@hanzo/ui/util'
+import type { Dimensions } from '@hanzo/ui/types'
+
+import {
+  ApplyTypography,
+  type CarouselOptions,
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+  MediaStack,
+} from '@hanzo/ui/primitives'
+
+import type { ItemSelectorProps, LineItem } from '../../../types'
+import { formatCurrencyValue, accessItemOptions } from '../../../util'
+
+import QuantityIndicator from '../../quantity-indicator'
+import ItemCarouselSlider from './slider'
+
+const DEFAULT_CONSTRAINT = {w: 250, h: 250}
+
+interface CarouselItemSelectorPropsExt {
+  constrainTo: Dimensions
+  options?: CarouselOptions 
+    /** Do not show Family and / or Item title and Price */
+  imageOnly?: boolean
+}
+
+const ItemSlide: React.FC<{
+  item: LineItem,
+  constrainTo: Dimensions
+  clx?: string
+}> = ({
+  item,
+  constrainTo,
+  clx=''
+}) => (
+  <CarouselItem className={cn('p-2 flex flex-col justify-center items-center', clx)}>
+    <MediaStack media={item} constrainTo={constrainTo} clx='my-4' />
+  </CarouselItem>
+) 
+
+const CarouselItemSelector: React.FC<ItemSelectorProps> = observer(({ 
+  items,
+  selectSku,
+  selectedItemRef: itemRef,
+  clx='',
+  itemClx='',
+  options={},
+  ext={
+    options: {loop: true},
+    constrainTo: DEFAULT_CONSTRAINT,
+    imageOnly: false 
+  } satisfies CarouselItemSelectorPropsExt
+}) => {
+
+  const {
+    showPrice, 
+    showQuantity,
+    showFamilyInOption,
+    showByline,
+    showSlider,
+  } = accessItemOptions(options)
+    
+  const elbaApiRef = useRef<CarouselApi | undefined>(undefined)
+  const scrollToRef = useRef<((index: number) => void) | undefined>(undefined)
+  const dontRespondRef = useRef<boolean>(false)
+
+  const setApi = (api: CarouselApi) => {elbaApiRef.current = api}
+  const setScrollTo = (scrollTo: (index: number) => void) => { scrollToRef.current = scrollTo}
+
+  const carouselOptions = 'options' in ext ? ext.options : undefined
+  const constrainTo = 'constrainTo' in ext ? ext.constrainTo : DEFAULT_CONSTRAINT
+  const imageOnly = 'imageOnly' in ext ? ext.imageOnly : false
+
+  const onSelect = useCallback((emblaApi: CarouselApi) => {
+    if (dontRespondRef.current) {
+      dontRespondRef.current = false
+      return
+    }
+    const index = emblaApi.selectedScrollSnap()
+    if (index !== -1) {
+      selectSku(items[index].sku)
+      if (scrollToRef.current) {
+        scrollToRef.current(index)
+      }
+    }
+    dontRespondRef.current = false
+  }, [scrollToRef.current ])
+
+  useEffect(() => {
+    return reaction(
+      () => (itemRef.item),
+      (item) => {
+        if (elbaApiRef.current) {
+          const index = items.findIndex((el) => (el.sku === item?.sku))  
+          if (index !== -1) {
+            dontRespondRef.current = true
+            elbaApiRef.current.scrollTo(index) 
+          }
+        }
+      }  
+    )
+  }, [])
+
+  const optionLabel = () => (
+    showFamilyInOption ? 
+      (itemRef.item?.familyTitle + ', ' + itemRef.item?.optionLabel) 
+      : 
+      itemRef.item?.optionLabel 
+  )
+
+  const debugBorder = (c: 'r' | 'g' | 'b'): string => {
+     return ''
+
+    switch (c) {
+      case 'r': return ' border border-[#ffaaaa] '
+      case 'g': return ' border border-[#aaffaa] '
+      case 'b': return ' border border-[#aaaaff] '
+    }
+  }
+
+  const onScrollIndexChange = (index: number) => {
+    dontRespondRef.current = true
+    selectSku(items![index].sku)
+    elbaApiRef.current?.scrollTo(index) 
+  }
+
+  return ( 
+    <div className={cn('w-full flex flex-col items-center', clx)}>
+      <Carousel 
+        options={showSlider ? {...carouselOptions, loop: false} : carouselOptions } 
+        className={'w-full px-2' + debugBorder('r')} 
+        onCarouselSelect={onSelect} 
+        setApi={setApi}
+      >
+        <CarouselContent>
+        {items.map((item) => (
+          <ItemSlide key={item.sku} item={item} constrainTo={constrainTo} clx={itemClx} />
+        ))}
+        </CarouselContent>
+        {!showSlider && (<>
+          <CarouselPrevious className='left-1'/>
+          <CarouselNext className='right-1'/>
+        </>)}
+      </Carousel>
+     
+      {(!imageOnly && itemRef.item) && (<>
+        <ApplyTypography className='flex flex-col items-center [&>*]:!m-0 !gap-1 '>
+          <div className={
+            'flex items-center gap-1 [&>*]:!m-0 ' + debugBorder('g') + 
+            (showFamilyInOption ? 'flex-col' : 'flex-row')
+          }>
+            <h6 className='font-semibold'>
+              {optionLabel() + (showPrice && !showFamilyInOption ? ',' : '')}
+            </h6>
+            <div className={
+              'flex items-center gap-1 [&>*]:!m-0 flex-row ' +  debugBorder('b') +  
+              (showFamilyInOption ? 'w-full justify-between' : '')
+            }>
+              {showPrice && (<p>{formatCurrencyValue(itemRef.item.price)}</p>)}
+              {showQuantity && (
+                <QuantityIndicator 
+                  item={itemRef.item} 
+                  clx='h-[22px] ml-4' 
+                  iconClx='fill-foreground'
+                  digitClx='not-typography font-semibold text-primary-fg leading-none font-sans text-xs' 
+                />
+              )}
+            </div>
+          </div>
+          {showByline && itemRef.item.byline && (<p>{itemRef.item.byline}</p>)}
+        </ApplyTypography>
+        {showSlider && (
+          <ItemCarouselSlider 
+            clx='mt-5 w-[320px]' 
+            numStops={items.length}  
+            setScrollTo={setScrollTo}
+            onIndexChange={onScrollIndexChange}
+          />
+        )}
+      </>)}
+    </div>
+  )
+})
+
+export {
+  type CarouselItemSelectorPropsExt,
+  CarouselItemSelector as default 
+}

package/components/item-selector/carousel/slider.tsx

@@ -0,0 +1,40 @@
+'use client'
+import React, { useEffect, useState } from 'react'
+
+import { Slider } from '@hanzo/ui/primitives'
+
+const ItemCarouselSlider: React.FC<{
+  clx?: string
+  setScrollTo: (scrollTo: (index: number) => void) => void
+  onIndexChange: (i: number) => void
+  numStops: number
+}> = ({
+  clx='',
+  setScrollTo,
+  onIndexChange,
+  numStops,
+}) => {
+
+  const [index, setIndex] = useState<number>(0)
+  useEffect(() => { setScrollTo(setIndex) }, [setScrollTo])
+
+  const onValueChange = (v: number[]) => { setIndex(v[0]); onIndexChange(v[0]) }
+
+  return ( 
+    <Slider 
+      className={clx} 
+      thumbClx='w-8 border-muted border-2 bg-level-1 focus-visible:ring-0 focus-visible:ring-offset-0 transition-none' 
+      trackBgClx='bg-level-3'
+      rangeBgClx='bg-level-3'
+      thumbSlidingClx='bg-muted-2' 
+      defaultValue={[0]} 
+      min={0}
+      max={numStops - 1} 
+      step={1} 
+      value={[index]}
+      onValueChange={onValueChange}
+    />
+  )
+}
+
+export default ItemCarouselSlider

package/components/{select-family/level-nodes-widget → node-tabs}/index.tsx

@@ -4,10 +4,10 @@ import React, { useState } from 'react'
 import { ToggleGroup, ToggleGroupItem} from "@hanzo/ui/primitives"
 import { cn } from '@hanzo/ui/util'
 
-import type { CategoryNode, StringMutator, StringArrayMutator } from '../../../types'
+import type { CategoryNode, StringMutator, StringArrayMutator } from '../../types'
 import NodeImage from './node-image'
 
-const LevelNodesWidget: React.FC<{
+const NodeTabs: React.FC<{
   levelNodes: CategoryNode[]
   mutator: StringMutator | StringArrayMutator
   multiple?: boolean
@@ -88,4 +88,4 @@ const LevelNodesWidget: React.FC<{
   )
 }
 
-export default LevelNodesWidget
+export default NodeTabs

package/components/{select-family/level-nodes-widget → node-tabs}/node-image.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import Image from 'next/image'
 
-import type { CategoryNode } from '../../../types'
+import type { CategoryNode } from '../../types'
 
 const ICON_SIZE = 20
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/commerce",
-  "version": "6.2.3",
+  "version": "6.3.0",
   "description": "e-commerce framework.",
   "type": "module",  
   "publishConfig": {
@@ -40,8 +40,8 @@
     "square": "^35.0.0"
   },
   "peerDependencies": {
-    "@hanzo/auth": "^2.3.4",
-    "@hanzo/ui": "^3.5.0",
+    "@hanzo/auth": "^2.3.5",
+    "@hanzo/ui": "^3.6.0",
     "@hookform/resolvers": "^3.3.4",
     "@radix-ui/react-radio-group": "^1.1.3",
     "firebase": "^10.8.0",

package/service/impls/standalone/actual-line-item.ts

@@ -5,7 +5,7 @@ import {
   observable, 
 } from 'mobx'
 
-import type { ImageDef, VideoDef } from '@hanzo/ui/types'
+import type { ImageDef, MediaTransform, VideoDef } from '@hanzo/ui/types'
 
 import type { Product, LineItem, CommerceService } from '../../../types'
 
@@ -36,6 +36,7 @@ class ActualLineItem
   img?: ImageDef 
   video?: VideoDef 
   animation?: string
+  mediaTransform?: MediaTransform 
   optionImg?: ImageDef
   timeAdded: number = 0 // timeAdded of being added to cart
 
@@ -53,6 +54,7 @@ class ActualLineItem
     this.video = prod.video
     this.animation = prod.animation
     this.optionImg = prod.optionImg
+    this.mediaTransform = prod.mediaTransform
 
     if (snap) {
       this.qu = snap.quantity