checkout cleanup and related (#105)

cmmc: (MB) moved CartAccordian to client Checkout Cart DT: Fixed selection when removing item ui: minor changes to media minor change to primitives/Accordian
hanzoai · Jun 20, 2024 · 28278be · 28278be
1 parent c8bb4ba
commit 28278be
Show file tree

Hide file tree

Showing 17 changed files with 196 additions and 118 deletions.
diff --git a/packages/commerce/components/add-to-cart-widget.tsx b/packages/commerce/components/add-to-cart-widget.tsx
@@ -66,8 +66,9 @@ const AddToCartWidget: React.FC<{
     )
   }
 
-  const inc = () => {
+  const inc = (event: React.MouseEvent<HTMLElement>) => {
     item.increment()
+    event.stopPropagation() // in case we're part of a larger selection UI
     sendGAEvent('add_to_cart', {
       items: [{
         item_id: item.sku,
@@ -91,8 +92,9 @@ const AddToCartWidget: React.FC<{
     })
   }
 
-  const dec = () => {
+  const dec = (event: React.MouseEvent<HTMLElement>) => {
     item.decrement()
+    event.stopPropagation() // in case we're part of a larger selection UI
     sendGAEvent('remove_from_cart', {
       items: [{
         item_id: item.sku,

diff --git a/packages/commerce/components/cart/cart-accordian.tsx b/packages/commerce/components/cart/cart-accordian.tsx
diff --git a/packages/commerce/components/cart/cart-panel/index.tsx b/packages/commerce/components/cart/cart-panel/index.tsx
@@ -1,17 +1,17 @@
 'use client'
-import React, { Suspense, type PropsWithChildren } from 'react'
+import React, { useLayoutEffect, type PropsWithChildren } from 'react'
+import { reaction } from 'mobx'
 import { observer } from 'mobx-react-lite'
 
 import { Button, ScrollArea } from '@hanzo/ui/primitives'
 import { cn } from '@hanzo/ui/util'
 
+import type { LineItem } from '../../../types'
 import { useCommerce } from '../../../context'
-import { formatCurrencyValue } from '../../../util'
 import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
 
 import CartLineItem from './cart-line-item'
-import PromoCode from './promo-code'
-import type { LineItem } from '../../../types'
+import TotalArea from './total-area'
 
 const CartPanel: React.FC<PropsWithChildren & {
     /** fix size and scroll after 'scrollAfter items in teh cart. */
@@ -48,6 +48,25 @@ const CartPanel: React.FC<PropsWithChildren & {
 }) => {
 
   const cmmc = useCommerce()
+
+  useLayoutEffect(() => {
+    if (!cmmc) {
+      return
+    }
+    if (!cmmc.cartEmpty && !cmmc.currentItem) {
+      cmmc.setCurrentItem(cmmc.cartItems[0].sku)  
+    }
+      // return mobx disposer
+    return reaction(() => (
+      cmmc.cartItems.length  
+    ), 
+    (itemCount) => {
+      if (itemCount > 0) {
+        cmmc.setCurrentItem(cmmc.cartItems[0].sku)  
+      }
+    })
+  }, [])
+
   if (!cmmc) {
     return <div />
   }
@@ -97,45 +116,19 @@ const CartPanel: React.FC<PropsWithChildren & {
       />
     ))}
     </>)}
-    <div className={totalClx}> 
-    {showPromoCode && (
-      <Suspense>
-        <PromoCode/>
-      </Suspense>
-    )}
-    {(showShipping || showPromoCode) && (
-      <div className={'flex flex-col gap-0.5 pb-1.5 text-sm ' + (!showPromoCode ? 'border-t pt-1.5' : '')} >
-        <p className='flex justify-between'>
-          <span className='text-muted-1'>Subtotal</span>
-          <span className='font-semibold'>{cmmc.cartTotal === 0 ? '0' : formatCurrencyValue(cmmc.cartTotal)}</span>
-        </p>
-        {cmmc.promoAppliedCartTotal !== cmmc.cartTotal && (
-          <p className='flex justify-between'>
-            <span className='text-muted-1'>Promo Discount</span>
-            <span className='font-semibold'>-{formatCurrencyValue(cmmc.cartTotal - cmmc.promoAppliedCartTotal)}</span>
-          </p>
-        )}
-        {showShipping && (
-          <p className='flex justify-between'>
-            <span className='text-muted-1'>Shipping</span>
-            <span className='font-semibold'>Free Global Shipping</span>
-          </p>
-        )}
-      </div>
-    )}
-    <p className={cn('border-t py-2 flex justify-between')}>
-      TOTAL
-      <span className='font-semibold'>{formatCurrencyValue(showPromoCode ? cmmc.promoAppliedCartTotal : cmmc.cartTotal)}</span>
-    </p>
-    </div>
+    <TotalArea clx={totalClx} showPromoCode={showPromoCode} showShipping={showShipping}/>
   </>))
 
-  const scrolling = (): boolean => (cmmc.cartItems.length > scrollAfter)
+  const scrolling = (cmmc.cartItems.length > scrollAfter)
 
   return (
-    <div className={cn('border p-4 rounded-lg flex flex-col', className, scrolling() ? scrollHeightClx : 'h-auto')}>
+    <div className={cn(
+      'border p-4 rounded-lg flex flex-col', 
+      className, 
+      scrolling ? scrollHeightClx : 'h-auto'
+    )}>
       {children}
-      {scrolling() ? (
+      {scrolling ? (
         <ScrollArea className={cn('mt-2 w-full shrink py-0', listClx)}>
           <MainStuff />
         </ScrollArea>

diff --git a/packages/commerce/components/cart/cart-panel/total-area.tsx b/packages/commerce/components/cart/cart-panel/total-area.tsx
@@ -0,0 +1,60 @@
+'use client'
+import React, { Suspense } from 'react'
+import { observer } from 'mobx-react-lite'
+
+import { cn } from '@hanzo/ui/util'
+
+import { formatCurrencyValue } from '../../../util'
+import PromoCode from './promo-code'
+import { useCommerce } from '../../../context'
+
+const TotalArea: React.FC<{
+  showPromoCode?: boolean
+  showShipping?: boolean
+  clx?: string
+}> = observer(({
+  showPromoCode=false,
+  showShipping=false,
+  clx
+}) => {
+
+  const cmmc = useCommerce()
+
+  return (
+    <div className={clx}> 
+    {showPromoCode && (
+      <Suspense>
+        <PromoCode/>
+      </Suspense>
+    )}
+    {(showShipping || showPromoCode) && (
+      <div className={'flex flex-col gap-0.5 pb-1.5 text-sm ' + (!showPromoCode ? 'border-t pt-1.5' : '')} >
+        <p className='flex justify-between'>
+          <span className='text-muted-1'>Subtotal</span>
+          <span className='font-semibold'>{cmmc.cartTotal === 0 ? '0' : formatCurrencyValue(cmmc.cartTotal)}</span>
+        </p>
+        {cmmc.promoAppliedCartTotal !== cmmc.cartTotal && (
+          <p className='flex justify-between'>
+            <span className='text-muted-1'>Promo Discount</span>
+            <span className='font-semibold'>-{formatCurrencyValue(cmmc.cartTotal - cmmc.promoAppliedCartTotal)}</span>
+          </p>
+        )}
+        {showShipping && (
+          <p className='flex justify-between'>
+            <span className='text-muted-1'>Shipping</span>
+            <span className='font-semibold'>Free Global Shipping</span>
+          </p>
+        )}
+      </div>
+    )}
+      <p className={cn('border-t py-2 flex justify-between')}>
+        TOTAL
+        <span className='font-semibold'>
+          {formatCurrencyValue(showPromoCode ? cmmc.promoAppliedCartTotal : cmmc.cartTotal)}
+        </span>
+      </p>
+    </div>
+  )
+})
+
+export default TotalArea
diff --git a/packages/commerce/components/index.ts b/packages/commerce/components/index.ts
@@ -1,7 +1,6 @@
 export { default as AddToCartWidget } from './add-to-cart-widget'
 export { default as CarouselBuyCard } from './buy/carousel-buy-card'
 
-export { default as CartAccordian } from './cart/cart-accordian'
 export { default as CartPanel } from './cart/cart-panel'
 
 export { default as Icons } from './Icons'

diff --git a/packages/commerce/package.json b/packages/commerce/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/commerce",
-  "version": "7.1.20",
+  "version": "7.1.34",
   "description": "e-commerce framework.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -37,7 +37,7 @@
   },
   "peerDependencies": {
     "@hanzo/auth": "^2.4.10",
-    "@hanzo/ui": "^3.8.21",
+    "@hanzo/ui": "^3.8.31",
     "@hookform/resolvers": "^3.3.4",
     "@radix-ui/react-radio-group": "^1.1.3",
     "firebase": "^10.8.0",

diff --git a/packages/ui/blocks/components/image-block.tsx b/packages/ui/blocks/components/image-block.tsx
@@ -75,6 +75,7 @@ const ImageBlockComponent: React.FC<BlockComponentProps & {
         </div>
       )
     }
+      // TODO use constraint
     else if (!specified('mobile-no-scale')) {
       if (props?.style?.width === 'auto' && typeof props.style.height === 'number' ) {
         props.style.height = props.style.height *.75 

diff --git a/packages/ui/blocks/components/video-block.tsx b/packages/ui/blocks/components/video-block.tsx
@@ -51,7 +51,7 @@ const VideoBlockComponent: React.FC<BlockComponentProps & {
   }
 
   const b = block as VideoBlock
-  const ar = asNum(b.dim.md.w) / asNum(b.dim.md.h)
+  const ar = b.dim.md.w / b.dim.md.h
   if (agent === 'phone') {
     if (b.sizing?.mobile?.vw) {
       // serverside, or at least while the video is loading,

diff --git a/packages/ui/blocks/def/card-block.ts b/packages/ui/blocks/def/card-block.ts
@@ -14,7 +14,7 @@ interface CardBlock extends Block {
   byline?: string
   icon?: Icon // for title area
   iconAfter?: boolean
-  media?: ImageBlock | VideoBlock
+  media?: ImageBlock | VideoBlock // TODO: Media Stack
   content?: React.ReactNode
   cta?: CTABlock
 }

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "3.8.24",
+  "version": "3.8.31",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

diff --git a/packages/ui/primitives/accordion.tsx b/packages/ui/primitives/accordion.tsx
@@ -22,14 +22,15 @@ const AccordionItem = React.forwardRef<
 AccordionItem.displayName = "AccordionItem"
 
 type AccordionTriggerProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & {
-  showChevron?: boolean;
+  showChevron?: boolean
+  headerClx?: string
 }
 
 const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
   AccordionTriggerProps
->(({ showChevron, className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
+>(({ showChevron, headerClx, className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className={cn('flex', headerClx)}>
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(

diff --git a/packages/ui/primitives/button.tsx b/packages/ui/primitives/button.tsx
@@ -12,6 +12,7 @@ const variant = {
   ghost: "text-foreground sm:hover:bg-level-1 sm:hover:text-accent whitespace-nowrap font-sans ",
   link: "text-foreground sm:hover:text-muted-1 font-sans ",
   linkFG: "text-foreground sm:hover:text-muted-1 font-sans ", // marker to style nav as regular link
+  linkMuted: "text-muted-1 sm:hover:text-foreground font-sans ",
 }
 
 const size = {

diff --git a/packages/ui/primitives/image.tsx b/packages/ui/primitives/image.tsx
@@ -67,7 +67,6 @@ const Image: React.FC<{
   return (fullWidth) ? (
     <div className='relative flex flex-col items-center justify-center w-full'>
       <NextImage 
-        data-vaul-no-drag 
         src={src} 
         alt={alt} 
         {...toSpread} 
@@ -80,7 +79,6 @@ const Image: React.FC<{
     <NextImage 
       src={src} 
       alt={alt} 
-      data-vaul-no-drag 
       {...toSpread} 
       priority={preload} 
       loading={preload ? 'eager' : 'lazy'} 

diff --git a/packages/ui/primitives/step-indicator.tsx b/packages/ui/primitives/step-indicator.tsx
@@ -43,8 +43,8 @@ const StepIndicator: React.FC<{
             style={{width: `${dotSizeRem}rem`, height: `${dotSizeRem}rem`}} 
             className={cn(
               'shrink-0 rounded-full border-[1.5px]', 
-              currentStep === index ? (muted ? 'bg-muted-3 border-muted' : 'bg-level-3 border-foreground') : '',
-              currentStep > index || currentStep === steps.length - 1 ? (muted ? 'bg-muted border-muted' : 'bg-foreground border-foreground') : ''
+              currentStep >= index ? (muted ? 'bg-muted border-muted' : 'bg-foreground border-foreground') : '',
+              //currentStep > index || currentStep === steps.length - 1 ? (muted ? 'bg-muted border-muted' : 'bg-foreground border-foreground') : ''
             )} 
           />
         </>))}

diff --git a/packages/ui/primitives/video-player.tsx b/packages/ui/primitives/video-player.tsx
@@ -12,7 +12,7 @@ const VideoPlayer = React.forwardRef<HTMLVideoElement, VideoProps>(
 }, ref) => {
 
   return (
-    <video ref={ref} {...rest}  data-vaul-no-drag >
+    <video ref={ref} {...rest} >
     {sources.map((source, index) => (  
       <source key={index} src={source} />
     ))} 

diff --git a/packages/ui/types/media-stack-def.ts b/packages/ui/types/media-stack-def.ts
@@ -18,6 +18,11 @@ interface MediaStackDef {
   video?: VideoDef
   animation?: AnimationDef
   mediaTransform?: MediaTransform
+    /** prefered order of precedence.  
+     * If an type is missing, it will not be used.
+     * default (inMediaStack component): ['a', 'v', 'i']
+     * */ 
+  order?: ('a' | 'v' | 'i')[]  
 }
 
 export type {