contentoh-components-library 12.0.0 → 12.1.17

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,16 +6,16 @@ import { useState } from "react";
 export const FullTabsMenu = ({
   tabsSections,
   status = "",
-  profileImage,
   activeTab,
   setActiveTab,
   setImageLayout,
-  saveDatasheets,
-  saveDescriptions,
-  updateImages,
   assig,
   setAssignation,
   isRetailer,
+  downloadImages,
+  askToDeleteImages,
+  onClickSave,
+  showSaveButton,
 }) => {
   const [imagesSection, setImagesSection] = useState(false);
 
@@ -27,17 +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={assig}
         setAssignation={setAssignation}
         isRetailer={isRetailer}
+        downloadImages={downloadImages}
+        onClickSave={onClickSave}
+        askToDeleteImages={askToDeleteImages}
+        showSaveButton={showSaveButton}
       />
     </Container>
   );

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

@@ -0,0 +1,68 @@
+import React from "react";
+import ReactImageFallback from "react-image-fallback";
+import {
+  MainContainer,
+  MessageContainer,
+  Header,
+  Icon,
+  Close,
+  Message,
+  ContainerButtons,
+  FirstButton,
+  Button,
+  Detail,
+  TextArea,
+  BoldText,
+} from "./styles";
+
+import yellowAlert from "../../../assets/images/genericModal/yellowAlert.svg";
+import closeWhite from "../../../assets/images/genericModal/closeWhite.svg";
+
+/*
+props (* required):
+  - *close: function to quit pop up e.g close={() => setShow(!show)}
+  - button1/button2: name and action button e.g. button1={{ name: 'Cancelar', action: () => console.log('Cancelar') }}
+  - img: source image
+  - *message: message to show (like title)
+  - detail: message detail
+  - withoutImg: if the value is "true" the icon will not be displayed, if this attribute is ignored or has the value of "false" the icon will be displayed
+  - customComponent: contains a custom component
+*/
+export const GlobalModal = (props) => {
+  return (
+    <MainContainer>
+      <MessageContainer height={props.button1 || props.button2}>
+        <Header>
+          <Icon widthImg={props.widthImg} heightImg={props.heightImg}>
+            {!props.withoutImg && (
+              <ReactImageFallback
+                src={props.img}
+                fallbackImage={yellowAlert}
+                alt=""
+              />
+            )}
+          </Icon>
+          <Close onClick={props.close}>
+            <img src={closeWhite} alt="Cerrar" />
+          </Close>
+        </Header>
+        <Message>
+          {props.bold && <BoldText>{props.bold}</BoldText>} {props.message}
+        </Message>
+        {props.detail && <Detail>{`${props.detail} `}</Detail>}
+        {props.textArea && <TextArea id="area" />}
+        {props.customComponent && props.customComponent}
+        <ContainerButtons>
+          {props.button1 && (
+            <FirstButton onClick={props.button1.action}>
+              {props.button1.name}
+            </FirstButton>
+          )}
+          {props.button2 && (
+            <Button onClick={props.button2.action}>{props.button2.name}</Button>
+          )}
+        </ContainerButtons>
+      </MessageContainer>
+    </MainContainer>
+  );
+};