contentoh-components-library 21.2.51 → 21.2.53

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/.env.development +1 -0
  2. package/.env.production +2 -1
  3. package/dist/components/atoms/Graphic/index.js +30 -1
  4. package/dist/components/molecules/CustomSelect/CustomSelect.stories.js +22 -21
  5. package/dist/components/molecules/CustomSelect/SelectItem.js +1 -10
  6. package/dist/components/molecules/CustomSelect/index.js +37 -36
  7. package/dist/components/molecules/CustomSelect/styles.js +1 -3
  8. package/dist/components/organisms/DashboardMetric/dashboardMetricUtils.js +1 -1
  9. package/dist/components/organisms/DashboardMetric/index.js +20 -2
  10. package/dist/components/organisms/DashboardMetric/styles.js +1 -1
  11. package/dist/components/pages/Dashboard/Dashboard.stories.js +39 -25
  12. package/dist/components/pages/Dashboard/dashboardUtils.js +29 -16
  13. package/dist/components/pages/Dashboard/index.js +49 -16
  14. package/package.json +1 -1
  15. package/src/components/atoms/Graphic/index.js +30 -1
  16. package/src/components/molecules/CustomSelect/CustomSelect.stories.js +11 -19
  17. package/src/components/molecules/CustomSelect/SelectItem.js +0 -7
  18. package/src/components/molecules/CustomSelect/index.js +30 -32
  19. package/src/components/molecules/CustomSelect/styles.js +9 -3
  20. package/src/components/organisms/DashboardMetric/dashboardMetricUtils.js +1 -1
  21. package/src/components/organisms/DashboardMetric/index.js +15 -1
  22. package/src/components/organisms/DashboardMetric/styles.js +31 -0
  23. package/src/components/pages/Dashboard/Dashboard.stories.js +39 -25
  24. package/src/components/pages/Dashboard/dashboardUtils.js +19 -8
  25. package/src/components/pages/Dashboard/index.js +37 -10
  26. package/dist/assets/images/customSelect/starIcon.svg +0 -14
  27. package/dist/components/atoms/ListCommercialRetailers/ListCommercialRetailers.stories.js +0 -36
  28. package/dist/components/atoms/ListCommercialRetailers/index.js +0 -64
  29. package/dist/components/atoms/ListCommercialRetailers/styles.js +0 -20
  30. package/dist/components/atoms/MenuCommercialRetailers/MenuCommercialRetailers.stories.js +0 -37
  31. package/dist/components/atoms/MenuCommercialRetailers/index.js +0 -25
  32. package/dist/components/atoms/MenuCommercialRetailers/styles.js +0 -20
  33. package/dist/components/atoms/MenuProductImage/MenuProductImage.stories.js +0 -28
  34. package/dist/components/atoms/MenuProductImage/index.js +0 -88
  35. package/dist/components/atoms/MenuProductImage/styles.js +0 -20
  36. package/dist/components/molecules/ApproveRejetPanel/ApproveRejetPanel.stories.js +0 -25
  37. package/dist/components/molecules/ApproveRejetPanel/index.js +0 -49
  38. package/dist/components/molecules/ApproveRejetPanel/styles.js +0 -18
  39. package/dist/components/molecules/SignInLoginCreationApp/SignInLogin.stories.js +0 -28
  40. package/dist/components/molecules/SignInLoginCreationApp/index.js +0 -270
  41. package/dist/components/molecules/SignInLoginCreationApp/styles.js +0 -20
  42. package/src/assets/images/customSelect/starIcon.svg +0 -14
@@ -1,18 +1,22 @@
1
1
  import axios from "axios";
2
2
 
