contentoh-components-library 21.5.21 → 21.5.23

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

@@ -16,50 +16,133 @@ ProviderProductEditionDefault.args = {
     Imágenes: true,
   },
   token:
-    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIwZjQyNDdkZi1mMDJmLTRjYjgtOTA5YS1lNjI2NDlkMzQ3ODIiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjBmNDI0N2RmLWYwMmYtNGNiOC05MDlhLWU2MjY0OWQzNDc4MiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJjYjg3YzdjZC0yMDVlLTQ0ZmEtYWJhZi00OTIyNzE5Mzk2ZWEiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcwNjk4OTIwMSwibmFtZSI6IlByb3ZlZWRvciBVbm8gUmFkaW9zaGFjayIsInBob25lX251bWJlciI6Iis1MjEyMzQ1Njc4OTgiLCJleHAiOjE3MDY5OTI4MDEsImlhdCI6MTcwNjk4OTIwMSwiZW1haWwiOiJwcm92ZWVkb3JyYWRpb3NoYWNrdW5vQGFsbGZyZWVtYWlsLm5ldCJ9.cQezqocLmqAopETEN740tLQKCqnQp2Z6HbJo1GYds_C2BKSSCCQbDx8M-UmmyKsCJuYFN8y60F-0bc14wIUFgKsDsaffmg8726ZrcBMvDQjR_lV7kJ625wkEz-37uEYZk7C8B2gZx5tcKG6Q1rYI-0ve5RsQkcDlG3U5_0xNh7UqrI3V_SM3yMrINAkue9mZ_yL0EIqgwgjlKgzRMOwQBpk6zhw5aIBbRyKgI0ogTovKwWOzu5Q5QpWkJ-0fFzRYn6nrq5BI7kE4Kkzp-f0crbjZ0USnNXWlmyyjc1xBwigkBEiyjZER1icYdwlYvFemOTGtEd0r9qlfY34D2hzUsg",
-  articleId: 121151,
-  category: 905,
-  version: 1,
+    "eyJraWQiOiJEV3owZnNieXg2MXNFcVduN3RCXC81bVhod3ZNbFZIOTgwUnZcL3RjT0lKdEk9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI2MjM3OWU5OS01Mjk2LTRhZGQtODkyNy01YzU2ZmFjZDlkYmMiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfbFN6UVo0WjdSIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjYyMzc5ZTk5LTUyOTYtNGFkZC04OTI3LTVjNTZmYWNkOWRiYyIsImF1ZCI6IjUyZDlza2tkY2c4cWpwODhvb2sxdXNlNm1rIiwiZXZlbnRfaWQiOiI4ZmRkOWJlYS1jYTE0LTQ4MmQtYmUwNi1iMjA4YjdjMTM1MWYiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcxODgyMDI2MCwibmFtZSI6IlByb3ZlZWRvciBQcnVlYmEiLCJwaG9uZV9udW1iZXIiOiIrNTI1NTM5MDA2NTcwIiwiZXhwIjoxNzE4ODIzODYwLCJpYXQiOjE3MTg4MjAyNjAsImVtYWlsIjoibGltYW43NDAyNkBtbnFsbS5jb20ifQ.j4PhSKzZ0yb_5QyXYh_vviA-zbMhJc_wE3yqFErlrPsCZsqY43hx-fvEwwOJnzqwNlPFms6kZbddaGPVu0jnGw8TmiaKtoDVOmui_db8DuWGDHLPQhPZNeoM_g5qKY8H7ZIClGSOohj_61XDrJBYQf9utcimiPGkCHET4_3mq1cSfKm9Sk_jd9q5_zblODT2gzC3SnLcD9JBxh1cj6sIL5oBCVxcwbgdAVM82xo2OL9qMCoUomRlvMTOQ7b3LjATS88ZAx4lrLuLHQjMEnYmRFYbsE4kii9JkvBYo9PE6U9F944C1W8toyELGvXjI4Lp5LjpQCr141Z-KohqXeoYww",
+  articleId: 127595,
+  category: "2902",
+  version: 3,
   productSelected: {
-    id_article: 121151,
-    upc: "92384234",
-    name: "Comentarios visibles",
-    timestamp: "2024-02-03T04:11:35.000Z",
-    categoryName: "Audio|Audífonos|In Ear",
-    id_category: 905,
-    version: 1,
-    reviewState: "rejected_to_provider",
+    orderId: 8086,
+    status: "AA",
+    datasheet_status: "AA",
+    prio: "none",
+    version: 3,
+    description_status: "AA",
+    images_status: "AA",
+    brand: null,
+    retailerOrder: 0,
+    missing: {
+      datasheet: null,
+      descriptions: null,
+      images: null,
+    },
+    services: {
+      datasheets: 1,
+      descriptions: 1,
+      images: 1,
+    },
+    article: {
+      category: "Navidad|Decoración Interior|Mallas y Listones",
+      company_name: "THD IMPORTACIONES",
+      country: null,
+      id_category: "2902",
+      id_datasheet_especialist: 2757,
+      id_datasheet_facilitator: null,
+      id_description_especialist: 2757,
+      id_description_facilitator: null,
+      id_images_especialist: 1259,
+      id_images_facilitator: null,
+      id_order: 8086,
+      id_article: 127595,
+      id_auditor: 514,
+      name: "LISTON DECORATIVO DISNEY 5M 2 ESTILOS",
+      timestamp: "2024-06-05T14:30:33.000Z",
+      upc: "214715",
+    },
+    retailers: [
+      {
+        id: 58,
+      },
+    ],
+    statusByRetailer: {
+      "58": {
+        datasheet: "AA",
+        description: "AA",
+        images: "AA",
+      },
+    },
     retailersAvailable: [
       {
-        name: "Radioshack",
-        id: 74,
+        id: 58,
       },
     ],
-    percentage: 100,
+    categoryName: "Navidad|Decoración Interior|Mallas y Listones",
+    upc: "214715",
+    id_article: 127595,
+    id_order: 8086,
   },
   productToEdit: {
-    idCategory: 905,
-    ArticleId: 121151,
-    product: [
-      {
-        id_article: 121151,
-        upc: "92384234",
-        name: "Comentarios visibles",
-        timestamp: "2024-02-03T04:11:35.000Z",
-        categoryName: "Audio|Audífonos|In Ear",
-        id_category: 905,
-        version: 1,
-        reviewState: "rejected_to_provider",
-        retailersAvailable: [
-          {
-            name: "Radioshack",
-            id: 74,
-            percentage: 100,
-          },
-        ],
-        percentage: 100,
+    ArticleId: 127595,
+    idCategory: "2902",
+    product: {
+      orderId: 8086,
+      status: "AA",
+      datasheet_status: "AA",
+      prio: "none",
+      version: 3,
+      description_status: "AA",
+      images_status: "AA",
+      brand: null,
+      retailerOrder: 0,
+      missing: {
+        datasheet: null,
+        descriptions: null,
+        images: null,
       },
-    ],
+      services: {
+        datasheets: 1,
+        descriptions: 1,
+        images: 1,
+      },
+      article: {
+        category: "Navidad|Decoración Interior|Mallas y Listones",
+        company_name: "THD IMPORTACIONES",
+        country: null,
+        id_category: "2902",
+        id_datasheet_especialist: 2757,
+        id_datasheet_facilitator: null,
+        id_description_especialist: 2757,
+        id_description_facilitator: null,
+        id_images_especialist: 1259,
+        id_images_facilitator: null,
+        id_order: 8086,
+        id_article: 127595,
+        id_auditor: 514,
+        name: "LISTON DECORATIVO DISNEY 5M 2 ESTILOS",
+        timestamp: "2024-06-05T14:30:33.000Z",
+        upc: "214715",
+      },
+      retailers: [
+        {
+          id: 58,
+        },
+      ],
+      statusByRetailer: {
+        "58": {
+          datasheet: "AA",
+          description: "AA",
+          images: "AA",
+        },
+      },
+      retailersAvailable: [
+        {
+          id: 58,
+        },
+      ],
+      categoryName: "Navidad|Decoración Interior|Mallas y Listones",
+      upc: "214715",
+      id_article: 127595,
+      id_order: 8086,
+    },
   },
   location: {
     pathname: "/EditProducts",
@@ -73,21 +156,21 @@ ProviderProductEditionDefault.args = {
     key: "24vwut",
   },
   user: {
-    id_user: 350,
-    name: "Proveedor Uno",
-    last_name: "Radioshack",
-    email: "proveedorradioshackuno@allfreemail.net",
-    position: "proveedor",
-    telephone: "+521234567898",
+    id_user: 419,
+    name: "Proveedor",
+    last_name: "Prueba",
+    email: "liman74026@mnqlm.com",
+    position: "Cliente",
+    telephone: "5539006570",
     country: "México",
-    id_company: 950,
-    id_cognito: "0f4247df-f02f-4cb8-909a-e62649d34782",
-    birth_Date: null,
+    id_company: 535,
+    id_cognito: "62379e99-5296-4add-8927-5c56facd9dbc",
+    birth_Date: "2021-08-30T00:00:00.000Z",
     about_me: null,
-    zip_code: null,
-    address: null,
+    zip_code: "53000",
+    address: "Av 16 de Septiembre #27",
     job: null,
-    id_stripe: null,
+    id_stripe: "cus_KBCZoGEdXpxqVS",
     id_role: 0,
     active: 1,
     is_retailer: 0,
@@ -95,24 +178,24 @@ ProviderProductEditionDefault.args = {
     is_user_tech: null,
     is_onboarding: 0,
     membership: {
-      id: 146,
-      start_date: "2023-10-14T00:49:16.000Z",
-      end_date: "2024-10-14T00:49:16.000Z",
+      id: 1119,
+      start_date: "2022-06-20T13:35:19.000Z",
+      end_date: "2022-06-20T08:35:10.000Z",
       planID: 8,
-      plan: "prod_KtlhECVSFG2iro",
+      plan: "prod_KvGeJs0E9cSO4y",
       name: "Plan Pro",
       user_limit: "50",
       products_limit: "5000",
       type: "Enterprise",
     },
-    src: "https://content-management-profile.s3.amazonaws.com/id-350/350.png?1706989203277",
+    src: "https://content-management-profile-prod.s3.amazonaws.com/id-419/419.png?1718820261153",
   },
   company: {
-    id_company: 950,
-    trade_name: "Radioshack",
-    company_name: "Radioshack",
-    rfc: "ASDASD",
-    adress: "CDMX",
+    id_company: 535,
+    trade_name: "THD IMPORTACIONES",
+    company_name: "THD IMPORTACIONES",
+    rfc: null,
+    adress: null,
     about_company: null,
     telephone: null,
     web_site: null,
@@ -122,22 +205,34 @@ ProviderProductEditionDefault.args = {
     is_retailer: 0,
     financedRetailers: [
       {
-        id: 74,
-        name: "Radioshack",
+        id: 58,
+        name: "The Home Depot Golden",
+        country: "México",
+        id_region: 1,
+        active: 1,
+      },
+      {
+        id: 59,
+        name: "The Home Depot Platinum",
         country: "México",
         id_region: 1,
         active: 1,
-        flow: 1,
       },
     ],
     retailers: [
       {
-        id: 74,
-        name: "Radioshack",
+        id: 58,
+        name: "The Home Depot Golden",
+        country: "México",
+        id_region: 1,
+        active: 1,
+      },
+      {
+        id: 59,
+        name: "The Home Depot Platinum",
         country: "México",
         id_region: 1,
         active: 1,
-        flow: 1,
       },
     ],
   },

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

@@ -914,19 +914,33 @@ export const ProviderProductEdition = ({
     }
   };
 
-  const createComment = async (messages = [], retailerId) => {
+  const createComment = async (e, body, tab) => {
+    let concept = "";
+    switch (activeTab) {
+      case "Ficha técnica":
+        concept = "datasheet";
+        break;
+      case "Imágenes":
+        concept = "images";
+        break;
+
+      default:
+        concept = "description";
+        break;
+    }
     const data = {
-      paramsBody: {
-        id: product.article.id_article || productEdit.ArticleId,
-        version: version,
-        items: messages,
-        retailerId: retailerId,
-        status: product.status || productEdit.product.status,
-      },
-      paramsHeader: { Authorization: token },
+      articleId: product?.id_article,
+      orderId: product?.orderId,
+      message: body,
+      concept: concept,
+      version: version,
     };
-    setMessage("");
-    return sendMessage(data);
+    console.log('comentario:', data.message);
+    await axios.post(`${process.env.REACT_APP_COMMENTS_ENDPOINT}`, data, {
+      headers: {
+        Authorization: token,
+      },
+    });
   };
 
   useEffect(() => {
@@ -1590,41 +1604,88 @@ export const ProviderProductEdition = ({
               </>
             )}
           </div>
-          {!(isRevision() && getSectionStatus()) && !revision && (
-            <div className="required-inputs-message">
-              <div>
-                <p>
-                  Los atributos son requeridos por las plataformas de las
-                  cadenas, es muy importante completar los campos requeridos ya
-                  que pueden rechazar el producto por falta de información.
-                </p>
-              </div>
-              {inCart ? (
-                <button type="button">
-                  <Link to="/checkout">
-                    <p>Articulo en carrito</p>
-                    <p>Ir a checkout</p>
-                  </Link>
-                </button>
+          {isRevision() && getSectionStatus() ? (
+            <div className="commentary-box">
+              {!comment ? (
+                <div className="commentary">
+                  <TagAndInput
+                    label={"Caja de Comentario"}
+                    inputType={"textarea"}
+                    inputCols={80}
+                    inputRows={4}
+                    inputId={"commentary-box"}
+                    index={0}
+                  />
+                  <div className="buttons-box">
+                    <Button
+                      buttonType={"general-transparent-button"}
+                      label={"Enviar comentario"}
+                      onClick={(e) =>{
+                        createComment(
+                          e,
+                          document.querySelector(
+                            "#commentary-box .ql-container .ql-editor > p"
+                          ).innerHTML,
+                          activeTab
+                        )
+                      }
+                      }
+                    />
+                  </div>
+                </div>
               ) : (
-                <>
-                  <SliderToolTip
-                    infoIcon={InfoIcon}
-                    slidefront={slidefront}
-                    iconSize={"big-image"}
-                    slidePosition={"top-slide"}
+                <div className="feedback-box">
+                  <Commentary
+                    comment={comment.message}
+                    reviewed={crossComment}
                   />
                   <Button
-                    onClick={() => {
-                      setShowContentohRequestModal &&
-                        setShowContentohRequestModal(true);
+                    buttonType={"circular-button accept-button"}
+                    onClick={async () => {
+                      setCrossComment(true);
+                      commentRevised();
                     }}
-                    buttonType="general-default-button"
-                    label="Enviar a Content-oh!"
                   />
-                </>
+                </div>
               )}
             </div>
+          ) : (
+            !revision && (
+              <div className="required-inputs-message">
+                <div>
+                  <p>
+                    Los atributos son requeridos por las plataformas de las
+                    cadenas, es muy importante completar los campos requeridos
+                    ya que pueden rechazar el producto por falta de información.
+                  </p>
+                </div>
+                {inCart ? (
+                  <button type="button">
+                    <Link to="/checkout">
+                      <p>Articulo en carrito</p>
+                      <p>Ir a checkout</p>
+                    </Link>
+                  </button>
+                ) : (
+                  <>
+                    <SliderToolTip
+                      infoIcon={InfoIcon}
+                      slidefront={slidefront}
+                      iconSize={"big-image"}
+                      slidePosition={"top-slide"}
+                    />
+                    <Button
+                      onClick={() => {
+                        setShowContentohRequestModal &&
+                          setShowContentohRequestModal(true);
+                      }}
+                      buttonType="general-default-button"
+                      label="Enviar a Content-oh!"
+                    />
+                  </>
+                )}
+              </div>
+            )
           )}
         </div>
       </div>

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

@@ -16,49 +16,49 @@ RetailerProductEditionDefault.args = {
     Imágenes: false,
   },
   token:
-   "eyJraWQiOiJEV3owZnNieXg2MXNFcVduN3RCXC81bVhod3ZNbFZIOTgwUnZcL3RjT0lKdEk9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNGRiODI2My1jYjA1LTQzMTItOWU0NS1lM2RlY2E2NjllNzIiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfbFN6UVo0WjdSIiwiY29nbml0bzp1c2VybmFtZSI6ImY0ZGI4MjYzLWNiMDUtNDMxMi05ZTQ1LWUzZGVjYTY2OWU3MiIsImF1ZCI6IjUyZDlza2tkY2c4cWpwODhvb2sxdXNlNm1rIiwiZXZlbnRfaWQiOiIyMTlmNjg1OS0zOGRkLTQwYzEtYmNhMC00OWQ1YjMwMTQxMTgiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcxODIxMzQyOCwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTcxODIxNzAyNywiaWF0IjoxNzE4MjEzNDI4LCJlbWFpbCI6ImVtb250YW5vQGNvbnRlbnRvaC5jb20ifQ.TQfkHTvvjC0VUfoQexjuvlVixeb_J3ZP8uzGFgdDur8m3v0Wad32fUM3eOsTzrsXp_c0HJHHuT_7x9h27pCyLoeTmi5j_y9Rfyu4RXj9xEejE3_Ge7LXupdvYuo3-kI577vcQjrHjYShjLZ0RFNDQVxbrBLS19qRXYj7DJXM0tenLG4v5wLNZyhdmW5OdnIYjA8VfDCxV_fO2v9pFie0DUbmgGGnpzqHBVJfhbBVOrjq2PGmx4HvTy5Ne8b4pyio3Gs5LSYA7ZMTvVMaZWKTFfgNM69tY4NNCZVAfe56EL5DzOBhCtLGXljVqTrEIkd1bPHX_CmM2nGkzhbTwYtstg",
+   "eyJraWQiOiJEV3owZnNieXg2MXNFcVduN3RCXC81bVhod3ZNbFZIOTgwUnZcL3RjT0lKdEk9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNGRiODI2My1jYjA1LTQzMTItOWU0NS1lM2RlY2E2NjllNzIiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfbFN6UVo0WjdSIiwiY29nbml0bzp1c2VybmFtZSI6ImY0ZGI4MjYzLWNiMDUtNDMxMi05ZTQ1LWUzZGVjYTY2OWU3MiIsImF1ZCI6IjUyZDlza2tkY2c4cWpwODhvb2sxdXNlNm1rIiwiZXZlbnRfaWQiOiIwZGZkNTRmZC1lMjU1LTRkNmEtYmE1ZS1hYzdjYWM2NjY0NzciLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTcxODgxMjc1MSwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTcxODgxNjM1MCwiaWF0IjoxNzE4ODEyNzUxLCJlbWFpbCI6ImVtb250YW5vQGNvbnRlbnRvaC5jb20ifQ.eruTcERQql3d7XO5LWbmTAOgrU7avQQ-GN3iiRGuVYUmI1tqMsHxWVsxC8T3QMBkZFL9djpMaOvw53Fc_Gl84WKPr9pmECDsqUkgXKJZxHE5jsRJjsyAd9pdJ00jYdeWePoitxYazBR9TW0TofiB7L5F9b_gjZrGdoAzz1gQvWABL_eGYxrGfJCoNBzxbU8zAIfPJV6u6PR98rumtMVWHW_FyzpZnNKSiP4rEkG7H9cW-Mdzl39seeHQRo9SNht55tnlPkXi7jN6R-AOGhgK0yBHgAwVBbv3aT_TDArXEiXFUFG9viCIq7H6lRvCaXEmJoKnOZOCbpX1y3QI8ayMVQ",
   productSelected: {
     services: {
       datasheets: 1,
       descriptions: 1,
       images: 1,
     },
-    orderId: 7961,
+    orderId: 8086,
     status: "RP",
     datasheet_status: "AA",
     prio: "none",
     version: 3,
-    description_status: "RP",
-    images_status: "AA",
+    description_status: "AA",
+    images_status: "RA",
     statusByRetailer: {
-      "58": {
-        datasheet: "AA",
-        description: "RP",
-        images: "AA",
+        "58": {
+          datasheet: "AA",
+          description: "AA",
+          images: "RA/CA",
+        },
       },
-    },
     article: {
-      id_article: 126855,
-      id_category: "3066",
-      name: "ORGANIZADOR 3 CUBOS ITALIA 92 X 33 X 30 CM",
-      upc: "217141",
-      timestamp: "2024-05-17T18:52:34.000Z",
-      id_user: 1636,
+      id_article: 127595,
+      id_category: "2902",
+      name: "LISTON DECORATIVO DISNEY 5M 2 ESTILOS",
+      upc: "214715",
+      timestamp: "2024-06-05T14:29:41.000Z",
+      id_user: 673,
       status: null,
       active: 1,
-      company_id: 315,
-      company_name: "MADERAS Y DISEÑOS DEL NORTE S.A. DE C.V.",
-      country: "México",
-      id_order: 7961,
+      company_id: 535,
+      company_name: "THD IMPORTACIONES",
+      country: null,
+      id_order: 8086,
       id_datasheet_especialist: 2757,
       id_datasheet_facilitator: null,
       id_description_especialist: 2757,
       id_description_facilitator: null,
-      id_images_especialist: 1251,
+      id_images_especialist: 1259,
       id_images_facilitator: null,
       id_auditor: 514,
       id_recepcionist: null,
-      category: "Muebles|Muebles para Oficina y Gamer|Libreros",
+      category: "Navidad|Decoración Interior|Mallas y Listones",
       missingAttributes: 0,
       missingDescriptions: 0,
       missingImages: 0,
@@ -69,8 +69,8 @@ RetailerProductEditionDefault.args = {
         name: "The Home Depot Golden",
       },
     ],
-    country: "México",
-    upc: "217141",
+    country: "",
+    upc: "214715",
   }
   ,
   // location: {

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

@@ -354,6 +354,15 @@ export const RetailerProductEdition = ({
     setObservationVisible(false);
   };
 
+  const handleCommentSubmit = (e) => {
+    e.preventDefault();
+    const commentText = document.querySelector(
+      "#commentary-box .ql-container .ql-editor > p"
+    ).innerHTML;
+    createComment(e, commentText, activeTab);
+  };
+
+
   useEffect(async () => {
     const { id_article } = product?.article || {};
     if (id_article)
@@ -1077,19 +1086,35 @@ export const RetailerProductEdition = ({
     return product?.article[`id_auditor`] === user.id_user;
   };
 
-  const createComment = async (messages = [], retailerId) => {
+  const createComment = async (e, body, tab) => {
+    let concept = "";
+    switch (activeTab) {
+      case "Ficha técnica":
+        concept = "datasheet";
+        break;
+      case "Imágenes":
+        concept = "images";
+        break;
+
+      default:
+        concept = "description";
+        break;
+    }
     const data = {
-      paramsBody: {
-        id: product.article.id_article,
-        version: version,
-        items: messages,
-        retailerId: retailerId,
-        status: product.status,
-      },
-      paramsHeader: { Authorization: token },
+      articleId: product?.article?.id_article,
+      orderId: product?.orderId,
+      message: body?.replace(/<.*?\/?>/gm, ""),
+      concept: concept,
+      version: version,
     };
+    await axios.post(`${process.env.REACT_APP_COMMENTS_ENDPOINT}`, data, {
+      headers: {
+        Authorization: token,
+      },
+    });
+    await getComments(tab);
     setMessage("");
-    return sendMessage(data);
+    setComponentsArray([]);
   };
 
   const getRequired = (services) => {
@@ -1341,7 +1366,6 @@ export const RetailerProductEdition = ({
   };
 
   useEffect(() => {
-    console.log(servicesData, "servicesData");
     let status = getRetailerStatus(servicesData, activeTab);
     setRetailerStatus(status);
   }, [activeTab, servicesData, activeRetailer]);
@@ -1666,15 +1690,7 @@ export const RetailerProductEdition = ({
                       <Button
                         buttonType={"general-transparent-button"}
                         label={"Enviar comentario"}
-                        onClick={(e) =>
-                          createComment(
-                            e,
-                            document.querySelector(
-                              "#commentary-box .ql-container .ql-editor > p"
-                            ).innerHTML,
-                            activeTab
-                          )
-                        }
+                        onClick={handleCommentSubmit}
                       />
                     </div>
                   </div>