-
Notifications
You must be signed in to change notification settings - Fork 0
/
cart-summary.tsx
74 lines (67 loc) · 2.46 KB
/
cart-summary.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
'use client'
import { useState } from 'react'
import { Loader2 } from 'lucide-react'
import { formatCurrencyString, useShoppingCart } from 'use-shopping-cart'
import { Button } from '../components/ui/button'
export function CartSummary() {
const {
formattedTotalPrice,
totalPrice,
cartDetails,
cartCount,
redirectToCheckout,
} = useShoppingCart()
const [isLoading, setIsLoading] = useState(false)
const isDisabled = isLoading || cartCount! === 0
const shippingAmount = cartCount! > 0 ? 500 : 0
const totalAmount = totalPrice! + shippingAmount
async function onCheckout() {
setIsLoading(true)
const response = await fetch('/api/checkout', {
method: 'POST',
body: JSON.stringify(cartDetails),
})
const data = await response.json()
const result = await redirectToCheckout(data.id)
if (result?.error) {
console.error(result)
}
setIsLoading(false)
}
return (
<section
aria-labelledby="summary-heading"
className="mt-16 rounded-lg border-2 border-gray-200 bg-gray-50 px-4 py-6 shadow-md dark:border-gray-900 dark:bg-black sm:p-6 lg:col-span-5 lg:mt-0 lg:p-8"
>
<h2 id="summary-heading" className="text-lg font-medium">
Resumo de Pedidos
</h2>
<dl className="mt-6 space-y-4">
<div className="flex items-center justify-between">
<dt className="text-sm">Subtotal</dt>
<dd className="text-sm font-medium">{formattedTotalPrice}</dd>
</div>
<div className="flex items-center justify-between border-t border-gray-200 pt-4 dark:border-gray-600">
<dt className="flex items-center text-sm">
<span>Valor do Frete</span>
</dt>
<dd className="text-sm font-medium">
{formatCurrencyString({ value: shippingAmount, currency: 'BRL' })}
</dd>
</div>
<div className="flex items-center justify-between border-t border-gray-200 pt-4 dark:border-gray-600">
<dt className="text-base font-medium">Total do Pedido</dt>
<dd className="text-base font-medium">
{formatCurrencyString({ value: totalAmount, currency: 'BRL' })}
</dd>
</div>
</dl>
<div className="mt-6">
<Button onClick={onCheckout} className="w-full" disabled={isDisabled}>
{isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
{isLoading ? 'Carregando...' : 'Checkout'}
</Button>
</div>
</section>
)
}