@hanzo/commerce 4.3.0 → 4.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { type LucideProps } from 'lucide-react'
|
|
3
|
+
|
|
4
|
+
const BagIcon: React.FC<LucideProps> = (props: LucideProps) => (
|
|
5
|
+
<svg fill="currentColor" viewBox='0 0 20 23' {...props}>
|
|
6
|
+
<path fillRule="evenodd" d="M5 5a5 5 0 0 1 10 0v1h-2V5a3 3 0 1 0-6 0v1H5V5Zm0 1v4h2V6h6v4h2V6h3.5a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1h-17a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1H5Z" clipRule="evenodd"/>
|
|
7
|
+
</svg>
|
|
8
|
+
)
|
|
9
|
+
|
|
10
|
+
export default BagIcon
|
|
@@ -3,7 +3,15 @@
|
|
|
3
3
|
import { useState } from 'react'
|
|
4
4
|
import { observer } from 'mobx-react-lite'
|
|
5
5
|
|
|
6
|
-
import {
|
|
6
|
+
import {
|
|
7
|
+
Accordion,
|
|
8
|
+
AccordionContent,
|
|
9
|
+
AccordionItem,
|
|
10
|
+
AccordionTrigger,
|
|
11
|
+
Dialog,
|
|
12
|
+
DialogPortal,
|
|
13
|
+
Toaster
|
|
14
|
+
} from '@hanzo/ui/primitives'
|
|
7
15
|
import { cn } from '@hanzo/ui/util'
|
|
8
16
|
import { useAuth } from '@hanzo/auth/service'
|
|
9
17
|
import { LoginComponent, AuthWidget } from '@hanzo/auth/components'
|
|
@@ -14,6 +22,8 @@ import CartPanel from '../cart-panel'
|
|
|
14
22
|
import Payment from './payment'
|
|
15
23
|
import CloseButton from './close-button'
|
|
16
24
|
import StepIndicator from './step-indicator'
|
|
25
|
+
import BagIcon from './icons/bag-icon'
|
|
26
|
+
import { formatPrice, useCommerce } from '../..'
|
|
17
27
|
|
|
18
28
|
const CheckoutPanel: React.FC<{
|
|
19
29
|
open: boolean
|
|
@@ -24,6 +34,7 @@ const CheckoutPanel: React.FC<{
|
|
|
24
34
|
}) => {
|
|
25
35
|
|
|
26
36
|
const auth = useAuth()
|
|
37
|
+
const cmmc = useCommerce()
|
|
27
38
|
|
|
28
39
|
const [step, setStep] = useState<number>(1)
|
|
29
40
|
const [orderId, setOrderId] = useState<string>()
|
|
@@ -75,10 +86,24 @@ const CheckoutPanel: React.FC<{
|
|
|
75
86
|
>
|
|
76
87
|
<div id='GRID' className='grid grid-cols-1 md:grid-cols-2 justify-center h-full overflow-y-auto md:overflow-y-hidden'>
|
|
77
88
|
<div className='bg-background flex flex-row items-start justify-end'>
|
|
78
|
-
<div className='h-full w-full max-w-[750px] relative flex flex-col items-center justify-start px-6
|
|
79
|
-
<CloseButton onClose={onClose} className='absolute top-
|
|
80
|
-
<AuthWidget hideLogin className='flex md:hidden absolute top-
|
|
81
|
-
<CartPanel noCheckout className='
|
|
89
|
+
<div className='h-full w-full max-w-[750px] relative flex flex-col items-center justify-start px-6 pt-10 pb-0 md:pb-9'>
|
|
90
|
+
<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' />
|
|
91
|
+
<AuthWidget hideLogin className='flex md:hidden absolute top-3 right-3'/>
|
|
92
|
+
<CartPanel noCheckout className='border border-muted-2 mt-10 w-full max-w-[550px] hidden md:flex'/>
|
|
93
|
+
|
|
94
|
+
<Accordion type="single" collapsible className='flex items-center justify-center py-2 w-full md:hidden'>
|
|
95
|
+
<AccordionItem value="cart" className='w-full border-b-0'>
|
|
96
|
+
<AccordionTrigger className='!no-underline'>
|
|
97
|
+
<div className='flex gap-4 items-center'>
|
|
98
|
+
<BagIcon className='w-4 h-4 sm:w-6 sm:h-6'/>
|
|
99
|
+
<h5 className='text-sm sm:text-xl truncate'>Order Summary {formatPrice(cmmc.cartTotal)}</h5>
|
|
100
|
+
</div>
|
|
101
|
+
</AccordionTrigger>
|
|
102
|
+
<AccordionContent>
|
|
103
|
+
<CartPanel noCheckout className='border-none w-full'/>
|
|
104
|
+
</AccordionContent>
|
|
105
|
+
</AccordionItem>
|
|
106
|
+
</Accordion>
|
|
82
107
|
</div>
|
|
83
108
|
</div>
|
|
84
109
|
<div className='bg-level-1 flex flex-row items-start justify-start'>
|