contentoh-components-library 21.4.69 → 21.4.71

package/src/components/molecules/HeaderTopv2/styles.js

@@ -0,0 +1,33 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  .buttons-top {
+    display: flex;
+    align-items: center;
+    padding-top: 10px;
+  }
+
+  .buttons-container {
+    display: flex;
+
+    button {
+      width: 30px;
+      height: 30px;
+      border: 1px solid #f0f0f0;
+      background-size: 20px;
+      padding: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      img {
+        height: 15px;
+      }
+
+      & + * {
+        margin-left: 10px;
+      }
+    }
+  }
+`;

package/src/components/molecules/ImageSelectorv2/ImageSelectorv2.stories.js

@@ -0,0 +1,46 @@
+import { ImageSelectorv2 } from "./index";
+
+export default {
+  title: "Components/molecules/ImageSelectorv2",
+  component: ImageSelectorv2,
+  images: {},
+  argTypes: {
+    modalSelector: {
+      options: [true, false],
+      type: "boolean",
+    },
+  },
+};
+
+const Template = (args) => <ImageSelectorv2 {...args} />;
+
+export const ImageSelectorv2Default = Template.bind({});
+
+ImageSelectorv2Default.args = {
+  images: [
+    {
+      img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+      alt: "img",
+    },
+    {
+      img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+      alt: "img",
+    },
+    {
+      img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+      alt: "img",
+    },
+    {
+      img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+      alt: "img",
+    },
+    {
+      img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+      alt: "img",
+    },
+    {
+      img: "https://image.shutterstock.com/image-illustration/3d-render-generic-drug-pills-260nw-709112806.jpg",
+      alt: "img",
+    },
+  ],
+};

package/src/components/molecules/ImageSelectorv2/index.js

@@ -0,0 +1,22 @@
+import { Container } from "./styles";
+import { ProductImagev2 } from "../../atoms/ProductImagev2";
+
+export const ImageSelectorv2 = ({
+  images = [],
+  setActiveImage,
+  modalSelector,
+}) => {
+  return (
+    <Container className={modalSelector && "modal-image-selector"}>
+      {images?.values?.map((image, index) => (
+        <ProductImagev2
+          key={index}
+          img={image.src}
+          altText={image.altText}
+          imageType={modalSelector ? "catalogue-modal-image" : "carousel-image"}
+          onClick={() => setActiveImage(index)}
+        />
+      ))}
+    </Container>
+  );
+};

package/src/components/molecules/ImageSelectorv2/styles.js

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  width: 340px;
+  display: flex;
+  overflow: auto;
+  gap: 10px;
+
+  &.modal-image-selector {
+    width: 377px;
+    height: auto;
+    background: #ffff;
+    border-radius: 10px;
+  }
+`;

package/src/components/molecules/Phase/Phase.stories.js

@@ -0,0 +1,37 @@
+import { Phase } from "./index";
+import { GlobalStatus, GlobalColors } from "../../../global-files/variables";
+
+export default {
+  title: "Components/molecules/Phase",
+  component: Phase,
+  argTypes: {
+    statusType: {
+      options: Object.values(GlobalStatus),
+      control: { type: "select" },
+    },
+    percent: {
+      control: { type: "range", min: 0, max: 100, step: 1 },
+    },
+    backgroundColor: {
+      options: Object.keys(GlobalColors),
+      control: { type: "select" },
+    },
+    priority: {
+      options: ["no priority", "low", "medium", "high"],
+      control: { type: "select" },
+    },
+  },
+};
+
+const Template = (args) => <Phase {...args} />;
+
+export const PhaseDefault = Template.bind({});
+
+PhaseDefault.args = {
+  productName: "Nombre del producto",
+  statusType: "AP",
+  percent: 10,
+  backgroundColor: "s2",
+  priority: "no priority",
+  date: new Date().toLocaleDateString(),
+};

package/src/components/molecules/Phase/index.js

