contentoh-components-library 21.3.53 → 21.3.54

package/src/components/organisms/Chat/Footer/index.js

@@ -169,6 +169,17 @@ export const Footer = (props) => {
                 errorMessage = "El ID del ticket no es valido";
               }
               break;
+            case "product_status":
+              if (
+                isValidNaturalNumber(dataChat?.id) &&
+                isValidNaturalNumber(dataChat?.version) &&
+                isValidNaturalNumber(dataChat?.retailerId)
+              ) {
+                fileKey += `productStatus/${dataChat.id}-${dataChat?.version}-${dataChat?.retailerId}/`;
+              } else {
+                errorMessage = "El ID del ticket no es valido";
+              }
+              break;
 
             default:
               errorMessage =

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

@@ -24,7 +24,7 @@ export const Chat = (props) => {
   const [showPopUpChat, setShowPopUpChat] = useState(false);
   const [data, setData] = useState();
 
-  const { ticketCompany } = chatData || {};
+  const { ticketCompany, retailerId } = chatData || {};
 
   useEffect(() => {
     switch (chatType) {
@@ -37,6 +37,9 @@ export const Chat = (props) => {
       case "ticket":
         validateChatTicket();
         break;
+      case "product_status":
+        validateProductStatus();
+        break;
       default:
         setData({
           code: 404,
@@ -46,6 +49,45 @@ export const Chat = (props) => {
     }
   }, [chatType]);
 
+  const validateProductStatus = () => {
+    const {
+      userToken, // string
+      id, // number
+      version,
+      retailerId, // number
+      status,
+      orderId,
+    } = chatData;
+
+    if (!isValidGeneral(userToken, id)) return;
+
+    // validar el ID de la cadena asociada al producto en la OT
+    if (!isValidNaturalNumber(retailerId)) {
+      setDataError("La cadena relacionada al producto no es válida");
+      return;
+    }
+
+    // validar el ID de la version asociada al producto en la OT
+    if (!isValidNaturalNumber(version)) {
+      setDataError("La versión del producto no es válida");
+      return;
+    }
+
+    if (orderId && !isValidNaturalNumber(orderId)) {
+      setDataError("La orden del producto no es válida");
+      return;
+    }
+
+    setData({
+      userToken,
+      id,
+      version,
+      retailerId,
+      orderId,
+      status,
+    });
+  };
+
   const isValidGeneral = (userToken, id) => {
     // validar token del user
     if (isStringEmpty(userToken)) {
@@ -69,6 +111,8 @@ export const Chat = (props) => {
       retailerId, // number
     } = chatData;
 
+    console.log(chatData, "chatData");
+
     if (!isValidGeneral(userToken, id)) return;
 
     // validar el ID de la OT en donde se encuentra el producto
@@ -197,7 +241,7 @@ export const Chat = (props) => {
           dataChat={data}
           showBtnClose={false}
           ticketCompany={ticketCompany}
-          activeRetailer={props.activeRetailer}
+          activeRetailer={props.activeRetailer || { id: retailerId }}
         />
       </ContainerFixed>
     );
@@ -230,7 +274,7 @@ export const Chat = (props) => {
               onClickBtnClose={() => {
                 setShowPopUpChat(false);
               }}
-              activeRetailer={props.activeRetailer}
+              activeRetailer={props.activeRetailer || { id: retailerId }}
             />
           </ContainerPopUp>
         </Slide>

package/src/components/organisms/DashboardMetric/dashboardMetricUtils.js

@@ -35,6 +35,16 @@ export const getFullStatus = (status) => {
       return "Exportado";
     case "NS":
       return "No solicitado";
+    case "SAC":
+      return "Solicitud Auditoría Content-oh!";
+    case "AAC":
+      return "Aprobado Auditoría Content-oh!";
+    case "RAC":
+      return "Rechazado Auditoría Content-oh!";
+    case "FAP":
+      return "Finalización Auditoría por Proveedor";
+    default:
+      return "";
   }
 };
 
@@ -75,6 +85,14 @@ export const getStatusColor = (status) => {
       return "black";
     case "Ex":
       return "#09CAD8";
+    case "SAC":
+      return "#2471A3";
+    case "AAC":
+      return "#1ABC9C";
+    case "RAC":
+      return "#229954";
+    case "FAP":
+      return "#F1C40F";
     default:
       return "white";
   }
@@ -104,7 +122,6 @@ export const removeOldStatus = (object) => {
         object["AC"] = object["AC"] + object["AF"];
         delete object["AF"];
         break;
-
       default:
         break;
     }

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

@@ -23,7 +23,7 @@ export const FullProductNameHeader = ({
   useEffect(() => {
     const rtls = headerData?.retailers || headerData?.retailersAvailable;
     servicesData &&
-      rtls.forEach((rt) => {
+      rtls?.forEach((rt) => {
         const element = [];
         servicesData.forEach((sd) => {
           if (sd.id_retailer === rt.id) {

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

@@ -117,6 +117,7 @@ export const OrderDetail = (props) => {
                 <img src={downloadIcon} alt="Download detail order" />
               </IconButton>
             )}
+
             <Button
               type="image"
               onClick={() => {

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",
-    country: "México",
-    id_company: 817,
-    id_cognito: "5884ae34-59d6-4454-b98e-821518bcc3a7",
+    id_user: 51,
+    name: "ADMIN PRUEBA",
+    last_name: "",
+    email: "etc@contentoh.com",
+    position: "",
+    telephone: "",
+    country: "",
+    id_company: 2,
+    id_cognito: "a6c4d3d6-24a4-41d4-ad0f-d087438ab5b6",
     birth_Date: null,
     about_me: "",
     zip_code: "",
     address: "",
     job: "",
     id_stripe: "",
-    id_role: 0,
+    id_role: 1,
     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-51/51.png?1681499918721",
   },
   company: {
-    id_company: 817,
-    trade_name: "Retailer acc",
-    company_name: "Retailer acc",
-    rfc: "ASER12345",
-    adress: "Av. Insurgentes",
+    id_company: 2,
+    trade_name: "Content-oh!",
+    company_name: "Content-oh!",
+    rfc: null,
+    adress: null,
     about_company: null,
     telephone: null,
     web_site: null,
     zip_code: null,
     email: null,
     social_link: null,
-    is_retailer: 1,
-    financedRetailers: [
-      {
-        id: 68,
-        name: "The Home Depot Merchants",
-        country: "México",
-        id_region: 1,
-        active: 1,
-      },
-    ],
+    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.eyJzdWIiOiJhNmM0ZDNkNi0yNGE0LTQxZDQtYWQwZi1kMDg3NDM4YWI1YjYiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6ImE2YzRkM2Q2LTI0YTQtNDFkNC1hZDBmLWQwODc0MzhhYjViNiIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiIyNjJmNTBkNC0xZjMzLTQ3YTktOWY2MS1mMGY5NTcxNTcxNWUiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4MTQ5OTkxNywibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTY4MTUwMzUxNywiaWF0IjoxNjgxNDk5OTE3LCJlbWFpbCI6ImV0Y0Bjb250ZW50b2guY29tIn0.FKonzS94MWaxk2_Ip1p87zPjtguiHtkasBrLc6bPOGpeVSz4RYab0_Bwus_ANfiauJhQzhcY5vq2tmUmQtM8kEQ2oSIP3S58A9BTTkH0qkiXO8fkG_s9yricPePx1ut4gQ2wMCtDnrTF6k1NVn2VvWnEPr4dv4t0jYIjW2af48g2souwETOUiukAoRFq3BDuMgVg_pXW7lZfMR73Q6FS_l-RKVZp-f0_Jk3HBvLimmOUTxjbHcfp2Z7JIcxndZcnzQPAXdNjeP1DV9J4e4ePedX4163qTDOx264edNZbUFcLl4ErKPJE2RJIBPvoo9Ics2shBAdDFbY5wkkea0ODwQ",
 };