contentoh-components-library 8.0.0 → 10.0.1

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,68 +10,39 @@ 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,
   },
-  articleId: 238,
-  category: 846,
-  version: 2,
+  token:
+    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJjOTRhNzMwNS05MzY1LTQ2ZmYtYTQyMy00YjRiYzNiOGIxODAiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjp0cnVlLCJjb2duaXRvOnVzZXJuYW1lIjoiYzk0YTczMDUtOTM2NS00NmZmLWE0MjMtNGI0YmMzYjhiMTgwIiwiY29nbml0bzpyb2xlcyI6WyJhcm46YXdzOmlhbTo6ODk4NjcwMjMyODA3OnJvbGVcL2NvbnRlbnRvaC1kZXYtdXMtZWFzdC0xLWxhbWJkYVJvbGUiXSwiYXVkIjoiNWFjOHRwZ3M2Z2JzcTEzZnJ2cnBpZWVwNDAiLCJldmVudF9pZCI6ImExY2QwOGQ3LTM0MTgtNGI0ZC1hODNmLTJlOWE0N2E2ZTQzYSIsInRva2VuX3VzZSI6ImlkIiwiYXV0aF90aW1lIjoxNjU2Mzc1MzQ5LCJuYW1lIjoiQ29sYWJvcmFkb3IiLCJwaG9uZV9udW1iZXIiOiIrNTIxMTExIiwiZXhwIjoxNjU2Mzc4OTQ5LCJpYXQiOjE2NTYzNzUzNDksImVtYWlsIjoic2FsbWVyb24uNUBob3RtYWlsLmNvbSJ9.AXD7CR-3bJz6vIdBBNB_3xLfaTvlFjHi-cwKdN5qCUSY4msnf1a1RhMEThL3wt7fXi15dy5Fy5b_7zgkWc_NY35Otu1ifQNmSxemncx5qFsNsBH6OvIaZrhiw7XXkfQF20w22f4o8VFW1u0cWudFBYYm6tXlKVEetw-NEu94Mnip0BtQQUU6rFjz5hQM0gWYsvOMmSX3JKQWl4thirzTOqJxrKebFeWnUMs5D3hlFpKeBSKodgB6lLw2522SJmxWXmGCaDOVSMUP9LqB9PsboSOBfSeQpkbIZqd9iNWbrFCusGhnoRrQABucqFwlQ6KPHYTPaOOux-X3pf6i5woX4g",
   productSelected: {
     services: {
       datasheets: 1,
       descriptions: 1,
       images: 1,
     },
-    orderId: 101,
-    status: "RP",
-    datasheet_status: "AP",
+    orderId: 64,
+    status: "AF",
+    datasheet_status: "AF",
     prio: "none",
-    version: 2,
-    description_status: "RP",
-    images_status: "AP",
+    version: 7,
+    description_status: "AF",
+    images_status: "AF",
     article: {
-      id_article: 292,
-      id_category: "697",
-      name: "SHAMPOO ANTIFRIZ",
-      upc: "7491989462",
-      timestamp: "2022-03-09T19:35:51.000Z",
+      id_article: 35707,
+      id_category: "41",
+      name: "chetos",
+      upc: "1010101010",
+      timestamp: "2022-06-16T18:12:42.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: 64,
       id_datasheet_especialist: 54,
       id_datasheet_facilitator: 52,
       id_description_especialist: 54,
@@ -80,40 +51,32 @@ RetailerProductEditionDefault.args = {
       id_images_facilitator: 53,
       id_auditor: 30,
       id_recepcionist: null,
-      category:
-        "SALUD Y BELLEZA|CUIDADO DEL CABELLO|SHAMPOOS Y ACONDICIONADORES",
+      category: "ABARROTES|BOTANAS, GOLOSINAS Y CHOCOLATES|BOTANAS",
       missingAttributes: null,
       missingDescriptions: null,
       missingImages: null,
     },
     retailers: [
       {
-        id: 4,
-        name: "Walmart Super y Superama",
+        id: 3,
+        name: "Sam´s Club",
         country: "México",
         id_region: 1,
         active: 1,
       },
       {
-        id: 6,
-        name: "HEB",
+        id: 8,
+        name: "Fragua",
         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: "1010101010",
+  },
+  location: {
+    product: { articleId: 109485, versionId: 3 },
   },
   user: {
     id_user: 30,
@@ -134,6 +97,7 @@ RetailerProductEditionDefault.args = {
     id_role: 6,
     active: 1,
     is_retailer: 0,
+    email_notify: 0,
     membership: {
       id: 2,
       start_date: "2021-11-05T02:35:12.000Z",
@@ -145,6 +109,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-30/30.png?1656375350443",
   },
 };