@@ -0,0 +1,56 @@
+import React, { useState, useEffect } from "react";
+import { Container, ContainerIcon } from "./styles";
+import Chip from "@mui/material/Chip";
+import { Button } from "@mui/material";
+import Select from "../../atoms/Select";
+
+export const Phase = ({ id, grupos, phases }) => {
+  const [selectedValue, setSelectedValue] = useState("");
+  const [chips, setChips] = useState([]);
+
+  const onAdd = () => {
+    if (selectedValue) {
+      setChips((prevChips) => [...prevChips, selectedValue]);
+      setSelectedValue("");
+    }
+  };
+  
+
+  return (
+    <Container>
+      <div className="header-phase">
+        <h2>Fase {id}</h2>
+        {id === 1 ? (
+          <p className="text-phase">Al rechazar en esta fase enviar a proveedor</p>
+        ) : (
+          <div className="phase-sel">
+            <p className="text-phase">Al rechazar en esta fase enviar a </p>
+            <Select
+              width="100px"
+              valueSelected={selectedValue}
+              placeholder={`Fase`}
+              options={Array.from({ length: phases.length }, (_, i) => ({
+                value: `${i + 1}`,
+                name: `Fase ${i + 1}`,
+              }))}
+              onChange={(e) => {
+                setSelectedValue(e.target.value);
+              }}
+            />
+          </div>
+        )}
+      </div>
+      <div className="attributes-container">
+        {grupos.map((grupo, index) => (
+          <Chip key={index} label={grupo} disabled={false} />
+        ))}
+        {/* FIXME: agregar funcionalidad del check */}
+        <Button onClick={onAdd} variant="outlined" className="button-circle">
+          <ContainerIcon>
+            <span className="iconos-out iconos-grises">add</span>
+          </ContainerIcon>
+        </Button>
+      </div>
+    </Container>
+  );
+};

package/src/components/molecules/Phase/styles.js

@@ -0,0 +1,82 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction:column;
+  gap:10px;
+  align-items: center;
+  border-radius:10px;
+  border:1px solid ${GlobalColors.gray_light};
+  padding:10px 15px;
+  font-family:${FontFamily.Roboto}, sans-serif;
+  font-size:17px;
+
+ .header-phase{
+  display:flex;
+  justify-content: space-between;
+  width: 100%;
+  padding-bottom: 5px;
+  border-bottom: 1px solid ${GlobalColors.gray_light};
+
+  h2{
+    font-family:${FontFamily.Roboto}, sans-serif;
+    font-size:17px;
+  }
+  p{
+    font-family:${FontFamily.Roboto}, sans-serif;
+    font-size:12px;
+  }
+ }
+ .attributes-container{
+  display: flex;
+  align-self: flex-start;
+  flex-wrap: wrap;
+  gap: 10px;
+ }
+ .phase-sel{
+  display: flex;
+  align-items: center;
+  gap: 10px;
+ }
+ .button-circle{
+  width:30px;
+  height:30px;
+  padding:2px;
+  border-radius:100%;
+  min-width:30px;
+  border: 1px solid ${GlobalColors.magenta_s2};
+}
+.button-circle:hover {
+  border: 1px solid ${GlobalColors.magenta_s2};
+}
+.text-phase{
+  font-family:${FontFamily.Roboto}, sans-serif;
+  font-size:12px;
+  color:${GlobalColors.gray};
+}
+`;
+
+export const ContainerIcon = styled.div`
+cursor: pointer;
+@font-face {
+  font-family: "Material Symbols Outlined";
+  font-style: normal;
+  font-weight: 100 700;
+  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v68/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2)
+    format("woff2");
+}
+.iconos-out {
+  font-family: "Material Symbols Outlined";
+  font-size: 20px;
+  //line-height: 1;
+  margin-top: 10px;
+}
+.iconos-out {
+  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
+  color:  #B64545;
+}
+.iconos-grises {
+  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
+  color:  ${GlobalColors.magenta_s2};
+}`;

package/src/components/molecules/ProductNameHeaderv2/ProductNameHeaderv2.stories.js

@@ -0,0 +1,37 @@
+import { ProductNameHeaderv2 } from "./index";
+import { GlobalStatus, GlobalColors } from "../../../global-files/variables";
+
+export default {
+  title: "Components/molecules/ProductNameHeaderv2",
+  component: ProductNameHeaderv2,
+  argTypes: {
+    statusType: {
+      options: Object.values(GlobalStatus),
+      control: { type: "select" },
+    },
+    percent: {
+      control: { type: "range", min: 0, max: 100, step: 1 },
+    },
+    backgroundColor: {
+      options: Object.keys(GlobalColors),
+      control: { type: "select" },
+    },
+    priority: {
+      options: ["no priority", "low", "medium", "high"],
+      control: { type: "select" },
+    },
+  },
+};
+
+const Template = (args) => <ProductNameHeaderv2 {...args} />;
+
+export const ProductNameHeaderv2Default = Template.bind({});
+
+ProductNameHeaderv2Default.args = {
+  productName: "Nombre del producto",
+  statusType: "AP",
+  percent: 10,
+  backgroundColor: "s2",
+  priority: "no priority",
+  date: new Date().toLocaleDateString(),
+};

package/src/components/molecules/ProductNameHeaderv2/index.js

@@ -0,0 +1,12 @@
+import { Container } from "./styles";
+import { ScreenHeaderv2 } from "../../atoms/ScreenHeaderv2";
+
+export const ProductNameHeaderv2 = ({
+  productName
+}) => {
+  return (
+    <Container>
+      <ScreenHeaderv2 headerType={"product-name-header"} text={productName} />
+    </Container>
+  );
+};

package/src/components/molecules/ProductNameHeaderv2/styles.js

@@ -0,0 +1,10 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+
+  * + * {
+    margin-left: 10px;
+  }
+`;

