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.
- package/dist/components/molecules/BoxAttribute/styles.js +1 -1
- package/dist/components/molecules/BoxButtons/index.js +1 -0
- package/dist/components/molecules/TagAndInput/index.js +64 -3
- package/dist/components/organisms/InputGroup/index.js +153 -48
- package/dist/components/pages/ProviderProductEdition/ProviderProductEdition.stories.js +82 -146
- package/dist/components/pages/ProviderProductEdition/index.js +173 -138
- package/dist/components/pages/RetailerProductEdition/index.js +2 -2
- package/package.json +1 -1
- package/src/assets/images/Icons/info.svg +8 -0
- package/src/components/atoms/TabSection/styles.js +1 -1
- package/src/components/molecules/BoxAttribute/BoxAttribute.stories.js +16 -0
- package/src/components/molecules/BoxAttribute/index.js +71 -0
- package/src/components/molecules/BoxAttribute/styles.js +38 -0
- package/src/components/molecules/BoxButtons/BoxButtons.stories.js +15 -0
- package/src/components/molecules/BoxButtons/index.js +28 -0
- package/src/components/molecules/BoxButtons/styles.js +43 -0
- package/src/components/molecules/TagAndInput/index.js +52 -8
- package/src/components/organisms/Box/Box.stories.js +17 -0
- package/src/components/organisms/Box/index.js +103 -0
- package/src/components/organisms/Box/styles.js +48 -0
- package/src/components/organisms/BoxOnboarding/BoxOnboarding.stories.js +17 -0
- package/src/components/organisms/BoxOnboarding/index.js +60 -0
- package/src/components/organisms/BoxOnboarding/styles.js +44 -0
- package/src/components/organisms/InputGroup/index.js +233 -87
- package/src/components/pages/ProviderProductEdition/ProviderProductEdition.stories.js +86 -175
- package/src/components/pages/ProviderProductEdition/index.js +43 -16
- package/src/components/pages/RetailerProductEdition/index.js +4 -2
- package/dist/components/atoms/ImageCarousel/ImgeSlider.stories.js +0 -90
- package/dist/components/atoms/ImageCarousel/index.js +0 -120
- package/dist/components/atoms/ImageCarousel/styles.js +0 -18
- package/dist/components/atoms/PercentTag/PercentTag.stories.js +0 -31
- package/dist/components/atoms/PercentTag/index.js +0 -23
- package/dist/components/atoms/PercentTag/styles.js +0 -22
- package/dist/components/atoms/RatingStars/RatingStars.stories.js +0 -30
- package/dist/components/atoms/RatingStars/index.js +0 -53
- package/dist/components/atoms/RatingStars/styles.js +0 -18
- package/dist/components/atoms/RetailerCatalog/RetailerCatalog.stories.js +0 -48
- package/dist/components/atoms/RetailerCatalog/index.js +0 -69
- package/dist/components/atoms/RetailerCatalog/styles.js +0 -20
- package/dist/components/atoms/RetailerOption/RetailerOption.stories.js +0 -33
- package/dist/components/atoms/RetailerOption/index.js +0 -62
- package/dist/components/atoms/RetailerOption/styles.js +0 -20
- package/dist/components/atoms/RetailersList/RetailersList.stories.js +0 -45
- package/dist/components/atoms/RetailersList/index.js +0 -46
- package/dist/components/atoms/RetailersList/styles.js +0 -18
- package/dist/components/atoms/UserCatalog/UserCatalog.stories.js +0 -73
- package/dist/components/atoms/UserCatalog/index.js +0 -101
- package/dist/components/atoms/UserCatalog/styles.js +0 -18
- package/dist/components/atoms/UserOption/UserOption.stories.js +0 -40
- package/dist/components/atoms/UserOption/index.js +0 -130
- package/dist/components/atoms/UserOption/styles.js +0 -20
- package/dist/components/atoms/UserSelector/UserSelector.stories.js +0 -40
- package/dist/components/atoms/UserSelector/index.js +0 -98
- package/dist/components/atoms/UserSelector/styles.js +0 -32
- package/dist/components/molecules/GridItem/GridItem.stories.js +0 -123
- package/dist/components/molecules/GridItem/index.js +0 -152
- package/dist/components/molecules/GridItem/styles.js +0 -20
- package/dist/components/molecules/HeaderItem/ColumnItem.js +0 -23
- package/dist/components/molecules/HeaderItem/HeaderItem.stories.js +0 -70
- package/dist/components/molecules/HeaderItem/index.js +0 -42
- package/dist/components/molecules/HeaderItem/styles.js +0 -30
- package/dist/components/molecules/RowItem/ColumnItem.js +0 -23
- package/dist/components/molecules/RowItem/RowItem.stories.js +0 -5242
- package/dist/components/molecules/RowItem/index.js +0 -58
- package/dist/components/molecules/RowItem/styles.js +0 -30
- package/dist/components/organisms/GridProducts/GridProducts.stories.js +0 -5097
- package/dist/components/organisms/GridProducts/index.js +0 -63
- package/dist/components/organisms/GridProducts/styles.js +0 -18
- 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
|
-
|
|
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
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1482
|
-
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
|
|
1489
|
-
|
|
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;
|