contentoh-components-library 21.2.50 → 21.2.52

package/src/components/molecules/CustomSelect/index.js

@@ -13,6 +13,7 @@ export const CustomSelect = ({
   customSelectId = "defaultSelectId",
   defaultOption,
   setParameterArray,
+  showFilterString,
 }) => {
   const [filters, setFilters] = useState(options || []);
   const [showList, setShowList] = useCloseModal(customSelectId);
@@ -21,6 +22,8 @@ export const CustomSelect = ({
   const [startDate, setStartDate] = useState(new Date());
   const [endDate, setEndDate] = useState(new Date());
   const [activeFilters, setActiveFilters] = useState({});
+  const [filtersString, setFiltersString] = useState(selectLabel);
+  const [filtersCounter, setFiltersCounter] = useState(0);
 
   const onChange = (evt) => {
     setText(evt.target.value);
@@ -63,10 +66,26 @@ export const CustomSelect = ({
     setFilters(filteredArray);
   }, [text]);
 
+  useEffect(() => {
+    let newFiltersString = selectLabel;
+    let counter = 0;
+    const filtersArray = Object.keys(activeFilters);
+    filtersArray.length &&
+      filtersArray.forEach((key, index) => {
+        if (index === 0) newFiltersString = key;
+        else {
+          counter++;
+        }
+      });
+    counter > 0 && setFiltersCounter(counter);
+    setFiltersString(newFiltersString);
+  }, [activeFilters]);
+
   return (
     <Container id={customSelectId}>
       <div className="button-list" onClick={() => setShowList(!showList)}>
-        <p>{selectLabel}</p>
+        <p>{filtersString}</p>
+        <p>{filtersCounter > 0 && `+${filtersCounter}`}</p>
         <div className="arrow-item">&#9664;</div>
       </div>
       {showList && (
@@ -89,6 +108,8 @@ export const CustomSelect = ({
                 setParameterArray([]);
                 setActiveFilters({});
                 setShowList(false);
+                setFiltersString(selectLabel);
+                setFiltersCounter(0);
               }}
             >
               <p>{defaultOption}</p>
@@ -104,6 +125,7 @@ export const CustomSelect = ({
                     option.function
                       ? option.function(setShowDatePicker)
                       : setShowDatePicker(true);
+                    setFiltersString(option.name);
                   }}
                 >
                   <p>{option.name}</p>

package/src/components/molecules/CustomSelect/styles.js

@@ -4,6 +4,7 @@ import { FontFamily } from "../../../global-files/variables";
 export const Container = styled.div`
   width: fit-content;
   position: relative;
+  min-width: 150px;
 
   .button-list {
     font-family: ${FontFamily.Raleway};
@@ -16,6 +17,13 @@ export const Container = styled.div`
     border: 1px solid #f0f0f0;
     cursor: pointer;
 
+    & > p {
+      max-width: 140px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
     .arrow-item {
       transform: rotate(-90deg);
       cursor: pointer;

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

@@ -24,7 +24,7 @@ export const getFullStatus = (status) => {
     case "RP":
       return "Rechazado Proveedor";
     case "AP":
-      return "Aprovado Proveedor";
+      return "Aprobado Proveedor";
     case "RCA":
       return "Rechazado Cadena";
     case "ACA":

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

@@ -5,6 +5,7 @@ import {
   removeOldStatus,
   getStatusColor,
 } from "./dashboardMetricUtils";
+import { FontFamily } from "../../../global-files/variables";
 
 export const DashboardMetric = ({
   label,
@@ -24,7 +25,7 @@ export const DashboardMetric = ({
       : Object.keys(dataObject);
   const newObject =
     type === "doughnut" ? removeOldStatus(dataObject) : dataObject;
-  const values = Object.values(newObject);
+  const values = Object.values(newObject) || [0];
   const colorsArray = Object.keys(newObject).map((key) => getStatusColor(key));
 
   const data = {
@@ -69,6 +70,13 @@ export const DashboardMetric = ({
           boxWidth: 8,
         },
       },
+      counter: {
+        fontFamily: "sans-serif",
+        fontSize: 25,
+        fontColor: "#707070",
+        textAlign: "center",
+        value: values?.reduce((a, b) => a + b) || 0,
+      },
     },
     scales: {
       [scale]: {
@@ -77,6 +85,7 @@ export const DashboardMetric = ({
         },
       },
     },
+    showTooltips: true,
   };
 
   return (
@@ -89,6 +98,11 @@ export const DashboardMetric = ({
       <div className="graphic-cotainer">
         <Graphic data={data} options={options} type={type} />
       </div>
+      {type === "line" && <p className="x-label">Fechas</p>}
+      {type === "line" && <p className="y-label">Productos</p>}
+      {/* {type === "doughnut" && values.length > 0 && (
+        <p className="center-label">{values?.reduce((a, b) => a + b) || 0}</p>
+      )} */}
     </Container>
   );
 };

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

@@ -5,6 +5,7 @@ export const Container = styled.div`
   border: 1px solid ${GlobalColors.s3};
   border-radius: 5px;
   padding: 24px;
+  position: relative;
 
   .text-container {
     p {
@@ -57,4 +58,34 @@ export const Container = styled.div`
       height: fill-available;
     }
   }
+
+  & > p {
+    font-family: ${FontFamily.Raleway};
+    color: ${GlobalColors.s5};
+    font-size: 17px;
+
+    &.x-label {
+      position: absolute;
+      left: 50%;
+      transform: translate(-50%);
+      bottom: 4px;
+    }
+
+    &.y-label {
+      position: absolute;
+      transform: rotate(-90deg);
+      left: -28px;
+      top: 50%;
+    }
+
+    &.center-label {
+      position: absolute;
+      top: 52%;
+      right: 58%;
+      font-size: 28px;
+      color: #000;
+      font-feature-settings: "pnum", "lnum";
+      font-family: ${FontFamily.Raleway_600};
+    }
+  }
 `;

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

@@ -9,37 +9,51 @@ const Template = (args) => <Dashboard {...args} />;
 export const DashboardDeafult = Template.bind({});
 DashboardDeafult.args = {
   user: {
-    id_user: 59,
-    name: "The Home",
-    last_name: "Depot",
-    email: "cadena.ismael@allfreemail.net",
+    id_user: 30,
+    name: "Admin",
+    last_name: "Ulises",
+    email: "salmeron.5@hotmail.com",
     position: "Admin",
-    telephone: "+523111366336",
+    telephone: "",
     country: "México",
-    id_company: 7,
-    id_cognito: "5884ae34-59d6-4454-b98e-821518bcc3a7",
+    id_company: 2,
+    id_cognito: "c94a7305-9365-46ff-a423-4b4bc3b8b180",
     birth_Date: null,
-    about_me: null,
-    zip_code: null,
-    address: null,
-    job: null,
+    about_me: "",
+    zip_code: "",
+    address: "",
+    job: "",
     id_stripe: "",
-    id_role: 0,
+    id_role: 6,
     active: 1,
-    is_retailer: 1,
+    is_retailer: 0,
     email_notify: 1,
     membership: {
-      id: 24,
-      start_date: "2021-11-23T03:35:50.000Z",
-      end_date: "2022-11-23T03:35:50.000Z",
-      planID: 9,
-      plan: "prod_KtlkzZVGq6bRTO",
-      name: "Plan Enterprise Full",
-      user_limit: "30",
-      products_limit: "10000",
-      type: "Enterprise",
+      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?1663928202230",
+    src: "https://content-management-profile.s3.amazonaws.com/id-30/30.png?1664606284528",
+  },
+  company: {
+    id_company: 2,
+    trade_name: "VINÍCOLA PASO DE SERRA",
+    company_name: "VINÍCOLA PASO DE SERRA",
+    rfc: null,
+    adress: null,
+    about_company: null,
+    telephone: null,
+    web_site: null,
+    zip_code: null,
+    email: null,
+    social_link: null,
+    is_retailer: 0,
   },
-  jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI1ODg0YWUzNC01OWQ2LTQ0NTQtYjk4ZS04MjE1MThiY2MzYTciLCJjb2duaXRvOmdyb3VwcyI6WyJ1c3VhcmlvX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjpmYWxzZSwiY29nbml0bzp1c2VybmFtZSI6IjU4ODRhZTM0LTU5ZDYtNDQ1NC1iOThlLTgyMTUxOGJjYzNhNyIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJmY2IzMGVjYi1lMjc1LTQyM2UtYjQwMi05YTBjMWNjNzM2YzMiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY2MzkyODIwMCwibmFtZSI6IkNhZGVuYSBJc21hZWwiLCJwaG9uZV9udW1iZXIiOiIrNTIzMTExMzY2MzM2IiwiZXhwIjoxNjYzOTMxODAwLCJpYXQiOjE2NjM5MjgyMDAsImVtYWlsIjoiY2FkZW5hLmlzbWFlbEBhbGxmcmVlbWFpbC5uZXQifQ.E5NPYa6ucsQGTij8gzihdT2zv7gmJwxCZwrbBnQSYXIBw7cMK7U0eC7z4VBEm3tFYCA9SoxIdQtfuGj_lw2-CaXqkkMu4929TtlrrK_nVHYlwsXMSGIW3bComTb2toX8bshD1kd3FnNBFujhrQ-ouuBfQjy2d4fVZA1M4sZi_eT8Lxjo1uI_LfgYxrlS8_IKgfz71NuM-Uc2vxidm2_AG0g7PboSPW24bv1R-Lv272hoR_SmjBPY-I2Pw8DTZwQxWmtoU_MOx1YnY97qx5G6zqbTsjbNYkk97xPb87tKQTo946pB80fOkipTrD2xwhc8AOZQywwKa5NT4nGayDKLdg",
+  jwt: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiJjOTRhNzMwNS05MzY1LTQ2ZmYtYTQyMy00YjRiYzNiOGIxODAiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwicGhvbmVfbnVtYmVyX3ZlcmlmaWVkIjp0cnVlLCJjb2duaXRvOnVzZXJuYW1lIjoiYzk0YTczMDUtOTM2NS00NmZmLWE0MjMtNGI0YmMzYjhiMTgwIiwiY29nbml0bzpyb2xlcyI6WyJhcm46YXdzOmlhbTo6ODk4NjcwMjMyODA3OnJvbGVcL2NvbnRlbnRvaC1kZXYtdXMtZWFzdC0xLWxhbWJkYVJvbGUiXSwiYXVkIjoiNWFjOHRwZ3M2Z2JzcTEzZnJ2cnBpZWVwNDAiLCJldmVudF9pZCI6Ijg3YjQwMTMzLTE0YTMtNDgyOC1iYzE0LWU3ZTgxM2I2YmFmMSIsInRva2VuX3VzZSI6ImlkIiwiYXV0aF90aW1lIjoxNjY0NjA2Mjg0LCJuYW1lIjoiQ29sYWJvcmFkb3IiLCJwaG9uZV9udW1iZXIiOiIrNTIxMTExIiwiZXhwIjoxNjY0NjA5ODg0LCJpYXQiOjE2NjQ2MDYyODQsImVtYWlsIjoic2FsbWVyb24uNUBob3RtYWlsLmNvbSJ9.J0L3zmJ2cZdPx4LjjscrZlPG41yCp1tOxE6WLl8K2lT_6fa-fNAQQLekKRmA9RwW--yA6z97xLu1oCjd_ZrErdc_aLMxxA2wCffh068QOD6Vil5aOCNA12QuTz7WhZlz3oOHe7hgx4PIi65u8--mstLqtmTH2_5OfoaTfcYllk1M65w-AfayozTlFaaXQID05nrwuGCc2gBl3SorBhbVvatRzCeZZjWOHRqOrxaJYY0Q97zNS6E0Nd4nPioIibUjGsKh_Hl-RUivSkDcKtszS8OYl4Alia00Ownz74rx7svZy9gpMy8t9TOonSlTTnHqOR5gPyBYO__OZMa55RiGtQ",
 };

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

@@ -1,18 +1,22 @@
 import axios from "axios";
 
-export const getProviders = async (jwt, companyId) => {
+export const getProviders = async (jwt, user, companyId) => {
   const query = companyId ? `?companyId=${companyId}` : "";
   const companies = await axios.get(
-    `${process.env.REACT_APP_READ_PROVIDERS}${query}`,
+    `${
+      user.is_retailer
+        ? process.env.REACT_APP_PENDING_INVITATIONS
+        : process.env.REACT_APP_READ_PROVIDERS
+    }${query}`,
     {
       headers: {
         Authorization: jwt,
       },
     }
   );
-  const finalArray = transformProvidersArray(
-    JSON.parse(companies.data.body || "{}")?.providers || []
-  );
+  const { usersFinanced } = JSON.parse(companies.data.body || "{}")?.data || {};
+  const { providers } = JSON.parse(companies.data.body || "{}");
+  const finalArray = transformProvidersArray(providers || usersFinanced || []);
   return finalArray;
 };
 
@@ -24,9 +28,15 @@ const transformProvidersArray = (array) => {
   return newArray;
 };
 
-export const getCategories = async () => {
+export const getCategories = async (user, company) => {
+  const isTHDUser = user.is_retailer === 1;
+  const key = company.financedRetailers ? "financedRetailers" : "retailers";
+  const query =
+    isTHDUser || key === "financedRetailers"
+      ? `?id=${encodeURIComponent(company[key].map((ret) => ret.id).join(","))}`
+      : "";
   const response = await axios.get(
-    `${process.env.REACT_APP_CATEGORY_ENDPOINT}`
+    `${process.env.REACT_APP_CATEGORY_ENDPOINT}${query}`
   );
   const categories = JSON.parse(response.data.body)?.data;
   const categoriesKeys = Object.keys(categories || {});
@@ -49,7 +59,7 @@ export const getCategories = async () => {
         finalArray.push({ id: index++, name: key, subOptions });
       });
   });
-
+  finalArray.sort((a, b) => a.name.localeCompare(b.name));
   return finalArray;
 };
 

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

@@ -7,7 +7,7 @@ import { CustomSelect } from "../../molecules/CustomSelect";
 import { getProviders, getCategories, formatDate } from "./dashboardUtils";
 import axios from "axios";
 
-export const Dashboard = ({ jwt, user }) => {
+export const Dashboard = ({ jwt, user, company }) => {
   const [metricsData, setMetricsData] = useState([]);
   const [productsByStatus, setProductsByStatus] = useState({});
   const [requiredProducts, setRequiredProducts] = useState([]);
@@ -33,6 +33,11 @@ export const Dashboard = ({ jwt, user }) => {
     endDate: new Date(),
   });
   const [dateOptions, setDateOptions] = useState([]);
+  const applicants = [
+    { id: "provider", name: "Proveedor" },
+    { id: "retailer", name: "Cadena" },
+  ];
+  const [applicantsFilter, setApplicantsFilter] = useState([]);
 
   const loadProductVersions = async (queryObject, byStatus = false) => {
     const keys = Object.keys(queryObject);
@@ -75,6 +80,10 @@ export const Dashboard = ({ jwt, user }) => {
 
   const loadProductsByStatus = async (orderByStatus) => {
     const { orders } = (await loadProductVersions(orderByStatus, true)) || {};
+    if (orders.null) {
+      orders.total -= orders.null;
+      delete orders.null;
+    }
     const { total = 0, R = 0, ACA = 0, PA = 0 } = orders;
     const inProcess = Object.keys(orders).reduce(
       (prev, curr) =>
@@ -181,8 +190,8 @@ export const Dashboard = ({ jwt, user }) => {
   };
 
   useEffect(async () => {
-    setProviders(await getProviders(jwt));
-    setCategories(await getCategories());
+    setProviders(await getProviders(jwt, user));
+    setCategories(await getCategories(user, company));
     await getRetailers();
     datesSelect();
     const today = new Date();
@@ -214,9 +223,12 @@ export const Dashboard = ({ jwt, user }) => {
     companyId.length > 0 && (queryObject["companyId"] = companyId.join(","));
     retailerId.length > 0 && (queryObject["retailerId"] = retailerId.join(","));
     categoryId.length > 0 && (queryObject["categoryId"] = categoryId.join(","));
+    applicantsFilter.length > 0 &&
+      (queryObject["requestedBy"] = applicantsFilter.join(","));
+
     await loadProductsByStatus(queryObject);
     await loadRequiredProducts(queryObject);
-  }, [companyId, retailerId, categoryId, datesRange]);
+  }, [companyId, retailerId, categoryId, datesRange, applicantsFilter]);
 
   return loading ? (
     <Loading />
@@ -224,17 +236,19 @@ export const Dashboard = ({ jwt, user }) => {
     <Container>
       <div className="filters">
         <CustomSelect
+          showFilterString={true}
           options={dateOptions}
-          selectLabel="Seleccionar Fecha"
+          selectLabel="Todo el tiempo"
           placeHolder="Buscar Fecha"
           customSelectId="dates-select"
           parameterArray={datesRange}
           setParameterArray={setDatesRange}
         />
         <CustomSelect
+          showFilterString={true}
           showSearchBar={true}
           options={providers}
-          selectLabel="Seleccionar Proveedor"
+          selectLabel="Todos los proveedores"
           placeHolder="Buscar Proveedor"
           customSelectId="providers-select"
           parameterArray={companyId}
@@ -242,9 +256,10 @@ export const Dashboard = ({ jwt, user }) => {
           defaultOption={"Todos los proveedores"}
         />
         <CustomSelect
+          showFilterString={true}
           showSearchBar={true}
           options={categories}
-          selectLabel="Seleccionar Departamento"
+          selectLabel="Todas las categorías"
           placeHolder="Buscar Departamento"
           customSelectId="category-select"
           parameterArray={categoryId}
@@ -252,15 +267,27 @@ export const Dashboard = ({ jwt, user }) => {
           defaultOption={"Todas las categorías"}
         />
         <CustomSelect
+          showFilterString={true}
           showSearchBar={true}
           options={retailers}
-          selectLabel="Seleccionar Alcance"
+          selectLabel="Todos los alcances"
           placeHolder="Buscar Cadena"
           customSelectId="retailers-select"
           parameterArray={retailerId}
           setParameterArray={setRetailerId}
           defaultOption={"Todos los alcances"}
         />
+        {user.is_retailer === 1 && (
+          <CustomSelect
+            showFilterString={true}
+            options={applicants}
+            selectLabel="Todos los solicitantes"
+            customSelectId="applicants-select"
+            parameterArray={applicantsFilter}
+            setParameterArray={setApplicantsFilter}
+            defaultOption={"Todos los solicitantes"}
+          />
+        )}
       </div>
       <div className="metric-cards">
         {metricsData.map((metric, index) => (
@@ -287,6 +314,7 @@ export const Dashboard = ({ jwt, user }) => {
           type="doughnut"
           displayLegend={true}
           showPercent={true}
+          displayScale={false}
         />
         <DashboardMetric
           label={"Productos solicitados"}
@@ -296,7 +324,6 @@ export const Dashboard = ({ jwt, user }) => {
           dataObject={requiredProducts}
           type="line"
           indexAxis="x"
-          scale="x"
           displayScale={true}
           retailerSelected={orderByRequired.retailerId}
           queryObject={orderByRequired}

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;