package/src/components/molecules/ProductSkuStatus/ProductSkuStatus.stories.js

@@ -0,0 +1,37 @@
+import { ProductSkuStatus } from "./index";
+import { GlobalStatus, GlobalColors } from "../../../global-files/variables";
+
+export default {
+  title: "Components/molecules/ProductSkuStatus",
+  component: ProductSkuStatus,
+  argTypes: {
+    statusType: {
+      options: Object.values(GlobalStatus),
+      control: { type: "select" },
+    },
+    percent: {
+      control: { type: "range", min: 0, max: 100, step: 1 },
+    },
+    backgroundColor: {
+      options: Object.keys(GlobalColors),
+      control: { type: "select" },
+    },
+    priority: {
+      options: ["no priority", "low", "medium", "high"],
+      control: { type: "select" },
+    },
+  },
+};
+
+const Template = (args) => <ProductSkuStatus {...args} />;
+
+export const ProductSkuStatusDefault = Template.bind({});
+
+ProductSkuStatusDefault.args = {
+  statusType: "AP",
+  percent: 84,
+  backgroundColor: "s2",
+  priority: "no priority",
+  percentRequired:100,
+  // date: new Date().toLocaleDateString(),
+};

package/src/components/molecules/ProductSkuStatus/index.js

@@ -0,0 +1,26 @@
+import { Container } from "./styles";
+import { Status } from "../../atoms/Status/index";
+import { Progress } from "../../atoms/Progress";
+
+export const ProductSkuStatus = ({
+  statusType,
+  percentRequired,
+  version,
+  setShowVersionSelector,
+  showShield
+}) => {
+  return (
+    <Container>
+      {statusType && <Status statusType={statusType} />}
+      <Progress
+        percent={percentRequired}
+        progressBarType={statusType}
+        percentRequired={percentRequired}
+        version={version}
+        setShowVersionSelector={setShowVersionSelector}
+        showShield={showShield}
+      />
+       
+    </Container>
+  );
+};

package/src/components/molecules/ProductSkuStatus/styles.js

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  gap:10px;
+`;

package/src/components/molecules/RetailerSelectorv2/RetailerSelectorv2.stories.js

@@ -0,0 +1,35 @@
+import { RetailerSelectorv2 } from "./index";
+
+export default {
+  title: "Components/molecules/RetailerSelectorv2",
+  component: RetailerSelectorv2,
+};
+
+const Template = (args) => <RetailerSelectorv2 {...args} />;
+
+export const RetailerSelectorDefault = Template.bind({});
+RetailerSelectorDefault.args = {
+  retailers: [
+    {
+      id: 2,
+      name: "Walmart Mercancías Generales",
+      country: "México",
+      id_region: 1,
+      active: 1,
+    },
+    {
+      id: 3,
+      name: "Sam´s Club",
+      country: "México",
+      id_region: 1,
+      active: 1,
+    },
+    {
+      id: 14,
+      name: "Maskota y Petsy",
+      country: "México",
+      id_region: 1,
+      active: 1,
+    },
+  ],
+};

package/src/components/molecules/RetailerSelectorv2/index.js

@@ -0,0 +1,80 @@
+import { Container } from "./styles";
+import { Avatar } from "../../atoms/Avatar";
+import { useEffect, useState } from "react";
+import { AsignationOption } from "../../atoms/AsignationOption";
+
+export const RetailerSelectorv2 = ({
+  retailers,
+  activeRetailer,
+  setActiveRetailer,
+  showStatus,
+}) => {
+  const [retailersPanel, setRetailersPanel] = useState(false);
+
+  const closeRetailersPanel = (e) => {
+    if (!e.target.closest("#retailers-assignation") && retailersPanel) {
+      document.removeEventListener("click", closeRetailersPanel, false);
+      setRetailersPanel(false);
+    }
+  };
+
+  const getRetailerImage = async () => {
+    activeRetailer.image = `https://content-management-images.s3.amazonaws.com/retailers/${activeRetailer.id}.png`;
+    retailers.forEach(
+      (retailer) =>
+        (retailer.image = `https://content-management-images.s3.amazonaws.com/retailers/${retailer.id}.png`)
+    );
+  };
+
+  useEffect(() => {
+    if (retailersPanel) {
+      document.addEventListener("click", closeRetailersPanel, false);
+    }
+  }, [retailersPanel]);
+
+  useEffect(() => {
+    getRetailerImage();
+  }, [activeRetailer]);
+
+  return (
+    <Container id="retailers-assignation">
+      <Avatar
+        image={activeRetailer?.image}
+        altText={activeRetailer?.name}
+        imageType={"medium-image"}
+        onClick={() => {
+          retailers?.length > 0 && setRetailersPanel(!retailersPanel);
+          if (retailersPanel)
+            document.removeEventListener("click", closeRetailersPanel, false);
+        }}
+      />
+      
+      {retailersPanel && (
+        <div className="retailers-panel">
+          {retailers.map((retailer, index) => (
+            <AsignationOption
+              key={`${index}-${retailer?.name}`}
+              profileImage={retailer?.image}
+              imageType={"medium-image"}
+              asignationType={null}
+              name={retailer?.name}
+              team={retailer?.team}
+              services={retailer?.services}
+              onClick={() => {
+                setActiveRetailer(retailer);
+                document.removeEventListener(
+                  "click",
+                  closeRetailersPanel,
+                  false
+                );
+                setRetailersPanel(false);
+              }}
+              active={retailer.id === activeRetailer.id}
+              showStatus={showStatus}
+            />
+          ))}
+        </div>
+      )}
+    </Container>
+  );
+};

