contentoh-components-library 21.0.63 → 21.0.64

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}
+            maxLength="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

@@ -3,43 +3,22 @@ import { ProductNameHeader } from "../../molecules/ProductNameHeader";
 import { FeaturesBar } from "../../molecules/FeaturesBar";
 import { AvatarAndValidation } from "../../molecules/AvatarAndValidation";
 
-export const FullProductNameHeader = ({
-  headerData,
-  percent,
-  activeRetailer,
-  setActiveRetailer,
-  approveRejectButtons,
-  sendToFacilitator,
-  auditorAssigned,
-  userAssigned,
-}) => {
+export const FullProductNameHeader = ({ headerData }) => {
   return (
     <Container>
       <ProductNameHeader
-        productName={headerData?.article?.name}
+        productName={headerData?.name}
         statusType={headerData?.status}
-        percent={percent?.toFixed(0)}
-        priority={headerData?.prio}
-        date={new Date(headerData?.article?.timestamp).toLocaleDateString()}
+        percent={headerData?.percent}
+        backgroundColor={headerData?.backgroundColor}
+        priority={headerData?.priority}
+        date={headerData?.date}
       />
       <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 },
-          ]}
-        />
+        <FeaturesBar features={headerData?.features} />
         <AvatarAndValidation
-          retailers={headerData?.retailers}
           avatarData={headerData?.avatarData}
           validation={headerData?.validation}
-          activeRetailer={activeRetailer}
-          setActiveRetailer={setActiveRetailer}
-          approveRejectButtons={approveRejectButtons}
-          sendToFacilitator={sendToFacilitator}
-          auditorAssigned={auditorAssigned}
-          userAssigned={userAssigned}
         />
       </div>
     </Container>

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

