contentoh-components-library 21.5.99 → 21.6.0

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

@@ -0,0 +1,101 @@
+import { RetailerProductEdition } from "../index";
+
+export default {
+  title: "Components/pages/RetailerProductEdition/Auditor",
+  component: RetailerProductEdition,
+};
+
+const Template = (args) => <RetailerProductEdition {...args} />;
+
+export const Auditor = Template.bind({});
+
+Auditor.args = {
+  tabsSections: {
+    Descripción: true,
+    "Ficha técnica": true,
+    Imágenes: true,
+  },
+  token:
+    "eyJraWQiOiJEV3owZnNieXg2MXNFcVduN3RCXC81bVhod3ZNbFZIOTgwUnZcL3RjT0lKdEk9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIyM2EzZjQ5Ni00ZTM4LTRlMTItOWJmNS03ZjkwYjc3YTJmMzUiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfbFN6UVo0WjdSIiwiY29nbml0bzp1c2VybmFtZSI6IjIzYTNmNDk2LTRlMzgtNGUxMi05YmY1LTdmOTBiNzdhMmYzNSIsImF1ZCI6IjUyZDlza2tkY2c4cWpwODhvb2sxdXNlNm1rIiwiZXZlbnRfaWQiOiI1NjE0OGI2Mi0xMzAyLTQ2NzgtOTYxYS1jNzFlMDExZTUxZWUiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTc2ODQ5NTM4NiwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTc2ODQ5ODk4NiwiaWF0IjoxNzY4NDk1Mzg2LCJlbWFpbCI6ImxhZGlib2g3ODVAbWkxNjYuY29tIn0.SxUO599SUtC7NrPaszjJ2YTFEOSLUrQ3bC8VCbM_jzBcVyfcT_gnEX9lqf_AIeMz8OTwx7SfFvXxia46chXp9pZAeaQ0tMexh04HI5S3IFOgTlaoQm7MT8V_lkgIMt_zN1F2xl5y5lcwyXw7DeCvkL606A_49Ho2gDN3Kiybrwld8OBneXhFiszt48HCV1o_0GPXECnbd7Mic2XCk6J6JPTW0n1N-PqRQqccMI9MYbVxxJOj27U9yQiivvIa68kvvJPmpFDN4ogjDCY45VDSPNixk_q4uPeXLx0S9zJ9LHtA-FGcLR0W2G5f858j2d5iF1yyyQghewBruZJhSRiXUA",
+  productSelected: {
+    orderId: 10365,
+    status: "AC",
+    datasheet_status: "AC",
+    prio: "none",
+    version: 3,
+    description_status: "AC",
+    images_status: "AC",
+    brand: null,
+    retailerOrder: 0,
+    missing: { datasheet: null, descriptions: null, images: null },
+    services: { datasheets: 1, descriptions: 1, images: 1 },
+    article: {
+      category: "Jardín|Macetas|Macetas de Plástico",
+      company_name: "",
+      country: "México",
+      id_category: "2194",
+      id_datasheet_especialist: 2928,
+      id_datasheet_facilitator: null,
+      id_description_especialist: 2928,
+      id_description_facilitator: null,
+      id_images_especialist: 3008,
+      id_images_facilitator: null,
+      id_order: 10365,
+      id_article: 144444,
+      id_auditor: 425,
+      name: "MACETA AURA NEGRO",
+      timestamp: "2025-10-20T21:30:17.000Z",
+      upc: "230750",
+      sku: "230750",
+      categoryRetailer: [
+        {
+          id_category: 2194,
+          id_retailer: 58,
+          category_name: "Jardín|Macetas|Macetas de Plástico",
+          retailer_name: "The Home Depot Golden",
+        },
+      ],
+    },
+    retailers: [{ id: 58, name: "The Home Depot Golden" }],
+    statusByRetailer: [
+      { status: "AC", service: "datasheet", retailer_id: 58 },
+      { status: "AC", service: "description", retailer_id: 58 },
+      { status: "AC", service: "images", retailer_id: 58 },
+    ],
+  },
+  user: {
+    id_user: 425,
+    name: "Auditor QA",
+    last_name: null,
+    email: "ladiboh785@mi166.com",
+    position: "Tester",
+    telephone: null,
+    country: null,
+    id_company: 254,
+    id_cognito: "23a3f496-4e38-4e12-9bf5-7f90b77a2f35",
+    birth_Date: null,
+    about_me: null,
+    zip_code: null,
+    address: null,
+    job: null,
+    id_stripe: null,
+    id_role: 6,
+    active: 1,
+    is_retailer: 0,
+    email_notify: null,
+    is_user_tech: null,
+    is_onboarding: 0,
+    membership: {
+      id: 750,
+      start_date: "2022-01-07T21:32:54.000Z",
+      end_date: "2023-01-07T21:32:54.000Z",
+      planID: 6,
+      plan: "prod_KvGd6YSTJyR3AP",
+      name: "Plan Small",
+      user_limit: "10",
+      products_limit: "1000",
+      type: "Enterprise",
+    },
+    src: "https://content-management-profile-prod.s3.amazonaws.com/id-425/425.png?1768495388525",
+  },
+};

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

