contentoh-components-library 21.4.134 → 21.4.136

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

@@ -0,0 +1,106 @@
+import styled, { css } from "styled-components";
+import uploadFile from "../../../assets/images/Icons/upload-file.svg";
+
+export const ImageContainer = styled.div`
+  align-items: center;
+  background: var(--white-main, #fff);
+  border-radius: 7px;
+  border: 1px solid var(--grey-medium, #cbcbcb);
+  cursor: pointer;
+  display: flex;
+  height: 52px;
+  justify-content: center;
+  width: 52px;
+  & > img {
+    border-radius: 7px;
+    height: 100%;
+    width: 100%;
+    object-fit: contain;
+  }
+`;
+
+export const ImageView = styled.div`
+  background: var(--white-main, #fff);
+  border-radius: 5px;
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
+  height: 280px;
+  left: calc(50% - 125px);
+  position: absolute;
+  top: calc(50% - 140px);
+  width: 250px;
+  z-index: 10;
+  .header {
+    align-items: center;
+    background: var(--grey-medium, #cbcbcb);
+    border-radius: 5px 5px 0px 0px;
+    color: var(--white-main, #fff);
+    display: flex;
+    font-family: Roboto;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    height: 30px;
+    justify-content: space-between;
+    line-height: normal;
+    overflow: hidden;
+    padding: 0 9px 0 10px;
+    text-overflow: ellipsis;
+    width: 100%;
+    .buttons {
+      display: flex;
+      gap: 10px;
+      img {
+        cursor: pointer;
+      }
+      label {
+        display: flex;
+        align-items: center;
+        padding: 3px;
+      }
+      .borderCircle {
+        border-radius: 20px;
+        border: 1px solid var(--white-main, #fff);
+      }
+    }
+  }
+  .body {
+    width: 100%;
+    height: calc(100% - 30px);
+    .imageLoaded {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+  ${({ visorView }) =>
+    visorView === "fullscreen" &&
+    css`
+      background: var(--black-main, #262626d9);
+      height: 100%;
+      left: 0;
+      top: 0;
+      width: 100%;
+      .header {
+        background: var(--black-main, #262626);
+        font-size: 14px;
+        height: 45px;
+        .buttons > img {
+          border-radius: 20px;
+          border: 1px solid var(--white-main, #fff);
+          padding: 3px;
+        }
+      }
+      > div {
+        align-items: center;
+        display: flex;
+        height: 100%;
+        justify-content: center;
+        width: 100%;
+        & > img {
+          border-radius: 5px;
+          height: 500px;
+          width: 500px;
+        }
+      }
+    `}
+`;

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

@@ -4,6 +4,10 @@ import { TagAndInput } from "../../molecules/TagAndInput";
 import { BoxOnboarding } from "../BoxOnboarding";
 import { Box } from "../Box";
 import { useEffect, useState } from "react";
+import acceptIcon from "../../../assets/images/generalButton/acceptIcon.svg";
+import rejectIcon from "../../../assets/images/generalButton/rejectIcon.svg";
+import { Tooltip } from "../../atoms/Tooltip";
+import { height, width } from "@mui/system";
 
 export const InputGroup = ({
   inputGroup = {},
@@ -21,8 +25,73 @@ export const InputGroup = ({
   compare,
   groupData = [],
   setUpdatedBoxData,
-  activeRetailer
+  activeRetailer,
+  updateApprovedInputs,
 }) => {
+  const InputReviewSection = ({
+    inputId,
+    isApproved,
+    comment,
+    handleImgClick,
+    changeImageBtn,
+    showDivState,
+    imageStates,
+  }) => (
+    <div style={{ "margin-top": "10px" }}>
+      <Tooltip
+        componentTooltip={
+          <>
+            <p>
+              <b>Comentarios:</b>
+            </p>
+            <p>{comment}</p>
+          </>
+        }
+        children={
+          !isApproved && (
+            <img
+              src={imageStates[inputId] ? acceptIcon : rejectIcon}
+              alt={"botón rechazar"}
+              style={{ cursor: "pointer" }}
+              onClick={() => handleImgClick(inputId)}
+            />
+          )
+        }
+        classNameTooltip={"container-tooltip"}
+      />
+      {showDivState[inputId] && (
+        <div className="btnReviewState">
+          <div>
+            <button
+              id="aceptbtn"
+              onClick={() => changeImageBtn(inputId, "validate")}
+            >
+              <img
+                src={acceptIcon}
+                alt="acept button"
+                style={{ cursor: "pointer" }}
+              />
+              Validar
+            </button>
+          </div>
+          {/* <div>
+            <button
+              id="rejectbtn"
+              onClick={() => changeImageBtn(inputId, "reject")}
+            >
+              <img
+                src={rejectIcon}
+                alt="reject button"
+                style={{ cursor: "pointer" }}
+              />
+              Rechazar
+            </button>
+          </div> */}
+        </div>
+      )}
+    </div>
+  );
+
   const inputTypeValue = (type) => {
     switch (type) {
       case "Booleano":
@@ -34,6 +103,23 @@ export const InputGroup = ({
     }
   };
   const [showBox, setShowBox] = useState(false);
+  const [showDivStates, setShowDivStates] = useState({});
+  const [imageStates, setImageStates] = useState({});
+
+  const handleImgClick = (inputId) => {
+    setShowDivStates((prevStates) => ({
+      ...prevStates,
+      [inputId]: !prevStates[inputId],
+    }));
+  };
+
+  const changeImageBtn = (inputId, action) => {
+    setImageStates((prevStates) => ({
+      ...prevStates,
+      [inputId]: action === "validate",
+    }));
+    updateApprovedInputs(inputId);
+  };
 
   const isEquals = (dataInputsVal, auditInputsVal) => {
     const result = dataInputsVal === auditInputsVal;
@@ -41,7 +127,11 @@ export const InputGroup = ({
   };
 
   useEffect(() => {
-    if (inputGroup.groupId === "16" && activeRetailer && activeRetailer?.retailer?.id) {
+    if (
+      inputGroup.groupId === "16" &&
+      activeRetailer &&
+      activeRetailer?.retailer?.id
+    ) {
       if (activeRetailer?.retailer?.id === 68) {
         setShowBox(true);
       } else {
@@ -50,127 +140,152 @@ export const InputGroup = ({
     }
   }, [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]);
-
   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 && (
-          <ScreenHeader
-            headerType={"retailer-name-header"}
-            text={`${inputGroup?.dataGroup}`}
+          className={
+            activeSection === "Ficha técnica"
+              ? "datasheets-layout"
+              : "descriptions-layout"
+          }
+        >
+          <Box
+            inputGroup={inputGroup}
+            dataInputs={dataInputs}
+            onChange={setUpdatedBoxData}
           />
-        )}
-        <div className="inputs-container">
-          {inputGroup?.inputs?.map((input, index) =>
-            activeSection === "Ficha técnica" ? (
-            <>
-              <TagAndInput
-                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}
-                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"
-                    : ""
-                }
-              />
-            </>
-            ) : (
-              <TagAndInput
-                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}
-                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"
-                    : ""
-                }
-              />            
-            )
+        </Container>
+      )}
+      {inputGroup.groupId !== "16" && (
+        <Container
+          className={
+            activeSection === "Ficha técnica"
+              ? "datasheets-layout"
+              : "descriptions-layout"
+          }
+        >
+          {inputGroup?.dataGroup && (
+            <ScreenHeader
+              headerType={"retailer-name-header"}
+              text={`${inputGroup?.dataGroup}`}
+            />
           )}
-        </div>
-      </Container>
+          <div className="inputs-container">
+            {inputGroup?.inputs?.map((input, index) =>
+              activeSection === "Ficha técnica" ? (
+                <>
+                  <TagAndInput
+                    key={
+                      index +
+                      "-" +
+                      dataInputs[input]?.value +
+                      "-" +
+                      dataInputs[input]?.id +
+                      "-" +
+                      compare
+                    }
+                    //disabled={input === 40001}
+                    disabled={dataInputs[input]?.isApproved}
+                    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}
+                    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"
+                        : ""
+                    }
+                  />
+                  {dataInputs[input]?.isApproved === false && (
+                    <InputReviewSection
+                      inputId={dataInputs[input]?.id}
+                      isApproved={dataInputs[input]?.isApproved}
+                      comment={dataInputs[input]?.comment}
+                      handleImgClick={handleImgClick}
+                      changeImageBtn={changeImageBtn}
+                      showDivState={showDivStates}
+                      imageStates={imageStates}
+                    />
+                  )}
+                </>
+              ) : (
+                <>
+                  {input?.isApproved === false && (
+                    <InputReviewSection
+                      inputId={input?.id}
+                      isApproved={input?.isApproved}
+                      comment={input?.comment}
+                      handleImgClick={handleImgClick}
+                      changeImageBtn={changeImageBtn}
+                      showDivState={showDivStates}
+                      imageStates={imageStates}
+                    />
+                  )}
+                  <TagAndInput
+                    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}
+                    disabled={input?.isApproved}
+                    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"
+                        : ""
+                    }
+                  />
+                </>
+              )
+            )}
+          </div>
+        </Container>
       )}
-       {(inputGroup.groupId === "16" && activeRetailer?.retailer?.id === 74) && (
+      {inputGroup.groupId === "16" && activeRetailer?.retailer?.id === 74 && (
         <Container
           className={
             activeSection === "Ficha técnica"
@@ -199,7 +314,7 @@ export const InputGroup = ({
                       compare
                     }
                     //disabled={input === 40001}
-                    disabled={false}
+                    disabled={dataInputs[input]?.isApproved}
                     inputId={dataInputs[input]?.id}
                     version={version}
                     inputType={inputTypeValue(dataInputs[input]?.type)}
@@ -230,39 +345,72 @@ export const InputGroup = ({
                     onChange={setUpdatedBoxData}
                     auditClass={
                       compare &&
-                      !isEquals(dataInputs[input].value, auditInputs[input].value)
+                      !isEquals(
+                        dataInputs[input].value,
+                        auditInputs[input].value
+                      )
                         ? "audit-class"
                         : ""
                     }
                   />
+                  {dataInputs[input]?.isApproved === false && (
+                    <InputReviewSection
+                      inputId={dataInputs[input]?.id}
+                      isApproved={dataInputs[input]?.isApproved}
+                      comment={dataInputs[input]?.comment}
+                      handleImgClick={handleImgClick}
+                      changeImageBtn={changeImageBtn}
+                      showDivState={showDivStates}
+                      imageStates={imageStates}
+                    />
+                  )}
                 </>
               ) : (
-                <TagAndInput
-                  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}
-                  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"
-                      : ""
-                  }
-                />
+                <>
+                  {input?.isApproved === false && (
+                    <InputReviewSection
+                      inputId={input?.id}
+                      isApproved={input?.isApproved}
+                      comment={input?.comment}
+                      handleImgClick={handleImgClick}
+                      changeImageBtn={changeImageBtn}
+                      showDivState={showDivStates}
+                      imageStates={imageStates}
+                    />
+                  )}
+                  <TagAndInput
+                    key={index + "-" + input?.value + "-" + compare}
+                    inputId={input.id}
+                    index={index}
+                    disabled={input?.isApproved}
+                    inputType={"textarea"}
+                    label={input?.name + (input.required ? "*" : "")}
+                    value={
+                      compare
+                        ? auditInputGroup?.inputs[index]?.value
+                        : input?.value
+                    }
+                    isRequired={input.required}
+                    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"
+                        : ""
+                    }
+                  />
+                </>
               )
             )}
           </div>

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

@@ -33,4 +33,35 @@ export const Container = styled.div`
   & + * {
     margin-top: 15px;
   }
+
+  .btnReviewState {
+    display: "flex";
+    flex-direction: "column";
+    border: 1px solid lightgray;
+    border-radius: 3px;
+    z-index: 1000;
+    /* position: absolute; */
+  }
+
+  .btnReviewState button {
+    border: none;
+    background: white;
+    border-radius: 3px;
+  }
+  .btnReviewState button:hover {
+    background: lightgray;
+  }
+  /* #divBtnsReviewdown {
+    border-left: 1px solid black;
+    border-right: 1px solid black;
+    border-bottom: 1px solid black;
+  }
+  #aceptbtn {
+    background: white;
+    border: none;
+  }
+  #rejectbtn {
+    background: white;
+    border: none;
+  } */
 `;

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" },
+    ],
+  },
+};