contentoh-components-library 21.4.61 → 21.4.62

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 (69) hide show
  1. package/dist/components/molecules/BoxAttribute/styles.js +1 -1
  2. package/dist/components/molecules/BoxButtons/index.js +1 -0
  3. package/dist/components/molecules/TagAndInput/index.js +64 -3
  4. package/dist/components/organisms/InputGroup/index.js +153 -48
  5. package/dist/components/pages/ProviderProductEdition/ProviderProductEdition.stories.js +82 -146
  6. package/dist/components/pages/ProviderProductEdition/index.js +173 -138
  7. package/dist/components/pages/RetailerProductEdition/index.js +2 -2
  8. package/package.json +1 -1
  9. package/src/assets/images/Icons/info.svg +8 -0
  10. package/src/components/atoms/TabSection/styles.js +1 -1
  11. package/src/components/molecules/BoxAttribute/BoxAttribute.stories.js +16 -0
  12. package/src/components/molecules/BoxAttribute/index.js +71 -0
  13. package/src/components/molecules/BoxAttribute/styles.js +38 -0
  14. package/src/components/molecules/BoxButtons/BoxButtons.stories.js +15 -0
  15. package/src/components/molecules/BoxButtons/index.js +28 -0
  16. package/src/components/molecules/BoxButtons/styles.js +43 -0
  17. package/src/components/molecules/TagAndInput/index.js +52 -8
  18. package/src/components/organisms/Box/Box.stories.js +17 -0
  19. package/src/components/organisms/Box/index.js +103 -0
  20. package/src/components/organisms/Box/styles.js +48 -0
  21. package/src/components/organisms/BoxOnboarding/BoxOnboarding.stories.js +17 -0
  22. package/src/components/organisms/BoxOnboarding/index.js +60 -0
  23. package/src/components/organisms/BoxOnboarding/styles.js +44 -0
  24. package/src/components/organisms/InputGroup/index.js +233 -87
  25. package/src/components/pages/ProviderProductEdition/ProviderProductEdition.stories.js +86 -175
  26. package/src/components/pages/ProviderProductEdition/index.js +43 -16
  27. package/src/components/pages/RetailerProductEdition/index.js +4 -2
  28. package/dist/components/atoms/ImageCarousel/ImgeSlider.stories.js +0 -90
  29. package/dist/components/atoms/ImageCarousel/index.js +0 -120
  30. package/dist/components/atoms/ImageCarousel/styles.js +0 -18
  31. package/dist/components/atoms/PercentTag/PercentTag.stories.js +0 -31
  32. package/dist/components/atoms/PercentTag/index.js +0 -23
  33. package/dist/components/atoms/PercentTag/styles.js +0 -22
  34. package/dist/components/atoms/RatingStars/RatingStars.stories.js +0 -30
  35. package/dist/components/atoms/RatingStars/index.js +0 -53
  36. package/dist/components/atoms/RatingStars/styles.js +0 -18
  37. package/dist/components/atoms/RetailerCatalog/RetailerCatalog.stories.js +0 -48
  38. package/dist/components/atoms/RetailerCatalog/index.js +0 -69
  39. package/dist/components/atoms/RetailerCatalog/styles.js +0 -20
  40. package/dist/components/atoms/RetailerOption/RetailerOption.stories.js +0 -33
  41. package/dist/components/atoms/RetailerOption/index.js +0 -62
  42. package/dist/components/atoms/RetailerOption/styles.js +0 -20
  43. package/dist/components/atoms/RetailersList/RetailersList.stories.js +0 -45
  44. package/dist/components/atoms/RetailersList/index.js +0 -46
  45. package/dist/components/atoms/RetailersList/styles.js +0 -18
  46. package/dist/components/atoms/UserCatalog/UserCatalog.stories.js +0 -73
  47. package/dist/components/atoms/UserCatalog/index.js +0 -101
  48. package/dist/components/atoms/UserCatalog/styles.js +0 -18
  49. package/dist/components/atoms/UserOption/UserOption.stories.js +0 -40
  50. package/dist/components/atoms/UserOption/index.js +0 -130
  51. package/dist/components/atoms/UserOption/styles.js +0 -20
  52. package/dist/components/atoms/UserSelector/UserSelector.stories.js +0 -40
  53. package/dist/components/atoms/UserSelector/index.js +0 -98
  54. package/dist/components/atoms/UserSelector/styles.js +0 -32
  55. package/dist/components/molecules/GridItem/GridItem.stories.js +0 -123
  56. package/dist/components/molecules/GridItem/index.js +0 -152
  57. package/dist/components/molecules/GridItem/styles.js +0 -20
  58. package/dist/components/molecules/HeaderItem/ColumnItem.js +0 -23
  59. package/dist/components/molecules/HeaderItem/HeaderItem.stories.js +0 -70
  60. package/dist/components/molecules/HeaderItem/index.js +0 -42
  61. package/dist/components/molecules/HeaderItem/styles.js +0 -30
  62. package/dist/components/molecules/RowItem/ColumnItem.js +0 -23
  63. package/dist/components/molecules/RowItem/RowItem.stories.js +0 -5242
  64. package/dist/components/molecules/RowItem/index.js +0 -58
  65. package/dist/components/molecules/RowItem/styles.js +0 -30
  66. package/dist/components/organisms/GridProducts/GridProducts.stories.js +0 -5097
  67. package/dist/components/organisms/GridProducts/index.js +0 -63
  68. package/dist/components/organisms/GridProducts/styles.js +0 -18
  69. package/dist/components/organisms/GridProducts/utils.js +0 -149
