contentoh-components-library 21.2.58 → 21.2.60

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,
+        });
+      }
+    });
+  };

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

@@ -13,6 +13,9 @@ export const Graphic = ({ data, type, options }) => {
       } = chart;
       const x = width / 2;
       const y = height / 2 + (options.fontSize * 0.68) / 2;
+      const percent = options.value.toString().includes(".")
+        ? options.value.toFixed(2)
+        : options.value;
       ctx.save();
       ctx.beginPath();
       ctx.arc(x, height / 2, 60, 0, 2 * Math.PI);
@@ -23,7 +26,7 @@ export const Graphic = ({ data, type, options }) => {
       ctx.font = `${options.fontSize}px ${options.fontFamily}`;
       ctx.textAlign = options.textAlign;
       ctx.fillStyle = options.fontColor;
-      ctx.fillText(options.value, x, y);
+      ctx.fillText(percent + "%", x, y);
     },
   };
 

package/src/components/atoms/Tooltip/Tooltip.stories.js

@@ -0,0 +1,15 @@
+import { CustomTooltip } from "./index";
+
+export default {
+  title: "Components/atoms/CustomTooltip",
+  component: CustomTooltip
+};
+
+const Template = (args) => <CustomTooltip {...args} />;
+
+export const TooltipDefault = Template.bind({});
+TooltipDefault.args = {
+	componentTooltip: (<p> hola soy tooltip </p>) ,
+	children: (<button> abrir tooltip </button>) ,
+	className: "container-tooltip"
+};

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

@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react";
+import { Tooltip } from "@mui/material";
+import { Container } from "./styles";
+import React from "react";
+
+export const CustomTooltip = ({
+	componentTooltip ,
+	children ,
+	className ,
+	...props
+}) => {
+
+	const MyComponent = React.forwardRef(function MyComponent(props, ref) {
+		return (
+		  <div {...props} ref={ref}>
+			Bin
+		  </div>
+		);
+	  });
+  
+  return (
+  <Tooltip
+	{...props}
+	arrow
+	placement="top"
+	componentsProps={{
+		tooltip: {className: className} ,
+		popper: {disablePortal: true}
+	}}
+	title={ componentTooltip }
+  >
+	{children}
+  </Tooltip>
+  )
+};

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

@@ -0,0 +1,5 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+	border: 1px solid red;
+`;

package/src/components/molecules/CustomSelect/index.js

@@ -4,6 +4,7 @@ import searchIcon from "../../../assets/images/customSelect/searchIcon.png";
 import { useCloseModal } from "../../../global-files/customHooks";
 import { SelecItem } from "./SelectItem";
 import { Calendar } from "../../organisms/Calendar";
+import { formatDate } from "../../pages/Dashboard/dashboardUtils";
 
 export const CustomSelect = ({
   options,
@@ -94,12 +95,20 @@ export const CustomSelect = ({
           counter++;
         }
       });
-    counter > 0 && setFiltersCounter(counter);
+    setFiltersCounter(counter);
     setFiltersString(newFiltersString);
   }, [activeFilters]);
 
   return (
-    <Container id={customSelectId} selectLabel={selectLabel}>
+    <Container
+      id={customSelectId}
+      selectLabel={selectLabel}
+      filterActive={
+        Object.keys(activeFilters).length > 0 ||
+        (customSelectId === "dates-select" &&
+          filtersString !== "Todo el tiempo")
+      }
+    >
       <div className="button-list" onClick={() => setShowList(!showList)}>
         <p>{filtersString} </p>
         <p>{filtersCounter > 0 && `+${filtersCounter}`}</p>

package/src/components/molecules/CustomSelect/styles.js

@@ -15,7 +15,8 @@ export const Container = styled.div`
     //padding: 5px 5px;
     justify-content: space-between;
     border-radius: 50px;
-    background-color: #fff;
+    background-color: ${({ filterActive }) =>
+      filterActive ? "#F7F7FC" : "#fff"};
     border: 1px solid #f0f0f0;
     cursor: pointer;
 