3
- export const getProviders = async (jwt, companyId) => {
3
+ export const getProviders = async (jwt, user, companyId) => {
4
4
  const query = companyId ? `?companyId=${companyId}` : "";
5
5
  const companies = await axios.get(
6
- `${process.env.REACT_APP_READ_PROVIDERS}${query}`,
6
+ `${
7
+ user.is_retailer
8
+ ? process.env.REACT_APP_PENDING_INVITATIONS
9
+ : process.env.REACT_APP_READ_PROVIDERS
10
+ }${query}`,
7
11
  {
8
12
  headers: {
9
13
  Authorization: jwt,
10
14
  },
11
15
  }
12
16
  );
13
- const finalArray = transformProvidersArray(
14
- JSON.parse(companies.data.body || "{}")?.providers || []
15
- );
17
+ const { usersFinanced } = JSON.parse(companies.data.body || "{}")?.data || {};
18
+ const { providers } = JSON.parse(companies.data.body || "{}");
19
+ const finalArray = transformProvidersArray(providers || usersFinanced || []);
16
20
  return finalArray;
17
21
  };
18
22
 
@@ -24,9 +28,16 @@ const transformProvidersArray = (array) => {
24
28
  return newArray;
25
29
  };
26
30
 
27
- export const getCategories = async () => {
31
+ export const getCategories = async (user, company) => {
32
+ const isTHDUser = user.is_retailer === 1;
33
+ const { financedRetailers } = company || {};
34
+ const key = financedRetailers ? "financedRetailers" : "retailers";
35
+ const query =
36
+ isTHDUser || key === "financedRetailers"
37
+ ? `?id=${encodeURIComponent(company[key].map((ret) => ret.id).join(","))}`
38
+ : "";
28
39
  const response = await axios.get(
29
- `${process.env.REACT_APP_CATEGORY_ENDPOINT}`
40
+ `${process.env.REACT_APP_CATEGORY_ENDPOINT}${query}`
30
41
  );
31
42
  const categories = JSON.parse(response.data.body)?.data;
32
43
  const categoriesKeys = Object.keys(categories || {});
@@ -49,7 +60,7 @@ export const getCategories = async () => {
49
60
  finalArray.push({ id: index++, name: key, subOptions });
50
61
  });
51
62
  });
52
-
63
+ finalArray.sort((a, b) => a.name.localeCompare(b.name));
53
64
  return finalArray;
54
65
  };
55
66
 
@@ -7,7 +7,7 @@ import { CustomSelect } from "../../molecules/CustomSelect";
7
7
  import { getProviders, getCategories, formatDate } from "./dashboardUtils";
8
8
  import axios from "axios";
9
9
 
