contentoh-components-library 21.3.55 → 21.3.57

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

@@ -27,6 +27,16 @@ export const MessageContainer = styled.div`
   min-height: ${(props) => (props.height ? "300px" : "190px")};
   background: #281f33;
   border-radius: 39px;
+  & > .generic-text {
+    width: 100%;
+    font-family: Raleway;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 16px;
+    text-align: center;
+    color: #f7f7f7;
+    margin: 20px 0px;
+  }
 `;
 export const TextArea = styled.textarea`
   display: block;

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

@@ -14,7 +14,7 @@ export const MainContainer = styled.div`
   & > * {
     padding: 0 30px;
   }
-  box-shadow: -4px 0px 8px 0px rgba(0,0,0,0.1);
+  box-shadow: -4px 0px 8px 0px rgba(0, 0, 0, 0.1);
   .headerTitle {
     font-weight: bold;
     font-size: 25px;

package/src/components/organisms/OrderDetail/utils/Table/styles.js

@@ -36,7 +36,6 @@ export const Column = styled.div`
   &:nth-child(-n + 2) {
     overflow: hidden;
   }
-
   .tooltip {
     position: relative;
     display: inline-block;

package/src/components/organisms/TableResizable/TableResizable.stories.js

@@ -0,0 +1,17 @@
+import { TableResizable } from ".";
+import { data } from "./utils.js";
+
+export default {
+  title: "Components/organisms/TableResizable",
+  component: TableResizable,
+};
+
+const Template = (args) => <TableResizable {...args} />;
+
+export const DefaultTableResizable = Template.bind({});
+DefaultTableResizable.args = {
+  headers: ["Col 1", "Col 2", "Col 3", "Col 4", "Col 5"],
+  tableContent: data,
+  minCellWidth: 120,
+  withResetSizeButton: true,
+};

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

@@ -0,0 +1,119 @@
+import React, { useState, useCallback, useEffect, useRef } from "react";
+import { RestartAlt } from "@mui/icons-material";
+import { Container } from "./styles.js";
+
+const createHeaders = (headers) => {
+  return headers.map((item) => ({
+    text: item,
+    ref: useRef(),
+  }));
+};
+
+/*
+ * Read the blog post here:
+ * https://letsbuildui.dev/articles/resizable-tables-with-react-and-css-grid
+ */
+export const TableResizable = (props) => {
+  const {
+    gridTemplateColumns,
+    headers,
+    minCellWidth,
+    tableContent,
+    withResetSizeButton,
+  } = props;
+  // const [tableHeight, setTableHeight] = useState("auto");
+  const [activeIndex, setActiveIndex] = useState(null);
+  const tableElement = useRef(null);
+  const columns = createHeaders(headers);
+
+  // useEffect(() => {
+  //   setTableHeight(tableElement.current.offsetHeight);
+  // }, []);
+
+  const mouseDown = (index) => setActiveIndex(index);
+
+  const mouseMove = useCallback(
+    (e) => {
+      const gridColumns = columns.map((col, i) => {
+        if (i === activeIndex) {
+          const width = e.clientX - col.ref.current.offsetLeft;
+          if (width >= minCellWidth) return `${width}px`;
+        }
+        return `${col.ref.current.offsetWidth}px`;
+      });
+      const gridTemplateColumns = `${gridColumns.join(" ")}`;
+      tableElement.current.style.gridTemplateColumns = gridTemplateColumns;
+    },
+    [activeIndex, columns, minCellWidth]
+  );
+
+  const removeListeners = useCallback(() => {
+    window.removeEventListener("mousemove", mouseMove);
+    window.removeEventListener("mouseup", removeListeners);
+  }, [mouseMove]);
+
+  const mouseUp = useCallback(() => {
+    setActiveIndex(null);
+    removeListeners();
+  }, [setActiveIndex, removeListeners]);
+
+  useEffect(() => {
+    if (activeIndex > -1) {
+      window.addEventListener("mousemove", mouseMove);
+      window.addEventListener("mouseup", mouseUp);
+    }
+    return () => removeListeners();
+  }, [activeIndex, mouseMove, mouseUp, removeListeners]);
+
+  const resetTableCells = () => {
+    tableElement.current.style.gridTemplateColumns = "";
+  };
+
+  return (
+    <Container
+      gridTemplateColumns={gridTemplateColumns}
+      totalColumns={columns?.length}
+      totalRows={tableContent?.length}
+    >
+      {withResetSizeButton ? (
+        <button className="reset-button" onClick={resetTableCells}>
+          <RestartAlt sx={{ fontSize: 18 }} />
+        </button>
+      ) : null}
+      <div className="table-wrapper">
+        <table className="resizeable-table" ref={tableElement}>
+          <thead>
+            <tr>
+              {columns?.map(({ ref, text }, i) => (
+                <th ref={ref} key={i}>
+                  <span>{text}</span>
+                  <div
+                    style={{ height: "50px" /* tableHeight */ }}
+                    onMouseDown={() => mouseDown(i)}
+                    className={`resize-handle ${
+                      activeIndex === i ? "active" : "idle"
+                    }`}
+                  />
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {tableContent.map((row) => (
+              <tr key={row.key}>
+                {row?.columns?.map((column, indexColumn) => (
+                  <td
+                    className={typeof column === "object" ? "noOverflow" : ""}
+                    key={`${row.key}-${indexColumn}`}
+                  >
+                    <span>{column}</span>
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,133 @@
+import styled from "styled-components";
+
+const defaultTemplateColumns = (totalColumns) =>
+  `minmax(100px, 1fr) `.repeat(totalColumns);
+
+export const Container = styled.div`
+  position: absolute;
+  overflow: hidden; /* Clips any scrollbars that appear */
+  font-family: Avenir Next;
+  font-size: 13px;
+  width: 90%;
+
+  .reset-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    cursor: pointer;
+    padding: 3px;
+    border: 0;
+    background: #f5f5f5;
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    margin: 0;
+    z-index: 10;
+  }
+
+  .table-wrapper {
+    border-radius: 6px;
+    background: #fff;
+  }
+
+  table {
+    width: 100%;
+    height: calc(100vh - 250px);
+    overflow: auto; /* Allow scrolling within the table */
+    display: grid;
+    grid-template-columns: ${(props) =>
+      props.gridTemplateColumns ?? defaultTemplateColumns(props.totalColumns)};
+    grid-template-rows: ${(props) => `repeat(${props.totalRows + 2}, 50px)`};
+  }
+
+  table th {
+    font-size: 15px;
+  }
+
+  table th,
+  table td {
+    text-align: left;
+    padding: 5px;
+  }
+
+  table th span,
+  table td span {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: block;
+    border-right: 1px solid #ccc;
+    text-align: center;
+    height: 100%;
+  }
+
+  table th:last-child span,
+  table td:last-child span {
+    border-right: 0px;
+  }
+
+  table tr td {
+    border-bottom: 1px solid #ccc;
+  }
+
+  table tr th {
+    border-bottom: 1px solid #ccc;
+  }
+
+  table thead,
+  table tbody,
+  table tr {
+    display: contents;
+    background: red;
+  }
+
+  table thead {
+    -webkit-user-select: none; /* Safari */
+    -ms-user-select: none; /* IE 10 and IE 11 */
+    user-select: none; /* Standard syntax */
+  }
+
+  th {
+    position: sticky;
+    top: 0;
+    background-color: #fff;
+    line-height: 40px;
+    z-index: 8;
+  }
+
+  td {
+    line-height: 40px;
+    height: 50px;
+  }
+
+  .resize-handle {
+    display: block;
+    position: absolute;
+    cursor: col-resize;
+    width: 8px;
+    right: 0;
+    top: 0;
+    z-index: 1;
+    border-right: 1px solid transparent;
+  }
+
+  .resize-handle:hover {
+    border-color: #ccc;
+  }
+
+  .resize-handle.active {
+    border-color: #517ea5;
+  }
+
+  .resizeable-table {
+    width: 100%;
+  }
+
+  .noOverflow {
+    overflow: inherit;
+    span {
+      overflow: inherit;
+    }
+  }
+`;

package/src/components/organisms/TableResizable/utils.js

@@ -0,0 +1,46 @@
+export const data = [
+  {
+    key: 1,
+    object: {},
+    columns: [
+      "Large Detroit Style Pizza",
+      3213456785,
+      "$31.43",
+      "Pending",
+      "Dave",
+    ],
+  },
+  {
+    key: 2,
+    object: {},
+    columns: [
+      "Large Detroit Style Pizza",
+      3213456785,
+      "$31.43",
+      "Pending",
+      "Dave",
+    ],
+  },
+  {
+    key: 3,
+    object: {},
+    columns: [
+      "Large Detroit Style Pizza",
+      3213456785,
+      "$31.43",
+      "Pending",
+      "Dave",
+    ],
+  },
+  {
+    key: 4,
+    object: {},
+    columns: [
+      "Large Detroit Style Pizza",
+      3213456785,
+      "$31.43",
+      "Pending",
+      "Dave",
+    ],
+  },
+];

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

@@ -9,83 +9,59 @@ const Template = (args) => <Dashboard {...args} />;
 export const DashboardDeafult = Template.bind({});
 DashboardDeafult.args = {
   user: {
-    id_user: 59,
-    name: "Cadena",
-    last_name: "Comercial",
-    email: "cadena.ismael@allfreemail.net",
-    position: "Admin",
-    telephone: "+523111366336",
+    id_user: 37,
+    name: "José",
+    last_name: "Castañeda",
+    email: "ismael97lopez@gmail.com",
+    position: "Auditor",
+    telephone: "",
     country: "México",
-    id_company: 817,
-    id_cognito: "5884ae34-59d6-4454-b98e-821518bcc3a7",
+    id_company: 2,
+    id_cognito: "9a213128-6482-4c16-a4b6-6e64f225b1bd",
     birth_Date: null,
     about_me: "",
     zip_code: "",
     address: "",
     job: "",
     id_stripe: "",
-    id_role: 0,
+    id_role: 6,
     active: 1,
-    is_retailer: 1,
-    email_notify: 0,
+    is_retailer: 0,
+    email_notify: 1,
     is_user_tech: null,
     membership: {
-      id: 47,
-      start_date: "2022-05-25T14:31:12.000Z",
-      end_date: "2023-05-25T14:31:12.000Z",
-      planID: 5,
-      plan: "prod_Ktl6B5Ou2gqTB2",
-      name: "Plan Pro",
-      user_limit: "5",
-      products_limit: "500",
+      id: 2,
+      start_date: "2021-11-05T02:35:12.000Z",
+      end_date: "2022-11-05T02:34:49.000Z",
+      planID: 1,
+      plan: "prod_KtkvuFFLpOdP6e",
+      name: "Plan Free",
+      user_limit: "1",
+      products_limit: "3",
       type: "PyMES",
     },
-    src: "https://content-management-profile.s3.amazonaws.com/id-59/59.png?1681406304781",
+    src: "https://content-management-profile.s3.amazonaws.com/id-37/37.png?1684953973972",
   },
   company: {
-    id_company: 817,
-    trade_name: "Retailer acc",
-    company_name: "Retailer acc",
-    rfc: "ASER12345",
-    adress: "Av. Insurgentes",
-    about_company: null,
-    telephone: null,
-    web_site: null,
-    zip_code: null,
+    id_company: 1,
+    trade_name: "GRUPO BRAHMA",
+    company_name: "GRUPO BRAHMA",
+    rfc: "XAXX010101000",
+    adress: "AA",
+    about_company: "",
+    telephone: "",
+    web_site: "",
+    zip_code: "",
     email: null,
-    social_link: null,
-    is_retailer: 1,
-    financedRetailers: [
-      {
-        id: 68,
-        name: "The Home Depot Merchants",
-        country: "México",
-        id_region: 1,
-        active: 1,
-      },
-    ],
+    social_link: "",
+    is_retailer: 0,
     retailers: [
       {
-        id: 59,
-        name: "The Home Depot Platinum",
-        country: "México",
-      },
-      {
-        id: 60,
-        name: "The Home Depot Resizing",
-        country: "México",
-      },
-      {
-        id: 61,
-        name: "Home Depot TAB",
-        country: "México",
-      },
-      {
-        id: 68,
-        name: "The Home Depot Merchants",
-        country: "México",
+        id: null,
+        name: null,
+        country: null,
       },
     ],
   },
-  jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiIyNDlhMjJkMC00Y2VhLTRjNGEtYTNjYS0zM2ZjN2VmNjAwOTEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6IjI0OWEyMmQwLTRjZWEtNGM0YS1hM2NhLTMzZmM3ZWY2MDA5MSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI0MzRhODBmZi0yZmNiLTQyMmItOGI5ZC0wNzU4OGQ3NGQyNmIiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4MTQyNjgyOCwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTY4MTQzMDQyOCwiaWF0IjoxNjgxNDI2ODI4LCJlbWFpbCI6Im1lcmNoYW50c2lsdW1pbmFjaW9uQGFsbGZyZWVtYWlsLm5ldCJ9.IJNkSNUBmeOFQiDzyR2R0dDtwqg7U5GbXIwtW60cpxVBXj5Lr4zRdPuQnW3o02PxVR189IX2S3jcGgHhnvGMMKh4jRr-YM_eFpXYRQL_279tjG_rlZjwYFC333XMOcHViB8rEqNAti1PnuphCzqNiWH1z_b6aynxlbAeR23-P3VhSb0v6z_EWTdnuEw7ETXLFu2V6qaZTJCx6l7CZKECG2UExbaA0Be5_Ju56Q5cSNSf-lngetTvlb5DGeCge4nQ36y2qy9HnjAPDtP6c1v7KrT6zE74qh_L6u-xrdwYlaP5KBg4B3qJobtI9bgtKiqY1AZSTjWp4vr0T0_5M6GA7Q",
+  jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJmNTkyN2Y4ZS1jYmY3LTQ5MjItOWUwOS1lNjllYzBiMjczMWEiLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6ImY1OTI3ZjhlLWNiZjctNDkyMi05ZTA5LWU2OWVjMGIyNzMxYSIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiI3ZjNkZTM4Mi03NWE2LTRlNDAtYTI3NC00YmM5ODg2Nzk0YjYiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4NDk1NTYzOCwibmFtZSI6IklzbWFlbCBMb3BleiIsInBob25lX251bWJlciI6Iis1MjMxMTEzNjYzMzYiLCJleHAiOjE2ODQ5NTkyMzcsImlhdCI6MTY4NDk1NTYzOCwiZW1haWwiOiJpbG9wZXpAY29udGVudG9oLmNvbSJ9.ALvhpSGVv34JV8vLSg0CznmsIzRMJ_BFcmDI4qYXzr0qwgLLihon0M0xmODMhIHKcZK4jODC01guliB6fTPoCb8kfPHrBgLnHMBU8PxU1Fcc2EqF5U8lh4fJK6Mc7kiJ4lCreKJL3kT_1ytC-7FdRAlhNXzuJW6aMQQ785ODQ8-1RtHKW6U_b9x88-WFxjltEKuw734LGBSkz9iKZSumNBJBP8HTMgwOgmRTJ6lR-hPsujvl7aF3maXhftpk2fI8S_FzjVRMsxY3T8hQHIXEYwQUv-fC5SPOgc8XDuAp18MKfi0qkU1EYHQahC0qZmvgVGWEDcu5D36Xj0as4iAiFQ",
 };

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

@@ -39,6 +39,7 @@ export const Dashboard = ({ jwt, user, company }) => {
   ];
   const [applicantsFilter, setApplicantsFilter] = useState([]);
   const [totalCount, setTotalCount] = useState(0);
+  const [isProviderFinanced] = useState(company?.financedRetailers?.length > 0);
 
   const loadProductVersions = async (queryObject) => {
     const keys = Object.keys(queryObject);
@@ -70,7 +71,7 @@ export const Dashboard = ({ jwt, user, company }) => {
     );
     const parsed = JSON.parse(retailersResponse.data.body).data;
     let retailers = Object.values(parsed);
-    if (isRetailer) {
+    if (isRetailer || isProviderFinanced) {
       const retailersValid = company.retailers.map((e) => e.id);
       retailers = retailers.filter((value) =>
         retailersValid.includes(value.id)
@@ -252,7 +253,7 @@ export const Dashboard = ({ jwt, user, company }) => {
           setParameterArray={setDatesRange}
           isSingleSelect
         />
-        {providers?.length > 0 && (
+        {!isProviderFinanced && providers?.length > 1 && (
           <CustomSelect
             showFilterString={true}
             showSearchBar={true}
@@ -276,7 +277,7 @@ export const Dashboard = ({ jwt, user, company }) => {
           setParameterArray={setCategoryId}
           defaultOption="Todas las categorías"
         />
-        {retailers?.length > 1 && (
+        {!isProviderFinanced && retailers?.length > 1 && (
           <CustomSelect
             showFilterString={true}
             showSearchBar={true}

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

@@ -16,47 +16,121 @@ ProviderProductEditionDefault.args = {
     Imágenes: false,
   },
   token:
-    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI1ODg0YWUzNC01OWQ2LTQ0NTQtYjk4ZS04MjE1MThiY2MzYTciLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjU4ODRhZTM0LTU5ZDYtNDQ1NC1iOThlLTgyMTUxOGJjYzNhNyIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJlZjViNDQzYi02ODc0LTQ2NGQtOWZiZS00Y2UwNWU4ZDQ3YTEiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4MDAzODYyNiwibmFtZSI6IkNhZGVuYSBJc21hZWwiLCJwaG9uZV9udW1iZXIiOiIrNTIzMTExMzY2MzM2IiwiZXhwIjoxNjgwMDQyMjI1LCJpYXQiOjE2ODAwMzg2MjYsImVtYWlsIjoiY2FkZW5hLmlzbWFlbEBhbGxmcmVlbWFpbC5uZXQifQ.rhufpJdUaJOpiKtXJgNoDq863ecFnLp63c9_6NeEbpYYNN19d_xac8aZADN-QMpkmz1oxtqfxf_-JN5jMJexi9gJCRb9O7-xL75v_G9UjdmE8sRA6qRNb_tFUCt1oee_ulgqm_2wTjb7qGMGvY1eb1J1IX2pBYKnBy64KM6J5xFfZ57ac_bGruYhCzUexPBWyZKc5ckoY2zJqK5m5Ok7ds0m1hC0t-eQSGX_8KMsGQKiHevQ07cZUQ9mxOGVweRuAqITNx8fVmpD9QTpoZJJ5STVVcKO2CS0ltyE_DNlyejO7mZqbKvGEeLYc4ga0nozK9aP8H2cN_topT0d4JZ5rA",
+    "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI1ODg0YWUzNC01OWQ2LTQ0NTQtYjk4ZS04MjE1MThiY2MzYTciLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjU4ODRhZTM0LTU5ZDYtNDQ1NC1iOThlLTgyMTUxOGJjYzNhNyIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJjOWRjOWE1OS0xNTAxLTQyOTgtODRjMi03MDM4NzRhNzIxMTEiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4MjQ2Mjc4NCwibmFtZSI6IkNhZGVuYSBJc21hZWwiLCJwaG9uZV9udW1iZXIiOiIrNTIzMTExMzY2MzM2IiwiZXhwIjoxNjgyNDY2Mzg0LCJpYXQiOjE2ODI0NjI3ODQsImVtYWlsIjoiY2FkZW5hLmlzbWFlbEBhbGxmcmVlbWFpbC5uZXQifQ.ebKSsnTxKoNfWDoKGFJRlLWgNulGj4KrDe0EgsqLEIVx3Qu0lgmg43UY5tZ3FUlRE8XO2UGq0XxEgdbGOe_4nbTRYigdvxP3bh3cPQ0s68hlTDfhPRvxVJYlaO4s0rhk9rt_VVteTyLfhPHFCymrkFYYDB8bVvKnxUUCX_nJvqGQkl48JiYgvYVLpuus5FvRkGwi1u-jTtMoKiUK-jw9MxI18hD0FWXVnJr-q9ftf2d0bv4JRv4XJ_tRh1N6jps5n3c_KKZswqRfGLU-8MS2X3DU6pDqEP2BZAGXksiFYXYH_uHE6BKJAl7EEhkDTqZsx_jWtVSXTdDg_QDKrOw0Kg",
   articleId: 238,
   category: 846,
   version: 2,
   productSelected: {
-    category: "Iluminación|Lámparas de Interior|Pie y Pedestal",
-    company_name: "Demo",
-    company_id: 923,
-    id_category: "2676",
-    id_article: 17163,
-    name: "Eglo 95055",
-    upc: "165033",
-    version: 1,
+    orderId: 15165,
+    article_status: "AAC",
+    datasheet_status: "AAC",
+    description_status: "FAP",
+    images_status: "FAP",
+    prio: "none",
+    version: 3,
+    brand: null,
+    article: {
+      category: "Puertas y Ventanas|Molduras|Molduras Madera Blanda",
+      company_name: "Demo",
+      id_company: 923,
+      country: "México",
+      id_category: "2366",
+      id_article: 39336,
+      name: "Prueba Auditoria",
+      upc: "100030124",
+    },
+    retailers: [
+      {
+        id: 58,
+        name: "The Home Depot Golden",
+      },
+      {
+        id: 68,
+        name: "The Home Depot Dropship",
+      },
+    ],
+    services: {
+      datasheets: 1,
+      descriptions: 1,
+      images: 1,
+    },
+    statusByRetailer: {
+      58: {
+        datasheet: "AAC",
+        description: "FAP",
+        images: "FAP",
+      },
+    },
+    retailersWithService: ["58"],
+    id_article: 39336,
     retailersAvailable: [
+      {
+        id: 58,
+        name: "The Home Depot Golden",
+      },
       {
         id: 68,
-        name: "The Home Depot Merchants",
+        name: "The Home Depot Dropship",
       },
     ],
   },
   productToEdit: {
-    idCategory: "2676",
-    ArticleId: 17163,
-    product: [
-      {
-        category: "Iluminación|Lámparas de Interior|Pie y Pedestal",
+    ArticleId: 39336,
+    idCategory: "2366",
+    product: {
+      orderId: 15165,
+      article_status: "AAC",
+      datasheet_status: "AAC",
+      description_status: "FAP",
+      images_status: "FAP",
+      prio: "none",
+      version: 3,
+      brand: null,
+      article: {
+        category: "Puertas y Ventanas|Molduras|Molduras Madera Blanda",
         company_name: "Demo",
-        company_id: 923,
-        id_category: "2676",
-        id_article: 17163,
-        name: "Eglo 95055",
-        upc: "165033",
-        version: 1,
-        retailersAvailable: [
-          {
-            id: 68,
-            name: "The Home Depot Merchants",
-          },
-        ],
+        id_company: 923,
+        country: "México",
+        id_category: "2366",
+        id_article: 39336,
+        name: "Prueba Auditoria",
+        upc: "100030124",
       },
-    ],
+      retailers: [
+        {
+          id: 58,
+          name: "The Home Depot Golden",
+        },
+        {
+          id: 68,
+          name: "The Home Depot Dropship",
+        },
+      ],
+      services: {
+        datasheets: 1,
+        descriptions: 1,
+        images: 1,
+      },
+      statusByRetailer: {
+        58: {
+          datasheet: "AAC",
+          description: "FAP",
+          images: "FAP",
+        },
+      },
+      retailersWithService: ["58"],
+      id_article: 39336,
+      retailersAvailable: [
+        {
+          id: 58,
+          name: "The Home Depot Golden",
+        },
+        {
+          id: 68,
+          name: "The Home Depot Dropship",
+        },
+      ],
+    },
   },
   location: {
     pathname: "/EditProducts",
@@ -99,7 +173,7 @@ ProviderProductEditionDefault.args = {
       products_limit: "500",
       type: "PyMES",
     },
-    src: "https://content-management-profile.s3.amazonaws.com/id-59/59.png?1680038627077",
+    src: "https://content-management-profile.s3.amazonaws.com/id-59/59.png?1682462786497",
   },
   company: {
     id_company: 817,
@@ -117,7 +191,7 @@ ProviderProductEditionDefault.args = {
     financedRetailers: [
       {
         id: 68,
-        name: "The Home Depot Merchants",
+        name: "The Home Depot Dropship",
         country: "México",
         id_region: 1,
         active: 1,
@@ -141,7 +215,12 @@ ProviderProductEditionDefault.args = {
       },
       {
         id: 68,
-        name: "The Home Depot Merchants",
+        name: "The Home Depot Dropship",
+        country: "México",
+      },
+      {
+        id: 58,
+        name: "The Home Depot Golden",
         country: "México",
       },
     ],