contentoh-components-library 21.4.122 → 21.4.124

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

@@ -1,5 +1,3 @@
-import React from 'react';
-import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import { Container } from "./styles";
 
 export const CheckBox = ({
@@ -10,11 +8,10 @@ export const CheckBox = ({
   defaultChecked,
   disabled = false,
   checked,
-  typeColor,
   className = "",
 }) => {
   return (
-    <Container key={`check-${id}`} className={className} typeColor={typeColor}>
+    <Container key={`check-${id}`} className={className}>
       <input
         type="checkbox"
         name={id}
@@ -26,7 +23,6 @@ export const CheckBox = ({
       />
       <label htmlFor={id}>
         {label && <p className={isFilter && "filter-text"}>{label}</p>}
-        
       </label>
     </Container>
   );

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

@@ -1,7 +1,5 @@
 import styled from "styled-components";
-import checkedPurple from "../../../assets/images/checkBox/checked.svg";
-import checkedGreen from "../../../assets/images/checkBox/checkverde.svg";
-import checkedPink from "../../../assets/images/checkBox/checkrosa.svg";
+import checked from "../../../assets/images/checkBox/checked.svg";
 import unchecked from "../../../assets/images/checkBox/unchecked.svg";
 import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
@@ -11,10 +9,8 @@ export const Container = styled.div`
     &:checked + label {
       &:before {
         background-color: ${GlobalColors.white};
-        background-image: ${({ typeColor }) => ( typeColor === "purple" ? 
-        `url(${checkedPurple})` : typeColor === "green" 
-        ? `url(${checkedGreen})` : `url(${checkedPink})` )}
-      } 
+        background-image: url(${checked});
+      }
     }
   }
 
@@ -50,8 +46,6 @@ export const Container = styled.div`
       top: 50%;
       transform: translateY(-50%);
       background-image: url(${unchecked});
-      z-index: 5;
-      cursor: pointer;
     }
   }
 `;

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

@@ -5,8 +5,6 @@ import rejectIcon from "../../../assets/images/generalButton/rejectIcon.svg";
 import nullIcon from "../../../assets/images/generalButton/nullIcon.svg";
 import openModalIcon from "../../../assets/images/generalButton/openModal.svg";
 import closeIcon from "../../../assets/images/generalButton/closeIcon.svg";
-import closeIconv2 from "../../../assets/images/generalButton/closeIconv2.svg";
-import closeIconWhite from "../../../assets/images/generalButton/closeIconWhite.svg";
 import rowsLayout from "../../../assets/images/generalButton/rowLayout.svg";
 import gridLayout from "../../../assets/images/generalButton/gridLayout.svg";
 import arrowIcon from "../../../assets/images/arrow/arrowIcon.svg";
@@ -146,24 +144,6 @@ export const Container = styled.button`
     background-image: url(${closeIcon});
   }
 
-  &.close-buttonv2 {
-    width: 52px;
-    height: 52px;
-    background-color: transparent;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-image: url(${closeIconv2});
-  }
-
-  &.close-button-white {
-    width: 52px;
-    height: 52px;
-    background-color: transparent;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-image: url(${closeIconWhite});
-  }
-
   &.open-modal-button {
     background-color: transparent;
     border: none;
@@ -206,30 +186,4 @@ export const Container = styled.button`
       opacity: 1;
     }
   }
-  &.general-button-rec {
-    background:#85BC5B;
-    color: ${GlobalColors.white};
-    padding: 4px 5px;
-    border-radius: 3px;
-    font-size: 10px;
-    height: 20px;
-    line-height: 12px;
-    text-align: center;
-  }
-
-  &.general-button-sol {
-    background-color: #e33aa9;
-    border: none;
-    border-radius: 50px;
-    color: ${GlobalColors.white};
-    height: 34px;
-    font-family: Avenir Next;
-    font-style: normal;
-    font-weight: normal;
-    font-size: 12px;
-    line-height: 14px;
-    padding: 10px 15px;
-    cursor: pointer;
-  }
 `;
-

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

@@ -66,13 +66,3 @@ export const Container = styled.div`
     }
   }
 `;
-
-
-
-
-
-
-
-
-
-

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

@@ -6,15 +6,15 @@ export const Container = styled.div`
     background-color: ${GlobalColors.white};
     border: 1px solid
       ${({ focus, isRequired }) =>
-        focus ? GlobalColors.magenta_s2 : isRequired ? "red" : GlobalColors.gray_light};
+        focus ? GlobalColors.magenta_s2 : isRequired ? "red" : GlobalColors.s3};
     position: relative;
-    border-radius: 5px;
+    border-radius: 2px;
 
     .ql-toolbar {
       background-color: ${GlobalColors.s2};
       position: absolute;
       z-index: 10;
-      border: 1px solid ${GlobalColors.gray_light};
+      border: 1px solid ${GlobalColors.s3};
       width: 45px;
       height: 45px;
       border-radius: 4px;
@@ -30,10 +30,6 @@ export const Container = styled.div`
       strong {
         font-family: ${FontFamily.Raleway_900};
       }
-
-      .ql-editor{
-        padding: 8px 10px;
-      }
     }
   }
   .description-limit {
@@ -41,6 +37,5 @@ export const Container = styled.div`
     font-family: ${FontFamily.AvenirNext};
     color: ${GlobalColors.deep_gray};
     text-align: right;
-    margin-top: 5px;
   }
-`;
+`;

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

@@ -46,7 +46,7 @@ export const Slider = styled.div`
   }
   &.bottom-slide {
     top: 100%;
-    right: calc(100% + -100px);
+    right: calc(100% + -70px);
   }
   ul,
   li {

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

@@ -1,6 +1,6 @@
 import { Container } from "./styles";
 
-export const TabSection = ({ label, active, onClick}) => {
+export const TabSection = ({ label, active, onClick }) => {
   return (
     <Container className={active && "active"} onClick={onClick}>
       <p>{label}</p>

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

@@ -1,5 +1,6 @@
 import styled from "styled-components";
 import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
 export const Container = styled.div`
   font-family: ${FontFamily.Raleway_500};
   color: ${GlobalColors.s5};
@@ -10,10 +11,12 @@ export const Container = styled.div`
   padding-bottom: 5px;
   transition: 0.1s all;
   cursor: pointer;
+
   &.active {
     font-size: 18px;
     border-bottom: 2px solid ${GlobalColors.magenta_s2};
   }
+
   & + * {
     margin-left: 10px;
   }

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

@@ -1,8 +1,8 @@
 import { Container } from "./styles";
 import IconInfo from "../../../assets/images/Icons/info.svg";
 import TextField from "@mui/material/TextField";
-import Tooltip, { tooltipClasses } from "@mui/material/Tooltip";
-import { styled } from "@mui/material/styles";
+import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
+import { styled } from '@mui/material/styles';
 import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const BoxAttribute = (props) => {
@@ -29,7 +29,7 @@ export const BoxAttribute = (props) => {
   ))(({ theme }) => ({
     [`& .${tooltipClasses.tooltip}`]: {
       backgroundColor: GlobalColors.white,
-      color: "rgba(0, 0, 0, 0.87)",
+      color: 'rgba(0, 0, 0, 0.87)',
       boxShadow: theme.shadows[1],
       fontSize: 11,
       fontFamily: `${FontFamily.Roboto}, sans-serif`,
@@ -37,41 +37,34 @@ export const BoxAttribute = (props) => {
   }));
   return (
     <>
-      <Container
+       <Container
         id={id}
         key={key}
         className={className}
         borderType={borderType}
       >
-        <LightTooltip
-          title={
-            <div className="container-tooltip">
-              <p className="container-tooltip">{description}</p>
-            </div>
-          }
-        >
-          <Container className="">
-            <img className="icon" src={IconInfo} alt="iconInfo" />
-          </Container>
+        <LightTooltip title={
+              <div className="container-tooltip">
+                <p className="container-tooltip">{description}</p>
+              </div>
+            }>
+              <Container className="">
+                <img className="icon" src={IconInfo} alt="iconInfo" />
+              </Container>
         </LightTooltip>
-        <span>
-          {text}
-          <span className={required ? "required-text" : ""}>
-            {required ? "*" : ""}
-          </span>
-        </span>
-        <TextField
-          hiddenLabel
-          key={props.id}
-          name={props.id}
-          value={atributos[props.id]}
-          onChange={handleInputChange}
-          className="caja-borde"
-          variant="outlined"
-          size="small"
-          type="number"
-          required={required}
-        />
+        <span>{text}<span className={required ? 'required-text' : ''}>{required ? '*' : ''}</span></span>
+          <TextField
+            hiddenLabel
+            key={props.id}
+            name={props.id}
+            value={atributos[props.id]}
+            onChange={handleInputChange}
+            className="caja-borde"
+            variant="outlined"
+            size="small"
+            type="number"
+            required={required}
+          />
       </Container>
     </>
   );

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

@@ -4,7 +4,7 @@ import { FontFamily, GlobalColors } from "../../../global-files/variables";
 export const Container = styled.div`
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap:4px;
   #atr-alto {
     display: flex;
     align-items: center;

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

@@ -1,29 +1,28 @@
 import { Container, ContainerIcon } from "./styles";
 import { Button } from "@mui/material";
 
-export const BoxButtons = ({
-  showAdd,
-  onAdd,
-  onDelete,
-  isTheFirstBox,
-  index,
-}) => {
+export const BoxButtons = ({ showAdd, onAdd, onDelete, isTheFirstBox, index  }) => {
+  console.log("index",index)
   return (
-    <Container index={index}>
-      {!isTheFirstBox && (
-        <Button variant="outlined" className="button-circle" onClick={onDelete}>
-          <ContainerIcon>
-            <span className="iconos-out">delete_forever</span>
-          </ContainerIcon>
-        </Button>
-      )}
-      {showAdd && (
-        <Button onClick={onAdd} variant="outlined" className="button-circle">
-          <ContainerIcon>
-            <span className="iconos-out iconos-grises">add</span>
-          </ContainerIcon>
-        </Button>
-      )}
-    </Container>
+      <Container index={index}>
+        {!isTheFirstBox && (
+          <Button
+            variant="outlined"
+            className="button-circle"
+            onClick={onDelete}
+          >
+            <ContainerIcon>
+              <span className="iconos-out">delete_forever</span>
+            </ContainerIcon>
+          </Button>
+        )}
+        {showAdd && (
+          <Button onClick={onAdd} variant="outlined" className="button-circle">
+            <ContainerIcon>
+              <span className="iconos-out iconos-grises">add</span>
+            </ContainerIcon>
+          </Button>
+        )}
+      </Container>
   );
 };

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

@@ -27,7 +27,7 @@ export const CarouselImagesLogin = ({
       img2.src = images[i];
       const circulo_actual = Array.from(circulos).find((el) => el.id === i);
       Array.from(circulos).forEach((cir) => cir.classList.remove("resaltado"));
-      circulo_actual?.classList.add("resaltado");
+      circulo_actual.classList.add("resaltado");
       img1.classList.add("right");
       img2.classList.add("active");
       i++;

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

@@ -4,13 +4,10 @@ import { Button } from "../../atoms/GeneralButton/index";
 import { useEffect, useRef } from "react";
 import { Chat } from "../../organisms/Chat";
 import auditIcon from "../../../../src/assets/images/generalButton/Icono AB.svg";
-import { useState } from "react";
-import { render } from "@testing-library/react";
 
 export const HeaderTop = ({
   setHeaderTop,
   withChat,
-  chatType,
   productSelected,
   token,
   auditableVersion,
@@ -19,51 +16,16 @@ export const HeaderTop = ({
   activeRetailer,
 }) => {
   const headerTop = useRef();
-  const [chat, setChat] = useState(null);
-  const [chatData, setChatData] = useState(null);
-
-  useEffect(() => {
-    if (activeRetailer.id && productSelected && token.length) {
-      setChatData({
-        id: productSelected?.article?.id_article || productSelected?.id_article,
-        version: productSelected?.version,
-        retailerId: activeRetailer?.id,
-        status: productSelected?.status,
-        userToken: token,
-      });
-    }
-  }, [activeRetailer, productSelected, token]);
-
-  useEffect(() => {
-    if (chatType) renderChat(chatType);
-  }, [chatData, chatType]);
 
   useEffect(() => {
     setHeaderTop && setHeaderTop(headerTop.current.clientHeight);
   }, []);
 
-  const renderChat = (chatType) => {
-    switch (chatType) {
-      case "product_status":
-        chatData &&
-          setChat(
-            <Chat
-              chatType="product_status"
-              chatContainerType="popUp"
-              chatData={{
-                id: chatData?.id,
-                version: chatData?.version,
-                retailerId: chatData?.retailerId,
-                status: chatData?.status,
-                userToken: chatData?.userToken,
-              }}
-              size={18}
-              activeRetailer={activeRetailer}
-            />
-          );
-        break;
-      default:
-        setChat(
+  return (
+    <Container ref={headerTop}>
+      <ScreenHeader text="Edición de producto" />
+      <div className="buttons-container">
+        {withChat && (
           <Chat
             chatType="merchant_product"
             chatContainerType="popUp"
@@ -75,16 +37,8 @@ export const HeaderTop = ({
             size={18}
             activeRetailer={activeRetailer}
           />
-        );
-        break;
-    }
-  };
+        )}
 
-  return (
-    <Container ref={headerTop}>
-      <ScreenHeader text="Edición de producto" />
-      <div className="buttons-container">
-        {withChat && chat}
         {isAuditor && auditableVersion && (
           <Button
             buttonType="general-white-button circular-button"

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

@@ -3,7 +3,6 @@ import { ScreenHeader } from "../../atoms/ScreenHeader/index";
 import { Status } from "../../atoms/Status/index";
 import { ProgressBar } from "../../atoms/ProgressBar/index";
 import { PriorityFlag } from "../../atoms/PriorityFlag/index";
-import { ObservationFlag } from "../../atoms/ObservationFlag/index";
 
 export const ProductNameHeader = ({
   productName,
@@ -11,15 +10,7 @@ export const ProductNameHeader = ({
   priority,
   date,
   percentRequired,
-  productObservation,
-  dataProduct,
-  isObservationVisible,
-  toggleObservation,
-  // handleClickOutside,
-   hideObservation
 }) => {
-  const typeFlag =
-    productObservation !== null && productObservation !== "" ? "high" : "low";
   return (
     <Container>
       <ScreenHeader headerType={"product-name-header"} text={productName} />
@@ -29,16 +20,7 @@ export const ProductNameHeader = ({
         progressBarType={statusType}
         percentRequired={percentRequired}
       />
-      {/* <PriorityFlag priority={priority} /> */}
-      <ObservationFlag
-        observation={typeFlag}
-        contentObservation={productObservation}
-        dataProduct={dataProduct}
-        isObservationVisible ={isObservationVisible}
-        toggleObservation = {toggleObservation}
-        // handleClickOutside = {handleClickOutside}
-         hideObservation={hideObservation}
-      />
+      <PriorityFlag priority={priority} />
       <ScreenHeader headerType={"date-header"} text={date} />
     </Container>
   );

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

@@ -54,25 +54,25 @@ export const SignInLogin = (props) => {
         } else {
           const userGroup =
             session.signInUserSession.accessToken.payload["cognito:groups"];
-          if (userGroup.includes(props.users)) {
+          const response = await axios.get(
+            process.env.REACT_APP_USER_ENDPOINT,
+            {
+              headers: {
+                Authorization: session.signInUserSession.idToken.jwtToken,
+              },
+            }
+          );
+          if (userGroup[0] === props.users) {
             sessionStorage.setItem("auth", true);
             sessionStorage.setItem(
               "jwt",
               session.signInUserSession.idToken.jwtToken
             );
-            const response = await axios.get(
-              process.env.REACT_APP_USER_ENDPOINT,
-              {
-                headers: {
-                  Authorization: session.signInUserSession.idToken.jwtToken,
-                },
-              }
-            );
             const user = JSON.parse(response.data.body).data[0];
             const company = JSON.parse(response.data.body).data[1];
             caches.keys().then((names) => {
               names.forEach((name) => {
-                caches?.delete(name);
+                caches.delete(name);
               });
             });
             user.src = `https://${
@@ -89,7 +89,7 @@ export const SignInLogin = (props) => {
           }
         }
       } catch (error) {
-        console.log(error);
+        console.log(error.code);
         setLoading(false);
         if (error.code === "NotAuthorizedException") {
           setSignInError("NotAuthorizedException");