contentoh-components-library 21.0.11 → 21.0.14

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

@@ -4,7 +4,7 @@ export const Container = styled.div`
   width: fit-content;
 
   img {
-    object-fit: contain;
+    object-fit: cover;
   }
 
   &.carousel-image {

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

@@ -1,8 +1,8 @@
 import { Container } from "./styles";
 
-export const ProgressBar = ({ percent, progressBarType }) => {
+export const ProgressBar = ({ percent, backgroundColor }) => {
   return (
-    <Container className={`status-${progressBarType}`}>
+    <Container backgroundColor={backgroundColor}>
       <p>{percent}%</p>
     </Container>
   );

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

@@ -2,7 +2,7 @@ import styled from "styled-components";
 import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.div`
-  background-color: ${GlobalColors.s3};
+  background-color: ${(props) => GlobalColors[props.backgroundColor]};
   width: fit-content;
   height: 27px;
   padding: 4px;
@@ -11,59 +11,8 @@ export const Container = styled.div`
   font-weight: 600;
   font-size: 14px;
   line-height: 19px;
-  color: ${(backgroundColor) =>
-    backgroundColor === "s2" || backgroundColor === "s1"
+  color: ${(props) =>
+    props.backgroundColor === "s2" || props.backgroundColor === "s1"
       ? GlobalColors.s4
       : GlobalColors.white};
-
-  &.status-As,
-  &.status-P {
-    background-color: ${GlobalColors.in_progress};
-  }
-
-  &.status-Pr,
-  &.status-Rr {
-    background-color: ${GlobalColors.reception};
-  }
-
-  &.status-AA,
-  &.status-AP,
-  &.status-AC,
-  &.status-AF {
-    background-color: ${GlobalColors.finished};
-  }
-
-  &.status-RA,
-  &.status-RF,
-  &.status-RP,
-  &.status-RC {
-    background-color: ${GlobalColors.rejected_status};
-  }
-
-  &.status-Dat,
-  &.status-Dsc,
-  &.status-Imgs {
-    background-color: ${GlobalColors.s4};
-  }
-
-  &.status-Ex {
-    background-color: ${GlobalColors.exported};
-  }
-
-  &.status-DDI {
-    background-color: ${GlobalColors.original_purpura};
-  }
-
-  &.status-GLD {
-    background-color: ${GlobalColors.in_progress};
-  }
-
-  &.status-TAB {
-    background-color: ${GlobalColors.deep_gray};
-  }
-
-  &.status-Pt {
-    background-color: ${GlobalColors.s2};
-    color: ${GlobalColors.s4};
-  }
 `;

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

@@ -8,16 +8,12 @@ export const ScreenHeader = ({
   color,
   headerType,
   Paragraph,
+
 }) => {
   return (
-    <Container
-      fontFamily={fontFamily}
-      color={color}
-      className={headerType}
-      key={`title-${text}`}
-    >
+    <Container fontFamily={fontFamily} color={color} className={headerType} key={`title-${text}`}>
       {text} {boldText && <span> {boldText}</span>}
-      {Paragraph && <p>{Paragraph}</p>}
+      {<p>{Paragraph}</p>}
     </Container>
   );
 };

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

@@ -52,11 +52,6 @@ export const Container = styled.h2`
     font-weight: 400;
     font-size: 11px;
     line-height: 18px;
-
-    &:last-child {
-      min-width: 50px;
-      text-align: center;
-    }
   }
 
   &.gray-table-row {
@@ -68,14 +63,12 @@ export const Container = styled.h2`
     background-color: ${GlobalColors.s2};
     padding: 1px 3px;
     border-radius: 3px;
-    min-width: 50px;
-    text-align: center;
   }
