contentoh-components-library 21.0.65 → 21.0.68

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

@@ -0,0 +1,85 @@
+import { Container } from "./styles";
+import { GradientPanel } from "../../atoms/GradientPanel";
+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 EmailResetPasswordLogin = (props) => {
+  const [emptyEmail, setEmptyEmail] = useState(false);
+  const [invalidEmail, setInvalidEmail] = useState(false);
+  const [showErrors, setShowErrors] = useState(false);
+  const [awsError, setAwsError] = useState("");
+
+  const validate = async (e) => {
+    let valid = true;
+    setShowErrors(true);
+    e.preventDefault();
+    const email = document.querySelector("#emailInput").value.trim();
+    email === "" ? setEmptyEmail(true) : setEmptyEmail(false);
+    !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(
+      email
+    )
+      ? setInvalidEmail(true)
+      : setInvalidEmail(false);
+    emptyEmail && (valid = false);
+    invalidEmail && (valid = false);
+    if (valid) {
+      try {
+        await props.Auth.forgotPassword(email);
+        sessionStorage.setItem("email", JSON.stringify(email));
+        sessionStorage.setItem("resetPasswordProcess", JSON.stringify("true"));
+        props.setPaso(5);
+      } catch (err) {
+        setAwsError(err.code);
+      }
+    }
+  };
+
+  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"}
+      />
+      {showErrors && emptyEmail && <label>Ingrese su correo</label>}
+      {showErrors && invalidEmail && !emptyEmail && (
+        <label>Ingrese un correo valido</label>
+      )}
+      {showErrors && awsError === "LimitExceededException" && (
+        <label>Has cambiado la contraseña recientemente, intenta despues</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 onClick={() => props.setPaso(7)}>Regresar...</p>
+    </div>,
+  ];
+  return (
+    <Container>
+      <GradientPanel
+        componentsArray={loginRight}
+        panelType={"home-login"}
+        panelColor={GlobalColors.white}
+      />
+    </Container>
+  );
+};

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

@@ -0,0 +1,23 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  width: 50%;
+  height: 100vh;
+    .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/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>

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

@@ -10,12 +10,12 @@ export const Container = styled.div`
 
     .buttons-container {
       position: absolute;
-      top: 5px;
-      left: 5px;
+      top: 0;
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: space-between;
+      padding: 0 5px;
     }
 
     .image-container {
@@ -40,10 +40,10 @@ export const Container = styled.div`
   &.row-gallery {
     display: flex;
     align-items: center;
-    padding-right: 10px;
 
     .buttons-container {
       position: relative;
+      width: 58px;
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -52,17 +52,18 @@ export const Container = styled.div`
     .image-container {
       display: flex;
       align-items: center;
-      flex: 1;
       .information-container {
         display: flex;
-        flex: 1;
 
         p {
           font-family: ${FontFamily.Lato};
           color: ${GlobalColors.s4};
           font-size: 14px;
           line-height: 17px;
-          text-align: center;
+
+          & + p {
+            margin-left: 18px;
+          }
 
           &.highlighted-data {
             font-family: ${FontFamily.AvenirNext};
@@ -74,40 +75,12 @@ export const Container = styled.div`
             line-height: 18px;
             padding: 0 10px;
           }
-
-          &:nth-child(1) {
-            //min-width: calc(20% - 76px);
-            //flex: 1 0 20%;
-            min-width: 22%;
-          }
-
-          &:nth-child(2),
-          &:nth-child(3) {
-            text-align: center;
-          }
-          &:nth-child(2) {
-            max-width: 90px;
-            min-width: 90px;
-          }
-          &:nth-child(3) {
-            max-width: 60px;
-            min-width: 60px;
-          }
-          /* &:nth-child(4) {
-            max-width: 90px;
-            min-width: 90px;
-          }
-          &:nth-child(5) {
-            max-width: 80px;
-            min-width: 80px;
-          } */
-        }
-
-        & > * {
-          flex: 1;
-          padding: 5px;
         }
       }
     }
+
+    & > * + * {
+      margin-left: 18px;
+    }
   }
 `;

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

@@ -1,25 +1,19 @@
 import { Container } from "./styles";
 import { CheckBox } from "../../atoms/CheckBox";
 
-export const GalleryHeader = ({ setCheckAll, setSelectedImages }) => {
-  const checkAll = (e) => {
-    const checkboxList = document.querySelectorAll("[id^='gallery-element-']");
-    checkboxList.forEach((chk) => (chk.checked = e.target.checked));
-    setCheckAll(e.target.checked);
-    if (!e.target.checked) setSelectedImages([]);
-  };
+export const GalleryHeader = () => {
   return (
     <Container>
       <div>
-        <CheckBox id="check-all-images" onChange={(e) => checkAll(e)} />
+        <CheckBox />
       </div>
+      <p className="value-header">Val.</p>
       <p className="image-header">Image</p>
-      <p className="image-name">Nombre</p>
-      <p className="image-size">Tamaño</p>
-      <p className="image-format">Formato</p>
-      <p className="">Tipo de toma</p>
-      <p className="">Tipo de imagen</p>
-      <p className="">Tipo de empaque</p>
+      <p>Nombre</p>
+      <p>Tamaño</p>
+      <p>Formato</p>
+      <p>Tipo de imagen</p>
+      <p>Identificador</p>
     </Container>
   );
 };

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

@@ -25,21 +25,5 @@ export const Container = styled.div`
     &.image-header {
       max-width: 60px;
     }
