contentoh-components-library 21.0.64 → 21.0.65

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

@@ -0,0 +1,63 @@
+import { Container } from "./styles";
+import { Avatar } from "../../atoms/Avatar";
+import { useEffect, useState } from "react";
+import { AsignationOption } from "../../atoms/AsignationOption";
+
+export const RetailerSelector = ({
+  retailers,
+  activeRetailer,
+  setActiveRetailer,
+}) => {
+  const [retailersPanel, setRetailersPanel] = useState(false);
+
+  const closeRetailersPanel = (e) => {
+    if (!e.target.closest("#retailers-assignation") && retailersPanel) {
+      document.removeEventListener("click", closeRetailersPanel, false);
+      setRetailersPanel(false);
+    }
+  };
+
+  useEffect(() => {
+    if (retailersPanel) {
+      document.addEventListener("click", closeRetailersPanel, false);
+    }
+  }, [retailersPanel]);
+
+  return (
+    <Container id="retailers-assignation">
+      <Avatar
+        image={activeRetailer?.image}
+        altText={activeRetailer?.name}
+        imageType={"medium-image"}
+        onClick={() => {
+          retailers.length > 1 && 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}
+              onClick={() => {
+                setActiveRetailer(retailer);
+                document.removeEventListener(
+                  "click",
+                  closeRetailersPanel,
+                  false
+                );
+                setRetailersPanel(false);
+              }}
+            />
+          ))}
+        </div>
+      )}
+    </Container>
+  );
+};

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

