contentoh-components-library 10.0.0 → 12.1.17

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

@@ -7,6 +7,14 @@ export const Container = styled.div`
   padding-bottom: 5px;
   border-bottom: 1px solid ${GlobalColors.s2};
 
+  .input-name-header {
+    overflow-x: auto;
+    max-width: 40%;
+    white-space: nowrap;
+    height: 23px;
+    line-height: 23px;
+    text-overflow: initial;
+  }
   .status-asignation-info {
     display: flex;
     align-items: center;

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

@@ -19,6 +19,12 @@ export const TagAndInput = ({
   dinamicHeight,
   inputCols,
   inputRows,
+  maxChar,
+  required,
+  optionList,
+  description,
+  inputOnChange,
+  color,
 }) => {
   return (
     <Container
@@ -26,7 +32,14 @@ export const TagAndInput = ({
       className={"input-container"}
       key={`generalTagInput-${inputType}`}
     >
-      <ScreenHeader text={label} headerType={"input-name-header"} />
+      <div className="title-container">
+        <ScreenHeader
+          text={label}
+          headerType={"input-name-header"}
+          color={color}
+        />
+        <span className="tooltip">{label}</span>
+      </div>
       <GeneralInput
         inputId={inputId}
         inputType={inputType}
@@ -43,6 +56,11 @@ export const TagAndInput = ({
         dinamicHeight={dinamicHeight}
         inputCols={inputCols}
         inputRows={inputRows}
+        maxChar={maxChar}
+        required={required}
+        optionList={optionList}
+        description={description}
+        inputOnChange={inputOnChange}
       />
     </Container>
   );

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

@@ -1,9 +1,37 @@
 import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.div`
+  .title-container {
+    position: relative;
+
+    .tooltip {
+      display: none;
+      position: absolute;
+      background-color: ${GlobalColors.white};
+      color: ${({ color }) => (color ? color : GlobalColors.s5)};
+      font-family: ${FontFamily.Raleway};
+      font-size: 14px;
+      line-height: 19px;
+      left: 0;
+      top: 0;
+      height: fit-content;
+      transition: display 2s;
+    }
+
+    &:hover {
+      .tooltip {
+        display: block;
+      }
+    }
+  }
+
   & > :first-child {
     & + * {
       margin-top: ${({ inputType }) => (inputType !== "textarea" ? 4 : 15)}px;
     }
   }
+  & + * {
+    margin-top: ${({ inputType }) => (inputType !== "textarea" ? 0 : 10)}px;
+  }
 `;

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

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

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

@@ -0,0 +1,171 @@
+import { Container } from "./styles";
+import { GradientPanel } from "../../atoms/GradientPanel";
+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 VerificationCodeResetPasswordLogin = (props) => {
+  const [resend, setResend] = useState(false);
+  const [awsError, setAwsError] = useState("");
+  const [emptyVerificationCode, setEmptyVerificationCode] = useState(false);
+  const [inputCodeVerificationAll, setInputCodeVerificationAll] = useState(
+    document.querySelectorAll("[id^='verificationCodeInput']")
+  );
+  const inputPositions = [1, 2, 3, 4, 5, 6];
+
+  useEffect(() => {
+    props.confirmationError !== "" && setEmptyVerificationCode(false);
+  }, [props.confirmationError]);
+
+  const checkCode = (e, flag) => {
+    let valid = true;
+    e.preventDefault();
+    let code = "";
+    if (awsError === "" && !flag) {
+      inputPositions.map(
+        (position) =>
+          (code =
+            code +
+            document.querySelector(`#verificationCodeInput${position}`).value)
+      );
+      if (sessionStorage.getItem("resetError")) {
+        JSON.parse(sessionStorage.getItem("confirmationCode")) === code &&
+          (valid = false);
+      }
+      sessionStorage.setItem("confirmationCode", JSON.stringify(code));
+      valid &&
+        !sessionStorage.getItem("resetPasswordProcess") &&
+        props.setPaso(6);
+      valid &&
+        sessionStorage.getItem("resetPasswordProcess") &&
+        props.setPaso(8);
+    }
+  };
+
+  const validateResend = async (e) => {
+    e.preventDefault();
+    const email = JSON.parse(sessionStorage.getItem("email"));
+    try {
+      await props.Auth.forgotPassword(email);
+      sessionStorage.setItem("email", JSON.stringify(email));
+      sessionStorage.setItem("resetPasswordProcess", JSON.stringify("true"));
+      props.setPaso(5);
+      setEmptyVerificationCode(false);
+      setResend(true);
+    } catch (err) {
+      setAwsError(err.code);
+      console.log(err.message);
+    }
+  };
+
+  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">
+      {sessionStorage.getItem("email") && (
+        <ScreenHeader
+          text={`Ingrese el código de verificación enviado a: ${JSON.parse(
+            sessionStorage.getItem("email")
+          )}`}
+          headerType={"input-name-header"}
+        />
+      )}
+      {!sessionStorage.getItem("email") && (
+        <ScreenHeader
+          text={`Ingrese código de verificación enviado a: ${
+            JSON.parse(sessionStorage.getItem("nuevoRegistro")).email
+          }`}
+          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}
+            maxChar={1}
+          />
+        ))}
+      </div>
+      {emptyVerificationCode && (
+        <label>Ingrese su código de verificación</label>
+      )}
+      {sessionStorage.getItem("resetError") && (
+        <label>Código de verifiación incorrecto</label>
+      )}
+      {props.confirmationError === "LimitExceededException" &&
+        !emptyVerificationCode && (
+          <label>Haz realizado demasiados intentos, intentalo más tarde</label>
+        )}
+      {props.confirmationError === "CodeMismatchException" &&
+        !emptyVerificationCode && (
+          <label>Código de verificación incorrecto</label>
+        )}
+      {props.confirmationError === "ExpiredCodeException" &&
+        !emptyVerificationCode && (
+          <label>El código ingresado está expirado</label>
+        )}
+      {props.confirmationError === "InternalErrorException" &&
+        !emptyVerificationCode && (
+          <label>Algo salió mal, porfavor vuelva a intentarlo</label>
+        )}
+      {awsError === "LimitExceededException" && (
+        <label>Haz realizado demasiados intentos, intentalo más tarde</label>
+      )}
+      {awsError === "InternalErrorException" && (
+        <label>Algo salió mal, porfavor vuelva a intentarlo</label>
+      )}
+      {resend && awsError === "" && (
+        <label className="resendTrue">
+          Se reenvió el código de verificación correctamente
+        </label>
+      )}
+    </div>,
+    <div className="resend-code" key="4">
+      <p onClick={(e) => validateResend(e)}>Reenviar código de verificación</p>
+    </div>,
+    <div className="button-center" key="5">
+      <Button
+        buttonType={"general-default-button"}
+        label={"Enviar"}
+        onClick={(e) => {
+          let flag = validate(inputCodeVerificationAll);
+          checkCode(e, flag);
+          setEmptyVerificationCode(flag);
+        }}
+      />
+    </div>,
+    <div className="reset-password" key="6">
+      <p onClick={() => props.setPaso(10)}>Regresar...</p>
+    </div>,
+  ];
+  return (
+    <Container>
+      <GradientPanel
+        componentsArray={loginRight}
+        panelType={"home-login"}
+        panelColor={GlobalColors.white}
+      />
+    </Container>
+  );
+};

