-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
cmmc: mobile checkout condensed; desktop checkout has prod carousel; …
…minor cleanups (#73) cmmc: * Style fixes for checkout (as requested) * added products carousel to cart panel on desktop * added video and animation for Product, * fixed scroll for cart on checkout ui: * VideoDef * added comment to animation prop * [email protected], [email protected], cmmc:4.7.0; minor cleanups --------- Co-authored-by: artem ash <[email protected]>
- Loading branch information
1 parent
7da85b5
commit 7d8d161
Showing
25 changed files
with
279 additions
and
146 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
60 changes: 60 additions & 0 deletions
60
packages/commerce/components/cart-panel/products-carousel.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import Spline from '@splinetool/react-spline' | ||
|
|
||
| import { | ||
| Carousel, | ||
| CarouselContent, | ||
| CarouselItem, | ||
| CarouselPrevious, | ||
| CarouselNext | ||
| } from '@hanzo/ui/primitives' | ||
| import { | ||
| VideoBlockComponent, | ||
| ImageBlockComponent, | ||
| type ImageBlock, | ||
| type Block, | ||
| type VideoBlock | ||
| } from '@hanzo/ui/blocks' | ||
|
|
||
| import type { LineItem } from '../../types' | ||
|
|
||
| // Carousel content hierarchy: 3D > MP4 > Image | ||
| const ProductsCarousel: React.FC<{ | ||
| items: LineItem[] | ||
| }> = ({ | ||
| items, | ||
| }) => ( | ||
| <Carousel options={{ loop: true }} className='w-full max-w-sm mx-auto px-2' > | ||
| <CarouselContent> | ||
| {items.map(({title, img, video, animation}, index) => ( | ||
| <CarouselItem key={index}> | ||
| <div className='flex aspect-square items-center justify-center p-6'> | ||
| {animation ? ( | ||
| <Spline | ||
| scene={animation} | ||
| className='!aspect-[12/10] pointer-events-none !w-auto !h-auto' | ||
| /> | ||
| ) : video ? ( | ||
| <VideoBlockComponent | ||
| block={{blockType: 'video', ...video} satisfies VideoBlock as Block} | ||
| /> | ||
| ) : ( | ||
| <ImageBlockComponent | ||
| block={{ | ||
| blockType: 'image', | ||
| src: img ?? '', | ||
| alt: title + ' image', | ||
| dim: { w: 250, h: 250 } | ||
| } satisfies ImageBlock as Block} | ||
| className='m-auto' | ||
| /> | ||
| )} | ||
| </div> | ||
| </CarouselItem> | ||
| ))} | ||
| </CarouselContent> | ||
| <CarouselPrevious /> | ||
| <CarouselNext /> | ||
| </Carousel> | ||
| ) | ||
|
|
||
| export default ProductsCarousel |
39 changes: 39 additions & 0 deletions
39
packages/commerce/components/checkout-panel/cart-accordian.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| 'use client' | ||
| import React from 'react' | ||
| import { observer } from 'mobx-react-lite' | ||
|
|
||
| import { | ||
| Accordion, | ||
| AccordionContent, | ||
| AccordionItem, | ||
| AccordionTrigger, | ||
| } from '@hanzo/ui/primitives' | ||
|
|
||
| import { formatPrice, useCommerce } from '../..' | ||
|
|
||
| import CartPanel from '../cart-panel' | ||
| import BagIcon from './icons/bag-icon' | ||
|
|
||
| const CartAccordian: React.FC<{className?: string}> = observer(({ | ||
| className='' | ||
| }) => { | ||
|
|
||
| const cmmc = useCommerce() | ||
| return ( | ||
| <Accordion type="single" collapsible className={className}> | ||
| <AccordionItem value="cart" className='w-full border-b-0'> | ||
| <AccordionTrigger className='!no-underline py-1'> | ||
| <div className='flex gap-4 items-center'> | ||
| <BagIcon className='w-4 h-4 sm:w-6 sm:h-6'/> | ||
| <h5 className='text-sm sm:text-xl truncate'>Order Summary {formatPrice(cmmc.cartTotal)}</h5> | ||
| </div> | ||
| </AccordionTrigger> | ||
| <AccordionContent> | ||
| <CartPanel noCheckout className='border-none w-full'/> | ||
| </AccordionContent> | ||
| </AccordionItem> | ||
| </Accordion> | ||
| ) | ||
| }) | ||
|
|
||
| export default CartAccordian |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.