forked from crowetic/commerce
Allow cart view to remove the item
This commit is contained in:
parent
5e999920d2
commit
63e8f431d8
@ -1,6 +1,7 @@
|
|||||||
import { Trash } from '@components/icon'
|
import { Trash } from '@components/icon'
|
||||||
import { useCommerce } from '@lib/bigcommerce'
|
import { useCommerce } from '@lib/bigcommerce'
|
||||||
import useUpdateItem from '@lib/bigcommerce/cart/use-update-item'
|
import useUpdateItem from '@lib/bigcommerce/cart/use-update-item'
|
||||||
|
import useRemoveItem from '@lib/bigcommerce/cart/use-remove-item'
|
||||||
import { ChangeEvent, useEffect, useState } from 'react'
|
import { ChangeEvent, useEffect, useState } from 'react'
|
||||||
import formatVariantPrice from 'utils/format-item-price'
|
import formatVariantPrice from 'utils/format-item-price'
|
||||||
import styles from './CartItem.module.css'
|
import styles from './CartItem.module.css'
|
||||||
@ -14,6 +15,7 @@ const CartItem = ({
|
|||||||
}) => {
|
}) => {
|
||||||
const { locale } = useCommerce()
|
const { locale } = useCommerce()
|
||||||
const updateItem = useUpdateItem()
|
const updateItem = useUpdateItem()
|
||||||
|
const removeItem = useRemoveItem()
|
||||||
const [quantity, setQuantity] = useState(item.quantity)
|
const [quantity, setQuantity] = useState(item.quantity)
|
||||||
const { price } = formatVariantPrice({
|
const { price } = formatVariantPrice({
|
||||||
listPrice: item.extended_list_price,
|
listPrice: item.extended_list_price,
|
||||||
@ -84,9 +86,12 @@ const CartItem = ({
|
|||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col space-y-2">
|
<div className="flex flex-col space-y-2">
|
||||||
<span>{price}</span>
|
<span>{price}</span>
|
||||||
<span className="flex justify-end">
|
<button
|
||||||
|
className="flex justify-end"
|
||||||
|
onClick={() => removeItem({ itemId: item.id })}
|
||||||
|
>
|
||||||
<Trash />
|
<Trash />
|
||||||
</span>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
)
|
)
|
||||||
|
@ -8,7 +8,7 @@ export type { ItemBody, RemoveItemBody }
|
|||||||
function fetcher(fetch: Fetcher<Cart>, { itemId }: RemoveItemBody) {
|
function fetcher(fetch: Fetcher<Cart>, { itemId }: RemoveItemBody) {
|
||||||
return fetch({
|
return fetch({
|
||||||
url: '/api/bigcommerce/cart',
|
url: '/api/bigcommerce/cart',
|
||||||
method: 'POST',
|
method: 'DELETE',
|
||||||
body: { itemId },
|
body: { itemId },
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user