contentoh-components-library 20.0.0 → 21.0.2

package/src/components/atoms/ScreenHeader/index.js

@@ -8,12 +8,16 @@ export const ScreenHeader = ({
   color,
   headerType,
   Paragraph,
-
 }) => {
   return (
-    <Container fontFamily={fontFamily} color={color} className={headerType} key={`title-${text}`}>
+    <Container
+      fontFamily={fontFamily}
+      color={color}
+      className={headerType}
+      key={`title-${text}`}
+    >
       {text} {boldText && <span> {boldText}</span>}
-      {<p>{Paragraph}</p>}
+      {Paragraph && <p>{Paragraph}</p>}
     </Container>
   );
 };

package/src/components/atoms/ScreenHeader/styles.js

@@ -52,6 +52,11 @@ export const Container = styled.h2`
     font-weight: 400;
     font-size: 11px;
     line-height: 18px;
+
+    &:last-child {
+      min-width: 50px;
+      text-align: center;
+    }
   }
 
   &.gray-table-row {
@@ -63,12 +68,14 @@ export const Container = styled.h2`
     background-color: ${GlobalColors.s2};
     padding: 1px 3px;
     border-radius: 3px;
+    min-width: 50px;
+    text-align: center;
   }
-  &.header-and-paragraph{
+  &.header-and-paragraph {
     font-family: ${FontFamily.Raleway};
     font-size: 36px;
     color: ${GlobalColors.s5};
-    p{
+    p {
       font-family: ${FontFamily.AvenirNext};
       font-size: 14px;
       color: ${GlobalColors.s4};

package/src/components/atoms/StatusTag/index.js

@@ -1,9 +1,37 @@
 import { Container } from "./styles";
 
 export const StatusTag = ({ statusType, ovalForm }) => {
+  const getShortStatus = (status) => {
+    switch (status) {
+      case "COMPLETED":
+        return "C";
+      case "RECEPTION":
+        return "Pr";
+      case "NULL":
+        return "-";
+      case "RECEIVED":
+        return "Rc";
+      case "IN_PROGRESS":
+        return "P";
+      case "ASSIGNED":
+        return "As";
+      case "APPROVED":
+        return "Ap";
+      case "VALIDATING":
+        return "V";
+      case "PAID_OUT":
+        return "Po";
+      default:
+        return status;
+    }
+  };
   return (
-    <Container className={`status-${statusType} ${ovalForm && "oval-form"}`}>
-      <p>{statusType}</p>
+    <Container
+      className={`status-${getShortStatus(statusType)} ${
+        ovalForm && "oval-form"
+      }`}
+    >
+      <p>{getShortStatus(statusType)}</p>
     </Container>
   );
 };

package/src/components/atoms/StatusTag/styles.js

@@ -2,7 +2,8 @@ import styled from "styled-components";
 import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.div`
-  width: 30px;
+  width: fit-content;
+  padding: 0 10px;
   height: 20px;
   background-color: ${GlobalColors.s3};
   border-radius: 3px;

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

@@ -121,7 +121,7 @@ export const StatusAsignationInfo = ({
               <p className="no-asignations">Sin personas para asignar</p>
             )}
           </div>
-          {isRetailer === 0 && (
+          {isRetailer === 1 && (
             <div className="default-asignations-list">
               <AsignationOption
                 asignationType={"provider"}

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

@@ -14,7 +14,7 @@ export const TableHeader = ({
   return (
     <Container>
       <ScreenHeader
-        text={activeImage?.name}
+        text={activeImage?.name || "-"}
         color={GlobalColors.s5}
         headerType={"input-name-header"}
       />

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/organisms/ImageDataTable/index.js

@@ -31,7 +31,8 @@ export const ImageDataTable = ({
         <ScreenHeader
           headerType={"table-row-text gray-table-row"}
           text={
-            lists?.inputs?.find((f) => f.id === +activeImage?.image_id)?.name
+            lists?.inputs?.find((f) => f.id === +activeImage?.image_id)?.name ||
+            "-"
           }
         />
       </Row>
@@ -42,7 +43,7 @@ export const ImageDataTable = ({
           text={
             lists?.imagePackagingType?.find(
               (f) => f.id === +activeImage?.packing_type
-            )?.name
+            )?.name || "-"
           }
         />
       </Row>
@@ -52,26 +53,36 @@ export const ImageDataTable = ({
           headerType={"table-row-text gray-table-row"}
           text={
             lists?.imageType?.find((f) => f.id === +activeImage?.image_type)
-              ?.name
+              ?.name || "-"
           }
         />
       </Row>
       <Row>
         <ScreenHeader headerType={"table-row-text"} text="Formato" />
-        <ScreenHeader headerType={"table-row-text"} text={activeImage?.ext} />
+        <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}x${activeImage?.height}px`}
+          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} />
+            <ScreenHeader
+              headerType={"table-row-text"}
+              text={attr?.name || "-"}
+            />
             <LabelToInput
               width="100px"
               defaultValue={attr?.value}
@@ -80,7 +91,7 @@ export const ImageDataTable = ({
                   action: "changeAttrValue",
                   retailer: retailerSelected,
                   index,
-                  value: e.target.value,
+                  value: e.target.value || "-",
                 });
               }}
             />