@@ -93,6 +94,7 @@ export const Container = styled.div`
           }
         }
         .sub-menu {
+          margin-top: 10px;
           padding-left: 20px;
           .sub-filter {
             & + * {

package/src/components/molecules/HeaderTop/index.js

@@ -2,6 +2,7 @@ import { Container } from "./styles";
 import { ScreenHeader } from "../../atoms/ScreenHeader/index";
 import { Button } from "../../atoms/GeneralButton/index";
 import { useEffect, useRef } from "react";
+import { ChatPopUp } from "../../atoms/ChatPopUp/index";
 
 export const HeaderTop = ({ setHeaderTop }) => {
   const headerTop = useRef();
@@ -13,12 +14,15 @@ export const HeaderTop = ({ setHeaderTop }) => {
   return (
     <Container ref={headerTop}>
       <ScreenHeader text="Edición de producto" />
-      <Button
-        buttonType="close-button"
-        onClick={() => {
-          window.location.href = `/products`;
-        }}
-      />
+      <div className="buttons-top">
+        <ChatPopUp />
+        <Button
+          buttonType="close-button"
+          onClick={() => {
+            window.location.href = `/products`;
+          }}
+        />
+      </div>
     </Container>
   );
 };

package/src/components/molecules/HeaderTop/styles.js

@@ -3,4 +3,8 @@ import styled from "styled-components";
 export const Container = styled.div`
   display: flex;
   justify-content: space-between;
