@hanzo/commerce 7.1.20 → 7.1.21
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.
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
'use client'
|
|
2
|
-
import React, {
|
|
2
|
+
import React, { useLayoutEffect, type PropsWithChildren } from 'react'
|
|
3
3
|
import { observer } from 'mobx-react-lite'
|
|
4
4
|
|
|
5
5
|
import { Button, ScrollArea } from '@hanzo/ui/primitives'
|
|
6
6
|
import { cn } from '@hanzo/ui/util'
|
|
7
7
|
|
|
8
8
|
import { useCommerce } from '../../../context'
|
|
9
|
-
import { formatCurrencyValue } from '../../../util'
|
|
10
9
|
import { sendFBEvent, sendGAEvent } from '../../../util/analytics'
|
|
11
10
|
|
|
12
11
|
import CartLineItem from './cart-line-item'
|
|
13
|
-
import
|
|
12
|
+
import TotalArea from './total-area'
|
|
13
|
+
|
|
14
14
|
import type { LineItem } from '../../../types'
|
|
15
|
+
import { reaction } from 'mobx'
|
|
15
16
|
|
|
16
17
|
const CartPanel: React.FC<PropsWithChildren & {
|
|
17
18
|
/** fix size and scroll after 'scrollAfter items in teh cart. */
|
|
@@ -48,6 +49,25 @@ const CartPanel: React.FC<PropsWithChildren & {
|
|
|
48
49
|
}) => {
|
|
49
50
|
|
|
50
51
|
const cmmc = useCommerce()
|
|
52
|
+
|
|
53
|
+
useLayoutEffect(() => {
|
|
54
|
+
if (!cmmc) {
|
|
55
|
+
return
|
|
56
|
+
}
|
|
57
|
+
if (!cmmc.cartEmpty && !cmmc.currentItem) {
|
|
58
|
+
cmmc.setCurrentItem(cmmc.cartItems[0].sku)
|
|
59
|
+
}
|
|
60
|
+
// return mobx disposer
|
|
61
|
+
return reaction(() => (
|
|
62
|
+
cmmc.cartItems.length
|
|
63
|
+
),
|
|
64
|
+
(itemCount) => {
|
|
65
|
+
if (itemCount > 0) {
|
|
66
|
+
cmmc.setCurrentItem(cmmc.cartItems[0].sku)
|
|
67
|
+
}
|
|
68
|
+
})
|
|
69
|
+
}, [])
|
|
70
|
+
|
|
51
71
|
if (!cmmc) {
|
|
52
72
|
return <div />
|
|
53
73
|
}
|
|
@@ -97,45 +117,19 @@ const CartPanel: React.FC<PropsWithChildren & {
|
|
|
97
117
|
/>
|
|
98
118
|
))}
|
|
99
119
|
</>)}
|
|
100
|
-
<
|
|
101
|
-
{showPromoCode && (
|
|
102
|
-
<Suspense>
|
|
103
|
-
<PromoCode/>
|
|
104
|
-
</Suspense>
|
|
105
|
-
)}
|
|
106
|
-
{(showShipping || showPromoCode) && (
|
|
107
|
-
<div className={'flex flex-col gap-0.5 pb-1.5 text-sm ' + (!showPromoCode ? 'border-t pt-1.5' : '')} >
|
|
108
|
-
<p className='flex justify-between'>
|
|
109
|
-
<span className='text-muted-1'>Subtotal</span>
|
|
110
|
-
<span className='font-semibold'>{cmmc.cartTotal === 0 ? '0' : formatCurrencyValue(cmmc.cartTotal)}</span>
|
|
111
|
-
</p>
|
|
112
|
-
{cmmc.promoAppliedCartTotal !== cmmc.cartTotal && (
|
|
113
|
-
<p className='flex justify-between'>
|
|
114
|
-
<span className='text-muted-1'>Promo Discount</span>
|
|
115
|
-
<span className='font-semibold'>-{formatCurrencyValue(cmmc.cartTotal - cmmc.promoAppliedCartTotal)}</span>
|
|
116
|
-
</p>
|
|
117
|
-
)}
|
|
118
|
-
{showShipping && (
|
|
119
|
-
<p className='flex justify-between'>
|
|
120
|
-
<span className='text-muted-1'>Shipping</span>
|
|
121
|
-
<span className='font-semibold'>Free Global Shipping</span>
|
|
122
|
-
</p>
|
|
123
|
-
)}
|
|
124
|
-
</div>
|
|
125
|
-
)}
|
|
126
|
-
<p className={cn('border-t py-2 flex justify-between')}>
|
|
127
|
-
TOTAL
|
|
128
|
-
<span className='font-semibold'>{formatCurrencyValue(showPromoCode ? cmmc.promoAppliedCartTotal : cmmc.cartTotal)}</span>
|
|
129
|
-
</p>
|
|
130
|
-
</div>
|
|
120
|
+
<TotalArea clx={totalClx} showPromoCode={showPromoCode} showShipping={showShipping}/>
|
|
131
121
|
</>))
|
|
132
122
|
|
|
133
|
-
const scrolling = (
|
|
123
|
+
const scrolling = (cmmc.cartItems.length > scrollAfter)
|
|
134
124
|
|
|
135
125
|
return (
|
|
136
|
-
<div className={cn(
|
|
126
|
+
<div className={cn(
|
|
127
|
+
'border p-4 rounded-lg flex flex-col',
|
|
128
|
+
className,
|
|
129
|
+
scrolling ? scrollHeightClx : 'h-auto'
|
|
130
|
+
)}>
|
|
137
131
|
{children}
|
|
138
|
-
{scrolling
|
|
132
|
+
{scrolling ? (
|
|
139
133
|
<ScrollArea className={cn('mt-2 w-full shrink py-0', listClx)}>
|
|
140
134
|
<MainStuff />
|
|
141
135
|
</ScrollArea>
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
'use client'
|
|
2
|
+
import React, { Suspense } from 'react'
|
|
3
|
+
import { observer } from 'mobx-react-lite'
|
|
4
|
+
|
|
5
|
+
import { cn } from '@hanzo/ui/util'
|
|
6
|
+
|
|
7
|
+
import { formatCurrencyValue } from '../../../util'
|
|
8
|
+
import PromoCode from './promo-code'
|
|
9
|
+
import { useCommerce } from '../../../context'
|
|
10
|
+
|
|
11
|
+
const TotalArea: React.FC<{
|
|
12
|
+
showPromoCode?: boolean
|
|
13
|
+
showShipping?: boolean
|
|
14
|
+
clx?: string
|
|
15
|
+
}> = observer(({
|
|
16
|
+
showPromoCode=false,
|
|
17
|
+
showShipping=false,
|
|
18
|
+
clx
|
|
19
|
+
}) => {
|
|
20
|
+
|
|
21
|
+
const cmmc = useCommerce()
|
|
22
|
+
|
|
23
|
+
return (
|
|
24
|
+
<div className={clx}>
|
|
25
|
+
{showPromoCode && (
|
|
26
|
+
<Suspense>
|
|
27
|
+
<PromoCode/>
|
|
28
|
+
</Suspense>
|
|
29
|
+
)}
|
|
30
|
+
{(showShipping || showPromoCode) && (
|
|
31
|
+
<div className={'flex flex-col gap-0.5 pb-1.5 text-sm ' + (!showPromoCode ? 'border-t pt-1.5' : '')} >
|
|
32
|
+
<p className='flex justify-between'>
|
|
33
|
+
<span className='text-muted-1'>Subtotal</span>
|
|
34
|
+
<span className='font-semibold'>{cmmc.cartTotal === 0 ? '0' : formatCurrencyValue(cmmc.cartTotal)}</span>
|
|
35
|
+
</p>
|
|
36
|
+
{cmmc.promoAppliedCartTotal !== cmmc.cartTotal && (
|
|
37
|
+
<p className='flex justify-between'>
|
|
38
|
+
<span className='text-muted-1'>Promo Discount</span>
|
|
39
|
+
<span className='font-semibold'>-{formatCurrencyValue(cmmc.cartTotal - cmmc.promoAppliedCartTotal)}</span>
|
|
40
|
+
</p>
|
|
41
|
+
)}
|
|
42
|
+
{showShipping && (
|
|
43
|
+
<p className='flex justify-between'>
|
|
44
|
+
<span className='text-muted-1'>Shipping</span>
|
|
45
|
+
<span className='font-semibold'>Free Global Shipping</span>
|
|
46
|
+
</p>
|
|
47
|
+
)}
|
|
48
|
+
</div>
|
|
49
|
+
)}
|
|
50
|
+
<p className={cn('border-t py-2 flex justify-between')}>
|
|
51
|
+
TOTAL
|
|
52
|
+
<span className='font-semibold'>
|
|
53
|
+
{formatCurrencyValue(showPromoCode ? cmmc.promoAppliedCartTotal : cmmc.cartTotal)}
|
|
54
|
+
</span>
|
|
55
|
+
</p>
|
|
56
|
+
</div>
|
|
57
|
+
)
|
|
58
|
+
})
|
|
59
|
+
|
|
60
|
+
export default TotalArea
|