contentoh-components-library 12.0.0 → 12.1.17

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

@@ -4,6 +4,8 @@ export const Container = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
+  flex: 1;
+  overflow: auto;
 
   .data-container {
     display: flex;
@@ -49,6 +51,12 @@ export const Container = styled.div`
           align-items: flex-end;
 
           .input-container {
+            width: 500px;
+
+            .quill {
+              height: 100px;
+            }
+
             & + * {
               margin-left: 5px;
             }
@@ -56,7 +64,7 @@ export const Container = styled.div`
 
           .buttons-box {
             display: flex;
-            max-width: 201px;
+            width: 210px;
             flex-wrap: wrap;
 
             .general-transparent-button {
@@ -66,8 +74,10 @@ export const Container = styled.div`
             }
 
             .general-transparent-button,
-            .general-green-button {
-              width: 201px;
+            .general-green-button,
+            .general-button-disabled {
+              width: fit-content;
+              min-width: 201px;
               height: 40px;
             }
           }

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}
+            maxChar={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

@@ -74,8 +74,10 @@ export const getImage = (imageGeneral, width = 250, height = 250) => {
 export const getPercentage = async (params = {}) => {
   const func = async () => {
     const dataToSend = [];
+    let retailers =
+      params.data[0].retailers || params.data[0].retailersAvailable;
     params.data.forEach((product) => {
-      params.data[0].retailers.forEach((retailer) => {
+      retailers.forEach((retailer) => {
         dataToSend.push(
           product.article
             ? {
@@ -88,12 +90,12 @@ export const getPercentage = async (params = {}) => {
                 retailerName: retailer.name,
               }
             : {
-                id_article: product.product.id_article,
-                id_category: product.product.id_category,
+                id_article: product.id_article,
+                id_category: product.id_category,
                 id_retailer: retailer.id,
-                version: product.product.version,
-                upc: product.product.upc,
-                name: product.product.name,
+                version: product.version,
+                upc: product.upc,
+                name: product.name,
                 retailerName: retailer.name,
               }
         );
@@ -177,3 +179,22 @@ export const fetchUsers = async (auth) => {
   });
   return usersGroups;
 };
+
+export const getNewStatus = (statusArray) => {
+  let lookupString = "";
+  statusArray.forEach((element) => (lookupString += element + "/"));
+  if (lookupString.includes("RF")) return "RF";
+  if (lookupString.includes("RA")) return "RA";
+  if (lookupString.includes("RP")) return "RP";
+  if (lookupString.includes("RC")) return "RC";
+  if (lookupString.includes("UNASSIGNED")) return "IN_PROGRESS";
+  if (lookupString.includes("IN_PROGRESS")) return "IN_PROGRESS";
+  if (lookupString.includes("QF")) return "QF";
+  if (lookupString.includes("AF")) return "AF";
+  if (lookupString.includes("AA")) return "AA";
+  if (lookupString.includes("AP")) return "AP";
+  if (lookupString.includes("AC")) return "AC";
+  if (lookupString.includes("RECEIVED")) return "RECEIVED";
+  if (lookupString.includes("NA")) return "NA";
+  return new Error("Status not found");
+};

package/src/index.js

@@ -1,10 +1,3 @@
-import * as fonts from "./global-files/fonts";
-import * as globalStyles from "./global-files/global-styles";
-import * as variables from "./global-files/variables";
-import * as assets from "./assets/images";
-
-export { fonts, globalStyles, variables, assets };
-
 //atoms
 export * from "./components/atoms/ActivedFilter/index";
 export * from "./components/atoms/AsignationOption/index";
@@ -18,32 +11,46 @@ export * from "./components/atoms/GeneralButton/index";
 export * from "./components/atoms/GeneralInput/index";
 export * from "./components/atoms/GeneralTextBox/index";
 export * from "./components/atoms/GradientPanel/index";
+export * from "./components/atoms/Loading/index";
+export * from "./components/atoms/LogoImage/index";
 export * from "./components/atoms/PriorityFlag/index";
 export * from "./components/atoms/ProductImage/index";
 export * from "./components/atoms/ProgressBar/index";
 export * from "./components/atoms/ScreenHeader/index";
 export * from "./components/atoms/SideMenuButton/index";
+export * from "./components/atoms/SliderToolTip/index";
 export * from "./components/atoms/StatusTag/index";
 export * from "./components/atoms/TabSection/index";
 export * from "./components/atoms/ValidationPanel/index";
+export * from "./components/atoms/VerticalSideMenuMainPage/index";
 
 //molecules
 export * from "./components/molecules/AvatarAndValidation/index";
+export * from "./components/molecules/CarouselImagesLogin";
 export * from "./components/molecules/EditionActiveImage/index";
+export * from "./components/molecules/EmailResetPasswordLogin/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/index";
+export * from "./components/molecules/LogoLoading/index";
 export * from "./components/molecules/PlanSelection/index";
 export * from "./components/molecules/ProductNameHeader/index";
+export * from "./components/molecules/RegistrationFirstStep/index";
+export * from "./components/molecules/RegistrationSecondStep/index";
+export * from "./components/molecules/RegistrationThirdStep/index";
+export * from "./components/molecules/SignInLogin/index";
 export * from "./components/molecules/StatusAsignationInfo/index";
 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/VerificationCodeResetPasswordLogin/index";
+export * from "./components/molecules/RetailerSelector/index";
 
 //organisms
+export * from "./components/organisms/ChangePassword/index";
 export * from "./components/organisms/Fullplan/index";
 export * from "./components/organisms/FullProductNameHeader/index";
 export * from "./components/organisms/FullTabsMenu/index";
@@ -54,6 +61,14 @@ 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/ProviderProductEdition";
+export * from "./components/pages/VerificationCodeResetPassword";

package/src/components/atoms/Percent/Percent.stories.js

@@ -1,38 +0,0 @@
-import { Percent } from "./index";
-
-const status = [
-  "-",
-  "Pr",
-  "Rc",
-  "As",
-  "P",
-  "QF",
-  "AF",
-  "AA",
-  "AP",
-  "AC",
-  "RA",
-  "RF",
-  "RP",
-  "RC",
-  "Ex",
-];
-
-export default {
-  title: "Components/atoms/Percent",
-  component: Percent,
-  argTypes: {
-    statusType: {
-      options: status,
-      control: { type: "select" },
-    },
-  },
-};
-
-const Template = (args) => <Percent {...args}/>;
-
-export const PercentDefault = Template.bind ({});
-
-PercentDefault.args = {
-  statusType: "-",
-};

package/src/components/atoms/Percent/index.js

@@ -1,15 +0,0 @@
-import { Container } from "./styles";
-import polygon from "../../../assets/images/arrow/polygon.svg";
-
-export const Percent = ({ statusType }) => {
-  return (
-    <Container className={`status-${statusType}`}>
-      <p className="text">Productos en proceso</p>
-      <div className="percent-text">
-        <p className="number">20</p>
-        <img src={polygon} alt=""/>
-        <span className="span">1%</span>
-      </div>
-    </Container>
-  );
-};