contentoh-components-library 21.4.69 → 21.4.71

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

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  & + * {
+    margin-top: 10px;
+  }
+`;

package/src/components/organisms/InputGroupv2/InputGroupv2.stories.js

@@ -0,0 +1,31 @@
+import { InputGroupv2 } from "./index";
+
+export default {
+  title: "Components/organisms/InputGroupv2",
+  component: InputGroupv2,
+  argTypes: {
+    activeSection: {
+      options: [true, false],
+      control: { type: "boolean" },
+    },
+  },
+};
+
+const Template = (args) => <InputGroupv2 {...args} />;
+
+export const InputGroupDefault = Template.bind({});
+InputGroupDefault.args = {
+  InputGroupv2: {
+    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" },
+    ],
+  },
+};

package/src/components/organisms/InputGroupv2/index.js

@@ -0,0 +1,296 @@
+import { Container } from "./styles";
+import { TagAndInputv2 } from "../../molecules/TagAndInputv2";
+import { ScreenHeaderv2 } from "../../atoms/ScreenHeaderv2";
+import { useState, useEffect } from "react";
+import { Box } from "../Box";
+
+export const InputGroupv2 = ({
+  inputGroup = {},
+  auditInputGroup,
+  activeSection,
+  dataInputs = {},
+  auditInputs = {},
+  updatedDescriptions,
+  setUpdatedDescriptions,
+  updatedDatasheets,
+  setUpdatedDatasheets,
+  articleId,
+  version,
+  dinamicHeight,
+  compare,
+  activeRetailer,
+  setUpdatedBoxData,
+  showMissingChars,
+}) => {
+  const inputTypeValue = (type) => {
+    switch (type) {
+      case "Booleano":
+        return "checkbox";
+      case "Numérico":
+        return "number";
+      default:
+        return "text";
+    }
+  };
+  const [showBox, setShowBox] = useState(false);
+
+  const isEquals = (dataInputsVal, auditInputsVal) => {
+    const result = dataInputsVal === auditInputsVal;
+    return result;
+  };
+
+  
+  useEffect(() => {
+    if (inputGroup.groupId === "16" && activeRetailer && activeRetailer?.retailer?.id) {
+      if (activeRetailer?.retailer?.id === 68) {
+        setShowBox(true);
+      } else {
+        setShowBox(false);
+      }
+    }
+  }, [activeRetailer, inputGroup.groupId]);
+
+  // useEffect(() => {
+  //   if (showBox) {
+  //     // Realiza la acción que deseas cuando showBox es true
+  //     console.log("showBox es true");
+  //   } else {
+  //     // Realiza la acción que deseas cuando showBox es false
+  //     console.log("showBox es false");
+  //   }
+  // }, [showBox]);
+  // console.log("dataInputs",dataInputs);
+
+  return (
+    <>
+    {inputGroup.groupId === "16" && activeRetailer?.retailer?.id === 68 && (
+      <Container
+        className={
+          activeSection === "Ficha técnica"
+            ? "datasheets-layout"
+            : "descriptions-layout"
+        }
+      >
+        <Box
+          inputGroup={inputGroup}
+          dataInputs={dataInputs}
+          onChange={setUpdatedBoxData}
+        />
+      </Container>
+    )}
+    {(inputGroup.groupId !== "16") && (
+      <Container
+        className={
+          activeSection === "Ficha técnica"
+            ? "datasheets-layout"
+            : "descriptions-layout"
+        }
+      >
+        {inputGroup?.dataGroup && (
+          <ScreenHeaderv2
+            headerType={"retailer-name-header"}
+            text={`${inputGroup?.dataGroup}`}
+          />
+        )}
+        <div className="inputs-container">
+          {inputGroup?.inputs?.map((input, index) =>
+            activeSection === "Ficha técnica" ? (
+              <>
+                <TagAndInputv2
+                  key={
+                    index +
+                    "-" +
+                    dataInputs[input]?.value +
+                    "-" +
+                    dataInputs[input]?.id +
+                    "-" +
+                    compare
+                  }
+                  //disabled={input === 40001}
+                  disabled={false}
+                  inputId={dataInputs[input]?.id}
+                  version={version}
+                  inputType={inputTypeValue(dataInputs[input]?.type)}
+                  label={
+                    dataInputs[input]?.name +
+                    (dataInputs[input]?.required ? "*" : "")
+                  }
+                  value={
+                    compare
+                      ? auditInputs[input]?.value
+                      : dataInputs[input]?.value
+                  }
+                  inputPlaceHolder={input?.placeholder}
+                  articleId={articleId}
+                  isRequired={dataInputs[input]?.required}
+                  required={dataInputs[input]?.required}
+                  minWords={dataInputs[input]?.min_words}
+                  maxWords={dataInputs[input]?.max_words}
+                  minChar={dataInputs[input]?.min_chars}
+                  updatedDatasheets={updatedDatasheets}
+                  setUpdatedDatasheets={setUpdatedDatasheets}
+                  maxChar={
+                    dataInputs[input]?.max_chars
+                      ? dataInputs[input]?.max_chars
+                      : 999
+                  }
+                  optionList={dataInputs[input]?.option_list}
+                  description={dataInputs[input]?.description}
+                  showTooltip={true}
+                  auditClass={
+                    compare &&
+                    !isEquals(dataInputs[input].value, auditInputs[input].value)
+                      ? "audit-class"
+                      : ""
+                  }
+                  showMissingChars={showMissingChars}
+                />
+              </>
+            ) : (
+              <TagAndInputv2
+                key={index + "-" + input?.value + "-" + compare}
+                inputId={input.id}
+                index={index}
+                inputType={"textarea"}
+                label={input?.name + (input.required ? "*" : "")}
+                value={
+                  compare ? auditInputGroup?.inputs[index]?.value : input?.value
+                }
+                isRequired={input.required}
+                required={input.required}
+                minWords={input?.min_words}
+                maxWords={input?.max_words}
+                minChar={input?.min_chars}
+                maxChar={input.max_chars}
+                inputPlaceHolder={input?.placeholder}
+                updatedDescriptions={updatedDescriptions}
+                setUpdatedDescriptions={setUpdatedDescriptions}
+                articleId={articleId}
+                version={version}
+                dinamicHeight={dinamicHeight}
+                description={input?.description}
+                showTooltip={true}
+                auditClass={
+                  compare &&
+                  !isEquals(input?.value, auditInputGroup?.inputs[index]?.value)
+                    ? "audit-class"
+                    : ""
+                }
+                showMissingChars={showMissingChars}
+              />
+            )
+          )}
+        </div>
+      </Container>
+    )}
+     {(inputGroup.groupId === "16" && activeRetailer?.retailer?.id === 74) && (
+      <Container
+        className={
+          activeSection === "Ficha técnica"
+            ? "datasheets-layout"
+            : "descriptions-layout"
+        }
+      >
+        {inputGroup?.dataGroup && (
+          <ScreenHeaderv2
+            headerType={"retailer-name-header"}
+            text={`${inputGroup?.dataGroup}`}
+          />
+        )}
+        <div className="inputs-container">
+          {inputGroup?.inputs?.map((input, index) =>
+            activeSection === "Ficha técnica" ? (
+              <>
+                <TagAndInputv2
+                  key={
+                    index +
+                    "-" +
+                    dataInputs[input]?.value +
+                    "-" +
+                    dataInputs[input]?.id +
+                    "-" +
+                    compare
+                  }
+                  //disabled={input === 40001}
+                  disabled={false}
+                  inputId={dataInputs[input]?.id}
+                  version={version}
+                  inputType={inputTypeValue(dataInputs[input]?.type)}
+                  label={
+                    dataInputs[input]?.name +
+                    (dataInputs[input]?.required ? "*" : "")
+                  }
+                  value={
+                    compare
+                      ? auditInputs[input]?.value
+                      : dataInputs[input]?.value
+                  }
+                  inputPlaceHolder={input?.placeholder}
+                  articleId={articleId}
+                  isRequired={dataInputs[input]?.required}
+                  required={input.required}
+                  minWords={input?.min_words}
+                  maxWords={input?.max_words}
+                  minChar={input?.min_chars}
+                  updatedDatasheets={updatedDatasheets}
+                  setUpdatedDatasheets={setUpdatedDatasheets}
+                  maxChar={
+                    dataInputs[input]?.max_chars
+                      ? dataInputs[input]?.max_chars
+                      : 999
+                  }
+                  optionList={dataInputs[input]?.option_list}
+                  description={dataInputs[input]?.description}
+                  showTooltip={true}
+                  inputGroup={inputGroup}
+                  dataInputs={dataInputs}
+                  onChange={setUpdatedBoxData}
+                  auditClass={
+                    compare &&
+                    !isEquals(dataInputs[input].value, auditInputs[input].value)
+                      ? "audit-class"
+                      : ""
+                  }
+                  showMissingChars={showMissingChars}
+                />
+              </>
+            ) : (
+              <TagAndInputv2
+                key={index + "-" + input?.value + "-" + compare}
+                inputId={input.id}
+                index={index}
+                inputType={"textarea"}
+                label={input?.name + (input.required ? "*" : "")}
+                value={
+                  compare ? auditInputGroup?.inputs[index]?.value : input?.value
+                }
+                isRequired={input.required}
+                required={input.required}
+                minWords={input?.min_words}
+                maxWords={input?.max_words}
+                minChar={input?.min_chars}
+                maxChar={input.max_chars}
+                inputPlaceHolder={input?.placeholder}
+                updatedDescriptions={updatedDescriptions}
+                setUpdatedDescriptions={setUpdatedDescriptions}
+                articleId={articleId}
+                version={version}
+                dinamicHeight={dinamicHeight}
+                description={input?.description}
+                showTooltip={true}
+                auditClass={
+                  compare &&
+                  !isEquals(input?.value, auditInputGroup?.inputs[index]?.value)
+                    ? "audit-class"
+                    : ""
+                }
+                showMissingChars={showMissingChars}
+              />
+            )
+          )}
+        </div>
+      </Container>
+    )}
+  </>
+);
+}  

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

@@ -0,0 +1,90 @@
+import styled from "styled-components";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  border-radius: 6px;
+  padding: 10px;
+  width: 100%;
+
+  .retailer-name-header {
+    & + * {
+      margin-top: 10px;
+    }
+  }
+  &.datasheets-layout {
+    border: 1px solid ${GlobalColors.gray_light};
+    padding: 18px;
+    border-radius: 10px;
+
+    .inputs-container {
+      display: flex;
+      flex-wrap: wrap;
+      width: 100%;
+      gap: 10px;
+
+      .input-container {
+        flex: 1 1 20%;
+        min-width: 227px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 10px;
+      }
+    }
+  }
+  &.datasheets-layout .title-container {
+    width:auto;
+    white-space:nowrap;
+  }
+
+  & + * {
+    margin-top: 15px;
+  }
+  .title-container {
+    display:flex;
+    gap:8px;
+  }
+
+  &.descriptions-layout .title-container {
+    width:20%;
+  }
+
+  &.descriptions-layout {
+    .inputs-container{
+      .input-container{
+        display: flex;
+        align-items: center;
+        gap:8px;
+        margin-top:10px;
+      }
+    }
+  }
+`;
+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");
+  }
+
+  .hola {
+    font-family: "Material Symbols Outlined";
+    font-size: 30px;
+    //line-height: 1;
+    margin-top: 10px;
+  }
+  .hola {
+    font-variation-settings: "FILL"
+        ${(props) => (props.percentageRequired < 100 ? 0 : 1)},
+      "wght" 400, "GRAD" 0, "opsz" 48;
+    
+  }
+  .icono-police{
+    font-size:20px;
+    color: ${(props) =>
+      props.percentageRequired < 100 ? "#d4d1d7" : "#ECDD1D"};
+  }
+`;

package/src/components/organisms/MandatoryBar/MandatoryBar.stories.js

@@ -0,0 +1,18 @@
+import { MandatoryBar } from "./index";
+
+export default {
+  title: "Components/organisms/MandatoryBar",
+  component: MandatoryBar,
+  argTypes: {
+    
+  },
+};
+
+const Template = (args) => <MandatoryBar {...args} />;
+
+export const MandatoryBarDefault = Template.bind({});
+MandatoryBarDefault.args = {
+  MandatoryBar: {
+    
+  },
+};

package/src/components/organisms/MandatoryBar/index.js

@@ -0,0 +1,31 @@
+import { NumberMandatory } from "../../atoms/NumberMandatory";
+import { Container } from "./styles";
+
+export const MandatoryBar = ({
+  obligatorias,
+  minimas,
+  maximas
+}) => {
+  return (
+    <Container>
+      <NumberMandatory
+        number={obligatorias}
+        required={true}
+        typeImage={"obligatorias"}
+        typeSingle={"obligatoria"}
+      ></NumberMandatory>
+      <NumberMandatory
+        number={minimas}
+        required={false}
+        typeImage={"mínimas"}
+        typeSingle={"mínimas"}
+      ></NumberMandatory>
+      <NumberMandatory
+        number={maximas}
+        required={false}
+        typeImage={"máximas"}
+        typeSingle={"máximas"}
+      ></NumberMandatory>
+    </Container>
+);
+}  

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

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  width: fit-content;
+  height:60px;
+  display: flex;
+  gap: 10px;
+  padding:22px 15px;
+  border:1px solid ${GlobalColors.gray_light};
+  border-radius:10px;
+`;

