contentoh-components-library 21.3.18 → 21.3.20

package/dist/components/atoms/GeneralInput/index.js

@@ -114,6 +114,18 @@ var GeneralInput = function GeneralInput(_ref) {
 
     setRequiredEmpty(isRequired && (((_textValue$value = textValue.value) === null || _textValue$value === void 0 ? void 0 : _textValue$value.length) === 0 || textValue.value === undefined));
   }, [textValue]);
+
+  var numberInputOnWheelPreventChange = function numberInputOnWheelPreventChange(e) {
+    // Prevent the input value change
+    e.target.blur(); // Prevent the page/container scrolling
+
+    e.stopPropagation(); // Refocus immediately, on the next tick (after the current function is done)
+
+    setTimeout(function () {
+      return e.target.focus();
+    }, 0);
+  };
+
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
     isRequired: requiredEmpty,
     children: [(optionList === null || optionList === void 0 ? void 0 : optionList.length) > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("select", {
@@ -150,7 +162,8 @@ var GeneralInput = function GeneralInput(_ref) {
       },
       maxLength: maxChar,
       required: isRequired,
-      onKeyDown: onKeyDown
+      onKeyDown: onKeyDown,
+      onWheel: numberInputOnWheelPreventChange
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputFormatter.InputFormatter, {
       name: inputName,
       inputId: inputId,

package/dist/components/molecules/SelectV2/test.js

@@ -65,7 +65,6 @@ var TestSelectV2 = function TestSelectV2() {
       multiple: false,
       borderType: "oval",
       onChange: function onChange(selectedItems) {
-        console.log("onChange:", selectedItems);
         setSelected(selectedItems);
       }
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {

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

@@ -147,7 +147,7 @@ chatTicket_userTECH.args = {
   chatType: "ticket",
   chatContainerType: "fixed",
   chatData: {
-    id: 10,
+    id: 104,
     ticketOwnerUserId: 49,
     statusTicket: "IN_PROGRESS",
     currentUser: {

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

@@ -286,7 +286,7 @@ var ContainerItems = function ContainerItems(props) {
 
   var getUserCreatedItem = function getUserCreatedItem(ownMessage, item, lastUserId) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Slide, {
-      id: "itemScroll",
+      id: "itemScroll-" + item.id,
       direction: ownMessage ? "left" : "right",
       in: true,
       timeout: 500,

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

@@ -19,6 +19,8 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 
+var _reactHowler = _interopRequireDefault(require("react-howler"));
+
 var _styles = require("./styles");
 
 var _react = require("react");
@@ -43,6 +45,8 @@ var _handle_http = require("../../../../global-files/handle_http");
 
 var _utils = require("../../../../global-files/utils");
 
+var _newMessage = _interopRequireDefault(require("../../../../assets/sounds/newMessage.mp3"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 var ContentChat = function ContentChat(props) {
@@ -160,7 +164,12 @@ var ContentChat = function ContentChat(props) {
   }),
       _useState28 = (0, _slicedToArray2.default)(_useState27, 2),
       errorUpdate = _useState28[0],
-      setErrorUpdate = _useState28[1]; // matar update al desmontar el componente del chat
+      setErrorUpdate = _useState28[1];
+
+  var _useState29 = (0, _react.useState)(false),
+      _useState30 = (0, _slicedToArray2.default)(_useState29, 2),
+      playSound = _useState30[0],
+      setPlaySound = _useState30[1]; // matar update al desmontar el componente del chat
 
 
   (0, _react.useEffect)(function () {
@@ -192,7 +201,6 @@ var ContentChat = function ContentChat(props) {
     //return;   -- descomentarizar para hacer pruebas sin update
     if (startUpdate == 0) return;
     var processID = setTimeout(function () {
-      console.log("update chat execute");
       setRunUpdate(function (prev) {
         return prev + 1;
       });
@@ -210,7 +218,7 @@ var ContentChat = function ContentChat(props) {
     } else if (chatType === "order_product") {
       if (companies) getUpdateLatestOrderProduct();else getInitialOrderProduct();
     } else {
-      if (singleChat.items) getUpdateLatestTicket();else getInitialTicket();
+      if (singleChat.items) getUpdateLatestTicket(true);else getInitialTicket();
     }
   }, [runUpdate]);
   /*=======================================================================
@@ -805,11 +813,17 @@ var ContentChat = function ContentChat(props) {
     var _ref9 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee9() {
       var _dataChat$currentUser9, _dataChat$currentUser10, _dataChat$currentUser11, _dataChat$currentUser12;
 
-      var dataUser, paramsQuery, response, newSingleChat;
+      var fromUpdate,
+          dataUser,
+          paramsQuery,
+          response,
+          newSingleChat,
+          _args9 = arguments;
       return _regenerator.default.wrap(function _callee9$(_context9) {
         while (1) {
           switch (_context9.prev = _context9.next) {
             case 0:
+              fromUpdate = _args9.length > 0 && _args9[0] !== undefined ? _args9[0] : false;
               dataUser = {
                 id: (_dataChat$currentUser9 = dataChat.currentUser) === null || _dataChat$currentUser9 === void 0 ? void 0 : _dataChat$currentUser9.id,
                 companyId: (_dataChat$currentUser10 = dataChat.currentUser) === null || _dataChat$currentUser10 === void 0 ? void 0 : _dataChat$currentUser10.companyId,
@@ -822,12 +836,12 @@ var ContentChat = function ContentChat(props) {
                 currentUser: (0, _utils.encodeUriJson)(dataUser),
                 currentItemsFront: (0, _utils.encodeUriJson)(getItemsIdSingleChat())
               };
-              _context9.next = 4;
+              _context9.next = 5;
               return (0, _handle_http.fetchGET)(process.env.REACT_APP_TICKETS_CHAT_ENDPOINT, paramsQuery, {
                 Authorization: (_dataChat$currentUser12 = dataChat.currentUser) === null || _dataChat$currentUser12 === void 0 ? void 0 : _dataChat$currentUser12.token
               });
 
-            case 4:
+            case 5:
               response = _context9.sent;
               //programar update en 20s
               setStartUpdate(function (prev) {
@@ -835,7 +849,7 @@ var ContentChat = function ContentChat(props) {
               });
 
               if (response.body) {
-                _context9.next = 10;
+                _context9.next = 11;
                 break;
               }
 
@@ -859,7 +873,7 @@ var ContentChat = function ContentChat(props) {
               });
               return _context9.abrupt("return");
 
-            case 10:
+            case 11:
               // limpiar error update
               if (errorUpdate.startDate) {
                 setErrorUpdate({});
@@ -870,12 +884,20 @@ var ContentChat = function ContentChat(props) {
 
               updateAllUsers(response.body.users); // actualizar los items del chat
 
+              if (!(response.body.items.length === 0)) {
+                _context9.next = 16;
+                break;
+              }
+
+              return _context9.abrupt("return");
+
+            case 16:
               newSingleChat = (0, _objectSpread3.default)({}, singleChat);
-              newSingleChat.items = addNewItemsChat(newSingleChat.items, response.body.items);
+              newSingleChat.items = addNewItemsChat(newSingleChat.items, response.body.items, fromUpdate);
               newSingleChat.statusChat = response.body.data.statusChat;
               setSingleChat(newSingleChat);
 
-            case 17:
+            case 20:
             case "end":
               return _context9.stop();
           }
@@ -1268,19 +1290,31 @@ var ContentChat = function ContentChat(props) {
   var addNewItemsChat = function addNewItemsChat() {
     var currentItems = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     var newItems = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-    var items = currentItems.slice();
-    var itemsId = items.map(function (item) {
-      return item.id;
+    var fromUpdate = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var itemsId = {};
+    currentItems.forEach(function (item) {
+      itemsId[item.id] = item;
     });
-
-    for (var i = newItems.length - 1; i >= 0; i--) {
-      if (!itemsId.includes(newItems[i].id)) {
-        items.push(newItems[i]);
-        itemsId.push(newItems[i].id);
+    var thereAreNewItems = false;
+    newItems.forEach(function (newitem) {
+      if (!itemsId[newitem.id]) {
+        itemsId[newitem.id] = newitem;
+        thereAreNewItems = true;
       }
+    });
+
+    if (thereAreNewItems && fromUpdate) {
+      setPlaySound(true);
+      setTimeout(function () {
+        setPlaySound(false);
+      }, 5000);
     }
 
-    return items;
+    return Object.values(itemsId).sort(function (a, b) {
+      if (a.id < b.id) return 1;
+      if (a.id > b.id) return -1;
+      return 0;
+    });
   };
 
   var updateAllUsers = function updateAllUsers() {
@@ -1410,8 +1444,8 @@ var ContentChat = function ContentChat(props) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {});
   };
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
       children: [(chatContainerType !== "fixed" || !isSingleChat()) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Header.Header, {
         showBtnClose: showBtnClose,
         onClickBtnClose: onClickBtnClose,
@@ -1422,7 +1456,10 @@ var ContentChat = function ContentChat(props) {
           setShowChatsList(true);
         }
       }), renderBodyChat()]
-    })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactHowler.default, {
+      src: _newMessage.default,
+      playing: playSound
+    })]
   });
 };
 

package/dist/components/organisms/Chat/Header/index.js

@@ -25,8 +25,7 @@ var Header = function Header(props) {
       chatCompany = props.chatCompany,
       multipleCompanies = props.multipleCompanies,
       onClickBtnChooseChat = props.onClickBtnChooseChat,
-      onClickBtnClose = props.onClickBtnClose; //console.log(chatCompany);
-
+      onClickBtnClose = props.onClickBtnClose;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
       children: [showChatsList ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.3.18",
+  "version": "21.3.20",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",
@@ -8,11 +8,11 @@
     "@babel/runtime": "^7.17.2",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
-    "@mui/material": "^5.11.1",
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
     "@fortawesome/free-regular-svg-icons": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@mui/material": "^5.11.1",
     "@mui/styled-engine-sc": "^5.10.6",
     "@storybook/addon-postcss": "^2.0.0",
     "@testing-library/jest-dom": "^5.11.4",
@@ -35,6 +35,7 @@
     "react-dom": "^17.0.2",
     "react-draft-wysiwyg": "^1.14.7",
     "react-dropzone": "^12.0.4",
+    "react-howler": "^5.2.0",
     "react-image-fallback": "^8.0.0",
     "react-quill": "^1.3.5",
     "react-router-dom": "^5.3.3",

package/src/components/atoms/GeneralInput/index.js

@@ -90,6 +90,15 @@ export const GeneralInput = ({
     );
   }, [textValue]);
 
+  const numberInputOnWheelPreventChange = (e) => {
+    // Prevent the input value change
+    e.target.blur();
+    // Prevent the page/container scrolling
+    e.stopPropagation();
+    // Refocus immediately, on the next tick (after the current function is done)
+    setTimeout(() => e.target.focus(), 0);
+  };
+
   return (
     <Container isRequired={requiredEmpty}>
       {optionList?.length > 0 ? (
@@ -125,6 +134,7 @@ export const GeneralInput = ({
           maxLength={maxChar}
           required={isRequired}
           onKeyDown={onKeyDown}
+          onWheel={numberInputOnWheelPreventChange}
         />
       ) : (
         <InputFormatter

package/src/components/molecules/SelectV2/test.js

@@ -38,7 +38,6 @@ export const TestSelectV2 = () => {
         multiple={false}
         borderType={"oval"}
         onChange={(selectedItems) => {
-          console.log("onChange:", selectedItems);
           setSelected(selectedItems);
         }}
       />

package/src/components/organisms/Chat/Chat.stories.js

@@ -133,7 +133,7 @@ chatTicket_userTECH.args = {
   chatType: "ticket",
   chatContainerType: "fixed",
   chatData: {
-    id: 10,
+    id: 104,
     ticketOwnerUserId: 49,
     statusTicket: "IN_PROGRESS",
     currentUser: {

package/src/components/organisms/Chat/ContainerItems/index.js

@@ -272,7 +272,7 @@ export const ContainerItems = (props) => {
   const getUserCreatedItem = (ownMessage, item, lastUserId) => {
     return (
       <Slide
-        id={"itemScroll"}
+        id={"itemScroll-" + item.id}
         direction={ownMessage ? "left" : "right"}
         in={true}
         timeout={500}
@@ -460,7 +460,7 @@ export const ContainerItems = (props) => {
 
   return (
     <>
-      <Container id={"containerItems"}>
+      <Container id="containerItems">
         <div className="btn-loadMore">
           {showBtnLoadMore && (
             <ButtonV2

package/src/components/organisms/Chat/ContentChat/index.js

@@ -1,3 +1,4 @@
+import ReactHowler from 'react-howler'
 import { Container } from "./styles";
 import { useEffect, useState } from "react";
 import { NotFound } from "../../../atoms/NotFound";
@@ -14,6 +15,7 @@ import {
   isStringEmpty,
   isValidNaturalNumber,
 } from "../../../../global-files/utils";
+import newMessage from "../../../../assets/sounds/newMessage.mp3"
 
 export const ContentChat = (props) => {
   const {
@@ -64,6 +66,7 @@ export const ContentChat = (props) => {
     startDate: undefined, // Date()
     lastDate: undefined, // Date()
   });
+  const [playSound, setPlaySound] = useState(false);
 
   // matar update al desmontar el componente del chat
   useEffect(() => {
@@ -96,7 +99,6 @@ export const ContentChat = (props) => {
     //return;   -- descomentarizar para hacer pruebas sin update
     if (startUpdate == 0) return;
     const processID = setTimeout(() => {
-      console.log("update chat execute");
       setRunUpdate((prev) => prev + 1);
     }, 5000);
     setProcessUpdateID(processID);
@@ -113,7 +115,7 @@ export const ContentChat = (props) => {
       if (companies) getUpdateLatestOrderProduct();
       else getInitialOrderProduct();
     } else {
-      if (singleChat.items) getUpdateLatestTicket();
+      if (singleChat.items) getUpdateLatestTicket(true);
       else getInitialTicket();
     }
   }, [runUpdate]);
@@ -486,7 +488,7 @@ export const ContentChat = (props) => {
     }
   };
 
-  const getUpdateLatestTicket = async () => {
+  const getUpdateLatestTicket = async (fromUpdate = false) => {
     const dataUser = {
       id: dataChat.currentUser?.id,
       companyId: dataChat.currentUser?.companyId,
@@ -532,12 +534,15 @@ export const ContentChat = (props) => {
     // actualizar la lista de los users
     updateAllUsers(response.body.users);
     // actualizar los items del chat
+    if (response.body.items.length === 0) return;
     let newSingleChat = { ...singleChat };
     newSingleChat.items = addNewItemsChat(
       newSingleChat.items,
-      response.body.items
+      response.body.items,
+      fromUpdate,
     );
     newSingleChat.statusChat = response.body.data.statusChat;
+
     setSingleChat(newSingleChat);
   };
 
@@ -710,16 +715,29 @@ export const ContentChat = (props) => {
     return items;
   };
 
-  const addNewItemsChat = (currentItems = [], newItems = []) => {
-    let items = currentItems.slice();
-    let itemsId = items.map((item) => item.id);
-    for (let i = newItems.length - 1; i >= 0; i--) {
-      if (!itemsId.includes(newItems[i].id)) {
-        items.push(newItems[i]);
-        itemsId.push(newItems[i].id);
+  const addNewItemsChat = (currentItems = [], newItems = [], fromUpdate = false) => {
+    let itemsId = {};
+    currentItems.forEach((item) => {
+      itemsId[item.id] = item;
+    });
+    let thereAreNewItems = false;
+    newItems.forEach((newitem) => {
+      if (!itemsId[newitem.id]) {
+        itemsId[newitem.id] = newitem;
+        thereAreNewItems = true;
       }
+    });
+    if (thereAreNewItems && fromUpdate) {
+      setPlaySound(true);
+      setTimeout(() => {
+        setPlaySound(false);
+      }, 5000);
     }
-    return items;
+    return Object.values(itemsId).sort((a, b) => {
+      if (a.id < b.id) return 1;
+      if (a.id > b.id) return -1;
+      return 0;
+    });
   };
 
   const updateAllUsers = (newUsers = {}) => {
@@ -892,6 +910,10 @@ export const ContentChat = (props) => {
         {/* body */}
         {renderBodyChat()}
       </Container>
+      <ReactHowler
+        src={newMessage}
+        playing={playSound}
+      />
     </>
   );
 };

package/src/components/organisms/Chat/Header/index.js

@@ -19,7 +19,6 @@ export const Header = (props) => {
     onClickBtnClose, // () => {}
   } = props;
 
-  //console.log(chatCompany);
   return (
     <>
       <Container>