@@ -140,6 +140,7 @@ export const ProviderProductEdition = ({
140
140
  const [datasheets, setDatasheets] = useState([]);
141
141
  const [images, setImages] = useReducer(reducerImages, {});
142
142
  const [showModal, setShowModal] = useState(false);
143
+ const [boxData, setBoxData] = useState();
143
144
  const { getRootProps, getInputProps } = useDropzone({
144
145
  accept: "image/*",
145
146
  noKeyboard: true,
@@ -695,11 +696,27 @@ export const ProviderProductEdition = ({
695
696
  };
696
697
 
697
698
  const saveDatasheets = async () => {
698
- setLoading(true);
699
+ const parseBoxData = [];
700
+ Object.entries(boxData).forEach(([, box], index) => {
701
+ const { value } = box;
702
+ const attributesIds = Object.keys(value);
703
+ attributesIds.forEach((attributeId) => {
704
+ const boxId = index + 1;
705
+ const valueOfAtribute = value[attributeId];
706
+ parseBoxData.push({
707
+ attributeId,
708
+ value: valueOfAtribute,
709
+ boxId,
710
+ })
711
+ });
712
+ });
713
+
699
714
  const dataObject = {
700
715
  articleId: product?.id_article,
701
716
  articleData: updatedDatasheets,
702
- };
717
+ ...(parseBoxData.length > 0 && { boxData: parseBoxData }),
718
+ };
719
+
703
720
  if (product?.orderId) dataObject["orderId"] = product?.orderId;
704
721
  try {
705
722
  const res = await axios.put(
@@ -718,7 +735,8 @@ export const ProviderProductEdition = ({
718
735
  }
719
736
  } catch (error) {
720
737
  console.log(error);
721
- }
738
+ }
739
+ console.log(dataObject)
722
740
  };
723
741
 
724
742
  const updateImages = useCallback(async () => {
@@ -1476,19 +1494,28 @@ export const ProviderProductEdition = ({
1476
1494
  )}
1477
1495
  {activeTab === "Ficha técnica" &&
1478
1496
  (product?.datasheet_status !== "NS" ? (
1479
- datasheets[0]?.data?.map((dataGroup, index) => (
1480
- <InputGroup
1481
- key={index + "-" + activeRetailer.name}
1482
- articleId={product.id_article}
1483
- version={version}
1484
- activeSection={activeTab}
1485
- inputGroup={dataGroup}
1486
- dataInputs={datasheets[1]}
1487
- updatedDatasheets={updatedDatasheets}
1488
- setUpdatedDatasheets={setUpdatedDatasheets}
1489
- //enableActions={enableActions(product.version_status)} ADD THIS VALIDATION
1490
- />
1491
- ))
1497
+ <div>
1498
+ {datasheets[0]?.data?.map((dataGroup, index) => (
1499
+ <InputGroup
1500
+ key={index + "-" + activeRetailer.name}
1501
+ articleId={product.id_article}
1502
+ version={version}
1503
+ activeSection={activeTab}
1504
+ inputGroup={dataGroup}
1505
+ dataInputs={datasheets[1]}
1506
+ updatedDatasheets={updatedDatasheets}
1507
+ setUpdatedDatasheets={setUpdatedDatasheets}
1508
+ isShowbox={true}
1509
+ activeRetailer={services[0][activeRetailer.id]}
1510
+ groupData={services[0][activeRetailer.id].data}
1511
+ setUpdatedBoxData={(e) => {
1512
+ setBoxData(e);
1513
+ }}
1514
+ index={index}
1515
+ //enableActions={enableActions(product.version_status)} ADD THIS VALIDATION
1516
+ ></InputGroup>
1517
+ ))}
1518
+ </div>
1492
1519
  ) : (
1493
1520
  <ScreenHeader
1494
1521
  text={"No cuentas con este servicio"}
@@ -231,7 +231,8 @@ export const RetailerProductEdition = ({
231
231
  product?.article?.id_article,
232
232
  product?.article?.category,
233
233
  parseInt(product?.article?.id_category),
234
- auditableVersion.version
234
+ auditableVersion.version,
235
+ token
235
236
  );
236
237
  getInputsData(
237
238
  auditServices,
@@ -260,7 +261,8 @@ export const RetailerProductEdition = ({
260
261
  product?.article?.id_article,
261
262
  product?.article?.category,
262
263
  parseInt(product?.article?.id_category),
263
- version
264
+ version,
265
+ token
264
266
  );
265
267
  if (auditableVersion) {
266
268
  loadAuditableData();
@@ -1,90 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.default = exports.ImageCarouselDefault = void 0;
9
-
10
- var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
11
-
12
- var _ = require(".");
13
-
14
- var _jsxRuntime = require("react/jsx-runtime");
15
-
16
- var _default = {
17
- title: "Components/atoms/ImageCarousel",
18
- component: _.ImageCarousel
19
- };
20
- exports.default = _default;
21
-
22
- var Template = function Template(args) {
23
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ImageCarousel, (0, _objectSpread2.default)({}, args));
24
- };
25
-
26
- var ImageCarouselDefault = Template.bind({});
27
- exports.ImageCarouselDefault = ImageCarouselDefault;
28
- ImageCarouselDefault.args = {
29
- imageArray: [{
30
- id: 35596,
31
- status: null,
32
- image_id: 1,
33
- packing_type: "3",
34
- image_type: "1",
35
- article_id: "38443",
36
- src: "https://d24s337exbt5zr.cloudfront.net/eyJidWNrZXQiOiJjb250ZW50LW1hbmFnZW1lbnQtaW1hZ2VzIiwia2V5IjoiaWQtMzg0NDMvMTUvMS1kNDQ2ZjIwNy0wYTkzLTQyNzgtYWZjNi01MTY2ZjIyY2EzNDMucG5nIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjoxMDAwLCJoZWlnaHQiOjEwMDAsImZpdCI6ImNvbnRhaW4iLCJiYWNrZ3JvdW5kIjp7InIiOjI1NSwiZyI6MjU1LCJiIjoyNTUsImFscGhhIjoxfX19fQ==",
37
- timestamp: "2023-05-30T03:01:12.000Z",
38
- id_version: 15,
39
- width: null,
40
- height: null,
41
- scene_type: null,
42
- image_shot_type: null,
43
- last_modified: "2023-06-05T23:49:49.000Z",
44
- name: "Central (Frente Comercial)",
45
- version: 15,
46
- ext: "png",
47
- uuid: "d446f207-0a93-4278-afc6-5166f22ca343",
48
- srcDB: "id-38443/15/1-d446f207-0a93-4278-afc6-5166f22ca343.png"
49
- }, {
50
- id: 35597,
51
- status: null,
52
- image_id: 3,
53
- packing_type: "3",
54
- image_type: "1",
55
- article_id: "38443",
56
- src: "https://d24s337exbt5zr.cloudfront.net/eyJidWNrZXQiOiJjb250ZW50LW1hbmFnZW1lbnQtaW1hZ2VzIiwia2V5IjoiaWQtMzg0NDMvMTUvMy0yOTZkMzU3ZC00OTUzLTRiMzktYjFjMy04YWZmZDI2NDgwMWIucG5nIiwiZWRpdHMiOnsicmVzaXplIjp7IndpZHRoIjoxMDAwLCJoZWlnaHQiOjEwMDAsImZpdCI6ImNvbnRhaW4iLCJiYWNrZ3JvdW5kIjp7InIiOjI1NSwiZyI6MjU1LCJiIjoyNTUsImFscGhhIjoxfX19fQ==",
57
- timestamp: "2023-05-30T03:01:12.000Z",
58
- id_version: 15,
59
- width: null,
60
- height: null,
61
- scene_type: null,
62
- image_shot_type: null,
63
- last_modified: "2023-06-05T23:49:49.000Z",
64
- name: "Trasera (Back)",
65
- version: 15,
66
- ext: "png",
67
- uuid: "296d357d-4953-4b39-b1c3-8affd264801b",
68
- srcDB: "id-38443/15/3-296d357d-4953-4b39-b1c3-8affd264801b.png"
69
- }, {
70
- id: 35598,
71
- status: null,
72
- image_id: 16,
73
- packing_type: "3",
74
- image_type: "1",
75
- article_id: "38443",
76
- src: "https://d24s337exbt5zr.cloudfront.net/eyJidWNrZXQiOiJjb250ZW50LW1hbmFnZW1lbnQtaW1hZ2VzIiwia2V5IjoiaWQtMzg0NDMvMTUvMTYtOGMzNDIzM2YtZTRiMC00MjU0LWFlYzUtZjEyN2ZiYjhkYmVkLnBuZyIsImVkaXRzIjp7InJlc2l6ZSI6eyJ3aWR0aCI6MTAwMCwiaGVpZ2h0IjoxMDAwLCJmaXQiOiJjb250YWluIiwiYmFja2dyb3VuZCI6eyJyIjoyNTUsImciOjI1NSwiYiI6MjU1LCJhbHBoYSI6MX19fX0=",
77
- timestamp: "2023-05-30T03:01:12.000Z",
78
- id_version: 15,
79
- width: null,
80
- height: null,
81
- scene_type: null,
82
- image_shot_type: null,
83
- last_modified: "2023-06-05T23:49:49.000Z",
84
- name: "Detalle / Características 1",
85
- version: 15,
86
- ext: "png",
87
- uuid: "8c34233f-e4b0-4254-aec5-f127fbb8dbed",
88
- srcDB: "id-38443/15/16-8c34233f-e4b0-4254-aec5-f127fbb8dbed.png"
89
- }]
90
- };
@@ -1,120 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.ImageCarousel = void 0;
9
-
10
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
11
-
12
- var _styles = require("./styles");
13
-
14
- var _react = require("react");
15
-
16
- var _reactImageFallback = _interopRequireDefault(require("react-image-fallback"));
17
-
18
- var _Spinner = _interopRequireDefault(require("../../../assets/images/Icons/Spinner.gif"));
19
-
20
- var _ArrowBackIos = _interopRequireDefault(require("@mui/icons-material/ArrowBackIos"));
21
-
22
- var _defaultProductImage = _interopRequireDefault(require("../../../assets/images/defaultImages/defaultProductImage.png"));
23
-
24
- var _jsxRuntime = require("react/jsx-runtime");
25
-
26
- var ImageCarousel = function ImageCarousel(_ref) {
27
- var _ref$imageArray = _ref.imageArray,
28
- imageArray = _ref$imageArray === void 0 ? [] : _ref$imageArray;
29
-
30
- var _useState = (0, _react.useState)(0),
31
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
32
- currentIndex = _useState2[0],
33
- setCurrentIndex = _useState2[1];
34
-
35
- var _useState3 = (0, _react.useState)(false),
36
- _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
37
- transitioning = _useState4[0],
38
- setTransitioning = _useState4[1];
39
-
40
- var _useState5 = (0, _react.useState)(false),
41
- _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
42
- isHover = _useState6[0],
43
- setIsHover = _useState6[1];
44
-
45
- var goToNextSlide = function goToNextSlide() {
46
- if (!transitioning) {
47
- setTransitioning(true);
48
- setCurrentIndex(function (prevIndex) {
49
- return (prevIndex + 1) % imageArray.length;
50
- });
51
- setTimeout(function () {
52
- setTransitioning(false);
53
- }, 500); // Adjust the transition duration to match your CSS
54
- }
55
- };
56
-
57
- var goToPrevSlide = function goToPrevSlide() {
58
- if (!transitioning) {
59
- setTransitioning(true);
60
- setCurrentIndex(function (prevIndex) {
61
- return (prevIndex - 1 + imageArray.length) % imageArray.length;
62
- });
63
- setTimeout(function () {
64
- setTransitioning(false);
65
- }, 500); // Adjust the transition duration to match your CSS
66
- }
67
- }; // useEffect(() => {
68
- // const delay = 0;
69
- // let repeat;
70
- // setTimeout(() => {
71
- // repeat = setInterval(() => {
72
- // if (!isHover && imageArray.length > 1) goToNextSlide();
73
- // }, 10000);
74
- // }, delay);
75
- // return () => {
76
- // clearInterval(repeat);
77
- // };
78
- // }, [isHover]);
79
-
80
-
81
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container // onMouseEnter={() => setIsHover(true)}
82
- // onMouseLeave={() => setIsHover(false)}
83
- , {
84
- children: [imageArray.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
85
- className: "prev",
86
- onClick: function onClick(e) {
87
- e.stopPropagation();
88
- goToPrevSlide();
89
- },
90
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowBackIos.default, {})
91
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
92
- className: "slide-container",
93
- children: imageArray.length ? imageArray.map(function (img, index) {
94
- return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
95
- className: "image-container slide ".concat(index === currentIndex ? "active" : ""),
96
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactImageFallback.default, {
97
- src: "https://".concat(process.env.REACT_APP_IMAGES_BUCKET, ".s3.amazonaws.com/").concat(img.src),
98
- fallbackImage: _Spinner.default,
99
- alt: img === null || img === void 0 ? void 0 : img.name,
100
- style: {
101
- transform: "translateX(-".concat(currentIndex * 100, "%)")
102
- }
103
- }, index)
104
- }, index);
105
- }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
106
- src: _defaultProductImage.default,
107
- alt: "not image"
108
- })
109
- }), imageArray.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
110
- className: "next",
111
- onClick: function onClick(e) {
112
- e.stopPropagation();
113
- goToNextSlide();
114
- },
115
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowBackIos.default, {})
116
- })]
117
- });
118
- };
119
-
120
- exports.ImageCarousel = ImageCarousel;
@@ -1,18 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.Container = void 0;
9
-
10
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
11
-
12
- var _styledComponents = _interopRequireDefault(require("styled-components"));
13
-
14
- var _templateObject;
15
-
16
- var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: 174px;\n height: 175px;\n border-radius: 5px 5px 0px 0px;\n position: relative;\n overflow: hidden;\n display: flex;\n background-color: #f0f0f0;\n\n .slide-container {\n display: flex;\n width: 100%;\n\n .image-container {\n width: 100%;\n height: 100%;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: fill;\n }\n\n &.slide {\n flex: 0 0 100%;\n opacity: 0;\n transition: opacity 0.5s ease-in-out;\n\n &.active {\n opacity: 1;\n }\n }\n }\n\n & > img {\n width: 100%;\n }\n }\n\n button {\n position: absolute;\n top: 0;\n border: none;\n cursor: pointer;\n background-color: transparent;\n color: white;\n z-index: 1;\n height: 100%;\n width: 30px;\n\n svg {\n font-size: 24px;\n }\n\n &.prev {\n left: 0;\n\n &:hover {\n background: linear-gradient(90deg, darkgray, transparent);\n }\n }\n &.next {\n right: 0;\n\n svg {\n transform: rotate(180deg);\n }\n &:hover {\n background: linear-gradient(-90deg, darkgray, transparent);\n }\n }\n }\n\n button:focus {\n outline: none;\n }\n"])));
17
-
18
- exports.Container = Container;
@@ -1,31 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.default = exports.PercentTagDefault = void 0;
9
-
10
- var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
11
-
12
- var _ = require(".");
13
-
14
- var _jsxRuntime = require("react/jsx-runtime");
15
-
16
- var _default = {
17
- title: "Components/atoms/PercentTag",
18
- component: _.PercentTag
19
- };
20
- exports.default = _default;
21
-
22
- var Template = function Template(args) {
23
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.PercentTag, (0, _objectSpread2.default)({}, args));
24
- };
25
-
26
- var PercentTagDefault = Template.bind({});
27
- exports.PercentTagDefault = PercentTagDefault;
28
- PercentTagDefault.args = {
29
- percent: 88,
30
- progressBarType: "AA"
31
- };
@@ -1,23 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.PercentTag = void 0;
7
-
8
- var _styles = require("./styles");
9
-
10
- var _jsxRuntime = require("react/jsx-runtime");
11
-
12
- var PercentTag = function PercentTag(_ref) {
13
- var percent = _ref.percent,
14
- progressBarType = _ref.progressBarType;
15
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
16
- className: "status-".concat(progressBarType),
17
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
18
- children: [percent, "%"]
19
- })
20
- });
21
- };
22
-
23
- exports.PercentTag = PercentTag;
@@ -1,22 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.Container = void 0;
9
-
10
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
11
-
12
- var _styledComponents = _interopRequireDefault(require("styled-components"));
13
-
14
- var _variables = require("../../../global-files/variables");
15
-
16
- var _templateObject;
17
-
18
- var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n display: inline-block;\n padding: 0 10px;\n border-radius: 5px;\n font-family: ", ";\n font-weight: 600;\n font-size: 12px;\n line-height: 20px;\n color: ", ";\n\n &.status-CA,\n &.status-IE {\n background-color: ", ";\n }\n\n &.status-R,\n &.status-AS,\n &.status-PA {\n background-color: ", ";\n }\n\n &.status-AA,\n &.status-AP,\n &.status-ACA,\n &.status-AC {\n background-color: ", ";\n }\n\n &.status-RA,\n &.status-RC,\n &.status-RP,\n &.status-RCA {\n background-color: ", ";\n }\n\n &.status-Dat,\n &.status-Dsc,\n &.status-Imgs {\n background-color: ", ";\n }\n\n &.status-Ex {\n background-color: ", ";\n }\n\n &.status-DDI {\n background-color: ", ";\n }\n\n &.status-GLD {\n background-color: ", ";\n }\n\n &.status-TAB {\n background-color: ", ";\n }\n\n &.status-Pt {\n background-color: ", ";\n color: ", ";\n }\n"])), _variables.GlobalColors.s3, _variables.FontFamily.Lato, function (backgroundColor) {
19
- return backgroundColor === "s2" || backgroundColor === "s1" ? _variables.GlobalColors.s4 : _variables.GlobalColors.white;
20
- }, _variables.GlobalColors.in_progress, _variables.GlobalColors.reception, _variables.GlobalColors.finished, _variables.GlobalColors.rejected_status, _variables.GlobalColors.s4, _variables.GlobalColors.exported, _variables.GlobalColors.original_purpura, _variables.GlobalColors.in_progress, _variables.GlobalColors.deep_gray, _variables.GlobalColors.s2, _variables.GlobalColors.s4);
21
-
22
- exports.Container = Container;
@@ -1,30 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.default = exports.RatingStarsDefault = void 0;
9
-
10
- var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
11
-
12
- var _ = require(".");
13
-
14
- var _jsxRuntime = require("react/jsx-runtime");
15
-
16
- var _default = {
17
- title: "Components/atoms/RatingStars",
18
- component: _.RatingStars
19
- };
20
- exports.default = _default;
21
-
22
- var Template = function Template(args) {
23
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.RatingStars, (0, _objectSpread2.default)({}, args));
24
- };
25
-
26
- var RatingStarsDefault = Template.bind({});
27
- exports.RatingStarsDefault = RatingStarsDefault;
28
- RatingStarsDefault.args = {
29
- percent: 80
30
- };
@@ -1,53 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.RatingStars = void 0;
9
-
10
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
11
-
12
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
13
-
14
- var _styles = require("./styles");
15
-
16
- var _freeRegularSvgIcons = require("@fortawesome/free-regular-svg-icons");
17
-
18
- var _reactFontawesome = require("@fortawesome/react-fontawesome");
19
-
20
- var _react = require("react");
21
-
22
- var _jsxRuntime = require("react/jsx-runtime");
23
-
24
- var RatingStars = function RatingStars(_ref) {
25
- var _ref$ratingValue = _ref.ratingValue,
26
- ratingValue = _ref$ratingValue === void 0 ? 0 : _ref$ratingValue;
27
-
28
- var _useState = (0, _react.useState)(0),
29
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
30
- rating = _useState2[0],
31
- setRating = _useState2[1];
32
-
33
- var handleRating = function handleRating(value) {
34
- setRating(value);
35
- };
36
-
37
- (0, _react.useEffect)(function () {
38
- setRating(ratingValue);
39
- }, []);
40
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
41
- children: (0, _toConsumableArray2.default)(Array(5)).map(function (_, index) {
42
- return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
43
- className: "star ".concat(index < rating ? "active" : ""),
44
- onClick: function onClick() {
45
- return handleRating(index + 1);
46
- },
47
- children: "\u2605"
48
- }, index);
49
- })
50
- });
51
- };
52
-
53
- exports.RatingStars = RatingStars;
@@ -1,18 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.Container = void 0;
9
-
10
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
11
-
12
- var _styledComponents = _interopRequireDefault(require("styled-components"));
13
-
14
- var _templateObject;
15
-
16
- var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n font-size: 10px;\n display: flex;\n align-items: center;\n\n .star {\n cursor: pointer;\n font-size: 12px;\n color: #d9d9d9;\n transition: color 0.3s;\n line-height: 10px;\n\n &:hover {\n color: gold;\n }\n\n &.active {\n transform: scale(1.2);\n color: #8a6caa;\n }\n\n &:not(:first-child) {\n margin-left: 5px;\n }\n }\n"])));
17
-
18
- exports.Container = Container;
@@ -1,48 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.default = exports.RetailerCatalogDefault = void 0;
9
-
10
- var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
11
-
12
- var _ = require(".");
13
-
14
- var _jsxRuntime = require("react/jsx-runtime");
15
-
16
- var _default = {
17
- title: "Components/atoms/RetailerCatalog",
18
- component: _.RetailerCatalog
19
- };
20
- exports.default = _default;
21
-
22
- var Template = function Template(args) {
23
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.RetailerCatalog, (0, _objectSpread2.default)({}, args));
24
- };
25
-
26
- var RetailerCatalogDefault = Template.bind({});
27
- exports.RetailerCatalogDefault = RetailerCatalogDefault;
28
- RetailerCatalogDefault.args = {
29
- limit: 3,
30
- articleId: 39474,
31
- orderId: 15270,
32
- retailers: [{
33
- id: 58,
34
- name: "The Home Depot Golden"
35
- }, {
36
- id: 59,
37
- name: "The Home Depot Platinum"
38
- }, {
39
- id: 60,
40
- name: "The Home Depot Resizing"
41
- }, {
42
- id: 61,
43
- name: "Home Depot TAB"
44
- }, {
45
- id: 68,
46
- name: "The Home Depot Dropship"
47
- }]
48
- };
@@ -1,69 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.RetailerCatalog = void 0;
9
-
10
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
11
-
12
- var _react = require("react");
13
-
14
- var _Avatar = require("../Avatar");
15
-
16
- var _styles = require("./styles");
17
-
18
- var _customHooks = require("../../../global-files/customHooks");
19
-
20
- var _RetailersList = require("../RetailersList");
21
-
22
- var _jsxRuntime = require("react/jsx-runtime");
23
-
24
- var RetailerCatalog = function RetailerCatalog(_ref) {
25
- var _ref$retailers = _ref.retailers,
26
- retailers = _ref$retailers === void 0 ? [] : _ref$retailers,
27
- _ref$limit = _ref.limit,
28
- limit = _ref$limit === void 0 ? 3 : _ref$limit,
29
- article = _ref.article,
30
- _ref$id = _ref.id,
31
- id = _ref$id === void 0 ? "retailers-catalog" : _ref$id;
32
-
33
- var _useState = (0, _react.useState)(0),
34
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
35
- retLimit = _useState2[0],
36
- setRetLimit = _useState2[1];
37
-
38
- var _useCloseModal = (0, _customHooks.useCloseModal)(id),
39
- _useCloseModal2 = (0, _slicedToArray2.default)(_useCloseModal, 2),
40
- showRetailers = _useCloseModal2[0],
41
- setShowRetailers = _useCloseModal2[1];
42
-
43
- (0, _react.useEffect)(function () {
44
- setRetLimit(limit);
45
- }, [retailers]);
46
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
47
- onClick: function onClick(e) {
48
- setShowRetailers(!showRetailers);
49
- },
50
- id: id,
51
- children: [retailers.map(function (retailer, i) {
52
- return i < limit && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.Avatar, {
53
- image: "https://content-management-images.s3.amazonaws.com/retailers/".concat(retailer.id, ".png"),
54
- altText: retailer === null || retailer === void 0 ? void 0 : retailer.name,
55
- imageType: "medium-image"
56
- }, retailer.id + "-" + i);
57
- }), retailers.length > retLimit && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
58
- className: "retailers-limit",
59
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
60
- children: ["+", retailers.length - retLimit]
61
- })
62
- }), showRetailers && /*#__PURE__*/(0, _jsxRuntime.jsx)(_RetailersList.RetailersList, {
63
- retailers: retailers,
64
- article: article
65
- })]
66
- });
67
- };
68
-
69
- exports.RetailerCatalog = RetailerCatalog;
@@ -1,20 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.Container = void 0;
9
-
10
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
11
-
12
- var _styledComponents = _interopRequireDefault(require("styled-components"));
13
-
14
- var _variables = require("../../../global-files/variables");
15
-
16
- var _templateObject;
17
-
18
- var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n position: relative;\n width: 100%;\n\n .retailers-limit {\n width: 26px;\n height: 26px;\n border-radius: 50%;\n background-color: #f0f0f0;\n\n p {\n font-family: ", ";\n font-size: 12px;\n line-height: 26px;\n color: #262626;\n text-align: center;\n }\n }\n\n > * + * {\n margin-left: -5px;\n }\n"])), _variables.FontFamily.Lato);
19
-
20
- exports.Container = Container;