4
0
forked from crowetic/commerce

Allow cart view to remove the item

This commit is contained in:
Luis Alvarez 2020-10-07 11:19:50 -05:00
parent 5e999920d2
commit 63e8f431d8
2 changed files with 8 additions and 3 deletions

View File

@ -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>
) )

View File

@ -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 },
}) })
} }