contentoh-components-library 21.4.72 → 21.4.73

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

@@ -1,296 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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

@@ -1,105 +0,0 @@
-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>
-  );
-};