-
-    &.image-name {
-      min-width: 20%;
-    }
-
-    &.image-format {
-      max-width: 60px;
-    }
-
-    &.image-size {
-      max-width: 90px;
-    }
-
-    &.image-identifier {
-      max-width: 80px;
-    }
   }
 `;

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

@@ -1,5 +1,6 @@
 import { Container } from "./styles";
 import { ProductImage } from "../../atoms/ProductImage/index";
+import { getImage } from "../../../global-files/data";
 
 export const ImageSelector = ({
   images = [],
@@ -11,10 +12,10 @@ export const ImageSelector = ({
       {images?.values?.map((image, index) => (
         <ProductImage
           key={index}
-          img={image.src}
+          img={getImage(image, 85, 60).src}
           altText={image.altText}
           imageType={modalSelector ? "catalogue-modal-image" : "carousel-image"}
-          onClick={() => setActiveImage(index)}
+          onClick={() => setActiveImage(getImage(image), 350, 295)}
         />
       ))}
     </Container>

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

@@ -1,15 +1,18 @@
 import { Container, ItemPasswordStrength, Password } from "./styles";
 import { useEffect, useState } from "react";
 import { TagAndInput } from "../TagAndInput";
+
 export const LoginPasswordStrength = ({
   emptyPassword,
   emptyConfirmPassword,
   matchPasswords,
+  required,
 }) => {
   const [passwordStrength, setPasswordStrength] = useState(0);
   let upperCaseLetters = /[A-Z]/g;
   let numbers = /[0-9]/g;
   let specialChar = /[‘!’,‘@’,‘#’,‘$’,‘%’,‘^’,‘&’,‘*’]/g;
+
   useEffect(() => {
     const inputValue = document.getElementById("newPasswordInput");
     inputValue.addEventListener(
@@ -20,6 +23,7 @@ export const LoginPasswordStrength = ({
       false
     );
   }, []);
+
   const updateInfo = (e, newValue) => {
     switch (e.target.id) {
       case "newPasswordInput":
@@ -35,12 +39,11 @@ export const LoginPasswordStrength = ({
         newValue.match(specialChar) &&
           setPasswordStrength((passwordStrength) => passwordStrength + 1);
         break;
-      case "confirmPasswordInput":
-        break;
       default:
         return;
     }
   };
+
   return (
     <Container>
       <div className="user" key={"3"}>
@@ -48,6 +51,7 @@ export const LoginPasswordStrength = ({
           inputType={"password"}
           inputId={"newPasswordInput"}
           label={"Ingrese su nueva contraseña"}
+          required={required}
         />
         {emptyPassword && (
           <label>La contraseña debe ser minimo de 8 caracteres</label>
@@ -76,6 +80,7 @@ export const LoginPasswordStrength = ({
           inputType={"password"}
           inputId={"confirmPasswordInput"}
           label={"Confirme la nueva contraseña"}
+          required={required}
         />
         {emptyConfirmPassword && !emptyPassword && (
           <label>Confirme la contraseña</label>
@@ -86,4 +91,4 @@ export const LoginPasswordStrength = ({
       </div>
     </Container>
   );
-};
+};

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

@@ -20,6 +20,9 @@ export const Container = styled.div`
     font-family: ${FontFamily.Raleway_700};
     font-size: 11px;
   }
+  & + *{
+    margin-top: 20px;
+  }
 `;
 
 export const Password = styled.div`

package/src/components/molecules/LogoLoading/Loading.stories.js

@@ -0,0 +1,10 @@
+import { LogoLoading } from "./index";
+
+export default {
+  title: "Components/molecules/LogoLoading",
+  component: LogoLoading,
+};
+const Template = (args) => <LogoLoading {...args} />;
+export const LogoLoadingDefault = Template.bind({});
+
+LogoLoadingDefault.args = {};

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

@@ -0,0 +1,12 @@
+import { Container } from "./styles";
+import { Loading } from "../../atoms/Loading";
+import { LogoImage } from "../../atoms/LogoImage";
+
+export const LogoLoading = () => {
+  return (
+    <Container>
+      <LogoImage/>
+      <Loading/>
+    </Container>
+  );
+};

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

@@ -0,0 +1,16 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  height: 100vh;
+  width: 50%;
+  padding-top: 25%;
+  .logo {
+    text-align: center;
+    img {
+      width: 65%;
+    }
+  }
+  .loading {
+    height: 10%;
+  }
+`;

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

@@ -8,6 +8,7 @@ export const ProductNameHeader = ({
   productName,
   statusType,
   percent,
+  backgroundColor,
   priority,
   date,
 }) => {
@@ -15,7 +16,7 @@ export const ProductNameHeader = ({
     <Container>
       <ScreenHeader headerType={"product-name-header"} text={productName} />
       <StatusTag statusType={statusType} />
-      <ProgressBar percent={percent} progressBarType={statusType} />
+      <ProgressBar percent={percent} backgroundColor={backgroundColor} />
       <PriorityFlag priority={priority} />
       <ScreenHeader headerType={"date-header"} text={date} />
     </Container>

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

@@ -0,0 +1,11 @@
+import { RegistrationFirstStep } from "./index";
+
+export default {
+  title: "Components/molecules/RegistrationFirstStep",
+  component: RegistrationFirstStep,
+};
+const Template = (args) => <RegistrationFirstStep {...args} />;
+
+export const RegistrationFirstStepDefault = Template.bind({});
+
+RegistrationFirstStepDefault.args = {};