pixelize-design-library 2.2.76 → 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.
Files changed (5) hide show
  1. package/dist/Components/ProductCard/ProductCard.js +26 -7
  2. package/dist/Components/ProductCard/ProductCardProps.d.ts +1 -1
  3. package/dist/Components/ProductDetails/ProductDetails.js +25 -4
  4. package/dist/Components/ProductDetails/ProductDetailsProps.d.ts +1 -1
  5. package/package.json +1 -1
package/dist/Components/ProductCard/ProductCard.js CHANGED
@@ -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, _l = _a.size, size = _l === void 0 ? "sm" : _l;
40
- var _m = (0, react_1.useState)(false), hover = _m[0], setHover = _m[1];
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 _o = (0, react_1.useState)(options === null || options === void 0 ? void 0 : options[0]), selectedOption = _o[0], setSelectedOption = _o[1];
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 _p = sizeStyles[size], cardWidth = _p.cardWidth, imgHeight = _p.imgHeight, padding = _p.padding;
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(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)); }, colorScheme: "red" }, "Add to Cart")),
87
- addToCart && (((_k = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _k !== void 0 ? _k : 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")),
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;
package/dist/Components/ProductCard/ProductCardProps.d.ts CHANGED
@@ -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;
package/dist/Components/ProductDetails/ProductDetails.js CHANGED
@@ -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 _h = react_1.default.useState(price === null || price === void 0 ? void 0 : price[0]), selectedOption = _h[0], setSelectedOption = _h[1];
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(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)); } }, "Add to cart")),
40
- addToCart && (((_g = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _g !== void 0 ? _g : 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")))));
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;
package/dist/Components/ProductDetails/ProductDetailsProps.d.ts CHANGED
@@ -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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.2.76",
3
+ "version": "2.2.78",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",