4
0
forked from crowetic/commerce

Make cart item buttons work

This commit is contained in:
Luis Alvarez 2020-10-06 22:00:19 -05:00
parent 0483e97954
commit 855492684c

View File

@ -1,7 +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 { 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'
@ -21,18 +21,36 @@ const CartItem = ({
currencyCode, currencyCode,
locale, locale,
}) })
const handleBlur = async () => { const updateQuantity = async (val: number) => {
const data = await updateItem({
itemId: item.id,
item: {
productId: item.product_id,
variantId: item.variant_id,
quantity: val,
},
})
}
const handleQuantity = (e: ChangeEvent<HTMLInputElement>) => {
const val = Number(e.target.value)
if (Number.isInteger(val) && val >= 0) {
setQuantity(e.target.value)
}
}
const handleBlur = () => {
const val = Number(quantity) const val = Number(quantity)
if (val !== item.quantity) { if (val !== item.quantity) {
const data = await updateItem({ updateQuantity(val)
itemId: item.id, }
item: { }
productId: item.product_id, const increaseQuantity = (n = 1) => {
variantId: item.variant_id, const val = Number(quantity) + n
quantity: val,
}, if (Number.isInteger(val) && val >= 0) {
}) setQuantity(val)
updateQuantity(val)
} }
} }
@ -49,21 +67,19 @@ const CartItem = ({
<div className="flex-1 flex flex-col"> <div className="flex-1 flex flex-col">
<span>{item.name}</span> <span>{item.name}</span>
<div className="py-2"> <div className="py-2">
<span>-</span> <button type="button" onClick={() => increaseQuantity(-1)}>
-
</button>
<input <input
type="number" type="number"
className={styles.quantity} className={styles.quantity}
value={quantity} value={quantity}
onChange={(e) => { onChange={handleQuantity}
const val = Number(e.target.value)
if (Number.isInteger(val) && val >= 0) {
setQuantity(e.target.value)
}
}}
onBlur={handleBlur} onBlur={handleBlur}
/> />
<span>+</span> <button type="button" onClick={() => increaseQuantity(1)}>
+
</button>
</div> </div>
</div> </div>
<div className="flex flex-col space-y-2"> <div className="flex flex-col space-y-2">