contentoh-components-library 21.2.65 → 21.2.66

package/src/components/atoms/ChatPopUp/styles.js

@@ -0,0 +1,278 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.button`
+  height: 34px;
+  width: 34px;
+  background-color: transparent;
+  border: 1px solid #f0f0f0;
+  border-radius: 50px;
+  padding: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  cursor: pointer;
+  &:hover {
+    background-color: #f0f0f0;
+  }
+  .icon-chat {
+    margin: 0;
+    width: 15px;
+    height: 15px;
+  }
+`;
+export const Slider = styled.div`
+  -webkit-box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.8);
+  box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.8);
+  z-index: 200;
+  width: 425px;
+  height: 600px;
+  border-radius: 10px;
+  background: white;
+  padding: 37px 16px 17px 20px;
+  position: absolute;
+  right: ${({ showMenu }) => (showMenu ? 2 : -50)}%;
+  top: 3%;
+  transition: right 2s ease 0;
+  .image {
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    background-color: #f7f7f7;
+    border-radius: 10px;
+    #myList {
+      list-style: none;
+      img {
+        width: 365px;
+        border-radius: 10px;
+      }
+    }
+  }
+  .close {
+    background-color: #e33aa9;
+    border: 3px solid white;
+    height: 35px;
+    width: 35px;
+    border-radius: 50%;
+    position: absolute;
+    top: -18px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+  .content-chat {
+    height: 495px;
+    max-height: 495px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background-color: transparent;
+    font-family: sans-serif;
+    font-size: 12px;
+    & + * {
+      margin-top: 12px;
+    }
+    ::-webkit-scrollbar {
+      width: 0;
+    }
+    .cargar-mas {
+      border: none;
+      border-radius: 10px;
+      font: normal normal normal 11px/11px sans-serif;
+      letter-spacing: 0.1px;
+      color: #8a6caa;
+      background-color: #f7f7fc;
+      padding: 5px 17px;
+      margin: 0 35%;
+      display: flex;
+      cursor: pointer;
+      white-space: nowrap;
+      &:hover {
+        background-color: #f0f0f0;
+      }
+      img {
+        margin-right: 7px;
+        height: 13px;
+      }
+    }
+    #myListChat {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      height: 100%;
+      overflow-y: auto;
+      overflow-x: hidden;
+      display: flex;
+      flex-direction: column-reverse;
+      gap: 3px;
+      .group-date {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        hr {
+          width: 120px;
+          border: 0.3px solid #f0f0f0;
+        }
+        p {
+          margin: 0 10px;
+          color: #b3b3b3;
+        }
+      }
+      li {
+        width: 100%;
+        padding: 5px 0;
+        margin: 0;
+        display: flex;
+        flex-direction: row-reverse;
+        justify-content: flex-start;
+        flex-wrap: nowrap;
+        gap: 5px;
+        align-items: center;
+        .tooltip-userName {
+          background-color: #f0f0f0;
+          padding: 6px 10px;
+          color: #000000;
+          font-size: 11px;
+          margin-bottom: 6px;
+          .MuiTooltip-arrow {
+            color: #f0f0f0;
+          }
+        }
+
+        .profile {
+          display: grid;
+          place-items: center;
+          align-self: start;
+          width: 34px;
+          height: 34px;
+          border-radius: 50%;
+          overflow: hidden;
+          img {
+            width: 100%;
+            height: 100%;
+            border-radius: inherit;
+          }
+        }
+        .img-file {
+          margin: 0 10px;
+          width: 165px;
+          img {
+            width: 100%;
+            object-fit: contain;
+            border-radius: 10px;
+          }
+        }
+        .body-message {
+          margin: 0 10px;
+          border-radius: 10px;
+          box-sizing: border-box;
+          background-color: #f0f0f0;
+          padding: 10px 10px 10px 12px;
+          max-width: 280px;
+          p {
+            color: #262626;
+            margin: 0;
+            padding: 0;
+          }
+          a {
+            text-decoration: none;
+          }
+          div {
+            cursor: pointer;
+            background-color: white;
+            border-radius: 10px;
+            padding: 7px 10px;
+            display: flex;
+            align-items: center;
+            img {
+              height: 20px;
+              width: 20px;
+              margin-right: 5px;
+            }
+            p {
+              color: #262626 !important;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              overflow: hidden;
+            }
+          }
+        }
+        .date {
+          display: flex;
+          align-items: center;
+          white-space: nowrap;
+          p {
+            color: #d9d9d9;
+            font-size: 9px;
+          }
+        }
+        &.own-message {
+          flex-direction: row;
+          justify-content: flex-start;
+          .body-message {
+            background-color: #8386ee;
+            p {
+              margin: 0;
+              padding: 0;
+              color: #ffffff;
+            }
+          }
+        }
+      }
+    }
+  }
+  .input-chat {
+    display: flex;
+    align-items: center;
+    border-radius: 17px;
+    background-color: #f7f7f7;
+    padding: 10px 7px 10px 15px;
+    .send-message {
+      background-color: transparent;
+      width: 157%;
+      border: none;
+      font-family: sans-serif;
+      font-size: 13px;
+      line-height: initial;
+      color: #242424;
+      ::placeholder {
+        font: normal normal medium 12px/14px sans-serif;
+        letter-spacing: 0.6px;
+        color: #b3b3b3;
+      }
+      :focus {
+        outline: none;
+      }
+      & + * {
+        margin-left: 10px;
+      }
+    }
+    .upload {
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      & + * {
+        margin-left: 7px;
+      }
+    }
+    .add-picture-input {
+      display: none;
+    }
+    .send {
+      width: 35.4px;
+      height: 20px;
+      border: none;
+      background-color: #e33aa9;
+      border-radius: 50%;
+      display: flex;
+      justify-content: center;
+      cursor: pointer;
+      align-items: center;
+      img {
+        width: 11px;
+        height: 11px;
+      }
+    }
+  }
+`;

