contentoh-components-library 21.3.87 → 21.3.89
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 +0 -5
- package/.env.production +0 -3
- package/dist/assets/fonts/roboto/LICENSE.txt +202 -0
- package/dist/components/atoms/ButtonV2/styles.js +1 -1
- package/dist/components/atoms/Card/index.js +5 -46
- package/dist/components/atoms/Card/styles.js +1 -3
- package/dist/components/atoms/CheckBox/index.js +2 -4
- package/dist/components/atoms/InputFormatter/styles.js +1 -1
- package/dist/components/atoms/ProgressBar/index.js +18 -10
- package/dist/components/atoms/TabSection/styles.js +1 -1
- package/dist/components/molecules/CarouselImagesLogin/index.js +1 -1
- package/dist/components/molecules/HeaderTop/index.js +11 -68
- package/dist/components/molecules/TagAndInput/index.js +1 -1
- package/dist/components/organisms/Chat/Chat.stories.js +8 -27
- package/dist/components/organisms/Chat/ContainerItems/index.js +3 -19
- package/dist/components/organisms/Chat/ContainerItems/styles.js +1 -1
- package/dist/components/organisms/Chat/ContentChat/index.js +197 -350
- package/dist/components/organisms/Chat/Footer/index.js +39 -48
- package/dist/components/organisms/Chat/index.js +4 -49
- package/dist/components/organisms/FullProductNameHeader/index.js +2 -2
- package/dist/components/organisms/Modal/styles.js +1 -1
- package/dist/components/pages/ProviderProductEdition/ProviderProductEdition.stories.js +96 -171
- package/dist/components/pages/ProviderProductEdition/index.js +175 -188
- package/dist/components/pages/ProviderProductEdition/styles.js +1 -1
- package/dist/components/pages/RetailerProductEdition/RetailerProductEdition.stories.js +28 -40
- package/dist/components/pages/RetailerProductEdition/index.js +273 -265
- package/dist/components/pages/RetailerProductEdition/styles.js +1 -1
- package/dist/components/pages/RetailerProductEdition/utils.js +2 -61
- package/dist/index.js +12 -51
- package/package.json +1 -3
- package/src/components/atoms/ButtonV2/styles.js +1 -1
- package/src/components/atoms/Card/index.js +2 -35
- package/src/components/atoms/Card/styles.js +5 -41
- package/src/components/atoms/CheckBox/index.js +0 -2
- package/src/components/atoms/InputFormatter/styles.js +1 -2
- package/src/components/atoms/ProgressBar/index.js +17 -8
- package/src/components/atoms/TabSection/styles.js +1 -0
- package/src/components/molecules/CarouselImagesLogin/index.js +1 -1
- package/src/components/molecules/HeaderTop/index.js +6 -52
- package/src/components/molecules/TagAndInput/index.js +8 -10
- package/src/components/organisms/Chat/Chat.stories.js +7 -27
- package/src/components/organisms/Chat/ContainerItems/index.js +2 -18
- package/src/components/organisms/Chat/ContainerItems/styles.js +2 -10
- package/src/components/organisms/Chat/ContentChat/index.js +12 -88
- package/src/components/organisms/Chat/Footer/index.js +0 -11
- package/src/components/organisms/Chat/index.js +4 -46
- package/src/components/organisms/FullProductNameHeader/index.js +1 -1
- package/src/components/organisms/Modal/styles.js +1 -4
- package/src/components/pages/ProviderProductEdition/ProviderProductEdition.stories.js +98 -181
- package/src/components/pages/ProviderProductEdition/index.js +129 -132
- package/src/components/pages/ProviderProductEdition/styles.js +1 -5
- package/src/components/pages/RetailerProductEdition/RetailerProductEdition.stories.js +26 -38
- package/src/components/pages/RetailerProductEdition/index.js +135 -109
- package/src/components/pages/RetailerProductEdition/styles.js +0 -4
- package/src/components/pages/RetailerProductEdition/utils.js +0 -37
- package/src/index.js +0 -3
- package/src/components/molecules/StripeCardForm/StripeCardForm.stories.js +0 -13
- package/src/components/molecules/StripeCardForm/index.js +0 -42
- package/src/components/molecules/StripeCardForm/paymentForm.js +0 -124
- package/src/components/molecules/StripeCardForm/styles.js +0 -73
- package/src/components/molecules/StripeCardSelector/CardSelector.stories.js +0 -12
- package/src/components/molecules/StripeCardSelector/index.js +0 -44
- package/src/components/molecules/StripeCardSelector/styles.js +0 -4
- package/src/components/molecules/StripeCardSelector/utils.js +0 -17
- package/src/components/organisms/SideModal/SideModal.stories.js +0 -23
- package/src/components/organisms/SideModal/index.js +0 -50
- package/src/components/organisms/SideModal/styles.js +0 -30
|
@@ -43,8 +43,6 @@ var _material = require("@mui/material");
|
|
|
43
43
|
|
|
44
44
|
var _ImagePreview = require("../../../atoms/ImagePreview");
|
|
45
45
|
|
|
46
|
-
var _Status = require("../../../atoms/Status");
|
|
47
|
-
|
|
48
46
|
var _handle_userTech = require("../../../../global-files/handle_userTech");
|
|
49
47
|
|
|
50
48
|
var _awsAmplify = require("aws-amplify");
|
|
@@ -89,7 +87,7 @@ var ContainerItems = function ContainerItems(props) {
|
|
|
89
87
|
var containerItems = (0, _react.useRef)(null);
|
|
90
88
|
(0, _react.useEffect)(function () {
|
|
91
89
|
if (!items) return;
|
|
92
|
-
if (["merchant_product", "order_product"
|
|
90
|
+
if (["merchant_product", "order_product"].includes(chatType)) renderItems();else if (chatType === "ticket") renderItemsTicket();else setCustomItems([]);
|
|
93
91
|
}, [items]);
|
|
94
92
|
(0, _react.useEffect)(function () {
|
|
95
93
|
var containerScroll = document.getElementById("ulItems");
|
|
@@ -163,20 +161,6 @@ var ContainerItems = function ContainerItems(props) {
|
|
|
163
161
|
});
|
|
164
162
|
};
|
|
165
163
|
|
|
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
|
-
|
|
180
164
|
var renderStatusTicketNeutral = function renderStatusTicketNeutral(item) {
|
|
181
165
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
|
|
182
166
|
componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
|
|
@@ -321,7 +305,7 @@ var ContainerItems = function ContainerItems(props) {
|
|
|
321
305
|
timeout: 500,
|
|
322
306
|
container: containerList.current,
|
|
323
307
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
|
|
324
|
-
className: (ownMessage
|
|
308
|
+
className: (ownMessage ? "own-message " : "") + (lastUserId === item.userId ? "sameUser" : ""),
|
|
325
309
|
children: [item.type !== "statusTicket" && lastUserId !== item.userId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageTooltip.ImageTooltip, {
|
|
326
310
|
className: "container-imgUser",
|
|
327
311
|
sizeLoading: 25,
|
|
@@ -339,7 +323,7 @@ var ContainerItems = function ContainerItems(props) {
|
|
|
339
323
|
className: "label-nameUser",
|
|
340
324
|
children: users[item.userId].name
|
|
341
325
|
})
|
|
342
|
-
}), item.type === "message" ? renderMessage(item, differentCompany) : item.type === "comment" ? renderComment(item) : item.type === "img" ? renderImg(item) : item.type === "
|
|
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", {
|
|
343
327
|
className: "label-time",
|
|
344
328
|
children: (0, _utils.getTime)(item.date)
|
|
345
329
|
})]
|
|
@@ -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
|
|
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);
|
|
19
19
|
|
|
20
20
|
exports.Container = Container;
|