pixelize-design-library 2.2.75 → 2.2.76

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 (11) hide show
  1. package/dist/Components/ProductCard/ProductCard.d.ts +1 -1
  2. package/dist/Components/ProductCard/ProductCard.js +20 -9
  3. package/dist/Components/ProductCard/ProductCardProps.d.ts +8 -4
  4. package/dist/Components/ProductCard/ProductPrice.d.ts +2 -1
  5. package/dist/Components/ProductCard/ProductPrice.js +6 -3
  6. package/dist/Components/ProductDetails/ProductDetails.d.ts +1 -1
  7. package/dist/Components/ProductDetails/ProductDetails.js +17 -4
  8. package/dist/Components/ProductDetails/ProductDetailsProps.d.ts +4 -10
  9. package/dist/Components/ProductDetails/ProductDtlPrice.d.ts +4 -3
  10. package/dist/Components/ProductDetails/ProductDtlPrice.js +10 -8
  11. package/package.json +1 -1
package/dist/Components/ProductCard/ProductCard.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import { ProductCardProps } from "./ProductCardProps";
3
- declare const ProductCard: ({ id, label, productImage, rating, reviews, tags, options, button, batch, description, avalabilitys, onAddToCart, onClick, addToCart, goToCart, OnGoToCart, size, }: ProductCardProps) => React.JSX.Element;
3
+ declare const ProductCard: ({ id, label, productImage, rating, reviews, tags, options, button, batch, description, avalabilitys, onAddToCart, onNotifyMe, onClick, addToCart, goToCart, OnGoToCart, size, }: ProductCardProps) => React.JSX.Element;
4
4
  export default ProductCard;
package/dist/Components/ProductCard/ProductCard.js CHANGED
@@ -35,22 +35,23 @@ var Button_1 = __importDefault(require("../Button/Button"));
35
35
  var ProductLabel_1 = __importDefault(require("./ProductLabel"));
36
36
  var useCustomTheme_1 = require("../../Theme/useCustomTheme");
37
37
  var ProductCard = function (_a) {
38
- var _b;
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, onClick = _a.onClick, addToCart = _a.addToCart, goToCart = _a.goToCart, OnGoToCart = _a.OnGoToCart, _c = _a.size, size = _c === void 0 ? "sm" : _c;
40
- var _d = (0, react_1.useState)(false), hover = _d[0], setHover = _d[1];
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];
41
41
  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];
42
43
  var sizeStyles = {
43
44
  xs: { cardWidth: "16.25rem", imgHeight: "11.25rem", padding: 3 },
44
45
  sm: { cardWidth: "18rem", imgHeight: "13rem", padding: 4 },
45
46
  md: { cardWidth: "20rem", imgHeight: "15rem", padding: 5 },
46
47
  lg: { cardWidth: "22rem", imgHeight: "17rem", padding: 6 },
47
48
  };
48
- var _e = sizeStyles[size], cardWidth = _e.cardWidth, imgHeight = _e.imgHeight, padding = _e.padding;
49
+ var _p = sizeStyles[size], cardWidth = _p.cardWidth, imgHeight = _p.imgHeight, padding = _p.padding;
49
50
  var allowedSizes = ["sm", "md", "lg", "xl", "xs"];
50
51
  var safeSize = allowedSizes.includes(size) ? size : "md";
