contentoh-components-library 21.2.78 → 21.2.79

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/GalleryElement/index.js

@@ -21,6 +21,8 @@ export const GalleryElement = ({
   selectedImages,
   setSelectedImages,
   setCheckAll,
+  setSocketType,
+  shotThd,
 }) => {
   const [statusValidation, setStatusValidation] = useState(validation);
   const [showValidationPanel, setShowValidationPanel] = useState(false);
@@ -118,6 +120,22 @@ export const GalleryElement = ({
                   });
                 }}
               />
+              {shotThd && (
+                <Select
+                  width="100%"
+                  placeholder="Tipo de imagen THD"
+                  options={imageShotType}
+                  valueSelected={image.image_shot_type}
+                  onChange={(e) => {
+                    changeImage({
+                      action: "changeShotType",
+                      attribute: "image_shot_type",
+                      value: +e.target.value,
+                      index: number,
+                    });
+                  }}
+                />
+              )}
             </>
           )}
         </div>

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

@@ -20,6 +20,7 @@ export const GalleryHeader = ({ setCheckAll, setSelectedImages, shotThd }) => {
       <p className="">Tipo de toma</p>
       <p className="">Tipo de imagen</p>
       <p className="">Tipo de empaque</p>
+      {shotThd && <p className="">Tipo de imagen THD</p>}
     </Container>
   );
 };

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/pages/RetailerProductEdition/index.js

@@ -435,6 +435,7 @@ export const RetailerProductEdition = ({
         changeImage={setImages}
         selectedImages={selectedImages}
         setSelectedImages={setSelectedImages}
+        shotThd={shotThd}
       />
     ));
   };