package/src/components/atoms/ChatPopUp/utils/handlersChat.js

@@ -0,0 +1,104 @@
+
+import axios from "axios";
+
+
+export const getBD = (
+	id_article, 
+	version_article, 
+	get_type, 
+	item_date ,
+	tokenUser
+) => {
+    return new Promise(async (response, error) => {
+      try {
+        let URL = `https://fc069ovhuk.execute-api.us-east-1.amazonaws.com/dev/products-chat`; // endpoint
+        URL += `?id_article=${id_article}`;
+        URL += `&version_article=${version_article}`;
+        URL += `&get_type=${get_type}`;
+        URL += `&item_date=${item_date}`;
+
+        const respHTTPjson = await axios.get(URL, {
+          headers: {
+            // AQUI COLOCAR EL TOKEN DEL USUARIO CONECTADO
+            Authorization: tokenUser,
+          },
+        });
+        //console.log( "respHTTPjson" , respHTTPjson )
+        // verificar si existe un error en la peticion realizada
+        if (respHTTPjson.status != 200) {
+          response({
+            message: "No fue posible llevar a cabo la operacion",
+            errorDetails: respHTTPjson.statusText,
+          });
+          return;
+        }
+        // obtener body backend
+        const body = JSON.parse(respHTTPjson.data.body);
+        //console.log( "resHTTP body:" , body );
+        // verificar si existe error desde el backend
+        if (respHTTPjson.data.statusCode != 200) {
+          response({
+            message: body.message,
+            errorDetails: body.errorDetail,
+          });
+          return;
+        }
+        // cuando se ejecuto bien el create ... tomar un posible message
+        response({ body });
+      } catch (err) {
+        //console.log("error catch get items chat" , err);
+        response({
+          message: "Algo salio mal al obtener los items del chat",
+          errorDetails: err.message,
+        });
+      }
+    });
+  };
+
+
+export const createItemBD = (
+	id_article, 
+	version_article, 
+	value_type, 
+	value ,
+	tokenUser
+) => {
+    return new Promise(async (response, error) => {
+      try {
+        const URL = `https://fc069ovhuk.execute-api.us-east-1.amazonaws.com/dev/products-chat`;
+        const bodyData = {
+          id_article: id_article,
+          version_article: version_article,
+          value_type: value_type,
+          value: value,
+        };
+
+        const respHTTPjson = await axios.post(URL, bodyData, {
+          headers: {
+            Authorization: tokenUser,
+          },
+        });
+        if (respHTTPjson.status != 200) {
+          response({
+            message: "No fue posible llevar a cabo la operacion",
+            errorDetails: respHTTPjson.statusText,
+          });
+          return;
+        }
+        const body = JSON.parse(respHTTPjson.data.body);
+        if (respHTTPjson.data.statusCode != 200) {
+          response({
+            message: body.message,
+            errorDetails: body.errorDetail,
+          });
+          return;
+        }
+        response({ body: true });
+      } catch (err) {
+        response({
+          message: "Algo salio mal al agregar el item en el chat",
+          errorDetails: err.message,
+        });
+      }
+    });
+  };