@@ -0,0 +1,115 @@
+import { RetailerProductEdition } from "../index";
+
+export default {
+  title: "Components/pages/RetailerProductEdition/ImageEditor",
+  component: RetailerProductEdition,
+};
+
+const Template = (args) => <RetailerProductEdition {...args} />;
+
+export const ImageEditor = Template.bind({});
+
+ImageEditor.args = {
+  tabsSections: {
+    Descripción: false,
+    "Ficha técnica": false,
+    Imágenes: true,
+  },
+  token:
+    "eyJraWQiOiJEV3owZnNieXg2MXNFcVduN3RCXC81bVhod3ZNbFZIOTgwUnZcL3RjT0lKdEk9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJjN2U1YTZhNC0yYjNmLTRkNTQtYWY5OC05ZTA5YTRjYmMwMWUiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfbFN6UVo0WjdSIiwiY29nbml0bzp1c2VybmFtZSI6ImM3ZTVhNmE0LTJiM2YtNGQ1NC1hZjk4LTllMDlhNGNiYzAxZSIsImF1ZCI6IjUyZDlza2tkY2c4cWpwODhvb2sxdXNlNm1rIiwiZXZlbnRfaWQiOiI5Y2Y2NTNkMS1iOTA1LTQ5ODgtYmI1MC0wY2E5NTllMTJkNTMiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTc2ODQ5Njg1MCwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTc2ODUwMDQ1MCwiaWF0IjoxNzY4NDk2ODUwLCJlbWFpbCI6Imtpa2lqZTE0NjdAbXRsY3ouY29tIn0.kVyqMGAoe0ye3i882XuO_8xKf7vNzpPPse3852YP70aK4f9vq7o7NP0DhPTv5UnrcwC0Lcu_UOqoplyHxgPbIzrKF6e4Ket_T7KA2GHnO7-d30wmYl2GxMm_pSgb_qP_IZpVj5bmlST26LpEftZDHPAue3eQaZ0xRBwkI5dkVbVWncZz9iVdrUdz5FC5gXuAHyEQzn-669UsywrtlRN5y8EgcxsccNmsL_El5ctGZYiNMgn1mBeS-FvEikhNORoZqS0e8JKaYmL-e2jcrEuShpDE3mJMsm0E_KBUxt_t0FoB-tUlRDWlDkpIWHNidzTYAUfudc908ykQ15b3EdvFVw",
+  productSelected: {
+    orderId: 10421,
+    status: "RA",
+    datasheet_status: "RA",
+    prio: "none",
+    version: 3,
+    description_status: "RA",
+    images_status: "AC",
+    brand: null,
+    retailerOrder: 0,
+    missing: { datasheet: null, descriptions: null, images: null },
+    services: { datasheets: 1, descriptions: 1, images: 1 },
+    article: {
+      category:
+        "Belleza y Cuidado Personal|Cuidado de la Piel|Cremas e Hidratantes Corporales",
+      company_name: "Walmart SA de CV",
+      country: "México",
+      id_category: "3513",
+      id_datasheet_especialist: 426,
+      id_datasheet_facilitator: null,
+      id_description_especialist: 426,
+      id_description_facilitator: null,
+      id_images_especialist: 427,
+      id_images_facilitator: null,
+      id_order: 10421,
+      id_article: 144814,
+      id_auditor: 425,
+      name: "Producto 300080",
+      timestamp: "2025-11-14T22:40:40.000Z",
+      upc: "400080029609",
+      sku: "SKU-300080",
+      categoryRetailer: [
+        {
+          id_category: 3513,
+          id_retailer: 38,
+          category_name:
+            "Belleza y Cuidado Personal|Cuidado de la Piel|Cremas e Hidratantes Corporales",
+          retailer_name: "Del Sol",
+        },
+        {
+          id_category: 4872,
+          id_retailer: 36,
+          category_name: "Cuidado del bebé|Cuidado del bebé|Cuidado del bebé",
+          retailer_name: "Oxxo",
+        },
+      ],
+    },
+    retailers: [
+      { id: 36, name: "Oxxo" },
+      { id: 38, name: "Del Sol" },
+    ],
+    statusByRetailer: [
+      { status: "RA/AS", service: "datasheet", retailer_id: 36 },
+      { status: "RA/AS", service: "description", retailer_id: 36 },
+      { status: "AC", service: "images", retailer_id: 36 },
+      { status: "RA/AS", service: "datasheet", retailer_id: 38 },
+      { status: "RA/AS", service: "description", retailer_id: 38 },
+      { status: "AC", service: "images", retailer_id: 38 },
+    ],
+  },
+  user: {
+    id_user: 427,
+    name: "Especialista Edición",
+    last_name: null,
+    email: "kikije1467@mtlcz.com",
+    position: "Tester",
+    telephone: null,
+    country: null,
+    id_company: 254,
+    id_cognito: "c7e5a6a4-2b3f-4d54-af98-9e09a4cbc01e",
+    birth_Date: null,
+    about_me: null,
+    zip_code: null,
+    address: null,
+    job: null,
+    id_stripe: null,
+    id_role: 8,
+    active: 1,
+    is_retailer: 0,
+    email_notify: null,
+    is_user_tech: null,
+    is_onboarding: 0,
+    membership: {
+      id: 750,
+      start_date: "2022-01-07T21:32:54.000Z",
+      end_date: "2023-01-07T21:32:54.000Z",
+      planID: 6,
+      plan: "prod_KvGd6YSTJyR3AP",
+      name: "Plan Small",
+      user_limit: "10",
+      products_limit: "1000",
+      type: "Enterprise",
+    },
+    src: "https://content-management-profile-prod.s3.amazonaws.com/id-427/427.png?1768496850843",
+  },
+};

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