package/src/components/organisms/ProductImageModalv2/ProductImageModalv2.stories.js

@@ -0,0 +1,90 @@
+import { ProductImageModalv2 } from "./index";
+
+export default {
+  title: "Components/organisms/ProductImageModalv2",
+  component: ProductImageModalv2,
+};
+
+const Template = (args) => <ProductImageModalv2 {...args} />;
+
+export const ProductImageModalv2Default = Template.bind({});
+ProductImageModalv2Default.args = {
+  headerInfo: {},
+
+  images: {
+    values: [
+      {
+        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" },
+        ],
+      },
+    ],
+  },
+};

package/src/components/organisms/ProductImageModalv2/index.js

@@ -0,0 +1,105 @@
+import { Container } from "./styles";
+import { useState, useEffect } from "react";
+import { ValidationPanel } from "../../atoms/ValidationPanel";
+import { Button } from "../../atoms/GeneralButton/index";
+import { ProductImagev2 } from "../../atoms/ProductImagev2";
+import { ImageSelectorv2 } from "../../molecules/ImageSelectorv2";
+import { ImageDataTablev2 } from "../ImageDataTablev2";
+
+export const ProductImageModalv2 = ({
+  images = [],
+  headerInfo,
+  validation,
+  setShowModal,
+  sendToFacilitator,
+  approveRejectButtons = false,
+}) => {
+  const [activeImage, setActiveImage] = useState(0);
+  const [buttonType, setButtonType] = useState(
+    validation ? validation : "null-button"
+  );
+  const [showValidationPanel, setShowValidationPanel] = useState(false);
+
+  const closeValidationPanel = (e) => {
+    if (
+      !e.target.closest("#validation-panel") ||
+      (e.target.closest(".validation-option") && showValidationPanel)
+    ) {
+      document.removeEventListener("click", closeValidationPanel, false);
+      setShowValidationPanel(false);
+    }
+  };
+
+  useEffect(() => {
+    if (showValidationPanel) {
+      document.addEventListener("click", closeValidationPanel, false);
+    }
+  }, [showValidationPanel]);
+
+  return (
+    <Container>
+      <div className="modal-container">
+        <div className="modal-image-container">
+          <ProductImagev2
+            img={
+              "https://" +
+              process.env.REACT_APP_IMAGES_BUCKET +
+              ".s3.amazonaws.com/" +
+              images?.values[activeImage]?.srcDB
+            }
+            altText={images?.values[activeImage]?.name}
+            imageType={"expanded-modal-image"}
+          />
+        </div>
+        <div className="modal-data-container">
+          <div className="validation-and-table-container">
+            <div className="validation-panel">
+              {/* {approveRejectButtons && (
+                <Button
+                  buttonType={`circular-button ${buttonType}`}
+                  onClick={() => setShowValidationPanel(true)}
+                />
+              )} */}
+              <Button
+                buttonType="general-white-button close-button-white"
+                onClick={() => {
+                  setShowModal(false);
+                }}
+              />
+
+        {/* <Button
+          buttonType="general-white-button close-buttonv2"
+          onClick={() => {
+            window.location.href = `/products`;
+          }}
+        /> */}
+
+              {/* {showValidationPanel && (
+                <ValidationPanel
+                  id="validation-panel"
+                  setOptionClicked={setButtonType}
+                  setShowValidationPanel={setShowValidationPanel}
+                  approve={() => sendToFacilitator && sendToFacilitator("A")}
+                  reject={() => sendToFacilitator && sendToFacilitator("R")}
+                />
+              )} */}
+            </div>
+
+            <ImageDataTablev2
+              imageData={images?.values[activeImage]?.data}
+              headerInfo={headerInfo}
+              activeImage={images?.values[activeImage]}
+              darkMode={true}
+              lists={images}
+            />
+          </div>
+          <ImageSelectorv2
+            images={images}
+            setActiveImage={setActiveImage}
+            modalSelector={true}
+          />
+        </div>
+      </div>
+    </Container>
+  );
+};