@@ -0,0 +1,18 @@
+import styled from "styled-components";
+import { GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  position: relative;
+  .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/StatusAsignationInfo/index.js

@@ -5,20 +5,24 @@ import { StatusTag } from "../../atoms/StatusTag/index";
 import { Button } from "../../atoms/GeneralButton";
 import { useEffect, useState } from "react";
 import { AsignationOption } from "../../atoms/AsignationOption/index";
+import { getProfilePicture } from "../../../global-files/data";
 
 export const StatusAsignationInfo = ({
   status = "-",
-  src,
   imagesSection,
   setImageLayout,
-  asignationsList,
   percent = 0,
-  saveImages,
-  deleteImages,
+  assignationsImages,
+  setAssignation,
+  isRetailer,
+  downloadImages,
+  askToDeleteImages,
   id = "default-id",
+  onClickSave,
 }) => {
   const [showAsignationPanel, setShowAsignationPanel] = useState(false);
-  const [layout, setLayout] = useState(true);
+  const [layout, setLayout] = useState(false);
+  const [assignationType, setAssignationType] = useState("facilitator");
 
   const closeAsignations = (e) => {
     if (!e.target.closest("#default-id") && showAsignationPanel) {
@@ -35,18 +39,22 @@ export const StatusAsignationInfo = ({
 
   return (
     <Container id={id}>
+      <Button
+        buttonType={"circular-button save-button"}
+        onClick={onClickSave}
+      />
       {imagesSection && (
         <div className="images-buttons">
           <Button
-            buttonType={"circular-button save-button"}
+            buttonType={"circular-button delete-button"}
             onClick={() => {
-              saveImages && saveImages();
+              askToDeleteImages && askToDeleteImages();
             }}
           />
           <Button
-            buttonType={"circular-button delete-button"}
+            buttonType={"circular-button download-button"}
             onClick={() => {
-              deleteImages && deleteImages();
+              downloadImages();
             }}
           />
           <Button
@@ -59,14 +67,20 @@ export const StatusAsignationInfo = ({
         </div>
       )}
       <StatusTag statusType={status} ovalForm={true} />
-      <Avatar
-        imageType={"small-image"}
-        image={src}
-        altText="user profile image"
-        onClick={() => {
-          setShowAsignationPanel(true);
-        }}
-      />
+      <div className="assignations-container">
+        {assignationsImages?.assignations?.map((assignation, index) => (
+          <Avatar
+            key={index + "-" + assignation.id}
+            imageType={"small-image"}
+            image={getProfilePicture(assignation.id, 20, 20)}
+            altText="user profile image"
+            onClick={() => {
+              setShowAsignationPanel(true);
+              setAssignationType(assignation?.collaboratorType);
+            }}
+          />
+        ))}
+      </div>
       <ScreenHeader
         text={"Asig."}
         color={"#969696"}
@@ -86,31 +100,41 @@ export const StatusAsignationInfo = ({
             </div>
           </div>
           <div className="asignations-list">
-            {asignationsList !== undefined ? (
-              asignationsList.map((asigantion, index) => (
-                <AsignationOption
-                  profileImage={asignation.image}
-                  asignationType={asignation.asignationType}
-                  name={asignation.name}
-                  team={asigantion.team}
-                />
-              ))
+            {assignationsImages?.collaborators !== undefined ? (
+              assignationsImages?.collaborators[assignationType]?.map(
+                (asignation, index) => (
+                  <AsignationOption
+                    key={index + "-" + asignation.name}
+                    profileImage={getProfilePicture(
+                      asignation?.id_user,
+                      40,
+                      40
+                    )}
+                    onClick={() => {
+                      setAssignation(assignationType, asignation?.id_user);
+                    }}
+                    name={asignation.name}
+                  />
+                )
+              )
             ) : (
               <p className="no-asignations">Sin personas para asignar</p>
             )}
           </div>
-          <div className="default-asignations-list">
-            <AsignationOption
-              asignationType={"provider"}
-              name={"Solicitar a"}
-              team={"Proveedor"}
-            />
-            <AsignationOption
-              asignationType={"team"}
-              name={"Solicitar a"}
-              team={"Content-oh!"}
-            />
-          </div>
+          {isRetailer === 1 && (
+            <div className="default-asignations-list">
+              <AsignationOption
+                asignationType={"provider"}
+                name={"Solicitar a"}
+                team={"Proveedor"}
+              />
+              <AsignationOption
+                asignationType={"team"}
+                name={"Solicitar a"}
+                team={"Content-oh!"}
+              />
+            </div>
+          )}
         </div>
       )}
     </Container>

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

@@ -16,16 +16,22 @@ export const Container = styled.div`
     }
   }
 
+  .assignations-container {
+    display: flex;
+    cursor: pointer;
+  }
+
   .asignation-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;
+    padding: 10px 8px;
     position: absolute;
     top: calc(100% + 10px);
     right: 0;
+    z-index: 10;
 
     .asignation-header {
       display: flex;
@@ -53,7 +59,6 @@ export const Container = styled.div`
 
     .asignations-list {
       min-height: 40px;
-      border-bottom: 1px solid ${GlobalColors.s3};
 
       .no-asignations {
         padding: 5px;
@@ -66,7 +71,12 @@ export const Container = styled.div`
 
       & + * {
         margin-top: 10px;
+        border-top: 1px solid ${GlobalColors.s3};
       }
     }
+
+    .default-asignations-list {
+      padding-top: 10px;
+    }
   }
 `;

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

@@ -3,15 +3,28 @@ import { ScreenHeader } from "../../atoms/ScreenHeader";
 import { StatusAsignationInfo } from "../StatusAsignationInfo";
 import { GlobalColors } from "../../../global-files/variables";
 
-export const TableHeader = ({ headerInfo, activeImage }) => {
+export const TableHeader = ({
+  imagesStatus,
+  activeImage,
+  assignationsImages,
+  setAssignation,
+  isRetailer,
+  onClickSave,
+}) => {
   return (
     <Container>
       <ScreenHeader
-        text={activeImage?.imageName}
+        text={activeImage?.name || "-"}
         color={GlobalColors.s5}
         headerType={"input-name-header"}
       />
-      <StatusAsignationInfo status={headerInfo?.status} src={headerInfo?.src} />
+      <StatusAsignationInfo
+        status={imagesStatus}
+        assignationsImages={assignationsImages}
+        setAssignation={setAssignation}
+        isRetailer={isRetailer}
+        onClickSave={onClickSave}
+      />
     </Container>
   );
 };

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

@@ -7,6 +7,11 @@ export const Container = styled.div`
   padding-bottom: 5px;
   border-bottom: 1px solid ${GlobalColors.s2};
 
+  .input-name-header {
+    overflow: auto;
+    max-width: 40%;
+    white-space: nowrap;
+  }
   .status-asignation-info {
     display: flex;
     align-items: center;

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

@@ -8,7 +8,18 @@ export const TagAndInput = ({
   value,
   inputPlaceHolder,
   inputId,
-  required,
+  updatedDescriptions,
+  setUpdatedDescriptions,
+  updatedDatasheets,
+  setUpdatedDatasheets,
+  articleId,
+  version,
+  index,
+  isRequired,
+  dinamicHeight,
+  inputCols,
+  inputRows,
+  maxChar,
 }) => {
   return (
     <Container
@@ -21,8 +32,19 @@ export const TagAndInput = ({
         inputId={inputId}
         inputType={inputType}
         inputValue={value}
+        index={index}
+        isRequired={isRequired}
         inputPlaceholder={inputPlaceHolder}
-        required={required}
+        updatedDescriptions={updatedDescriptions}
+        setUpdatedDescriptions={setUpdatedDescriptions}
+        updatedDatasheets={updatedDatasheets}
+        setUpdatedDatasheets={setUpdatedDatasheets}
+        articleId={articleId}
+        version={version}
+        dinamicHeight={dinamicHeight}
+        inputCols={inputCols}
+        inputRows={inputRows}
+        maxChar={maxChar}
       />
     </Container>
   );

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

@@ -3,22 +3,43 @@ import { ProductNameHeader } from "../../molecules/ProductNameHeader";
 import { FeaturesBar } from "../../molecules/FeaturesBar";
 import { AvatarAndValidation } from "../../molecules/AvatarAndValidation";
 
-export const FullProductNameHeader = ({ headerData }) => {
+export const FullProductNameHeader = ({
+  headerData,
+  percent,
+  activeRetailer,
+  setActiveRetailer,
+  approveRejectButtons,
+  sendToFacilitator,
+  auditorAssigned,
+  userAssigned,
+}) => {
   return (
     <Container>
       <ProductNameHeader
-        productName={headerData?.name}
+        productName={headerData?.article?.name}
         statusType={headerData?.status}
-        percent={headerData?.percent}
-        backgroundColor={headerData?.backgroundColor}
-        priority={headerData?.priority}
-        date={headerData?.date}
+        percent={percent?.toFixed(0)}
+        priority={headerData?.prio}
+        date={new Date(headerData?.article?.timestamp).toLocaleDateString()}
       />
       <div className="features-bar-container">
-        <FeaturesBar features={headerData?.features} />
+        <FeaturesBar
+          features={[
+            { feature: "Categoría", value: headerData?.article?.category },
+            { feature: "Prov", value: headerData?.article?.company_name },
+            { feature: "UPC", value: headerData?.article?.upc },
+          ]}
+        />
         <AvatarAndValidation
+          retailers={headerData?.retailers}
           avatarData={headerData?.avatarData}
           validation={headerData?.validation}
+          activeRetailer={activeRetailer}
+          setActiveRetailer={setActiveRetailer}
+          approveRejectButtons={approveRejectButtons}
+          sendToFacilitator={sendToFacilitator}
+          auditorAssigned={auditorAssigned}
+          userAssigned={userAssigned}
         />
       </div>
     </Container>

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

@@ -5,10 +5,16 @@ import { useState } from "react";
 
 export const FullTabsMenu = ({
   tabsSections,
-  status,
-  profileImage,
+  status = "",
+  activeTab,
   setActiveTab,
   setImageLayout,
+  assig,
+  setAssignation,
+  isRetailer,
+  downloadImages,
+  askToDeleteImages,
+  onClickSave,
 }) => {
   const [imagesSection, setImagesSection] = useState(false);
 
@@ -21,9 +27,15 @@ export const FullTabsMenu = ({
       />
       <StatusAsignationInfo
         status={status}
-        image={profileImage}
+        activeTab={activeTab}
         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,24 +1,102 @@
 import { Container } from "./styles";
 import { TableHeader } from "../../molecules/TableHeader";
-import { TableRow } from "../../molecules/TableRow";
+import { Container as Row } from "../../molecules/TableRow/styles";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import LabelToInput from "../../atoms/LabelToInput";
 
 export const ImageDataTable = ({
-  headerInfo,
-  imageData,
   activeImage,
   darkMode,
+  lists,
+  retailerSelected,
+  setImages,
+  assignationsImages,
+  imagesStatus,
+  setAssignation,
+  isRetailer,
+  onClickSave,
 }) => {
   return (
     <Container darkMode={darkMode}>
-      <TableHeader headerInfo={headerInfo} activeImage={activeImage} />
-      {imageData?.map((attribute, index) => (
-        <TableRow
-          key={index}
-          feature={attribute.feature}
-          value={attribute.value}
-          valueType={index < 2}
+      <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 ||
+            "-"
+          }
         />
-      ))}
+      </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,6 +6,13 @@ export const InputGroup = ({
   inputGroup = {},
   activeSection,
   dataInputs = {},
+  updatedDescriptions,
+  setUpdatedDescriptions,
+  updatedDatasheets,
+  setUpdatedDatasheets,
+  articleId,
+  version,
+  dinamicHeight,
 }) => {
   const inputTypeValue = (type) => {
     switch (type) {
@@ -17,7 +24,6 @@ export const InputGroup = ({
         return "text";
     }
   };
-
   return (
     <Container
       className={
@@ -26,29 +32,58 @@ export const InputGroup = ({
           : "descriptions-layout"
       }
     >
-      <ScreenHeader
-        headerType={"retailer-name-header"}
-        text={inputGroup?.dataGroup}
-      />
+      {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}
-              inputId={"datasheet-" + dataInputs[input]?.id + "-" + index}
+              key={
+                index +
+                "-" +
+                dataInputs[input]?.value +
+                "-" +
+                dataInputs[input]?.id
+              }
+              inputId={dataInputs[input]?.id}
+              version={version}
               inputType={inputTypeValue(dataInputs[input]?.type)}
-              label={dataInputs[input]?.name}
+              label={
+                dataInputs[input]?.name +
+                (dataInputs[input]?.required ? "*" : "")
+              }
               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}
-              inputId={"description-" + input?.id + "-" + index}
+              key={index + "-" + input?.value}
+              inputId={input.id}
+              index={index}
               inputType={"textarea"}
-              label={input?.name}
+              label={input?.name + (input.required ? "*" : "")}
               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,6 +23,9 @@ export const Container = styled.div`
         flex: 1 1 20%;
         margin-right: 10px;
         min-width: 227px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
       }
     }
   }