contentoh-components-library 21.2.51 → 21.2.52
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.
- package/.env.development +1 -0
- package/.env.production +2 -1
- package/dist/components/atoms/Graphic/index.js +30 -1
- package/dist/components/molecules/CustomSelect/CustomSelect.stories.js +22 -21
- package/dist/components/molecules/CustomSelect/SelectItem.js +1 -10
- package/dist/components/molecules/CustomSelect/index.js +37 -36
- package/dist/components/molecules/CustomSelect/styles.js +1 -3
- package/dist/components/organisms/DashboardMetric/dashboardMetricUtils.js +1 -1
- package/dist/components/organisms/DashboardMetric/index.js +20 -2
- package/dist/components/organisms/DashboardMetric/styles.js +1 -1
- package/dist/components/pages/Dashboard/Dashboard.stories.js +39 -25
- package/dist/components/pages/Dashboard/dashboardUtils.js +28 -17
- package/dist/components/pages/Dashboard/index.js +49 -16
- package/package.json +1 -1
- package/src/components/atoms/Graphic/index.js +30 -1
- package/src/components/molecules/CustomSelect/CustomSelect.stories.js +11 -19
- package/src/components/molecules/CustomSelect/SelectItem.js +0 -7
- package/src/components/molecules/CustomSelect/index.js +30 -32
- package/src/components/molecules/CustomSelect/styles.js +9 -3
- package/src/components/organisms/DashboardMetric/dashboardMetricUtils.js +1 -1
- package/src/components/organisms/DashboardMetric/index.js +15 -1
- package/src/components/organisms/DashboardMetric/styles.js +31 -0
- package/src/components/pages/Dashboard/Dashboard.stories.js +39 -25
- package/src/components/pages/Dashboard/dashboardUtils.js +18 -8
- package/src/components/pages/Dashboard/index.js +37 -10
- package/dist/assets/images/customSelect/starIcon.svg +0 -14
- package/dist/components/atoms/ListCommercialRetailers/ListCommercialRetailers.stories.js +0 -36
- package/dist/components/atoms/ListCommercialRetailers/index.js +0 -64
- package/dist/components/atoms/ListCommercialRetailers/styles.js +0 -20
- package/dist/components/atoms/MenuCommercialRetailers/MenuCommercialRetailers.stories.js +0 -37
- package/dist/components/atoms/MenuCommercialRetailers/index.js +0 -25
- package/dist/components/atoms/MenuCommercialRetailers/styles.js +0 -20
- package/dist/components/atoms/MenuProductImage/MenuProductImage.stories.js +0 -28
- package/dist/components/atoms/MenuProductImage/index.js +0 -88
- package/dist/components/atoms/MenuProductImage/styles.js +0 -20
- package/dist/components/molecules/ApproveRejetPanel/ApproveRejetPanel.stories.js +0 -25
- package/dist/components/molecules/ApproveRejetPanel/index.js +0 -49
- package/dist/components/molecules/ApproveRejetPanel/styles.js +0 -18
- package/dist/components/molecules/SignInLoginCreationApp/SignInLogin.stories.js +0 -28
- package/dist/components/molecules/SignInLoginCreationApp/index.js +0 -270
- package/dist/components/molecules/SignInLoginCreationApp/styles.js +0 -20
- 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
|
-
`${
|
|
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
|
|
14
|
-
|
|
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,15 @@ 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 key = company.financedRetailers ? "financedRetailers" : "retailers";
|
|
34
|
+
const query =
|
|
35
|
+
isTHDUser || key === "financedRetailers"
|
|
36
|
+
? `?id=${encodeURIComponent(company[key].map((ret) => ret.id).join(","))}`
|
|
37
|
+
: "";
|
|
28
38
|
const response = await axios.get(
|
|
29
|
-
`${process.env.REACT_APP_CATEGORY_ENDPOINT}`
|
|
39
|
+
`${process.env.REACT_APP_CATEGORY_ENDPOINT}${query}`
|
|
30
40
|
);
|
|
31
41
|
const categories = JSON.parse(response.data.body)?.data;
|
|
32
42
|
const categoriesKeys = Object.keys(categories || {});
|
|
@@ -49,7 +59,7 @@ export const getCategories = async () => {
|
|
|
49
59
|
finalArray.push({ id: index++, name: key, subOptions });
|
|
50
60
|
});
|
|
51
61
|
});
|
|
52
|
-
|
|
62
|
+
finalArray.sort((a, b) => a.name.localeCompare(b.name));
|
|
53
63
|
return finalArray;
|
|
54
64
|
};
|
|
55
65
|
|
|
@@ -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 =
|
|
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="
|
|
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="
|
|
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="
|
|
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="
|
|
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;
|