contentoh-components-library 21.2.57 → 21.2.59

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/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/CustomSelect.stories.js

@@ -1,4 +1,5 @@
 import { CustomSelect } from "./index";
+import iconStar from "../../../assets/images/customSelect/starIcon.svg";
 
 export default {
   title: "Components/molecules/CustomSelect",
@@ -8,20 +9,27 @@ export default {
 const Template = (args) => <CustomSelect {...args} />;
 export const CustomSelectDefault = Template.bind({});
 CustomSelectDefault.args = {
-  selectLabel: "Todos los departamentos",
+  // selectLabel: "Todos los departamentos",
   defaultOption: "Todos los departamentos",
   options: [
     {
-      id: 1,
-      value: "Decoración",
-      subOptions: [
-        { id: 1, value: "Espejos" },
-        { id: 2, value: "Persianas" },
-      ],
+      id: 47,
+      name: "Enero 2023",
+      isSelected: true,
+    },
+    {
+      id: 49,
+      name: "Mis Favoritos",
     },
-    { id: 2, value: "Eléctrico" },
-    { id: 3, value: "Ferretería" },
-    { id: 4, value: "Herramientas" },
-    { id: 5, value: "Iluminación" },
   ],
+  onClickItem: (v, id) => {
+    if (v) {
+      console.log("Agregar a la lista", id);
+    } else {
+      console.log("Eliminar a la lista", id);
+    }
+  },
+  icon: iconStar,
+  showSearchBar: true,
+  customOptions: <p>Esto es un customOptions</p>
 };

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

@@ -7,6 +7,7 @@ export const SelecItem = ({
   setParameterArray,
   activeFilters,
   setActiveFilters,
+  onClickItem,
 }) => {
   const [showSubOptions, setShowSubOptions] = useState(false);
   const [chkGlobal, setChkGlobal] = useState(false);
@@ -17,6 +18,9 @@ export const SelecItem = ({
           id={"main-item-" + option.id}
           label={option.name}
           onChange={(e) => {
+            if (onClickItem) {
+              onClickItem(e.target.checked, option.id)
+            }
             const subOptions = option.subOptions;
             const filtersCopy = { ...activeFilters };
             if (subOptions) {
@@ -77,6 +81,9 @@ export const SelecItem = ({
                   activeFilters[option.name][sub.name]
                 }
                 onChange={(e) => {
+                  if (onClickItem) {
+                    onClickItem(e.target.checked, sub.id)
+                  }
                   if (e.target.checked) {
                     setParameterArray((current) =>
                       [...current, sub.id].sort((a, b) => a - b)

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

@@ -13,9 +13,12 @@ export const CustomSelect = ({
   customSelectId = "defaultSelectId",
   defaultOption,
   setParameterArray,
+  onClickItem,
+  icon,
+  customOptions,
   showFilterString,
 }) => {
-  const [filters, setFilters] = useState(options || []);
+  const [filters, setFilters] = useState([]);
   const [showList, setShowList] = useCloseModal(customSelectId);
   const [text, setText] = useState("");
   const [showDatePicker, setShowDatePicker] = useCloseModal(customSelectId);
@@ -36,7 +39,21 @@ export const CustomSelect = ({
     const end = new Date();
     setStartDate(start);
     setEndDate(end);
-  }, []);
+    const obj = {};
+    options.forEach((o) => {
+      const { name, isSelected, subOptions } = o;
+      if (isSelected) obj[name] = {};
+      subOptions?.forEach((so) => {
+        const { name: nameSO, isSelected: isSelectedSO } = so;
+        if (isSelectedSO) {
+          if (!obj[name]) obj[name] = {};
+          obj[name][nameSO] = true;
+        }
+      });
+    });
+    setActiveFilters(obj);
+    setFilters(options);
+  }, [options]);
 
   const onChangeDatePicker = (dates) => {
     const [start, end] = dates;
@@ -82,68 +99,76 @@ export const CustomSelect = ({
   }, [activeFilters]);
 
   return (
-    <Container id={customSelectId}>
+    <Container id={customSelectId} selectLabel={selectLabel}>
       <div className="button-list" onClick={() => setShowList(!showList)}>
-        <p>{filtersString}</p>
+        <p>{filtersString} </p>
         <p>{filtersCounter > 0 && `+${filtersCounter}`}</p>
-        <div className="arrow-item">&#9664;</div>
+        {icon ? (
+          <img src={icon} alt="Favorite" width={"20px"} />
+        ) : (
+          <div className="arrow-item">&#9664;</div>
+        )}
       </div>
-      {showList && (
-        <div className="select-container">
-          {showSearchBar && (
-            <div className="search-bar-filter">
-              <img src={searchIcon} alt="search icon" />
-              <input
-                type="text"
-                placeholder={placeHolder}
-                value={text}
-                onChange={onChange}
-              />
-            </div>
-          )}
-          {defaultOption && (
-            <div
-              className="default-option"
-              onClick={() => {
-                setParameterArray([]);
-                setActiveFilters({});
-                setShowList(false);
-                setFiltersString(selectLabel);
-                setFiltersCounter(0);
-              }}
-            >
-              <p>{defaultOption}</p>
-            </div>
-          )}
-          <div className="filters-container">
-            {filters?.map((option) =>
-              customSelectId === "dates-select" ? (
-                <div
-                  className="dates-select-item"
-                  key={customSelectId + option.id}
-                  onClick={() => {
-                    option.function
-                      ? option.function(setShowDatePicker)
-                      : setShowDatePicker(true);
-                    setFiltersString(option.name);
-                  }}
-                >
-                  <p>{option.name}</p>
-                </div>
-              ) : (
-                <SelecItem
-                  key={customSelectId + option.id}
-                  option={option}
-                  customSelectId={customSelectId}
-                  setParameterArray={setParameterArray}
-                  activeFilters={activeFilters}
-                  setActiveFilters={setActiveFilters}
+      {showList &&
+        (customOptions ? (
+          customOptions
+        ) : (
+          <div className="select-container">
+            {showSearchBar && (
+              <div className="search-bar-filter">
+                <img src={searchIcon} alt="search icon" />
+                <input
+                  type="text"
+                  placeholder={placeHolder}
+                  value={text}
+                  onChange={onChange}
                 />
-              )
+              </div>
             )}
+            {defaultOption && (
+              <div
+                className="default-option"
+                onClick={() => {
+                  setParameterArray && setParameterArray([]);
+                  setActiveFilters({});
+                  setShowList(false);
+                  setFiltersString(selectLabel);
+                  setFiltersCounter(0);
+                }}
+              >
+                <p>{defaultOption}</p>
+              </div>
+            )}
+            <div className="filters-container">
+              {filters?.map((option) =>
+                customSelectId === "dates-select" ? (
+                  <div
+                    className="dates-select-item"
+                    key={customSelectId + option.id}
+                    onClick={() => {
+                      option.function
+                        ? option.function(setShowDatePicker)
+                        : setShowDatePicker(true);
+                      setFiltersString(option.name);
+                    }}
+                  >
+                    <p>{option.name}</p>
+                  </div>
+                ) : (
+                  <SelecItem
+                    key={customSelectId + option.id}
+                    option={option}
+                    customSelectId={customSelectId}
+                    setParameterArray={setParameterArray}
+                    activeFilters={activeFilters}
+                    setActiveFilters={setActiveFilters}
+                    onClickItem={onClickItem}
+                  />
+                )
+              )}
+            </div>
           </div>
-        </div>
-      )}
+        ))}
       {showDatePicker && (
         <Calendar
           onChange={onChangeDatePicker}

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

@@ -10,7 +10,9 @@ export const Container = styled.div`
     font-family: ${FontFamily.Raleway};
     font-size: 13px;
     display: flex;
-    padding: 10px 15px;
+    padding: ${(props) => (props.selectLabel !== "" ? "10px 15px" : "5px 5px")};
+    //padding: 10px 15px;
+    //padding: 5px 5px;
     justify-content: space-between;
     border-radius: 50px;
     background-color: #fff;