contentoh-components-library 10.0.0 → 12.1.17

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

@@ -0,0 +1,68 @@
+import React from "react";
+import ReactImageFallback from "react-image-fallback";
+import {
+  MainContainer,
+  MessageContainer,
+  Header,
+  Icon,
+  Close,
+  Message,
+  ContainerButtons,
+  FirstButton,
+  Button,
+  Detail,
+  TextArea,
+  BoldText,
+} from "./styles";
+
+import yellowAlert from "../../../assets/images/genericModal/yellowAlert.svg";
+import closeWhite from "../../../assets/images/genericModal/closeWhite.svg";
+
+/*
+props (* required):
+  - *close: function to quit pop up e.g close={() => setShow(!show)}
+  - button1/button2: name and action button e.g. button1={{ name: 'Cancelar', action: () => console.log('Cancelar') }}
+  - img: source image
+  - *message: message to show (like title)
+  - detail: message detail
+  - withoutImg: if the value is "true" the icon will not be displayed, if this attribute is ignored or has the value of "false" the icon will be displayed
+  - customComponent: contains a custom component
+*/
+export const GlobalModal = (props) => {
+  return (
+    <MainContainer>
+      <MessageContainer height={props.button1 || props.button2}>
+        <Header>
+          <Icon widthImg={props.widthImg} heightImg={props.heightImg}>
+            {!props.withoutImg && (
+              <ReactImageFallback
+                src={props.img}
+                fallbackImage={yellowAlert}
+                alt=""
+              />
+            )}
+          </Icon>
+          <Close onClick={props.close}>
+            <img src={closeWhite} alt="Cerrar" />
+          </Close>
+        </Header>
+        <Message>
+          {props.bold && <BoldText>{props.bold}</BoldText>} {props.message}
+        </Message>
+        {props.detail && <Detail>{`${props.detail} `}</Detail>}
+        {props.textArea && <TextArea id="area" />}
+        {props.customComponent && props.customComponent}
+        <ContainerButtons>
+          {props.button1 && (
+            <FirstButton onClick={props.button1.action}>
+              {props.button1.name}
+            </FirstButton>
+          )}
+          {props.button2 && (
+            <Button onClick={props.button2.action}>{props.button2.name}</Button>
+          )}
+        </ContainerButtons>
+      </MessageContainer>
+    </MainContainer>
+  );
+};

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

@@ -0,0 +1,113 @@
+import styled from "styled-components";
+
+export const MainContainer = styled.div`
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  background: #281f3366;
+  z-index: 15;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const Header = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: center;
+`;
+
+export const MessageContainer = styled.div`
+  position: relative;
+  padding: 40px 20px;
+  box-sizing: border-box;
+  width: 600px;
+  min-height: ${(props) => (props.height ? "300px" : "190px")};
+  background: #281f33;
+  border-radius: 39px;
+`;
+export const TextArea = styled.textarea`
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  width: 479px;
+  height: 84px;
+  background: #f0eef2;
+  border-radius: 4px;
+  color: #817393;
+  margin-bottom: 10px;
+`;
+
+export const Close = styled.figure`
+  position: absolute;
+  cursor: pointer;
+  right: 45px;
+  > img {
+    width: 14px;
+    height: 14px;
+  }
+`;
+
+export const Icon = styled.figure`
+  margin-bottom: 10px;
+  height: ${(props) => props.heightImg && props.heightImg};
+  > img {
+    width: ${(props) => (props.widthImg ? props.widthImg : "85px")};
+    height: ${(props) => (props.heightImg ? props.heightImg : "85px")};
+  }
+`;
+export const BoldText = styled.span`
+  font-weight: 600;
+`;
+
+export const Message = styled.p`
+  width: 100%;
+  font-family: Raleway;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 24px;
+  text-align: center;
+  color: #f7f7f7;
+  margin: 20px 0px;
+`;
+
+export const ContainerButtons = styled.div`
+  display: flex;
+  justify-content: space-around;
+`;
+
+export const FirstButton = styled.p`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  padding: 0 40px;
+  border: 1px solid #f0eef2;
+  box-sizing: border-box;
+  border-radius: 30px;
+  font-family: Avenir Next;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 18px;
+  color: #f0eef2;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: pointer;
+`;
+
+export const Button = styled(FirstButton)`
+  border: 0;
+  background: #e33aa9;
+  cursor: pointer;
+`;
+
+export const Detail = styled(Message)`
+  font-weight: bold;
+  font-size: 18px;
+  white-space: normal;
+`;

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

