pixelize-design-library 2.2.77 → 2.2.78
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -34,19 +34,33 @@ var ProductPrice_1 = __importDefault(require("./ProductPrice"));
|
|
|
34
34
|
var Button_1 = __importDefault(require("../Button/Button"));
|
|
35
35
|
var ProductLabel_1 = __importDefault(require("./ProductLabel"));
|
|
36
36
|
var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
37
|
+
var lucide_react_1 = require("lucide-react");
|
|
37
38
|
var ProductCard = function (_a) {
|
|
38
|
-
var _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
39
|
-
var id = _a.id, label = _a.label, productImage = _a.productImage, rating = _a.rating, reviews = _a.reviews, tags = _a.tags, options = _a.options, button = _a.button, batch = _a.batch, description = _a.description, avalabilitys = _a.avalabilitys, onAddToCart = _a.onAddToCart, onNotifyMe = _a.onNotifyMe, onClick = _a.onClick, addToCart = _a.addToCart, goToCart = _a.goToCart, OnGoToCart = _a.OnGoToCart,
|
|
40
|
-
var
|
|
39
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
40
|
+
var id = _a.id, label = _a.label, productImage = _a.productImage, rating = _a.rating, reviews = _a.reviews, tags = _a.tags, options = _a.options, button = _a.button, batch = _a.batch, description = _a.description, avalabilitys = _a.avalabilitys, onAddToCart = _a.onAddToCart, onNotifyMe = _a.onNotifyMe, onClick = _a.onClick, addToCart = _a.addToCart, goToCart = _a.goToCart, OnGoToCart = _a.OnGoToCart, _o = _a.size, size = _o === void 0 ? "sm" : _o;
|
|
41
|
+
var _p = (0, react_1.useState)(false), hover = _p[0], setHover = _p[1];
|
|
41
42
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
42
|
-
var
|
|
43
|
+
var _q = (0, react_1.useState)(options === null || options === void 0 ? void 0 : options[0]), selectedOption = _q[0], setSelectedOption = _q[1];
|
|
44
|
+
var _r = (0, react_1.useState)(1), qty = _r[0], setQty = _r[1];
|
|
45
|
+
var handleIncrement = function (e) {
|
|
46
|
+
e.stopPropagation();
|
|
47
|
+
if ((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) && qty < selectedOption.stocks) {
|
|
48
|
+
setQty(function (prev) { return prev + 1; });
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
var handleDecrement = function (e) {
|
|
52
|
+
e.stopPropagation();
|
|
53
|
+
if (qty > 1) {
|
|
54
|
+
setQty(function (prev) { return prev - 1; });
|
|
55
|
+
}
|
|
56
|
+
};
|
|
43
57
|
var sizeStyles = {
|
|
44
58
|
xs: { cardWidth: "16.25rem", imgHeight: "11.25rem", padding: 3 },
|
|
45
59
|
sm: { cardWidth: "18rem", imgHeight: "13rem", padding: 4 },
|
|
46
60
|
md: { cardWidth: "20rem", imgHeight: "15rem", padding: 5 },
|
|
47
61
|
lg: { cardWidth: "22rem", imgHeight: "17rem", padding: 6 },
|
|
48
62
|
};
|
|
49
|
-
var
|
|
63
|
+
var _s = sizeStyles[size], cardWidth = _s.cardWidth, imgHeight = _s.imgHeight, padding = _s.padding;
|
|
50
64
|
var allowedSizes = ["sm", "md", "lg", "xl", "xs"];
|
|
51
65
|
var safeSize = allowedSizes.includes(size) ? size : "md";
|
|
52
66
|
return (react_1.default.createElement(react_2.Box, { borderWidth: "0.063rem", borderRadius: "lg", overflow: "hidden", w: "full", maxW: cardWidth, position: "relative", bg: theme.colors.white, boxShadow: "lg" },
|
|
@@ -83,8 +97,13 @@ var ProductCard = function (_a) {
|
|
|
83
97
|
? "".concat(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks, " IN STOCK")
|
|
84
98
|
: "OUT OF STOCK")),
|
|
85
99
|
(button === null || button === void 0 ? void 0 : button.onClick) && (react_1.default.createElement(Button_1.default, { colorScheme: "red", size: safeSize, width: "100%", onClick: button === null || button === void 0 ? void 0 : button.onClick }, (_h = button.label) !== null && _h !== void 0 ? _h : "Add to Cart")),
|
|
86
|
-
addToCart && (((_j = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _j !== void 0 ? _j : 1) > 0) && (react_1.default.createElement(
|
|
87
|
-
|
|
100
|
+
addToCart && (((_j = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _j !== void 0 ? _j : 1) > 0) && (react_1.default.createElement(react_2.HStack, { w: "full", justify: "space-between", mb: 2 },
|
|
101
|
+
react_1.default.createElement(react_2.HStack, null,
|
|
102
|
+
react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Minus, { size: 16 }), "aria-label": "Decrease quantity", size: "xs", onClick: handleDecrement, isDisabled: qty <= 1, isRound: true, variant: "outline", colorScheme: "red" }),
|
|
103
|
+
react_1.default.createElement(react_2.Text, { fontWeight: "bold", w: 8, textAlign: "center" }, qty),
|
|
104
|
+
react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Plus, { size: 16 }), "aria-label": "Increase quantity", size: "xs", onClick: handleIncrement, isDisabled: qty >= ((_k = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _k !== void 0 ? _k : 1), isRound: true, variant: "outline", colorScheme: "red" })))),
|
|
105
|
+
addToCart && (((_l = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _l !== void 0 ? _l : 1) > 0) && (react_1.default.createElement(Button_1.default, { width: "100%", size: safeSize, onClick: function () { return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.var_id) !== undefined && (onAddToCart === null || onAddToCart === void 0 ? void 0 : onAddToCart(id, selectedOption.var_id, qty)); }, colorScheme: "red" }, "Add to Cart")),
|
|
106
|
+
addToCart && (((_m = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _m !== void 0 ? _m : 1) <= 0) && (react_1.default.createElement(Button_1.default, { width: "100%", size: safeSize, onClick: function () { return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.var_id) !== undefined && (onNotifyMe === null || onNotifyMe === void 0 ? void 0 : onNotifyMe(id, selectedOption.var_id)); }, colorScheme: "red", variant: "outline" }, "Notify Me")),
|
|
88
107
|
goToCart && (react_1.default.createElement(Button_1.default, { width: "100%", size: safeSize, onClick: OnGoToCart, colorScheme: "red" }, "Go to Cart")))));
|
|
89
108
|
};
|
|
90
109
|
exports.default = ProductCard;
|
|
@@ -13,7 +13,7 @@ export type ProductCardProps = {
|
|
|
13
13
|
label: string;
|
|
14
14
|
onClick: () => void;
|
|
15
15
|
};
|
|
16
|
-
onAddToCart?: (id: string | number, var_id: number) => void;
|
|
16
|
+
onAddToCart?: (id: string | number, var_id: number, qty?: number) => void;
|
|
17
17
|
onNotifyMe?: (id: string | number, var_id: number) => void;
|
|
18
18
|
addToCart?: boolean;
|
|
19
19
|
goToCart?: boolean;
|
|
@@ -13,10 +13,26 @@ var useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
|
13
13
|
var Button_1 = __importDefault(require("../Button/Button"));
|
|
14
14
|
var lucide_react_1 = require("lucide-react");
|
|
15
15
|
var ProductDetails = function (_a) {
|
|
16
|
-
var _b, _c, _d, _e, _f, _g;
|
|
16
|
+
var _b, _c, _d, _e, _f, _g, _h, _j;
|
|
17
17
|
var id = _a.id, price = _a.price, label = _a.label, shortdesc = _a.shortdesc, tags = _a.tags, images = _a.images, batch = _a.batch, category = _a.category, onAddToCart = _a.onAddToCart, onNotifyMe = _a.onNotifyMe, addToCart = _a.addToCart, goToCart = _a.goToCart, OnGoToCart = _a.OnGoToCart;
|
|
18
18
|
var theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
19
|
-
var
|
|
19
|
+
var _k = react_1.default.useState(price === null || price === void 0 ? void 0 : price[0]), selectedOption = _k[0], setSelectedOption = _k[1];
|
|
20
|
+
var _l = react_1.default.useState(1), qty = _l[0], setQty = _l[1];
|
|
21
|
+
react_1.default.useEffect(function () {
|
|
22
|
+
setQty(1);
|
|
23
|
+
}, [selectedOption]);
|
|
24
|
+
var handleIncrement = function () {
|
|
25
|
+
setQty(function (prev) {
|
|
26
|
+
var _a;
|
|
27
|
+
var stock = (_a = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _a !== void 0 ? _a : Infinity;
|
|
28
|
+
if (prev >= stock)
|
|
29
|
+
return prev;
|
|
30
|
+
return prev + 1;
|
|
31
|
+
});
|
|
32
|
+
};
|
|
33
|
+
var handleDecrement = function () {
|
|
34
|
+
setQty(function (prev) { return (prev > 1 ? prev - 1 : 1); });
|
|
35
|
+
};
|
|
20
36
|
return (react_1.default.createElement(react_2.Flex, { direction: ["column", "row"], maxW: "6xl", mx: "auto", align: "start", gap: 5 },
|
|
21
37
|
react_1.default.createElement(react_2.Box, { position: "relative", color: "white", borderRadius: "md", flex: "1", minH: "31.25rem" },
|
|
22
38
|
react_1.default.createElement(ProductImageSlider_1.default, { images: images, thumbHeight: 80, imageSize: 480, batch: batch })),
|
|
@@ -36,7 +52,12 @@ var ProductDetails = function (_a) {
|
|
|
36
52
|
? "".concat(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks, " IN STOCK")
|
|
37
53
|
: "OUT OF STOCK"))),
|
|
38
54
|
goToCart && (react_1.default.createElement(Button_1.default, { size: "sm", colorScheme: "red", leftIcon: react_1.default.createElement(lucide_react_1.ShoppingCartIcon, null), sx: { ml: "1.1rem" }, onClick: OnGoToCart }, "Go to cart")),
|
|
39
|
-
addToCart && (((_f = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _f !== void 0 ? _f : 1) > 0) && (react_1.default.createElement(
|
|
40
|
-
|
|
55
|
+
addToCart && (((_f = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _f !== void 0 ? _f : 1) > 0) && (react_1.default.createElement(react_2.HStack, { sx: { ml: "1.1rem", mb: 4 }, spacing: 4 },
|
|
56
|
+
react_1.default.createElement(react_2.HStack, null,
|
|
57
|
+
react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Minus, { size: 16 }), "aria-label": "Decrease quantity", size: "xs", onClick: handleDecrement, isDisabled: qty <= 1, isRound: true, variant: "outline", colorScheme: "red" }),
|
|
58
|
+
react_1.default.createElement(react_2.Text, { fontWeight: "bold", w: 8, textAlign: "center" }, qty),
|
|
59
|
+
react_1.default.createElement(react_2.IconButton, { icon: react_1.default.createElement(lucide_react_1.Plus, { size: 16 }), "aria-label": "Increase quantity", size: "xs", onClick: handleIncrement, isDisabled: qty >= ((_g = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _g !== void 0 ? _g : Infinity), isRound: true, variant: "outline", colorScheme: "red" })))),
|
|
60
|
+
addToCart && (((_h = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _h !== void 0 ? _h : 1) > 0) && (react_1.default.createElement(Button_1.default, { size: "sm", colorScheme: "red", leftIcon: react_1.default.createElement(lucide_react_1.ShoppingCartIcon, null), sx: { ml: "1.1rem" }, onClick: function () { return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.var_id) !== undefined && (onAddToCart === null || onAddToCart === void 0 ? void 0 : onAddToCart(id, selectedOption.var_id, qty)); } }, "Add to cart")),
|
|
61
|
+
addToCart && (((_j = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _j !== void 0 ? _j : 1) <= 0) && (react_1.default.createElement(Button_1.default, { size: "sm", colorScheme: "red", variant: "outline", sx: { ml: "1.1rem" }, onClick: function () { return (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.var_id) !== undefined && (onNotifyMe === null || onNotifyMe === void 0 ? void 0 : onNotifyMe(id, selectedOption.var_id)); } }, "Notify Me")))));
|
|
41
62
|
};
|
|
42
63
|
exports.default = ProductDetails;
|
|
@@ -8,7 +8,7 @@ export type ProductDetailsProps = {
|
|
|
8
8
|
images?: images[];
|
|
9
9
|
batch?: batch;
|
|
10
10
|
category?: string;
|
|
11
|
-
onAddToCart?: (id: string | number, var_id: number) => void;
|
|
11
|
+
onAddToCart?: (id: string | number, var_id: number, qty?: number) => void;
|
|
12
12
|
onNotifyMe?: (id: string | number, var_id: number) => void;
|
|
13
13
|
addToCart?: boolean;
|
|
14
14
|
goToCart?: boolean;
|