contentoh-components-library 21.0.5 → 21.0.8

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

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

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

@@ -0,0 +1,106 @@
+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 RegistrationLoginThirdStep = ({
+  imageArrayCarousel = [],
+  textCarousel,
+  backogroundColorCarousel,
+}) => {
+  const [emptyCommercialName, setEmptyCommercialName] = useState(false);
+  const [emptyBussinesName, setEmptyBussinesName] = useState(false);
+  const [emptyRFC, setEmptyRFC] = useState(false);
+  const [emptyFiscalAddress, setEmptyFiscalAddress] = useState(false);
+  const validate = async (e) => {
+    e.preventDefault();
+    const commercialName = document.querySelector("#commercialNameInput").value;
+    const bussinesName = document.querySelector("#bussinesNameInput").value;
+    const RFC = document.querySelector("#rfcInput").value;
+    const FiscalAddress = document.querySelector("#fiscalAddressInput").value;
+    commercialName === "" ? setEmptyCommercialName(true) : setEmptyCommercialName(false);
+    bussinesName === "" ? setEmptyBussinesName(true) : setEmptyBussinesName(false);
+    RFC === "" ? setEmptyRFC(true) : setEmptyRFC(false);
+    FiscalAddress === "" ? setEmptyFiscalAddress(true) : setEmptyFiscalAddress(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={"commercialNameInput"}
+          label={"Nombre comercial"}
+          inputPlaceHolder={"Nombre comercial"}
+        />
+        {emptyCommercialName && <label>Ingrese el nombre comercial de la empresa</label>}
+      <TagAndInput
+        inputType={"text"}
+        inputId={"bussinesNameInput"}
+        label={"Razón social"}
+        inputPlaceHolder={"Razón social"}
+      />
+      {emptyBussinesName && <label>Ingrese la razón social de la empresa</label>}
+      <TagAndInput
+        inputType={"text"}
+        inputId={"rfcInput"}
+        label={"RFC"}
+        inputPlaceHolder={"RFC"}
+      />
+      {emptyRFC && <label>El RFC es requerido</label>}
+      <TagAndInput
+        inputType={"text"}
+        inputId={"fiscalAddressInput"}
+        label={"Direccion fiscal"}
+        inputPlaceHolder={"Dirección fiscal"}
+      />
+      {emptyFiscalAddress && <label>Ingrese la direccion fiscal de la empresa</label>}
+    </div>,
+    <div className="button-end" key="4">
+      <Button
+        buttonType={"general-default-button"}
+        label={"Enviar"}
+        onClick={(e) => validate(e)}
+      />
+    </div>,
+    <div className="progress-bar" key="5">
+      <div className="progress-bar-step-check"></div>
+      <div className="progress-bar-registration"></div>
+    </div>,
+    <ScreenHeader text={"Paso 3"} headerType={"date-header"} color={GlobalColors.s4} key="6"/>,
+    <div className="new-login" key="7">
+      <p className="pre-registro">
+        ¿Ya tienes una cuenta?<span> Inicia Sesión</span>
+      </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/RegistrationLoginThirdStep/styles.js

@@ -0,0 +1,48 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  .user {
+    .input-name-header {
+      margin-top: 10px;
+    }
+  }
+  .button-end {
+    text-align: end;
+    .general-default-button {
+      width: 160px;
+    }
+    & + * {
+      margin-top: 10px;
+    }
+  }
+  .home-login-retailer,
+  .home-retailer {
+    width: 50%;
+  }
+  .progress-bar {
+    width: 100%;
+    height: 8px;
+    display: flex;
+    justify-content: space-between;
+    .progress-bar-step-check {
+      width: 66.66%;
+      background-color: ${GlobalColors.exported};
+    }
+    .progress-bar-registration {
+      background-color: rgb(196, 196, 196);
+      width: 33.33%;
+    }
+  }
+  .date-header {
+    margin-left: 66.66%;
+    .new-login {
+      & + * {
+        margin-top: 20px;
+      }
+    }
+  }
+`;

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

@@ -44,7 +44,7 @@ RetailerProductEditionDefault.args = {
     Imágenes: false,
   },
   token:
-    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJjOTRhNzMwNS05MzY1LTQ2ZmYtYTQyMy00YjRiYzNiOGIxODAiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjp0cnVlLCJjb2duaXRvOnVzZXJuYW1lIjoiYzk0YTczMDUtOTM2NS00NmZmLWE0MjMtNGI0YmMzYjhiMTgwIiwiY29nbml0bzpyb2xlcyI6WyJhcm46YXdzOmlhbTo6ODk4NjcwMjMyODA3OnJvbGVcL2NvbnRlbnRvaC1kZXYtdXMtZWFzdC0xLWxhbWJkYVJvbGUiXSwiYXVkIjoiNWFjOHRwZ3M2Z2JzcTEzZnJ2cnBpZWVwNDAiLCJldmVudF9pZCI6IjU2M2I0NTFlLTVhZDQtNGMzNy1iNjIzLTc3NjMwM2Y3YjJiNSIsInRva2VuX3VzZSI6ImlkIiwiYXV0aF90aW1lIjoxNjQ4NzYwODcwLCJuYW1lIjoiQ29sYWJvcmFkb3IiLCJwaG9uZV9udW1iZXIiOiIrNTIxMTExIiwiZXhwIjoxNjQ4NzY0NDcwLCJpYXQiOjE2NDg3NjA4NzAsImVtYWlsIjoic2FsbWVyb24uNUBob3RtYWlsLmNvbSJ9.Y2gmN-9KDeYyvvSJOzKJUP-WL8O4AmZhdLnfHxSB_9lAXQFns6uJUbX1nzE75cuqeQ3NeiNZy4hu8y5Y7hckPuQFy01nY3OoY3SfD06W0SciNz0txNSR7oN6KH_c_9FOwQiQ0mnOs9udo9nDM4faFFUuu9UD6RMVfeLW1gfZmtyc3lfmy6YO6feJcS3opSSQpXH4Mgh415fXFjbyz344ssd5nl7Onyh8jq5i-LAex3OPXhKzjrBnDRpGg3BQPIfpsquGZNKBiWqyos--CuohFBeyevMLGoKOcU-Ga-zIdEfonTtDVRe6CQLgOZJ2xTPdswlzRPby1gFoZjNebeeRVw",
+    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJiMmNlNWIyYS02MDljLTRlNzktOWVhOS0yZjc0Y2ZmNDM4ODkiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6ImIyY2U1YjJhLTYwOWMtNGU3OS05ZWE5LTJmNzRjZmY0Mzg4OSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJkMGQ0NDUxYS01ODg1LTQ0ZTctYjZhNi0xODdkY2NjNDI4MTgiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY1MTIyMDI2NiwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTY1MTIyMzg2NiwiaWF0IjoxNjUxMjIwMjY2LCJlbWFpbCI6ImF6YXJhdGVAY29udGVudG9oLmNvbSJ9.lhlgp4NoHgFu4LrpIWiGCTD08MIHo-mLQ17SNx1rAmyHP5YosGp9LKJXEgNcpAIaVfFiy4Zd-YGTf2QExMcP9kAYksoKHI1G6jSg87yh3Pg3V3aGE6X6JkuOOflz2M8jZgyYMRvbkJfG7oi6uj_nZ-tCjq7VMnmZyfWL4LjTvF5E0EqzVC93fcPViwW5ozqr51VvGhIoXGHiG01i4CPbsorp0jJjlU795cq4ETNw6i0d61Wz9pLDUttYmt5RCEMrbCp3ctSymtxHuz3eJTXzsF330KAmGL2SG4hJ8l-kdyoYRSlkGy3PTy4tYdFVrcubpHL3LOFzJWMrmLn98J3MoA",
   articleId: 238,
   category: 846,
   version: 2,
@@ -54,99 +54,75 @@ RetailerProductEditionDefault.args = {
       descriptions: 1,
       images: 1,
     },
-    orderId: 113,
+    orderId: 125,
     status: "IN_PROGRESS",
-    datasheet_status: "IN_PROGRESS",
+    datasheet_status: "QF",
     prio: "none",
     version: 2,
-    description_status: "IN_PROGRESS",
+    description_status: "QF",
     images_status: "IN_PROGRESS",
     article: {
-      id_article: 324,
-      id_category: "684",
-      name: "Crema dental ",
-      upc: "154161",
-      timestamp: "2022-04-12T14:46:42.000Z",
+      id_article: 109483,
+      id_category: "2046",
+      name: "Celular",
+      upc: "31313131",
+      timestamp: "2022-04-28T21:42:27.000Z",
       id_user: 28,
       status: "NULL",
       active: 1,
       company_id: 1,
       company_name: "COMPANY DEV",
       country: "Colombia",
-      id_order: 113,
-      id_datasheet_especialist: 36,
+      id_order: 125,
+      id_datasheet_especialist: 54,
       id_datasheet_facilitator: 52,
-      id_description_especialist: 36,
+      id_description_especialist: 54,
       id_description_facilitator: 52,
       id_images_especialist: 55,
       id_images_facilitator: 53,
       id_auditor: 30,
       id_recepcionist: null,
-      category: "SALUD Y BELLEZA|CUIDADO BUCAL|PASTAS DENTALES Y ASEO BUCAL",
+      category: "ELÉCTRICO|ELECTRÓNICA|ANTENAS Y ACCESORIOS",
       missingAttributes: null,
       missingDescriptions: null,
       missingImages: null,
     },
     retailers: [
       {
-        id: 4,
-        name: "Walmart Super y Superama",
+        id: 58,
+        name: "The Home Depot",
         country: "México",
         id_region: 1,
         active: 1,
       },
       {
-        id: 5,
-        name: "Chedraui",
-        country: "México",
-        id_region: 1,
-        active: 1,
-      },
-      {
-        id: 6,
-        name: "HEB",
-        country: "México",
-        id_region: 1,
-        active: 1,
-      },
-      {
-        id: 12,
-        name: "La Comer",
+        id: 59,
+        name: "Home Depot Platinum",
         country: "México",
         id_region: 1,
         active: 1,
       },
     ],
     country: "Colombia",
-    modal: false,
-    modalCadenas: false,
-    totalCadenas: false,
-    modalAsig1: false,
-    modalFD: false,
-    modalAsig2: false,
-    modalAsig3: false,
-    modalAsig4: false,
-    modalAsig5: false,
-    modalFI: false,
-    modalQA: false,
+    upc: "31313131",
   },
   user: {
-    id_user: 30,
-    name: "Admin",
-    last_name: "Ulises",
-    email: "salmeron.5@hotmail.com",
-    position: "Admin",
+    id_user: 52,
+    name: "FACILITADOR TXT PRUEBA",
+    last_name: "",
+    email: "azarate@contentoh.com",
+    position: null,
     telephone: null,
-    country: "México",
+    country: null,
     id_company: 2,
-    id_cognito: "c94a7305-9365-46ff-a423-4b4bc3b8b180",
+    id_cognito: "b2ce5b2a-609c-4e79-9ea9-2f74cff43889",
     birth_Date: null,
     about_me: null,
     zip_code: null,
     address: null,
     job: null,
     id_stripe: null,
-    id_role: 6,
+    id_role: 4,
     active: 1,
     is_retailer: 0,
     membership: {
@@ -160,6 +136,6 @@ RetailerProductEditionDefault.args = {
       products_limit: "3",
       type: "PyMES",
     },
-    src: "https://content-management-profile.s3.amazonaws.com/id-30/30.png?1649434410216",
+    src: "https://content-management-profile.s3.amazonaws.com/id-52/52.png?1651207506986",
   },
 };