contentoh-components-library 21.2.25 → 21.2.28

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

@@ -3,9 +3,11 @@ import { MetricCard } from "../../atoms/MetricCard";
 import { DashboardMetric } from "../../organisms/DashboardMetric";
 import { useEffect, useState } from "react";
 import { Loading } from "../../atoms/Loading";
+import { CustomSelect } from "../../molecules/CustomSelect";
+import { getProviders, getCategories, formatDate } from "./dashboardUtils";
 import axios from "axios";
 
-export const Dashboard = () => {
+export const Dashboard = ({ jwt, user }) => {
   const [metricsData, setMetricsData] = useState([]);
   const [productsByStatus, setProductsByStatus] = useState({});
   const [requiredProducts, setRequiredProducts] = useState([]);
@@ -19,15 +21,33 @@ export const Dashboard = () => {
     startDate: null,
     endDate: null,
   });
-  const [retailers, setRetailers] = useState({});
+  const [retailers, setRetailers] = useState([]);
   const [loading, setLoading] = useState(true);
+  const [providers, setProviders] = useState([]);
+  const [categories, setCategories] = useState([]);
+  const [retailerId, setRetailerId] = useState([]);
+  const [categoryId, setCategoryId] = useState([]);
+  const [companyId, setCompanyId] = useState([]);
+  const [datesRange, setDatesRange] = useState({
+    startDate: new Date("1900-01-01"),
+    endDate: new Date(),
+  });
+  const [dateOptions, setDateOptions] = useState([]);
 
   const loadProductVersions = async (queryObject, byStatus = false) => {
-    const { retailerId, startDate, endDate} = queryObject;
-    const query = `retailerId=${retailerId}&startDate=${startDate}&endDate=${endDate}`;
-    const endpoint = byStatus ? process.env.REACT_APP_READ_ORDERS_BY_STATUS : process.env.REACT_APP_READ_REQUIRED_ORDERS
+    const keys = Object.keys(queryObject);
+    let string = [];
+    keys.forEach((key) => string.push(`${key}=${queryObject[key]}`));
+    const query = string.join("&");
+    const endpoint = byStatus
+      ? process.env.REACT_APP_READ_ORDERS_BY_STATUS
+      : process.env.REACT_APP_READ_REQUIRED_ORDERS;
     try {
-      const response = await axios.get(`${endpoint}?${query}`);
+      const response = await axios.get(`${endpoint}?${query}`, {
+        headers: {
+          Authorization: jwt,
+        },
+      });
       return JSON.parse(response.data.body);
     } catch (error) {
       console.log(error);
@@ -35,33 +55,41 @@ export const Dashboard = () => {
   };
 
   const getRetailers = async () => {
+    const isTHDUser = [657, 818, 819].includes(user.id_company);
     const retailersResponse = await axios.get(
       `${process.env.REACT_APP_RETAILER_ENDPOINT}`,
       {
         headers: {
-          Authorization: sessionStorage.getItem("jwt"),
+          Authorization: jwt,
         },
       }
     );
     const parsed = JSON.parse(retailersResponse.data.body).data;
-    const retailers = Object.keys(parsed).map((key) => {
-      if (key.includes('The Home Depot')) return parsed[key];
-    }).filter((f) => f);
+    const retailers = isTHDUser
+      ? Object.values(parsed).filter((value) =>
+          [58, 59, 60, 61].includes(value.id)
+        )
+      : Object.values(parsed);
     setRetailers(retailers);
   };
 
   const loadProductsByStatus = async (orderByStatus) => {
-    const { orders, fullData } = await loadProductVersions(orderByStatus, true);
-    const { total, R, ACA, PA } = fullData;
-    const inProcess = Object.keys(fullData).reduce((prev, curr) =>
-      !['total', 'ACA', 'PA', 'R'].includes(curr) ? prev + fullData[curr] : prev
-    , 0);
+    const { orders } = (await loadProductVersions(orderByStatus, true)) || {};
+    const { total = 0, R = 0, ACA = 0, PA = 0 } = orders;
+    const inProcess = Object.keys(orders).reduce(
+      (prev, curr) =>
+        !["total", "ACA", "PA", "R"].includes(curr)
+          ? prev + orders[curr]
+          : prev,
+      0
+    );
     setMetricsData([
       { label: "Productos totales", value: total },
       { label: "Productos sin asignar", value: PA + R },
       { label: "Productos en proceso", value: inProcess },
       { label: "Productos terminados", value: ACA },
     ]);
+    delete orders.total;
     setProductsByStatus(orders);
   };
 
@@ -70,34 +98,170 @@ export const Dashboard = () => {
     setRequiredProducts(dates);
   };
 
-  useEffect(() => {
+  const datesSelect = () => {
     const today = new Date();
-    const firstWeekDay = today.getDate() - today.getDay();
-    const startDate = `${today.getFullYear()}-${
-      today.getMonth() + 1
-    }-${firstWeekDay}`;
+    setDateOptions([
+      { id: 0, name: "Rango de fechas" },
+      {
+        id: 1,
+        name: "Todo el tiempo",
+        function: () =>
+          setDatesRange({
+            startDate: new Date("1900-01-01"),
+            endDate: new Date(),
+          }),
+      },
+      {
+        id: 2,
+        name: "Hoy",
+        function: () =>
+          setDatesRange({
+            startDate: new Date(),
+            endDate: new Date(),
+          }),
+      },
+      {
+        id: 3,
+        name: "Ayer",
+        function: () =>
+          setDatesRange({
+            startDate: new Date(today.setDate(today.getDate() - 1)),
+            endDate: new Date(),
+          }),
+      },
+      {
+        id: 4,
+        name: "Esta semana",
+        function: () =>
+          setDatesRange({
+            startDate: new Date(
+              today.setDate(today.getDate() - today.getDay())
+            ),
+            endDate: new Date(),
+          }),
+      },
+      {
+        id: 5,
+        name: "La semana pasada",
+        function: () =>
+          setDatesRange({
+            startDate: new Date(
+              today.setDate(today.getDate() - today.getDay() - 7)
+            ),
+            endDate: new Date(
+              today.setDate(today.getDate() - today.getDay() + 7)
+            ),
+          }),
+      },
+      {
+        id: 6,
+        name: "Este mes",
+        function: () =>
+          setDatesRange({
+            startDate: new Date(
+              `${today.getFullYear()}-${today.getMonth() + 1}-01`
+            ),
+            endDate: today,
+          }),
+      },
+      {
+        id: 7,
+        name: "Este mes",
+        function: () =>
+          setDatesRange({
+            startDate: new Date(
+              `${today.getFullYear()}-${today.getMonth()}-01`
+            ),
+            endDate: new Date(
+              `${today.getFullYear()}-${today.getMonth() + 1}-01`
+            ),
+          }),
+      },
+    ]);
+  };
+
+  useEffect(async () => {
+    setProviders(await getProviders(jwt));
+    setCategories(await getCategories());
+    await getRetailers();
+    datesSelect();
+    const today = new Date();
+    const startDate = `1900-01-01`;
     const endDate = `${today.getFullYear()}-${
       today.getMonth() + 1
     }-${today.getDate()}`;
-    const queryObject = { retailerId: "58", startDate, endDate };
+    const queryObject = { startDate, endDate };
+    setDatesRange({ startDate, endDate });
     setOrderByStatus(queryObject);
     setOrderByRequired(queryObject);
-    getRetailers();
     loadProductsByStatus(queryObject);
     loadRequiredProducts(queryObject);
   }, []);
 
   useEffect(() => {
-    orderByRequired?.retailerId &&
-      orderByStatus?.retailerId &&
+    orderByRequired?.startDate &&
+      orderByStatus?.endDate &&
       metricsData.length > 0 &&
       setLoading(false);
   }, [orderByRequired, orderByStatus, metricsData]);
 
+  useEffect(async () => {
+    const { startDate, endDate } = datesRange;
+    const queryObject = {
+      startDate: formatDate(startDate),
+      endDate: formatDate(endDate),
+    };
+    companyId.length > 0 && (queryObject["companyId"] = companyId.join(","));
+    retailerId.length > 0 && (queryObject["retailerId"] = retailerId.join(","));
+    categoryId.length > 0 && (queryObject["categoryId"] = categoryId.join(","));
+    await loadProductsByStatus(queryObject);
+    await loadRequiredProducts(queryObject);
+  }, [companyId, retailerId, categoryId, datesRange]);
+
   return loading ? (
     <Loading />
   ) : (
     <Container>
+      <div className="filters">
+        <CustomSelect
+          options={dateOptions}
+          selectLabel="Seleccionar Fecha"
+          placeHolder="Buscar Fecha"
+          customSelectId="dates-select"
+          parameterArray={datesRange}
+          setParameterArray={setDatesRange}
+        />
+        <CustomSelect
+          showSearchBar={true}
+          options={providers}
+          selectLabel="Seleccionar Proveedor"
+          placeHolder="Buscar Proveedor"
+          customSelectId="providers-select"
+          parameterArray={companyId}
+          setParameterArray={setCompanyId}
+          defaultOption={"Todos los proveedores"}
+        />
+        <CustomSelect
+          showSearchBar={true}
+          options={categories}
+          selectLabel="Seleccionar Departamento"
+          placeHolder="Buscar Departamento"
+          customSelectId="category-select"
+          parameterArray={categoryId}
+          setParameterArray={setCategoryId}
+          defaultOption={"Todas las categorías"}
+        />
+        <CustomSelect
+          showSearchBar={true}
+          options={retailers}
+          selectLabel="Seleccionar Alcance"
+          placeHolder="Buscar Cadena"
+          customSelectId="retailers-select"
+          parameterArray={retailerId}
+          setParameterArray={setRetailerId}
+          defaultOption={"Todos los alcances"}
+        />
+      </div>
       <div className="metric-cards">
         {metricsData.map((metric, index) => (
           <MetricCard
@@ -115,12 +279,13 @@ export const Dashboard = () => {
           }
           dataObject={productsByStatus}
           retailerSelected={orderByStatus.retailerId}
-          retailers={retailers}
           queryObject={orderByStatus}
           setQueryObject={(evt) => {
             loadProductsByStatus(evt);
             setOrderByStatus(evt);
           }}
+          type="doughnut"
+          displayLegend={true}
         />
         <DashboardMetric
           label={"Productos solicitados"}
@@ -132,7 +297,6 @@ export const Dashboard = () => {
           indexAxis="x"
           scale="x"
           displayScale={true}
-          retailers={retailers}
           retailerSelected={orderByRequired.retailerId}
           queryObject={orderByRequired}
           setQueryObject={(evt) => {

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

@@ -2,6 +2,19 @@ import styled from "styled-components";
 
 export const Container = styled.div`
   padding: 30px;
+
+  .filters {
+    display: flex;
+    & > * {
+      & + * {
+        margin-left: 10px;
+      }
+    }
+    & + * {
+      margin-top: 20px;
+    }
+  }
+
   .metric-cards {
     display: flex;
 

package/src/global-files/customHooks.js

@@ -6,7 +6,6 @@ export const useCloseModal = (id) => {
 
   const closeModal = (e) => {
     e.stopPropagation();
-    e.preventDefault();
     if (!e.target.closest(`#${id}`) && showModal) {
       document.removeEventListener("click", closeModal, false);
       setShowModal(false);

package/dist/components/atoms/ListCommercialRetailers/ListCommercialRetailers.stories.js

@@ -1,36 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ListCommercialRetailersDefault = void 0;
-
-var _index = require("./index");
-
-var _default = {
-  title: "Components/atoms/ListCommercialRetailers",
-  component: _index.ListCommercialRetailers
-};
-exports.default = _default;
-
-var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.ListCommercialRetailers, args);
-};
-
-var ListCommercialRetailersDefault = Template.bind({});
-exports.ListCommercialRetailersDefault = ListCommercialRetailersDefault;
-ListCommercialRetailersDefault.args = {
-  retailersAvailable: [{
-    id: 54,
-    name: "Construrama",
-    country: "México",
-    id_region: 1,
-    active: 1
-  }, {
-    id: 4,
-    name: "Walmart Super y Superama"
-  }, {
-    id: 6,
-    name: "HEB"
-  }]
-};

package/dist/components/atoms/ListCommercialRetailers/index.js

@@ -1,64 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ListCommercialRetailers = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-
-var _styles = require("./styles");
-
-var _listCommercialRetailers = _interopRequireDefault(require("../../../assets/images/listCommercialRetailers/listCommercialRetailers.svg"));
-
-var _react = require("react");
-
-var _index = require("../CheckBox/index");
-
-var ListCommercialRetailers = function ListCommercialRetailers(_ref) {
-  var retailersAvailable = _ref.retailersAvailable;
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      showMenu = _useState2[0],
-      setShowMenu = _useState2[1];
-
-  var closeMenu = function closeMenu(e) {
-    if (!e.target.closest(".menu-list-commercial-retailers") && showMenu) {
-      document.removeEventListener("click", closeMenu, false);
-      setShowMenu(false);
-    }
-  };
-
-  (0, _react.useEffect)(function () {
-    if (showMenu) {
-      document.addEventListener("click", closeMenu, false);
-    }
-  }, [showMenu]);
-  return /*#__PURE__*/React.createElement(_styles.Container, {
-    onClick: function onClick(event) {
-      if (!showMenu) {
-        setShowMenu(true);
-      } else if (showMenu && !event.target.closest(".menu-list-commercial-retailers")) {
-        setShowMenu(false);
-        document.removeEventListener("click", closeMenu, false);
-      }
-    },
-    className: "list-commercial-retailers"
-  }, /*#__PURE__*/React.createElement("img", {
-    src: _listCommercialRetailers.default,
-    alt: "button up icon"
-  }), showMenu && /*#__PURE__*/React.createElement("div", {
-    className: "menu-list-commercial-retailers"
-  }, retailersAvailable === null || retailersAvailable === void 0 ? void 0 : retailersAvailable.map(function (component, index) {
-    return /*#__PURE__*/React.createElement(_index.CheckBox, {
-      id: component.id,
-      label: component.name,
-      key: index + "-" + component.id
-    });
-  })));
-};
-
-exports.ListCommercialRetailers = ListCommercialRetailers;

package/dist/components/atoms/ListCommercialRetailers/styles.js

@@ -1,20 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Container = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _variables = require("../../../global-files/variables");
-
-var _templateObject;
-
-var Container = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: transparent;\n  border: 1px solid ", ";\n  border-radius: 2px;\n  padding: 3px;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  position: relative;\n  height: 30px;\n  .menu-list-commercial-retailers {\n    width: 540px;\n    height: auto;\n    border-radius: 7px;\n    background-color: ", ";\n    padding: 14px 14px 8px 20px;\n    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);\n    position: absolute;\n    top: calc(100% + 3px);\n    right: calc(100% - 20px);\n    display: flex;\n    flex-wrap: wrap;\n    z-index: 1;\n    div {\n      & + * {\n        margin-left: 15px;\n      }\n      p {\n        font-size: 11px;\n      }\n    }\n  }\n"])), _variables.GlobalColors.magenta_s2, _variables.GlobalColors.s2);
-
-exports.Container = Container;

package/dist/components/atoms/MenuCommercialRetailers/MenuCommercialRetailers.stories.js

@@ -1,37 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.MenuCommercialRetailersDefault = void 0;
-
-var _index = require("./index");
-
-var _default = {
-  title: "Components/atoms/MenuCommercialRetailers",
-  component: _index.MenuCommercialRetailers
-};
-exports.default = _default;
-
-var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.MenuCommercialRetailers, args);
-};
-
-var MenuCommercialRetailersDefault = Template.bind({});
-exports.MenuCommercialRetailersDefault = MenuCommercialRetailersDefault;
-MenuCommercialRetailersDefault.args = {
-  editType: "3",
-  retailersAvailable: [{
-    id: 54,
-    name: "Construrama",
-    country: "México",
-    id_region: 1,
-    active: 1
-  }, {
-    id: 4,
-    name: "Walmart Super y Superama"
-  }, {
-    id: 6,
-    name: "HEB"
-  }]
-};

package/dist/components/atoms/MenuCommercialRetailers/index.js

@@ -1,25 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MenuCommercialRetailers = void 0;
-
-var _styles = require("./styles");
-
-var _StatusTag = require("../StatusTag");
-
-var _ListCommercialRetailers = require("../ListCommercialRetailers");
-
-var MenuCommercialRetailers = function MenuCommercialRetailers(_ref) {
-  var editType = _ref.editType,
-      retailersAvailable = _ref.retailersAvailable;
-  return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement(_StatusTag.StatusTag, {
-    editType: editType,
-    ovalForm: true
-  }), /*#__PURE__*/React.createElement(_ListCommercialRetailers.ListCommercialRetailers, {
-    retailersAvailable: retailersAvailable
-  }));
-};
-
-exports.MenuCommercialRetailers = MenuCommercialRetailers;

package/dist/components/atoms/MenuCommercialRetailers/styles.js

@@ -1,20 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Container = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _variables = require("../../../global-files/variables");
-
-var _templateObject;
-
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  .status-version {\n    & + * {\n      margin-left: 5px;\n    }\n  }\n  .list-commercial-retailers {\n    border: 1px solid transparent;\n    img {\n      display: none;\n    }\n    &:hover {\n      border: 1px solid ", ";\n      img {\n        display: block;\n      }\n    }\n  }\n"])), _variables.GlobalColors.magenta_s2);
-
-exports.Container = Container;

package/dist/components/atoms/MenuProductImage/MenuProductImage.stories.js

@@ -1,28 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.MenuProductImageDefault = void 0;
-
-var _index = require("./index");
-
-var _menuProductImage = _interopRequireDefault(require("../../../assets/images/menuProductImage/menuProductImage.svg"));
-
-var _default = {
-  title: "Components/atoms/MenuProductImage",
-  component: _index.MenuProductImage
-};
-exports.default = _default;
-
-var Template = function Template(args) {
-  return /*#__PURE__*/React.createElement(_index.MenuProductImage, args);
-};
-
-var MenuProductImageDefault = Template.bind({});
-exports.MenuProductImageDefault = MenuProductImageDefault;
-MenuProductImageDefault.args = {
-  ProductImg: _menuProductImage.default
-};

package/dist/components/atoms/MenuProductImage/index.js

@@ -1,88 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MenuProductImage = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-
-var _styles = require("./styles");
-
-var _menuProductImageButton = _interopRequireDefault(require("../../../assets/images/menuProductImage/menuProductImageButton.svg"));
-
-var _react = require("react");
-
-var _index = require("../LoadImageMenu/index");
-
-var _listCommercialRetailers = _interopRequireDefault(require("../../../assets/images/listCommercialRetailers/listCommercialRetailers.svg"));
-
-var MenuProductImage = function MenuProductImage(_ref) {
-  var ProductImg = _ref.ProductImg;
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      showMenu = _useState2[0],
-      setShowMenu = _useState2[1];
-
-  var closeMenu = function closeMenu(e) {
-    if (!e.target.closest(".menu-upload-product") && showMenu) {
-      document.removeEventListener("click", closeMenu, false);
-      setShowMenu(false);
-    }
-  };
-
-  (0, _react.useEffect)(function () {
-    if (showMenu) {
-      document.addEventListener("click", closeMenu, false);
-    }
-  }, [showMenu]);
-  return /*#__PURE__*/React.createElement(_styles.Container, {
-    className: "div-upload-image"
-  }, /*#__PURE__*/React.createElement("img", {
-    className: "profile-image",
-    src: ProductImg,
-    alt: "Product Image"
-  }), /*#__PURE__*/React.createElement("button", {
-    onClick: function onClick(event) {
-      if (!showMenu) {
-        setShowMenu(true);
-      } else if (showMenu && !event.target.closest(".menu-upload-product")) {
-        setShowMenu(false);
-        document.removeEventListener("click", closeMenu, false);
-      }
-    },
-    className: "upload-image-button " + (showMenu && "show-menu-upload-image")
-  }, /*#__PURE__*/React.createElement("img", {
-    src: showMenu ? _listCommercialRetailers.default : _menuProductImageButton.default,
-    alt: "Product Image Button"
-  })), showMenu && /*#__PURE__*/React.createElement("div", {
-    className: "menu-upload-product"
-  }, /*#__PURE__*/React.createElement(_index.LoadImageMenu, {
-    tipo: "Tipo de empaque ",
-    product: "Producto expuesto",
-    content: [{
-      label: "Enbalaje adicional - 0"
-    }, {
-      label: "En paquete - 1"
-    }, {
-      label: "Producto expuesto - 2"
-    }, {
-      label: "Embalaje multiforme - 3"
-    }, {
-      label: "Si no es una imagen / no corresponde - X"
-    }],
-    id: "menu-packaging-type"
-  }), /*#__PURE__*/React.createElement(_index.LoadImageMenu, {
-    tipo: "Tipo de imagen ",
-    product: "Render",
-    content: [{
-      label: "fotografía del producto"
-    }],
-    id: "menu-image-type"
-  })));
-};
-
-exports.MenuProductImage = MenuProductImage;

package/dist/components/atoms/MenuProductImage/styles.js

@@ -1,20 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Container = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _variables = require("../../../global-files/variables");
-
-var _templateObject;
-
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  position: relative;\n  .profile-image {\n    width: 23px;\n    height: 23px;\n    & + * {\n      margin-left: 8px;\n    }\n  }\n  .upload-image-button {\n    background: transparent;\n    border: 1px solid transparent;\n    border-radius: 2px;\n    padding: 3px;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    height: 30px;\n    width: 15px;\n    left: 100%;\n    img {\n      display: none;\n    }\n    &:hover {\n      border: 1px solid ", ";\n      img {\n        display: block;\n      }\n    }\n    &.show-menu-upload-image {\n      border: 1px solid ", ";\n      img {\n        display: block;\n      }\n    }\n  }\n  .menu-upload-product {\n    background: ", ";\n    border: 1px solid ", ";\n    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);\n    border-radius: 7px;\n    width: 324px;\n    padding: 8px 0px;\n    position: absolute;\n    right: 0%;\n    z-index: 1;\n    top: 30px;\n    button {\n      left: 0%;\n      border-radius: 7px;\n      span,\n      .tipo {\n        color: ", ";\n      }\n      .products {\n        color: ", ";\n      }\n    }\n  }\n"])), _variables.GlobalColors.s3, _variables.GlobalColors.magenta_s2, _variables.GlobalColors.s2, _variables.GlobalColors.s3, _variables.GlobalColors.s5, _variables.GlobalColors.s4);
-
-exports.Container = Container;