contentoh-components-library 10.0.0 → 12.1.17

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

@@ -10,39 +10,13 @@ const Template = (args) => <RetailerProductEdition {...args} />;
 export const RetailerProductEditionDefault = Template.bind({});
 
 RetailerProductEditionDefault.args = {
-  productData: {
-    imagesData: {
-      image: {
-        src: "https://www.thestar.com/content/dam/thestar/columnist_logos/francis_angelyn_logo2020.jpg",
-        name: "Hero.jpg",
-      },
-    },
-    headerData: {
-      name: "Nombre del producto",
-      status: "P",
-      percent: 20,
-      backgroundColor: "in_progress",
-      priority: "low",
-      date: new Date().toLocaleDateString(),
-      features: [
-        { feature: "Prov", value: "Unilever" },
-        { feature: "Vendor", value: "1234567890" },
-        { feature: "SKU", value: "1234567890" },
-        { feature: "UPC", value: "1234567890" },
-        { feature: "Categoría", value: "Desodorantes Caballero y Dama" },
-      ],
-      validation: "null-button",
-    },
-    status: "AA",
-    image: {
-      src: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
-    },
-  },
   tabsSections: {
     Descripción: true,
     "Ficha técnica": false,
     Imágenes: false,
   },
+  token:
+    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJhNmM0ZDNkNi0yNGE0LTQxZDQtYWQwZi1kMDg3NDM4YWI1YjYiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6ImE2YzRkM2Q2LTI0YTQtNDFkNC1hZDBmLWQwODc0MzhhYjViNiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIxMDEyMmE5OC0wMDc1LTQxYmMtYjkxMi02NjBiNTE2MzMxMDQiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY1NTc1NDEyNSwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTY1NTc1NzcyNSwiaWF0IjoxNjU1NzU0MTI1LCJlbWFpbCI6ImV0Y0Bjb250ZW50b2guY29tIn0.KFEGYLEDArzX7rXRsXo4wCc6nuSxATU6E8aL_XSCJyvYk3F2fn-cslstPX-zEgG1uybmzXfxMvSfnhjMGe1hCdxpHXXrcq4Khm6jlHcnsF62QUdIz5gPqZDoXjegctkCqQtTYhuZEhxhXmHn9Ijj3rSdk2_5-4AKYx89l9p1_G3u1EN8Vs1jH6BuE2v7u1wv45QQ9KB6h7s8DLZF_SfmivlJbQrqKmOzbwlDBpll94rRffKjHXzJtXx0YmKM--zU0E3dzAEdq-UcfEnM7GpC-SV__xMoLK7Rj7yTAq1fTHEfcMnAFBzkSoPjNAUi5xBw9GLCxt55DmZlVfvKyfzx6Q",
   articleId: 238,
   category: 846,
   version: 2,
@@ -52,26 +26,26 @@ RetailerProductEditionDefault.args = {
       descriptions: 1,
       images: 1,
     },
-    orderId: 101,
-    status: "RP",
-    datasheet_status: "AP",
+    orderId: 83,
+    status: "ASSIGNED",
+    datasheet_status: "IN_PROGRESS",
     prio: "none",
     version: 2,
-    description_status: "RP",
-    images_status: "AP",
+    description_status: "IN_PROGRESS",
+    images_status: "IN_PROGRESS",
     article: {
-      id_article: 292,
+      id_article: 55150,
       id_category: "697",
-      name: "SHAMPOO ANTIFRIZ",
-      upc: "7491989462",
-      timestamp: "2022-03-09T19:35:51.000Z",
+      name: "Shampoo hidratante",
+      upc: "4116665",
+      timestamp: "2022-06-21T19:47:57.000Z",
       id_user: 28,
       status: "NULL",
       active: 1,
       company_id: 1,
       company_name: "COMPANY DEV",
-      country: "Colombia",
-      id_order: 101,
+      country: "México",
+      id_order: 83,
       id_datasheet_especialist: 54,
       id_datasheet_facilitator: 52,
       id_description_especialist: 54,
@@ -82,9 +56,9 @@ RetailerProductEditionDefault.args = {
       id_recepcionist: null,
       category:
         "SALUD Y BELLEZA|CUIDADO DEL CABELLO|SHAMPOOS Y ACONDICIONADORES",
-      missingAttributes: null,
-      missingDescriptions: null,
-      missingImages: null,
+      missingAttributes: 31,
+      missingDescriptions: 6,
+      missingImages: 3,
     },
     retailers: [
       {
@@ -95,43 +69,36 @@ RetailerProductEditionDefault.args = {
         active: 1,
       },
       {
-        id: 6,
-        name: "HEB",
+        id: 26,
+        name: "Mercado Libre",
         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,
+    country: "México",
+    upc: "4116665",
+  },
+  location: {
+    product: { articleId: 109485, versionId: 3 },
   },
   user: {
-    id_user: 30,
-    name: "Admin",
-    last_name: "Ulises",
-    email: "salmeron.5@hotmail.com",
-    position: "Admin",
+    id_user: 51,
+    name: "ADMIN PRUEBA",
+    last_name: "",
+    email: "etc@contentoh.com",
+    position: null,
     telephone: null,
-    country: "México",
+    country: null,
     id_company: 2,
-    id_cognito: "c94a7305-9365-46ff-a423-4b4bc3b8b180",
+    id_cognito: "a6c4d3d6-24a4-41d4-ad0f-d087438ab5b6",
     birth_Date: null,
     about_me: null,
     zip_code: null,
     address: null,
     job: null,
     id_stripe: null,
-    id_role: 6,
+    id_role: 1,
     active: 1,
     is_retailer: 0,
     membership: {
@@ -145,6 +112,6 @@ RetailerProductEditionDefault.args = {
       products_limit: "3",
       type: "PyMES",
     },
-    src: "https://content-management-profile.s3.amazonaws.com/id-30/30.png?1647395550234",
+    src: "https://content-management-profile.s3.amazonaws.com/id-51/51.png?1655754126500",
   },
 };