@@ -5,16 +5,10 @@ import { useState } from "react";
 
 export const FullTabsMenu = ({
   tabsSections,
-  status = "",
-  activeTab,
+  status,
+  profileImage,
   setActiveTab,
   setImageLayout,
-  assig,
-  setAssignation,
-  isRetailer,
-  downloadImages,
-  askToDeleteImages,
-  onClickSave,
 }) => {
   const [imagesSection, setImagesSection] = useState(false);
 
@@ -27,15 +21,9 @@ export const FullTabsMenu = ({
       />
       <StatusAsignationInfo
         status={status}
-        activeTab={activeTab}
+        image={profileImage}
         setImageLayout={setImageLayout}
         imagesSection={imagesSection}
-        assignationsImages={assig}
-        setAssignation={setAssignation}
-        isRetailer={isRetailer}
-        downloadImages={downloadImages}
-        onClickSave={onClickSave}
-        askToDeleteImages={askToDeleteImages}
       />
     </Container>
   );

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

@@ -1,102 +1,24 @@
 import { Container } from "./styles";
 import { TableHeader } from "../../molecules/TableHeader";
-import { Container as Row } from "../../molecules/TableRow/styles";
-import { ScreenHeader } from "../../atoms/ScreenHeader";
-import LabelToInput from "../../atoms/LabelToInput";
+import { TableRow } from "../../molecules/TableRow";
 
 export const ImageDataTable = ({
+  headerInfo,
+  imageData,
   activeImage,
   darkMode,
-  lists,
-  retailerSelected,
-  setImages,
-  assignationsImages,
-  imagesStatus,
-  setAssignation,
-  isRetailer,
-  onClickSave,
 }) => {
   return (
     <Container darkMode={darkMode}>
-      <TableHeader
-        imagesStatus={imagesStatus}
-        activeImage={activeImage}
-        assignationsImages={assignationsImages}
-        setAssignation={setAssignation}
-        isRetailer={isRetailer}
-        onClickSave={onClickSave}
-      />
-      <Row>
-        <ScreenHeader headerType={"table-row-text"} text="Tipo de toma" />
-        <ScreenHeader
-          headerType={"table-row-text gray-table-row"}
-          text={
-            lists?.inputs?.find((f) => f.id === +activeImage?.image_id)?.name ||
-            "-"
-          }
+      <TableHeader headerInfo={headerInfo} activeImage={activeImage} />
+      {imageData?.map((attribute, index) => (
+        <TableRow
+          key={index}
+          feature={attribute.feature}
+          value={attribute.value}
+          valueType={index < 2}
         />
-      </Row>
-      <Row>
-        <ScreenHeader headerType={"table-row-text"} text="Tipo de empaque" />
-        <ScreenHeader
-          headerType={"table-row-text gray-table-row"}
-          text={
-            lists?.imagePackagingType?.find(
-              (f) => f.id === +activeImage?.packing_type
-            )?.name || "-"
-          }
-        />
-      </Row>
-      <Row>
-        <ScreenHeader headerType={"table-row-text"} text="Tipo de imagen" />
-        <ScreenHeader
-          headerType={"table-row-text gray-table-row"}
-          text={
-            lists?.imageType?.find((f) => f.id === +activeImage?.image_type)
-              ?.name || "-"
-          }
-        />
-      </Row>
-      <Row>
-        <ScreenHeader headerType={"table-row-text"} text="Formato" />
-        <ScreenHeader
-          headerType={"table-row-text"}
-          text={activeImage?.ext || "-"}
-        />
-      </Row>
-      <Row>
-        <ScreenHeader headerType={"table-row-text"} text="Tamaño de imagen" />
-        <ScreenHeader
-          headerType={"table-row-text"}
-          text={
-            activeImage?.width && activeImage.height
-              ? `${activeImage?.width}x${activeImage?.height}px`
-              : "-"
-          }
-        />
-      </Row>
-      {retailerSelected &&
-        lists?.attrForImgs &&
-        lists?.attrForImgs[retailerSelected]?.map((attr, index) => (
-          <Row key={"row-" + index}>
-            <ScreenHeader
-              headerType={"table-row-text"}
-              text={attr?.name || "-"}
-            />
-            <LabelToInput
-              width="100px"
-              defaultValue={attr?.value}
-              onChange={(e) => {
-                setImages({
-                  action: "changeAttrValue",
-                  retailer: retailerSelected,
-                  index,
-                  value: e.target.value || "-",
-                });
-              }}
-            />
-          </Row>
-        ))}
+      ))}
     </Container>
   );
 };

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

@@ -6,13 +6,6 @@ export const InputGroup = ({
   inputGroup = {},
   activeSection,
   dataInputs = {},
-  updatedDescriptions,
-  setUpdatedDescriptions,
-  updatedDatasheets,
-  setUpdatedDatasheets,
-  articleId,
-  version,
-  dinamicHeight,
 }) => {
   const inputTypeValue = (type) => {
     switch (type) {
@@ -24,6 +17,7 @@ export const InputGroup = ({
         return "text";
     }
   };
+
   return (
     <Container
       className={
@@ -32,58 +26,29 @@ export const InputGroup = ({
           : "descriptions-layout"
       }
     >
-      {inputGroup?.dataGroup && (
-        <ScreenHeader
-          headerType={"retailer-name-header"}
-          text={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 +
-                "-" +
-                dataInputs[input]?.id
-              }
-              inputId={dataInputs[input]?.id}
-              version={version}
+              key={index}
+              inputId={"datasheet-" + dataInputs[input]?.id + "-" + index}
               inputType={inputTypeValue(dataInputs[input]?.type)}
-              label={
-                dataInputs[input]?.name +
-                (dataInputs[input]?.required ? "*" : "")
-              }
+              label={dataInputs[input]?.name}
               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}
-              index={index}
+              key={index}
+              inputId={"description-" + input?.id + "-" + index}
               inputType={"textarea"}
-              label={input?.name + (input.required ? "*" : "")}
+              label={input?.name}
               value={input?.value}
-              isRequired={input.required}
-              maxChar={input.max_chars}
               inputPlaceHolder={input?.placeholder}
-              updatedDescriptions={updatedDescriptions}
-              setUpdatedDescriptions={setUpdatedDescriptions}
-              articleId={articleId}
-              version={version}
-              dinamicHeight={dinamicHeight}
             />
           )
         )}

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

@@ -23,9 +23,6 @@ export const Container = styled.div`
         flex: 1 1 20%;
         margin-right: 10px;
         min-width: 227px;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
       }
     }
   }