contentoh-components-library 0.1.1 → 8.0.0

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

@@ -0,0 +1,33 @@
+import { SelectCustom, Container, BackgroundEnd } from "./style";
+
+export default function Select(props) {
+  return (
+    <Container width={props.width}>
+      <SelectCustom
+        id={props.id}
+        width={props.width}
+        onChange={props.onChange}
+        defaultValue={props.valueSelected ? props.valueSelected : ""}
+      >
+        <option value="" disabled>
+          {props.placeholder}
+        </option>
+        {props.options &&
+          props.options.map((item, i) => (
+            <option
+              key={"select-" + item.value ? item.value : item + "-" + i}
+              value={item.value ? item.value : item}
+              // selected={
+              //   item.value
+              //     ? item.value == props.valueSelected && "selected"
+              //     : item === props.valueSelected && "selected"
+              // }
+            >
+              {item.name ? item.name : item}
+            </option>
+          ))}
+      </SelectCustom>
+      <BackgroundEnd />
+    </Container>
+  );
+}

package/src/components/atoms/Select/style.js

@@ -0,0 +1,77 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  height: 21px;
+  line-height: 3;
+  width: ${({ width }) => width || "100%"};
+  overflow: hidden;
+  border-radius: 0.25em;
+  &::after {
+    border-left: 1px solid #e33aa9;
+    border-top: 1px solid #e33aa9;
+    width: 4px;
+    content: "";
+    height: 4px;
+    position: absolute;
+    right: 7px;
+    -webkit-transform: rotate(-135deg);
+    -ms-transform: rotate(-135deg);
+    transform: rotate(-135deg);
+    top: 35%;
+  }
+  &::before {
+    border-left: 1px solid #e33aa9;
+    width: 1px;
+    content: "";
+    height: 15px;
+    right: 15px;
+    position: absolute;
+    z-index: 2;
+  }
+`;
+
+export const BackgroundEnd = styled.div`
+  position: absolute;
+  left: calc(100% - 18px);
+  height: 100%;
+  width: 18px;
+  background-color: #fafafa;
+`;
+
+export const SelectCustom = styled.select`
+  background: #fafafa;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -ms-appearance: none;
+  appearance: none;
+  outline: 0;
+  box-shadow: none;
+  border: 0 !important;
+  background-image: none;
+  width: ${({ width }) => width || "100%"};
+  cursor: pointer;
+  height: 21px;
+  font-family: Avenir Next;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 21px;
+  padding: 0 5px;
+  box-sizing: border-box;
+  &::-ms-expand {
+    display: none;
+  }
+  &:option {
+    background-color: blue;
+    &:disabled {
+      color: #d4d1d7;
+    }
+    &:invalid {
+      color: gray;
+    }
+  }
+`;

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

@@ -26,10 +26,18 @@ export const Container = styled.div`
   }
 
   &.status-AA,
