Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 4x 4x | import React, { FC } from 'react';
const styles = require('./Basket.module.css')
import { STRAPI_URL } from '../../configs/config';
import { Stepper } from 'ag-ems-ui-library';
import { formatToPrice } from '../../helpers';
import { LocalizedLink as Link } from 'gatsby-theme-i18n';
import { useTranslation } from 'react-i18next';
import { useCartContext } from '../../contexts';
export const BasketProduct: FC<{
product: any;
setPreloader?: (value: boolean) => void;
}> = ({ product, setPreloader }) => {
const { t } = useTranslation();
const { update, remove } = useCartContext();
const updateProduct = value => {
setPreloader && setPreloader(true);
update(product.id, value).then(({ errors }) => {
if (!errors) {
setPreloader && setPreloader(false);
}
});
};
const removeProduct = () => {
setPreloader && setPreloader(true);
remove(product.id).then(({ errors }) => {
if (!errors) {
setPreloader && setPreloader(false);
}
});
};
return (
<li className={
`${styles.BasketProduct}
${product.strapiProduct.productType === 'bicycle' ? styles.bicycle : ''}`
}>
<Link className={styles.BasketProductImage} to={'/' + product.strapiProduct.slug}>
<img
src={STRAPI_URL + product.strapiProduct.thumbnail.formats.thumbnail.url}
alt={product.strapiProduct.name}
/>
</Link>
<Link className={styles.BasketProductName}
to={'/' + product.strapiProduct.slug}>{product.strapiProduct.name} ({product.product.sku})</Link>
<div className={styles.BasketProductQuantity}>
<Stepper
name={`${product.product.sku}-stepper`}
value={product.quantity}
minValue={1}
maxValue={100}
onChange={value => updateProduct(value)}
/>
</div>
<p className={styles.BasketProductPrice}>
{formatToPrice(product.product.price.regularPrice.amount.value)}
</p>
<button
type="button"
className={styles.BasketProductRemove}
onClick={removeProduct}
>
{t('remove')}</button>
</li>
);
};
|