@@ -0,0 +1,174 @@
+import { RetailerProductEdition } from "../index";
+
+export default {
+  title: "Components/pages/RetailerProductEdition/TextEditor",
+  component: RetailerProductEdition,
+};
+
+const Template = (args) => <RetailerProductEdition {...args} />;
+
+export const TextEditor = Template.bind({});
+
+TextEditor.args = {
+  tabsSections: {
+    Descripción: true,
+    "Ficha técnica": false,
+    Imágenes: false,
+  },
+  token:
+    "eyJraWQiOiJEV3owZnNieXg2MXNFcVduN3RCXC81bVhod3ZNbFZIOTgwUnZcL3RjT0lKdEk9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI4ZDAxMDIxNC01YmZhLTQzYzMtOTZmYi1jNTU2ZGMwNTc3NGIiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfbFN6UVo0WjdSIiwiY29nbml0bzp1c2VybmFtZSI6IjhkMDEwMjE0LTViZmEtNDNjMy05NmZiLWM1NTZkYzA1Nzc0YiIsImF1ZCI6IjUyZDlza2tkY2c4cWpwODhvb2sxdXNlNm1rIiwiZXZlbnRfaWQiOiIzYzc3Y2JjMC02ZTM0LTRhZDQtOGJjMy02MmJmNGRhOTYxMTUiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTc2ODQ5NjU3NywibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTc2ODUwMDE3NywiaWF0IjoxNzY4NDk2NTc3LCJlbWFpbCI6ImthcmFmZTMyMThAbW9tMmtpZC5jb20ifQ.FhBvgESIAX90v1_2auyejto5NrMetq5qHoFxzh9lRr07UsYw2iKdDG29VyJLZ_bPStSUx-424U7FR1ctSD9mU831TKuwSyGyGKLz0mO70Ume7pgt8zfN0C_YWv5MFG4thcMrvMfEuyzfUhvQ944HBjXvqzyjcOdCjsFx9gVEnLh1bsXe1MJrUx8H1KN5gNrrkkTE7Qo3ybyr_WZF1002JsdMaoFg2UP3H5gzcbcuxgtjNuyhqaXGnoCBsPhu6SOAwWLEu1pZMty88OFteEWEdxJxCbzKaj8IomT8U4Tjiti4tshMkXRnxHBqAkGzLDu3ypbG4S31CR7RgDxRIVqntw",
+  productSelected: {
+    orderId: 10424,
+    status: "CA",
+    datasheet_status: "CA",
+    prio: "none",
+    version: 3,
+    description_status: "CA",
+    images_status: "CA",
+    brand: "Marca",
+    retailerOrder: 0,
+    missing: { datasheet: null, descriptions: null, images: null },
+    services: { datasheets: 1, descriptions: 1, images: 1 },
+    article: {
+      category:
+        "Categoría Genérica Rappi|Categoría Genérica|Categoría Genérica",
+      company_name: "Walmart SA de CV",
+      country: "México",
+      id_category: "4911",
+      id_datasheet_especialist: 426,
+      id_datasheet_facilitator: null,
+      id_description_especialist: 426,
+      id_description_facilitator: null,
+      id_images_especialist: 427,
+      id_images_facilitator: null,
+      id_order: 10424,
+      id_article: 144832,
+      id_auditor: 425,
+      name: "Copia prod cadenas 1",
+      timestamp: "2025-11-16T00:32:13.000Z",
+      upc: "100023",
+      sku: "900006",
+      categoryRetailer: [
+        {
+          id_category: 3431,
+          id_retailer: 24,
+          category_name:
+            "Abarrotes Básicos Alsuper|Abarrotes Básicos|Abarrotes Básicos",
+          retailer_name: "Alsuper",
+        },
+        {
+          id_category: 3435,
+          id_retailer: 21,
+          category_name:
+            "Bebés Cuidado e Higiene|Bebés Cuidado e Higiene|Bebés Cuidado e Higiene",
+          retailer_name: "Anicetos",
+        },
+        {
+          id_category: 3438,
+          id_retailer: 1008,
+          category_name:
+            "Categoría Genérica App Olímpica|Categoría Genérica|Categoría Genérica",
+          retailer_name: "App Olímpica",
+        },
+        {
+          id_category: 3439,
+          id_retailer: 2004,
+          category_name:
+            "Categoría Genérica Automercado|Categoría Genérica Automercado|Categoría Genérica Automercado",
+          retailer_name: "Automercado",
+        },
+        {
+          id_category: 4774,
+          id_retailer: 1032,
+          category_name:
+            "Categoría Genérica IMPIRA Colombia|Categoría Genérica|Categoría Genérica",
+          retailer_name: "IMPIRA Colombia",
+        },
+        {
+          id_category: 4911,
+          id_retailer: 16,
+          category_name:
+            "Categoría Genérica Rappi|Categoría Genérica|Categoría Genérica",
+          retailer_name: "Rappi",
+        },
+        {
+          id_category: 6103,
+          id_retailer: 9,
+          category_name: "Alimentos y Bebidas|Amazon Súper|Abarrotes",
+          retailer_name: "Amazon",
+        },
+        {
+          id_category: 6792,
+          id_retailer: 32,
+          category_name:
+            "Categoría Salud y Belleza Coppel|Categoría Salud y Belleza|Categoría Salud y Belleza",
+          retailer_name: "Coppel",
+        },
+        {
+          id_category: 7008,
+          id_retailer: 3,
+          category_name: "Bebés|Accesorios para Bebés|Accesorios para Bebés",
+          retailer_name: "Sam´s Club",
+        },
+      ],
+    },
+    retailers: [
+      { id: 3, name: "Sam´s Club" },
+      { id: 16, name: "Rappi" },
+      { id: 32, name: "Coppel" },
+      { id: 1008, name: "App Olímpica" },
+    ],
+    statusByRetailer: [
+      { status: "RA/AS", service: "datasheet", retailer_id: 3 },
+      { status: "RA/AS", service: "description", retailer_id: 3 },
+      { status: "AA", service: "images", retailer_id: 3 },
+      { status: "AC", service: "datasheet", retailer_id: 16 },
+      { status: "AC", service: "description", retailer_id: 16 },
+      { status: "AC", service: "images", retailer_id: 16 },
+      { status: "AC", service: "datasheet", retailer_id: 32 },
+      { status: "AC", service: "description", retailer_id: 32 },
+      { status: "AC", service: "images", retailer_id: 32 },
+      { status: "PA", service: "datasheet", retailer_id: 1032 },
+      { status: "PA", service: "description", retailer_id: 1032 },
+      { status: "PA", service: "images", retailer_id: 1032 },
+      { status: "PA", service: "datasheet", retailer_id: 2004 },
+      { status: "PA", service: "description", retailer_id: 2004 },
+      { status: "PA", service: "images", retailer_id: 2004 },
+    ],
+  },
+  user: {
+    id_user: 426,
+    name: "Especialista Textos",
+    last_name: null,
+    email: "karafe3218@mom2kid.com",
+    position: "Tester",
+    telephone: null,
+    country: null,
+    id_company: 254,
+    id_cognito: "8d010214-5bfa-43c3-96fb-c556dc05774b",
+    birth_Date: null,
+    about_me: null,
+    zip_code: null,
+    address: null,
+    job: null,
+    id_stripe: null,
+    id_role: 7,
+    active: 1,
+    is_retailer: 0,
+    email_notify: null,
+    is_user_tech: null,
+    is_onboarding: 0,
+    membership: {
+      id: 750,
+      start_date: "2022-01-07T21:32:54.000Z",
+      end_date: "2023-01-07T21:32:54.000Z",
+      planID: 6,
+      plan: "prod_KvGd6YSTJyR3AP",
+      name: "Plan Small",
+      user_limit: "10",
+      products_limit: "1000",
+      type: "Enterprise",
+    },
+    src: "https://content-management-profile-prod.s3.amazonaws.com/id-426/426.png?1768496578620",
+  },
+};

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

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.div`
   display: flex;
@@ -20,7 +21,8 @@ export const Container = styled.div`
     }
 
     .product-information {
-      width: calc(100% - 341px);
+      width: 100%;
+      height: 100%;
       display: flex;
       flex-direction: column;
 
@@ -46,6 +48,12 @@ export const Container = styled.div`
         padding: 10px;
         padding-left: 0;
 
+        .action-buttons{
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+        }
+
         .commentary {
           display: flex;
           align-items: flex-end;
@@ -87,6 +95,23 @@ export const Container = styled.div`
       .feedback-box {
         display: flex;
       }
+
+      .required-inputs-message {
+        font-family: ${FontFamily.AvenirNext};
+        font-size: 13px;
+        color: ${GlobalColors.color_gray};
+        padding: 10px;
+        display: flex;
+        align-items: center;
+
+        p + * {
+          margin-top: 10px;
+        }
+
+        button {
+          min-width: fit-content;
+        }
+      }
     }
   }
   #modal-message-box {
@@ -95,10 +120,50 @@ export const Container = styled.div`
   }
   .container {
     width: 100%;
-    height: 100%;
+    height: 90%;
     .dropzone {
       height: 100%;
       width: 100%;
+      position: relative;
+      transition: all 0.5s ease;
+
+      &.drag-active {
+        background-color: rgba(${GlobalColors.rgb_color_pink}, 0.05);
+        border: 2px dashed ${GlobalColors.color_pink};
+        border-radius: 8px;
+
+        aside {
+          opacity: 0.3;
+          pointer-events: none;
+        }
+      }
+
+      .drag-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: rgba(${GlobalColors.rgb_color_pink}, 0.1);
+        border-radius: 8px;
+        pointer-events: none;
+        z-index: 10;
+
+        p {
+          font-family: ${FontFamily.AvenirNext};
+          font-size: 24px;
+          font-weight: 600;
+          color: ${GlobalColors.color_pink};
+          text-align: center;
+          padding: 20px;
+          background-color: ${GlobalColors.white};
+          border-radius: 8px;
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        }
+      }
     }
   }
 `;