contentoh-components-library 21.0.70 → 21.0.73

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

@@ -7,8 +7,17 @@ import { DropDownButton } from "../../atoms/DropDownButton";
 import { Button } from "../../atoms/GeneralButton";
 import { ValidationPanel } from "../../atoms/ValidationPanel";
 import { useEffect } from "react";
+import { RetailerSelector } from "../RetailerSelector";
 
-export const AvatarAndValidation = ({ avatarData, validation }) => {
+export const AvatarAndValidation = ({
+  retailers,
+  validation,
+  activeRetailer,
+  setActiveRetailer,
+  showValidationButtons,
+  approve,
+  reject,
+}) => {
   const [showValidationPanel, setShowValidationPanel] = useState(false);
   const [buttonType, setButtonType] = useState(
     validation ? validation : "null-button"
@@ -33,18 +42,26 @@ export const AvatarAndValidation = ({ avatarData, validation }) => {
   return (
     <Container>
       <div className="buttons-container">
-        <Avatar image={avatarData?.image} altText={avatarData?.altText} />
-        <DropDownButton />
-        <Button
-          buttonType={`circular-button ${buttonType}`}
-          onClick={() => setShowValidationPanel(true)}
+        <RetailerSelector
+          retailers={retailers}
+          activeRetailer={activeRetailer}
+          setActiveRetailer={setActiveRetailer}
         />
+        <DropDownButton />
+        {showValidationButtons && (
+          <Button
+            buttonType={`circular-button ${buttonType}`}
+            onClick={() => setShowValidationPanel(true)}
+          />
+        )}
       </div>
       {showValidationPanel && (
         <ValidationPanel
           id="validation-panel"
           setOptionClicked={setButtonType}
           setShowValidationPanel={setShowValidationPanel}
+          approve={approve}
+          reject={reject}
         />
       )}
     </Container>

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

@@ -8,7 +8,7 @@ export const Container = styled.div`
     display: flex;
     align-items: center;
 
-    * + * {
+    > * + * {
       margin-left: 3px;
     }
   }

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

@@ -9,43 +9,46 @@ export const CarouselImagesLogin = ({
   panelColor,
 }) => {
   const carouselStart = () => {
-    const images = panelImg;
-    let i = 1;
-    const img1 = document.querySelector("#img1");
-    const img2 = document.querySelector("#img2");
-    const divIndicadores = document.querySelector("#indicadores");
-    for (let index = 0; index < images.length; index++) {
-      const div = document.createElement("div");
-      div.classList.add("circles");
-      div.id = index;
-      divIndicadores.appendChild(div);
-    }
-    img1.src = images[0];
-    const circulos = document.querySelectorAll(".circles");
-    circulos[0].classList.add("resaltado");
-    const slideshow = () => {
-      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");
-      img1.classList.add("right");
-      img2.classList.add("active");
-      i++;
-      if (i == images.length) {
-        i = 0;
+    addEventListener("DOMContentLoaded", () => {
+      const images = panelImg;
+      let i = 1;
+      const img1 = document.querySelector("#img1");
+      const img2 = document.querySelector("#img2");
+      const divIndicadores = document.querySelector("#indicadores");
+      for (let index = 0; index < images.length; index++) {
+        const div = document.createElement("div");
+        div.classList.add("circles");
+        div.id = index;
+        divIndicadores.appendChild(div);
       }
-      setTimeout(() => {
-        img1.src = img2.src;
-        img2.classList.remove("active");
-        img1.classList.remove("right");
-      }, 1000);
-    };
-    setInterval(slideshow, 4000);
+      img1.src = images[0];
+      const circulos = document.querySelectorAll(".circles");
+      circulos[0].classList.add("resaltado");
+      const slideshow = () => {
+        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");
+        img1.classList.add("right");
+        img2.classList.add("active");
+        i++;
+        if (i == images.length) {
+          i = 0;
+        }
+        setTimeout(() => {
+          img1.src = img2.src;
+          img2.classList.remove("active");
+          img1.classList.remove("right");
+        }, 1000);
+      };
+      setInterval(slideshow, 4000);
+    });
   };
-
-  useEffect(() => {
+  useEffect(()=>{
     carouselStart();
-  }, []);
+  },[]) 
 
   return (
     <Container panelColor={panelColor}>

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

@@ -15,13 +15,16 @@ export const FeaturesBar = ({ features }) => {
   return (
     <Container className={isIE ? "IEClass" : "gapClass"}>
       {features !== undefined &&
-        features.map((feature, index) => (
-          <FeatureTag
-            key={index}
-            feature={feature.feature}
-            value={feature.value}
-          />
-        ))}
+        features.map(
+          (feature, index) =>
+            feature.value && (
+              <FeatureTag
+                key={index}
+                feature={feature.feature}
+                value={feature.value}
+              />
+            )
+        )}
     </Container>
   );
 };

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

@@ -4,6 +4,7 @@ import { CheckBox } from "../../atoms/CheckBox";
 import { Button } from "../../atoms/GeneralButton";
 import { ValidationPanel } from "../../atoms/ValidationPanel";
 import { useState, useEffect } from "react";
+import Select from "../../atoms/Select";
 
 export const GalleryElement = ({
   validation = "null-button",
@@ -11,6 +12,14 @@ export const GalleryElement = ({
   gridLayout = false,
   id = "chk-default",
   label,
+  index,
+  imageInputs,
+  imageType,
+  imagePackagingType,
+  changeImage,
+  selectedImages,
+  setSelectedImages,
+  setCheckAll,
 }) => {
   const [statusValidation, setStatusValidation] = useState(validation);
   const [showValidationPanel, setShowValidationPanel] = useState(false);
@@ -25,6 +34,20 @@ export const GalleryElement = ({
     }
   };
 
+  const checkOnChange = (e) => {
+    const chkGlobal = document.getElementById("check-all-images");
+    const checkboxList = document.querySelectorAll("[id^='gallery-element-']");
+    let temp = selectedImages.slice();
+    e.target.checked
+      ? temp.push(image)
+      : (temp = temp.filter((img) => image.id !== img.id));
+    let counter = 0;
+    checkboxList?.forEach((chk) => chk.checked && counter++);
+    chkGlobal.checked = checkboxList.length === counter;
+    setCheckAll(checkboxList.length === counter);
+    setSelectedImages(temp);
+  };
+
   useEffect(() => {
     if (showValidationPanel) {
       document.addEventListener("click", closeValidationPanel, false);
@@ -34,50 +57,66 @@ export const GalleryElement = ({
   return (
     <Container className={gridLayout ? "grid-gallery" : "row-gallery"}>
       <div className="buttons-container">
-        <CheckBox id={id} label={id} label={label} />
-        <Button
-          buttonType={`circular-button ${statusValidation}`}
-          onClick={() => setShowValidationPanel(true)}
-        />
-        {showValidationPanel && (
-          <ValidationPanel
-            id={"validation-panel"}
-            setOptionClicked={setStatusValidation}
-            setShowValidationPanel={setShowValidationPanel}
-          />
-        )}
+        <CheckBox id={id} label={label} onChange={(e) => checkOnChange(e)} />
       </div>
       <div className="image-container">
         <ProductImage
           img={image?.src}
           altText={image?.altText}
-          imageType={
-            gridLayout
-              ? "catalogue-image-big-size"
-              : "catalogue-image-small-size"
-          }
+          imageType={`catalogue-image-${gridLayout ? "big" : "small"}-size`}
         />
         <div className="information-container">
-          {/* name */}
           <p>{image?.name}</p>
-          {/* <p>{image?.data[0]?.value}</p> */}
-          {/* size */}
-          {!gridLayout &&
-            image?.data.map(
-              (element, index) =>
-                index > 0 && <p key={index}>{element.value}</p>
-            )}
-          {/* <p>{image?.size}</p>
-
-        {!gridLayout && (
-          <>
-            <p>{image?.format}</p>
-            <p>{image?.resolution}</p>
-            <p className="highlighted-data">{image?.imageType}</p>
-            <p className="highlighted-image">{data?.identificator}</p>
-          </>
-        )}{" "}
-        */}
+          {!gridLayout && (
+            <>
+              <p>
+                {image.width}x{image.height}
+              </p>
+              <p>{image.ext}</p>
+              <Select
+                width="100%"
+                placeholder="Tipo de toma"
+                options={imageInputs}
+                valueSelected={image.image_id}
+                onChange={(e) => {
+                  changeImage({
+                    action: "changeImageInfo",
+                    attribute: "image_id",
+                    value: +e.target.value,
+                    index: index,
+                  });
+                }}
+              />
+              <Select
+                width="100%"
+                placeholder="Tipo de imagen"
+                options={imageType}
+                valueSelected={image.image_type}
+                onChange={(e) => {
+                  changeImage({
+                    action: "changeImageInfo",
+                    attribute: "image_type",
+                    value: +e.target.value,
+                    index: index,
+                  });
+                }}
+              />
+              <Select
+                width="100%"
+                placeholder="Tipo de empaque"
+                options={imagePackagingType}
+                valueSelected={image.packing_type}
+                onChange={(e) => {
+                  changeImage({
+                    action: "changeImageInfo",
+                    attribute: "packing_type",
+                    value: +e.target.value,
+                    index: index,
+                  });
+                }}
+              />
+            </>
+          )}
         </div>
       </div>
     </Container>

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

@@ -10,12 +10,12 @@ export const Container = styled.div`
 
     .buttons-container {
       position: absolute;
-      top: 0;
+      top: 5px;
+      left: 5px;
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 0 5px;
     }
 
     .image-container {
@@ -40,10 +40,10 @@ export const Container = styled.div`
   &.row-gallery {
     display: flex;
     align-items: center;
+    padding-right: 10px;
 
     .buttons-container {
       position: relative;
-      width: 58px;
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -52,18 +52,17 @@ export const Container = styled.div`
     .image-container {
       display: flex;
       align-items: center;
+      flex: 1;
       .information-container {
         display: flex;
+        flex: 1;
 
         p {
           font-family: ${FontFamily.Lato};
           color: ${GlobalColors.s4};
           font-size: 14px;
           line-height: 17px;
-
-          & + p {
-            margin-left: 18px;
-          }
+          text-align: center;
 
           &.highlighted-data {
             font-family: ${FontFamily.AvenirNext};
@@ -75,12 +74,40 @@ export const Container = styled.div`
             line-height: 18px;
             padding: 0 10px;
           }
+
+          &:nth-child(1) {
+            //min-width: calc(20% - 76px);
+            //flex: 1 0 20%;
+            min-width: 22%;
+          }
+
+          &:nth-child(2),
+          &:nth-child(3) {
+            text-align: center;
+          }
+          &:nth-child(2) {
+            max-width: 90px;
+            min-width: 90px;
+          }
+          &:nth-child(3) {
+            max-width: 60px;
+            min-width: 60px;
+          }
+          /* &:nth-child(4) {
+            max-width: 90px;
+            min-width: 90px;
+          }
+          &:nth-child(5) {
+            max-width: 80px;
+            min-width: 80px;
+          } */
         }
-      }
-    }
 
-    & > * + * {
-      margin-left: 18px;
+        & > * {
+          flex: 1;
+          padding: 5px;
+        }
+      }
     }
   }
 `;

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

@@ -1,19 +1,25 @@
 import { Container } from "./styles";
 import { CheckBox } from "../../atoms/CheckBox";
 
-export const GalleryHeader = () => {
+export const GalleryHeader = ({ setCheckAll, setSelectedImages }) => {
+  const checkAll = (e) => {
+    const checkboxList = document.querySelectorAll("[id^='gallery-element-']");
+    checkboxList.forEach((chk) => (chk.checked = e.target.checked));
+    setCheckAll(e.target.checked);
+    if (!e.target.checked) setSelectedImages([]);
+  };
   return (
     <Container>
       <div>
-        <CheckBox />
+        <CheckBox id="check-all-images" onChange={(e) => checkAll(e)} />
       </div>
-      <p className="value-header">Val.</p>
       <p className="image-header">Image</p>
-      <p>Nombre</p>
-      <p>Tamaño</p>
-      <p>Formato</p>
-      <p>Tipo de imagen</p>
-      <p>Identificador</p>
+      <p className="image-name">Nombre</p>
+      <p className="image-size">Tamaño</p>
+      <p className="image-format">Formato</p>
+      <p className="">Tipo de toma</p>
+      <p className="">Tipo de imagen</p>
+      <p className="">Tipo de empaque</p>
     </Container>
   );
 };

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

@@ -25,5 +25,21 @@ export const Container = styled.div`
     &.image-header {
       max-width: 60px;
     }
+
+    &.image-name {
+      min-width: 20%;
+    }
+
+    &.image-format {
+      max-width: 60px;
+    }
+
+    &.image-size {
+      max-width: 90px;
+    }
+
+    &.image-identifier {
+      max-width: 80px;
+    }
   }
 `;

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

@@ -1,6 +1,5 @@
 import { Container } from "./styles";
 import { ProductImage } from "../../atoms/ProductImage/index";
-import { getImage } from "../../../global-files/data";
 
 export const ImageSelector = ({
   images = [],
@@ -12,10 +11,10 @@ export const ImageSelector = ({
       {images?.values?.map((image, index) => (
         <ProductImage
           key={index}
-          img={getImage(image, 85, 60).src}
+          img={image.src}
           altText={image.altText}
           imageType={modalSelector ? "catalogue-modal-image" : "carousel-image"}
-          onClick={() => setActiveImage(getImage(image), 350, 295)}
+          onClick={() => setActiveImage(index)}
         />
       ))}
     </Container>

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

@@ -1,18 +1,15 @@
 import { Container, ItemPasswordStrength, Password } from "./styles";
 import { useEffect, useState } from "react";
 import { TagAndInput } from "../TagAndInput";
-
 export const LoginPasswordStrength = ({
   emptyPassword,
   emptyConfirmPassword,
   matchPasswords,
-  required,
 }) => {
   const [passwordStrength, setPasswordStrength] = useState(0);
   let upperCaseLetters = /[A-Z]/g;
   let numbers = /[0-9]/g;
   let specialChar = /[‘!’,‘@’,‘#’,‘$’,‘%’,‘^’,‘&’,‘*’]/g;
-
   useEffect(() => {
     const inputValue = document.getElementById("newPasswordInput");
     inputValue.addEventListener(
@@ -23,7 +20,6 @@ export const LoginPasswordStrength = ({
       false
     );
   }, []);
-
   const updateInfo = (e, newValue) => {
     switch (e.target.id) {
       case "newPasswordInput":
@@ -39,11 +35,12 @@ export const LoginPasswordStrength = ({
         newValue.match(specialChar) &&
           setPasswordStrength((passwordStrength) => passwordStrength + 1);
         break;
+      case "confirmPasswordInput":
+        break;
       default:
         return;
     }
   };
-
   return (
     <Container>
       <div className="user" key={"3"}>
@@ -51,7 +48,6 @@ export const LoginPasswordStrength = ({
           inputType={"password"}
           inputId={"newPasswordInput"}
           label={"Ingrese su nueva contraseña"}
-          required={required}
         />
         {emptyPassword && (
           <label>La contraseña debe ser minimo de 8 caracteres</label>
@@ -80,7 +76,6 @@ export const LoginPasswordStrength = ({
           inputType={"password"}
           inputId={"confirmPasswordInput"}
           label={"Confirme la nueva contraseña"}
-          required={required}
         />
         {emptyConfirmPassword && !emptyPassword && (
           <label>Confirme la contraseña</label>
@@ -91,4 +86,4 @@ export const LoginPasswordStrength = ({
       </div>
     </Container>
   );
-};
+};

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

@@ -20,9 +20,6 @@ export const Container = styled.div`
     font-family: ${FontFamily.Raleway_700};
     font-size: 11px;
   }
-  & + *{
-    margin-top: 20px;
-  }
 `;
 
 export const Password = styled.div`

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

@@ -8,7 +8,6 @@ export const ProductNameHeader = ({
   productName,
   statusType,
   percent,
-  backgroundColor,
   priority,
   date,
 }) => {
@@ -16,7 +15,7 @@ export const ProductNameHeader = ({
     <Container>
       <ScreenHeader headerType={"product-name-header"} text={productName} />
       <StatusTag statusType={statusType} />
-      <ProgressBar percent={percent} backgroundColor={backgroundColor} />
+      <ProgressBar percent={percent} progressBarType={statusType} />
       <PriorityFlag priority={priority} />
       <ScreenHeader headerType={"date-header"} text={date} />
     </Container>

package/src/components/molecules/RetailerSelector/RetailerSelector.stories.js

@@ -0,0 +1,35 @@
+import { RetailerSelector } from "./index";
+
+export default {
+  title: "Components/molecules/RetailerSelector",
+  component: RetailerSelector,
+};
+
+const Template = (args) => <RetailerSelector {...args} />;
+
+export const RetailerSelectorDefault = Template.bind({});
+RetailerSelectorDefault.args = {
+  retailers: [
+    {
+      id: 2,
+      name: "Walmart Mercancías Generales",
+      country: "México",
+      id_region: 1,
+      active: 1,
+    },
+    {
+      id: 3,
+      name: "Sam´s Club",
+      country: "México",
+      id_region: 1,
+      active: 1,
+    },
+    {
+      id: 14,
+      name: "Maskota y Petsy",
+      country: "México",
+      id_region: 1,
+      active: 1,
+    },
+  ],
+};

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

@@ -0,0 +1,63 @@
+import { Container } from "./styles";
+import { Avatar } from "../../atoms/Avatar";
+import { useEffect, useState } from "react";
+import { AsignationOption } from "../../atoms/AsignationOption";
+
+export const RetailerSelector = ({
+  retailers,
+  activeRetailer,
+  setActiveRetailer,
+}) => {
+  const [retailersPanel, setRetailersPanel] = useState(false);
+
+  const closeRetailersPanel = (e) => {
+    if (!e.target.closest("#retailers-assignation") && retailersPanel) {
+      document.removeEventListener("click", closeRetailersPanel, false);
+      setRetailersPanel(false);
+    }
+  };
+
+  useEffect(() => {
+    if (retailersPanel) {
+      document.addEventListener("click", closeRetailersPanel, false);
+    }
+  }, [retailersPanel]);
+
+  return (
+    <Container id="retailers-assignation">
+      <Avatar
+        image={activeRetailer?.image}
+        altText={activeRetailer?.name}
+        imageType={"medium-image"}
+        onClick={() => {
+          retailers?.length > 1 && setRetailersPanel(!retailersPanel);
+          if (retailersPanel)
+            document.removeEventListener("click", closeRetailersPanel, false);
+        }}
+      />
+      {retailersPanel && (
+        <div className="retailers-panel">
+          {retailers.map((retailer, index) => (
+            <AsignationOption
+              key={`${index}-${retailer?.name}`}
+              profileImage={retailer?.image}
+              imageType={"medium-image"}
+              asignationType={null}
+              name={retailer?.name}
+              team={retailer?.team}
+              onClick={() => {
+                setActiveRetailer(retailer);
+                document.removeEventListener(
+                  "click",
+                  closeRetailersPanel,
+                  false
+                );
+                setRetailersPanel(false);
+              }}
+            />
+          ))}
+        </div>
+      )}
+    </Container>
+  );
+};