forked from crowetic/commerce
Add totals to cart
This commit is contained in:
parent
d94396baac
commit
c099b27cad
@ -4,17 +4,35 @@ import { UserNav } from '@components/core'
|
|||||||
import { Button } from '@components/ui'
|
import { Button } from '@components/ui'
|
||||||
import { ArrowLeft, Bag, Cross, Check } from '@components/icon'
|
import { ArrowLeft, Bag, Cross, Check } from '@components/icon'
|
||||||
import { useUI } from '@components/ui/context'
|
import { useUI } from '@components/ui/context'
|
||||||
|
import { useCommerce } from '@lib/bigcommerce'
|
||||||
import useCart from '@lib/bigcommerce/cart/use-cart'
|
import useCart from '@lib/bigcommerce/cart/use-cart'
|
||||||
import CartItem from '../CartItem'
|
import CartItem from '../CartItem'
|
||||||
import useOpenCheckout from '@lib/bigcommerce/cart/use-open-checkout'
|
import useOpenCheckout from '@lib/bigcommerce/cart/use-open-checkout'
|
||||||
|
import formatPrice from 'utils/format-price'
|
||||||
|
|
||||||
const CartSidebarView: FC = () => {
|
const CartSidebarView: FC = () => {
|
||||||
|
const { locale } = useCommerce()
|
||||||
const { data, isEmpty } = useCart()
|
const { data, isEmpty } = useCart()
|
||||||
const openCheckout = useOpenCheckout()
|
const openCheckout = useOpenCheckout()
|
||||||
const { closeSidebar } = useUI()
|
const { closeSidebar } = useUI()
|
||||||
const items = data?.line_items.physical_items ?? []
|
|
||||||
const handleClose = () => closeSidebar()
|
const handleClose = () => closeSidebar()
|
||||||
|
|
||||||
|
const items = data?.line_items.physical_items ?? []
|
||||||
|
const subTotal = data
|
||||||
|
? formatPrice({
|
||||||
|
amount: data.base_amount,
|
||||||
|
currencyCode: data.currency.code,
|
||||||
|
locale,
|
||||||
|
})
|
||||||
|
: 0
|
||||||
|
const total = data
|
||||||
|
? formatPrice({
|
||||||
|
amount: data.cart_amount,
|
||||||
|
currencyCode: data.currency.code,
|
||||||
|
locale,
|
||||||
|
})
|
||||||
|
: 0
|
||||||
|
|
||||||
console.log('CART', data, isEmpty)
|
console.log('CART', data, isEmpty)
|
||||||
|
|
||||||
// This should come from the API via hook I guess
|
// This should come from the API via hook I guess
|
||||||
@ -96,11 +114,11 @@ const CartSidebarView: FC = () => {
|
|||||||
<ul className="py-3">
|
<ul className="py-3">
|
||||||
<li className="flex justify-between py-1">
|
<li className="flex justify-between py-1">
|
||||||
<span>Subtotal</span>
|
<span>Subtotal</span>
|
||||||
<span>$100</span>
|
<span>{subTotal}</span>
|
||||||
</li>
|
</li>
|
||||||
<li className="flex justify-between py-1">
|
<li className="flex justify-between py-1">
|
||||||
<span>Taxes</span>
|
<span>Taxes</span>
|
||||||
<span>$9.99</span>
|
<span>Calculated at checkout</span>
|
||||||
</li>
|
</li>
|
||||||
<li className="flex justify-between py-1">
|
<li className="flex justify-between py-1">
|
||||||
<span>Estimated Shipping</span>
|
<span>Estimated Shipping</span>
|
||||||
@ -109,7 +127,7 @@ const CartSidebarView: FC = () => {
|
|||||||
</ul>
|
</ul>
|
||||||
<div className="flex justify-between border-t border-gray-300 py-3 font-bold mb-10">
|
<div className="flex justify-between border-t border-gray-300 py-3 font-bold mb-10">
|
||||||
<span>Total</span>
|
<span>Total</span>
|
||||||
<span>$1320.23</span>
|
<span>{total}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Button width="100%" onClick={() => openCheckout()}>
|
<Button width="100%" onClick={() => openCheckout()}>
|
||||||
|
@ -5,7 +5,6 @@ export default function useOpenCheckout() {
|
|||||||
|
|
||||||
return async function openCheckout() {
|
return async function openCheckout() {
|
||||||
window.open(data?.redirect_urls.checkout_url)
|
window.open(data?.redirect_urls.checkout_url)
|
||||||
console.log('URL1', data?.redirect_urls.checkout_url)
|
|
||||||
// Get new redirect urls
|
// Get new redirect urls
|
||||||
await mutate()
|
await mutate()
|
||||||
}
|
}
|
||||||
|
@ -1,19 +1,4 @@
|
|||||||
function formatPrice({
|
import formatPrice from './format-price'
|
||||||
amount,
|
|
||||||
currencyCode,
|
|
||||||
locale,
|
|
||||||
}: {
|
|
||||||
amount: number
|
|
||||||
currencyCode: string
|
|
||||||
locale: string
|
|
||||||
}) {
|
|
||||||
const formatCurrency = new Intl.NumberFormat(locale, {
|
|
||||||
style: 'currency',
|
|
||||||
currency: currencyCode,
|
|
||||||
})
|
|
||||||
|
|
||||||
return formatCurrency.format(amount)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function formatVariantPrice({
|
export default function formatVariantPrice({
|
||||||
listPrice,
|
listPrice,
|
||||||
|
16
utils/format-price.ts
Normal file
16
utils/format-price.ts
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
export default function formatPrice({
|
||||||
|
amount,
|
||||||
|
currencyCode,
|
||||||
|
locale,
|
||||||
|
}: {
|
||||||
|
amount: number
|
||||||
|
currencyCode: string
|
||||||
|
locale: string
|
||||||
|
}) {
|
||||||
|
const formatCurrency = new Intl.NumberFormat(locale, {
|
||||||
|
style: 'currency',
|
||||||
|
currency: currencyCode,
|
||||||
|
})
|
||||||
|
|
||||||
|
return formatCurrency.format(amount)
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user