contentoh-components-library 20.0.0 → 20.0.17

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

@@ -1,91 +1,24 @@
 import { Container } from "./styles";
 import { TableHeader } from "../../molecules/TableHeader";
-import { Container as Row } from "../../molecules/TableRow/styles";
-import { ScreenHeader } from "../../atoms/ScreenHeader";
-import LabelToInput from "../../atoms/LabelToInput";
+import { TableRow } from "../../molecules/TableRow";
 
 export const ImageDataTable = ({
+  headerInfo,
+  imageData,
   activeImage,
   darkMode,
-  lists,
-  retailerSelected,
-  setImages,
-  assignationsImages,
-  imagesStatus,
-  setAssignation,
-  isRetailer,
-  onClickSave,
 }) => {
   return (
     <Container darkMode={darkMode}>
-      <TableHeader
-        imagesStatus={imagesStatus}
-        activeImage={activeImage}
-        assignationsImages={assignationsImages}
-        setAssignation={setAssignation}
-        isRetailer={isRetailer}
-        onClickSave={onClickSave}
-      />
-      <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
-          }
+      <TableHeader headerInfo={headerInfo} activeImage={activeImage} />
+      {imageData?.map((attribute, index) => (
+        <TableRow
+          key={index}
+          feature={attribute.feature}
+          value={attribute.value}
+          valueType={index < 2}
         />
-      </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/InputGroup/index.js

@@ -6,13 +6,6 @@ export const InputGroup = ({
   inputGroup = {},
   activeSection,
   dataInputs = {},
-  updatedDescriptions,
-  setUpdatedDescriptions,
-  updatedDatasheets,
-  setUpdatedDatasheets,
-  articleId,
-  version,
-  dinamicHeight,
 }) => {
   const inputTypeValue = (type) => {
     switch (type) {
@@ -24,6 +17,7 @@ export const InputGroup = ({
         return "text";
     }
   };
+
   return (
     <Container
       className={
@@ -40,33 +34,21 @@ export const InputGroup = ({
         {inputGroup?.inputs?.map((input, index) =>
           activeSection === "Ficha técnica" ? (
             <TagAndInput
-              key={index + "-" + dataInputs[input]?.value}
-              inputId={dataInputs[input]?.id}
-              version={version}
+              key={index}
+              inputId={"datasheet-" + dataInputs[input]?.id + "-" + index}
               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}
+              key={index}
+              inputId={"description-" + input?.id + "-" + 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}
             />
           )
         )}

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

@@ -23,9 +23,6 @@ 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/index.js

@@ -5,16 +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 = ({
   images = [],
   headerInfo,
   validation,
   setShowModal,
-  sendToFacilitator,
-  approveRejectButtons,
 }) => {
-  const [activeImage, setActiveImage] = useState(0);
+  const [activeImage, setActiveImage] = useState(
+    getImage(images?.values[0], 710, 710)
+  );
   const [buttonType, setButtonType] = useState(
     validation ? validation : "null-button"
   );
@@ -30,8 +31,6 @@ export const ProductImageModal = ({
     }
   };
 
-  console.log(images?.values[activeImage]);
-
   useEffect(() => {
     if (showValidationPanel) {
       document.addEventListener("click", closeValidationPanel, false);
@@ -43,25 +42,18 @@ export const ProductImageModal = ({
       <div className="modal-container">
         <div className="modal-image-container">
           <ProductImage
-            img={
-              "https://" +
-              process.env.REACT_APP_IMAGES_BUCKET +
-              ".s3.amazonaws.com/" +
-              images?.values[activeImage]?.srcDB
-            }
-            altText={images?.values[activeImage]?.name}
+            img={activeImage.src}
+            altText={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)}
+              />
               <Button
                 buttonType={"close-button"}
                 onClick={() => {
@@ -74,16 +66,14 @@ export const ProductImageModal = ({
                   id="validation-panel"
                   setOptionClicked={setButtonType}
                   setShowValidationPanel={setShowValidationPanel}
-                  sendToFacilitator={sendToFacilitator}
                 />
               )}
             </div>
             <ImageDataTable
-              imageData={images?.values[activeImage]?.data}
+              imageData={activeImage.data}
               headerInfo={headerInfo}
-              activeImage={images?.values[activeImage]}
+              activeImage={activeImage}
               darkMode={true}
-              lists={images}
             />
           </div>
           <ImageSelector

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

@@ -11,9 +11,6 @@ export const Container = styled.div`
   position: fixed;
   background-color: rgba(59, 59, 59, 0.53);
   backdrop-filter: blur(4px);
-  left: 0;
-  top: 0;
-  z-index: 100;
 
   .modal-container {
     display: flex;

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

@@ -0,0 +1,18 @@
+import { ChangePasswordLogin } from "./index";
+import LoginImage from "../../../assets/images/carouselImagesLogin/loginImage.svg";
+import Login2 from "../../../assets/images/carouselImagesLogin/login2.svg";
+import Login3 from "../../../assets/images/carouselImagesLogin/login3.svg";
+
+export default {
+  title: "Components/pages/ChangePasswordLogin",
+  component: ChangePasswordLogin,
+};
+const Template = (args) => <ChangePasswordLogin {...args} />;
+
+export const ChangePasswordLoginDefault = Template.bind({});
+
+ChangePasswordLoginDefault.args = {
+  imageArrayCarousel: [LoginImage, Login2, Login3],
+  textCarousel: "Elige la plataforma que conecta proovedores y retailers",
+  textHeaderRight: "Ingresa tus credenciales",
+};

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

@@ -0,0 +1,78 @@
+import { Container } from "./styles";
+import { CarouselImagesLogin } from "../../molecules/CarouselImagesLogin";
+import { LoginPasswordStrength } from "../../molecules/LoginPasswordStrength";
+import { useState } from "react";
+import { Button } from "../../atoms/GeneralButton";
+import { LogoImage } from "../../atoms/LogoImage";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+import { GradientPanel } from "../../atoms/GradientPanel";
+
+export const ChangePasswordLogin = ({
+  imageArrayCarousel = [],
+  textCarousel,
+  backogroundColorCarousel,
+  textHeaderRight,
+}) => {
+  const [emptyPassword, setEmptyPassword] = useState(false);
+  const [emptyConfirmPassword, setEmptyConfirmPassword] = useState(false);
+  const [matchPasswords, setMatchPasswords] = useState(true);
+  const validate = async (e) => {
+    e.preventDefault();
+    const password = document.querySelector("#newPasswordInput").value;
+    password.length < 8 ? setEmptyPassword(true) : setEmptyPassword(false);
+    const confirmPassword = document.querySelector(
+      "#confirmPasswordInput"
+    ).value;
+    confirmPassword === ""
+      ? setEmptyConfirmPassword(true)
+      : setEmptyConfirmPassword(false);
+    if (password === confirmPassword) {
+      setMatchPasswords(true);
+    } else {
+      setMatchPasswords(false);
+    }
+  };
+  const loginRight = [
+    <LogoImage key="1" />,
+    <div className="credenciales" key={"2"}>
+      <ScreenHeader
+        fontFamily={FontFamily.AvenirNext}
+        color={GlobalColors.s5}
+        text={textHeaderRight}
+      />
+    </div>,
+    <LoginPasswordStrength
+      emptyPassword={emptyPassword}
+      emptyConfirmPassword={emptyConfirmPassword}
+      matchPasswords={matchPasswords}
+      textTittle={textHeaderRight}
+      key="3"
+    />,
+    <div className="button-center" key="4">
+      <Button
+        buttonType={"general-default-button"}
+        label={"Enviar"}
+        onClick={(e) => validate(e)}
+      />
+    </div>,
+  ];
+  return (
+    <Container>
+      <div className="home-retailer">
+        <CarouselImagesLogin
+          panelImg={imageArrayCarousel}
+          panelText={textCarousel}
+          panelColor={backogroundColorCarousel}
+        />
+      </div>
+      <div className="home-login-retailer">
+        <GradientPanel
+          panelColor={GlobalColors.white}
+          componentsArray={loginRight}
+          panelType={"home-login"}
+        ></GradientPanel>
+      </div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,20 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  .home-login-retailer,
+  .home-retailer {
+    width: 50%;
+    .button-center {
+      text-align: center;
+      position: absolute;
+      bottom: 5%;
+      left: calc(75% - 80px);
+      .general-default-button {
+        width: 160px;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,17 @@
+import { EmailResetPassword } from "./index";
+import LoginImage from "../../../assets/images/carouselImagesLogin/loginImage.svg";
+import Login2 from "../../../assets/images/carouselImagesLogin/login2.svg";
+import Login3 from "../../../assets/images/carouselImagesLogin/login3.svg";
+
+export default {
+  title: "Components/pages/EmailResetPassword",
+  component: EmailResetPassword,
+};
+const Template = (args) => <EmailResetPassword {...args} />;
+
+export const EmailResetPasswordDefault = Template.bind({});
+
+EmailResetPasswordDefault.args = {
+  imageArrayCarousel: [LoginImage, Login2, Login3],
+  textCarousel: "Elige la plataforma que conecta proovedores y retailers",
+};

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

@@ -0,0 +1,77 @@
+import { Container } from "./styles";
+import { GradientPanel } from "../../atoms/GradientPanel";
+import { CarouselImagesLogin } from "../../molecules/CarouselImagesLogin";
+import { useState } from "react";
+import { LogoImage } from "../../atoms/LogoImage";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+import { TagAndInput } from "../../molecules/TagAndInput";
+import { Button } from "../../atoms/GeneralButton";
+
+export const EmailResetPassword = ({
+  imageArrayCarousel = [],
+  textCarousel,
+  backogroundColorCarousel,
+}) => {
+  const [emptyEmail, setEmptyEmail] = useState(false);
+  const [invalidEmail, setInvalidEmail] = useState(false);
+
+  const validate = async (e) => {
+    e.preventDefault();
+    const email = document.querySelector("#emailInput").value;
+    email === "" ? setEmptyEmail(true) : setEmptyEmail(false);
+    !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(
+      email
+    )
+      ? setInvalidEmail(true)
+      : setInvalidEmail(false);
+  };
+  const loginRight = [
+    <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"}
+        inputId={"emailInput"}
+        label={"Nombre de usuario"}
+        inputPlaceHolder={"username@contentoh.com"}
+      />
+      {emptyEmail && <label>Ingrese su correo</label>}
+      {invalidEmail && !emptyEmail && <label>Ingrese un correo válido</label>}
+    </div>,
+    <div className="button-center" key="4">
+      <Button
+        buttonType={"general-default-button"}
+        label={"Enviar"}
+        onClick={(e) => validate(e)}
+      />
+    </div>,
+    <div className="back-login" key="5">
+      <p>Regresar...</p>
+    </div>,
+  ];
+  return (
+    <Container>
+      <div className="home-retailer">
+        <CarouselImagesLogin
+          panelImg={imageArrayCarousel}
+          panelText={textCarousel}
+          panelColor={backogroundColorCarousel}
+        />
+      </div>
+      <div className="home-login-retailer">
+        <GradientPanel
+          componentsArray={loginRight}
+          panelType={"home-login"}
+          panelColor={GlobalColors.white}
+        />
+      </div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,27 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  .home-login-retailer,
+  .home-retailer {
+    width: 50%;
+    .button-center {
+      text-align: center;
+      .general-default-button {
+        width: 160px;
+      }
+    }
+    .back-login {
+      text-align: center;
+      margin: 15px !important;
+      color: ${GlobalColors.secondary_magenta};
+      cursor: pointer;
+      font-weight: bold;
+      font-family: ${FontFamily.Raleway};
+      font-size: 13px;
+    }
+  }
+`;

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

@@ -0,0 +1,17 @@
+import { RegistrationLoginFirstStep } from "./index";
+import LoginImage from "../../../assets/images/carouselImagesLogin/loginImage.svg";
+import Login2 from "../../../assets/images/carouselImagesLogin/login2.svg";
+import Login3 from "../../../assets/images/carouselImagesLogin/login3.svg";
+
+export default {
+  title: "Components/pages/RegistrationLoginFirstStep",
+  component: RegistrationLoginFirstStep,
+};
+const Template = (args) => <RegistrationLoginFirstStep {...args} />;
+
+export const RegistrationLoginFirstStepDefault = Template.bind({});
+
+RegistrationLoginFirstStepDefault.args = {
+  imageArrayCarousel: [LoginImage, Login2, Login3],
+  textCarousel: "Elige la plataforma que conecta proovedores y retailers",
+};