contentoh-components-library 21.0.3 → 21.0.6

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

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

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

@@ -0,0 +1,106 @@
+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 RegistrationLoginThirdStep = ({
+  imageArrayCarousel = [],
+  textCarousel,
+  backogroundColorCarousel,
+}) => {
+  const [emptyCommercialName, setEmptyCommercialName] = useState(false);
+  const [emptyBussinesName, setEmptyBussinesName] = useState(false);
+  const [emptyRFC, setEmptyRFC] = useState(false);
+  const [emptyFiscalAddress, setEmptyFiscalAddress] = useState(false);
+  const validate = async (e) => {
+    e.preventDefault();
+    const commercialName = document.querySelector("#commercialNameInput").value;
+    const bussinesName = document.querySelector("#bussinesNameInput").value;
+    const RFC = document.querySelector("#rfcInput").value;
+    const FiscalAddress = document.querySelector("#fiscalAddressInput").value;
+    commercialName === "" ? setEmptyCommercialName(true) : setEmptyCommercialName(false);
+    bussinesName === "" ? setEmptyBussinesName(true) : setEmptyBussinesName(false);
+    RFC === "" ? setEmptyRFC(true) : setEmptyRFC(false);
+    FiscalAddress === "" ? setEmptyFiscalAddress(true) : setEmptyFiscalAddress(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={"commercialNameInput"}
+          label={"Nombre comercial"}
+          inputPlaceHolder={"Nombre comercial"}
+        />
+        {emptyCommercialName && <label>Ingrese el nombre comercial de la empresa</label>}
+      <TagAndInput
+        inputType={"text"}
+        inputId={"bussinesNameInput"}
+        label={"Razón social"}
+        inputPlaceHolder={"Razón social"}
+      />
+      {emptyBussinesName && <label>Ingrese la razón social de la empresa</label>}
+      <TagAndInput
+        inputType={"text"}
+        inputId={"rfcInput"}
+        label={"RFC"}
+        inputPlaceHolder={"RFC"}
+      />
+      {emptyRFC && <label>El RFC es requerido</label>}
+      <TagAndInput
+        inputType={"text"}
+        inputId={"fiscalAddressInput"}
+        label={"Direccion fiscal"}
+        inputPlaceHolder={"Dirección fiscal"}
+      />
+      {emptyFiscalAddress && <label>Ingrese la direccion fiscal de la empresa</label>}
+    </div>,
+    <div className="button-end" key="4">
+      <Button
+        buttonType={"general-default-button"}
+        label={"Enviar"}
+        onClick={(e) => validate(e)}
+      />
+    </div>,
+    <div className="progress-bar" key="5">
+      <div className="progress-bar-step-check"></div>
+      <div className="progress-bar-registration"></div>
+    </div>,
+    <ScreenHeader text={"Paso 3"} headerType={"date-header"} color={GlobalColors.s4} key="6"/>,
+    <div className="new-login" key="7">
+      <p className="pre-registro">
+        ¿Ya tienes una cuenta?<span> Inicia Sesión</span>
+      </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/RegistrationLoginThirdStep/styles.js

@@ -0,0 +1,48 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  .user {
+    .input-name-header {
+      margin-top: 10px;
+    }
+  }
+  .button-end {
+    text-align: end;
+    .general-default-button {
+      width: 160px;
+    }
+    & + * {
+      margin-top: 10px;
+    }
+  }
+  .home-login-retailer,
+  .home-retailer {
+    width: 50%;
+  }
+  .progress-bar {
+    width: 100%;
+    height: 8px;
+    display: flex;
+    justify-content: space-between;
+    .progress-bar-step-check {
+      width: 66.66%;
+      background-color: ${GlobalColors.exported};
+    }
+    .progress-bar-registration {
+      background-color: rgb(196, 196, 196);
+      width: 33.33%;
+    }
+  }
+  .date-header {
+    margin-left: 66.66%;
+    .new-login {
+      & + * {
+        margin-top: 20px;
+      }
+    }
+  }
+`;

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

@@ -55,12 +55,12 @@ RetailerProductEditionDefault.args = {
       images: 1,
     },
     orderId: 101,
-    status: "RP",
-    datasheet_status: "AP",
+    status: "AF",
+    datasheet_status: "AF",
     prio: "none",
     version: 2,
-    description_status: "RP",
-    images_status: "AP",
+    description_status: "AF",
+    images_status: "AF",
     article: {
       id_article: 292,
       id_category: "697",
@@ -105,17 +105,7 @@ RetailerProductEditionDefault.args = {
       },
     ],
     country: "Colombia",
-    modal: false,
-    modalCadenas: false,
-    totalCadenas: false,
-    modalAsig1: false,
-    modalFD: false,
-    modalAsig2: false,
-    modalAsig3: false,
-    modalAsig4: false,
-    modalAsig5: false,
-    modalFI: false,
-    modalQA: false,
+    upc: "7491989462",
   },
   user: {
     id_user: 30,
@@ -147,6 +137,6 @@ RetailerProductEditionDefault.args = {
       products_limit: "3",
       type: "PyMES",
     },
-    src: "https://content-management-profile.s3.amazonaws.com/id-30/30.png?1649434410216",
+    src: "https://content-management-profile.s3.amazonaws.com/id-30/30.png?1649896700986",
   },
 };

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

@@ -120,7 +120,9 @@ export const RetailerProductEdition = ({
     new Array(productSelected?.retailers?.length).fill({ percentage: 0 })
   );
   const [activePercentage, setActivePercentage] = useState(0);
-  const [activeRetailer, setActiveRetailer] = useState({});
+  const [activeRetailer, setActiveRetailer] = useState(
+    productSelected?.retailers[0]
+  );
   const [services, setServices] = useState([]);
   const [servicesData, setServicesData] = useState([]);
   const [message, setMessage] = useState("");
@@ -129,7 +131,11 @@ export const RetailerProductEdition = ({
   const [version, setVersion] = useState(productSelected?.version);
   const [comments, setComments] = useState({});
   const [comment, setComment] = useState("");
-  const [requiredNull, setRequiredNull] = useState(0);
+  const [requiredNull, setRequiredNull] = useState({
+    "Ficha técnica": 0,
+    Descripción: 0,
+    Imágenes: 0,
+  });
   const [crossComment, setCrossComment] = useState(false);
   const [userGroups, setUserGroups] = useState([]);
   const [assig, setAssig] = useState({});
@@ -151,13 +157,17 @@ export const RetailerProductEdition = ({
 
     //Converts the data inside the datasheets object to array
     setServices(services);
-    setActiveRetailer(productSelected?.retailers[0]);
+    getRequired(services);
+    //setActiveRetailer(productSelected?.retailers[0]);
     setImages({
       action: "init",
       init: services[2],
     });
     if (services[2]?.values?.length > 0) setActiveImage(0);
     setProduct(productSelected);
+    getPercentage({ data: [productSelected] }).then((res) =>
+      setPercentages(res)
+    );
     setLoading(false);
   };
 
@@ -221,9 +231,9 @@ export const RetailerProductEdition = ({
 
   useEffect(async () => {
     loadData();
-    getPercentage({ data: [productSelected] }).then((res) =>
-      setPercentages(res)
-    );
+    // getPercentage({ data: [productSelected] }).then((res) =>
+    //   setPercentages(res)
+    // );
     getServices();
     getComments();
     setUserGroups(await fetchUsers(token));
@@ -296,7 +306,6 @@ export const RetailerProductEdition = ({
   }, [percentages]);
 
   useEffect(() => {
-    const required = {};
     if (services.length > 0) {
       if (services[0][activeRetailer.id])
         services[0][activeRetailer.id].data = Object.values(
@@ -308,7 +317,6 @@ export const RetailerProductEdition = ({
       const descriptions = services[1]?.filter(
         (service) => service?.id === activeRetailer?.id
       );
-      setRequiredNull(required);
       setDatasheets([datagroups, inputs]);
       setDescriptions(descriptions);
     }
@@ -318,6 +326,7 @@ export const RetailerProductEdition = ({
     const imageInputs = images?.inputs?.map((e) => ({
       value: e?.id,
       name: e?.name,
+      required: e?.required,
     }));
     const imageType = images?.imageType?.map((e) => ({
       value: e?.id,
@@ -522,11 +531,11 @@ export const RetailerProductEdition = ({
     concept = action ? action : concept;
     return (
       (productSelected[`${concept}_status`] === "QF" &&
-        (user?.id_role === 1 || user?.id_role === 4 || user?.id_role === 5)) ||
+        (user.id_role === 1 || user.id_role === 4 || user.id_role === 5)) ||
       (productSelected[`${concept}_status`] === "AF" &&
-        (user?.id_role === 1 || user?.id_role === 6)) ||
+        (user.id_role === 1 || user.id_role === 6)) ||
       (productSelected[`${concept}_status`] === "RP" &&
-        (user?.id_role === 1 || user?.id_role === 6))
+        (user.id_role === 1 || user.id_role === 6))
     );
   };
 
@@ -626,7 +635,7 @@ export const RetailerProductEdition = ({
         break;
     }
     let evalStatus = "";
-    let productTemp = { ...productSelected };
+    let productTemp = productSelected;
     evalStatus = productSelected[`${concept}_status`];
     const specialistDone =
       evalStatus === "RF" ||
@@ -637,18 +646,22 @@ export const RetailerProductEdition = ({
       setMessage(`${activeTab} enviada a facilitador`);
       getSectionIcon();
       productTemp[`${concept}_status`] = "QF";
+      evalStatus = "QF";
     } else if (evalStatus === "QF") {
       setMessage("Evaluación enviada");
       getSectionIcon();
       productTemp[`${concept}_status`] = "AF";
+      evalStatus = "AF";
     } else if (evalStatus === "AF") {
       setMessage("Evaluación enviada");
       getSectionIcon();
       productTemp[`${concept}_status`] = "AA";
+      evalStatus = "AA";
     } else if (evalStatus === "RP") {
       setMessage("Evaluación enviada");
       getSectionIcon();
       productTemp[`${concept}_status`] = "AA";
+      evalStatus = "AA";
     }
     let data = {};
     if (result) {
@@ -697,7 +710,7 @@ export const RetailerProductEdition = ({
         },
       });
       setProduct(productTemp);
-      setModalSent(true);
+      //setModalSent(true);
     }
   };
 
@@ -759,7 +772,49 @@ export const RetailerProductEdition = ({
     await getComments(tab);
   };
 
-  useEffect(async () => {
+  const getRequired = (services) => {
+    const objetcTemp = requiredNull;
+    const datasheetServicesArray = Object.values(services[0]);
+    const dsInputs = datasheetServicesArray.pop();
+    const descriptionsServicesArray = services[1];
+
+    let dsInputsRequired = [];
+    let desInputsRequired = 0;
+    datasheetServicesArray.forEach((datasheet) =>
+      Object.values(datasheet?.data).forEach((dataGroup) =>
+        dsInputsRequired.push(
+          ...dataGroup.inputs.filter(
+            (input) => dsInputs[input].required && !dsInputs[input].value
+          )
+        )
+      )
+    );
+    objetcTemp["Ficha técnica"] = dsInputsRequired.length;
+
+    descriptionsServicesArray.forEach((description) =>
+      description.inputs.forEach(
+        (input) =>
+          input.required &&
+          (!input.value ||
+            input.value.replace(/(<\/?p>)|(<\/?strong>)|(<br>)/gm, "") ===
+              "") &&
+          desInputsRequired++
+      )
+    );
+
+    objetcTemp["Descripción"] = desInputsRequired;
+    const requiredImages = services[2]?.inputs?.filter((e) => e.required);
+    let requiredCounter = 0;
+    requiredImages.forEach(
+      (req) =>
+        services[2].values.filter((img) => img.image_id === req.id).length ===
+          0 && requiredCounter++
+    );
+    objetcTemp["Imágenes"] = requiredCounter;
+    setRequiredNull(objetcTemp);
+  };
+
+  useEffect(() => {
     setComment(comments[activeTab]);
   }, [activeTab]);
 
@@ -974,7 +1029,7 @@ export const RetailerProductEdition = ({
             approveRejectButtons={approveRejectButtons}
             sendToFacilitator={sendToFacilitator}
             auditorAssigned={auditorAssigned}
-            userAssigned={userAssigned(activeTab, "facilitator")}
+            userAssigned={() => userAssigned(activeTab, "facilitator")}
           />
           <FullTabsMenu
             tabsSections={tabsSections}
@@ -1128,8 +1183,8 @@ export const RetailerProductEdition = ({
               )}
               <Button
                 buttonType={
-                  !requiredNull[activeTab] === 0 ||
                   !approveRejectButtons() ||
+                  requiredNull[activeTab] !== 0 ||
                   !evaluationComplete(activeTab)
                     ? "general-button-disabled"
                     : "general-green-button"
@@ -1156,9 +1211,9 @@ export const RetailerProductEdition = ({
             componentsArray.length > 0
               ? componentsArray
               : [
-                  <img src={succes} alt="success icon" />,
+                  <img key="1" src={succes} alt="success icon" />,
                   <ScreenHeader
-                    key="1"
+                    key="2"
                     headerType={"retailer-name-header"}
                     text={message}
                     color={"white"}

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

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

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

@@ -0,0 +1,92 @@
+import { Container } from "./styles";
+import { GradientPanel } from "../../atoms/GradientPanel";
+import { CarouselImagesLogin } from "../../molecules/CarouselImagesLogin";
+import { useEffect, useState } from "react";
+import { LogoImage } from "../../atoms/LogoImage";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+import { GeneralInput } from "../../atoms/GeneralInput";
+import { Button } from "../../atoms/GeneralButton";
+import { validateInput, validate } from "./utils";
+
+export const VerificationCodeResetPassword = ({
+  imageArrayCarousel = [],
+  textCarousel,
+  backogroundColorCarousel,
+}) => {
+  const [emptyVerificationCode, setEmptyVerificationCode] = useState(false);
+  const [inputCodeVerificationAll, setInputCodeVerificationAll] = useState();
+  const inputPositions = [1, 2, 3, 4, 5, 6];
+
+  useEffect(() => {
+    setInputCodeVerificationAll(
+      document.querySelectorAll("[id^='verificationCodeInput']")
+    );
+  }, []);
+
+  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">
+      <ScreenHeader
+        text={"Ingresa el código de verificación enviado a:"}
+        headerType={"input-name-header"}
+      />
+      <div className="verification-code">
+        {inputPositions.map((position) => (
+          <GeneralInput
+            inputId={`verificationCodeInput${position}`}
+            inputType={"text"}
+            inputPlaceholder={"X"}
+            validateInput={validateInput}
+            inputsArray={inputCodeVerificationAll}
+            position={position}
+            maxLength="1"
+          />
+        ))}
+      </div>
+      {emptyVerificationCode && (
+        <label>Ingrese su código de verificación</label>
+      )}
+    </div>,
+    <div className="resend-code" key="4">
+      <p>Reenviar código de verificación</p>
+    </div>,
+    <div className="button-center" key="5">
+      <Button
+        buttonType={"general-default-button"}
+        label={"Enviar"}
+        onClick={(e) =>
+          validate(inputCodeVerificationAll, setEmptyVerificationCode)
+        }
+      />
+    </div>,
+    <div className="reset-password" key="6">
+      <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/VerificationCodeResetPassword/styles.js

@@ -0,0 +1,54 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  .button-center {
+    text-align: center;
+    .general-default-button {
+      width: 160px;
+    }
+  }
+  .reset-password {
+    text-align: center;
+    margin: 15px !important;
+    color: ${GlobalColors.secondary_magenta};
+    cursor: pointer;
+    font-weight: bold;
+    font-family: ${FontFamily.Raleway};
+    font-size: 13px;
+  }
+  .resend-code {
+    margin-top: 8px !important;
+    color: ${GlobalColors.magenta_s2};
+    font-family: ${FontFamily.AvenirNext};
+    font-size: 11px;
+    text-decoration: underline rgb(228, 81, 172);
+    cursor: pointer;
+    & + * {
+      margin-top: 30px;
+    }
+  }
+  .verification-code {
+    display: flex;
+    text-align: center;
+    margin: auto;
+    margin-top: 10px;
+    input[type="number"]::-webkit-inner-spin-button,
+    input[type="number"]::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+    input {
+      
+      width: 70%;
+      text-align: center;
+    }
+  }
+  .home-login-retailer,
+  .home-retailer {
+    width: 50%;
+  }
+`;

package/src/components/pages/VerificationCodeResetPassword/utils.js

@@ -0,0 +1,56 @@
+/**
+ *
+ * @param {event} e event received triggered by verification code input
+ * @param {number} index index position from the verification code(VC) input array (i.e. digit 1,2,3 etc...)
+ * @param {array<html nodes>} inputsArray array which contains every VC digit input (used to change focus on input change)
+ */
+export const validateInput = (e, index, inputsArray) => {
+  let isValid = false;
+  const inputNotEmpty = e.target.value.length > 0;
+  if (inputNotEmpty) {
+    if (validateInputNumber(e) !== null) {
+      isValid = true;
+      nextInputFocus(inputsArray, index++);
+    }
+  }
+  return isValid ? e.target.value : "";
+};
+
+/**
+ *
+ * @param {event} e event received triggered by verification code input
+ * @returns {boolean} if digit is a number
+ */
+const validateInputNumber = (e) => {
+  return (e.target.value || String.fromCharCode(e.keyCode)).match(/[0-9]{1}/);
+};
+
+/**
+ *
+ * @param {array<html nodes>} inputsArray array which contains every VC digit input (used to change focus on input change)
+ * @param {number} index index position from the verification code(VC) input array (i.e. digit 1,2,3 etc...)
+ * changes focus to next input if digit typed is a number and there wasn't any before
+ */
+const nextInputFocus = (inputsArray, index) => {
+  const button = document.getElementsByClassName("general-default-button");
+
+  inputsArray?.length && index === inputsArray?.length
+    ? button[0].focus()
+    : inputsArray[index]?.focus();
+};
+
+/**
+ *
+ * @param {array<html nodes>} inputsArray array which contains every VC digit input (used to check if there's any empty)
+ * @param {function} setEmptyVerificationCode function to update flag which handles if there's an empty char
+ * updates emptyVerificationFlag from father component
+ */
+export const validate = (inputsArray, setEmptyVerificationCode) => {
+  let contInputEmpty = 0;
+  inputsArray.forEach((element) => {
+    element.value === "" ? 0 : contInputEmpty++;
+  });
+  contInputEmpty === inputsArray.length
+    ? setEmptyVerificationCode(false)
+    : setEmptyVerificationCode(true);
+};