package/src/components/molecules/VerificationCodeResetPasswordLogin/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;
+  height: 100vh;
+  width: 50%;
+  align-items: center;
+  justify-content: center;
+  .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;
+    }
+  }
+  .resendTrue{
+    color: ${GlobalColors.exported};
+  }
+`;

package/src/components/molecules/VerificationCodeResetPasswordLogin/utils.js

@@ -0,0 +1,54 @@
+/**
+ *
+ * @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) => {
+  let contInputEmpty = 0;
+  inputsArray.forEach((element) => {
+    element.value === "" ? 0 : contInputEmpty++;
+  });
+  return contInputEmpty !== inputsArray.length  
+};

package/src/components/organisms/ChangePassword/ChangePassword.stories.js

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

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

@@ -0,0 +1,77 @@
+import { Container } from "./styles";
+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 ChangePassword = (props) => {
+  const [emptyPassword, setEmptyPassword] = useState(false);
+  const [emptyConfirmPassword, setEmptyConfirmPassword] = useState(false);
+  const [matchPasswords, setMatchPasswords] = useState(true);
+
+  const validate = async (e) => {
+    e.preventDefault();
+    let password = document.querySelector("#newPasswordInput").value;
+    password.length < 8 ? setEmptyPassword(true) : setEmptyPassword(false);
+    let confirmPassword = document.querySelector("#confirmPasswordInput").value;
+    confirmPassword === ""
+      ? setEmptyConfirmPassword(true)
+      : setEmptyConfirmPassword(false);
+    if (password === confirmPassword) {
+      setMatchPasswords(true);
+    } else {
+      setMatchPasswords(false);
+    }
+    let valid = true;
+    if (
+      password.length < 8 ||
+      confirmPassword === "" ||
+      password !== confirmPassword
+    ) {
+      valid = false;
+    }
+    if (valid) {
+      sessionStorage.setItem("newPassword", JSON.stringify(password));
+      !sessionStorage.getItem("resetPasswordProcess")
+        ? props.setPaso(9)
+         : props.setPaso(11); 
+    }
+  };
+
+  const loginRight = [
+    <LogoImage key="1" />,
+    <div className="credenciales" key={"2"}>
+      <ScreenHeader
+        fontFamily={FontFamily.AvenirNext}
+        color={GlobalColors.s5}
+        text={"Ingresa tus credenciales"}
+      />
+    </div>,
+    <LoginPasswordStrength
+      emptyPassword={emptyPassword}
+      emptyConfirmPassword={emptyConfirmPassword}
+      matchPasswords={matchPasswords}
+      textTittle={"Ingresa tus credenciales"}
+      key="3"
+    />,
+    <div className="button-center" key="4">
+      <Button
+        buttonType={"general-default-button"}
+        label={"Enviar"}
+        onClick={(e) => validate(e)}
+      />
+    </div>,
+  ];
+  return (
+    <Container>
+      <GradientPanel
+        panelColor={GlobalColors.white}
+        componentsArray={loginRight}
+        panelType={"home-login"}
+      ></GradientPanel>
+    </Container>
+  );
+};

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

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  width: 50%;
+  height: 100vh;
+  .button-center {
+    display: flex;
+    justify-content: center;
+    .general-default-button {
+      width: 160px;
+    }
+  }
+`;

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

