contentoh-components-library 19.0.0 → 20.0.18

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

@@ -4,8 +4,6 @@ export const Container = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
-  flex: 1;
-  overflow: auto;
 
   .data-container {
     display: flex;
@@ -25,76 +23,15 @@ export const Container = styled.div`
       flex-direction: column;
 
       .services-information-container {
-        height: 100%;
         overflow: auto;
       }
 
       .image-services {
-        aside {
-          display: grid;
-          grid-template-columns: repeat(auto-fill, 179px);
-          column-gap: 15px;
-          row-gap: 15px;
-          padding: 20px;
-        }
+        display: grid;
+        grid-template-columns: repeat(auto-fill, 179px);
+        column-gap: 15px;
+        row-gap: 15px;
       }
-
-      .commentary-box {
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-end;
-        padding: 10px;
-        padding-left: 0;
-
-        .commentary {
-          display: flex;
-          align-items: flex-end;
-
-          .input-container {
-            width: 500px;
-
-            .quill {
-              height: 100px;
-            }
-
-            & + * {
-              margin-left: 5px;
-            }
-          }
-
-          .buttons-box {
-            display: flex;
-            width: 210px;
-            flex-wrap: wrap;
-
-            .general-transparent-button {
-              & + * {
-                margin-top: 5px;
-              }
-            }
-
-            .general-transparent-button,
-            .general-green-button,
-            .general-button-disabled {
-              width: fit-content;
-              min-width: 201px;
-              height: 40px;
-            }
-          }
-        }
-      }
-
-      .feedback-box {
-        display: flex;
-      }
-    }
-  }
-  .container {
-    width: 100%;
-    height: 100%;
-    .dropzone {
-      height: 100%;
-      width: 100%;
     }
   }
 `;

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);
+};

package/src/global-files/data.js

@@ -1,17 +1,17 @@
 import axios from "axios";
 import { Base64 } from "js-base64";
-import { v4 as uuidv4 } from "uuid";
+import defaultUpdate from "../assets/images/defaultImages/defaultUpdate.png";
 