-  &.header-and-paragraph {
+  &.header-and-paragraph{
     font-family: ${FontFamily.Raleway};
     font-size: 36px;
     color: ${GlobalColors.s5};
-    p {
+    p{
       font-family: ${FontFamily.AvenirNext};
       font-size: 14px;
       color: ${GlobalColors.s4};

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

@@ -1,37 +1,9 @@
 import { Container } from "./styles";
 
 export const StatusTag = ({ statusType, ovalForm }) => {
-  const getShortStatus = (status) => {
-    switch (status) {
-      case "COMPLETED":
-        return "C";
-      case "RECEPTION":
-        return "Pr";
-      case "NULL":
-        return "-";
-      case "RECEIVED":
-        return "Rc";
-      case "IN_PROGRESS":
-        return "P";
-      case "ASSIGNED":
-        return "As";
-      case "APPROVED":
-        return "Ap";
-      case "VALIDATING":
-        return "V";
-      case "PAID_OUT":
-        return "Po";
-      default:
-        return status;
-    }
-  };
   return (
-    <Container
-      className={`status-${getShortStatus(statusType)} ${
-        ovalForm && "oval-form"
-      }`}
-    >
-      <p>{getShortStatus(statusType)}</p>
+    <Container className={`status-${statusType} ${ovalForm && "oval-form"}`}>
+      <p>{statusType}</p>
     </Container>
   );
 };

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

@@ -2,8 +2,7 @@ import styled from "styled-components";
 import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.div`
-  width: fit-content;
-  padding: 0 10px;
+  width: 30px;
   height: 20px;
   background-color: ${GlobalColors.s3};
   border-radius: 3px;
@@ -17,9 +16,7 @@ export const Container = styled.div`
   }
 
   &.status-As,
-  &.status-P,
-  &.status-IN_PROGRESS,
-  &.status-QF {
+  &.status-P {
     background-color: ${GlobalColors.in_progress};
   }
 
@@ -29,19 +26,10 @@ export const Container = styled.div`
   }
 
   &.status-AA,
-  &.status-AP,
-  &.status-AC,
-  &.status-AF {
+  &.status-AP {
     background-color: ${GlobalColors.finished};
   }
 
-  &.status-RA,
-  &.status-RF,
-  &.status-RP,
-  &.status-RC {
-    background-color: ${GlobalColors.rejected_status};
-  }
-
   &.status-Dat,
   &.status-Dsc,
   &.status-Imgs {

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

@@ -7,8 +7,8 @@ export const ValidationPanel = ({
   id,
   setOptionClicked,
   setShowValidationPanel,
-  sendToFacilitator,
 }) => {
+
   const optionSelected = (option) => {
     setOptionClicked(`${option}-button`);
     setShowValidationPanel(false);
@@ -18,7 +18,7 @@ export const ValidationPanel = ({
     <Container id={id}>
       <button
         onClick={() => {
-          sendToFacilitator("A");
+          optionSelected("accept");
         }}
         className="validation-option"
       >
@@ -27,7 +27,7 @@ export const ValidationPanel = ({
       </button>
       <button
         onClick={() => {
-          sendToFacilitator("R");
+          optionSelected("reject");
         }}
         className="validation-option"
       >

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

@@ -0,0 +1,12 @@
+import { VerticalSideMenuMainPage } from "./index";
+
+export default {
+  title: "Components/atoms/VerticalSideMenuMainPage",
+  component: VerticalSideMenuMainPage,
+};
+
+const Template = (args) => <VerticalSideMenuMainPage {...args} />;
+
+export const VerticalSideMenuMainPageDefault = Template.bind({});
+
+VerticalSideMenuMainPageDefault.args = {};

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

@@ -0,0 +1,23 @@
+import { Container } from "./styles";
+import verticalSideMenuMainPageFaqs from "../../../assets/images/verticalSideMenuMainPage/verticalSideMenuMainPageFAQS.svg";
+import verticalSideMenuMainPageFocusProduct from "../../../assets/images/verticalSideMenuMainPage/verticalSideMenuMainPageFocusProduct.svg";
+import verticalSideMenuMainPageGroup from "../../../assets/images/verticalSideMenuMainPage/verticalSideMenuMainPageGroup.svg";
+import verticalSideMenuMainPageLogo from "../../../assets/images/verticalSideMenuMainPage/verticalSideMenuMainPageLogo.svg";
+import verticalSideMenuMainPageSpeedometer from "../../../assets/images/verticalSideMenuMainPage/verticalSideMenuMainPageSpeedometer.svg";
+import verticalSideMenuMainPageTask from "../../../assets/images/verticalSideMenuMainPage/verticalSideMenuMainPageTask.svg";
+
+export const VerticalSideMenuMainPage = () => {
+  return (
+    <Container>
+      <img src={verticalSideMenuMainPageLogo} alt="Logo"></img>
+      <div>
+        <img src={verticalSideMenuMainPageSpeedometer} alt="Speed Meter"></img>
+        <img src={verticalSideMenuMainPageFocusProduct} alt="Focus Product"></img>
+        <img src={verticalSideMenuMainPageGroup} alt="Group"></img>
+        <img src={verticalSideMenuMainPageLogo} alt="Logo"></img>
+        <img src={verticalSideMenuMainPageTask} alt="Task"></img>
+      </div>
+      <img src={verticalSideMenuMainPageFaqs} alt="FAQS"></img>
+    </Container>
+  );
+};

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

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  width: 60px;
+  height: 700px;
+  background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);
+  border-radius: 50px;
+  padding: 30px 10px 20px 10px;
+  text-align: center;
+  img {
+    cursor: pointer;
+  }
+  img + div {
+    margin-top: 100px;
+  }
+  div {
+    img + * {
+      margin-top: 20px;
+    }
+    & + * {
+      margin-top: 250px;
+    }
+  }
+`;

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

@@ -0,0 +1,14 @@
+import { ApproveRejetPanel } from "./index";
+
+export default {
+  title: "Components/molecules/ApproveRejetPanel",
+  component: ApproveRejetPanel,
+};
+
+const Template = (args) => <ApproveRejetPanel {...args} />;
+
+export const ApproveRejetPanelDefault = Template.bind({});
+ApproveRejetPanelDefault.args = {
+  text:"113 productos",
+  check:false,
+}

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

@@ -0,0 +1,36 @@
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { Avatar } from "../../atoms/Avatar";
+import { Container } from "./styles";
+import approveRejetPanelDelete from "../../../assets/images/approveRejetPanel/approveRejetPanelDelete.svg";
+import approveRejetPanelCancel from "../../../assets/images/approveRejetPanel/approveRejetPanelCancel.svg";
+import approveRejetPanelSave from "../../../assets/images/approveRejetPanel/approveRejetPanelSave.svg";
+import approveRejetPanelExclude from "../../../assets/images/approveRejetPanel/approveRejetPanelExclude.svg";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const ApproveRejetPanel = ({ text, check }) => {
+  return (
+    <Container>
+      <ScreenHeader
+        fontFamily={FontFamily.AvenirNext}
+        headerType={"date-header"}
+        color={GlobalColors.s4}
+        text={text}
+      ></ScreenHeader>
+      <Avatar
+        image={approveRejetPanelDelete}
+        imageType={"big-image"}
+        altText={"delete button"}
+      ></Avatar>
+      <Avatar
+        image={check?approveRejetPanelCancel:approveRejetPanelExclude}
+        imageType={"big-image"}
+        altText={check?"cancel button":"exclude button"}
+      ></Avatar>
+      <Avatar
+        image={check?approveRejetPanelSave:approveRejetPanelExclude}
+        imageType={"big-image"}
+        altText={check?"save button":"exclude button"}
+      ></Avatar>
+    </Container>
+  );
+};

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

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  .date-header + * {
+    margin-left: 30px;
+  }
+  .big-image + * {
+    margin-left: 10px;
+  }
+`;

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

@@ -7,18 +7,8 @@ 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 = ({
-  retailers,
-  validation,
-  activeRetailer,
-  setActiveRetailer,
-  approveRejectButtons,
-  sendToFacilitator,
-  auditorAssigned,
-  userAssigned,
-}) => {
+export const AvatarAndValidation = ({ avatarData, validation }) => {
   const [showValidationPanel, setShowValidationPanel] = useState(false);
   const [buttonType, setButtonType] = useState(
     validation ? validation : "null-button"
@@ -43,26 +33,18 @@ export const AvatarAndValidation = ({
   return (
     <Container>
       <div className="buttons-container">
-        <RetailerSelector
-          retailers={retailers}
-          activeRetailer={activeRetailer}
-          setActiveRetailer={setActiveRetailer}
-        />
+        <Avatar image={avatarData?.image} altText={avatarData?.altText} />
         <DropDownButton />
-        {approveRejectButtons() &&
-          (auditorAssigned() || (userAssigned && userAssigned())) && (
-            <Button
-              buttonType={`circular-button ${buttonType}`}
-              onClick={() => setShowValidationPanel(true)}
-            />
-          )}
+        <Button
+          buttonType={`circular-button ${buttonType}`}
+          onClick={() => setShowValidationPanel(true)}
+        />
       </div>
       {showValidationPanel && (
         <ValidationPanel
           id="validation-panel"
           setOptionClicked={setButtonType}
           setShowValidationPanel={setShowValidationPanel}
-          sendToFacilitator={sendToFacilitator}
         />
       )}
     </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,16 +15,13 @@ export const FeaturesBar = ({ features }) => {
   return (
     <Container className={isIE ? "IEClass" : "gapClass"}>
       {features !== undefined &&
-        features.map(
-          (feature, index) =>
-            feature.value && (
-              <FeatureTag
-                key={index}
-                feature={feature.feature}
-                value={feature.value}
-              />
-            )
-        )}
+        features.map((feature, index) => (
+          <FeatureTag
+            key={index}
+            feature={feature.feature}
+            value={feature.value}
+          />
+        ))}
     </Container>
   );
 };

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

@@ -4,7 +4,6 @@ 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",
@@ -12,14 +11,6 @@ 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);
@@ -34,20 +25,6 @@ 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);
@@ -57,66 +34,50 @@ export const GalleryElement = ({
   return (
     <Container className={gridLayout ? "grid-gallery" : "row-gallery"}>
       <div className="buttons-container">
-        <CheckBox id={id} label={label} onChange={(e) => checkOnChange(e)} />
+        <CheckBox id={id} label={id} label={label} />
+        <Button
+          buttonType={`circular-button ${statusValidation}`}
+          onClick={() => setShowValidationPanel(true)}
+        />
+        {showValidationPanel && (
+          <ValidationPanel
+            id={"validation-panel"}
+            setOptionClicked={setStatusValidation}
+            setShowValidationPanel={setShowValidationPanel}
+          />
+        )}
       </div>
       <div className="image-container">
         <ProductImage
           img={image?.src}
           altText={image?.altText}
-          imageType={`catalogue-image-${gridLayout ? "big" : "small"}-size`}
+          imageType={
+            gridLayout
+              ? "catalogue-image-big-size"
+              : "catalogue-image-small-size"
+          }
         />
         <div className="information-container">
+          {/* name */}
           <p>{image?.name}</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,
-                  });
-                }}
-              />
-            </>
-          )}
+          {/* <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>
+          </>
+        )}{" "}
+        */}
         </div>
       </div>
     </Container>