-  &.status-AP {
+  &.status-AP,
+  &.status-AC {
     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={() => {
-          optionSelected("accept");
+          sendToFacilitator("A");
         }}
         className="validation-option"
       >
@@ -27,7 +27,7 @@ export const ValidationPanel = ({
       </button>
       <button
         onClick={() => {
-          optionSelected("reject");
+          sendToFacilitator("R");
         }}
         className="validation-option"
       >

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

@@ -0,0 +1,16 @@
+import { AddProvidersAndProducts } from "./index";
+import bags from "../../../assets/images/generalImage/bags.svg";
+
+
+export default {
+    title: "Components/molecules/AddProvidersAndProducts",
+    component: AddProvidersAndProducts,
+};
+
+const Template = (args) => <AddProvidersAndProducts {...args}/>;
+
+export const AddProvidersAndProductsDefault = Template.bind({});
+
+AddProvidersAndProductsDefault.args = {
+    image: bags,    
+};

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

@@ -0,0 +1,19 @@
+import { Container } from "./styles";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import bags from "../../../assets/images/generalImage/bags.svg";
+
+export const AddProvidersAndProducts = ({ image, altText, onClick , className}) => {
+  return (
+    <Container className={className} onClick={onClick}>
+      <div className="add-bags">
+      {image && <img src={image} alt={altText}/>}      
+      </div>
+        <div>
+        <ScreenHeader
+        headerType={"header-and-paragraph"}
+        text={"Comienza agregando Proveedores"}
+        Paragraph={"O tambien puedes comenzar agregando tu productos"}/>
+        </div>    
+    </Container>
+  );
+};

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

@@ -0,0 +1,23 @@
+import styled from "styled-components";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.button`
+display: flex;
+align-items: center;
+border:1px solid ${GlobalColors.magenta_s2};
+border-radius: 15px;
+background: transparent;
+
+.add-bags,.header-and-paragraph{
+    margin:20px;
+}
+.add-bags{
+    margin-right: 30px;
+}
+.header-and-paragraph{
+    font-size: 18px;
+    .p{
+        font-size: 14px;
+    }
+}
+`;

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

@@ -0,0 +1,41 @@
+import { AssignedWork } from "./index";
+import assignedImage1 from "../../../assets/images/componentAssigned/assignedImage1.svg";
+import assignedImage2 from "../../../assets/images/componentAssigned/assignedImage2.svg";
+
+const status = [
+  "-",
+  "Pr",
+  "Rc",
+  "As",
+  "P",
+  "QF",
+  "AF",
+  "AA",
+  "AP",
+  "AC",
+  "RA",
+  "RF",
+  "RP",
+  "RC",
+  "Ex",
+];
+
+export default {
+  title: "Components/molecules/AssignedWork",
+  component: AssignedWork,
+  argTypes: {
+    statusType: {
+      options: status,
+      control: { type: "select" },
+    },
+  },
+};
+
+const Template = (args) => <AssignedWork {...args} />;
+
+export const AssignedWorkDefault = Template.bind({});
+
+AssignedWorkDefault.args = {
+  statusType: "-",
+  assignedImage: [{ image: assignedImage1 }, { image: assignedImage2 }],
+};

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

@@ -0,0 +1,40 @@
+import { Container } from "./styles";
+import { ScreenHeader } from "../../atoms/ScreenHeader/index";
+import clock from "../../../assets/images/componentAssigned/clock.svg";
+import flag from "../../../assets/images/componentAssigned/flag.svg";
+import { Avatar } from "../../atoms/Avatar/index";
+
+export const AssignedWork = ({ statusType, assignedImage }) => {
+  return (
+    <Container className={`status-${statusType}`}>
+      <div className="header-flag">
+        <ScreenHeader
+          headerType="header-and-paragraph" 
+          text="Producto recibido"
+          Paragraph="Actualizar producto 23441, descripción e imágenes"
+        />
+        <img className="flag" src={flag} />
+      </div>
+      <div className="clock-assigned">
+        <div className="clock-header">
+          <img className="clock" src={clock} />
+          <ScreenHeader headerType="date-header" text="12/04/2021" />
+        </div>
+        <div className="assigned">
+          {assignedImage
+            .reverse()
+            .map(
+              (assigned, index) =>
+                index < 2 && (
+                  <Avatar
+                    key={index}
+                    image={assigned.image}
+                    imageType="big-image"
+                  />
+                )
+            )}
+        </div>
+      </div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,111 @@
+import styled from "styled-components";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  border-radius: 4px;
+  background-color: transparent;
+  padding: 8px;
+  width: 250px;
+  padding-bottom: 5px;
+  position: relative;
+
+  &.status-Pr,
+  &.status-Rc {
+    border: 1px solid ${GlobalColors.reception};
+    .header-and-paragraph {
+      color: ${GlobalColors.reception};
+    }
+  }
+  &.status-- {
+    border: 1px solid ${GlobalColors.s3};
+    .header-and-paragraph {
+      color: ${GlobalColors.s3};
+    }
+  }
+
+  &.status-As,
+  &.status-P,
+  &.status-QF {
+    border: 1px solid ${GlobalColors.in_progress};
+    .header-and-paragraph {
+      color: ${GlobalColors.in_progress};
+    }
+  }
+
+  &.status-AF,
+  &.status-AA,
+  &.status-AP,
+  &.status-AC {
+    border: 1px solid ${GlobalColors.finished};
+    .header-and-paragraph {
+      color: ${GlobalColors.finished};
+    }
+  }
+
+  &.status-RA,
+  &.status-RF,
+  &.status-RP,
+  &.status-RC {
+    border: 1px solid #d74ded;
+    .header-and-paragraph {
+      color: #d74ded;
+    }
+  }
+
+  &.status-Ex {
+    border: 1px solid ${GlobalColors.exported};
+    .header-and-paragraph {
+      color: ${GlobalColors.exported};
+      
+    }
+  }
+
+  .header-flag {
+    display: flex;
+    justify-content: space-between;
+    .flag {
+      position: absolute;
+      right: 1px;
+      top: 0px;
+    }
+  }
+  .header-and-paragraph {
+    font-size: 12px;
+    line-height: 13px;
+    p {
+      line-height: 11px;
+      font-size: 10px;
+      color: ${GlobalColors.s4};
+    }
+  }
+
+  .clock-assigned {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .assigned {
+      display: flex;
+      flex-direction: row-reverse;
+      .big-image {
+        & + .big-image {
+          margin-right: -5px;
+        }
+      }
+    }
+  }
+  .clock-header {
+    display: flex;
+    border-radius: 4px;
+    background: ${GlobalColors.s2};
+    padding: 3px 10px;
+    .clock {
+      & + * {
+        margin-left: 10px;
+      }
+    }
+    .date-header {
+      font-size: 11px;
+      line-height: 13px;
+    }
+  }
+`;

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

@@ -7,8 +7,18 @@ 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,
+  approveRejectButtons,
+  sendToFacilitator,
+  auditorAssigned,
+  userAssigned,
+}) => {
   const [showValidationPanel, setShowValidationPanel] = useState(false);
   const [buttonType, setButtonType] = useState(
     validation ? validation : "null-button"
@@ -33,18 +43,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 />
+        {approveRejectButtons() &&
+          (auditorAssigned() || (userAssigned && userAssigned())) && (
+            <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/EditionActiveImage/index.js

@@ -2,11 +2,14 @@ import { Container } from "./styles";
 import { ProductImage } from "../../atoms/ProductImage/index";
 import { Button } from "../../atoms/GeneralButton/index";
 
-export const EditionActiveImage = ({ img, altText }) => {
+export const EditionActiveImage = ({ img, altText, setShowModal }) => {
   return (
     <Container>
       <ProductImage img={img} imageType="main-image" altText={altText} />
-      <Button buttonType="open-modal-button" />
+      <Button
+        buttonType="open-modal-button"
+        onClick={() => setShowModal(true)}
+      />
     </Container>
   );
 };

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

@@ -1,17 +1,30 @@
 import { Container } from "./styles";
 import { FeatureTag } from "../../atoms/FeatureTag/index";
+import { useEffect, useState } from "react";
 
 export const FeaturesBar = ({ features }) => {
+  const [isIE, setIsIE] = useState(false);
+
+  useEffect(() => {
+    setIsIE(
+      window.navigator.userAgentString?.indexOf("MSIE") > -1 ||
+        window.navigator.userAgentString?.indexOf("rv:") > -1
+    );
+  }, []);
+
   return (
-    <Container>
+    <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/FeaturesBar/styles.js

@@ -2,8 +2,15 @@ import styled from "styled-components";
 
 export const Container = styled.div`
   display: flex;
+  flex-wrap: wrap;
 
-  * + * {
-    margin-left: 4px;
+  &.gapClass {
+    gap: 8px;
+  }
+
+  &.IEClass {
+    * + * {
+      margin-left: 8px;
+    }
   }
 `;

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,11 @@ export const GalleryElement = ({
   gridLayout = false,
   id = "chk-default",
   label,
+  index,
+  imageInputs,
+  imageType,
+  imagePackagingType,
+  changeImage,
 }) => {
   const [statusValidation, setStatusValidation] = useState(validation);
   const [showValidationPanel, setShowValidationPanel] = useState(false);
@@ -34,50 +40,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} />
       </div>
       <div className="image-container">
         <ProductImage
-          img={image?.image}
+          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>