contentoh-components-library 21.0.9 → 21.0.13

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

@@ -5,16 +5,10 @@ import { useState } from "react";
 
 export const FullTabsMenu = ({
   tabsSections,
-  status = "",
-  activeTab,
+  status,
+  profileImage,
   setActiveTab,
   setImageLayout,
-  assig,
-  setAssignation,
-  isRetailer,
-  downloadImages,
-  askToDeleteImages,
-  onClickSave,
 }) => {
   const [imagesSection, setImagesSection] = useState(false);
 
@@ -26,16 +20,10 @@ export const FullTabsMenu = ({
         setActiveTab={setActiveTab}
       />
       <StatusAsignationInfo
-        status={status()}
-        activeTab={activeTab}
+        status={status}
+        image={profileImage}
         setImageLayout={setImageLayout}
         imagesSection={imagesSection}
-        assignationsImages={assig}
-        setAssignation={setAssignation}
-        isRetailer={isRetailer}
-        downloadImages={downloadImages}
-        onClickSave={onClickSave}
-        askToDeleteImages={askToDeleteImages}
       />
     </Container>
   );

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

@@ -1,102 +1,24 @@
 import { Container } from "./styles";
 import { TableHeader } from "../../molecules/TableHeader";
-import { Container as Row } from "../../molecules/TableRow/styles";
-import { ScreenHeader } from "../../atoms/ScreenHeader";
-import LabelToInput from "../../atoms/LabelToInput";
+import { TableRow } from "../../molecules/TableRow";
 
 export const ImageDataTable = ({
+  headerInfo,
+  imageData,
   activeImage,
   darkMode,
-  lists,
-  retailerSelected,
-  setImages,
-  assignationsImages,
-  imagesStatus,
-  setAssignation,
-  isRetailer,
-  onClickSave,
 }) => {
   return (
     <Container darkMode={darkMode}>
-      <TableHeader
-        imagesStatus={imagesStatus}
-        activeImage={activeImage}
-        assignationsImages={assignationsImages}
-        setAssignation={setAssignation}
-        isRetailer={isRetailer}
-        onClickSave={onClickSave}
-      />
-      <Row>
-        <ScreenHeader headerType={"table-row-text"} text="Tipo de toma" />
-        <ScreenHeader
-          headerType={"table-row-text gray-table-row"}
-          text={
-            lists?.inputs?.find((f) => f.id === +activeImage?.image_id)?.name ||
-            "-"
-          }
+      <TableHeader headerInfo={headerInfo} activeImage={activeImage} />
+      {imageData?.map((attribute, index) => (
+        <TableRow
+          key={index}
+          feature={attribute.feature}
+          value={attribute.value}
+          valueType={index < 2}
         />
-      </Row>
-      <Row>
-        <ScreenHeader headerType={"table-row-text"} text="Tipo de empaque" />
-        <ScreenHeader
-          headerType={"table-row-text gray-table-row"}
-          text={
-            lists?.imagePackagingType?.find(
-              (f) => f.id === +activeImage?.packing_type
-            )?.name || "-"
-          }
-        />
-      </Row>
-      <Row>
-        <ScreenHeader headerType={"table-row-text"} text="Tipo de imagen" />
-        <ScreenHeader
-          headerType={"table-row-text gray-table-row"}
-          text={
-            lists?.imageType?.find((f) => f.id === +activeImage?.image_type)
-              ?.name || "-"
-          }
-        />
-      </Row>
-      <Row>
-        <ScreenHeader headerType={"table-row-text"} text="Formato" />
-        <ScreenHeader
-          headerType={"table-row-text"}
-          text={activeImage?.ext || "-"}
-        />
-      </Row>
-      <Row>
-        <ScreenHeader headerType={"table-row-text"} text="Tamaño de imagen" />
-        <ScreenHeader
-          headerType={"table-row-text"}
-          text={
-            activeImage?.width && activeImage.height
-              ? `${activeImage?.width}x${activeImage?.height}px`
-              : "-"
-          }
-        />
-      </Row>
-      {retailerSelected &&
-        lists?.attrForImgs &&
-        lists?.attrForImgs[retailerSelected]?.map((attr, index) => (
-          <Row key={"row-" + index}>
-            <ScreenHeader
-              headerType={"table-row-text"}
-              text={attr?.name || "-"}
-            />
-            <LabelToInput
-              width="100px"
-              defaultValue={attr?.value}
-              onChange={(e) => {
-                setImages({
-                  action: "changeAttrValue",
-                  retailer: retailerSelected,
-                  index,
-                  value: e.target.value || "-",
-                });
-              }}
-            />
-          </Row>
-        ))}
+      ))}
     </Container>
   );
 };

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

@@ -6,13 +6,6 @@ export const InputGroup = ({
   inputGroup = {},
   activeSection,
   dataInputs = {},
-  updatedDescriptions,
-  setUpdatedDescriptions,
-  updatedDatasheets,
-  setUpdatedDatasheets,
-  articleId,
-  version,
-  dinamicHeight,
 }) => {
   const inputTypeValue = (type) => {
     switch (type) {
@@ -24,6 +17,7 @@ export const InputGroup = ({
         return "text";
     }
   };
+
   return (
     <Container
       className={
@@ -32,58 +26,29 @@ export const InputGroup = ({
           : "descriptions-layout"
       }
     >
-      {inputGroup?.dataGroup && (
-        <ScreenHeader
-          headerType={"retailer-name-header"}
-          text={inputGroup?.dataGroup}
-        />
-      )}
+      <ScreenHeader
+        headerType={"retailer-name-header"}
+        text={inputGroup?.dataGroup}
+      />
       <div className="inputs-container">
         {inputGroup?.inputs?.map((input, index) =>
           activeSection === "Ficha técnica" ? (
             <TagAndInput
-              key={
-                index +
-                "-" +
-                dataInputs[input]?.value +
-                "-" +
-                dataInputs[input]?.id
-              }
-              inputId={dataInputs[input]?.id}
-              version={version}
+              key={index}
+              inputId={"datasheet-" + dataInputs[input]?.id + "-" + index}
               inputType={inputTypeValue(dataInputs[input]?.type)}
-              label={
-                dataInputs[input]?.name +
-                (dataInputs[input]?.required ? "*" : "")
-              }
+              label={dataInputs[input]?.name}
               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
-              }
             />
           ) : (
             <TagAndInput
-              key={index + "-" + input?.value}
-              inputId={input.id}
-              index={index}
+              key={index}
+              inputId={"description-" + input?.id + "-" + index}
               inputType={"textarea"}
-              label={input?.name + (input.required ? "*" : "")}
+              label={input?.name}
               value={input?.value}
-              isRequired={input.required}
-              maxChar={input.max_chars}
               inputPlaceHolder={input?.placeholder}
-              updatedDescriptions={updatedDescriptions}
-              setUpdatedDescriptions={setUpdatedDescriptions}
-              articleId={articleId}
-              version={version}
-              dinamicHeight={dinamicHeight}
             />
           )
         )}

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

@@ -23,9 +23,6 @@ export const Container = styled.div`
         flex: 1 1 20%;
         margin-right: 10px;
         min-width: 227px;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
       }
     }
   }

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

@@ -5,16 +5,17 @@ import { ImageSelector } from "../../molecules/ImageSelector";
 import { useState, useEffect } from "react";
 import { ValidationPanel } from "../../atoms/ValidationPanel";
 import { Button } from "../../atoms/GeneralButton";
+import { getImage } from "../../../global-files/data";
 
 export const ProductImageModal = ({
   images = [],
   headerInfo,
   validation,
   setShowModal,
-  sendToFacilitator,
-  approveRejectButtons,
 }) => {
-  const [activeImage, setActiveImage] = useState(0);
+  const [activeImage, setActiveImage] = useState(
+    getImage(images?.values[0], 710, 710)
+  );
   const [buttonType, setButtonType] = useState(
     validation ? validation : "null-button"
   );
@@ -41,25 +42,18 @@ export const ProductImageModal = ({
       <div className="modal-container">
         <div className="modal-image-container">
           <ProductImage
-            img={
-              "https://" +
-              process.env.REACT_APP_IMAGES_BUCKET +
-              ".s3.amazonaws.com/" +
-              images?.values[activeImage]?.srcDB
-            }
-            altText={images?.values[activeImage]?.name}
+            img={activeImage.src}
+            altText={activeImage?.name}
             imageType={"expanded-modal-image"}
           />
         </div>
         <div className="modal-data-container">
           <div className="validation-and-table-container">
             <div className="validation-panel">
-              {approveRejectButtons("images") && (
-                <Button
-                  buttonType={`circular-button ${buttonType}`}
-                  onClick={() => setShowValidationPanel(true)}
-                />
-              )}
+              <Button
+                buttonType={`circular-button ${buttonType}`}
+                onClick={() => setShowValidationPanel(true)}
+              />
               <Button
                 buttonType={"close-button"}
                 onClick={() => {
@@ -72,16 +66,14 @@ export const ProductImageModal = ({
                   id="validation-panel"
                   setOptionClicked={setButtonType}
                   setShowValidationPanel={setShowValidationPanel}
-                  sendToFacilitator={sendToFacilitator}
                 />
               )}
             </div>
             <ImageDataTable
-              imageData={images?.values[activeImage]?.data}
+              imageData={activeImage.data}
               headerInfo={headerInfo}
-              activeImage={images?.values[activeImage]}
+              activeImage={activeImage}
               darkMode={true}
-              lists={images}
             />
           </div>
           <ImageSelector

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

@@ -11,9 +11,6 @@ export const Container = styled.div`
   position: fixed;
   background-color: rgba(59, 59, 59, 0.53);
   backdrop-filter: blur(4px);
-  left: 0;
-  top: 0;
-  z-index: 100;
 
   .modal-container {
     display: flex;