pixelize-design-library 2.2.92 → 2.2.93
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.
- package/dist/Components/ProductCard/ProductCard.js +16 -15
- package/dist/Components/ProductCard/ProductReview.js +8 -6
- package/dist/Components/ProductCard/ProductTags.js +1 -1
- package/dist/Components/ProductDetails/ProductDetails.js +1 -1
- package/dist/Components/ProductDetails/ProductDtlPrice.js +2 -2
- package/package.json +1 -1
|
@@ -68,7 +68,7 @@ var ProductCard = function (_a) {
|
|
|
68
68
|
var _q = sizeStyles[size], cardWidth = _q.cardWidth, imgHeight = _q.imgHeight, padding = _q.padding;
|
|
69
69
|
var allowedSizes = ["sm", "md", "lg", "xl", "xs"];
|
|
70
70
|
var safeSize = allowedSizes.includes(size) ? size : "md";
|
|
71
|
-
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" },
|
|
71
|
+
return (react_1.default.createElement(react_2.Box, { borderWidth: "0.063rem", borderRadius: "lg", overflow: "hidden", w: "full", maxW: cardWidth, h: "full", display: "flex", flexDirection: "column", position: "relative", bg: theme.colors.white, boxShadow: "lg" },
|
|
72
72
|
react_1.default.createElement(react_2.Box, { onMouseEnter: function () { return setHover(true); }, onMouseLeave: function () { return setHover(false); }, h: imgHeight, w: "full", overflow: "hidden", onClick: onClick, cursor: "pointer" },
|
|
73
73
|
react_1.default.createElement(react_2.Image, { src: hover && ((_b = productImage === null || productImage === void 0 ? void 0 : productImage[1]) === null || _b === void 0 ? void 0 : _b.imageUrl) ? productImage[1].imageUrl : (_c = productImage === null || productImage === void 0 ? void 0 : productImage[0]) === null || _c === void 0 ? void 0 : _c.imageUrl, alt: label, w: "full", h: "full", transform: hover ? "scale(1.06)" : "scale(1)", transition: "transform 0.7s cubic-bezier(0.16, 1, 0.3, 1)" }),
|
|
74
74
|
batch && (react_1.default.createElement(react_2.Badge, { colorScheme: batch.color || "green", position: "absolute", top: 2, right: 2, fontSize: {
|
|
@@ -87,22 +87,23 @@ var ProductCard = function (_a) {
|
|
|
87
87
|
md: 1.5,
|
|
88
88
|
lg: 2,
|
|
89
89
|
}[size] }, batch.label))),
|
|
90
|
-
react_1.default.createElement(react_2.VStack, { spacing: 2, align: "start", p: padding },
|
|
90
|
+
react_1.default.createElement(react_2.VStack, { spacing: 2, align: "start", p: padding, flex: "1", w: "full" },
|
|
91
91
|
react_1.default.createElement(react_2.Box, { onClick: onClick, cursor: "pointer" },
|
|
92
92
|
react_1.default.createElement(ProductLabel_1.default, { label: label, size: size })),
|
|
93
93
|
tags && react_1.default.createElement(ProductTags_1.default, { tags: tags, size: size }),
|
|
94
|
-
options && (react_1.default.createElement(ProductPrice_1.default, { options: options, size: size, onSelect: handleOptionSelect, rightSlot: rating
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
react_1.default.createElement(react_2.HStack,
|
|
100
|
-
react_1.default.createElement(react_2.
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
94
|
+
options && (react_1.default.createElement(ProductPrice_1.default, { options: options, size: size, onSelect: handleOptionSelect, rightSlot: (rating !== undefined && rating !== null) || (reviews !== undefined && reviews !== null)
|
|
95
|
+
? react_1.default.createElement(ProductReview_1.default, { rating: rating, reviewCount: reviews })
|
|
96
|
+
: undefined })),
|
|
97
|
+
react_1.default.createElement(react_2.VStack, { w: "full", align: "stretch", spacing: 2, mt: "auto" },
|
|
98
|
+
typeof (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) === "number" && ((_d = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _d !== void 0 ? _d : 0) <= 0 && (react_1.default.createElement(Button_1.default, { colorScheme: "gray", size: safeSize, width: "100%", isDisabled: true }, "Out of Stock")),
|
|
99
|
+
addToCart && (((_e = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _e !== void 0 ? _e : 1) > 0) && isQtyEditable && (react_1.default.createElement(react_2.HStack, { w: "full", justify: "space-between" },
|
|
100
|
+
react_1.default.createElement(react_2.HStack, null,
|
|
101
|
+
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" }),
|
|
102
|
+
react_1.default.createElement(react_2.Text, { fontWeight: "bold", w: 8, textAlign: "center" }, qty),
|
|
103
|
+
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 >= ((_f = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _f !== void 0 ? _f : 1), isRound: true, variant: "outline", colorScheme: "red" })))),
|
|
104
|
+
(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 }, (_g = button.label) !== null && _g !== void 0 ? _g : "Add to Cart")),
|
|
105
|
+
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, { 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 && (((_j = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _j !== void 0 ? _j : 1) <= 0) && notifyMe && (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")),
|
|
107
|
+
goToCart && (react_1.default.createElement(Button_1.default, { width: "100%", size: safeSize, onClick: OnGoToCart, colorScheme: "red" }, "Go to Cart"))))));
|
|
107
108
|
};
|
|
108
109
|
exports.default = ProductCard;
|
|
@@ -8,16 +8,18 @@ var react_2 = require("@chakra-ui/react");
|
|
|
8
8
|
var lucide_react_1 = require("lucide-react");
|
|
9
9
|
var ProductReview = function (_a) {
|
|
10
10
|
var rating = _a.rating, reviewCount = _a.reviewCount, _b = _a.mb, mb = _b === void 0 ? 0 : _b;
|
|
11
|
+
var hasRating = rating !== undefined && rating !== null;
|
|
12
|
+
var hasReviewCount = reviewCount !== undefined && reviewCount !== null;
|
|
11
13
|
return (react_1.default.createElement(react_2.Flex, { align: "center", gap: 2, mb: mb },
|
|
12
|
-
react_1.default.createElement(react_2.Flex, { align: "center", gap: "1", bg: "teal.900", color: "white", px: 2, borderRadius: "md", fontSize: "sm", fontWeight: "bold" },
|
|
13
|
-
react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Star, boxSize: 3.5 }),
|
|
14
|
-
react_1.default.createElement(react_2.Text, null, rating)),
|
|
15
|
-
react_1.default.createElement(react_2.Box, { h: "4", w: "0.063rem", bg: "gray.400" }),
|
|
16
|
-
react_1.default.createElement(react_2.Flex, { align: "center", gap: "1" },
|
|
14
|
+
hasRating && (react_1.default.createElement(react_2.Flex, { align: "center", gap: "1", bg: "teal.900", color: "white", px: 2, borderRadius: "md", fontSize: "sm", fontWeight: "bold" },
|
|
15
|
+
react_1.default.createElement(react_2.Icon, { as: lucide_react_1.Star, boxSize: 3.5, color: "yellow.400", fill: "yellow.400" }),
|
|
16
|
+
react_1.default.createElement(react_2.Text, null, rating))),
|
|
17
|
+
hasRating && hasReviewCount && react_1.default.createElement(react_2.Box, { h: "4", w: "0.063rem", bg: "gray.400" }),
|
|
18
|
+
hasReviewCount && (react_1.default.createElement(react_2.Flex, { align: "center", gap: "1" },
|
|
17
19
|
react_1.default.createElement(react_2.Icon, { as: lucide_react_1.BookCheck, boxSize: 3.5 }),
|
|
18
20
|
react_1.default.createElement(react_2.Text, { fontSize: "sm", color: "gray.600" },
|
|
19
21
|
"(",
|
|
20
22
|
reviewCount,
|
|
21
|
-
")"))));
|
|
23
|
+
")")))));
|
|
22
24
|
};
|
|
23
25
|
exports.default = ProductReview;
|
|
@@ -30,6 +30,6 @@ var Tag = function (_a) {
|
|
|
30
30
|
md: { fontSize: '0.875rem', px: '0.75rem', py: '0.3rem' },
|
|
31
31
|
lg: { fontSize: '0.938rem', px: '0.938rem', py: '0.4rem' },
|
|
32
32
|
};
|
|
33
|
-
return (react_1.default.createElement(react_2.Box, { flex: fullWidth ? '1' : '1', border: "0.063rem solid #f9aaa4", color: "black", fontSize: tagSizes[size].fontSize, fontWeight: "semibold", borderRadius: "full", px: tagSizes[size].px, py: tagSizes[size].py, textAlign: "center", whiteSpace: "nowrap"
|
|
33
|
+
return (react_1.default.createElement(react_2.Box, { flex: fullWidth ? '1' : '1', border: "0.063rem solid #f9aaa4", color: "black", fontSize: tagSizes[size].fontSize, fontWeight: "semibold", borderRadius: "full", px: tagSizes[size].px, py: tagSizes[size].py, textAlign: "center", whiteSpace: "nowrap" }, children));
|
|
34
34
|
};
|
|
35
35
|
exports.default = ProductTags;
|
|
@@ -41,7 +41,7 @@ var ProductDetails = function (_a) {
|
|
|
41
41
|
react_1.default.createElement(react_2.Box, { flex: "1" },
|
|
42
42
|
label && react_1.default.createElement(ProductLabel_1.default, { label: label, size: "sm" }),
|
|
43
43
|
react_1.default.createElement(react_2.Text, { fontSize: "md", color: theme.colors.gray[700], my: 3 }, shortdesc),
|
|
44
|
-
rating || reviews && react_1.default.createElement(ProductReview_1.default, { rating: rating, reviewCount: reviews, mb: 3 }),
|
|
44
|
+
((rating !== undefined && rating !== null) || (reviews !== undefined && reviews !== null)) && (react_1.default.createElement(ProductReview_1.default, { rating: rating, reviewCount: reviews, mb: 3 })),
|
|
45
45
|
tags && react_1.default.createElement(ProductTags_1.default, { tags: tags, size: "sm" }),
|
|
46
46
|
price && (react_1.default.createElement(ProductDtlPrice_1.default, { price: price, onSelect: function (option) {
|
|
47
47
|
setSelectedOption(option);
|
|
@@ -43,10 +43,10 @@ var ProductDtlPrice = function (_a) {
|
|
|
43
43
|
react_1.default.createElement(react_2.Text, { fontSize: "xl", color: theme.colors.red[500], fontWeight: "bold" },
|
|
44
44
|
"\u20B9",
|
|
45
45
|
discounted),
|
|
46
|
-
react_1.default.createElement(react_2.Badge, { colorScheme: "pink", fontSize: "xs", borderRadius: "sm", px: 2, py: 0.5 },
|
|
46
|
+
selected.offer > 0 && (react_1.default.createElement(react_2.Badge, { colorScheme: "pink", fontSize: "xs", borderRadius: "sm", px: 2, py: 0.5 },
|
|
47
47
|
"SAVE ",
|
|
48
48
|
selected.offer,
|
|
49
|
-
"%")),
|
|
49
|
+
"%"))),
|
|
50
50
|
react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[600] }, "(Incl. of all taxes)"),
|
|
51
51
|
react_1.default.createElement(react_2.Box, null,
|
|
52
52
|
react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "bold", textTransform: "uppercase", mb: 1 },
|