contentoh-components-library 8.0.0 → 10.0.1

package/src/components/pages/ChangePasswordLogin/index.js

@@ -0,0 +1,77 @@
+import { Container } from "./styles";
+import { CarouselImagesLogin } from "../../molecules/CarouselImagesLogin";
+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 ChangePasswordLogin = ({
+  imageArrayCarousel = [],
+  textCarousel,
+  backogroundColorCarousel,
+  textHeaderRight,
+}) => {
+  const [emptyPassword, setEmptyPassword] = useState(false);
+  const [emptyConfirmPassword, setEmptyConfirmPassword] = useState(false);
+  const [matchPasswords, setMatchPasswords] = useState(true);
+  const validate = (e) => {
+    const password = document.querySelector("#newPasswordInput").value;
+    password.length < 8 ? setEmptyPassword(true) : setEmptyPassword(false);
+    const confirmPassword = document.querySelector(
+      "#confirmPasswordInput"
+    ).value;
+    confirmPassword === ""
+      ? setEmptyConfirmPassword(true)
+      : setEmptyConfirmPassword(false);
+    if (password === confirmPassword) {
+      setMatchPasswords(true);
+    } else {
+      setMatchPasswords(false);
+    }
+  };
+  const loginRight = [
+    <LogoImage key="1" />,
+    <div className="credenciales" key={"2"}>
+      <ScreenHeader
+        fontFamily={FontFamily.AvenirNext}
+        color={GlobalColors.s5}
+        text={textHeaderRight}
+      />
+    </div>,
+    <LoginPasswordStrength
+      emptyPassword={emptyPassword}
+      emptyConfirmPassword={emptyConfirmPassword}
+      matchPasswords={matchPasswords}
+      textTittle={textHeaderRight}
+      key="3"
+    />,
+    <div className="button-center" key="4">
+      <Button
+        buttonType={"general-default-button"}
+        label={"Enviar"}
+        onClick={(e) => validate(e)}
+      />
+    </div>,
+  ];
+  return (
+    <Container>
+      <div className="home-retailer">
+        <CarouselImagesLogin
+          panelImg={imageArrayCarousel}
+          panelText={textCarousel}
+          panelColor={backogroundColorCarousel}
+        />
+      </div>
+      <div className="home-login-retailer">
+        <GradientPanel
+          panelColor={GlobalColors.white}
+          componentsArray={loginRight}
+          panelType={"home-login"}
+        ></GradientPanel>
+      </div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,20 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  .home-login-retailer,
+  .home-retailer {
+    width: 50%;
+    .button-center {
+      text-align: center;
+      position: absolute;
+      bottom: 5%;
+      left: calc(75% - 80px);
+      .general-default-button {
+        width: 160px;
+      }
+    }
+  }
+`;

package/src/components/pages/EmailResetPassword/EmailResetPassword.stories.js

@@ -0,0 +1,17 @@
+import { EmailResetPassword } 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/EmailResetPassword",
+  component: EmailResetPassword,
+};
+const Template = (args) => <EmailResetPassword {...args} />;
+
+export const EmailResetPasswordDefault = Template.bind({});
+
+EmailResetPasswordDefault.args = {
+  imageArrayCarousel: [LoginImage, Login2, Login3],
+  textCarousel: "Elige la plataforma que conecta proovedores y retailers",
+};

package/src/components/pages/EmailResetPassword/index.js

@@ -0,0 +1,77 @@
+import { Container } from "./styles";
+import { GradientPanel } from "../../atoms/GradientPanel";
+import { CarouselImagesLogin } from "../../molecules/CarouselImagesLogin";
+import { useState } from "react";
+import { LogoImage } from "../../atoms/LogoImage";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+import { TagAndInput } from "../../molecules/TagAndInput";
+import { Button } from "../../atoms/GeneralButton";
+
+export const EmailResetPassword = ({
+  imageArrayCarousel = [],
+  textCarousel,
+  backogroundColorCarousel,
+}) => {
+  const [emptyEmail, setEmptyEmail] = useState(false);
+  const [invalidEmail, setInvalidEmail] = useState(false);
+
+  const validate = async (e) => {
+    e.preventDefault();
+    const email = document.querySelector("#emailInput").value;
+    email === "" ? setEmptyEmail(true) : setEmptyEmail(false);
+    !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(
+      email
+    )
+      ? setInvalidEmail(true)
+      : setInvalidEmail(false);
+  };
+  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">
+      <TagAndInput
+        inputType={"text"}
+        inputId={"emailInput"}
+        label={"Nombre de usuario"}
+        inputPlaceHolder={"username@contentoh.com"}
+      />
+      {emptyEmail && <label>Ingrese su correo</label>}
+      {invalidEmail && !emptyEmail && <label>Ingrese un correo válido</label>}
+    </div>,
+    <div className="button-center" key="4">
+      <Button
+        buttonType={"general-default-button"}
+        label={"Enviar"}
+        onClick={(e) => validate(e)}
+      />
+    </div>,
+    <div className="back-login" key="5">
+      <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/EmailResetPassword/styles.js

@@ -0,0 +1,27 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  .home-login-retailer,
+  .home-retailer {
+    width: 50%;
+    .button-center {
+      text-align: center;
+      .general-default-button {
+        width: 160px;
+      }
+    }
+    .back-login {
+      text-align: center;
+      margin: 15px !important;
+      color: ${GlobalColors.secondary_magenta};
+      cursor: pointer;
+      font-weight: bold;
+      font-family: ${FontFamily.Raleway};
+      font-size: 13px;
+    }
+  }
+`;

package/src/components/pages/ProviderProductEdition/ProviderProductEdition.stories.js

@@ -0,0 +1,186 @@
+import { ProviderProductEdition } from "./index";
+
+export default {
+  title: "Components/pages/ProviderProductEdition",
+  component: ProviderProductEdition,
+};
+
+const Template = (args) => <ProviderProductEdition {...args} />;
+
+export const ProviderProductEditionDefault = Template.bind({});
+
+ProviderProductEditionDefault.args = {
+  tabsSections: {
+    Descripción: true,
+    "Ficha técnica": false,
+    Imágenes: false,
+  },
+  token:
+    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI1ODg0YWUzNC01OWQ2LTQ0NTQtYjk4ZS04MjE1MThiY2MzYTciLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjU4ODRhZTM0LTU5ZDYtNDQ1NC1iOThlLTgyMTUxOGJjYzNhNyIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJhODE2NGMwNi1hN2U5LTQ2OGItYTBiMS02MDIxNzMyNWY0ZTgiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY1NjExMzE0NiwibmFtZSI6IkNhZGVuYSBJc21hZWwiLCJwaG9uZV9udW1iZXIiOiIrNTIzMTExMzY2MzM2IiwiZXhwIjoxNjU2MTE2NzQ2LCJpYXQiOjE2NTYxMTMxNDYsImVtYWlsIjoiY2FkZW5hLmlzbWFlbEBhbGxmcmVlbWFpbC5uZXQifQ.kfMoKcxYDkpNZJibGdw50oOkRwPVl26YNAwwDoLEfQjOZB6WRCY95iHfU1maYcTTvA5KlT5ali8XZ-nLnxh60vZoLGTDOfCvEnwd1t94JtfE5CsWDr_jfH1U0AVidxihqKnkwvCezkHwU1DUFlbu2iBNo7MHQw4ydiK2sx4q0-QGltmE7W2JJ0sayRDuNchy2S6FQoyIWhsP3oaKTvJGDKCaJxwkFEKk-3antoMtfua9H8V4p2Kkqa_eDbFk8pLYGaYgImLlaia2orGgETkHZIWEMr4WJq1V_7qOg4lYq2BUUuMhWdmK6XUL_Jhmv05TUJ3Rp_Ti4_J2WE4zQqhbfQ",
+  articleId: 238,
+  category: 846,
+  version: 2,
+  productSelected: {
+    orderId: 55,
+    article_status: "AP",
+    datasheet_status: "AP",
+    description_status: "AP",
+    images_status: "AP",
+    prio: "none",
+    version: 2,
+    brand: null,
+    article: {
+      category: "ILUMINACIÓN|FOCOS|FOCOS",
+      company_name: "THD Proveedor",
+      country: "México",
+      id_category: "2143",
+      id_article: 55118,
+      name: "FOCO BLUETOOTH SPOT PHILIPS 6 WATTS 300 LÚMENES MULTICOLOR",
+      upc: "145582",
+    },
+    retailers: [
+      {
+        id: 58,
+        name: "The Home Depot Golden",
+      },
+      {
+        id: 59,
+        name: "The Home Depot Platinum",
+      },
+      {
+        id: 60,
+        name: "The Home Depot Resizing",
+      },
+      {
+        id: 61,
+        name: "Home Depot TAB",
+      },
+    ],
+    services: {
+      datasheets: 1,
+      descriptions: 1,
+      images: 1,
+    },
+    id_article: 55118,
+    retailersAvailable: [
+      {
+        id: 58,
+        name: "The Home Depot Golden",
+      },
+      {
+        id: 59,
+        name: "The Home Depot Platinum",
+      },
+      {
+        id: 60,
+        name: "The Home Depot Resizing",
+      },
+      {
+        id: 61,
+        name: "Home Depot TAB",
+      },
+    ],
+  },
+  productToEdit: {
+    ArticleId: 55118,
+    idCategory: "2143",
+    product: {
+      orderId: 55,
+      article_status: "AP",
+      datasheet_status: "AP",
+      description_status: "AP",
+      images_status: "AP",
+      prio: "none",
+      version: 2,
+      brand: null,
+      article: {
+        category: "ILUMINACIÓN|FOCOS|FOCOS",
+        company_name: "THD Proveedor",
+        country: "México",
+        id_category: "2143",
+        id_article: 55118,
+        name: "FOCO BLUETOOTH SPOT PHILIPS 6 WATTS 300 LÚMENES MULTICOLOR",
+        upc: "145582",
+      },
+      retailers: [
+        {
+          id: 58,
+          name: "The Home Depot Golden",
+        },
+        {
+          id: 59,
+          name: "The Home Depot Platinum",
+        },
+        {
+          id: 60,
+          name: "The Home Depot Resizing",
+        },
+        {
+          id: 61,
+          name: "Home Depot TAB",
+        },
+      ],
+      services: {
+        datasheets: 1,
+        descriptions: 1,
+        images: 1,
+      },
+      id_article: 55118,
+      retailersAvailable: [
+        {
+          id: 58,
+          name: "The Home Depot Golden",
+        },
+        {
+          id: 59,
+          name: "The Home Depot Platinum",
+        },
+        {
+          id: 60,
+          name: "The Home Depot Resizing",
+        },
+        {
+          id: 61,
+          name: "Home Depot TAB",
+        },
+      ],
+    },
+  },
+  location: {
+    product: { articleId: 109485, versionId: 3 },
+    state: { origin: "Contentoh" },
+  },
+  user: {
+    id_user: 59,
+    name: "The Home",
+    last_name: "Depot",
+    email: "cadena.ismael@allfreemail.net",
+    position: "Admin",
+    telephone: "+523111366336",
+    country: "México",
+    id_company: 7,
+    id_cognito: "5884ae34-59d6-4454-b98e-821518bcc3a7",
+    birth_Date: null,
+    about_me: null,
+    zip_code: null,
+    address: null,
+    job: null,
+    id_stripe: "",
+    id_role: 0,
+    active: 1,
+    is_retailer: 0,
+    email_notify: 1,
+    membership: {
+      id: 24,
+      start_date: "2021-11-23T03:35:50.000Z",
+      end_date: "2022-11-23T03:35:50.000Z",
+      planID: 9,
+      plan: "prod_KtlkzZVGq6bRTO",
+      name: "Plan Enterprise Full",
+      user_limit: "30",
+      products_limit: "10000",
+      type: "Enterprise",
+    },
+    src: "https://content-management-profile.s3.amazonaws.com/id-59/59.png?1656113146885",
+  },
+};