contentoh-components-library 21.0.11 → 21.0.14

package/src/assets/images/verticalSideMenuMainPage/verticalSideMenuMainPageTask.svg

@@ -0,0 +1,10 @@
+<svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2066_1912)">
+<path d="M17.3454 2.1929H15.2541V1.35938C15.2541 0.884705 14.8694 0.5 14.3947 0.5H7.634C7.15933 0.5 6.77463 0.884705 6.77463 1.35938V2.1929H4.68359C3.49893 2.1929 2.53516 3.15668 2.53516 4.34134V20.3516C2.53516 21.5362 3.49893 22.5 4.68359 22.5H17.3454C18.5301 22.5 19.4939 21.5362 19.4939 20.3516V4.34134C19.4939 3.15668 18.5299 2.1929 17.3454 2.1929ZM13.5353 2.21875V3.88597H8.49321C8.49321 3.31479 8.49321 2.84297 8.49321 2.21875H13.5353ZM17.7751 20.3516C17.7751 20.5886 17.5823 20.7812 17.3454 20.7812H4.68359C4.44659 20.7812 4.25391 20.5886 4.25391 20.3516V4.34134C4.25391 4.10451 4.44659 3.91165 4.68359 3.91165H6.77446V4.74535C6.77446 5.22002 7.15933 5.60472 7.63383 5.60472H14.3947C14.8692 5.60472 15.2541 5.22002 15.2541 4.74535V3.91165H17.3454C17.5823 3.91165 17.7751 4.10451 17.7751 4.34134V20.3516ZM15.0021 10.534C15.3378 10.8697 15.3378 11.4139 15.0021 11.7494L10.4861 16.2655C10.1505 16.6012 9.60637 16.6012 9.27068 16.2655L7.0264 14.0212C6.69087 13.6857 6.69087 13.1415 7.0264 12.8058C7.36209 12.4703 7.90608 12.4703 8.24178 12.8058L9.87845 14.4425L13.7868 10.5342C14.1225 10.1985 14.6664 10.1985 15.0021 10.534Z" fill="#FAFAFA"/>
+</g>
+<defs>
+<clipPath id="clip0_2066_1912">
+<rect width="22" height="22" fill="white" transform="translate(0 0.5)"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -9,15 +9,13 @@ import availableIcon from "../../../assets/images/asignationOptions/availableIco
 export const AsignationOption = ({
   profileImage,
   asignationType = "available",
-  imageType = "profile-image",
   name,
   team,
   onClick,
-  btnOnClick,
 }) => {
   const iconsAsignation = {
     assigned: (
-      <button onClick={btnOnClick}>
+      <button onClick={onClick}>
         <img src={removeAsigned} alt="remove asigned" />
       </button>
     ),
@@ -27,17 +25,17 @@ export const AsignationOption = ({
   };
 
   return (
-    <Container onClick={onClick}>
+    <Container>
       <Avatar
-        imageType={imageType}
-        image={profileImage}
+        imageType={"profile-image"}
+        image={profileImage?.image}
         altText={"profile image"}
       />
       <div className="labels-container">
         <p className="name-label">{name}</p>
         <p className="team-label">{team}</p>
       </div>
-      {asignationType && iconsAsignation[asignationType]}
+      {iconsAsignation[asignationType]}
     </Container>
   );
 };

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

@@ -5,12 +5,8 @@ export const Container = styled.div`
   display: flex;
   width: fit-content;
   align-items: center;
-  cursor: pointer;
-  border-radius: 3px;
-  padding: 5px;
 
-  .profile-image,
-  .medium-image {
+  .profile-image {
     & + * {
       margin-left: 15px;
     }
@@ -47,10 +43,6 @@ export const Container = styled.div`
     border: none;
   }
 
-  &:hover {
-    background-color: ${GlobalColors.s3};
-  }
-
   & + * {
     margin-top: 10px;
   }

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

@@ -1,15 +1,9 @@
 import { Container } from "./styles";
 
-export const CheckBox = ({ id, label, onChange, isFilter, defaultChecked }) => {
+export const CheckBox = ({ id, label, onChange, isFilter }) => {
   return (
     <Container key={`check-${id}`}>
-      <input
-        type="checkbox"
-        name={id}
-        id={id}
-        onChange={onChange}
-        defaultChecked={defaultChecked}
-      />
+      <input type="checkbox" name={id} id={id} onChange={onChange} />
       <label htmlFor={id}>
         {label && <p className={isFilter && "filter-text"}>{label}</p>}
       </label>

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

@@ -1,5 +1,4 @@
 import { Container } from "./styles";
-import React from "react";
 
 export const Button = ({
   buttonType,
@@ -10,15 +9,9 @@ export const Button = ({
   onClick,
 }) => {
   return (
-    <Container
-      className={buttonType}
-      buttonFont={buttonFont}
-      onClick={onClick}
-      key={`button-${buttonType}`}
-      disabled={buttonType === "general-button-disabled"}
-    >
+    <Container className={buttonType} buttonFont={buttonFont} onClick={onClick} key={`button-${buttonType}`}>
       {buttonType.includes("general") && label}
-      {image && <img src={image} alt={altText} />}
+      {image && <img src={image} alt={altText}/>}
     </Container>
   );
 };

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

@@ -12,7 +12,6 @@ import saveIcon from "../../../assets/images/generalButton/saveIcon.svg";
 import saveIconHover from "../../../assets/images/generalButton/saveIconHover.svg";
 import deleteIcon from "../../../assets/images/generalButton/deleteIcon.svg";
 import deleteIconHover from "../../../assets/images/generalButton/deleteIconHover.svg";
-import downloadIcon from "../../../assets/images/generalButton/downloadIcon.svg";
 import { GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.button`
@@ -93,19 +92,6 @@ export const Container = styled.button`
         border: 1px solid ${GlobalColors.magenta_s2};
       }
     }
-
-    &.download-button {
-      background-image: url(${downloadIcon});
-      border: 1px solid ${GlobalColors.s3};
-      border-radius: 15px;
-      background-size: 15px;
-
-      &:hover {
-        color: white;
-        background-color: ${GlobalColors.magenta_s2};
-        border: 1px solid ${GlobalColors.magenta_s2};
-      }
-    }
   }
 
   &.general-arrow-button {
@@ -159,13 +145,4 @@ export const Container = styled.button`
   &.row-layout {
     background-image: url(${gridLayout});
   }
-
-  &.general-button-disabled {
-    background-color: grey;
-    color: ${GlobalColors.white};
-
-    &:hover {
-      opacity: 1;
-    }
-  }
 `;

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

@@ -1,84 +1,38 @@
 import { useEffect, useState } from "react";
 import { Container } from "./styles";
-import { InputFormatter } from "../InputFormatter";
-import { CheckBox } from "../CheckBox";
 
 export const GeneralInput = ({
   inputType,
   inputId,
+  inputCols,
+  inputRows,
   inputName,
   inputValue,
   inputPlaceholder,
   validateInput,
   position,
   inputsArray,
+  maxLength,
   inputSize,
-  articleId,
-  updatedDatasheets,
-  setUpdatedDatasheets,
-  updatedDescriptions,
-  setUpdatedDescriptions,
-  maxChar,
-  isRequired,
-  version,
 }) => {
-  const [textValue, setTextValue] = useState({
-    value: inputValue,
-  });
-  const [requiredEmpty, setRequiredEmpty] = useState(false);
+  const [textValue, setTextValue] = useState({ value: inputValue ?? "" });
 
-  const onHandleChange = (evt) => {
-    if (validateInput) {
-      setTextValue({ value: validateInput(evt, position, inputsArray) });
-    } else {
-      setTextValue({
-        value: inputType === "checkbox" ? evt.target.checked : evt.target.value,
-      });
-      let dataSave = updatedDatasheets.slice();
-      if (dataSave.length === 0)
-        dataSave.push({
-          articleId: articleId,
-          versionId: version,
-          attributeId: inputId,
-          value:
-            inputType === "checkbox" ? evt.target.checked : evt.target.value,
-        });
-      else if (dataSave.some((e) => e.attributeId === inputId)) {
-        dataSave.forEach((e) => {
-          if (e.attributeId === inputId) {
-            e.value =
-              inputType === "checkbox" ? evt.target.checked : evt.target.value;
-          }
-        });
-      } else {
-        dataSave.push({
-          articleId: articleId,
-          versionId: version,
-          attributeId: inputId,
-          value:
-            inputType === "checkbox" ? evt.target.checked : evt.target.value,
-        });
-      }
-      setUpdatedDatasheets(dataSave);
-    }
+  const onHandleChange = (e) => {
+    validateInput
+      ? setTextValue({ value: validateInput(e, position, inputsArray) })
+      : setTextValue(({ value }) => (value = e.target.value));
   };
 
   useEffect(() => {
-    setRequiredEmpty(
-      isRequired &&
-        (textValue.value?.length === 0 || textValue.value === undefined)
-    );
+    const input = document.querySelector(`textarea#${inputId}`);
+    if (input) {
+      input.style.cssText = "height:" + input.scrollHeight + "px";
+    }
   }, [textValue]);
 
   return (
-    <Container isRequired={requiredEmpty}>
-      {inputType === "checkbox" ? (
-        <CheckBox
-          id={inputId}
-          onChange={(e) => onHandleChange(e)}
-          defaultChecked={textValue.value === "true" ? true : false}
-        />
-      ) : inputType !== "textarea" ? (
+    <Container>
+      {inputType !== "textarea" ? (
         <input
           type={inputType}
           id={inputId}
@@ -87,22 +41,18 @@ export const GeneralInput = ({
           placeholder={inputPlaceholder}
           value={textValue.value}
           onInput={(e) => onHandleChange(e)}
-          required={isRequired}
-          maxLength={maxChar}
+          maxLength={maxLength && maxLength}
         />
       ) : (
-        <InputFormatter
+        <textarea
           name={inputName}
-          inputId={inputId}
+          id={inputId}
+          cols={inputCols}
+          rows={inputRows}
           placeholder={inputPlaceholder}
-          mainValue={textValue.value}
+          value={textValue.value}
           onChange={onHandleChange}
-          articleId={articleId}
-          updatedDescriptions={updatedDescriptions}
-          setUpdatedDescriptions={setUpdatedDescriptions}
-          maxChar={maxChar}
-          isRequired={isRequired}
-        />
+        ></textarea>
       )}
     </Container>
   );

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

@@ -4,20 +4,10 @@ import { FontFamily, GlobalColors } from "../../../global-files/variables";
 export const Container = styled.div`
   width: 100%;
 
-  > div {
-    label {
-      &:before {
-        outline: 1px solid ${({ isRequired }) => (isRequired ? "red" : "none")};
-      }
-    }
-  }
-
   input,
   textarea {
     width: 100%;
-    border: 1px solid
-      ${({ isRequired }) => (isRequired ? "red" : `${GlobalColors.s2}`)};
-
+    border: 1px solid ${GlobalColors.s2};
     font-family: ${FontFamily.AvenirNext};
     color: ${GlobalColors.s4};
     font-weight: normal;

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

@@ -1,10 +1,10 @@
 import { Container } from "./styles";
 
-export const GenericModal = ({ componentsArray = [], buttonType, onClick }) => {
+export const GenericModal = ({ componentsArray = [], buttonType }) => {
   return (
     <Container>
       <div className={"global-styles " + buttonType}>
-        <button className="close-button" onClick={onClick} />
+        <button className="close-button" />
         {componentsArray?.map((component) => component)}
       </div>
     </Container>

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

@@ -12,13 +12,6 @@ export const Container = styled.div`
   position: fixed;
   background-color: rgba(59, 59, 59, 0.53);
   backdrop-filter: blur(4px);
-  top: 0;
-  left: 0;
-  z-index: 100;
-
-  h2 {
-    overflow: initial;
-  }
 
   .global-styles {
     background-color: ${GlobalColors.deep_gray};
@@ -75,10 +68,9 @@ export const Container = styled.div`
           margin-top: 30px;
         }
       }
-      .product-name-header,
-      .retailer-name-header {
+      .product-name-header {
         & + * {
-          margin-top: 30px;
+          margin-bottom: 30px;
         }
       }
     }

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

@@ -0,0 +1,17 @@
+import { ListCommercialRetailers } from "./index";
+
+export default {
+  title: "Components/atoms/ListCommercialRetailers",
+  component: ListCommercialRetailers,
+};
+
+const Template = (args) => <ListCommercialRetailers {...args} />;
+export const ListCommercialRetailersDefault = Template.bind({});
+
+ListCommercialRetailersDefault.args = {
+  retailersAvailable: [
+    { id: 54, name: "Construrama", country: "México", id_region: 1, active: 1 },
+    { id: 4, name: "Walmart Super y Superama" },
+    { id: 6, name: "HEB" },
+  ],
+};

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

@@ -0,0 +1,45 @@
+import { Container } from "./styles";
+import ListCommercialRetailersUp from "../../../assets/images/listCommercialRetailers/listCommercialRetailers.svg";
+import { useEffect, useState } from "react";
+import { CheckBox } from "../CheckBox/index";
+
+export const ListCommercialRetailers = ({ retailersAvailable }) => {
+  const [showMenu, setShowMenu] = useState(false);
+  const closeMenu = (e) => {
+    if (!e.target.closest(".menu-list-commercial-retailers") && showMenu) {
+      document.removeEventListener("click", closeMenu, false);
+      setShowMenu(false);
+    }
+  };
+  useEffect(() => {
+    if (showMenu) {
+      document.addEventListener("click", closeMenu, false);
+    }
+  }, [showMenu]);
+  return (
+    <Container
+      onClick={(event) => {
+        if (!showMenu) {
+          setShowMenu(true);
+        } else if (
+          showMenu &&
+          !event.target.closest(".menu-list-commercial-retailers")
+        ) {
+          setShowMenu(false);
+          document.removeEventListener("click", closeMenu, false);
+        }
+      }}
+      className="list-commercial-retailers"
+    >
+      <img src={ListCommercialRetailersUp} alt="button up icon" />
+      {showMenu && (
+        <div className="menu-list-commercial-retailers">
+          {retailersAvailable?.map((component, index) => (
+            <CheckBox id={component.id} label={component.name} key={index+"-"+component.id}></CheckBox>
+      
+          ))}
+        </div>
+      )}
+    </Container>
+  );
+};

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

@@ -0,0 +1,36 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.button`
+  background: transparent;
+  border: 1px solid ${GlobalColors.magenta_s2};
+  border-radius: 2px;
+  padding: 3px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+  height: 30px;
+  .menu-list-commercial-retailers {
+    width: 540px;
+    height: auto;
+    border-radius: 7px;
+    background-color: ${GlobalColors.s2};
+    padding: 14px 14px 8px 20px;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    position: absolute;
+    top: calc(100% + 3px);
+    right: calc(100% - 20px);
+    display: flex;
+    flex-wrap: wrap;
+    z-index: 1;
+    div {
+      & + * {
+        margin-left: 15px;
+      }
+      p {
+        font-size: 11px;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,19 @@
+import { MenuCommercialRetailers } from "./index";
+
+export default {
+  title: "Components/atoms/MenuCommercialRetailers",
+  component: MenuCommercialRetailers,
+};
+
+const Template = (args) => <MenuCommercialRetailers {...args} />;
+
+export const MenuCommercialRetailersDefault = Template.bind({});
+
+MenuCommercialRetailersDefault.args = {
+  editType:"3",
+  retailersAvailable: [
+    { id: 54, name: "Construrama", country: "México", id_region: 1, active: 1 },
+    { id: 4, name: "Walmart Super y Superama" },
+    { id: 6, name: "HEB" },
+  ],
+};

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

@@ -0,0 +1,14 @@
+import { Container } from "./styles";
+import { StatusTag } from "../StatusTag";
+import { ListCommercialRetailers } from "../ListCommercialRetailers";
+
+export const MenuCommercialRetailers = ({editType,retailersAvailable}) => {
+  return (
+    <Container>
+      <StatusTag editType={editType} ovalForm={true} />
+      <ListCommercialRetailers
+        retailersAvailable={retailersAvailable}
+      />
+    </Container>
+  );
+};

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

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  .status-version {
+    & + * {
+      margin-left: 5px;
+    }
+  }
+  .list-commercial-retailers {
+    border: 1px solid transparent;
+    img {
+      display: none;
+    }
+    &:hover {
+      border: 1px solid ${GlobalColors.magenta_s2};
+      img {
+        display: block;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,14 @@
+import { MenuProductImage } from "./index";
+import productImage from "../../../assets/images/menuProductImage/menuProductImage.svg";
+
+export default {
+  title: "Components/atoms/MenuProductImage",
+  component: MenuProductImage,
+};
+
+const Template = (args) => <MenuProductImage {...args} />;
+
+export const MenuProductImageDefault = Template.bind({});
+MenuProductImageDefault.args = {
+  ProductImg: productImage,
+};

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

@@ -0,0 +1,63 @@
+import { Container } from "./styles";
+import menuProductImage from "../../../assets/images/menuProductImage/menuProductImageButton.svg";
+import { useEffect, useState } from "react";
+import { LoadImageMenu } from "../LoadImageMenu/index";
+import GenericModalUp from "../../../assets/images/listCommercialRetailers/listCommercialRetailers.svg";
+
+export const MenuProductImage = ({ProductImg}) => {
+  const [showMenu, setShowMenu] = useState(false);
+  const closeMenu = (e) => {
+    if (!e.target.closest(".menu-upload-product") && showMenu) {
+      document.removeEventListener("click", closeMenu, false);
+      setShowMenu(false);
+    }
+  };
+  useEffect(() => {
+    if (showMenu) {
+      document.addEventListener("click", closeMenu, false);
+    }
+  }, [showMenu]);
+  return (
+    <Container className="div-upload-image">
+      <img className="profile-image" src={ProductImg} alt="Product Image"></img>
+      <button
+        onClick={(event) => {
+          if (!showMenu) {
+            setShowMenu(true);
+          } else if (
+            showMenu &&
+            !event.target.closest(".menu-upload-product")
+          ) {
+            setShowMenu(false);
+            document.removeEventListener("click", closeMenu, false);
+          }
+        }}
+        className={"upload-image-button " + (showMenu && "show-menu-upload-image")}
+      >
+        <img src={showMenu ? GenericModalUp : menuProductImage} alt="Product Image Button" />
+      </button>
+      {showMenu && (
+        <div className="menu-upload-product">
+          <LoadImageMenu
+            tipo={"Tipo de empaque "}
+            product={"Producto expuesto"}
+            content={[
+              { label: "Enbalaje adicional - 0" },
+              { label: "En paquete - 1" },
+              { label: "Producto expuesto - 2" },
+              { label: "Embalaje multiforme - 3" },
+              { label: "Si no es una imagen / no corresponde - X" },
+            ]}
+            id={"menu-packaging-type"}
+          />
+          <LoadImageMenu
+            tipo={"Tipo de imagen "}
+            product={"Render"}
+            content={[{ label: "fotografía del producto" }]}
+            id={"menu-image-type"}
+          />
+        </div>
+      )}
+    </Container>
+  );
+};

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

@@ -0,0 +1,66 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  .profile-image {
+    width: 23px;
+    height: 23px;
+    & + * {
+      margin-left: 8px;
+    }
+  }
+  .upload-image-button {
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: 2px;
+    padding: 3px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    height: 30px;
+    width: 15px;
+    left: 100%;
+    img {
+      display: none;
+    }
+    &:hover {
+      border: 1px solid ${GlobalColors.s3};
+      img {
+        display: block;
+      }
+    }
+    &.show-menu-upload-image {
+      border: 1px solid ${GlobalColors.magenta_s2};
+      img {
+        display: block;
+      }
+    }
+  }
+  .menu-upload-product {
+    background: ${GlobalColors.s2};
+    border: 1px solid ${GlobalColors.s3};
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    border-radius: 7px;
+    width: 324px;
+    padding: 8px 0px;
+    position: absolute;
+    right: 0%;
+    z-index: 1;
+    top: 30px;
+    button {
+      left: 0%;
+      border-radius: 7px;
+      span,
+      .tipo {
+        color: ${GlobalColors.s5};
+      }
+      .products {
+        color: ${GlobalColors.s4};
+      }
+    }
+  }
+`;

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

@@ -6,7 +6,7 @@ import low from "../../../assets/images/flags/lowPriority.svg";
 
 export const PriorityFlag = ({ priority }) => {
   const PriorityFlags = {
-    ["none"]: without,
+    ["no priority"]: without,
     ["low"]: low,
     ["medium"]: medium,
     ["high"]: high,