@@ -12,6 +12,10 @@ export const ImageDataTable = ({
   setImages,
   assignationsImages,
   imagesStatus,
+  setAssignation,
+  isRetailer,
+  onClickSave,
+  showSaveButton,
 }) => {
   return (
     <Container darkMode={darkMode}>
@@ -19,13 +23,18 @@ export const ImageDataTable = ({
         imagesStatus={imagesStatus}
         activeImage={activeImage}
         assignationsImages={assignationsImages}
+        setAssignation={setAssignation}
+        isRetailer={isRetailer}
+        showSaveButton={showSaveButton}
+        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
+            lists?.inputs?.find((f) => f.id === +activeImage?.image_id)?.name ||
+            "-"
           }
         />
       </Row>
@@ -36,7 +45,7 @@ export const ImageDataTable = ({
           text={
             lists?.imagePackagingType?.find(
               (f) => f.id === +activeImage?.packing_type
-            )?.name
+            )?.name || "-"
           }
         />
       </Row>
@@ -46,26 +55,36 @@ export const ImageDataTable = ({
           headerType={"table-row-text gray-table-row"}
           text={
             lists?.imageType?.find((f) => f.id === +activeImage?.image_type)
-              ?.name
+              ?.name || "-"
           }
         />
       </Row>
       <Row>
         <ScreenHeader headerType={"table-row-text"} text="Formato" />
-        <ScreenHeader headerType={"table-row-text"} text={activeImage?.ext} />
+        <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`}
+          text={
+            activeImage?.width && activeImage.height
+              ? `${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} />
+          <Row key={"row-" + index + "-" + attr?.name}>
+            <ScreenHeader
+              headerType={"table-row-text"}
+              text={attr?.name || "-"}
+            />
             <LabelToInput
               width="100px"
               defaultValue={attr?.value}
@@ -74,7 +93,9 @@ export const ImageDataTable = ({
                   action: "changeAttrValue",
                   retailer: retailerSelected,
                   index,
-                  value: e.target.value,
+                  value: e.target.value || "-",
+                  name: attr.name,
+                  retailersId: Object.keys(lists.attrForImgs).slice(0, -1),
                 });
               }}
             />

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

@@ -32,41 +32,61 @@ export const InputGroup = ({
           : "descriptions-layout"
       }
     >
-      <ScreenHeader
-        headerType={"retailer-name-header"}
-        text={inputGroup?.dataGroup}
-      />
+      {inputGroup?.dataGroup && (
+        <ScreenHeader
+          headerType={"retailer-name-header"}
+          text={inputGroup?.dataGroup}
+        />
+      )}
       <div className="inputs-container">
         {inputGroup?.inputs?.map((input, index) =>
           activeSection === "Ficha técnica" ? (
             <TagAndInput
-              key={index + "-" + dataInputs[input]?.value}
+              key={
+                index +
+                "-" +
+                dataInputs[input]?.value +
+                "-" +
+                dataInputs[input]?.id
+              }
               inputId={dataInputs[input]?.id}
               version={version}
               inputType={inputTypeValue(dataInputs[input]?.type)}
-              label={dataInputs[input]?.name}
+              label={
+                dataInputs[input]?.name +
+                (dataInputs[input]?.required ? "*" : "")
+              }
               value={dataInputs[input]?.value}
               inputPlaceHolder={input?.placeholder}
               articleId={articleId}
               isRequired={dataInputs[input]?.required}
               updatedDatasheets={updatedDatasheets}
               setUpdatedDatasheets={setUpdatedDatasheets}
+              maxChar={
+                dataInputs[input]?.max_chars
+                  ? dataInputs[input]?.max_chars
+                  : 999
+              }
+              optionList={dataInputs[input]?.option_list}
+              description={dataInputs[input]?.description}
             />
           ) : (
             <TagAndInput
               key={index + "-" + input?.value}
-              inputId={input?.id}
+              inputId={input.id}
               index={index}
               inputType={"textarea"}
-              label={input?.name}
+              label={input?.name + (input.required ? "*" : "")}
               value={input?.value}
               isRequired={input.required}
+              maxChar={input.max_chars}
               inputPlaceHolder={input?.placeholder}
               updatedDescriptions={updatedDescriptions}
               setUpdatedDescriptions={setUpdatedDescriptions}
               articleId={articleId}
               version={version}
               dinamicHeight={dinamicHeight}
+              description={input?.description}
             />
           )
         )}

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

@@ -18,14 +18,14 @@ export const Container = styled.div`
     .inputs-container {
       display: flex;
       flex-wrap: wrap;
+      width: 100%;
+      gap: 5px;
 
       .input-container {
         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,7 +5,6 @@ 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 = [],
@@ -13,7 +12,6 @@ export const ProductImageModal = ({
   validation,
   setShowModal,
   sendToFacilitator,
-  approveRejectButtons,
 }) => {
   const [activeImage, setActiveImage] = useState(0);
   const [buttonType, setButtonType] = useState(
@@ -37,16 +35,17 @@ export const ProductImageModal = ({
     }
   }, [showValidationPanel]);
 
-  useEffect(() => {
-    console.log(images?.values[activeImage]);
-  }, [activeImage]);
-
   return (
     <Container>
       <div className="modal-container">
         <div className="modal-image-container">
           <ProductImage
-            img={images?.values[activeImage]?.src}
+            img={
+              "https://" +
+              process.env.REACT_APP_IMAGES_BUCKET +
+              ".s3.amazonaws.com/" +
+              images?.values[activeImage]?.srcDB
+            }
             altText={images?.values[activeImage]?.name}
             imageType={"expanded-modal-image"}
           />
@@ -54,12 +53,12 @@ export const ProductImageModal = ({
         <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={"close-button"}
                 onClick={() => {

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

@@ -11,6 +11,9 @@ 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,77 @@
+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 = (e) => {
+    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;
+    }
+  }
+`;