@hanzo/commerce 7.1.20 → 7.1.22
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,27 @@ 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
|
+
console.log("REACTION, COUNT: ", itemCount)
|
|
67
|
+
console.log("REACTION, CURRENT FIRST SKU: ", cmmc.cartItems[0].sku)
|
|
68
|
+
cmmc.setCurrentItem(cmmc.cartItems[0].sku)
|
|
69
|
+
}
|
|
70
|
+
})
|
|
71
|
+
}, [])
|
|
72
|
+
|
|
51
73
|
if (!cmmc) {
|
|
52
74
|
return <div />
|
|
53
75
|
}
|
|
@@ -97,45 +119,19 @@ const CartPanel: React.FC<PropsWithChildren & {
|
|
|
97
119
|
/>
|
|
98
120
|
))}
|
|
99
121
|
</>)}
|
|
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>
|
|
122
|
+
<TotalArea clx={totalClx} showPromoCode={showPromoCode} showShipping={showShipping}/>
|
|
131
123
|
</>))
|
|
132
124
|
|
|
133
|
-
const scrolling = (
|
|
125
|
+
const scrolling = (cmmc.cartItems.length > scrollAfter)
|
|
134
126
|
|
|
135
127
|
return (
|
|
136
|
-
<div className={cn(
|
|
128
|
+
<div className={cn(
|
|
129
|
+
'border p-4 rounded-lg flex flex-col',
|
|
130
|
+
className,
|
|
131
|
+
scrolling ? scrollHeightClx : 'h-auto'
|
|
132
|
+
)}>
|
|
137
133
|
{children}
|
|
138
|
-
{scrolling
|
|
134
|
+
{scrolling ? (
|
|
139
135
|
<ScrollArea className={cn('mt-2 w-full shrink py-0', listClx)}>
|
|
140
136
|
<MainStuff />
|
|
141
137
|
</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
|