added products carousel to cart panel

packages/commerce/components/cart-panel/index.tsx

@@ -10,18 +10,21 @@ import { formatPrice } from '../../util'
 
 import CartLineItem from './cart-line-item'
 import { sendFBEvent, sendGAEvent } from '../../util/analytics'
+import ProductsCarousel from './products-carousel'
 
 const CartPanel: React.FC<PropsWithChildren & {
   className?: string
   isMobile?: boolean,
   noCheckout?: boolean
+  showProductsCarousel?: boolean
   onCheckoutOpen?: () => void
 }> = observer(({
     /** Children is the heading area. */
   children,
   className='',
   isMobile=false,
   noCheckout=false,
+  showProductsCarousel=false,
   onCheckoutOpen,
 }) => {
   /* TODO: onCheckoutOpen is a hackish way fix a bug with multiple dialog opened at the same time.
@@ -60,6 +63,7 @@ const CartPanel: React.FC<PropsWithChildren & {
   return (
     <div className={cn('border p-4 rounded-lg', className)}>
       {children}
+      {showProductsCarousel && <ProductsCarousel items={cmmc.cartItems}/>}
       <div className='mt-2 w-full'>
         {cmmc.cartEmpty ? (
           <p className='text-center mt-4'>No items in cart</p>

packages/commerce/components/cart-panel/products-carousel.tsx

@@ -0,0 +1,54 @@
+import Spline from '@splinetool/react-spline'
+import Image from 'next/image'
+
+import type { LineItem } from '../../types'
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext
+} from '@hanzo/ui/primitives'
+
+const ProductsCarousel: React.FC<{
+  items: LineItem[]
+}> = ({ 
+  items,
+}) => {
+
+  return (
+    <Carousel
+      options={{
+        loop: true
+      }}
+      className='w-full max-w-sm mx-auto px-2'
+    >
+      <CarouselContent>
+        {items.map(({title, img, video}, index) => (
+          <CarouselItem key={index}>
+            <div className='flex aspect-square items-center justify-center p-6'>
+              {video ? (
+                <Spline
+                  scene={video}
+                  className='!aspect-[12/10] pointer-events-none !w-auto !h-auto'
+                />
+              ) : (
+                <Image
+                  src={img ?? ''}
+                  alt={title + ' image'}
+                  height={250}
+                  width={250} 
+                  className='m-auto'
+                />
+              )}
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  )
+}
+
+export default ProductsCarousel

packages/commerce/components/checkout-panel/index.tsx

@@ -86,7 +86,11 @@ const CheckoutPanel: React.FC<{
               <div className='h-full w-full max-w-[750px] relative flex flex-col items-center justify-start px-6 pt-12 pb-0 md:pb-9'>
                 <CloseButton onClose={onClose} className='absolute top-3 left-3 w-auto h-auto rounded-full bg-level-1 hover:bg-level-2 hover:border-muted p-2' />
                 <AuthWidget hideLogin className='flex md:hidden absolute top-3 right-3'/>
-                <CartPanel noCheckout className='border border-muted-2 mt-10 w-full max-w-[550px] hidden md:flex'/>
+                <CartPanel
+                  className='border-none mt-10 w-full max-w-[550px] hidden md:flex flex-col'
+                  noCheckout
+                  showProductsCarousel
+                />
 
                 <Accordion type="single" collapsible className='flex items-center justify-center py-2 w-full md:hidden'>
                   <AccordionItem value="cart" className='w-full border-b-0'>

packages/commerce/package.json

@@ -31,6 +31,8 @@
     "./types": "./types/index.ts"
   },
   "dependencies": {
+    "@splinetool/react-spline": "^2.2.6",
+    "@splinetool/runtime": "^1.0.75",
     "ethers": "^6.11.1",
     "next-usequerystate": "^1.17.0",
     "react-square-web-payments-sdk": "^3.2.1",

packages/commerce/service/impls/standalone/actual-line-item.ts

@@ -30,6 +30,7 @@ class ActualLineItem
   desc?: string
   price: number
   img?: string 
+  video?: string 
   timeAdded: number = 0 // timeAdded of being added to cart
 
   constructor(prod: Product, snap?: ActualLineItemSnapshot) {
@@ -41,6 +42,7 @@ class ActualLineItem
     this.desc = prod.desc
     this.price = prod.price
     this.img = prod.img
+    this.video = prod.video
 
     if (snap) {
       this.qu = snap.quantity

packages/commerce/types/product.ts

@@ -8,6 +8,7 @@ interface Product {
   desc?: string
   price: number
   img?: string  // if undefined: (category's img exists) ? (use it) : (use generic placeholder)
+  video?: string
 }
 
 export {