contentoh-components-library 21.3.19 → 21.3.21

package/dist/components/organisms/Chat/ContainerItems/styles.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../../global-files/variables");
+
+var _templateObject;
+
+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      &.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      }\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        margin: 0;\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-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      // 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-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);
+
+exports.Container = Container;

package/dist/components/organisms/Chat/ContentChat/ContentChat.stories.js

@@ -0,0 +1,142 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.exampleChat = exports.errorChat = exports.default = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/organisms/Chat/ContentChat",
+  component: _index.ContentChat,
+  argTypes: {
+    typeArticle: {
+      options: ["order", "merchant"],
+      control: {
+        type: "select"
+      }
+    },
+    typeContainerChat: {
+      options: ["popUp", "fixed"],
+      control: {
+        type: "select"
+      }
+    }
+  }
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ContentChat, (0, _objectSpread2.default)({}, args));
+}; // items de prueba
+
+
+var messages = {
+  1: {
+    date: "2022-10-21 10:10:00",
+    type: "message",
+    value: "mensaje 1 user10",
+    userId: 10
+  },
+  2: {
+    date: "2022-10-21 11:19:00",
+    type: "message",
+    value: "mensaje 1 user20",
+    userId: 20
+  },
+  3: {
+    date: "2022-10-20 12:33:00",
+    type: "comment",
+    value: "comentario 1 user20",
+    userId: 20
+  },
+  4: {
+    date: "2022-10-19 13:56:00",
+    type: "comment",
+    value: "comentario 1 user30",
+    userId: 30
+  },
+  5: {
+    date: "2022-10-20 14:58:00",
+    type: "img",
+    value: "https://content-management-images.s3.amazonaws.com/84300/1/chat/f6579ed5-16e5-48d8-ace5-6be8e8e68f53-38896acf-9179-4686-9088-9784df624ab8.png",
+    userId: 10
+  },
+  6: {
+    date: "2022-10-20 15:12:00",
+    type: "img",
+    value: "https://content-management-images.s3.amazonaws.com/84300/1/chat/21dba1da-3c60-42c4-97bd-033664808256-fb19ff57-b91c-4ef2-ba2a-d857b55fb33b.svg",
+    userId: 30
+  }
+}; // users de prueba
+
+var users = {
+  10: {
+    name: "Pedro Castillo",
+    companyId: 100
+  },
+  20: {
+    name: "Ana Carranza",
+    companyId: 200
+  },
+  30: {
+    name: "Javier Aguayo",
+    companyId: 100
+  }
+}; // companies de prueba multiple
+
+var multipleCompanies = {
+  100: {
+    name: "Fábrica",
+    statusChat: "enabled"
+  },
+  200: {
+    name: "Proveedor",
+    statusChat: "current"
+  },
+  300: {
+    name: "Cadena",
+    statusChat: "disabled"
+  }
+};
+var twoCompanies = {
+  100: {
+    name: "Fábrica",
+    statusChat: "enabled"
+  },
+  200: {
+    name: "Proveedor",
+    statusChat: "current"
+  }
+};
+var exampleChat = Template.bind({});
+exports.exampleChat = exampleChat;
+exampleChat.args = {
+  typeArticle: "order",
+  typeContainerChat: "popUp"
+};
+var errorChat = Template.bind({});
+exports.errorChat = errorChat;
+errorChat.args = {
+  typeArticle: "order",
+  typeContainerChat: "popUp",
+  simuErrorInitial: {
+    code: 567,
+    message: "Algo salio mal al cargar el chat",
+    details: "No se pudo obtener la informacion de una compañia"
+  }
+};
+/*
+error: {
+      code: 510,
+      message: "no fue posible obtener los mensajes del chat",
+      details: "No se pudo obtener una de las compañias implicadas en el chat",
+    }
+     */