contentoh-components-library 0.1.1

package/src/components/organisms/ProductImageModal/styles.js

@@ -0,0 +1,53 @@
+import styled from "styled-components";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  overflow: auto;
+
+  .modal-container {
+    display: flex;
+    border-radius: 4px;
+    overflow: hidden;
+
+    .modal-data-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      padding: 15px;
+      min-width: 375px;
+      background-color: ${GlobalColors.deep_gray};
+
+      .validation-and-table-container {
+        .validation-panel {
+          position: relative;
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
+          .circular-button {
+            & + * {
+              margin-left: 10px;
+            }
+          }
+
+          .close-button {
+            border-radius: 3px;
+            width: 30px;
+            height: 30px;
+            padding: 0;
+            border: 1px solid #f0eef2;
+            background-size: 30px;
+          }
+
+          & + * {
+            margin-top: 25px;
+          }
+        }
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,34 @@
+import { CustomerType } from "./index";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { CustomerTypeImages } from "../../atoms/CustomerTypeImage";
+import { Button } from "../../atoms/GeneralButton";
+import { FontFamily,GlobalColors } from "../../../global-files/variables";
+
+
+export default {
+  title: "Components/pages/CustomerType",
+  component: CustomerType,
+};
+
+const Template = (args) => <CustomerType {...args} />;
+
+export const CustomerTypeDefault = Template.bind({});
+
+CustomerTypeDefault.args = {
+  homeLeft:{
+    componentsArray:[
+    <ScreenHeader fontFamily={FontFamily.Raleway_600} color={GlobalColors.white} text={"Cadena"}/>,
+    <CustomerTypeImages />,
+    <p>Elige esta opción si eres una Cadena Retailer.</p>,
+    <Button buttonType={"general-white-button"} label={"Seleccionar"} />,
+    ],
+  },
+  homeRight:{
+    componentsArray:[
+    <ScreenHeader fontFamily={FontFamily.Raleway_600} color="#000000" text={"Proveedor"}/>,
+    <CustomerTypeImages className={"imagen"} imageType/>,
+    <p>Elige esta opción si eres una Proveedor o Dueño de producto.</p>,
+    <Button buttonType={"general-default-button"} label={"Seleccionar"} />,
+    ],
+  },
+};

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

@@ -0,0 +1,22 @@
+import { Container } from "./styles";
+import { GradientPanel } from "../../atoms/GradientPanel";
+
+export const CustomerType = ({ homeLeft, homeRight }) => {
+  return (
+    <Container>
+      <div className="home-retailer">
+        <GradientPanel
+          componentsArray={homeLeft.componentsArray}
+          panelType={"home-panel"}
+        />
+      </div>
+      <div className="home-provider">
+        <GradientPanel
+          panelColor
+          componentsArray={homeRight.componentsArray}
+          panelType={"home-panel"}
+        />
+      </div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,21 @@
+import styled from "styled-components";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  width: 100%;
+
+  .home-retailer,
+  .home-provider {
+    width: 50%;
+  }
+  .home-provider {
+    .home-panel {
+      h2 {
+        & + * {
+          margin-top: 45px;
+        }
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,36 @@
+import { OnboardPlan } from "./index";
+
+export default {
+  title: "Components/pages/OnboardPlan",
+  component: OnboardPlan,
+};
+
+const Template = (args) => <OnboardPlan {...args} />;
+export const OnboardPlanDefault = Template.bind({});
+
+OnboardPlanDefault.args = {
+  leftPanel: {
+    title: "Beneficios de cadenas",
+    containerList: {
+      content: [
+        "Crea proveedores y agregalos a tu cadena",
+        "Valida los proveedores",
+        "Solicita actualización a proveedores",
+        "Analiza el número de productos totales",
+      ],
+    },
+  },
+  planContainerData: {
+    title: "Elige el número de proveedores",
+    textGeneral:
+      "Bienvido a nuestra plataforma de cadena, para continuar elige el número de proveedores que tiene tu cadena",
+    containerData: {
+      planSelection: [
+        { number: "300", name: "Proveedores" },
+        { number: "1500", name: "Proveedores" },
+        { number: "+3000", name: "Proveedores" },
+        { number: "Ondemand", name: "agrega proveedores a tu forma" },
+      ],
+    },
+  },
+};

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

@@ -0,0 +1,23 @@
+import { Container } from "./styles";
+import { TextAndGradient } from "../../molecules/TextAndGradient";
+import { FullPlan } from "../../organisms/Fullplan";
+
+export const OnboardPlan = ({ leftPanel, planContainerData }) => {
+  return (
+    <Container>
+      <div className="left">
+        <TextAndGradient
+          title={leftPanel.title}
+          containerList={leftPanel.containerList}
+        />
+      </div>
+      <div className="rigth">
+        <FullPlan
+          title={planContainerData.title}
+          textGeneral={planContainerData.textGeneral}
+          containerData={planContainerData.containerData}
+        />
+      </div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,27 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+
+  display: flex;
+  flex-direction: row-reverse;
+  width: 1440px;
+  height: 720px;
+  .rigth {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .title {
+      & + * {
+        margin-top: 30px;
+      }
+    }
+    .general-text {
+      & + * {
+        margin-top: 50px;
+      }
+    }
+    /* button{
+            margin:auto;
+        } */
+  }
+`;

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

@@ -0,0 +1,363 @@
+import { RetailerProductEdition } from "./index";
+
+export default {
+  title: "Components/pages/RetailerProductEdition",
+  component: RetailerProductEdition,
+};
+
+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",
+    },
+    services: {
+      Descripción: [
+        {
+          inputGroup: {
+            name: "Información básica del producto",
+            inputs: [
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+            ],
+          },
+        },
+      ],
+      "Ficha técnica": [
+        {
+          inputGroup: {
+            name: "Información básica del producto",
+            inputs: [
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+            ],
+          },
+        },
+        {
+          inputGroup: {
+            name: "Información básica del producto",
+            inputs: [
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+            ],
+          },
+        },
+        {
+          inputGroup: {
+            name: "Información básica del producto",
+            inputs: [
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+            ],
+          },
+        },
+        {
+          inputGroup: {
+            name: "Información básica del producto",
+            inputs: [
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+              {
+                label: "Item",
+                value: "1234567890",
+                placeholder: "Ingresar valor",
+              },
+            ],
+          },
+        },
+      ],
+      Imágenes: [
+        {
+          img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+          alt: "img",
+          name: "Hero",
+          data: [
+            { feature: "Tamaño de imagen", value: "1000x10000" },
+            { feature: "Formato", value: "jpg" },
+            { feature: "Resolución", value: "300dpi" },
+            { feature: "Tipo de imagen", value: "Tipo de imagen" },
+            { feature: "Identificador", value: "F261" },
+          ],
+        },
+        {
+          img: "https://www.muycomputer.com/wp-content/uploads/2020/12/google.png",
+          alt: "img",
+          name: "Hero2",
+          data: [
+            { feature: "Tamaño de imagen", value: "1000x10000" },
+            { feature: "Formato", value: "jpg" },
+            { feature: "Resolución", value: "300dpi" },
+            { feature: "Tipo de imagen", value: "Tipo de imagen" },
+            { feature: "Identificador", value: "F261" },
+          ],
+        },
+        {
+          img: "https://www.ionos.es/digitalguide/fileadmin/DigitalGuide/Teaser/bildergalerie-online-t.jpg",
+          alt: "img",
+          name: "Hero3",
+          data: [
+            { feature: "Tamaño de imagen", value: "1000x10000" },
+            { feature: "Formato", value: "jpg" },
+            { feature: "Resolución", value: "300dpi" },
+            { feature: "Tipo de imagen", value: "Tipo de imagen" },
+            { feature: "Identificador", value: "F261" },
+          ],
+        },
+        {
+          img: "https://i.pinimg.com/originals/d0/b9/28/d0b928df15d3a3bf1905865a8fedb257.jpg",
+          alt: "img",
+          name: "Hero4",
+          data: [
+            { feature: "Tamaño de imagen", value: "1000x10000" },
+            { feature: "Formato", value: "jpg" },
+            { feature: "Resolución", value: "300dpi" },
+            { feature: "Tipo de imagen", value: "Tipo de imagen" },
+            { feature: "Identificador", value: "F261" },
+          ],
+        },
+        {
+          img: "https://memegenerator.net/img/images/72798198.jpg",
+          alt: "img",
+          name: "Hero5",
+          data: [
+            { feature: "Tamaño de imagen", value: "1000x10000" },
+            { feature: "Formato", value: "jpg" },
+            { feature: "Resolución", value: "300dpi" },
+            { feature: "Tipo de imagen", value: "Tipo de imagen" },
+            { feature: "Identificador", value: "F261" },
+          ],
+        },
+        {
+          img: "http://www.dumpaday.com/wp-content/uploads/2016/02/funny-pictures-621.jpg",
+          alt: "img",
+          name: "Hero6",
+          data: [
+            { feature: "Tamaño de imagen", value: "1000x10000" },
+            { feature: "Formato", value: "jpg" },
+            { feature: "Resolución", value: "300dpi" },
+            { feature: "Tipo de imagen", value: "Tipo de imagen" },
+            { feature: "Identificador", value: "F261" },
+          ],
+        },
+      ],
+      "Golden SKU": {},
+    },
+  },
+  tabsSections: {
+    Descripción: true,
+    "Ficha técnica": false,
+    Imágenes: false,
+    "Golden SKU": false,
+  },
+};

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

@@ -0,0 +1,85 @@
+import { Container } from "./styles";
+import { HeaderTop } from "../../molecules/HeaderTop";
+import { ImagePreviewer } from "../../organisms/ImagePreviewer";
+import { ImageDataTable } from "../../organisms/ImageDataTable";
+import { FullProductNameHeader } from "../../organisms/FullProductNameHeader";
+import { FullTabsMenu } from "../../organisms/FullTabsMenu";
+import { InputGroup } from "../../organisms/InputGroup";
+import { useEffect, useState } from "react";
+import { GalleryElement } from "../../molecules/GalleryElement";
+import axios from "axios";
+
+export const RetailerProductEdition = ({ productData, tabsSections }) => {
+  const [activeTab, setActiveTab] = useState("Descripción");
+  const [activeImage, setActiveImage] = useState(
+    productData?.services?.Imágenes[0]
+  );
+  const [imageLayout, setImageLayout] = useState(true);
+  const [headerTop, setHeaderTop] = useState(0);
+
+  const getData = async () => {
+    const response = await axios.post(
+      `${process.env.REACT_APP_ARTICLE_DATA_DATASHEET_ENDPOINT}?idCategory=846&articleId=238&version=2`
+    );
+
+    console.log(JSON.parse(response.data.body).data);
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  return (
+    <Container headerTop={headerTop}>
+      <HeaderTop setHeaderTop={setHeaderTop} />
+      <div className="data-container">
+        <div className="image-data-panel">
+          <ImagePreviewer
+            activeImage={activeImage}
+            imagesArray={productData?.services?.Imágenes}
+            setActiveImage={setActiveImage}
+          />
+          <ImageDataTable
+            imageData={activeImage?.data}
+            activeImage={activeImage}
+          />
+        </div>
+        <div className="product-information">
+          <FullProductNameHeader headerData={productData.headerData} />
+          <FullTabsMenu
+            tabsSections={tabsSections}
+            status={productData.status}
+            profileImage={productData.asigned}
+            setActiveTab={setActiveTab}
+            setImageLayout={setImageLayout}
+          />
+          <div
+            className={
+              "services-information-container " +
+              (imageLayout && activeTab === "Imágenes" && "image-services")
+            }
+          >
+            {activeTab !== "Imágenes"
+              ? productData?.services[activeTab]?.map(
+                  ({ inputGroup }, index) => (
+                    <InputGroup
+                      key={index}
+                      inputGroup={inputGroup}
+                      activeSection={activeTab}
+                    />
+                  )
+                )
+              : productData?.services["Imágenes"]?.map((image, index) => (
+                  <GalleryElement
+                    key={index}
+                    image={image}
+                    gridLayout={imageLayout}
+                    id={"gallery-element-" + index}
+                  />
+                ))}
+          </div>
+        </div>
+      </div>
+    </Container>
+  );
+};