+  .buttons-top {
+    display: flex;
+    align-items: center;
+  }
 `;

package/src/components/organisms/DashboardMetric/dashboardMetricUtils.js

@@ -31,6 +31,8 @@ export const getFullStatus = (status) => {
       return "Aprobado Cadena";
     case "R":
       return "Por Recibir/Recibido";
+    case "Ex":
+      return "Exportado";
   }
 };
 
@@ -67,6 +69,8 @@ export const getStatusColor = (status) => {
       return "#839192";
     case "R":
       return "#D35400";
+    case "Ex":
+      return "#09CAD8";
     default:
       return "white";
   }

package/src/components/organisms/DashboardMetric/index.js

@@ -5,7 +5,6 @@ import {
   removeOldStatus,
   getStatusColor,
 } from "./dashboardMetricUtils";
-import { FontFamily } from "../../../global-files/variables";
 
 export const DashboardMetric = ({
   label,
@@ -19,6 +18,7 @@ export const DashboardMetric = ({
   showPercent = false,
   borderColor,
   total,
+  totalFiltered,
 }) => {
   const labels =
     type === "doughnut"
@@ -80,7 +80,7 @@ export const DashboardMetric = ({
         fontSize: 25,
         fontColor: "#707070",
         textAlign: "center",
-        value: total || 0,
+        value: (totalFiltered / total) * 100 || 0,
       },
     },
     scales: {

package/src/components/pages/Dashboard/Dashboard.stories.js

@@ -9,37 +9,37 @@ const Template = (args) => <Dashboard {...args} />;
 export const DashboardDeafult = Template.bind({});
 DashboardDeafult.args = {
   user: {
-    id_user: 28,
-    name: "Proveedor",
-    last_name: "Colgate",
-    email: "ilopez@contentoh.com",
-    position: "Prueba Admin",
-    telephone: "+523111366336",
+    id_user: 30,
+    name: "Admin",
+    last_name: "Ulises",
+    email: "salmeron.5@hotmail.com",
+    position: "Admin",
+    telephone: "",
     country: "México",
-    id_company: 1,
-    id_cognito: "f5927f8e-cbf7-4922-9e09-e69ec0b2731a",
+    id_company: 2,
+    id_cognito: "c94a7305-9365-46ff-a423-4b4bc3b8b180",
     birth_Date: null,
-    about_me: null,
-    zip_code: null,
-    address: null,
-    job: null,
-    id_stripe: "cus_KuEt6R6vwmN09f",
-    id_role: 0,
+    about_me: "",
+    zip_code: "",
+    address: "",
+    job: "",
+    id_stripe: "",
+    id_role: 6,
     active: 1,
     is_retailer: 0,
     email_notify: 1,
     membership: {
-      id: 76,
-      start_date: "2022-01-18T17:25:35.000Z",
-      end_date: "2023-01-18T17:25:35.000Z",
-      planID: 8,
-      plan: "prod_KtlhECVSFG2iro",
-      name: "Plan Pro",
-      user_limit: "20",
-      products_limit: "5000",
-      type: "Enterprise",
+      id: 2,
+      start_date: "2021-11-05T02:35:12.000Z",
+      end_date: "2022-11-05T02:34:49.000Z",
+      planID: 1,
+      plan: "prod_KtkvuFFLpOdP6e",
+      name: "Plan Free",
+      user_limit: "1",
+      products_limit: "3",
+      type: "PyMES",
     },
-    src: "https://content-management-profile.s3.amazonaws.com/id-28/28.png?1662994279777",
+    src: "https://content-management-profile.s3.amazonaws.com/id-30/30.png?1666294798400",
   },
-  jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI5ZjdmNzA0My1jZWFjLTRjYjktYjYxNy0zNjA1ODJlZDYxODAiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2Mjk5NDI3OCwibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2NjI5OTc4NzgsImlhdCI6MTY2Mjk5NDI3OCwiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.Qsmp4f9zCqXueUTk-ACPM5VY2wQ1nM9A8z-UVArukCpJNruA2ypaIuVpISDiCuBXBlRyILM7mzbuTADLvim-KbWT16Tsr9Q3dzCwM4KU3tFkxSblyM0hTdBVy6MKa7KVffGMLqScMVyMpavqbqLXC2GsANJMrBnnOwiTmrNSkFsO4bYovFGwsP6qiN85pMpAdHJjrNpCvilMBXWkNoNdah5_YRckTQOxGpGua_599eqgq4pg7wM1rxh4ze5ZynaQjRLwtXCR70hdXjOZCTyawzH4yiWYZNA4Sv9KkwLjT7vrFmBMjmm3yr72edT492qG6Iskkj_EYhKvOSl_4mDZhg",
+  jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJjOTRhNzMwNS05MzY1LTQ2ZmYtYTQyMy00YjRiYzNiOGIxODAiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjp0cnVlLCJjb2duaXRvOnVzZXJuYW1lIjoiYzk0YTczMDUtOTM2NS00NmZmLWE0MjMtNGI0YmMzYjhiMTgwIiwiY29nbml0bzpyb2xlcyI6WyJhcm46YXdzOmlhbTo6ODk4NjcwMjMyODA3OnJvbGVcL2NvbnRlbnRvaC1kZXYtdXMtZWFzdC0xLWxhbWJkYVJvbGUiXSwiYXVkIjoiNWFjOHRwZ3M2Z2JzcTEzZnJ2cnBpZWVwNDAiLCJldmVudF9pZCI6ImJmODBhZmM4LTVjMWMtNDJmNi1hY2RhLTg0M2I1NDg3OWExZSIsInRva2VuX3VzZSI6ImlkIiwiYXV0aF90aW1lIjoxNjY2Mjk0Nzk2LCJuYW1lIjoiQ29sYWJvcmFkb3IiLCJwaG9uZV9udW1iZXIiOiIrNTIxMTExIiwiZXhwIjoxNjY2Mjk4Mzk2LCJpYXQiOjE2NjYyOTQ3OTYsImVtYWlsIjoic2FsbWVyb24uNUBob3RtYWlsLmNvbSJ9.RHigufdS172zrKNRuSKB9AALBvpHW2_xkHKMIVl5o4UtwiLOFyCI2gtdHDb7pgXxJH1Lk5n4OyNIiD6rta40o-eq7oY5unlUI38UVO0f8VXvjkvoi2CQ3J6JdNCZVzSzpT29vk0qvT39HFKVKfru4UxjTbPvVX77yZZ_QYoQvZ6gTjhzcvQslBSlQHh-RDAIwI9jbcePBDLIExbt_fq7Q6T5WdhnXkam8xBavF-3c3tVK9SjCAD_Y2gQhVmnAO5Co2Mqh59XfdT6uwNLTtwWd3aK5YX1thWW_oACfKBWAvLMSoYO3mjiXGWzKKLe7uNSvv92VhpLUeoYnVfrtafXAg",
 };

package/src/components/pages/Dashboard/dashboardUtils.js

@@ -69,5 +69,5 @@ export const formatDate = (date) => {
   const year = newDate.getFullYear();
   const month = newDate.getMonth() + 1;
   const day = newDate.getDate();
-  return `${year}-${month}-${day}`;
+  return `${year}/${month}/${day}`;
 };