contentoh-components-library 21.0.4 → 21.0.7

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

@@ -1,78 +1,141 @@
 import ReactQuill from "react-quill";
 import "react-quill/dist/quill.snow.css";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Container } from "./styles";
 
 export const InputFormatter = ({
-  inputValue = "",
-  id,
+  mainValue = "",
+  inputId,
+  articleId,
   updatedDescriptions,
   setUpdatedDescriptions,
   addTextAreaToArray,
+  name,
   isRequired,
+  maxChar,
 }) => {
-  const [convertedText, setConvertedText] = useState(inputValue);
-  const [focus, setFocus] = useState(false);
+  const [inputValue, setInputValue] = useState(mainValue);
   const [selection, setSelection] = useState(false);
   const [position, setPosition] = useState({ left: 0, top: 0 });
+  const [charsCounter, setCharsCounter] = useState(0);
+  const [quillState, setQuillState] = useState({});
+  const maxLength = maxChar ? maxChar : 999;
 
-  const onHandleTextAreaChange = (value) => {
-    setConvertedText((current) => (current = value));
-    !id.includes("commentary") &&
-      addTextAreaToArray(
-        value.trim().replace(/<\/?p>/gm, ""),
-        updatedDescriptions,
-        setUpdatedDescriptions
-      );
+  const getValue = (value) => {
+    let temp = value.replace(/\n/gm, "<br>");
+    return temp;
   };
 
-  function getSelectionText() {
-    setPosition({ left: 0, top: 0 });
-    var text = "";
-    if (window.getSelection) {
-      text = window.getSelection().toString();
-    } else if (document.selection && document.selection.type != "Control") {
-      text = document.selection.createRange().text;
+  //const quillRef = useRef();
+  const setQuill = (ref) => {
+    if (!ref || ref === null) return;
+    if (typeof ref.getEditor !== "function") return;
+    setQuillState(ref.getEditor());
+  };
+
+  const valueFormater = (value) => {
+    return value.replace(/<\/p><p>/gm, "\n").replace(/<\/?br>|<\/?p>/gm, "");
+  };
+
+  const onChange = (valueInput, delta, user, h) => {
+    let value = "";
+    try {
+      if (h.getLength() - 1 <= maxLength) {
+        setInputValue(
+          (val) => (val = valueInput.replace(/<\/?span.*?>/gm, ""))
+        );
+        value = valueInput;
+      } else {
+        quillState.deleteText(maxLength, quillState.getLength());
+        setInputValue((val) => (val = quillState.getText()));
+        value = quillState.getText();
+      }
+    } catch (error) {
+      console.log(error);
     }
-    setSelection(text.length > 0);
-  }
+    setCharsCounter(h.getLength() - 1);
+    value = valueFormater(value);
 
-  const getCursorPosition = (e) => {
-    const input = document.getElementById(id);
-    const elementPosition = input.getBoundingClientRect();
-    position.top === 0 &&
-      position.left === 0 &&
-      setPosition({
-        left: e.clientX - elementPosition.x,
-        top: e.clientY - elementPosition.y,
+    let idInput = inputId;
+    let dataSave = updatedDescriptions.slice();
+    if (dataSave.length > 0) {
+      if (dataSave.filter((e) => e.attributeId === idInput).length > 0) {
+        dataSave.forEach((e) => {
+          if (e.attributeId === idInput) {
+            e.value = value;
+          }
+        });
+      } else {
+        dataSave.push({
+          articleId: articleId,
+          attributeId: idInput,
+          value: value,
+        });
+      }
+    } else {
+      dataSave.push({
+        articleId: articleId,
+        attributeId: idInput,
+        value: value,
       });
+    }
+    setUpdatedDescriptions(dataSave);
+  };
+
+  const getSelection = (range, a, b) => {
+    //getBounds(index,length)
+    const selected = b.getSelection();
+    const bounds = b.getBounds(selected?.index || 0, selected?.length || 0);
+    if (a === "user") {
+      setPosition({ left: bounds.left, top: bounds.top });
+      setSelection(selected?.length > 0);
+    }
   };
 
   return (
     <Container
-      focus={focus}
-      selection={selection}
-      position={position}
       isRequired={
-        isRequired && convertedText.replace(/<\/?p>/gm, "") === "<br>"
+        isRequired &&
+        (inputValue.replace(/<.*?>/gm, "").length === 0 || !inputValue)
       }
-      onClick={(e) => {
-        getCursorPosition(e);
-      }}
+      selection={selection}
+      position={position}
     >
       <ReactQuill
-        id={id}
-        value={convertedText}
-        onChange={onHandleTextAreaChange}
+        id={inputId + ""}
+        ref={(el) => setQuill(el)}
+        value={getValue(inputValue)}
+        //disabled={!props.enableInputs}
         modules={{ toolbar: ["bold"] }}
-        onFocus={() => setFocus(true)}
-        onBlur={() => {
-          setFocus(false);
-          setSelection(false);
-          setPosition({ left: 0, top: 0 });
+        onKeyPress={(e) => {
+          if (charsCounter >= maxLength && e.key !== "Backspace") {
+            e.preventDefault();
+          }
+        }}
+        onKeyDown={(e) => {
+          let keysArray = [
+            "Backspace",
+            "Meta",
+            "ArrowLeft",
+            "ArrowRight",
+            "ArrowUp",
+            "ArrowDown",
+          ];
+          if (
+            charsCounter >= maxLength &&
+            keysArray.every((key) => e.key !== key)
+          ) {
+            e.preventDefault();
+          }
+        }}
+        onChange={(valueInput, user, range, h) => {
+          onChange(valueInput, user, range, h);
         }}
-        onChangeSelection={() => getSelectionText()}
+        onChangeSelection={getSelection}
       />
+      <p className="description-limit">
+        {charsCounter}/{maxLength}
+      </p>
     </Container>
   );
 };

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

@@ -31,4 +31,10 @@ export const Container = styled.div`
       }
     }
   }
+  .description-limit {
+    font-size: 12px;
+    font-family: ${FontFamily.AvenirNext};
+    color: ${GlobalColors.s4};
+    text-align: right;
+  }
 `;

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

@@ -28,7 +28,8 @@ export const Container = styled.div`
 
   &.status-AA,
   &.status-AP,
-  &.status-AC {
+  &.status-AC,
+  &.status-AF {
     background-color: ${GlobalColors.finished};
   }
 

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

@@ -15,6 +15,8 @@ export default function Select(props) {
         {props.options &&
           props.options.map((item, i) => (
             <option
+              className={item.required ? "option-required" : ""}
+              //className={ ? "option-required" : ""}
               key={"select-" + item.value ? item.value : item + "-" + i}
               value={item.value ? item.value : item}
               // selected={
@@ -23,7 +25,7 @@ export default function Select(props) {
               //     : item === props.valueSelected && "selected"
               // }
             >
-              {item.name ? item.name : item}
+              {item.name ? item.name : item} {item?.required ? "*" : ""}
             </option>
           ))}
       </SelectCustom>

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

@@ -65,8 +65,7 @@ export const SelectCustom = styled.select`
   &::-ms-expand {
     display: none;
   }
-  &:option {
-    background-color: blue;
+  option {
     &:disabled {
       color: #d4d1d7;
     }

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

@@ -30,7 +30,8 @@ export const Container = styled.div`
 
   &.status-AA,
   &.status-AP,
-  &.status-AC {
+  &.status-AC,
+  &.status-AF {
     background-color: ${GlobalColors.finished};
   }
 

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

@@ -0,0 +1,17 @@
+import { CarouselImagesLogin } 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/molecules/CarouselImagesLogin",
+  component: CarouselImagesLogin,
+};
+
+const Template = (args) => <CarouselImagesLogin {...args} />;
+
+export const CarouselImagesLoginDefault = Template.bind({});
+CarouselImagesLoginDefault.args = {
+  panelImg:[LoginImage, Login2, Login3],
+  panelText:"Elige la plataforma que conecta proovedores y retailers",
+};

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

@@ -0,0 +1,68 @@
+import { Container } from "./styles";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+import { useEffect } from "react";
+
+export const CarouselImagesLogin = ({
+  panelImg = [],
+  panelText,
+  panelColor,
+}) => {
+  const carouselStart = () => {
+    addEventListener("DOMContentLoaded", () => {
+      const images = panelImg;
+      let i = 1;
+      const img1 = document.querySelector("#img1");
+      const img2 = document.querySelector("#img2");
+      const divIndicadores = document.querySelector("#indicadores");
+      for (let index = 0; index < images.length; index++) {
+        const div = document.createElement("div");
+        div.classList.add("circles");
+        div.id = index;
+        divIndicadores.appendChild(div);
+      }
+      img1.src = images[0];
+      const circulos = document.querySelectorAll(".circles");
+      circulos[0].classList.add("resaltado");
+      const slideshow = () => {
+        img2.src = images[i];
+        const circulo_actual = Array.from(circulos).find((el) => el.id == i);
+        Array.from(circulos).forEach((cir) =>
+          cir.classList.remove("resaltado")
+        );
+        circulo_actual.classList.add("resaltado");
+        img1.classList.add("right");
+        img2.classList.add("active");
+        i++;
+        if (i == images.length) {
+          i = 0;
+        }
+        setTimeout(() => {
+          img1.src = img2.src;
+          img2.classList.remove("active");
+          img1.classList.remove("right");
+        }, 1000);
+      };
+      setInterval(slideshow, 4000);
+    });
+  };
+  useEffect(()=>{
+    carouselStart();
+  },[]) 
+
+  return (
+    <Container panelColor={panelColor}>
+      <div id="slideshow">
+        <img id="img1" />
+        <img id="img2" />
+      </div>
+      <ScreenHeader
+        fontFamily={FontFamily.Raleway}
+        color={GlobalColors.white}
+        headerType={"product-name-header"}
+        text={panelText}
+      />
+      <div id="indicadores"></div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,60 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  background: ${({ panelColor }) =>
+    panelColor
+      ? panelColor
+      : "linear-gradient(180deg,#ffffff 0%,rgba(255, 255, 255, 0.887706) 49.27%,rgba(255, 255, 255, 0) 100%),#d43594"};
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  #slideshow {
+    position: relative;
+    height: 65%;
+    img {
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      top: 8%;
+      left: 0;
+    }
+    #img2 {
+      left: 100%;
+    }
+    .right {
+      transform: translate(-100%, 0);
+      transition: all 1s;
+    }
+    .active {
+      left: 0 !important;
+      transition: all 1s;
+    }
+  }
+  .product-name-header {
+    position: absolute;
+    bottom: 16%;
+    right: 50%;
+    transform: translateX(50%);
+  }
+  #indicadores {
+    width: 100%;
+    text-align: center;
+    position: absolute;
+    bottom: 7%;
+    .circles {
+      background-color: white;
+      border: white 2px solid;
+      width: 20px;
+      height: 20px;
+      display: inline-block;
+      margin: 0 5px;
+      border-radius: 50%;
+      &.resaltado {
+      background-color: rgba(255, 255, 255, 0);
+      transition: background-color 0.8s;
+    }
+    }
+  }
+`;

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

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

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

@@ -0,0 +1,89 @@
+import { Container, ItemPasswordStrength, Password } from "./styles";
+import { useEffect, useState } from "react";
+import { TagAndInput } from "../TagAndInput";
+export const LoginPasswordStrength = ({
+  emptyPassword,
+  emptyConfirmPassword,
+  matchPasswords,
+}) => {
+  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(
+      "input",
+      (e) => {
+        updateInfo(e, e.target.value);
+      },
+      false
+    );
+  }, []);
+  const updateInfo = (e, newValue) => {
+    switch (e.target.id) {
+      case "newPasswordInput":
+        setPasswordStrength(0);
+        if (newValue.length >= 8) {
+          setPasswordStrength((passwordStrength) => passwordStrength + 1);
+        }
+        //Verificar si la contraseña contiene mayuscula, numeros y un caracter especial
+        newValue.match(upperCaseLetters) &&
+          setPasswordStrength((passwordStrength) => passwordStrength + 1);
+        newValue.match(numbers) &&
+          setPasswordStrength((passwordStrength) => passwordStrength + 1);
+        newValue.match(specialChar) &&
+          setPasswordStrength((passwordStrength) => passwordStrength + 1);
+        break;
+      case "confirmPasswordInput":
+        break;
+      default:
+        return;
+    }
+  };
+  return (
+    <Container>
+      <div className="user" key={"3"}>
+        <TagAndInput
+          inputType={"password"}
+          inputId={"newPasswordInput"}
+          label={"Ingrese su nueva contraseña"}
+        />
+        {emptyPassword && (
+          <label>La contraseña debe ser minimo de 8 caracteres</label>
+        )}
+      </div>
+      <div className="divPasswordStrength" key={"4"}>
+        <ItemPasswordStrength paso={1}>
+          <Password level={1} passwordStrength={passwordStrength} />
+          {passwordStrength === 1 && <p>Baja</p>}
+        </ItemPasswordStrength>
+        <ItemPasswordStrength paso={2}>
+          <Password level={2} passwordStrength={passwordStrength} />
+          {passwordStrength === 2 && <p>Regular</p>}
+        </ItemPasswordStrength>
+        <ItemPasswordStrength paso={3}>
+          <Password level={3} passwordStrength={passwordStrength} />
+          {passwordStrength === 3 && <p>Segura</p>}
+        </ItemPasswordStrength>
+        <ItemPasswordStrength paso={4}>
+          <Password level={4} passwordStrength={passwordStrength} />
+          {passwordStrength === 4 && <p>Fuerte</p>}
+        </ItemPasswordStrength>
+      </div>
+      <div className="user" key={"5"}>
+        <TagAndInput
+          inputType={"password"}
+          inputId={"confirmPasswordInput"}
+          label={"Confirme la nueva contraseña"}
+        />
+        {emptyConfirmPassword && !emptyPassword && (
+          <label>Confirme la contraseña</label>
+        )}
+        {!emptyConfirmPassword && !emptyPassword && !matchPasswords && (
+          <label>La contraseña no coincide</label>
+        )}
+      </div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,87 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  width: 100%;
+  .divPasswordStrength {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 30px;
+    & + * {
+      margin-top: 40px;
+    }
+  }
+  label {
+    color: red;
+    margin-top: 3px;
+    margin-left: 15px;
+    font-family: ${FontFamily.Raleway_700};
+    font-size: 11px;
+  }
+`;
+
+export const Password = styled.div`
+  height: 8px;
+  width: 100%;
+  background-color: ${(props) => {
+    switch (props.passwordStrength) {
+      case 0:
+        return "#F0F0F0";
+      case 1:
+        if (props.level === 1) {
+          return "#E67432";
+        } else {
+          return "#F0F0F0";
+        }
+      case 2:
+        if (props.level <= 2) {
+          return "#EDD34D";
+        } else {
+          return "#F0F0F0";
+        }
+      case 3:
+        if (props.level <= 3) {
+          return "#71DE56";
+        } else {
+          return "#F0F0F0";
+        }
+      case 4:
+        if (props.level <= 4) {
+          return "#71DE56";
+        } else {
+          return "#F0F0F0";
+        }
+      default:
+        return;
+    }
+  }};
+`;
+
+export const ItemPasswordStrength = styled.div`
+  width: 24%;
+  position: relative;
+  p {
+    margin-top: 1.5%;
+    font-weight: 700;
+    display: flex;
+    justify-content: flex-end;
+    font-size: 11px;
+    position: absolute;
+    right: 0;
+    top: 100%;
+    color: ${(props) => {
+      switch (props.paso) {
+        case 1:
+          return "#E67432";
+        case 2:
+          return "#EDD34D";
+        case 3:
+          return "#71DE56";
+        case 4:
+          return "#71DE56";
+      }
+    }};
+  }
+`;

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

@@ -19,6 +19,7 @@ export const TagAndInput = ({
   dinamicHeight,
   inputCols,
   inputRows,
+  maxChar,
 }) => {
   return (
     <Container
@@ -43,6 +44,7 @@ export const TagAndInput = ({
         dinamicHeight={dinamicHeight}
         inputCols={inputCols}
         inputRows={inputRows}
+        maxChar={maxChar}
       />
     </Container>
   );

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

@@ -32,35 +32,52 @@ 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
+              }
             />
           ) : (
             <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}

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",
+};