contentoh-components-library 21.0.72 → 21.0.75

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

@@ -4,17 +4,18 @@ export const Container = styled.div`
   height: 100%;
   width: ${({ bar }) => (bar ? 200 : 58)}px;
   box-sizing: border-box;
-  padding: 23px 10px 55px 10px;
+  padding: 23px 10px 70px 10px;
   flex-direction: column;
   justify-content: space-between;
   overflow: auto;
-  border-radius:  ${({ bar }) => (bar ? 20 : 50)}px;
+  border-radius: ${({ bar }) => (bar ? 20 : 50)}px;
   background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);
   scrollbar-width: none;
   display: flex;
   text-align: center;
   img {
     cursor: pointer;
+    width:"25px" !important;
   }
   .navbar-top {
     & + * {
@@ -22,15 +23,15 @@ export const Container = styled.div`
     }
     .option {
       div {
+        height: 38px;
+        display: flex;
+        justify-content: center;
+        border-radius: 100%;
         & + * {
           margin-top: 12px;
         }
       }
-      .icon {
-        padding: 5px 0px;
-        border-radius: 100%;
-      }
-      .icon:hover{
+      div:hover {
         background: #e33aa9;
       }
     }

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/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/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>
+  );
+};

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

@@ -0,0 +1,18 @@
+import styled from "styled-components";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  position: relative;
+  .retailers-panel {
+    background: ${GlobalColors.s2};
+    border: 1px solid ${GlobalColors.s3};
+    box-sizing: border-box;
+    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
+    border-radius: 4px;
+    padding: 10px;
+    position: absolute;
+    top: calc(100% + 10px);
+    right: 0;
+    z-index: 10;
+  }
+`;