@@ -2,44 +2,75 @@ import { Container } from "./styles";
 import { ProductNameHeader } from "../../molecules/ProductNameHeader";
 import { FeaturesBar } from "../../molecules/FeaturesBar";
 import { AvatarAndValidation } from "../../molecules/AvatarAndValidation";
+import { useState } from "react";
+import { useEffect } from "react";
 
 export const FullProductNameHeader = ({
   headerData,
   percent,
   activeRetailer,
   setActiveRetailer,
-  approveRejectButtons,
-  sendToFacilitator,
-  auditorAssigned,
-  userAssigned,
+  showValidationButtons,
+  approve,
+  reject,
+  servicesData,
 }) => {
+  const [retailers, setRetailers] = useState([]);
+  useEffect(() => {
+    const rtls = headerData?.retailers || headerData?.retailersAvailable;
+    servicesData &&
+      rtls.forEach((rt) => {
+        const element = [];
+        servicesData.forEach((sd) => {
+          if (sd.id_retailer === rt.id) {
+            element.push(sd.status ? sd.status : "RECEIVED");
+          } else element.push("NA");
+          rt["services"] = element;
+        });
+      });
+    setRetailers(rtls);
+  }, [servicesData]);
   return (
     <Container>
       <ProductNameHeader
-        productName={headerData?.article?.name}
-        statusType={headerData?.status}
-        percent={percent}
+        productName={headerData?.article?.name || headerData?.name}
+        statusType={
+          headerData?.version_status ||
+          headerData?.status ||
+          headerData?.article_status
+        }
+        percent={percent?.toFixed(0)}
         priority={headerData?.prio}
-        date={new Date(headerData?.article?.timestamp).toLocaleDateString()}
+        date={new Date(
+          headerData?.article?.timestamp || headerData?.timestamp
+        ).toLocaleDateString()}
       />
       <div className="features-bar-container">
         <FeaturesBar
           features={[
-            { feature: "Categoría", value: headerData?.article?.category },
-            { feature: "Prov", value: headerData?.article?.company_name },
-            { feature: "UPC", value: headerData?.article?.upc },
+            {
+              feature: "Categoría",
+              value: headerData?.article?.category || headerData?.categoryName,
+            },
+            {
+              feature: "Prov",
+              value: headerData?.article?.company_name,
+            },
+            {
+              feature: "UPC",
+              value: headerData?.article?.upc || headerData?.upc,
+            },
           ]}
         />
         <AvatarAndValidation
-          retailers={headerData?.retailers}
+          retailers={retailers}
           avatarData={headerData?.avatarData}
           validation={headerData?.validation}
           activeRetailer={activeRetailer}
           setActiveRetailer={setActiveRetailer}
-          approveRejectButtons={approveRejectButtons}
-          sendToFacilitator={sendToFacilitator}
-          auditorAssigned={auditorAssigned}
-          userAssigned={userAssigned}
+          showValidationButtons={showValidationButtons}
+          approve={approve}
+          reject={reject}
         />
       </div>
     </Container>

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

@@ -6,17 +6,18 @@ import { useState } from "react";
 export const FullTabsMenu = ({
   tabsSections,
   status = "",
-  profileImage,
   activeTab,
   setActiveTab,
   setImageLayout,
-  saveDatasheets,
-  saveDescriptions,
-  updateImages,
-  assignations,
+  assig,
+  setAssignation,
+  isRetailer,
+  downloadImages,
+  askToDeleteImages,
+  onClickSave,
+  showSaveButton,
 }) => {
   const [imagesSection, setImagesSection] = useState(false);
-  //console.log(status);
 
   return (
     <Container>
@@ -26,15 +27,17 @@ export const FullTabsMenu = ({
         setActiveTab={setActiveTab}
       />
       <StatusAsignationInfo
-        status={status[activeTab]}
+        status={status}
         activeTab={activeTab}
-        image={profileImage}
         setImageLayout={setImageLayout}
         imagesSection={imagesSection}
-        saveDatasheets={saveDatasheets}
-        saveDescriptions={saveDescriptions}
-        updateImages={updateImages}
-        assignationsImages={assignations[activeTab]}
+        assignationsImages={assig}
+        setAssignation={setAssignation}
+        isRetailer={isRetailer}
+        downloadImages={downloadImages}
+        onClickSave={onClickSave}
+        askToDeleteImages={askToDeleteImages}
+        showSaveButton={showSaveButton}
       />
     </Container>
   );