@hanzo/commerce 4.0.0 → 4.1.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.
|
@@ -25,6 +25,9 @@ const CartPanel: React.FC<PropsWithChildren & {
|
|
|
25
25
|
|
|
26
26
|
const [checkoutOpen, setCheckoutOpen] = useState<boolean>(false)
|
|
27
27
|
const cmmc = useCommerce()
|
|
28
|
+
if (!cmmc) {
|
|
29
|
+
return <div />
|
|
30
|
+
}
|
|
28
31
|
|
|
29
32
|
return (
|
|
30
33
|
<div className={cn('border p-4 rounded-lg', className)}>
|
|
@@ -42,16 +45,15 @@ const CartPanel: React.FC<PropsWithChildren & {
|
|
|
42
45
|
{!noCheckout && (<>
|
|
43
46
|
{!cmmc.cartEmpty && (
|
|
44
47
|
<Button
|
|
45
|
-
size='lg'
|
|
46
48
|
variant='secondary'
|
|
47
49
|
rounded='lg'
|
|
48
|
-
className='mt-12 mx-auto'
|
|
49
|
-
onClick={() => setCheckoutOpen(
|
|
50
|
+
className='mt-12 mx-auto w-full'
|
|
51
|
+
onClick={() => setCheckoutOpen(true)}
|
|
50
52
|
>
|
|
51
53
|
Checkout
|
|
52
54
|
</Button>
|
|
53
55
|
)}
|
|
54
|
-
{checkoutOpen && <CheckoutPanel
|
|
56
|
+
{checkoutOpen && <CheckoutPanel open={checkoutOpen} setOpen={setCheckoutOpen}/>}
|
|
55
57
|
</>)}
|
|
56
58
|
</div>
|
|
57
59
|
)
|
|
@@ -4,7 +4,7 @@ import { useState } from 'react'
|
|
|
4
4
|
import { ChevronLeft } from 'lucide-react'
|
|
5
5
|
import { observer } from 'mobx-react-lite'
|
|
6
6
|
|
|
7
|
-
import { Button, Main, Separator, Toaster } from '@hanzo/ui/primitives'
|
|
7
|
+
import { Button, Dialog, DialogPortal, Main, Separator, Toaster } from '@hanzo/ui/primitives'
|
|
8
8
|
import { cn } from '@hanzo/ui/util'
|
|
9
9
|
import { useAuth } from '@hanzo/auth/service'
|
|
10
10
|
import { LoginComponent, AuthWidget } from '@hanzo/auth/components'
|
|
@@ -15,9 +15,11 @@ import CartPanel from '../cart-panel'
|
|
|
15
15
|
import Payment from './payment'
|
|
16
16
|
|
|
17
17
|
const CheckoutPanel: React.FC<{
|
|
18
|
-
|
|
18
|
+
open: boolean
|
|
19
|
+
setOpen: (open: boolean) => void
|
|
19
20
|
}> = observer(({
|
|
20
|
-
|
|
21
|
+
open,
|
|
22
|
+
setOpen
|
|
21
23
|
}) => {
|
|
22
24
|
|
|
23
25
|
const auth = useAuth()
|
|
@@ -44,48 +46,57 @@ const CheckoutPanel: React.FC<{
|
|
|
44
46
|
const steps = [step1, step2, step3]
|
|
45
47
|
|
|
46
48
|
return (
|
|
47
|
-
<
|
|
48
|
-
<
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
setCurrentStep(0)
|
|
55
|
-
close()
|
|
56
|
-
}}
|
|
57
|
-
className='w-auto h-auto rounded-full bg-level-1 p-2 md:p-4'
|
|
49
|
+
<Dialog open={open}>
|
|
50
|
+
<DialogPortal>
|
|
51
|
+
<div
|
|
52
|
+
className={cn(
|
|
53
|
+
'fixed grid shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0',
|
|
54
|
+
'!max-w-none w-full h-full min-h-screen bg-background z-50'
|
|
55
|
+
)}
|
|
58
56
|
>
|
|
59
|
-
<
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
57
|
+
<Toaster/>
|
|
58
|
+
<div className='absolute flex w-full justify-between pt-2 md:pt-5 px-5'>
|
|
59
|
+
<Button
|
|
60
|
+
variant='ghost'
|
|
61
|
+
size='icon'
|
|
62
|
+
onClick={() => {
|
|
63
|
+
setCurrentStep(1)
|
|
64
|
+
setOpen(false)
|
|
65
|
+
}}
|
|
66
|
+
className='w-auto h-auto rounded-full bg-level-1 p-2 md:p-4'
|
|
67
|
+
>
|
|
68
|
+
<ChevronLeft className='w-5 h-5'/>
|
|
69
|
+
</Button>
|
|
70
|
+
<AuthWidget/>
|
|
71
|
+
</div>
|
|
63
72
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
73
|
+
<div className='grid grid-cols-1 md:grid-cols-2 justify-center h-full overflow-y-auto md:overflow-y-hidden'>
|
|
74
|
+
<div className='flex items-center justify-center py-2'>
|
|
75
|
+
<CartPanel noCheckout className='border-none mt-10 w-full lg:w-1/2'/>
|
|
76
|
+
</div>
|
|
68
77
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
78
|
+
<div className='bg-level-1'>
|
|
79
|
+
<Main className='flex flex-col h-full md:h-[calc(100vh-48px)] gap-8 sm:gap-14 max-w-[30rem] w-full mx-auto md:overflow-y-auto px-2 pb-6 md:mt-12'>
|
|
80
|
+
<div className='flex gap-2 mx-auto items-center text-xxs sm:text-base'>
|
|
81
|
+
<div className={cn('w-6 h-6 rounded-full border border-foreground flex flex-col justify-center items-center', currentStep === 1 ? 'bg-foreground text-muted-4' : '')}>
|
|
82
|
+
<div className='relative text-foreground top-4 h-0 whitespace-nowrap'>Payment</div>
|
|
83
|
+
</div>
|
|
84
|
+
<Separator className='w-[4rem] sm:w-[6rem]'/>
|
|
85
|
+
<div className={cn('w-6 h-6 rounded-full border border-foreground flex flex-col justify-center items-center', currentStep === 2 ? 'bg-foreground text-muted-4' : '')}>
|
|
86
|
+
<div className='relative text-foreground top-4 h-0 whitespace-nowrap'>Delivery</div>
|
|
87
|
+
</div>
|
|
88
|
+
<Separator className='w-[4rem] sm:w-[6rem]'/>
|
|
89
|
+
<div className={cn('w-6 h-6 rounded-full border border-foreground flex flex-col justify-center items-center', currentStep === 3 ? 'bg-foreground text-muted-4' : '')}>
|
|
90
|
+
<div className='relative text-foreground top-4 h-0 whitespace-nowrap'>Done!</div>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
{steps[currentStep - 1]}
|
|
94
|
+
</Main>
|
|
83
95
|
</div>
|
|
84
|
-
|
|
85
|
-
</Main>
|
|
96
|
+
</div>
|
|
86
97
|
</div>
|
|
87
|
-
</
|
|
88
|
-
</
|
|
98
|
+
</DialogPortal>
|
|
99
|
+
</Dialog>
|
|
89
100
|
)
|
|
90
101
|
})
|
|
91
102
|
|
|
@@ -124,9 +124,9 @@ const PayWithCard: React.FC<{
|
|
|
124
124
|
<GooglePay/>
|
|
125
125
|
<ApplePay/>
|
|
126
126
|
|
|
127
|
-
<
|
|
127
|
+
<div className='flex gap-2 whitespace-nowrap items-center my-6 sm:my-10 text-sm text-foreground/60'>
|
|
128
128
|
<hr className='bg-foreground/60 w-full border'/> or pay with card <hr className='bg-foreground/60 w-full border'/>
|
|
129
|
-
</
|
|
129
|
+
</div>
|
|
130
130
|
|
|
131
131
|
<ContactInfo form={contactForm}/>
|
|
132
132
|
|
|
@@ -4,14 +4,14 @@ import { type LucideProps } from 'lucide-react'
|
|
|
4
4
|
const Jcb: React.FC<LucideProps> = (props: LucideProps) => (
|
|
5
5
|
<svg viewBox="0 0 750 471" xmlns="http://www.w3.org/2000/svg" {...props}>
|
|
6
6
|
<linearGradient id="a" x1=".031608%" x2="99.974315%" y1="49.999857%" y2="49.999857%">
|
|
7
|
-
<stop offset="0"
|
|
8
|
-
<stop offset="1"
|
|
7
|
+
<stop offset="0" stopColor="#007b40"/>
|
|
8
|
+
<stop offset="1" stopColor="#55b330"/>
|
|
9
9
|
</linearGradient>
|
|
10
10
|
<linearGradient id="b" x1=".471693%" x2="99.986009%" y1="49.999826%" y2="49.999826%">
|
|
11
|
-
<stop offset="0"
|
|
11
|
+
<stop offset="0" stopColor="#1d2970"/><stop offset="1" stopColor="#006dba"/>
|
|
12
12
|
</linearGradient>
|
|
13
13
|
<linearGradient id="c" x1=".113881%" x2="99.986%" y1="50.000896%" y2="50.000896%">
|
|
14
|
-
<stop offset="0"
|
|
14
|
+
<stop offset="0" stopColor="#6e2b2f"/><stop offset="1" stopColor="#e30138"/>
|
|
15
15
|
</linearGradient>
|
|
16
16
|
<g fill="none">
|
|
17
17
|
<rect fill="#0e4c96" height="471" rx="40" width="750"/>
|