contentoh-components-library 0.1.1 → 8.0.0

package/src/components/organisms/Fullplan/styles.js

@@ -3,12 +3,13 @@ import { GlobalColors, FontFamily } from "../../../global-files/variables";
 
 export const Container = styled.div`
   text-align: center;
+  height: 100%;
+  width: 100%;
 
   .title {
     text-align: center;
     font-feature-settings: "pnum" on, "lnum" on;
     h2 {
-      max-width: 350px;
       margin: auto;
     }
   }
@@ -19,7 +20,6 @@ export const Container = styled.div`
       color: ${GlobalColors.s4};
       font-family: ${FontFamily.AvenirNext};
       font-size: 14px;
-      max-width: 390px;
       margin: auto;
     }
   }

package/src/components/organisms/ImageDataTable/index.js

@@ -1,19 +1,85 @@
 import { Container } from "./styles";
 import { TableHeader } from "../../molecules/TableHeader";
-import { TableRow } from "../../molecules/TableRow";
+import { Container as Row } from "../../molecules/TableRow/styles";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import LabelToInput from "../../atoms/LabelToInput";
 
-export const ImageDataTable = ({ headerInfo, imageData, activeImage }) => {
+export const ImageDataTable = ({
+  activeImage,
+  darkMode,
+  lists,
+  retailerSelected,
+  setImages,
+  assignationsImages,
+  imagesStatus,
+}) => {
   return (
-    <Container>
-      <TableHeader headerInfo={headerInfo} activeImage={activeImage} />
-      {imageData?.map((attribute, index) => (
-        <TableRow
-          key={index}
-          feature={attribute.feature}
-          value={attribute.value}
-          valueType={index < 2}
+    <Container darkMode={darkMode}>
+      <TableHeader
+        imagesStatus={imagesStatus}
+        activeImage={activeImage}
+        assignationsImages={assignationsImages}
+      />
+      <Row>
+        <ScreenHeader headerType={"table-row-text"} text="Tipo de toma" />
+        <ScreenHeader
+          headerType={"table-row-text gray-table-row"}
+          text={
+            lists?.inputs?.find((f) => f.id === +activeImage?.image_id)?.name
+          }
         />
-      ))}
+      </Row>
+      <Row>
+        <ScreenHeader headerType={"table-row-text"} text="Tipo de empaque" />
+        <ScreenHeader
+          headerType={"table-row-text gray-table-row"}
+          text={
+            lists?.imagePackagingType?.find(
+              (f) => f.id === +activeImage?.packing_type
+            )?.name
+          }
+        />
+      </Row>
+      <Row>
+        <ScreenHeader headerType={"table-row-text"} text="Tipo de imagen" />
+        <ScreenHeader
+          headerType={"table-row-text gray-table-row"}
+          text={
+            lists?.imageType?.find((f) => f.id === +activeImage?.image_type)
+              ?.name
+          }
+        />
+      </Row>
+      <Row>
+        <ScreenHeader headerType={"table-row-text"} text="Formato" />
+        <ScreenHeader headerType={"table-row-text"} text={activeImage?.ext} />
+      </Row>
+      <Row>
+        <ScreenHeader headerType={"table-row-text"} text="Tamaño de imagen" />
+        <ScreenHeader
+          headerType={"table-row-text"}
+          text={`${activeImage?.width}x${activeImage?.height}px`}
+        />
+      </Row>
+      {retailerSelected &&
+        lists?.attrForImgs &&
+        lists?.attrForImgs[retailerSelected]?.map((attr, index) => (
+          <Row key={"row-" + index}>
+            <ScreenHeader headerType={"table-row-text"} text={attr?.name} />
+            <LabelToInput
+              width="100px"
+              defaultValue={attr?.value}
+              onChange={(e) => {
+                setImages({
+                  action: "changeAttrValue",
+                  retailer: retailerSelected,
+                  index,
+                  value: e.target.value,
+                });
+              }}
+            />
+          </Row>
+        ))}
     </Container>
   );
 };

package/src/components/organisms/ImageDataTable/styles.js

@@ -6,4 +6,12 @@ export const Container = styled.div`
   padding: 10px;
   border: 1px solid ${GlobalColors.s2};
   border-radius: 3px;
+
+  .input-name-header,
+  .table-row-text {
+    color: ${({ darkMode }) => darkMode && GlobalColors.s1};
+  }
+  .gray-table-row {
+    background-color: ${({ darkMode }) => darkMode && GlobalColors.s5};
+  }
 `;

package/src/components/organisms/ImagePreviewer/index.js

@@ -1,26 +1,21 @@
 import { Container } from "./styles";
 import { EditionActiveImage } from "../../molecules/EditionActiveImage";
 import { ImageSelector } from "../../molecules/ImageSelector";
-import { useEffect, useState } from "react";
 
 export const ImagePreviewer = ({
   imagesArray = [],
   activeImage,
   setActiveImage,
+  setShowModal,
 }) => {
-  const [imageSelected, setImageSelected] = useState(activeImage);
-
-  useEffect(() => {
-    setActiveImage && setActiveImage(imageSelected);
-  }, [imageSelected]);
-
   return (
     <Container>
       <EditionActiveImage
-        img={imageSelected?.img}
-        altText={imageSelected?.alt}
+        img={activeImage?.src}
+        altText={activeImage?.name}
+        setShowModal={setShowModal}
       />
-      <ImageSelector images={imagesArray} setActiveImage={setImageSelected} />
+      <ImageSelector images={imagesArray} setActiveImage={setActiveImage} />
     </Container>
   );
 };

package/src/components/organisms/InputGroup/index.js

@@ -2,7 +2,28 @@ import { Container } from "./styles";
 import { ScreenHeader } from "../../atoms/ScreenHeader";
 import { TagAndInput } from "../../molecules/TagAndInput";
 
-export const InputGroup = ({ inputGroup = {}, activeSection }) => {
+export const InputGroup = ({
+  inputGroup = {},
+  activeSection,
+  dataInputs = {},
+  updatedDescriptions,
+  setUpdatedDescriptions,
+  updatedDatasheets,
+  setUpdatedDatasheets,
+  articleId,
+  version,
+  dinamicHeight,
+}) => {
+  const inputTypeValue = (type) => {
+    switch (type) {
+      case "Booleano":
+        return "checkbox";
+      case "Numérico":
+        return "number";
+      default:
+        return "text";
+    }
+  };
   return (
     <Container
       className={
@@ -13,18 +34,42 @@ export const InputGroup = ({ inputGroup = {}, activeSection }) => {
     >
       <ScreenHeader
         headerType={"retailer-name-header"}
-        text={inputGroup?.name}
+        text={inputGroup?.dataGroup}
       />
       <div className="inputs-container">
-        {inputGroup?.inputs?.map((input, index) => (
-          <TagAndInput
-            key={index}
-            inputType={activeSection === "Ficha técnica" ? "text" : "textarea"}
-            label={input.label}
-            value={input.value}
-            inputPlaceHolder={input.placeholder}
-          />
-        ))}
+        {inputGroup?.inputs?.map((input, index) =>
+          activeSection === "Ficha técnica" ? (
+            <TagAndInput
+              key={index + "-" + dataInputs[input]?.value}
+              inputId={dataInputs[input]?.id}
+              version={version}
+              inputType={inputTypeValue(dataInputs[input]?.type)}
+              label={dataInputs[input]?.name}
+              value={dataInputs[input]?.value}
+              inputPlaceHolder={input?.placeholder}
+              articleId={articleId}
+              isRequired={dataInputs[input]?.required}
+              updatedDatasheets={updatedDatasheets}
+              setUpdatedDatasheets={setUpdatedDatasheets}
+            />
+          ) : (
+            <TagAndInput
+              key={index + "-" + input?.value}
+              inputId={input?.id}
+              index={index}
+              inputType={"textarea"}
+              label={input?.name}
+              value={input?.value}
+              isRequired={input.required}
+              inputPlaceHolder={input?.placeholder}
+              updatedDescriptions={updatedDescriptions}
+              setUpdatedDescriptions={setUpdatedDescriptions}
+              articleId={articleId}
+              version={version}
+              dinamicHeight={dinamicHeight}
+            />
+          )
+        )}
       </div>
     </Container>
   );

package/src/components/organisms/InputGroup/styles.js

@@ -23,6 +23,9 @@ export const Container = styled.div`
         flex: 1 1 20%;
         margin-right: 10px;
         min-width: 227px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
       }
     }
   }

package/src/components/organisms/ProductImageModal/ProductImageModal.stories.js

@@ -10,78 +10,81 @@ const Template = (args) => <ProductImageModal {...args} />;
 export const ProductImageModalDefault = Template.bind({});
 ProductImageModalDefault.args = {
   headerInfo: {},
-  imagesArray: [
-    {
-      img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
-      alt: "img",
-      name: "Hero",
-      data: [
-        { feature: "Tamaño de imagen", value: "1000x10000" },
-        { feature: "Formato", value: "jpg" },
-        { feature: "Resolución", value: "300dpi" },
-        { feature: "Tipo de imagen", value: "Tipo de imagen" },
-        { feature: "Identificador", value: "F261" },
-      ],
-    },
-    {
-      img: "https://www.muycomputer.com/wp-content/uploads/2020/12/google.png",
-      alt: "img",
-      name: "Hero2",
-      data: [
-        { feature: "Tamaño de imagen", value: "1000x10000" },
-        { feature: "Formato", value: "jpg" },
-        { feature: "Resolución", value: "300dpi" },
-        { feature: "Tipo de imagen", value: "Tipo de imagen" },
-        { feature: "Identificador", value: "F261" },
-      ],
-    },
-    {
-      img: "https://www.ionos.es/digitalguide/fileadmin/DigitalGuide/Teaser/bildergalerie-online-t.jpg",
-      alt: "img",
-      name: "Hero3",
-      data: [
-        { feature: "Tamaño de imagen", value: "1000x10000" },
-        { feature: "Formato", value: "jpg" },
-        { feature: "Resolución", value: "300dpi" },
-        { feature: "Tipo de imagen", value: "Tipo de imagen" },
-        { feature: "Identificador", value: "F261" },
-      ],
-    },
-    {
-      img: "https://i.pinimg.com/originals/d0/b9/28/d0b928df15d3a3bf1905865a8fedb257.jpg",
-      alt: "img",
-      name: "Hero4",
-      data: [
-        { feature: "Tamaño de imagen", value: "1000x10000" },
-        { feature: "Formato", value: "jpg" },
-        { feature: "Resolución", value: "300dpi" },
-        { feature: "Tipo de imagen", value: "Tipo de imagen" },
-        { feature: "Identificador", value: "F261" },
-      ],
-    },
-    {
-      img: "https://memegenerator.net/img/images/72798198.jpg",
-      alt: "img",
-      name: "Hero5",
-      data: [
-        { feature: "Tamaño de imagen", value: "1000x10000" },
-        { feature: "Formato", value: "jpg" },
-        { feature: "Resolución", value: "300dpi" },
-        { feature: "Tipo de imagen", value: "Tipo de imagen" },
-        { feature: "Identificador", value: "F261" },
-      ],
-    },
-    {
-      img: "http://www.dumpaday.com/wp-content/uploads/2016/02/funny-pictures-621.jpg",
-      alt: "img",
-      name: "Hero6",
-      data: [
-        { feature: "Tamaño de imagen", value: "1000x10000" },
-        { feature: "Formato", value: "jpg" },
-        { feature: "Resolución", value: "300dpi" },
-        { feature: "Tipo de imagen", value: "Tipo de imagen" },
-        { feature: "Identificador", value: "F261" },
-      ],
-    },
-  ],
+
+  images: {
+    values: [
+      {
+        img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+        alt: "img",
+        name: "Hero",
+        data: [
+          { feature: "Tamaño de imagen", value: "1000x10000" },
+          { feature: "Formato", value: "jpg" },
+          { feature: "Resolución", value: "300dpi" },
+          { feature: "Tipo de imagen", value: "Tipo de imagen" },
+          { feature: "Identificador", value: "F261" },
+        ],
+      },
+      {
+        img: "https://www.muycomputer.com/wp-content/uploads/2020/12/google.png",
+        alt: "img",
+        name: "Hero2",
+        data: [
+          { feature: "Tamaño de imagen", value: "1000x10000" },
+          { feature: "Formato", value: "jpg" },
+          { feature: "Resolución", value: "300dpi" },
+          { feature: "Tipo de imagen", value: "Tipo de imagen" },
+          { feature: "Identificador", value: "F261" },
+        ],
+      },
+      {
+        img: "https://www.ionos.es/digitalguide/fileadmin/DigitalGuide/Teaser/bildergalerie-online-t.jpg",
+        alt: "img",
+        name: "Hero3",
+        data: [
+          { feature: "Tamaño de imagen", value: "1000x10000" },
+          { feature: "Formato", value: "jpg" },
+          { feature: "Resolución", value: "300dpi" },
+          { feature: "Tipo de imagen", value: "Tipo de imagen" },
+          { feature: "Identificador", value: "F261" },
+        ],
+      },
+      {
+        img: "https://i.pinimg.com/originals/d0/b9/28/d0b928df15d3a3bf1905865a8fedb257.jpg",
+        alt: "img",
+        name: "Hero4",
+        data: [
+          { feature: "Tamaño de imagen", value: "1000x10000" },
+          { feature: "Formato", value: "jpg" },
+          { feature: "Resolución", value: "300dpi" },
+          { feature: "Tipo de imagen", value: "Tipo de imagen" },
+          { feature: "Identificador", value: "F261" },
+        ],
+      },
+      {
+        img: "https://memegenerator.net/img/images/72798198.jpg",
+        alt: "img",
+        name: "Hero5",
+        data: [
+          { feature: "Tamaño de imagen", value: "1000x10000" },
+          { feature: "Formato", value: "jpg" },
+          { feature: "Resolución", value: "300dpi" },
+          { feature: "Tipo de imagen", value: "Tipo de imagen" },
+          { feature: "Identificador", value: "F261" },
+        ],
+      },
+      {
+        img: "http://www.dumpaday.com/wp-content/uploads/2016/02/funny-pictures-621.jpg",
+        alt: "img",
+        name: "Hero6",
+        data: [
+          { feature: "Tamaño de imagen", value: "1000x10000" },
+          { feature: "Formato", value: "jpg" },
+          { feature: "Resolución", value: "300dpi" },
+          { feature: "Tipo de imagen", value: "Tipo de imagen" },
+          { feature: "Identificador", value: "F261" },
+        ],
+      },
+    ],
+  },
 };

package/src/components/organisms/ProductImageModal/index.js

@@ -5,15 +5,17 @@ import { ImageSelector } from "../../molecules/ImageSelector";
 import { useState, useEffect } from "react";
 import { ValidationPanel } from "../../atoms/ValidationPanel";
 import { Button } from "../../atoms/GeneralButton";
+import { getImage } from "../../../global-files/data";
 
 export const ProductImageModal = ({
-  imagesArray = [],
+  images = [],
   headerInfo,
   validation,
+  setShowModal,
+  sendToFacilitator,
+  approveRejectButtons,
 }) => {
-  const [activeImage, setActiveImage] = useState(
-    imagesArray.length > 0 && imagesArray[0]
-  );
+  const [activeImage, setActiveImage] = useState(0);
   const [buttonType, setButtonType] = useState(
     validation ? validation : "null-button"
   );
@@ -34,41 +36,56 @@ export const ProductImageModal = ({
       document.addEventListener("click", closeValidationPanel, false);
     }
   }, [showValidationPanel]);
+
+  useEffect(() => {
+    console.log(images?.values[activeImage]);
+  }, [activeImage]);
+
   return (
     <Container>
       <div className="modal-container">
         <div className="modal-image-container">
           <ProductImage
-            img={activeImage?.img}
-            altText={activeImage?.name}
+            img={images?.values[activeImage]?.src}
+            altText={images?.values[activeImage]?.name}
             imageType={"expanded-modal-image"}
           />
         </div>
         <div className="modal-data-container">
           <div className="validation-and-table-container">
             <div className="validation-panel">
+              {approveRejectButtons("images") && (
+                <Button
+                  buttonType={`circular-button ${buttonType}`}
+                  onClick={() => setShowValidationPanel(true)}
+                />
+              )}
               <Button
-                buttonType={`circular-button ${buttonType}`}
-                onClick={() => setShowValidationPanel(true)}
+                buttonType={"close-button"}
+                onClick={() => {
+                  setShowModal(false);
+                }}
               />
-              <Button buttonType={"close-button"} />
 
               {showValidationPanel && (
                 <ValidationPanel
                   id="validation-panel"
                   setOptionClicked={setButtonType}
                   setShowValidationPanel={setShowValidationPanel}
+                  sendToFacilitator={sendToFacilitator}
                 />
               )}
             </div>
             <ImageDataTable
-              imageData={activeImage.data}
+              imageData={images?.values[activeImage]?.data}
               headerInfo={headerInfo}
-              activeImage={activeImage}
+              activeImage={images?.values[activeImage]}
+              darkMode={true}
+              lists={images}
             />
           </div>
           <ImageSelector
-            images={imagesArray}
+            images={images}
             setActiveImage={setActiveImage}
             modalSelector={true}
           />

package/src/components/organisms/ProductImageModal/styles.js

@@ -6,7 +6,11 @@ export const Container = styled.div`
   justify-content: center;
   align-items: center;
   min-height: 100vh;
+  width: 100%;
   overflow: auto;
+  position: fixed;
+  background-color: rgba(59, 59, 59, 0.53);
+  backdrop-filter: blur(4px);
 
   .modal-container {
     display: flex;

package/src/components/pages/CustomerLogin/CustomerLogin.stories.js

@@ -0,0 +1,76 @@
+import { CustomerLogin } from "./index";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+import { CustomerTypeImages } from "../../atoms/CustomerTypeImage";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { LogoImage } from "../../atoms/LogoImage/index";
+import { CheckBox } from "../../atoms/CheckBox/index";
+import { Button } from "../../atoms/GeneralButton/index";
+import { TagAndInput } from "../../molecules/TagAndInput";
+
+export default {
+  title: "Components/pages/CustomerLogin",
+  component: CustomerLogin,
+};
+const Template = (args) => <CustomerLogin {...args} />;
+
+export const CustomerLoginDefault = Template.bind({});
+
+CustomerLoginDefault.args = {
+  loginLeft: {
+    componentsArray: [
+      <ScreenHeader
+        fontFamily={FontFamily.Raleway_600}
+        color={GlobalColors.white}
+        text={"Bienvenido a Cadena"}
+        key="1"
+      />,
+      <p key="2">La platarforma que conecta cadenas retailers con proveedores.</p>,
+      <CustomerTypeImages key="3"/>,
+    ],
+  },
+  loginRight: {
+    componentsArray: [
+      <LogoImage key="1"/>,
+      <div className="credenciales" key="2">
+        <ScreenHeader
+          fontFamily={FontFamily.AvenirNext}
+          color={GlobalColors.s5}
+          text={"Ingresa tus credenciales"}
+        />
+      </div>,
+      <div className="user" key="3">
+        <TagAndInput
+          inputType={"text"}
+          label={"Nombre de usuario"}
+          inputPlaceHolder={"username@contentoh.com"}
+        />
+      </div>,
+      <div className="password" key="4">
+        <TagAndInput
+          inputType={"text"}
+          label={"Contraseña"}
+          inputPlaceHolder={"Escribe tu contraseña"}
+        />
+      </div>,
+      <div className="select" key="5">
+        <CheckBox
+          label={"Mantener sesión activada"}
+          id={"chk-default"}
+          className="active-left"
+        />
+        <p className="active-right">Olvide mi contraseña</p>
+      </div>,
+      <div className="button-right" key="6">
+        <Button
+          buttonType={"general-default-button"}
+          label={"Iniciar sesión"}
+        />
+      </div>,
+      <div className="new-login" key="7">
+        <p className="pre-registro">
+          ¿Aún no tienes cuenta?<span> Regístrate</span>
+        </p>
+      </div>,
+    ],
+  },
+};

package/src/components/pages/CustomerLogin/index.js

@@ -0,0 +1,22 @@
+import { GradientPanel } from "../../atoms/GradientPanel";
+import { Container } from "./styles";
+
+export const CustomerLogin = ({ loginLeft, loginRight }) => {
+  return (
+    <Container>
+      <div className="home-retailer">
+        <GradientPanel
+          componentsArray={loginLeft.componentsArray}
+          panelType={"home-panel"}
+        />
+      </div>
+      <div className="home-login-retailer">
+        <GradientPanel
+          panelColor
+          componentsArray={loginRight.componentsArray}
+          panelType={"home-login"}
+        />
+      </div>
+    </Container>
+  );
+};

package/src/components/pages/CustomerLogin/styles.js

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100vh;
+
+  .home-login-retailer,
+  .home-retailer {
+    width: 50%;
+  }
+`;