contentoh-components-library 8.0.0 → 10.0.1

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

@@ -11,18 +11,19 @@ export const StatusAsignationInfo = ({
   status = "-",
   imagesSection,
   setImageLayout,
-  asignationsList,
   percent = 0,
-  activeTab,
-  deleteImages,
-  saveDatasheets,
-  saveDescriptions,
-  updateImages,
   assignationsImages,
+  setAssignation,
+  isRetailer,
+  downloadImages,
+  askToDeleteImages,
   id = "default-id",
+  onClickSave,
+  showSaveButton,
 }) => {
   const [showAsignationPanel, setShowAsignationPanel] = useState(false);
-  const [layout, setLayout] = useState(true);
+  const [layout, setLayout] = useState(false);
+  const [assignationType, setAssignationType] = useState("facilitator");
 
   const closeAsignations = (e) => {
     if (!e.target.closest("#default-id") && showAsignationPanel) {
@@ -39,31 +40,27 @@ export const StatusAsignationInfo = ({
 
   return (
     <Container id={id}>
-      <Button
-        buttonType={"circular-button save-button"}
-        onClick={() => {
-          switch (activeTab) {
-            case "Descripción":
-              saveDescriptions && saveDescriptions();
-              break;
-            case "Ficha técnica":
-              saveDatasheets && saveDatasheets();
-              break;
-            case "Imágenes":
-              updateImages && updateImages();
-              break;
-
-            default:
-              break;
-          }
-        }}
-      />
+      {status !== "-" && <StatusTag statusType={status} ovalForm={true} />}
+      {showSaveButton && (
+        <Button
+          buttonType={"circular-button save-button"}
+          onClick={onClickSave}
+        />
+      )}
       {imagesSection && (
         <div className="images-buttons">
+          {showSaveButton && (
+            <Button
+              buttonType={"circular-button delete-button"}
+              onClick={() => {
+                askToDeleteImages && askToDeleteImages();
+              }}
+            />
+          )}
           <Button
-            buttonType={"circular-button delete-button"}
+            buttonType={"circular-button download-button"}
             onClick={() => {
-              deleteImages && deleteImages();
+              downloadImages();
             }}
           />
           <Button
@@ -75,16 +72,16 @@ export const StatusAsignationInfo = ({
           />
         </div>
       )}
-      <StatusTag statusType={status} ovalForm={true} />
       <div className="assignations-container">
-        {assignationsImages?.map((assignation, index) => (
+        {assignationsImages?.assignations?.map((assignation, index) => (
           <Avatar
-            key={index + "-" + assignation}
+            key={index + "-" + assignation.id}
             imageType={"small-image"}
-            image={getProfilePicture(assignation, 20, 20)}
+            image={getProfilePicture(assignation.id, 20, 20)}
             altText="user profile image"
             onClick={() => {
               setShowAsignationPanel(true);
+              setAssignationType(assignation?.collaboratorType);
             }}
           />
         ))}
@@ -108,31 +105,41 @@ export const StatusAsignationInfo = ({
             </div>
           </div>
           <div className="asignations-list">
-            {asignationsList !== undefined ? (
-              asignationsList.map((asigantion, index) => (
-                <AsignationOption
-                  profileImage={asignation.image}
-                  asignationType={asignation.asignationType}
-                  name={asignation.name}
-                  team={asigantion.team}
-                />
-              ))
+            {assignationsImages?.collaborators !== undefined ? (
+              assignationsImages?.collaborators[assignationType]?.map(
+                (asignation, index) => (
+                  <AsignationOption
+                    key={index + "-" + asignation.name}
+                    profileImage={getProfilePicture(
+                      asignation?.id_user,
+                      40,
+                      40
+                    )}
+                    onClick={() => {
+                      setAssignation(assignationType, asignation?.id_user);
+                    }}
+                    name={asignation.name}
+                  />
+                )
+              )
             ) : (
               <p className="no-asignations">Sin personas para asignar</p>
             )}
           </div>
-          <div className="default-asignations-list">
-            <AsignationOption
-              asignationType={"provider"}
-              name={"Solicitar a"}
-              team={"Proveedor"}
-            />
-            <AsignationOption
-              asignationType={"team"}
-              name={"Solicitar a"}
-              team={"Content-oh!"}
-            />
-          </div>
+          {isRetailer === 1 && (
+            <div className="default-asignations-list">
+              <AsignationOption
+                asignationType={"provider"}
+                name={"Solicitar a"}
+                team={"Proveedor"}
+              />
+              <AsignationOption
+                asignationType={"team"}
+                name={"Solicitar a"}
+                team={"Content-oh!"}
+              />
+            </div>
+          )}
         </div>
       )}
     </Container>

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

@@ -18,6 +18,7 @@ export const Container = styled.div`
 
   .assignations-container {
     display: flex;
+    cursor: pointer;
   }
 
   .asignation-panel {
@@ -26,10 +27,11 @@ export const Container = styled.div`
     box-sizing: border-box;
     box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
     border-radius: 4px;
-    padding: 10px;
+    padding: 10px 8px;
     position: absolute;
     top: calc(100% + 10px);
     right: 0;
+    z-index: 10;
 
     .asignation-header {
       display: flex;
@@ -57,7 +59,6 @@ export const Container = styled.div`
 
     .asignations-list {
       min-height: 40px;
-      border-bottom: 1px solid ${GlobalColors.s3};
 
       .no-asignations {
         padding: 5px;
@@ -70,7 +71,12 @@ export const Container = styled.div`
 
       & + * {
         margin-top: 10px;
+        border-top: 1px solid ${GlobalColors.s3};
       }
     }
+
+    .default-asignations-list {
+      padding-top: 10px;
+    }
   }
 `;

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

@@ -3,17 +3,29 @@ import { ScreenHeader } from "../../atoms/ScreenHeader";
 import { StatusAsignationInfo } from "../StatusAsignationInfo";
 import { GlobalColors } from "../../../global-files/variables";
 
-export const TableHeader = ({ imagesStatus, activeImage, assignationsImages }) => {
+export const TableHeader = ({
+  imagesStatus,
+  activeImage,
+  assignationsImages,
+  setAssignation,
+  isRetailer,
+  onClickSave,
+  showSaveButton,
+}) => {
   return (
     <Container>
       <ScreenHeader
-        text={activeImage?.name}
+        text={activeImage?.name || "-"}
         color={GlobalColors.s5}
         headerType={"input-name-header"}
       />
       <StatusAsignationInfo
         status={imagesStatus}
         assignationsImages={assignationsImages}
+        setAssignation={setAssignation}
+        isRetailer={isRetailer}
+        onClickSave={onClickSave}
+        showSaveButton={showSaveButton}
       />
     </Container>
   );

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 = {};