package/src/components/pages/RetailerProductEdition/RetailerProductEdition.stories.js

@@ -105,7 +105,17 @@ RetailerProductEditionDefault.args = {
       },
     ],
     country: "Colombia",
-    upc: "7491989462",
+    modal: false,
+    modalCadenas: false,
+    totalCadenas: false,
+    modalAsig1: false,
+    modalFD: false,
+    modalAsig2: false,
+    modalAsig3: false,
+    modalAsig4: false,
+    modalAsig5: false,
+    modalFI: false,
+    modalQA: false,
   },
   user: {
     id_user: 30,

package/src/components/pages/RetailerProductEdition/index.js

@@ -27,6 +27,8 @@ import { Button } from "../../atoms/GeneralButton";
 import { Commentary } from "../../atoms/Commentary";
 import { GenericModal } from "../../atoms/GenericModal";
 import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { Loading } from "../../atoms/Loading";
+import succes from "../../../assets/images/genericModal/genericModalCheck.svg";
 
 const reducerImages = (state, action) => {
   let { values, attrForImgs } = state;
@@ -135,6 +137,7 @@ export const RetailerProductEdition = ({
   const [componentsArray, setComponentsArray] = useState([]);
   const [checkAll, setCheckAll] = useState(false);
   const isRetailer = user?.is_retailer;
+  const [loading, setLoading] = useState(true);
   useEffect(() => {
     checkAll && setSelectedImages(images.values);
   }, [checkAll]);
@@ -155,6 +158,7 @@ export const RetailerProductEdition = ({
     });
     if (services[2]?.values?.length > 0) setActiveImage(0);
     setProduct(productSelected);
+    setLoading(false);
   };
 
   const getServices = async (tab) => {
@@ -294,9 +298,10 @@ export const RetailerProductEdition = ({
   useEffect(() => {
     const required = {};
     if (services.length > 0) {
-      services[0][activeRetailer.id].data = Object.values(
-        services[0][activeRetailer.id].data
-      );
+      if (services[0][activeRetailer.id])
+        services[0][activeRetailer.id].data = Object.values(
+          services[0][activeRetailer.id].data
+        );
       setActivePercentage(Math.round(activeRetailer?.percentage, 0));
       const datagroups = services[0][activeRetailer?.id];
       const inputs = services[0]?.inputs;
@@ -307,7 +312,7 @@ export const RetailerProductEdition = ({
       setDatasheets([datagroups, inputs]);
       setDescriptions(descriptions);
     }
-  }, [activeRetailer]);
+  }, [activeRetailer, services]);
 
   const thumbs = () => {
     const imageInputs = images?.inputs?.map((e) => ({
@@ -341,10 +346,13 @@ export const RetailerProductEdition = ({
   };
 
   const saveDescriptions = async () => {
+    setLoading(true);
     const dataObject = {
       articleId: productSelected?.article?.id_article,
       articleData: updatedDescriptions,
     };
+    if (productSelected?.orderId)
+      dataObject["orderId"] = productSelected?.orderId;
     try {
       await axios.put(
         `${process.env.REACT_APP_ARTICLE_DATA_ENDPOINT}?description=true&version=${version}`,
@@ -356,16 +364,20 @@ export const RetailerProductEdition = ({
         }
       );
       setMessage("Descripciones guardadas con éxito");
+      loadData();
     } catch (error) {
       console.log(error);
     }
   };
 
   const saveDatasheets = async () => {
+    setLoading(true);
     const dataObject = {
       articleId: productSelected?.article?.id_article,
       articleData: updatedDatasheets,
     };
+    if (productSelected?.orderId)
+      dataObject["orderId"] = productSelected?.orderId;
     try {
       await axios.put(
         `${process.env.REACT_APP_ARTICLE_DATA_ENDPOINT}?datasheet=true&version=${version}`,
@@ -376,7 +388,8 @@ export const RetailerProductEdition = ({
           },
         }
       );
-      setMessage("Fichas técnicas guardadas con éxito");
+      setMessage("Fichas técnicas guardadas");
+      loadData();
     } catch (error) {
       console.log(error);
     }
@@ -404,6 +417,7 @@ export const RetailerProductEdition = ({
       articleData: imagesList?.filter((e) => !e.id),
       updateImages: imagesList?.filter((e) => e.id),
     };
+    if (productSelected?.orderId) data["orderId"] = productSelected?.orderId;
     let valid =
       data?.articleData?.length === 0
         ? true
@@ -463,11 +477,13 @@ export const RetailerProductEdition = ({
 
   useEffect(async () => {
     if (imagesUploaded) {
+      setLoading(true);
       dataImages.articleData = dataImages?.articleData.map((e) => {
         delete e.src;
         e.imageID = e.image_id;
         e.packingType = e.packing_type;
         e.imageType = e.image_type;
+        if (productSelected?.orderId) e["orderId"] = productSelected?.orderId;
         return e;
       });
       try {
@@ -481,6 +497,7 @@ export const RetailerProductEdition = ({
           }
         );
         setMessage("Imágenes guardadas con éxito");
+        loadData();
       } catch (error) {
         console.log(error);
       }
@@ -713,31 +730,6 @@ export const RetailerProductEdition = ({
     return productSelected?.article[`id_auditor`] === user.id_user;
   };
 
-  function specialistValid(tab) {
-    let concept = "";
-    switch (tab) {
-      case "Ficha técnica":
-        concept = "datasheet";
-        break;
-      case "Imágenes":
-        concept = "images";
-        break;
-
-      default:
-        concept = "description";
-        break;
-    }
-    return (
-      product[`${concept}_status`] === "IN_PROGRESS" ||
-      product[`${concept}_status`] === "RF" ||
-      product[`${concept}_status`] === "RA"
-    );
-  }
-
-  function versionMatch() {
-    return productSelected?.version === version;
-  }
-
   const createComment = async (e, body, tab) => {
     let concept = "";
     switch (activeTab) {
@@ -915,6 +907,7 @@ export const RetailerProductEdition = ({
           headers: { Authorization: token },
         }
       );
+      loadData();
     } catch (err) {
       console.log(err);
     }
@@ -967,7 +960,9 @@ export const RetailerProductEdition = ({
             imagesStatus={productSelected?.images_status}
             setAssignation={setAssignation}
             isRetailer={isRetailer}
-            onClickSave={() => updateImages()}
+            onClickSave={() =>
+              product?.services?.images === 1 && updateImages()
+            }
           />
         </div>
         <div className="product-information">
@@ -984,16 +979,8 @@ export const RetailerProductEdition = ({
           <FullTabsMenu
             tabsSections={tabsSections}
             status={{
-              Descripción: servicesData.filter(
-                (service) =>
-                  service.id_retailer === activeRetailer?.id &&
-                  service.service === "description"
-              )[0]?.status,
-              "Ficha técnica": servicesData.filter(
-                (service) =>
-                  service.id_retailer === activeRetailer?.id &&
-                  service.service === "datasheet"
-              )[0]?.status,
+              Descripción: product?.description_status,
+              "Ficha técnica": product?.datasheet_status,
               Imágenes: product?.images_status,
             }}
             activeTab={activeTab}
@@ -1013,7 +1000,7 @@ export const RetailerProductEdition = ({
                   saveDatasheets();
                   break;
                 case "Imágenes":
-                  updateImages();
+                  product?.services?.images === 1 && updateImages();
                   break;
 
                 default:
@@ -1027,56 +1014,73 @@ export const RetailerProductEdition = ({
               (imageLayout && activeTab === "Imágenes" ? "image-services" : "")
             }
           >
-            {!imageLayout && activeTab === "Imágenes" && (
-              <GalleryHeader
-                setSelectedImages={setSelectedImages}
-                checkAll={checkAll}
-                setCheckAll={setCheckAll}
-              />
-            )}
-            {activeTab === "Ficha técnica" &&
-              (product?.services?.datasheets === 1 ? (
-                datasheets[0]?.data?.map((dataGroup, index) => (
-                  <InputGroup
-                    key={index + "-" + activeRetailer.name}
-                    articleId={productSelected.article.id_article}
-                    version={version}
-                    activeSection={activeTab}
-                    inputGroup={dataGroup}
-                    dataInputs={datasheets[1]}
-                    updatedDatasheets={updatedDatasheets}
-                    setUpdatedDatasheets={setUpdatedDatasheets}
-                  />
-                ))
-              ) : (
-                <p>no tienes este servicio</p>
-              ))}
-            {activeTab === "Descripción" &&
-              (product?.services?.descriptions === 1 ? (
-                <InputGroup
-                  activeSection={activeTab}
-                  inputGroup={descriptions[0]}
-                  updatedDescriptions={updatedDescriptions}
-                  setUpdatedDescriptions={setUpdatedDescriptions}
-                  articleId={product?.article?.id_article}
-                  version={version}
-                  dinamicHeight={true}
-                />
-              ) : (
-                <p>no tienes este servicio</p>
-              ))}
+            {loading ? (
+              <Loading />
+            ) : (
+              <>
+                {!imageLayout &&
+                  activeTab === "Imágenes" &&
+                  product?.services?.images === 1 && (
+                    <GalleryHeader
+                      setSelectedImages={setSelectedImages}
+                      checkAll={checkAll}
+                      setCheckAll={setCheckAll}
+                    />
+                  )}
+                {activeTab === "Ficha técnica" &&
+                  (product?.services?.datasheets === 1 ? (
+                    datasheets[0]?.data?.map((dataGroup, index) => (
+                      <InputGroup
+                        key={index + "-" + activeRetailer.name}
+                        articleId={productSelected.article.id_article}
+                        version={version}
+                        activeSection={activeTab}
+                        inputGroup={dataGroup}
+                        dataInputs={datasheets[1]}
+                        updatedDatasheets={updatedDatasheets}
+                        setUpdatedDatasheets={setUpdatedDatasheets}
+                      />
+                    ))
+                  ) : (
+                    <ScreenHeader
+                      text={"No cuentas con este servicio"}
+                      headerType={"input-name-header"}
+                    />
+                  ))}
+                {activeTab === "Descripción" &&
+                  (product?.services?.descriptions === 1 ? (
+                    <InputGroup
+                      activeSection={activeTab}
+                      inputGroup={descriptions[0]}
+                      updatedDescriptions={updatedDescriptions}
+                      setUpdatedDescriptions={setUpdatedDescriptions}
+                      articleId={product?.article?.id_article}
+                      version={version}
+                      dinamicHeight={true}
+                    />
+                  ) : (
+                    <ScreenHeader
+                      text={"No cuentas con este servicio"}
+                      headerType={"input-name-header"}
+                    />
+                  ))}
 
-            {activeTab === "Imágenes" &&
-              (product?.services?.images === 1 ? (
-                <section className="container">
-                  <div {...getRootProps({ className: "dropzone" })}>
-                    <input {...getInputProps()} />
-                    <aside>{thumbs()}</aside>
-                  </div>
-                </section>
-              ) : (
-                <p>no tienes este servicio</p>
-              ))}
+                {activeTab === "Imágenes" &&
+                  (product?.services?.images === 1 ? (
+                    <section className="container">
+                      <div {...getRootProps({ className: "dropzone" })}>
+                        <input {...getInputProps()} />
+                        <aside>{thumbs()}</aside>
+                      </div>
+                    </section>
+                  ) : (
+                    <ScreenHeader
+                      text={"No cuentas con este servicio"}
+                      headerType={"input-name-header"}
+                    />
+                  ))}
+              </>
+            )}
           </div>
           {(userAssigned(activeTab, "especialist" || "facilitator") ||
             auditorAssigned()) && (
@@ -1147,11 +1151,12 @@ export const RetailerProductEdition = ({
       )}
       {message.length > 0 && (
         <GenericModal
-          buttonType={"delete-product"}
+          buttonType={componentsArray.length > 0 && "delete-product"}
           componentsArray={
             componentsArray.length > 0
               ? componentsArray
               : [
+                  <img src={succes} alt="success icon" />,
                   <ScreenHeader
                     key="1"
                     headerType={"retailer-name-header"}