contentoh-components-library 21.0.5 → 21.0.8

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

@@ -120,16 +120,26 @@ 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("");
-  const [product, setProduct] = useState({});
+  const [product, setProduct] = useState(
+    JSON.parse(sessionStorage.getItem("productSelected"))
+      ? JSON.parse(sessionStorage.getItem("productSelected"))
+      : productSelected
+  );
   const [icon, setIcon] = useState(null);
   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 +161,14 @@ 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)
     );
@@ -179,7 +190,7 @@ export const RetailerProductEdition = ({
     }
     const selected = productSelected;
     const servicesResponse = await axios.get(
-      `${process.env.REACT_APP_SERVICES_ENDPOINT}?articleId=${selected?.article?.id_article}&orderId=${selected?.article?.id_order}&end=true`
+      `${process.env.REACT_APP_SERVICES_ENDPOINT}?articleId=${product?.article?.id_article}&orderId=${product?.article?.id_order}&end=true`
     );
     const parsedResponse = JSON.parse(servicesResponse?.data?.body).data;
     setServicesData(parsedResponse);
@@ -299,7 +310,6 @@ export const RetailerProductEdition = ({
   }, [percentages]);
 
   useEffect(() => {
-    const required = {};
     if (services.length > 0) {
       if (services[0][activeRetailer.id])
         services[0][activeRetailer.id].data = Object.values(
@@ -311,7 +321,6 @@ export const RetailerProductEdition = ({
       const descriptions = services[1]?.filter(
         (service) => service?.id === activeRetailer?.id
       );
-      setRequiredNull(required);
       setDatasheets([datagroups, inputs]);
       setDescriptions(descriptions);
     }
@@ -321,6 +330,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,
@@ -524,12 +534,14 @@ export const RetailerProductEdition = ({
     }
     concept = action ? action : concept;
     return (
-      (productSelected[`${concept}_status`] === "QF" &&
-        (user?.id_role === 1 || user?.id_role === 4 || user?.id_role === 5)) ||
-      (productSelected[`${concept}_status`] === "AF" &&
-        (user?.id_role === 1 || user?.id_role === 6)) ||
-      (productSelected[`${concept}_status`] === "RP" &&
-        (user?.id_role === 1 || user?.id_role === 6))
+      (product[`${concept}_status`] === "QF" &&
+        (user.id_role === 1 || user.id_role === 4 || user.id_role === 5)) ||
+      (product[`${concept}_status`] === "AF" && //sessionStorage productSelected
+        (user.id_role === 1 || user.id_role === 6)) ||
+      (product[`${concept}_status`] === "RP" &&
+        (user.id_role === 1 || user.id_role === 6)) ||
+      (product[`${concept}_status`] === "RC" &&
+        (user.id_role === 1 || user.id_role === 6))
     );
   };
 
@@ -551,7 +563,7 @@ export const RetailerProductEdition = ({
 
   const updateCompaniesList = (status, result, retailerId, concept) => {
     let serv = servicesData.slice();
-    let item = serv?.find(
+    let item = serv.find(
       (item) => item.id_retailer === retailerId && item.service === concept
     );
     let index = serv.indexOf(item);
@@ -625,12 +637,9 @@ export const RetailerProductEdition = ({
       case "Imágenes":
         concept = "images";
         break;
-      default:
-        break;
     }
-    let evalStatus = "";
-    let productTemp = { ...productSelected };
-    evalStatus = productSelected[`${concept}_status`];
+    let productTemp = { ...product };
+    let evalStatus = product[`${concept}_status`];
     const specialistDone =
       evalStatus === "RF" ||
       evalStatus === "RA" ||
@@ -652,30 +661,39 @@ export const RetailerProductEdition = ({
       setMessage("Evaluación enviada");
       getSectionIcon();
       productTemp[`${concept}_status`] = "AA";
+    } else if (evalStatus === "RC") {
+      setMessage("Evaluación enviada");
+      getSectionIcon();
+      productTemp[`${concept}_status`] = "AP";
     }
+
     let data = {};
     if (result) {
       updateCompaniesList(evalStatus, result, activeRetailer.id, concept);
       data = {
-        articleId: productSelected.article.id_article,
-        orderId: productSelected.orderId,
+        articleId: product.article.id_article,
+        orderId: product.orderId,
         concept: concept,
         result: result,
         evalStatus: evalStatus,
         retailerId: activeRetailer.id,
       };
-      await axios.put(`${process.env.REACT_APP_EVALUATION_ENDPOINT}`, data, {
-        headers: {
-          Authorization: token,
-        },
-      });
+      try {
+        await axios.put(`${process.env.REACT_APP_EVALUATION_ENDPOINT}`, data, {
+          headers: {
+            Authorization: token,
+          },
+        });
+      } catch (error) {
+        console.log(error);
+      }
     } else {
       if (specialistDone) {
-        updateCompaniesList(evalStatus, result, activeRetailer.id);
+        updateCompaniesList(evalStatus, result, activeRetailer.id, concept);
       }
       data = {
-        articleId: productSelected.article.id_article,
-        orderId: productSelected.orderId,
+        articleId: product.article.id_article,
+        orderId: product.orderId,
         concept: concept,
         evalStatus: evalStatus,
         retailerId: activeRetailer.id,
@@ -694,13 +712,16 @@ export const RetailerProductEdition = ({
           break;
       }
 
+      console.log(data);
+
       axios.put(`${process.env.REACT_APP_SEND_EVAL}`, data, {
         headers: {
           Authorization: token,
         },
       });
+      sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
       setProduct(productTemp);
-      setModalSent(true);
+      //setModalSent(true);
     }
   };
 
@@ -720,9 +741,21 @@ export const RetailerProductEdition = ({
     }
 
     const allowedRoles = [1, 4, 5, 6, 7, 8];
-
     const validUser = allowedRoles.indexOf(user?.id_role) !== -1;
 
+    if (!rol) {
+      switch (user.id_role) {
+        case 4:
+        case 5:
+          rol = "facilitator";
+          break;
+        case 7:
+        case 8:
+          rol = "especialist";
+          break;
+      }
+    }
+
     return (
       productSelected.article[`id_${concept}_${rol}`] === user.id_user &&
       validUser
@@ -762,7 +795,52 @@ export const RetailerProductEdition = ({
     await getComments(tab);
   };
 
-  useEffect(async () => {
+  const getRequired = (services) => {
+    const objetcTemp = {};
+    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 === undefined || !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]);
 
@@ -817,20 +895,20 @@ export const RetailerProductEdition = ({
     sessionStorage.setItem("productSelected", JSON.stringify(productTemp));
   };
 
-  const evaluationComplete = (tab) => {
+  const evaluationComplete = () => {
     let concept = "";
-    switch (tab) {
+    switch (activeTab) {
       case "Ficha técnica":
         concept = "datasheet";
         break;
       case "Imágenes":
         concept = "images";
         break;
-
-      default:
+      case "Descripción":
         concept = "description";
         break;
     }
+
     let serv = servicesData.filter((item) => item.service === concept);
     let approved = "";
     let rejected = "";
@@ -943,6 +1021,26 @@ export const RetailerProductEdition = ({
     }
   };
 
+  const specialistValid = (tab) => {
+    let concept = "";
+    switch (tab) {
+      case "Ficha técnica":
+        concept = "datasheet";
+        break;
+      case "Imágenes":
+        concept = "images";
+        break;
+      case "Descripción":
+        concept = "description";
+        break;
+    }
+    return (
+      product[`${concept}_status`] === "IN_PROGRESS" ||
+      product[`${concept}_status`] === "RF" ||
+      product[`${concept}_status`] === "RA"
+    );
+  };
+
   return (
     <Container headerTop={headerTop}>
       <HeaderTop setHeaderTop={setHeaderTop} />
@@ -977,15 +1075,38 @@ export const RetailerProductEdition = ({
             approveRejectButtons={approveRejectButtons}
             sendToFacilitator={sendToFacilitator}
             auditorAssigned={auditorAssigned}
-            userAssigned={userAssigned(activeTab, "facilitator")}
+            userAssigned={() => userAssigned(activeTab)}
           />
           <FullTabsMenu
             tabsSections={tabsSections}
-            status={{
-              Descripción: product?.description_status,
-              "Ficha técnica": product?.datasheet_status,
-              Imágenes: product?.images_status,
-            }}
+            status={
+              //   {
+              //   Descripción: product?.description_status,
+              //   "Ficha técnica": product?.datasheet_status,
+              //   Imágenes: product?.images_status,
+              // }
+              () => {
+                let concept = "";
+                switch (activeTab) {
+                  case "Ficha técnica":
+                    concept = "datasheet";
+                    break;
+                  case "Imágenes":
+                    concept = "images";
+                    break;
+                  case "Descripción":
+                    concept = "description";
+                    break;
+                }
+                let retailerService = {};
+                [retailerService] = servicesData.filter(
+                  (service) =>
+                    service.id_retailer === activeRetailer.id &&
+                    service.service === concept
+                );
+                return retailerService?.status;
+              }
+            }
             activeTab={activeTab}
             setActiveTab={setActiveTab}
             setImageLayout={setImageLayout}
@@ -1085,8 +1206,7 @@ export const RetailerProductEdition = ({
               </>
             )}
           </div>
-          {(userAssigned(activeTab, "especialist" || "facilitator") ||
-            auditorAssigned()) && (
+          {(userAssigned(activeTab) || auditorAssigned()) && (
             <div className="commentary-box">
               {!comment ? (
                 <div className="commentary">
@@ -1131,11 +1251,11 @@ export const RetailerProductEdition = ({
               )}
               <Button
                 buttonType={
-                  !requiredNull[activeTab] === 0 ||
-                  !approveRejectButtons() ||
-                  !evaluationComplete(activeTab)
-                    ? "general-button-disabled"
-                    : "general-green-button"
+                  evaluationComplete() &&
+                  requiredNull[activeTab] === 0 &&
+                  approveRejectButtons()
+                    ? "general-green-button"
+                    : "general-button-disabled"
                 }
                 label={"Enviar evaluación"}
                 onClick={() => sendToFacilitator()}
@@ -1159,9 +1279,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);
+};