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 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 | 12x 184x 184x 184x 184x 184x 184x 184x 184x 184x 184x 184x 8x 8x 1x 7x 184x 1x 1x 1x 184x 1x 1x 1x 184x | import GiveButton from "@shared/Button/GiveButton";
import { useCart } from "@sections/PayBuilder/provider/CartContext";
import { parsePriceToInteger } from "@utils/helpers";
import { Stack } from "@mui/material";
import QuantityInput from "../QuantityInput";
import { useAppTheme } from "@theme/v2/Provider";
import { ProductItemType } from "@sections/PayBuilder/types";
import { darken } from "@mui/material";
import { isExceededAmount } from "@sections/PayBuilder/Checkout/helpers";
import GiveTooltip from "@shared/Tooltip/GiveTooltip";
import { CANNOT_EXCEED_MAX_AMOUNT } from "@constants/stringConstants";
import { useAppSelector } from "@redux/hooks";
import { selectCart } from "@redux/slices/cart";
interface ProductCardFooterProps {
product: ProductItemType;
accentColor: string;
titleColor: string;
textColor: string;
itemLayout: string;
}
const ProductCardFooter: React.FC<ProductCardFooterProps> = ({
product,
accentColor,
titleColor,
itemLayout,
textColor,
}) => {
const { id, amount, in_stock, paymentType } = product;
const { addToCart, removeFromCart, getItemInCart, subTotal } = useCart();
const { palette } = useAppTheme();
const { isCartLoading } = useAppSelector(selectCart);
const cartProduct = getItemInCart(id);
const inCart = !!cartProduct;
const quantity = cartProduct ? cartProduct.quantity : 1;
const isIncreaseDisabled = (in_stock && quantity >= in_stock) || false;
const isAmountExceeded = isExceededAmount(subTotal, amount);
const item = {
id: String(product.id),
productVariantName: product.title,
productVariantID: product.id,
productVariantPrice: parsePriceToInteger(amount || "", false),
quantity: quantity,
unitPrice: amount || "",
productVariantImageURL: product.thumbnail || "",
recurringIntervalName: paymentType,
in_stock: in_stock,
};
const handleButtonAction = (e: React.MouseEvent) => {
e.stopPropagation();
if (inCart) {
removeFromCart(String(product.id));
} else {
addToCart(item, quantity, "increment", true);
}
};
const handleIncrease = (e?: React.MouseEvent) => {
e?.stopPropagation();
Eif (quantity < (in_stock || Number.MAX_SAFE_INTEGER)) {
addToCart(item, 1, "increment", false);
}
};
const handleDecrease = (e?: React.MouseEvent) => {
e?.stopPropagation();
if (quantity > 1) {
addToCart(item, 1, "decrement", false);
} else E{
removeFromCart(String(product.id));
}
};
return (
<Stack direction="row" gap={2} width="100%" pt="10px" marginTop="auto">
{inCart && (
<QuantityInput
quantity={quantity}
handleDecrement={handleDecrease}
handleIncrement={handleIncrease}
disableAddition={isIncreaseDisabled}
textColor={textColor}
isAmountExceeded={isAmountExceeded}
disabled={isCartLoading}
/>
)}
<GiveTooltip
title={CANNOT_EXCEED_MAX_AMOUNT}
placement="top"
disableHoverListener={!isAmountExceeded || inCart}
fluidWidth
>
<GiveButton
size="large"
variant="filled"
label={inCart ? "Remove" : "Add to cart"}
onClick={handleButtonAction}
disabled={(isAmountExceeded && !inCart) || isCartLoading}
data-testid={`product-${id}-add-to-cart`}
sx={{
width: itemLayout === "card" ? "100%" : "auto",
background: inCart
? palette.primitive?.transparent["darken-5"]
: accentColor,
color: inCart ? palette.text.primary : titleColor,
"&:hover": {
background: darken(
inCart
? (palette.primitive?.transparent["darken-5"] as string)
: accentColor,
0.2,
),
},
}}
/>
</GiveTooltip>
</Stack>
);
};
export default ProductCardFooter;
|