-export const getRetailerServices = async (articleId, category, version) => {
+export const getRetailerServices = async () => {
   const responseArray = await Promise.all([
     axios.post(
-      `${process.env.REACT_APP_ARTICLE_DATA_DATASHEET_ENDPOINT}?idCategory=${category}&articleId=${articleId}&version=${version}`
+      `${process.env.REACT_APP_ARTICLE_DATA_DATASHEET_ENDPOINT}?idCategory=846&articleId=238&version=2`
     ),
     axios.get(
-      `${process.env.REACT_APP_ARTICLE_DATA_DESCRIPTION_ENDPOINT}?idCategory=${category}&articleId=${articleId}&version=${version}`
+      `${process.env.REACT_APP_ARTICLE_DATA_DESCRIPTION_ENDPOINT}?idCategory=846&articleId=238&version=2`
     ),
     axios.post(
-      `${process.env.REACT_APP_ARTICLE_DATA_IMAGES_ENDPOINT}?idCategory=${category}&articleId=${articleId}&version=${version}`
+      `${process.env.REACT_APP_ARTICLE_DATA_IMAGES_ENDPOINT}?idCategory=846&articleId=238&version=2`
     ),
   ]);
 
@@ -19,22 +19,49 @@ export const getRetailerServices = async (articleId, category, version) => {
   const descriptions = JSON.parse(responseArray[1].data.body).data;
   const images = JSON.parse(responseArray[2].data.body).data;
 
-  images.values = images?.values?.map((value) => {
-    value.name = images.inputs.find((e) => e.id === value.image_id).name;
-    return getImage(value);
+  const code = images?.attrForImgs?.general[0]?.value;
+
+  images?.values.map((value) => {
+    value.imageName = images.inputs.filter(
+      (e) => e.id === value.image_id
+    )[0].name;
+    value.data = [
+      {
+        feature: "Tipo de empaque",
+        value: images?.imagePackagingType[value?.packing_type - 1].name,
+      },
+      {
+        feature: "Tipo de imagen",
+        value: images?.imageType.filter((e) => value.image_type == e.id)[0]
+          .name,
+      },
+      { feature: "Código de Fabricante", value: code },
+      { feature: "Formato", value: value.src.split(".")[1] },
+      { feature: "Tamaño de imagen", value: `${value.width}x${value.height}` },
+      { feature: "Subfijo de imagen", value: "" },
+    ];
+    return value;
   });
 
   return [datasheets, descriptions, images];
 };
 
-export const getImage = (imageGeneral, width = 250, height = 250) => {
+export const getImage = (imageGeneral, width, height) => {
   try {
     const image = imageGeneral;
     const ext = image.src.split(".");
     const uuid = ext[0].split("-");
     return {
-      ...image,
+      id: image.id,
+      image_id: image.image_id,
+      packing_type: +image.packing_type,
+      image_type: +image.image_type,
+      name: image.name,
+      imageName: image.imageName,
+      data: image.data,
       version: image.id_version,
+      width: image.width,
+      height: image.height,
       ext: ext[ext.length - 1],
       uuid:
         uuid.reduce((prevVal, currVal, idx) => {
@@ -42,138 +69,30 @@ export const getImage = (imageGeneral, width = 250, height = 250) => {
           else return idx === 2 ? currVal : prevVal + "-" + currVal;
         }, "") || uuidv4(),
       srcDB: image.src,
-      src: image.image_id
-        ? "https://d24s337exbt5zr.cloudfront.net/" +
-          Base64.encode(
-            JSON.stringify({
-              bucket: process.env.REACT_APP_IMAGES_BUCKET,
-              key: image.src,
-              edits: {
-                resize: {
-                  width: width * 4,
-                  height: height * 4,
-                  fit: "contain",
-                  background: {
-                    r: 255,
-                    g: 255,
-                    b: 255,
-                    alpha: 1,
-                  },
+      src:
+        "https://d24s337exbt5zr.cloudfront.net/" +
+        Base64.encode(
+          JSON.stringify({
+            bucket: process.env.REACT_APP_IMAGES_BUCKET,
+            key: image.src,
+            edits: {
+              resize: {
+                width: width * 4,
+                height: height * 4,
+                fit: "contain",
+                background: {
+                  r: 255,
+                  g: 255,
+                  b: 255,
+                  alpha: 1,
                 },
               },
-            })
-          )
-        : image.src,
-    };
-  } catch (err) {
-    console.log("err", err);
-    return (imageGeneral["error"] = err);
-  }
-};
-
-export const getPercentage = async (params = {}) => {
-  const func = async () => {
-    const dataToSend = [];
-    params.data.forEach((product) => {
-      params.data[0].retailers.forEach((retailer) => {
-        dataToSend.push(
-          product.article
-            ? {
-                id_article: product.article.id_article,
-                id_category: product.article.id_category,
-                id_retailer: retailer.id,
-                version: product.version,
-                upc: product.article.upc,
-                name: product.article.name,
-                retailerName: retailer.name,
-              }
-            : {
-                id_article: product.product.id_article,
-                id_category: product.product.id_category,
-                id_retailer: retailer.id,
-                version: product.product.version,
-                upc: product.product.upc,
-                name: product.product.name,
-                retailerName: retailer.name,
-              }
-        );
-      });
-    });
-
-    return await axios
-      .post(
-        process.env.REACT_APP_VALID_EXPORT_ENDPOINT,
-        { data: dataToSend },
-        {
-          headers: {
-            Authorization: sessionStorage.getItem("jwt"),
-          },
-        }
-      )
-      .then((response) => {
-        return response.data;
-      })
-      .catch((err) => console.log(err, "Errror"));
-  };
-
-  return await func();
-};
-
-export const getProfilePicture = (userId, width, height) => {
-  try {
-    return (
-      "https://d24s337exbt5zr.cloudfront.net/" +
-      Base64.encode(
-        JSON.stringify({
-          bucket: process.env.REACT_APP_IMAGES_PROFILE_BUCKET,
-          key: `id-${userId}/${userId}.png`,
-          edits: {
-            resize: {
-              width: width,
-              height: height,
-              fit: "contain",
-              background: {
-                r: 255,
-                g: 255,
-                b: 255,
-                alpha: 0,
-              },
             },
-          },
-        })
-      )
-    );
+          })
+        ),
+    };
   } catch (err) {
     console.log("err", err);
-    return defaultUpdate;
+    return { src: defaultUpdate };
   }
 };
-
-export const fetchUsers = async (auth) => {
-  const usersPromises = [];
-  let usersGroups = [];
-  const header = {
-    headers: {
-      Authorization: auth,
-    },
-  };
-  /**
-   * 7 will fetch all text specialists
-   * 8 will fetch all img specialists
-   * 4 will fetch all text facilitators
-   * 5 will fetch all img facilitators
-   * 6 will fetch all auditors
-   */
-  usersPromises.push(
-    axios.get(`${process.env.REACT_APP_USER_ENDPOINT}?fetchRole=7`, header),
-    axios.get(`${process.env.REACT_APP_USER_ENDPOINT}?fetchRole=8`, header),
-    axios.get(`${process.env.REACT_APP_USER_ENDPOINT}?fetchRole=4`, header),
-    axios.get(`${process.env.REACT_APP_USER_ENDPOINT}?fetchRole=5`, header),
-    axios.get(`${process.env.REACT_APP_USER_ENDPOINT}?fetchRole=6`, header)
-  );
-  const usersResponse = await Promise.all(usersPromises);
-  usersResponse.forEach((item, i) => {
-    usersGroups.push(item.data.data);
-  });
-  return usersGroups;
-};

package/src/global-files/global-styles.css

@@ -11,7 +11,6 @@
 body.sb-main-padded.sb-show-main {
   padding: 0;
   height: 100vh;
-  overflow: hidden;
 }
 
 .sb-main-padded.sb-show-main #root {

package/src/global-files/variables.js

@@ -6,7 +6,6 @@ export const GlobalColors = {
   s5: "#503D66",
   original_magenta: "#B12D84",
   secondary_magenta: "#BA0070",
-  rejected_status: "#D74DED",
   magenta_s2: "#E33AA9",
   original_purpura: "#603888",
   in_progress: "#ED9A4D",

package/src/index.js

@@ -1,3 +1,9 @@
+import * as fonts from "./global-files/fonts";
+import * as globalStyles from "./global-files/global-styles";
+import * as variables from "./global-files/variables";
+
+export { fonts, globalStyles, variables };
+
 //atoms
 export * from "./components/atoms/ActivedFilter/index";
 export * from "./components/atoms/AsignationOption/index";
@@ -22,11 +28,13 @@ export * from "./components/atoms/ValidationPanel/index";
 
 //molecules
 export * from "./components/molecules/AvatarAndValidation/index";
+export * from "./components/molecules/CarouselImagesLogin"
 export * from "./components/molecules/EditionActiveImage/index";
 export * from "./components/molecules/FeaturesBar/index";
 export * from "./components/molecules/GalleryElement/index";
 export * from "./components/molecules/HeaderTop/index";
 export * from "./components/molecules/ImageSelector/index";
+export * from "./components/molecules/LoginPasswordStrength"
 export * from "./components/molecules/PlanSelection/index";
 export * from "./components/molecules/ProductNameHeader/index";
 export * from "./components/molecules/StatusAsignationInfo/index";
@@ -34,7 +42,7 @@ export * from "./components/molecules/TableHeader/index";
 export * from "./components/molecules/TableRow/index";
 export * from "./components/molecules/TabsMenu/index";
 export * from "./components/molecules/TagAndInput/index";
-export * from "./components/molecules/TextAndGradient/index";
+//export * from "./components/molecules/TextAndGradient/index";
 
 //organisms
 export * from "./components/organisms/Fullplan/index";
@@ -47,6 +55,13 @@ export * from "./components/organisms/InputGroup/index";
 export * from "./components/organisms/ProductImageModal/index";
 
 //pages
+export * from "./components/pages/ChangePasswordLogin"
+export * from "./components/pages/CustomerLogin"
 export * from "./components/pages/CustomerType";
+export * from "./components/pages/EmailResetPassword"
 export * from "./components/pages/OnboardPlan";
+export * from "./components/pages/RegistrationLoginFirstStep"
+export * from "./components/pages/RegistrationLoginSecondStep"
+export * from "./components/pages/RegistrationLoginThirdStep"
 export * from "./components/pages/RetailerProductEdition";
+export * from "./components/pages/VerificationCodeResetPassword"

package/dist/assets/images/generalButton/downloadIcon.svg

@@ -1,3 +0,0 @@
-<svg width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.7063 7.61134C13.2246 5.16759 11.0783 3.33301 8.5 3.33301C6.45292 3.33301 4.675 4.49467 3.78958 6.19467C1.6575 6.42134 0 8.22759 0 10.4163C0 12.7609 1.90542 14.6663 4.25 14.6663H13.4583C15.4133 14.6663 17 13.0797 17 11.1247C17 9.25467 15.5479 7.73884 13.7063 7.61134ZM12.0417 9.70801L8.5 13.2497L4.95833 9.70801H7.08333V6.87467H9.91667V9.70801H12.0417Z" fill="#817393"/>
-</svg>