contentoh-components-library 17.0.0 → 20.0.0
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/atoms/GenericModal/styles.js +1 -1
- package/dist/components/atoms/StatusTag/styles.js +1 -1
- package/dist/components/organisms/ProductImageModal/styles.js +1 -1
- package/dist/components/pages/RetailerProductEdition/index.js +22 -17
- package/package.json +1 -1
- package/src/components/atoms/GenericModal/styles.js +5 -2
- package/src/components/atoms/StatusTag/styles.js +3 -1
- package/src/components/organisms/ProductImageModal/styles.js +3 -0
- package/src/components/pages/RetailerProductEdition/index.js +17 -9
|
@@ -17,6 +17,6 @@ var _genericModalClose = _interopRequireDefault(require("../../../assets/images/
|
|
|
17
17
|
|
|
18
18
|
var _templateObject;
|
|
19
19
|
|
|
20
|
-
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n height: 100%;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n background-color: rgba(59, 59, 59, 0.53);\n backdrop-filter: blur(4px);\n z-index: 100;\n\n .global-styles {\n background-color: ", ";\n height: auto;\n width: auto;\n position: relative;\n border-radius: 15px;\n padding: 40px;\n text-align: center;\n .close-button {\n background-image: url(", ");\n background-color: transparent;\n width: 14px;\n height: 14px;\n cursor: pointer;\n border: none;\n position: absolute;\n right: 20px;\n top: 20px;\n }\n .general-white-button {\n width: 160px;\n height: 40px;\n color: ", ";\n border: 1px solid ", ";\n background-color: transparent;\n & + * {\n margin-left: 45px;\n height: 40px;\n width: 161px;\n }\n }\n\n &.log-out {\n padding-bottom: 60px;\n img {\n & + * {\n margin-top: 20px;\n }\n }\n .with-bold-text {\n font-size: 24px;\n & + * {\n margin-top: 20px;\n }\n }\n }\n\n &.delete-product {\n img {\n height: 50px;\n width: 56px;\n & + * {\n margin-top: 30px;\n }\n }\n .product-name-header {\n & + * {\n margin-
|
|
20
|
+
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n height: 100%;\n background-color: ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n background-color: rgba(59, 59, 59, 0.53);\n backdrop-filter: blur(4px);\n top: 0;\n left: 0;\n z-index: 100;\n\n .global-styles {\n background-color: ", ";\n height: auto;\n width: auto;\n position: relative;\n border-radius: 15px;\n padding: 40px;\n text-align: center;\n .close-button {\n background-image: url(", ");\n background-color: transparent;\n width: 14px;\n height: 14px;\n cursor: pointer;\n border: none;\n position: absolute;\n right: 20px;\n top: 20px;\n }\n .general-white-button {\n width: 160px;\n height: 40px;\n color: ", ";\n border: 1px solid ", ";\n background-color: transparent;\n & + * {\n margin-left: 45px;\n height: 40px;\n width: 161px;\n }\n }\n\n &.log-out {\n padding-bottom: 60px;\n img {\n & + * {\n margin-top: 20px;\n }\n }\n .with-bold-text {\n font-size: 24px;\n & + * {\n margin-top: 20px;\n }\n }\n }\n\n &.delete-product {\n img {\n height: 50px;\n width: 56px;\n & + * {\n margin-top: 30px;\n }\n }\n .product-name-header,\n .retailer-name-header {\n & + * {\n margin-top: 30px;\n }\n }\n }\n\n &.product-edition {\n padding-top: 50px;\n .product-name-header {\n & + * {\n margin-top: 25px;\n }\n }\n }\n\n &.send-invitation {\n width: 604px;\n img {\n & + * {\n margin-top: 40px;\n }\n }\n p {\n font-family: ", ";\n font-style: normal;\n font-size: 24px;\n color: ", ";\n line-height: 28px;\n span {\n font-family: ", ";\n }\n }\n }\n\n &.upload-image {\n width: 430px;\n padding: 50px;\n img {\n & + * {\n margin-top: 33px;\n }\n }\n .input-name-header {\n & + * {\n margin-top: 20px;\n }\n }\n .list-container {\n & + .general-button-default {\n margin-top: 40px;\n }\n }\n }\n }\n"])), _variables.GlobalColors.white, _variables.GlobalColors.deep_gray, _genericModalClose.default, _variables.GlobalColors.s2, _variables.GlobalColors.white, _variables.FontFamily.Raleway_500, _variables.GlobalColors.white, _variables.FontFamily.Raleway_700);
|
|
21
21
|
|
|
22
22
|
exports.Container = Container;
|
|
@@ -15,6 +15,6 @@ var _variables = require("../../../global-files/variables");
|
|
|
15
15
|
|
|
16
16
|
var _templateObject;
|
|
17
17
|
|
|
18
|
-
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: 30px;\n height: 20px;\n background-color: ", ";\n border-radius: 3px;\n\n p {\n text-align: center;\n color: ", ";\n font-family: ", ";\n font-size: 12px;\n line-height: 20px;\n }\n\n &.status-As,\n &.status-P {\n background-color: ", ";\n }\n\n &.status-Pr,\n &.status-Rr {\n background-color: ", ";\n }\n\n &.status-AA,\n &.status-AP,\n &.status-AC {\n background-color: ", ";\n }\n\n &.status-RA,\n &.status-RF,\n &.status-RP,\n &.status-RC {\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\n &.oval-form {\n border-radius: 10px;\n }\n"])), _variables.GlobalColors.s3, _variables.GlobalColors.white, _variables.FontFamily.Lato, _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);
|
|
18
|
+
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: 30px;\n height: 20px;\n background-color: ", ";\n border-radius: 3px;\n\n p {\n text-align: center;\n color: ", ";\n font-family: ", ";\n font-size: 12px;\n line-height: 20px;\n }\n\n &.status-As,\n &.status-P,\n &.status-IN_PROGRESS,\n &.status-QF {\n background-color: ", ";\n }\n\n &.status-Pr,\n &.status-Rr {\n background-color: ", ";\n }\n\n &.status-AA,\n &.status-AP,\n &.status-AC {\n background-color: ", ";\n }\n\n &.status-RA,\n &.status-RF,\n &.status-RP,\n &.status-RC {\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\n &.oval-form {\n border-radius: 10px;\n }\n"])), _variables.GlobalColors.s3, _variables.GlobalColors.white, _variables.FontFamily.Lato, _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);
|
|
19
19
|
|
|
20
20
|
exports.Container = Container;
|
|
@@ -15,6 +15,6 @@ var _variables = require("../../../global-files/variables");
|
|
|
15
15
|
|
|
16
16
|
var _templateObject;
|
|
17
17
|
|
|
18
|
-
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n width: 100%;\n overflow: auto;\n position: fixed;\n background-color: rgba(59, 59, 59, 0.53);\n backdrop-filter: blur(4px);\n\n .modal-container {\n display: flex;\n border-radius: 4px;\n overflow: hidden;\n\n .modal-data-container {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n padding: 15px;\n min-width: 375px;\n background-color: ", ";\n\n .validation-and-table-container {\n .validation-panel {\n position: relative;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n .circular-button {\n & + * {\n margin-left: 10px;\n }\n }\n\n .close-button {\n border-radius: 3px;\n width: 30px;\n height: 30px;\n padding: 0;\n border: 1px solid #f0eef2;\n background-size: 30px;\n }\n\n & + * {\n margin-top: 25px;\n }\n }\n }\n }\n }\n"])), _variables.GlobalColors.deep_gray);
|
|
18
|
+
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n width: 100%;\n overflow: auto;\n position: fixed;\n background-color: rgba(59, 59, 59, 0.53);\n backdrop-filter: blur(4px);\n left: 0;\n top: 0;\n z-index: 100;\n\n .modal-container {\n display: flex;\n border-radius: 4px;\n overflow: hidden;\n\n .modal-data-container {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n padding: 15px;\n min-width: 375px;\n background-color: ", ";\n\n .validation-and-table-container {\n .validation-panel {\n position: relative;\n display: flex;\n justify-content: flex-end;\n align-items: center;\n .circular-button {\n & + * {\n margin-left: 10px;\n }\n }\n\n .close-button {\n border-radius: 3px;\n width: 30px;\n height: 30px;\n padding: 0;\n border: 1px solid #f0eef2;\n background-size: 30px;\n }\n\n & + * {\n margin-top: 25px;\n }\n }\n }\n }\n }\n"])), _variables.GlobalColors.deep_gray);
|
|
19
19
|
|
|
20
20
|
exports.Container = Container;
|
|
@@ -656,20 +656,21 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
|
|
|
656
656
|
});
|
|
657
657
|
|
|
658
658
|
case 4:
|
|
659
|
-
|
|
659
|
+
setMessage("Descripciones guardadas con éxito");
|
|
660
|
+
_context6.next = 10;
|
|
660
661
|
break;
|
|
661
662
|
|
|
662
|
-
case
|
|
663
|
-
_context6.prev =
|
|
663
|
+
case 7:
|
|
664
|
+
_context6.prev = 7;
|
|
664
665
|
_context6.t0 = _context6["catch"](1);
|
|
665
666
|
console.log(_context6.t0);
|
|
666
667
|
|
|
667
|
-
case
|
|
668
|
+
case 10:
|
|
668
669
|
case "end":
|
|
669
670
|
return _context6.stop();
|
|
670
671
|
}
|
|
671
672
|
}
|
|
672
|
-
}, _callee6, null, [[1,
|
|
673
|
+
}, _callee6, null, [[1, 7]]);
|
|
673
674
|
}));
|
|
674
675
|
|
|
675
676
|
return function saveDescriptions() {
|
|
@@ -699,20 +700,21 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
|
|
|
699
700
|
});
|
|
700
701
|
|
|
701
702
|
case 4:
|
|
702
|
-
|
|
703
|
+
setMessage("Fichas técnicas guardadas con éxito");
|
|
704
|
+
_context7.next = 10;
|
|
703
705
|
break;
|
|
704
706
|
|
|
705
|
-
case
|
|
706
|
-
_context7.prev =
|
|
707
|
+
case 7:
|
|
708
|
+
_context7.prev = 7;
|
|
707
709
|
_context7.t0 = _context7["catch"](1);
|
|
708
710
|
console.log(_context7.t0);
|
|
709
711
|
|
|
710
|
-
case
|
|
712
|
+
case 10:
|
|
711
713
|
case "end":
|
|
712
714
|
return _context7.stop();
|
|
713
715
|
}
|
|
714
716
|
}
|
|
715
|
-
}, _callee7, null, [[1,
|
|
717
|
+
}, _callee7, null, [[1, 7]]);
|
|
716
718
|
}));
|
|
717
719
|
|
|
718
720
|
return function saveDatasheets() {
|
|
@@ -828,7 +830,7 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
|
|
|
828
830
|
|
|
829
831
|
case 29:
|
|
830
832
|
// setMainLoading(false);
|
|
831
|
-
setMessage("Completa los campos que solicita cada una de la imágenes o hay imágenes con el mismo tipo de toma
|
|
833
|
+
setMessage("Completa los campos que solicita cada una de la imágenes o hay imágenes con el mismo tipo de toma.\nRecuerda hay campos obligatorios y no podras avanzar si no estan completos.");
|
|
832
834
|
|
|
833
835
|
case 30:
|
|
834
836
|
case "end":
|
|
@@ -1416,9 +1418,9 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
|
|
|
1416
1418
|
if (selectedImages.length > 0) {
|
|
1417
1419
|
setMessage("¿Está seguro de eliminar las imágenes seleccionadas?");
|
|
1418
1420
|
setComponentsArray([/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
|
|
1419
|
-
text: "",
|
|
1420
|
-
|
|
1421
|
-
|
|
1421
|
+
text: "¿Está seguro de eliminar las imágenes seleccionadas?",
|
|
1422
|
+
headerType: "retailer-name-header",
|
|
1423
|
+
color: "white"
|
|
1422
1424
|
}, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
|
|
1423
1425
|
buttonType: "general-white-button",
|
|
1424
1426
|
label: "Cancelar",
|
|
@@ -1608,9 +1610,12 @@ var RetailerProductEdition = function RetailerProductEdition(_ref) {
|
|
|
1608
1610
|
sendToFacilitator: sendToFacilitator,
|
|
1609
1611
|
approveRejectButtons: approveRejectButtons
|
|
1610
1612
|
}), message.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GenericModal.GenericModal, {
|
|
1611
|
-
|
|
1612
|
-
|
|
1613
|
-
|
|
1613
|
+
buttonType: "delete-product",
|
|
1614
|
+
componentsArray: componentsArray.length > 0 ? componentsArray : [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
|
|
1615
|
+
headerType: "retailer-name-header",
|
|
1616
|
+
text: message,
|
|
1617
|
+
color: "white"
|
|
1618
|
+
}, "1")],
|
|
1614
1619
|
onClick: function onClick() {
|
|
1615
1620
|
return setMessage("");
|
|
1616
1621
|
}
|
package/package.json
CHANGED
|
@@ -12,6 +12,8 @@ export const Container = styled.div`
|
|
|
12
12
|
position: fixed;
|
|
13
13
|
background-color: rgba(59, 59, 59, 0.53);
|
|
14
14
|
backdrop-filter: blur(4px);
|
|
15
|
+
top: 0;
|
|
16
|
+
left: 0;
|
|
15
17
|
z-index: 100;
|
|
16
18
|
|
|
17
19
|
.global-styles {
|
|
@@ -69,9 +71,10 @@ export const Container = styled.div`
|
|
|
69
71
|
margin-top: 30px;
|
|
70
72
|
}
|
|
71
73
|
}
|
|
72
|
-
.product-name-header
|
|
74
|
+
.product-name-header,
|
|
75
|
+
.retailer-name-header {
|
|
73
76
|
& + * {
|
|
74
|
-
margin-
|
|
77
|
+
margin-top: 30px;
|
|
75
78
|
}
|
|
76
79
|
}
|
|
77
80
|
}
|
|
@@ -355,6 +355,7 @@ export const RetailerProductEdition = ({
|
|
|
355
355
|
},
|
|
356
356
|
}
|
|
357
357
|
);
|
|
358
|
+
setMessage("Descripciones guardadas con éxito");
|
|
358
359
|
} catch (error) {
|
|
359
360
|
console.log(error);
|
|
360
361
|
}
|
|
@@ -375,6 +376,7 @@ export const RetailerProductEdition = ({
|
|
|
375
376
|
},
|
|
376
377
|
}
|
|
377
378
|
);
|
|
379
|
+
setMessage("Fichas técnicas guardadas con éxito");
|
|
378
380
|
} catch (error) {
|
|
379
381
|
console.log(error);
|
|
380
382
|
}
|
|
@@ -453,7 +455,7 @@ export const RetailerProductEdition = ({
|
|
|
453
455
|
} else {
|
|
454
456
|
// setMainLoading(false);
|
|
455
457
|
setMessage(
|
|
456
|
-
"Completa los campos que solicita cada una de la imágenes o hay imágenes con el mismo tipo de toma
|
|
458
|
+
"Completa los campos que solicita cada una de la imágenes o hay imágenes con el mismo tipo de toma.\nRecuerda hay campos obligatorios y no podras avanzar si no estan completos."
|
|
457
459
|
);
|
|
458
460
|
}
|
|
459
461
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
@@ -925,9 +927,9 @@ export const RetailerProductEdition = ({
|
|
|
925
927
|
setComponentsArray([
|
|
926
928
|
<ScreenHeader
|
|
927
929
|
key={"1"}
|
|
928
|
-
text={""}
|
|
929
|
-
|
|
930
|
-
|
|
930
|
+
text={"¿Está seguro de eliminar las imágenes seleccionadas?"}
|
|
931
|
+
headerType="retailer-name-header"
|
|
932
|
+
color={"white"}
|
|
931
933
|
/>,
|
|
932
934
|
<Button
|
|
933
935
|
key={"2"}
|
|
@@ -1145,12 +1147,18 @@ export const RetailerProductEdition = ({
|
|
|
1145
1147
|
)}
|
|
1146
1148
|
{message.length > 0 && (
|
|
1147
1149
|
<GenericModal
|
|
1150
|
+
buttonType={"delete-product"}
|
|
1148
1151
|
componentsArray={
|
|
1149
|
-
componentsArray.length > 0
|
|
1150
|
-
componentsArray
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1152
|
+
componentsArray.length > 0
|
|
1153
|
+
? componentsArray
|
|
1154
|
+
: [
|
|
1155
|
+
<ScreenHeader
|
|
1156
|
+
key="1"
|
|
1157
|
+
headerType={"retailer-name-header"}
|
|
1158
|
+
text={message}
|
|
1159
|
+
color={"white"}
|
|
1160
|
+
/>,
|
|
1161
|
+
]
|
|
1154
1162
|
}
|
|
1155
1163
|
onClick={() => setMessage("")}
|
|
1156
1164
|
/>
|