contentoh-components-library 21.3.53 → 21.3.54
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/.env.development +2 -0
- package/dist/components/atoms/ButtonV2/styles.js +1 -1
- package/dist/components/atoms/Status/styles.js +1 -1
- package/dist/components/atoms/VerticalSideMenuMainPage/index.js +18 -23
- package/dist/components/atoms/VerticalSideMenuMainPage/styles.js +4 -4
- package/dist/components/molecules/CarouselImagesLogin/index.js +1 -1
- package/dist/components/molecules/HeaderTop/index.js +68 -11
- package/dist/components/organisms/Chat/Chat.stories.js +21 -1
- package/dist/components/organisms/Chat/ContainerItems/index.js +19 -3
- package/dist/components/organisms/Chat/ContainerItems/styles.js +1 -1
- package/dist/components/organisms/Chat/ContentChat/index.js +343 -191
- package/dist/components/organisms/Chat/Footer/index.js +48 -39
- package/dist/components/organisms/Chat/index.js +48 -3
- package/dist/components/organisms/DashboardMetric/dashboardMetricUtils.js +27 -0
- package/dist/components/organisms/FullProductNameHeader/index.js +2 -2
- package/dist/components/organisms/GlobalModal/styles.js +1 -1
- package/dist/components/organisms/OrderDetail/styles.js +1 -1
- package/dist/components/organisms/OrderDetail/utils/Table/styles.js +1 -1
- package/dist/components/pages/Dashboard/Dashboard.stories.js +31 -50
- package/dist/components/pages/ProviderProductEdition/ProviderProductEdition.stories.js +198 -81
- package/dist/components/pages/ProviderProductEdition/index.js +725 -429
- package/dist/components/pages/ProviderProductEdition/styles.js +1 -1
- package/dist/components/pages/RetailerProductEdition/RetailerProductEdition.stories.js +72 -89
- package/dist/components/pages/RetailerProductEdition/index.js +267 -278
- package/dist/components/pages/RetailerProductEdition/styles.js +1 -1
- package/dist/components/pages/RetailerProductEdition/utils.js +61 -2
- package/dist/index.js +13 -0
- package/package.json +7 -6
- package/src/components/atoms/ButtonV2/styles.js +1 -1
- package/src/components/atoms/Status/styles.js +4 -0
- package/src/components/atoms/VerticalSideMenuMainPage/index.js +18 -22
- package/src/components/atoms/VerticalSideMenuMainPage/styles.js +3 -4
- package/src/components/molecules/CarouselImagesLogin/index.js +1 -1
- package/src/components/molecules/HeaderTop/index.js +52 -6
- package/src/components/organisms/Chat/Chat.stories.js +21 -0
- package/src/components/organisms/Chat/ContainerItems/index.js +18 -2
- package/src/components/organisms/Chat/ContainerItems/styles.js +10 -2
- package/src/components/organisms/Chat/ContentChat/index.js +81 -6
- package/src/components/organisms/Chat/Footer/index.js +11 -0
- package/src/components/organisms/Chat/index.js +47 -3
- package/src/components/organisms/DashboardMetric/dashboardMetricUtils.js +18 -1
- package/src/components/organisms/FullProductNameHeader/index.js +1 -1
- package/src/components/organisms/GlobalModal/styles.js +10 -0
- package/src/components/organisms/OrderDetail/index.js +1 -0
- package/src/components/organisms/OrderDetail/styles.js +1 -1
- package/src/components/organisms/OrderDetail/utils/Table/styles.js +0 -1
- package/src/components/organisms/TableResizable/TableResizable.stories.js +17 -0
- package/src/components/organisms/TableResizable/index.js +119 -0
- package/src/components/organisms/TableResizable/styles.js +133 -0
- package/src/components/organisms/TableResizable/utils.js +46 -0
- package/src/components/pages/Dashboard/Dashboard.stories.js +31 -55
- package/src/components/pages/ProviderProductEdition/ProviderProductEdition.stories.js +214 -88
- package/src/components/pages/ProviderProductEdition/index.js +323 -160
- package/src/components/pages/ProviderProductEdition/styles.js +5 -1
- package/src/components/pages/RetailerProductEdition/RetailerProductEdition.stories.js +75 -91
- package/src/components/pages/RetailerProductEdition/index.js +111 -137
- package/src/components/pages/RetailerProductEdition/styles.js +4 -0
- package/src/components/pages/RetailerProductEdition/utils.js +37 -0
- package/src/index.js +1 -0
package/.env.development
CHANGED
|
@@ -24,6 +24,8 @@ REACT_APP_PENDING_INVITATIONS=https://fc069ovhuk.execute-api.us-east-1.amazonaws
|
|
|
24
24
|
REACT_APP_PRODUCTS_CHAT_ENDPOINT=https://fc069ovhuk.execute-api.us-east-1.amazonaws.com/dev/products-chat
|
|
25
25
|
REACT_APP_TICKETS_CHAT_ENDPOINT=https://ocqbzaa4a2.execute-api.us-east-1.amazonaws.com/dev/ticket-chat
|
|
26
26
|
REACT_APP_GET_AUDIT=https://fc069ovhuk.execute-api.us-east-1.amazonaws.com/dev/version-manager
|
|
27
|
+
REACT_APP_READ_MESSAGES=https://fc069ovhuk.execute-api.us-east-1.amazonaws.com/dev/read-messages
|
|
28
|
+
REACT_APP_CREATE_MESSAGES=https://fc069ovhuk.execute-api.us-east-1.amazonaws.com/dev/create-messages
|
|
27
29
|
|
|
28
30
|
REACT_APP_IMAGES_ENDPOINT=https://content-management-images.s3.amazonaws.com
|
|
29
31
|
REACT_APP_IMAGES_BUCKET=content-management-images
|
|
@@ -15,7 +15,7 @@ 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: fit-content;\n padding: 0px;\n cursor: ", ";\n border-radius: ", ";\n border: none;\n\n .button {\n --size: ", "px;\n width: 100%;\n min-width: min-content;\n cursor: inherit;\n display: flex;\n flex-direction: ", ";\n gap: 7px;\n align-items: center;\n justify-content: center;\n padding: ", ";\n border-radius: inherit;\n border: ", ";\n font-family: ", ", sans-serif;\n font-size: var(--size);\n line-height: 1.2;\n text-transform: none;\n\n // tipos de botones fill\n &.fill {\n &.white {\n background-color: white;\n color: #e33aa9;\n border-color: #e33aa9;\n &:hover {\n background-color: #f4f4f4;\n }\n }\n &.whiteS2 {\n background-color: white;\n color: #7b7979;\n border-color: #f0f0f0;\n &:hover {\n background-color: #f4f4f4;\n }\n }\n &.whiteS3 {\n background-color: white;\n color: #262626;\n border-color: #f0f0f0;\n &:hover {\n background-color: #f4f4f4;\n }\n }\n &.whiteS4 {\n background-color: white;\n color: #8a6caa;\n border-color: #8a6caa;\n &:hover {\n background-color: #e0e0f1;\n }\n }\n &.pink {\n background-color: #e33aa9;\n color:
|
|
18
|
+
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: fit-content;\n padding: 0px;\n cursor: ", ";\n border-radius: ", ";\n border: none;\n\n .button {\n --size: ", "px;\n width: 100%;\n min-width: min-content;\n cursor: inherit;\n display: flex;\n flex-direction: ", ";\n gap: 7px;\n align-items: center;\n justify-content: center;\n padding: ", ";\n border-radius: inherit;\n border: ", ";\n font-family: ", ", sans-serif;\n font-size: var(--size);\n line-height: 1.2;\n text-transform: none;\n\n // tipos de botones fill\n &.fill {\n &.white {\n background-color: white;\n color: #e33aa9;\n border-color: #e33aa9;\n &:hover {\n background-color: #f4f4f4;\n }\n }\n &.whiteS2 {\n background-color: white;\n color: #7b7979;\n border-color: #f0f0f0;\n &:hover {\n background-color: #f4f4f4;\n }\n }\n &.whiteS3 {\n background-color: white;\n color: #262626;\n border-color: #f0f0f0;\n &:hover {\n background-color: #f4f4f4;\n }\n }\n &.whiteS4 {\n background-color: white;\n color: #8a6caa;\n border-color: #8a6caa;\n &:hover {\n background-color: #e0e0f1;\n }\n }\n &.pink {\n background-color: #e33aa9;\n color: red;\n border-color: #e33aa9;\n &:hover {\n background-color: #b42983;\n }\n }\n &.gray {\n background-color: #e8e5e5;\n color: #262626;\n border-color: #7b7979;\n .icon,\n .iconLoading {\n color: #7b7979;\n }\n &:hover {\n background-color: #d6d3d3;\n }\n }\n &.purple {\n background-color: #f7f7fc;\n color: #8a6caa;\n border-color: #8a6caa;\n &:hover {\n background-color: #e0e0f1;\n }\n }\n &.purpleS2 {\n background-color: #8a6caa;\n color: white;\n border-color: #8a6caa;\n &:hover {\n background-color: #61467e;\n }\n }\n }\n\n // tipos de botones transparent\n &.transparent {\n &:hover {\n background-color: transparent;\n }\n &.white {\n color: white;\n border-color: #e33aa9;\n &:hover {\n color: #d6d4d4;\n }\n }\n &.pink {\n color: #e33aa9;\n border-color: #e33aa9;\n &:hover {\n color: #b42983;\n }\n }\n &.gray {\n color: #262626;\n border-color: #7b7979;\n .icon,\n .iconLoading {\n color: #7b7979;\n transition: inherit;\n }\n &:hover {\n color: #7b7979;\n .icon,\n .iconLoading {\n color: #bdbbbb;\n }\n }\n }\n &.purple {\n color: #8a6caa;\n border-color: #8a6caa;\n &:hover {\n color: #714f95;\n }\n }\n &.black {\n color: #262626;\n border-color: #262626;\n &:hover {\n color: #7b7979;\n }\n }\n }\n\n .icon,\n .iconLoading {\n display: grid;\n place-items: center;\n color: inherit;\n font-size: ", ";\n }\n .iconLoading {\n font-size: ", ";\n }\n\n // mismo estilo desabilitado para cualquier tipo de boton\n &:disabled {\n background-color: #fcebf7 !important;\n color: #7b7979 !important;\n border-color: #7b7979 !important;\n\n .icon {\n color: #9e9c9c !important;\n }\n .iconLoading {\n color: #9e2674 !important;\n }\n\n &:hover {\n background-color: #fcebf7 !important;\n }\n }\n }\n"])), function (_ref) {
|
|
19
19
|
var disabled = _ref.disabled,
|
|
20
20
|
isLoading = _ref.isLoading;
|
|
21
21
|
return disabled || isLoading ? "not-allowed" : "pointer";
|
|
@@ -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: fit-content;\n padding: 0 10px;\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-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-AC,\n &.status-ACA {\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\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: fit-content;\n padding: 0 10px;\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-CA,\n &.status-IE {\n background-color: ", ";\n }\n\n &.status-R,\n &.status-AS,\n &.status-SAC,\n &.status-PA {\n background-color: ", ";\n }\n\n &.status-AA,\n &.status-AP,\n &.status-AC,\n &.status-AAC,\n &.status-ACA {\n background-color: ", ";\n }\n\n &.status-RA,\n &.status-RC,\n &.status-RP,\n &.status-RAC,\n &.status-RCA {\n background-color: ", ";\n }\n\n &.status-Dat,\n &.status-Dsc,\n &.status-Imgs {\n background-color: ", ";\n }\n\n &.status-FAP,\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;
|
|
@@ -11,16 +11,16 @@ exports.VerticalSideMenuMainPage = void 0;
|
|
|
11
11
|
|
|
12
12
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
|
|
13
13
|
|
|
14
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
15
|
+
|
|
16
|
+
var _reactRouterDom = require("react-router-dom");
|
|
17
|
+
|
|
14
18
|
var _styles = require("./styles");
|
|
15
19
|
|
|
16
20
|
var _iconLogoContentoh = _interopRequireDefault(require("../../../assets/images/verticalSideMenuMainPage/iconLogoContentoh.svg"));
|
|
17
21
|
|
|
18
22
|
var _iconLogo = _interopRequireDefault(require("../../../assets/images/verticalSideMenuMainPage/iconLogo.svg"));
|
|
19
23
|
|
|
20
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
21
|
-
|
|
22
|
-
var _reactRouterDom = require("react-router-dom");
|
|
23
|
-
|
|
24
24
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
25
25
|
|
|
26
26
|
var VerticalSideMenuMainPage = function VerticalSideMenuMainPage(_ref) {
|
|
@@ -28,7 +28,7 @@ var VerticalSideMenuMainPage = function VerticalSideMenuMainPage(_ref) {
|
|
|
28
28
|
menuoption = _ref$menuoption === void 0 ? [] : _ref$menuoption,
|
|
29
29
|
containerdash = _ref.containerdash;
|
|
30
30
|
|
|
31
|
-
var _useState = (0, _react.useState)(),
|
|
31
|
+
var _useState = (0, _react.useState)(false),
|
|
32
32
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
33
33
|
trueBar = _useState2[0],
|
|
34
34
|
setTrueBar = _useState2[1];
|
|
@@ -55,31 +55,26 @@ var VerticalSideMenuMainPage = function VerticalSideMenuMainPage(_ref) {
|
|
|
55
55
|
var _item$suboption;
|
|
56
56
|
|
|
57
57
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
58
|
-
bar: trueBar,
|
|
59
58
|
className: "option-div",
|
|
60
59
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.NavLinkOption, {
|
|
61
60
|
to: item.path,
|
|
62
|
-
bar: trueBar,
|
|
61
|
+
bar: trueBar.toString(),
|
|
63
62
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
|
|
64
63
|
src: item.icon,
|
|
65
64
|
alt: item.title
|
|
66
|
-
}), trueBar
|
|
65
|
+
}), trueBar ? /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
|
|
67
66
|
children: item.title
|
|
68
|
-
})]
|
|
69
|
-
}), item.suboption
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
})
|
|
80
|
-
})
|
|
81
|
-
});
|
|
82
|
-
})
|
|
67
|
+
}) : null]
|
|
68
|
+
}), item === null || item === void 0 ? void 0 : (_item$suboption = item.suboption) === null || _item$suboption === void 0 ? void 0 : _item$suboption.map(function (subitem, index) {
|
|
69
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
70
|
+
className: "sub-option",
|
|
71
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.NavLinkOption, {
|
|
72
|
+
to: subitem.path,
|
|
73
|
+
className: "sub-option-link",
|
|
74
|
+
bar: trueBar.toString(),
|
|
75
|
+
children: trueBar ? subitem.title : null
|
|
76
|
+
})
|
|
77
|
+
}, index);
|
|
83
78
|
})]
|
|
84
79
|
}, index);
|
|
85
80
|
})
|
|
@@ -17,13 +17,13 @@ var _reactRouterDom = require("react-router-dom");
|
|
|
17
17
|
|
|
18
18
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
19
19
|
|
|
20
|
-
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n height: 100%;\n box-sizing: border-box;\n padding: 23px 0 70px 0;\n flex-direction: column;\n justify-content: space-between;\n overflow: none;\n width: ", "
|
|
20
|
+
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n height: 100%;\n box-sizing: border-box;\n padding: 23px 0 70px 0;\n flex-direction: column;\n justify-content: space-between;\n overflow: none;\n width: ", ";\n background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);\n scrollbar-width: none;\n display: flex;\n text-align: center;\n transition: width 0.3s linear;\n margin: 0;\n & + * {\n margin-left: 30px;\n }\n .navbar-top {\n .logo {\n height: 22px;\n }\n .option {\n .option-div {\n width: 100%;\n white-space: nowrap;\n }\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-top: 50px;\n .active {\n text-decoration: none;\n background: rgba(255, 255, 255, 0.1);\n }\n .sub-option {\n display: flex;\n flex-direction: column;\n padding-left: 32px;\n height: auto;\n width: auto;\n &:last-child {\n margin-bottom: 10px;\n }\n }\n }\n }\n"])), function (_ref) {
|
|
21
21
|
var bar = _ref.bar;
|
|
22
|
-
return bar ?
|
|
22
|
+
return bar ? "240px" : "66px";
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
exports.Container = Container;
|
|
26
|
-
var NavLinkOption = (0, _styledComponents.default)(_reactRouterDom.NavLink)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: 42px;\n display: flex;\n justify-content: ", ";\n align-items: center;\n font-family: sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 17px;\n line-height: 21px;\n letter-spacing: -0.015em;\n transition: color 0.3s linear;\n color: ", ";\n text-decoration: none;\n cursor: pointer;\n padding: ", "
|
|
26
|
+
var NavLinkOption = (0, _styledComponents.default)(_reactRouterDom.NavLink)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: 42px;\n display: flex;\n justify-content: ", ";\n align-items: center;\n font-family: sans-serif;\n font-style: normal;\n font-weight: 400;\n font-size: 17px;\n line-height: 21px;\n letter-spacing: -0.015em;\n transition: color 0.3s linear;\n color: ", ";\n text-decoration: none;\n cursor: pointer;\n padding: ", ";\n &:hover {\n background: rgba(255, 255, 255, 0.2);\n color: #fafafa;\n text-decoration: none;\n }\n p {\n cursor: pointer;\n margin: 0%;\n pointer-events: none;\n }\n img {\n height: 22px;\n position: absolute;\n left: 22px;\n & + * {\n margin-left: 30px;\n }\n }\n &.sub-option-link {\n display: flex;\n justify-content: flex-start;\n text-decoration: none;\n position: relative;\n font-size: 13px;\n border-left: 1px solid #f0eef2;\n border-radius: 0;\n transition: color 0.3s linear;\n color: ", ";\n height: 25px;\n margin: 0;\n padding-left: 12px;\n &::before {\n border-left: 1px solid #e33aa9;\n width: 10px;\n content: \"\";\n border-radius: 50%;\n height: 10px;\n background-color: white;\n position: absolute;\n top: 13;\n left: -6px;\n }\n &.active {\n background: none !important;\n text-decoration: none;\n transition: color 0.3s linear;\n color: ", ";\n &::before {\n background-color: #e33aa9;\n }\n }\n &:hover {\n background: none;\n }\n }\n"])), function (_ref2) {
|
|
27
27
|
var bar = _ref2.bar;
|
|
28
28
|
return bar ? "flex-start" : "center";
|
|
29
29
|
}, function (_ref3) {
|
|
@@ -31,7 +31,7 @@ var NavLinkOption = (0, _styledComponents.default)(_reactRouterDom.NavLink)(_tem
|
|
|
31
31
|
return bar ? "#fafafa" : "transparent";
|
|
32
32
|
}, function (_ref4) {
|
|
33
33
|
var bar = _ref4.bar;
|
|
34
|
-
return bar ? "0
|
|
34
|
+
return bar ? "0 22px" : "0 8px";
|
|
35
35
|
}, function (_ref5) {
|
|
36
36
|
var bar = _ref5.bar;
|
|
37
37
|
return bar ? "#f0eef2" : "transparent";
|
|
@@ -47,7 +47,7 @@ var CarouselImagesLogin = function CarouselImagesLogin(_ref) {
|
|
|
47
47
|
Array.from(circulos).forEach(function (cir) {
|
|
48
48
|
return cir.classList.remove("resaltado");
|
|
49
49
|
});
|
|
50
|
-
circulo_actual.classList.add("resaltado");
|
|
50
|
+
circulo_actual === null || circulo_actual === void 0 ? void 0 : circulo_actual.classList.add("resaltado");
|
|
51
51
|
img1.classList.add("right");
|
|
52
52
|
img2.classList.add("active");
|
|
53
53
|
i++;
|
|
@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.HeaderTop = void 0;
|
|
9
9
|
|
|
10
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
|
|
11
|
+
|
|
10
12
|
var _styles = require("./styles");
|
|
11
13
|
|
|
12
14
|
var _index = require("../../atoms/ScreenHeader/index");
|
|
@@ -19,11 +21,14 @@ var _Chat = require("../../organisms/Chat");
|
|
|
19
21
|
|
|
20
22
|
var _IconoAB = _interopRequireDefault(require("../../../../src/assets/images/generalButton/Icono AB.svg"));
|
|
21
23
|
|
|
24
|
+
var _react2 = require("@testing-library/react");
|
|
25
|
+
|
|
22
26
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
23
27
|
|
|
24
28
|
var HeaderTop = function HeaderTop(_ref) {
|
|
25
29
|
var setHeaderTop = _ref.setHeaderTop,
|
|
26
30
|
withChat = _ref.withChat,
|
|
31
|
+
chatType = _ref.chatType,
|
|
27
32
|
productSelected = _ref.productSelected,
|
|
28
33
|
token = _ref.token,
|
|
29
34
|
auditableVersion = _ref.auditableVersion,
|
|
@@ -31,26 +36,78 @@ var HeaderTop = function HeaderTop(_ref) {
|
|
|
31
36
|
isAuditor = _ref.isAuditor,
|
|
32
37
|
activeRetailer = _ref.activeRetailer;
|
|
33
38
|
var headerTop = (0, _react.useRef)();
|
|
39
|
+
|
|
40
|
+
var _useState = (0, _react.useState)(null),
|
|
41
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
42
|
+
chat = _useState2[0],
|
|
43
|
+
setChat = _useState2[1];
|
|
44
|
+
|
|
45
|
+
var _useState3 = (0, _react.useState)(null),
|
|
46
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
47
|
+
chatData = _useState4[0],
|
|
48
|
+
setChatData = _useState4[1];
|
|
49
|
+
|
|
50
|
+
(0, _react.useEffect)(function () {
|
|
51
|
+
if (activeRetailer.id && productSelected && token.length) {
|
|
52
|
+
var _productSelected$arti;
|
|
53
|
+
|
|
54
|
+
setChatData({
|
|
55
|
+
id: (productSelected === null || productSelected === void 0 ? void 0 : (_productSelected$arti = productSelected.article) === null || _productSelected$arti === void 0 ? void 0 : _productSelected$arti.id_article) || (productSelected === null || productSelected === void 0 ? void 0 : productSelected.id_article),
|
|
56
|
+
version: productSelected === null || productSelected === void 0 ? void 0 : productSelected.version,
|
|
57
|
+
retailerId: activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id,
|
|
58
|
+
status: productSelected === null || productSelected === void 0 ? void 0 : productSelected.status,
|
|
59
|
+
userToken: token
|
|
60
|
+
});
|
|
61
|
+
}
|
|
62
|
+
}, [activeRetailer, productSelected, token]);
|
|
63
|
+
(0, _react.useEffect)(function () {
|
|
64
|
+
if (chatType) renderChat(chatType);
|
|
65
|
+
}, [chatData, chatType]);
|
|
34
66
|
(0, _react.useEffect)(function () {
|
|
35
67
|
setHeaderTop && setHeaderTop(headerTop.current.clientHeight);
|
|
36
68
|
}, []);
|
|
69
|
+
|
|
70
|
+
var renderChat = function renderChat(chatType) {
|
|
71
|
+
switch (chatType) {
|
|
72
|
+
case "product_status":
|
|
73
|
+
chatData && setChat( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chat.Chat, {
|
|
74
|
+
chatType: "product_status",
|
|
75
|
+
chatContainerType: "popUp",
|
|
76
|
+
chatData: {
|
|
77
|
+
id: chatData === null || chatData === void 0 ? void 0 : chatData.id,
|
|
78
|
+
version: chatData === null || chatData === void 0 ? void 0 : chatData.version,
|
|
79
|
+
retailerId: chatData === null || chatData === void 0 ? void 0 : chatData.retailerId,
|
|
80
|
+
status: chatData === null || chatData === void 0 ? void 0 : chatData.status,
|
|
81
|
+
userToken: chatData === null || chatData === void 0 ? void 0 : chatData.userToken
|
|
82
|
+
},
|
|
83
|
+
size: 18,
|
|
84
|
+
activeRetailer: activeRetailer
|
|
85
|
+
}));
|
|
86
|
+
break;
|
|
87
|
+
|
|
88
|
+
default:
|
|
89
|
+
setChat( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chat.Chat, {
|
|
90
|
+
chatType: "merchant_product",
|
|
91
|
+
chatContainerType: "popUp",
|
|
92
|
+
chatData: {
|
|
93
|
+
userToken: token,
|
|
94
|
+
id: productSelected.id_article,
|
|
95
|
+
version: productSelected.version
|
|
96
|
+
},
|
|
97
|
+
size: 18,
|
|
98
|
+
activeRetailer: activeRetailer
|
|
99
|
+
}));
|
|
100
|
+
break;
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
|
|
37
104
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
|
|
38
105
|
ref: headerTop,
|
|
39
106
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
|
|
40
107
|
text: "Edici\xF3n de producto"
|
|
41
108
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
42
109
|
className: "buttons-container",
|
|
43
|
-
children: [withChat && /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
44
|
-
chatType: "merchant_product",
|
|
45
|
-
chatContainerType: "popUp",
|
|
46
|
-
chatData: {
|
|
47
|
-
userToken: token,
|
|
48
|
-
id: productSelected.id_article,
|
|
49
|
-
version: productSelected.version
|
|
50
|
-
},
|
|
51
|
-
size: 18,
|
|
52
|
-
activeRetailer: activeRetailer
|
|
53
|
-
}), isAuditor && auditableVersion && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Button, {
|
|
110
|
+
children: [withChat && chat, isAuditor && auditableVersion && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Button, {
|
|
54
111
|
buttonType: "general-white-button circular-button",
|
|
55
112
|
onClick: function onClick() {
|
|
56
113
|
setCompare(function (current) {
|
|
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.default = exports.chatTicket_userTECH = exports.chatTicket_userNORMAL = exports.chatPROV_orderProduct = exports.chatFAB_orderProduct_user49 = exports.chatFAB_orderProduct_user37 = exports.chatCAD_orderProduct = exports.chatCAD_merchantsProductProvider = exports.chatCAD_merchantsProduct = void 0;
|
|
8
|
+
exports.default = exports.chatTicket_userTECH = exports.chatTicket_userNORMAL = exports.chatProduct_status = exports.chatPROV_orderProduct = exports.chatFAB_orderProduct_user49 = exports.chatFAB_orderProduct_user37 = exports.chatCAD_orderProduct = exports.chatCAD_merchantsProductProvider = exports.chatCAD_merchantsProduct = void 0;
|
|
9
9
|
|
|
10
10
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
|
|
11
11
|
|
|
@@ -172,4 +172,24 @@ chatTicket_userTECH.args = {
|
|
|
172
172
|
}
|
|
173
173
|
},
|
|
174
174
|
classNameContainerFixed: "chatTicket"
|
|
175
|
+
}; // ejemplo del chat para los cambios de status del producto.
|
|
176
|
+
|
|
177
|
+
var chatProduct_status = Template.bind({});
|
|
178
|
+
exports.chatProduct_status = chatProduct_status;
|
|
179
|
+
chatProduct_status.args = {
|
|
180
|
+
chatType: "product_status",
|
|
181
|
+
chatContainerType: "popUp",
|
|
182
|
+
chatData: {
|
|
183
|
+
id: 37414,
|
|
184
|
+
version: 7,
|
|
185
|
+
retailerId: 70,
|
|
186
|
+
status: "AA",
|
|
187
|
+
orderId: 15189,
|
|
188
|
+
userToken: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI5YTIxMzEyOC02NDgyLTRjMTYtYTRiNi02ZTY0ZjIyNWIxYmQiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6IjlhMjEzMTI4LTY0ODItNGMxNi1hNGI2LTZlNjRmMjI1YjFiZCIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJhOWFhMDQ4Zi05YzRjLTQxODMtYWUzMS03OWVjNjBhY2NjZGYiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4MzU4ODM4OSwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTY4MzU5MTk4OSwiaWF0IjoxNjgzNTg4Mzg5LCJlbWFpbCI6ImlzbWFlbDk3bG9wZXpAZ21haWwuY29tIn0.k9FQfRR02XC3WWfOzWhrbJGmp69AmCHJEIrgtXKhIwC69trdphSm1AKkZnDJMsEdkpUgjF_zAOsa_xYRxO6goXy7WXVc_p7N-yFHlkhZrRyn3LEFKaLzD8vVqlWx4kgfSERm7KhI1AxPmrA-lw8eF6Axvqn3PvuszAw89_WhPOcnOt8vU0MxAVhLgS8oM6vyHFmHEHWQ2FnSYYed9sEvAxGh_B44aIgWeDteQGeGdYhsm6rUcxgkrskywZJp9FW5VgYXuDcC5NpvomMMRy_v95UV897JzCHl__sK2Z9ahm0eczVN3tAc0GbKnlN96ZrGTQ_nmNHbuMDPQBPXH5HXZQ",
|
|
189
|
+
currentUser: {
|
|
190
|
+
id: 37,
|
|
191
|
+
companyId: 2,
|
|
192
|
+
isUserTech: false
|
|
193
|
+
}
|
|
194
|
+
}
|
|
175
195
|
};
|
|
@@ -43,6 +43,8 @@ var _material = require("@mui/material");
|
|
|
43
43
|
|
|
44
44
|
var _ImagePreview = require("../../../atoms/ImagePreview");
|
|
45
45
|
|
|
46
|
+
var _Status = require("../../../atoms/Status");
|
|
47
|
+
|
|
46
48
|
var _handle_userTech = require("../../../../global-files/handle_userTech");
|
|
47
49
|
|
|
48
50
|
var _awsAmplify = require("aws-amplify");
|
|
@@ -87,7 +89,7 @@ var ContainerItems = function ContainerItems(props) {
|
|
|
87
89
|
var containerItems = (0, _react.useRef)(null);
|
|
88
90
|
(0, _react.useEffect)(function () {
|
|
89
91
|
if (!items) return;
|
|
90
|
-
if (["merchant_product", "order_product"].includes(chatType)) renderItems();else if (chatType === "ticket") renderItemsTicket();else setCustomItems([]);
|
|
92
|
+
if (["merchant_product", "order_product", "product_status"].includes(chatType)) renderItems();else if (chatType === "ticket") renderItemsTicket();else setCustomItems([]);
|
|
91
93
|
}, [items]);
|
|
92
94
|
(0, _react.useEffect)(function () {
|
|
93
95
|
var containerScroll = document.getElementById("ulItems");
|
|
@@ -161,6 +163,20 @@ var ContainerItems = function ContainerItems(props) {
|
|
|
161
163
|
});
|
|
162
164
|
};
|
|
163
165
|
|
|
166
|
+
var renderStatusItem = function renderStatusItem(item) {
|
|
167
|
+
var splitText = item.value.split("|");
|
|
168
|
+
var message = [];
|
|
169
|
+
splitText.forEach(function (text, i) {
|
|
170
|
+
if (i === 1 || i === 3) message.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Status.Status, {
|
|
171
|
+
statusType: text
|
|
172
|
+
}));else message.push(text);
|
|
173
|
+
});
|
|
174
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
|
|
175
|
+
className: "item-statusItem",
|
|
176
|
+
children: message
|
|
177
|
+
});
|
|
178
|
+
};
|
|
179
|
+
|
|
164
180
|
var renderStatusTicketNeutral = function renderStatusTicketNeutral(item) {
|
|
165
181
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
|
|
166
182
|
componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
|
|
@@ -305,7 +321,7 @@ var ContainerItems = function ContainerItems(props) {
|
|
|
305
321
|
timeout: 500,
|
|
306
322
|
container: containerList.current,
|
|
307
323
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
|
|
308
|
-
className: (ownMessage ? "own-message " : "") + (lastUserId === item.userId ? "sameUser" : ""),
|
|
324
|
+
className: (ownMessage && item.type !== "status" ? "own-message " : "") + (lastUserId === item.userId ? "sameUser" : ""),
|
|
309
325
|
children: [item.type !== "statusTicket" && lastUserId !== item.userId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageTooltip.ImageTooltip, {
|
|
310
326
|
className: "container-imgUser",
|
|
311
327
|
sizeLoading: 25,
|
|
@@ -323,7 +339,7 @@ var ContainerItems = function ContainerItems(props) {
|
|
|
323
339
|
className: "label-nameUser",
|
|
324
340
|
children: users[item.userId].name
|
|
325
341
|
})
|
|
326
|
-
}), item.type === "message" ? renderMessage(item, differentCompany) : item.type === "comment" ? renderComment(item) : item.type === "img" ? renderImg(item) : item.type === "file" ? renderFile(item, ownMessage) : item.type === "statusTicket" && [ticketCompany, 254].includes(currentUser.companyId) ? renderStatusTicket(item) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
|
|
342
|
+
}), item.type === "message" ? renderMessage(item, differentCompany) : item.type === "comment" ? renderComment(item) : item.type === "img" ? renderImg(item) : item.type === "status" ? renderStatusItem(item) : item.type === "file" ? renderFile(item, ownMessage) : item.type === "statusTicket" && [ticketCompany, 254].includes(currentUser.companyId) ? renderStatusTicket(item) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
|
|
327
343
|
className: "label-time",
|
|
328
344
|
children: (0, _utils.getTime)(item.date)
|
|
329
345
|
})]
|
|
@@ -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: 100%;\n max-height: 100%;\n flex-grow: 2;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n gap: 8px;\n background: white;\n padding: 15px 11px;\n overflow: auto;\n //border: 1px solid red;\n\n .btn-loadMore {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n flex-grow: 2;\n\n .container-btnLoadMore {\n border-radius: 10px;\n .button {\n padding: 5px 10px;\n border: none;\n gap: 10px;\n font-family: ", ";\n .icon,\n .iconLoading {\n font-size: 10px;\n }\n }\n }\n }\n\n // lista de items\n > ul {\n --marginUserValue: 10px;\n list-style: none;\n margin: 0;\n padding: 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 0px;\n\n // items cambio de estatus general del article\n // items cambio de estatus en servicio del article\n .label-statusArticle,\n .label-statusService {\n width: 100%;\n padding: 10px;\n border-radius: 10px;\n display: grid;\n place-items: center;\n cursor: default;\n\n text-align: left;\n font-family: ", ", sans-serif;\n color: white;\n font-size: 12px;\n\n .label {\n text-align: left;\n font-family: ", ", sans-serif;\n color: white;\n font-size: 12px;\n white-space: pre-wrap;\n cursor: inherit;\n }\n }\n .label-statusArticle {\n background-color: #85bc5b;\n }\n .label-statusService {\n background-color: #8a6caa;\n }\n\n // cada item dentro de la lista (fechas|message|img|file|status...)\n li {\n width: 90%;\n padding: 0px;\n margin: 16px 0px 0px 0px;\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n flex-wrap: nowrap;\n gap: var(--marginUserValue);\n align-items: center;\n align-self: flex-start;\n //border: 1px solid blue;\n\n & > label:first-child,\n .item-img {\n margin: 0px 0px 0px 44px;\n }\n\n &.sameUser {\n margin: 2px 0px 0px 0px;\n /* padding: 0px 0px 0px calc(34px + var(--marginUserValue)); */\n }\n\n // items gray label (para fechas)\n &.label-gray {\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 0px; //0px calc(34px + var(--marginUserValue));\n\n .separator {\n flex-grow: 2;\n min-width: 35px;\n border: 0.3px solid #f0f0f0;\n }\n label {\n padding: 4px 15px;\n text-align: center;\n font-family: ", ", sans-serif;\n color: #b3b3b3;\n font-size: 10px;\n }\n }\n\n // container ImageTooltip del user de un item\n .container-imgUser {\n display: grid;\n place-items: center;\n width: 34px;\n min-width: min-content;\n border-radius: 50%;\n overflow: hidden;\n align-self: flex-start;\n margin: 0;\n }\n .icon-imgUser.fill {\n padding: 0px;\n width: 34px;\n height: 34px;\n color: #9d9d9d;\n border-color: #9d9d9d;\n border-width: 2px;\n }\n .tooltip-imgUser {\n .label-nameUser {\n font-family: ", ", sans-serif;\n color: #262626;\n font-size: 12px;\n text-align: center;\n }\n }\n\n // items de tipo message, comment y file\n .item-message,\n .item-comment,\n .item-file,\n .item-statusTicket {\n border-radius: 10px;\n padding: 10px;\n font-family: ", ", sans-serif;\n font-size: 12px;\n text-align: left;\n white-space: pre-line;\n color: white;\n word-break: break-word;\n }\n .item-message,\n .item-comment,\n .item-file {\n background-color: #8386ee;\n }\n .item-statusTicket {\n background-color: #85bc5b;\n }\n\n .item-message {\n &.different-company {\n border: 1px solid #e33aa9;\n }\n }\n /*\n .item-comment {\n background-color: #5e61b2;\n }\n */\n\n // items de tipo img\n .item-img {\n display: grid;\n place-items: center;\n background-color: #f7f7f7;\n border-radius: 10px;\n overflow: hidden;\n max-width: 60%;\n max-height: 300px;\n\n .container-ImagePreview {\n max-height: inherit;\n\n > .img {\n max-height: inherit;\n }\n\n .label-nameImg {\n .iconDefaultImg {\n border-radius: 0px;\n border: none;\n padding: 0px;\n color: #8386ee;\n }\n }\n }\n }\n\n // items de tipo file\n .item-file {\n width: auto;\n max-width: 70%;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 6px;\n\n .btnDownloadFileItem {\n width: 28px;\n min-width: 28px;\n height: 28px;\n min-height: 28px;\n }\n\n // nameFile solo 1 linea\n .label-nameFileShort {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n flex-grow: 2;\n cursor: default;\n font-family: ", ", sans-serif;\n font-size: 12px;\n text-align: center;\n color: white;\n }\n }\n\n // label hora del item\n .label-time {\n min-width: fit-content;\n color: #c7c7c7;\n font-family: ", ", sans-serif;\n font-size: 9px;\n }\n\n & > .label-time:first-child {\n display: none;\n }\n\n // items del currentUser\n &.own-message {\n align-self: flex-end;\n flex-direction: row-reverse;\n\n /* &.sameUser {\n padding: 0px calc(34px + var(--marginUserValue)) 0px 0px;\n } */\n\n .item-message,\n .item-comment {\n color: #262626;\n }\n .item-message,\n .item-comment,\n .item-file {\n background-color: #f0f0f0;\n }\n\n & > .item-message:first-child {\n margin: 0px 40px 0px 0px;\n }\n /*\n .item-comment {\n background-color: #d7d7d7;\n }\n */\n\n // items de tipo img\n .item-img {\n .container-ImagePreview {\n .label-nameImg {\n .iconDefaultImg {\n color: #c9c7c7;\n }\n }\n }\n }\n\n // items de tipo file\n .item-file {\n .btnDownloadFileItem {\n .iconFile,\n .container-btnDownload .buttonMUI .icon {\n color: #262626;\n }\n }\n\n // nameFile solo 1 linea\n .label-nameFileShort {\n color: #262626;\n }\n }\n }\n\n // items neutrales (center aligned)\n &.itemNeutral {\n width: 100%;\n\n .itemStatus {\n width: 100%;\n padding: 10px;\n border-radius: 10px;\n display: grid;\n place-items: center;\n cursor: default;\n text-align: center;\n font-family: ", ", sans-serif;\n color: white;\n font-size: 12px;\n line-height: 1.2;\n white-space: pre-wrap;\n\n &.ticket {\n color: white;\n background-color: #85bc5b;\n }\n }\n }\n }\n }\n\n .content-chat {\n ::-webkit-scrollbar {\n width: 0;\n }\n }\n"])), _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular);
|
|
18
|
+
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n max-height: 100%;\n flex-grow: 2;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n gap: 8px;\n background: white;\n padding: 15px 11px;\n overflow: auto;\n //border: 1px solid red;\n\n .btn-loadMore {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n flex-grow: 2;\n\n .container-btnLoadMore {\n border-radius: 10px;\n .button {\n padding: 5px 10px;\n border: none;\n gap: 10px;\n font-family: ", ";\n .icon,\n .iconLoading {\n font-size: 10px;\n }\n }\n }\n }\n\n // lista de items\n > ul {\n --marginUserValue: 10px;\n list-style: none;\n margin: 0;\n padding: 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 0px;\n\n // items cambio de estatus general del article\n // items cambio de estatus en servicio del article\n .label-statusArticle,\n .label-statusService {\n width: 100%;\n padding: 10px;\n border-radius: 10px;\n display: grid;\n place-items: center;\n cursor: default;\n\n text-align: left;\n font-family: ", ", sans-serif;\n color: white;\n font-size: 12px;\n\n .label {\n text-align: left;\n font-family: ", ", sans-serif;\n color: white;\n font-size: 12px;\n white-space: pre-wrap;\n cursor: inherit;\n }\n }\n .label-statusArticle {\n background-color: #85bc5b;\n }\n .label-statusService {\n background-color: #8a6caa;\n }\n\n // cada item dentro de la lista (fechas|message|img|file|status...)\n li {\n width: 90%;\n padding: 0px;\n margin: 16px 0px 0px 0px;\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n flex-wrap: nowrap;\n gap: var(--marginUserValue);\n align-items: center;\n align-self: flex-start;\n //border: 1px solid blue;\n\n & > label:first-child,\n .item-img {\n margin: 0px 0px 0px 44px;\n }\n\n &.sameUser {\n margin: 2px 0px 0px 0px;\n /* padding: 0px 0px 0px calc(34px + var(--marginUserValue)); */\n }\n\n // items gray label (para fechas)\n &.label-gray {\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 0px; //0px calc(34px + var(--marginUserValue));\n\n .separator {\n flex-grow: 2;\n min-width: 35px;\n border: 0.3px solid #f0f0f0;\n }\n label {\n padding: 4px 15px;\n text-align: center;\n font-family: ", ", sans-serif;\n color: #b3b3b3;\n font-size: 10px;\n }\n }\n\n // container ImageTooltip del user de un item\n .container-imgUser {\n display: grid;\n place-items: center;\n width: 34px;\n min-width: min-content;\n border-radius: 50%;\n overflow: hidden;\n align-self: flex-start;\n margin: 0;\n }\n .icon-imgUser.fill {\n padding: 0px;\n width: 34px;\n height: 34px;\n color: #9d9d9d;\n border-color: #9d9d9d;\n border-width: 2px;\n }\n .tooltip-imgUser {\n .label-nameUser {\n font-family: ", ", sans-serif;\n color: #262626;\n font-size: 12px;\n text-align: center;\n }\n }\n\n // items de tipo message, comment y file\n .item-message,\n .item-comment,\n .item-file,\n .item-statusTicket,\n .item-statusItem {\n border-radius: 10px;\n padding: 10px;\n font-family: ", ", sans-serif;\n font-size: 12px;\n text-align: left;\n white-space: pre-line;\n color: white;\n word-break: break-word;\n }\n .item-message,\n .item-comment,\n .item-file {\n background-color: #8386ee;\n }\n .item-statusTicket,\n .item-statusItem {\n background-color: #85bc5b;\n }\n\n .item-statusItem {\n display: flex;\n gap: 3px;\n align-items: center;\n }\n\n .item-message {\n &.different-company {\n border: 1px solid #e33aa9;\n }\n }\n /*\n .item-comment {\n background-color: #5e61b2;\n }\n */\n\n // items de tipo img\n .item-img {\n display: grid;\n place-items: center;\n background-color: #f7f7f7;\n border-radius: 10px;\n overflow: hidden;\n max-width: 60%;\n max-height: 300px;\n\n .container-ImagePreview {\n max-height: inherit;\n\n > .img {\n max-height: inherit;\n }\n\n .label-nameImg {\n .iconDefaultImg {\n border-radius: 0px;\n border: none;\n padding: 0px;\n color: #8386ee;\n }\n }\n }\n }\n\n // items de tipo file\n .item-file {\n width: auto;\n max-width: 70%;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 6px;\n\n .btnDownloadFileItem {\n width: 28px;\n min-width: 28px;\n height: 28px;\n min-height: 28px;\n }\n\n // nameFile solo 1 linea\n .label-nameFileShort {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n flex-grow: 2;\n cursor: default;\n font-family: ", ", sans-serif;\n font-size: 12px;\n text-align: center;\n color: white;\n }\n }\n\n // label hora del item\n .label-time {\n min-width: fit-content;\n color: #c7c7c7;\n font-family: ", ", sans-serif;\n font-size: 9px;\n }\n\n & > .label-time:first-child {\n display: none;\n }\n\n // items del currentUser\n &.own-message {\n align-self: flex-end;\n flex-direction: row-reverse;\n\n /* &.sameUser {\n padding: 0px calc(34px + var(--marginUserValue)) 0px 0px;\n } */\n\n .item-message,\n .item-comment {\n color: #262626;\n }\n .item-message,\n .item-comment,\n .item-file {\n background-color: #f0f0f0;\n }\n\n & > .item-message:first-child {\n margin: 0px 40px 0px 0px;\n }\n /*\n .item-comment {\n background-color: #d7d7d7;\n }\n */\n\n // items de tipo img\n .item-img {\n .container-ImagePreview {\n .label-nameImg {\n .iconDefaultImg {\n color: #c9c7c7;\n }\n }\n }\n }\n\n // items de tipo file\n .item-file {\n .btnDownloadFileItem {\n .iconFile,\n .container-btnDownload .buttonMUI .icon {\n color: #262626;\n }\n }\n\n // nameFile solo 1 linea\n .label-nameFileShort {\n color: #262626;\n }\n }\n }\n\n // items neutrales (center aligned)\n &.itemNeutral {\n width: 100%;\n\n .itemStatus {\n width: 100%;\n padding: 10px;\n border-radius: 10px;\n display: grid;\n place-items: center;\n cursor: default;\n text-align: center;\n font-family: ", ", sans-serif;\n color: white;\n font-size: 12px;\n line-height: 1.2;\n white-space: pre-wrap;\n\n &.ticket {\n color: white;\n background-color: #85bc5b;\n }\n }\n }\n }\n }\n\n .content-chat {\n ::-webkit-scrollbar {\n width: 0;\n }\n }\n"])), _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular);
|
|
19
19
|
|
|
20
20
|
exports.Container = Container;
|