10
- export const Dashboard = ({ jwt, user }) => {
10
+ export const Dashboard = ({ jwt, user, company }) => {
11
11
  const [metricsData, setMetricsData] = useState([]);
12
12
  const [productsByStatus, setProductsByStatus] = useState({});
13
13
  const [requiredProducts, setRequiredProducts] = useState([]);
@@ -33,6 +33,11 @@ export const Dashboard = ({ jwt, user }) => {
33
33
  endDate: new Date(),
34
34
  });
35
35
  const [dateOptions, setDateOptions] = useState([]);
36
+ const applicants = [
37
+ { id: "provider", name: "Proveedor" },
38
+ { id: "retailer", name: "Cadena" },
39
+ ];
40
+ const [applicantsFilter, setApplicantsFilter] = useState([]);
36
41
 
37
42
  const loadProductVersions = async (queryObject, byStatus = false) => {
38
43
  const keys = Object.keys(queryObject);
@@ -55,7 +60,7 @@ export const Dashboard = ({ jwt, user }) => {
55
60
  };
56
61
 
57
62
  const getRetailers = async () => {
58
- const isTHDUser = [657, 818, 819].includes(user.id_company);
63
+ const isTHDUser = user.is_retailer === 1;
59
64
  const retailersResponse = await axios.get(
60
65
  `${process.env.REACT_APP_RETAILER_ENDPOINT}`,
61
66
  {
@@ -75,6 +80,10 @@ export const Dashboard = ({ jwt, user }) => {
75
80
 
76
81
  const loadProductsByStatus = async (orderByStatus) => {
77
82
  const { orders } = (await loadProductVersions(orderByStatus, true)) || {};
83
+ if (orders.null) {
84
+ orders.total -= orders.null;
85
+ delete orders.null;
86
+ }
78
87
  const { total = 0, R = 0, ACA = 0, PA = 0 } = orders;
79
88
  const inProcess = Object.keys(orders).reduce(
80
89
  (prev, curr) =>
@@ -181,8 +190,8 @@ export const Dashboard = ({ jwt, user }) => {
181
190
  };
182
191
 
183
192
  useEffect(async () => {
184
- setProviders(await getProviders(jwt));
185
- setCategories(await getCategories());
193
+ setProviders(await getProviders(jwt, user));
194
+ setCategories(await getCategories(user, company));
186
195
  await getRetailers();
187
196
  datesSelect();
188
197
  const today = new Date();
@@ -214,9 +223,12 @@ export const Dashboard = ({ jwt, user }) => {
214
223
  companyId.length > 0 && (queryObject["companyId"] = companyId.join(","));
215
224
  retailerId.length > 0 && (queryObject["retailerId"] = retailerId.join(","));
216
225
  categoryId.length > 0 && (queryObject["categoryId"] = categoryId.join(","));
226
+ applicantsFilter.length > 0 &&
227
+ (queryObject["requestedBy"] = applicantsFilter.join(","));
228
+
217
229
  await loadProductsByStatus(queryObject);
218
230
  await loadRequiredProducts(queryObject);
219
- }, [companyId, retailerId, categoryId, datesRange]);
231
+ }, [companyId, retailerId, categoryId, datesRange, applicantsFilter]);
220
232
 
221
233
  return loading ? (
222
234
  <Loading />
@@ -224,17 +236,19 @@ export const Dashboard = ({ jwt, user }) => {
224
236
  <Container>
225
237
  <div className="filters">
226
238
  <CustomSelect
239
+ showFilterString={true}
227
240
  options={dateOptions}
228
- selectLabel="Seleccionar Fecha"
241
+ selectLabel="Todo el tiempo"
229
242
  placeHolder="Buscar Fecha"
230
243
  customSelectId="dates-select"
231
244
  parameterArray={datesRange}
232
245
  setParameterArray={setDatesRange}
233
246
  />
234
247
  <CustomSelect
248
+ showFilterString={true}
235
249
  showSearchBar={true}
236
250
  options={providers}
237
- selectLabel="Seleccionar Proveedor"
251
+ selectLabel="Todos los proveedores"
238
252
  placeHolder="Buscar Proveedor"
239
253
  customSelectId="providers-select"
240
254
  parameterArray={companyId}
@@ -242,9 +256,10 @@ export const Dashboard = ({ jwt, user }) => {
242
256
  defaultOption={"Todos los proveedores"}
243
257
  />
244
258
  <CustomSelect
259
+ showFilterString={true}
245
260
  showSearchBar={true}
246
261
  options={categories}
247
- selectLabel="Seleccionar Departamento"
262
+ selectLabel="Todas las categorías"
248
263
  placeHolder="Buscar Departamento"
249
264
  customSelectId="category-select"
250
265
  parameterArray={categoryId}
@@ -252,15 +267,27 @@ export const Dashboard = ({ jwt, user }) => {
252
267
  defaultOption={"Todas las categorías"}
253
268
  />
254
269
  <CustomSelect
270
+ showFilterString={true}
255
271
  showSearchBar={true}
256
272
  options={retailers}
257
- selectLabel="Seleccionar Alcance"
273
+ selectLabel="Todos los alcances"
258
274
  placeHolder="Buscar Cadena"
259
275
  customSelectId="retailers-select"
260
276
  parameterArray={retailerId}
261
277
  setParameterArray={setRetailerId}
262
278
  defaultOption={"Todos los alcances"}
263
279
  />
280
+ {user.is_retailer === 1 && (
281
+ <CustomSelect
282
+ showFilterString={true}
283
+ options={applicants}
284
+ selectLabel="Todos los solicitantes"
285
+ customSelectId="applicants-select"
286
+ parameterArray={applicantsFilter}
287
+ setParameterArray={setApplicantsFilter}
288
+ defaultOption={"Todos los solicitantes"}
289
+ />
290
+ )}
264
291
  </div>
265
292
  <div className="metric-cards">
266
293
  {metricsData.map((metric, index) => (
@@ -287,6 +314,7 @@ export const Dashboard = ({ jwt, user }) => {
287
314
  type="doughnut"
288
315
  displayLegend={true}
289
316
  showPercent={true}
317
+ displayScale={false}
290
318
  />
291
319
  <DashboardMetric
292
320
  label={"Productos solicitados"}
@@ -296,7 +324,6 @@ export const Dashboard = ({ jwt, user }) => {
296
324
  dataObject={requiredProducts}
297
325
  type="line"
298
326
  indexAxis="x"
299
- scale="x"
300
327
  displayScale={true}
301
328
  retailerSelected={orderByRequired.retailerId}
302
329
  queryObject={orderByRequired}
@@ -1,14 +0,0 @@
1
- <svg id="Componente_34_12" data-name="Componente 34 – 12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
2
- <defs>
3
- <clipPath id="clip-path">
4
- <rect id="Rectángulo_107" data-name="Rectángulo 107" width="10" height="10" transform="translate(3 3)" fill="#b3b3b3" stroke="#b3b3b3" stroke-width="1"/>
5
- </clipPath>
6
- </defs>
7
- <g id="Rectángulo_287" data-name="Rectángulo 287" fill="#fff" stroke="#f0f0f0" stroke-width="1">
8
- <rect width="16" height="16" rx="8" stroke="none"/>
9
- <rect x="0.5" y="0.5" width="15" height="15" rx="7.5" fill="none"/>
10
- </g>
11
- <g id="Enmascarar_grupo_79" data-name="Enmascarar grupo 79" clip-path="url(#clip-path)">
12
- <path id="star_FILL0_wght400_GRAD0_opsz48" d="M4.037,9.438,6,8.262,7.963,9.45,7.438,7.225l1.725-1.5-2.275-.2L6,3.425,5.113,5.512l-2.275.2,1.725,1.5ZM2.912,11l.813-3.512L1,5.125l3.6-.312L6,1.5,7.4,4.813l3.6.313L8.275,7.488,9.087,11,6,9.137ZM6,6.563Z" transform="translate(2 1.5)" fill="#b3b3b3"/>
13
- </g>
14
- </svg>
@@ -1,36 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = exports.ListCommercialRetailersDefault = void 0;
7
-
8
- var _index = require("./index");
9
-
10
- var _default = {
11
- title: "Components/atoms/ListCommercialRetailers",
12
- component: _index.ListCommercialRetailers
13
- };
14
- exports.default = _default;
15
-
16
- var Template = function Template(args) {
17
- return /*#__PURE__*/React.createElement(_index.ListCommercialRetailers, args);
18
- };
19
-
20
- var ListCommercialRetailersDefault = Template.bind({});
21
- exports.ListCommercialRetailersDefault = ListCommercialRetailersDefault;
22
- ListCommercialRetailersDefault.args = {
23
- retailersAvailable: [{
24
- id: 54,
25
- name: "Construrama",
26
- country: "México",
27
- id_region: 1,
28
- active: 1
29
- }, {
30
- id: 4,
31
- name: "Walmart Super y Superama"
32
- }, {
33
- id: 6,
34
- name: "HEB"
35
- }]
36
- };
@@ -1,64 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.ListCommercialRetailers = void 0;
9
-
10
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
11
-
12
- var _styles = require("./styles");
13
-
14
- var _listCommercialRetailers = _interopRequireDefault(require("../../../assets/images/listCommercialRetailers/listCommercialRetailers.svg"));
15
-
16
- var _react = require("react");
17
-
18
- var _index = require("../CheckBox/index");
19
-
20
- var ListCommercialRetailers = function ListCommercialRetailers(_ref) {
21
- var retailersAvailable = _ref.retailersAvailable;
22
-
23
- var _useState = (0, _react.useState)(false),
24
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
25
- showMenu = _useState2[0],
26
- setShowMenu = _useState2[1];
27
-
28
- var closeMenu = function closeMenu(e) {
29
- if (!e.target.closest(".menu-list-commercial-retailers") && showMenu) {
30
- document.removeEventListener("click", closeMenu, false);
31
- setShowMenu(false);
32
- }
33
- };
34
-
35
- (0, _react.useEffect)(function () {
36
- if (showMenu) {
37
- document.addEventListener("click", closeMenu, false);
38
- }
39
- }, [showMenu]);
40
- return /*#__PURE__*/React.createElement(_styles.Container, {
41
- onClick: function onClick(event) {
42
- if (!showMenu) {
43
- setShowMenu(true);
44
- } else if (showMenu && !event.target.closest(".menu-list-commercial-retailers")) {
45
- setShowMenu(false);
46
- document.removeEventListener("click", closeMenu, false);
47
- }
48
- },
49
- className: "list-commercial-retailers"
50
- }, /*#__PURE__*/React.createElement("img", {
51
- src: _listCommercialRetailers.default,
52
- alt: "button up icon"
53
- }), showMenu && /*#__PURE__*/React.createElement("div", {
54
- className: "menu-list-commercial-retailers"
55
- }, retailersAvailable === null || retailersAvailable === void 0 ? void 0 : retailersAvailable.map(function (component, index) {
56
- return /*#__PURE__*/React.createElement(_index.CheckBox, {
57
- id: component.id,
58
- label: component.name,
59
- key: index + "-" + component.id
60
- });
61
- })));
62
- };
63
-
64
- exports.ListCommercialRetailers = ListCommercialRetailers;
@@ -1,20 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.Container = void 0;
9
-
10
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
11
-
12
- var _styledComponents = _interopRequireDefault(require("styled-components"));
13
-
14
- var _variables = require("../../../global-files/variables");
15
-
16
- var _templateObject;
17
-
18
- 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);
19
-
20
- exports.Container = Container;
@@ -1,37 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = exports.MenuCommercialRetailersDefault = void 0;
7
-
8
- var _index = require("./index");
9
-
10
- var _default = {
11
- title: "Components/atoms/MenuCommercialRetailers",
12
- component: _index.MenuCommercialRetailers
13
- };
14
- exports.default = _default;
15
-
16
- var Template = function Template(args) {
17
- return /*#__PURE__*/React.createElement(_index.MenuCommercialRetailers, args);
18
- };
19
-
20
- var MenuCommercialRetailersDefault = Template.bind({});
21
- exports.MenuCommercialRetailersDefault = MenuCommercialRetailersDefault;
22
- MenuCommercialRetailersDefault.args = {
23
- editType: "3",
24
- retailersAvailable: [{
25
- id: 54,
26
- name: "Construrama",
27
- country: "México",
28
- id_region: 1,
29
- active: 1
30
- }, {
31
- id: 4,
32
- name: "Walmart Super y Superama"
33
- }, {
34
- id: 6,
35
- name: "HEB"
36
- }]
37
- };
@@ -1,25 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.MenuCommercialRetailers = void 0;
7
-
8
- var _styles = require("./styles");
9
-
10
- var _StatusTag = require("../StatusTag");
11
-
12
- var _ListCommercialRetailers = require("../ListCommercialRetailers");
13
-
14
- var MenuCommercialRetailers = function MenuCommercialRetailers(_ref) {
15
- var editType = _ref.editType,
16
- retailersAvailable = _ref.retailersAvailable;
17
- return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement(_StatusTag.StatusTag, {
18
- editType: editType,
19
- ovalForm: true
20
- }), /*#__PURE__*/React.createElement(_ListCommercialRetailers.ListCommercialRetailers, {
21
- retailersAvailable: retailersAvailable
22
- }));
23
- };
24
-
25
- exports.MenuCommercialRetailers = MenuCommercialRetailers;
@@ -1,20 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.Container = void 0;
9
-
10
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
11
-
12
- var _styledComponents = _interopRequireDefault(require("styled-components"));
13
-
14
- var _variables = require("../../../global-files/variables");
15
-
16
- var _templateObject;
17
-
18
- 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);
19
-
20
- exports.Container = Container;
@@ -1,28 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.default = exports.MenuProductImageDefault = void 0;
9
-
10
- var _index = require("./index");
11
-
12
- var _menuProductImage = _interopRequireDefault(require("../../../assets/images/menuProductImage/menuProductImage.svg"));
13
-
14
- var _default = {
15
- title: "Components/atoms/MenuProductImage",
16
- component: _index.MenuProductImage
17
- };
18
- exports.default = _default;
19
-
20
- var Template = function Template(args) {
21
- return /*#__PURE__*/React.createElement(_index.MenuProductImage, args);
22
- };
23
-
24
- var MenuProductImageDefault = Template.bind({});
25
- exports.MenuProductImageDefault = MenuProductImageDefault;
26
- MenuProductImageDefault.args = {
27
- ProductImg: _menuProductImage.default
28
- };
@@ -1,88 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.MenuProductImage = void 0;
9
-
10
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
11
-
12
- var _styles = require("./styles");
13
-
14
- var _menuProductImageButton = _interopRequireDefault(require("../../../assets/images/menuProductImage/menuProductImageButton.svg"));
15
-
16
- var _react = require("react");
17
-
18
- var _index = require("../LoadImageMenu/index");
19
-
20
- var _listCommercialRetailers = _interopRequireDefault(require("../../../assets/images/listCommercialRetailers/listCommercialRetailers.svg"));
21
-
22
- var MenuProductImage = function MenuProductImage(_ref) {
23
- var ProductImg = _ref.ProductImg;
24
-
25
- var _useState = (0, _react.useState)(false),
26
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
27
- showMenu = _useState2[0],
28
- setShowMenu = _useState2[1];
29
-
30
- var closeMenu = function closeMenu(e) {
31
- if (!e.target.closest(".menu-upload-product") && showMenu) {
32
- document.removeEventListener("click", closeMenu, false);
33
- setShowMenu(false);
34
- }
35
- };
36
-
37
- (0, _react.useEffect)(function () {
38
- if (showMenu) {
39
- document.addEventListener("click", closeMenu, false);
40
- }
41
- }, [showMenu]);
42
- return /*#__PURE__*/React.createElement(_styles.Container, {
43
- className: "div-upload-image"
44
- }, /*#__PURE__*/React.createElement("img", {
45
- className: "profile-image",
46
- src: ProductImg,
47
- alt: "Product Image"
48
- }), /*#__PURE__*/React.createElement("button", {
49
- onClick: function onClick(event) {
50
- if (!showMenu) {
51
- setShowMenu(true);
52
- } else if (showMenu && !event.target.closest(".menu-upload-product")) {
53
- setShowMenu(false);
54
- document.removeEventListener("click", closeMenu, false);
55
- }
56
- },
57
- className: "upload-image-button " + (showMenu && "show-menu-upload-image")
58
- }, /*#__PURE__*/React.createElement("img", {
59
- src: showMenu ? _listCommercialRetailers.default : _menuProductImageButton.default,
60
- alt: "Product Image Button"
61
- })), showMenu && /*#__PURE__*/React.createElement("div", {
62
- className: "menu-upload-product"
63
- }, /*#__PURE__*/React.createElement(_index.LoadImageMenu, {
64
- tipo: "Tipo de empaque ",
65
- product: "Producto expuesto",
66
- content: [{
67
- label: "Enbalaje adicional - 0"
68
- }, {
69
- label: "En paquete - 1"
70
- }, {
71
- label: "Producto expuesto - 2"
72
- }, {
73
- label: "Embalaje multiforme - 3"
74
- }, {
75
- label: "Si no es una imagen / no corresponde - X"
76
- }],
77
- id: "menu-packaging-type"
78
- }), /*#__PURE__*/React.createElement(_index.LoadImageMenu, {
79
- tipo: "Tipo de imagen ",
80
- product: "Render",
81
- content: [{
82
- label: "fotografía del producto"
83
- }],
84
- id: "menu-image-type"
85
- })));
86
- };
87
-
88
- exports.MenuProductImage = MenuProductImage;
@@ -1,20 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.Container = void 0;
9
-
10
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
11
-
12
- var _styledComponents = _interopRequireDefault(require("styled-components"));
13
-
14
- var _variables = require("../../../global-files/variables");
15
-
16
- var _templateObject;
17
-
18
- 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);
19
-
20
- exports.Container = Container;
@@ -1,25 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = exports.ApproveRejetPanelDefault = void 0;
7
-
8
- var _index = require("./index");
9
-
10
- var _default = {
11
- title: "Components/molecules/ApproveRejetPanel",
12
- component: _index.ApproveRejetPanel
13
- };
14
- exports.default = _default;
15
-
16
- var Template = function Template(args) {
17
- return /*#__PURE__*/React.createElement(_index.ApproveRejetPanel, args);
18
- };
19
-
20
- var ApproveRejetPanelDefault = Template.bind({});
21
- exports.ApproveRejetPanelDefault = ApproveRejetPanelDefault;
22
- ApproveRejetPanelDefault.args = {
23
- text: "113 productos",
24
- check: false
25
- };
@@ -1,49 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.ApproveRejetPanel = void 0;
9
-
10
- var _ScreenHeader = require("../../atoms/ScreenHeader");
11
-
12
- var _Avatar = require("../../atoms/Avatar");
13
-
14
- var _styles = require("./styles");
15
-
16
- var _approveRejetPanelDelete = _interopRequireDefault(require("../../../assets/images/approveRejetPanel/approveRejetPanelDelete.svg"));
17
-
18
- var _approveRejetPanelCancel = _interopRequireDefault(require("../../../assets/images/approveRejetPanel/approveRejetPanelCancel.svg"));
19
-
20
- var _approveRejetPanelSave = _interopRequireDefault(require("../../../assets/images/approveRejetPanel/approveRejetPanelSave.svg"));
21
-
22
- var _approveRejetPanelExclude = _interopRequireDefault(require("../../../assets/images/approveRejetPanel/approveRejetPanelExclude.svg"));
23
-
24
- var _variables = require("../../../global-files/variables");
25
-
26
- var ApproveRejetPanel = function ApproveRejetPanel(_ref) {
27
- var text = _ref.text,
28
- check = _ref.check;
29
- return /*#__PURE__*/React.createElement(_styles.Container, null, /*#__PURE__*/React.createElement(_ScreenHeader.ScreenHeader, {
30
- fontFamily: _variables.FontFamily.AvenirNext,
31
- headerType: "date-header",
32
- color: _variables.GlobalColors.s4,
33
- text: text
34
- }), /*#__PURE__*/React.createElement(_Avatar.Avatar, {
35
- image: _approveRejetPanelDelete.default,
36
- imageType: "big-image",
37
- altText: "delete button"
38
- }), /*#__PURE__*/React.createElement(_Avatar.Avatar, {
39
- image: check ? _approveRejetPanelCancel.default : _approveRejetPanelExclude.default,
40
- imageType: "big-image",
41
- altText: check ? "cancel button" : "exclude button"
42
- }), /*#__PURE__*/React.createElement(_Avatar.Avatar, {
43
- image: check ? _approveRejetPanelSave.default : _approveRejetPanelExclude.default,
44
- imageType: "big-image",
45
- altText: check ? "save button" : "exclude button"
46
- }));
47
- };
48
-
49
- exports.ApproveRejetPanel = ApproveRejetPanel;
@@ -1,18 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
-
5
- Object.defineProperty(exports, "__esModule", {
6
- value: true
7
- });
8
- exports.Container = void 0;
9
-
10
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
11
-
12
- var _styledComponents = _interopRequireDefault(require("styled-components"));
13
-
14
- var _templateObject;
15
-
16
- var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: end;\n align-items: center;\n .date-header + * {\n margin-left: 30px;\n }\n .big-image + * {\n margin-left: 10px;\n }\n"])));
17
-
18
- exports.Container = Container;