51
- return (react_1.default.createElement(react_2.Box, { borderWidth: "0.063rem", borderRadius: "lg", overflow: "hidden", w: cardWidth, position: "relative", bg: theme.colors.white, boxShadow: "lg" },
52
+ 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" },
52
53
  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" },
53
- react_1.default.createElement(react_2.Image, { src: hover && productImage.hover ? productImage.hover : productImage.visibile, alt: label, w: "full", h: "full" }),
54
+ 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" }),
54
55
  batch && (react_1.default.createElement(react_2.Badge, { colorScheme: batch.color || "green", position: "absolute", top: 2, right: 2, fontSize: {
55
56
  xs: "xs",
56
57
  sm: "sm",
@@ -71,9 +72,19 @@ var ProductCard = function (_a) {
71
72
  react_1.default.createElement(react_2.Box, { onClick: onClick, cursor: "pointer" },
72
73
  react_1.default.createElement(ProductLabel_1.default, { label: label, description: description, size: size })),
73
74
  tags && react_1.default.createElement(ProductTags_1.default, { tags: tags, size: size }),
74
- options && react_1.default.createElement(ProductPrice_1.default, { options: options, size: size }),
75
- (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 }, (_b = button.label) !== null && _b !== void 0 ? _b : "Add to Cart")),
76
- addToCart && (react_1.default.createElement(Button_1.default, { width: "100%", size: safeSize, onClick: function () { return onAddToCart === null || onAddToCart === void 0 ? void 0 : onAddToCart(id); }, colorScheme: "red" }, "Add to Cart")),
75
+ options && react_1.default.createElement(ProductPrice_1.default, { options: options, size: size, onSelect: setSelectedOption }),
76
+ typeof (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) === "number" && (react_1.default.createElement(react_2.Badge, { colorScheme: ((_d = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _d !== void 0 ? _d : 0) >= 5
77
+ ? "green"
78
+ : ((_e = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _e !== void 0 ? _e : 0) > 0
79
+ ? "orange"
80
+ : "red", fontSize: "xs", px: 2, py: 1, variant: "subtle", rounded: "md", fontWeight: "semibold", textTransform: "uppercase" }, ((_f = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _f !== void 0 ? _f : 0) >= 5
81
+ ? "IN STOCK"
82
+ : ((_g = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _g !== void 0 ? _g : 0) > 0
83
+ ? "".concat(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks, " IN STOCK")
84
+ : "OUT OF STOCK")),
85
+ (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")),
77
88
  goToCart && (react_1.default.createElement(Button_1.default, { width: "100%", size: safeSize, onClick: OnGoToCart, colorScheme: "red" }, "Go to Cart")))));
78
89
  };
79
90
  exports.default = ProductCard;
package/dist/Components/ProductCard/ProductCardProps.d.ts CHANGED
@@ -3,7 +3,7 @@ export type ProductCardProps = {
3
3
  id: string | number;
4
4
  label: string;
5
5
  description?: string;
6
- productImage: productImage;
6
+ productImage: productImage[];
7
7
  tags?: string[];
8
8
  rating?: string | number;
9
9
  reviews?: string | number;
@@ -13,7 +13,8 @@ export type ProductCardProps = {
13
13
  label: string;
14
14
  onClick: () => void;
15
15
  };
16
- onAddToCart?: (id: string | number) => void;
16
+ onAddToCart?: (id: string | number, var_id: number) => void;
17
+ onNotifyMe?: (id: string | number, var_id: number) => void;
17
18
  addToCart?: boolean;
18
19
  goToCart?: boolean;
19
20
  OnGoToCart?: () => void;
@@ -27,12 +28,15 @@ export type options = {
27
28
  unit?: number;
28
29
  price: number;
29
30
  offer: number;
31
+ var_id: number;
32
+ stocks: number;
30
33
  };
31
34
  export type batch = {
32
35
  label: string;
33
36
  color?: string;
34
37
  };
35
38
  export type productImage = {
36
- visibile: string;
37
- hover?: string;
39
+ imageUrl: string;
40
+ imageId: number;
41
+ order: number;
38
42
  };
package/dist/Components/ProductCard/ProductPrice.d.ts CHANGED
@@ -3,6 +3,7 @@ import { options, SizeType } from './ProductCardProps';
3
3
  type ProductPriceProps = {
4
4
  options: options[];
5
5
  size: SizeType;
6
+ onSelect?: React.Dispatch<React.SetStateAction<options | undefined>>;
6
7
  };
7
- declare const ProductPrice: ({ options, size }: ProductPriceProps) => React.JSX.Element;
8
+ declare const ProductPrice: ({ options, size, onSelect }: ProductPriceProps) => React.JSX.Element;
8
9
  export default ProductPrice;
package/dist/Components/ProductCard/ProductPrice.js CHANGED
@@ -68,7 +68,7 @@ var sizeConfig = {
68
68
  },
69
69
  };
70
70
  var ProductPrice = function (_a) {
71
- var options = _a.options, size = _a.size;
71
+ var options = _a.options, size = _a.size, onSelect = _a.onSelect;
72
72
  var cfg = sizeConfig[size];
73
73
  var _b = (0, react_1.useState)(false), isOpen = _b[0], setIsOpen = _b[1];
74
74
  var _c = (0, react_1.useState)(options[0]), selected = _c[0], setSelected = _c[1];
@@ -104,6 +104,9 @@ var ProductPrice = function (_a) {
104
104
  window.removeEventListener("scroll", updatePosition, true);
105
105
  };
106
106
  }, [isOpen]);
107
+ (0, react_1.useEffect)(function () {
108
+ onSelect === null || onSelect === void 0 ? void 0 : onSelect(selected);
109
+ }, [selected, onSelect]);
107
110
  return (react_1.default.createElement(react_1.default.Fragment, null,
108
111
  isSingleOption ? (react_1.default.createElement(react_2.Box, { border: "0.063rem solid", borderColor: "red.300", bg: "#fff5f5", px: cfg.px, py: cfg.py, rounded: "md", display: "inline-block", w: "100%" },
109
112
  react_1.default.createElement(react_2.Text, { fontSize: cfg.label, fontWeight: "medium" }, options[0].label))) : (react_1.default.createElement(react_2.Box, { ref: buttonRef, onClick: function () { return setIsOpen(!isOpen); }, border: "0.063rem solid", borderColor: "red.300", bg: "#fff5f5", px: cfg.px, py: cfg.py, rounded: "md", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", w: "100%" },
@@ -112,8 +115,8 @@ var ProductPrice = function (_a) {
112
115
  !isSingleOption && isOpen && (react_1.default.createElement(react_2.Portal, null,
113
116
  react_1.default.createElement(react_2.Box, { ref: dropdownRef, position: "absolute", top: "".concat(dropdownPosition.top, "px"), left: "".concat(dropdownPosition.left, "px"), width: "".concat(dropdownPosition.width, "px"), bg: "white", border: "0.063rem solid", borderColor: "red.300", shadow: "md", zIndex: 9999 }, options.map(function (option) {
114
117
  var discounted = getDiscountedPrice(option);
115
- var isSelected = selected.weight === option.weight;
116
- return (react_1.default.createElement(react_2.Box, { key: option.weight, px: cfg.px, h: cfg.rowHeight, cursor: "pointer", bg: isSelected ? 'red.50' : 'white', _hover: { bg: 'red.100' }, onClick: function () {
118
+ var isSelected = selected.var_id === option.var_id;
119
+ return (react_1.default.createElement(react_2.Box, { key: option.var_id, px: cfg.px, h: cfg.rowHeight, cursor: "pointer", bg: isSelected ? 'red.50' : 'white', _hover: { bg: 'red.100' }, onClick: function () {
117
120
  setSelected(option);
118
121
  setIsOpen(false);
119
122
  }, display: "flex", alignItems: "center", justifyContent: "space-between" },
package/dist/Components/ProductDetails/ProductDetails.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import { ProductDetailsProps } from "./ProductDetailsProps";
3
- declare const ProductDetails: ({ id, price, label, shortdesc, tags, images, batch, category, onAddToCart, addToCart, goToCart, OnGoToCart, }: ProductDetailsProps) => React.JSX.Element;
3
+ declare const ProductDetails: ({ id, price, label, shortdesc, tags, images, batch, category, onAddToCart, onNotifyMe, addToCart, goToCart, OnGoToCart, }: ProductDetailsProps) => React.JSX.Element;
4
4
  export default ProductDetails;
package/dist/Components/ProductDetails/ProductDetails.js CHANGED
@@ -13,8 +13,10 @@ 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 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, addToCart = _a.addToCart, goToCart = _a.goToCart, OnGoToCart = _a.OnGoToCart;
16
+ var _b, _c, _d, _e, _f, _g;
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;
17
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];
18
20
  return (react_1.default.createElement(react_2.Flex, { direction: ["column", "row"], maxW: "6xl", mx: "auto", align: "start", gap: 5 },
19
21
  react_1.default.createElement(react_2.Box, { position: "relative", color: "white", borderRadius: "md", flex: "1", minH: "31.25rem" },
20
22
  react_1.default.createElement(ProductImageSlider_1.default, { images: images, thumbHeight: 80, imageSize: 480, batch: batch })),
@@ -22,8 +24,19 @@ var ProductDetails = function (_a) {
22
24
  label && react_1.default.createElement(ProductLabel_1.default, { label: label, size: "sm" }),
23
25
  react_1.default.createElement(react_2.Text, { fontSize: "md", color: theme.colors.gray[700], my: 3 }, shortdesc),
24
26
  tags && react_1.default.createElement(ProductTags_1.default, { tags: tags, size: "sm" }),
25
- price && react_1.default.createElement(ProductDtlPrice_1.default, { price: price }),
26
- addToCart && (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 onAddToCart === null || onAddToCart === void 0 ? void 0 : onAddToCart(id); } }, "Add to cart")),
27
- 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")))));
27
+ price && react_1.default.createElement(ProductDtlPrice_1.default, { price: price, onSelect: setSelectedOption }),
28
+ typeof (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) === "number" && (react_1.default.createElement(react_2.Box, { sx: { ml: "1.1rem", mt: "0.5rem", mb: "0.5rem" } },
29
+ react_1.default.createElement(react_2.Badge, { colorScheme: ((_b = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _b !== void 0 ? _b : 0) >= 5
30
+ ? "green"
31
+ : ((_c = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _c !== void 0 ? _c : 0) > 0
32
+ ? "orange"
33
+ : "red", fontSize: "xs", px: 2, py: 1, variant: "subtle", rounded: "md", fontWeight: "semibold", textTransform: "uppercase" }, ((_d = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _d !== void 0 ? _d : 0) >= 5
34
+ ? "IN STOCK"
35
+ : ((_e = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks) !== null && _e !== void 0 ? _e : 0) > 0
36
+ ? "".concat(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.stocks, " IN STOCK")
37
+ : "OUT OF STOCK"))),
38
+ 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")))));
28
41
  };
29
42
  exports.default = ProductDetails;
package/dist/Components/ProductDetails/ProductDetailsProps.d.ts CHANGED
@@ -1,25 +1,19 @@
1
- import { batch } from "../ProductCard/ProductCardProps";
1
+ import { batch, options } from "../ProductCard/ProductCardProps";
2
2
  export type ProductDetailsProps = {
3
3
  id: string | number;
4
- price?: price[];
4
+ price?: options[];
5
5
  label?: string;
6
6
  shortdesc?: string;
7
7
  tags?: string[];
8
8
  images?: images[];
9
9
  batch?: batch;
10
10
  category?: string;
11
- onAddToCart?: (id: string | number) => void;
11
+ onAddToCart?: (id: string | number, var_id: number) => void;
12
+ onNotifyMe?: (id: string | number, var_id: number) => void;
12
13
  addToCart?: boolean;
13
14
  goToCart?: boolean;
14
15
  OnGoToCart?: () => void;
15
16
  };
16
- export type price = {
17
- label: string;
18
- weight: number;
19
- unit: number;
20
- price: number;
21
- offer: number;
22
- };
23
17
  export type images = {
24
18
  imageUrl: string;
25
19
  imageId: number;
package/dist/Components/ProductDetails/ProductDtlPrice.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  import React from "react";
2
- import { price } from "./ProductDetailsProps";
2
+ import { options } from "../ProductCard/ProductCardProps";
3
3
  interface ProductDtlPriceProps {
4
- price: price[];
4
+ price: options[];
5
+ onSelect?: React.Dispatch<React.SetStateAction<options | undefined>>;
5
6
  }
6
- declare const ProductDtlPrice: ({ price }: ProductDtlPriceProps) => React.JSX.Element;
7
+ declare const ProductDtlPrice: ({ price, onSelect }: ProductDtlPriceProps) => React.JSX.Element;
7
8
  export default ProductDtlPrice;
package/dist/Components/ProductDetails/ProductDtlPrice.js CHANGED
@@ -27,23 +27,25 @@ var react_1 = __importStar(require("react"));
27
27
  var react_2 = require("@chakra-ui/react");
28
28
  var useCustomTheme_1 = require("../../Theme/useCustomTheme");
29
29
  var ProductDtlPrice = function (_a) {
30
- var price = _a.price;
30
+ var price = _a.price, onSelect = _a.onSelect;
31
31
  var _b = (0, react_1.useState)(0), selectedIndex = _b[0], setSelectedIndex = _b[1];
32
32
  var selected = price[selectedIndex];
33
- var originalPrice = selected.price + selected.offer;
34
- var discount = Math.round((selected.offer / originalPrice) * 100);
33
+ var discounted = Math.round(selected.price - (selected.price * selected.offer) / 100);
35
34
  var theme = (0, useCustomTheme_1.useCustomTheme)();
35
+ (0, react_1.useEffect)(function () {
36
+ onSelect === null || onSelect === void 0 ? void 0 : onSelect(selected);
37
+ }, [selected, onSelect]);
36
38
  return (react_1.default.createElement(react_2.VStack, { align: "start", spacing: 3, p: 4, borderRadius: "md", w: "full" },
37
39
  react_1.default.createElement(react_2.HStack, { spacing: 2, align: "center" },
38
- react_1.default.createElement(react_2.Text, { fontSize: "lg", color: theme.colors.gray[500], as: "s" },
40
+ selected.offer > 0 && (react_1.default.createElement(react_2.Text, { fontSize: "lg", color: theme.colors.gray[500], as: "s" },
39
41
  "\u20B9",
40
- originalPrice),
42
+ selected.price)),
41
43
  react_1.default.createElement(react_2.Text, { fontSize: "xl", color: theme.colors.red[500], fontWeight: "bold" },
42
44
  "\u20B9",
43
- selected.price),
45
+ discounted),
44
46
  react_1.default.createElement(react_2.Badge, { colorScheme: "pink", fontSize: "xs", borderRadius: "sm", px: 2, py: 0.5 },
45
47
  "SAVE ",
46
- discount,
48
+ selected.offer,
47
49
  "%")),
48
50
  react_1.default.createElement(react_2.Text, { fontSize: "md", fontWeight: "medium" }, selected.weight),
49
51
  react_1.default.createElement(react_2.Text, { fontSize: "sm", color: theme.colors.gray[600] }, "(Incl. of all taxes)"),
@@ -51,6 +53,6 @@ var ProductDtlPrice = function (_a) {
51
53
  react_1.default.createElement(react_2.Text, { fontSize: "sm", fontWeight: "bold", textTransform: "uppercase", mb: 1 },
52
54
  "Packs : ",
53
55
  selected.label),
54
- react_1.default.createElement(react_2.HStack, { spacing: 2 }, price.map(function (pack, idx) { return (react_1.default.createElement(react_2.Button, { key: pack.label, size: "sm", variant: idx === selectedIndex ? "solid" : "outline", colorScheme: idx === selectedIndex ? "blackAlpha" : undefined, onClick: function () { return setSelectedIndex(idx); } }, pack.label)); })))));
56
+ react_1.default.createElement(react_2.HStack, { spacing: 2 }, price.map(function (pack, idx) { return (react_1.default.createElement(react_2.Button, { key: pack.var_id, size: "sm", variant: idx === selectedIndex ? "solid" : "outline", colorScheme: idx === selectedIndex ? "blackAlpha" : undefined, onClick: function () { return setSelectedIndex(idx); } }, pack.label)); })))));
55
57
  };
56
58
  exports.default = ProductDtlPrice;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pixelize-design-library",
3
- "version": "2.2.75",
3
+ "version": "2.2.76",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",