package/src/components/molecules/RetailerSelectorv2/styles.js

@@ -0,0 +1,21 @@
+import styled from "styled-components";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  position: relative;
+  cursor: pointer;
+  display: flex;
+
+  .retailers-panel {
+    background: ${GlobalColors.s2};
+    border: 1px solid ${GlobalColors.s3};
+    box-sizing: border-box;
+    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
+    border-radius: 4px;
+    padding: 10px;
+    position: absolute;
+    top: calc(100% + 10px);
+    right: 0;
+    z-index: 10;
+  }
+`;

package/src/components/molecules/ServiceDataValidator/ServiceDataValidator.stories.js

@@ -0,0 +1,90 @@
+import { ServiceDataValidator } from "./index";
+
+export default {
+  title: "Components/molecules/ServiceDataValidator",
+  component: ServiceDataValidator,
+};
+
+const Template = (args) => <ServiceDataValidator {...args} />;
+
+export const ServiceDataValidatorDefault = Template.bind({});
+ServiceDataValidatorDefault.args = {
+ activeRetailer:{
+    id:34,
+    image:"https://content-management-images.s3.amazonaws.com/retailers/34.png",
+    name:"San Pablo",
+    services:["AA", "AP", "AA"]
+  },
+  headerData:{
+    "orderId": 15275,
+    "status": "AA",
+    "datasheet_status": "AA",
+    "prio": "none",
+    "version": 3,
+    "description_status": "AA",
+    "images_status": "AA",
+    "brand": null,
+    "retailerOrder": 0,
+    "missing": {
+      "datasheet": null,
+      "descriptions": null,
+      "images": null
+    },
+    "services": {
+      "datasheets": 1,
+      "descriptions": 1,
+      "images": 1
+    },
+    "article": {
+      "category": "Abarrotes|Abarrotes Secos|Frutos Secos",
+      "company_name": "GRUPO BRAHMA",
+      "country": "México",
+      "id_category": "11",
+      "id_datasheet_especialist": 54,
+      "id_datasheet_facilitator": 52,
+      "id_description_especialist": 54,
+      "id_description_facilitator": 52,
+      "id_images_especialist": 55,
+      "id_images_facilitator": 53,
+      "id_order": 15275,
+      "id_article": 39485,
+      "id_auditor": 37,
+      "name": "Mix de nueces",
+      "timestamp": "2023-07-14T21:03:19.000Z",
+      "upc": "7543453453"
+    },
+    "retailers": [
+      {
+        "id": 34,
+        "name": "San Pablo",
+        "services": [
+          "AA",
+          "AP",
+          "AA"
+        ],
+        "image": "https://content-management-images.s3.amazonaws.com/retailers/34.png"
+      }
+    ],
+    "statusByRetailer": {
+      "34": {
+        "datasheet": "AA",
+        "description": "AA",
+        "images": "AA"
+      }
+    },
+    "retailersAvailable": [
+      {
+        "id": 34,
+        "name": "San Pablo"
+      }
+    ],
+    "categoryName": "Abarrotes|Abarrotes Secos|Frutos Secos",
+    "upc": "7543453453",
+    "id_article": 39485,
+    "id_order": 15275
+  },
+  showApproveRejectAll:true,
+  showValidationButtons:true,
+  text:"Descripción",
+  missingData:1,
+}