kupos-ui-components-lib 7.0.6 → 7.0.8
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/dist/components/FilterBar/ServiceFilter.js +33 -7
- package/dist/components/ServiceItem/ServiceItemDesktop.js +8 -7
- package/dist/styles.css +21 -0
- package/dist/utils/CommonService.d.ts +0 -27
- package/dist/utils/CommonService.js +221 -220
- package/package.json +1 -1
- package/src/components/FilterBar/ServiceFilter.tsx +42 -7
- package/src/components/ServiceItem/ServiceItemDesktop.tsx +12 -11
- package/src/utils/CommonService.ts +221 -225
|
@@ -49,16 +49,40 @@ class ServiceFilter extends React.Component {
|
|
|
49
49
|
this.setState({ addMargin: window.scrollY > 0 });
|
|
50
50
|
}
|
|
51
51
|
sortFilters(filtersArray) {
|
|
52
|
+
// Define the desired filter order
|
|
53
|
+
const FILTER_ORDER = [
|
|
54
|
+
"special_departure",
|
|
55
|
+
"time",
|
|
56
|
+
"tipo",
|
|
57
|
+
"seat_types",
|
|
58
|
+
"operator",
|
|
59
|
+
"train_type",
|
|
60
|
+
"amenities",
|
|
61
|
+
];
|
|
62
|
+
// Create array with original indices preserved
|
|
52
63
|
let newArr = [];
|
|
53
|
-
filtersArray.forEach((val) => {
|
|
64
|
+
filtersArray.forEach((val, originalIndex) => {
|
|
54
65
|
if (val.type === "seat_types") {
|
|
55
|
-
|
|
56
|
-
|
|
66
|
+
// Preserve original option indices before sorting
|
|
67
|
+
let optionsWithOriginalIndex = val.options.map((opt, optIndex) => (Object.assign(Object.assign({}, opt), { originalOptionIndex: optIndex })));
|
|
68
|
+
let newSeatOrder = [...optionsWithOriginalIndex].sort((a, b) => SEAT_ORDER.indexOf(a.label) - SEAT_ORDER.indexOf(b.label));
|
|
69
|
+
newArr.push(Object.assign(Object.assign({}, val), { options: newSeatOrder, originalIndex }));
|
|
57
70
|
}
|
|
58
71
|
else {
|
|
59
|
-
newArr.push(val);
|
|
72
|
+
newArr.push(Object.assign(Object.assign({}, val), { originalIndex }));
|
|
60
73
|
}
|
|
61
74
|
});
|
|
75
|
+
newArr.sort((a, b) => {
|
|
76
|
+
const indexA = FILTER_ORDER.indexOf(a.type);
|
|
77
|
+
const indexB = FILTER_ORDER.indexOf(b.type);
|
|
78
|
+
if (indexA !== -1 && indexB !== -1)
|
|
79
|
+
return indexA - indexB;
|
|
80
|
+
if (indexA !== -1)
|
|
81
|
+
return -1;
|
|
82
|
+
if (indexB !== -1)
|
|
83
|
+
return 1;
|
|
84
|
+
return 0;
|
|
85
|
+
});
|
|
62
86
|
return newArr;
|
|
63
87
|
}
|
|
64
88
|
clearFilter() {
|
|
@@ -203,7 +227,9 @@ class ServiceFilter extends React.Component {
|
|
|
203
227
|
? val.spText
|
|
204
228
|
: val.label;
|
|
205
229
|
}
|
|
206
|
-
return (React.createElement("div", { key: i, onClick: () => onClick(
|
|
230
|
+
return (React.createElement("div", { key: i, onClick: () => onClick(val.originalOptionIndex !== undefined
|
|
231
|
+
? val.originalOptionIndex
|
|
232
|
+
: i), style: {
|
|
207
233
|
margin: (val === null || val === void 0 ? void 0 : val.active) ? "3px 0" : "0",
|
|
208
234
|
backgroundColor: val.active
|
|
209
235
|
? this.props.colors.selectedColor
|
|
@@ -216,7 +242,7 @@ class ServiceFilter extends React.Component {
|
|
|
216
242
|
? `text-[${this.props.colors.selectedTextColor}]`
|
|
217
243
|
: ""} ${val.active ? "bold-text" : ""}` },
|
|
218
244
|
val.icon && this.props.icons && (React.createElement("img", { src: iconKey, alt: val.icon, className: "w-[20px] h-[20px] mr-[10px] " })),
|
|
219
|
-
|
|
245
|
+
React.createElement("span", { className: "capitalize" }, label.toLowerCase())));
|
|
220
246
|
}))));
|
|
221
247
|
}
|
|
222
248
|
render() {
|
|
@@ -236,7 +262,7 @@ class ServiceFilter extends React.Component {
|
|
|
236
262
|
React.createElement("div", { className: "text-[13.33px] pb-[10px]" }, sortedFilters === null || sortedFilters === void 0 ? void 0 : sortedFilters.map((val, key) => {
|
|
237
263
|
var _a;
|
|
238
264
|
return ((_a = val.options) === null || _a === void 0 ? void 0 : _a.length)
|
|
239
|
-
? this.renderFilterItem(val, (i) => onFilterSelected(
|
|
265
|
+
? this.renderFilterItem(val, (i) => onFilterSelected(val.originalIndex, i), key)
|
|
240
266
|
: null;
|
|
241
267
|
}))),
|
|
242
268
|
React.createElement("div", { onClick: this.clearFilter, className: `group text-[13.33px] bold-text items-center cursor-pointer absolute flex justify-center bg-[#eaeaea] pt-[35px] pb-[7px] w-full left-0 z-[1] -bottom-[30px] rounded-b-[10px] transition-all duration-300 ease-in-out ${hasActiveFilters
|
|
@@ -343,17 +343,14 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
343
343
|
const getNumberOfSeats = () => {
|
|
344
344
|
return serviceItem.seat_types.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
|
|
345
345
|
};
|
|
346
|
-
// Helper function to truncate seat labels with more than 2 words
|
|
347
346
|
const truncateSeatLabel = (label) => {
|
|
348
347
|
if (typeof label !== "string")
|
|
349
348
|
return String(label);
|
|
350
|
-
// Don't truncate if label contains parentheses (e.g., "Cama (180°)")
|
|
351
349
|
if (label.includes("("))
|
|
352
350
|
return label;
|
|
353
351
|
const words = label.trim().split(/\s+/);
|
|
354
352
|
if (words.length <= 2)
|
|
355
353
|
return label;
|
|
356
|
-
// Take first 2 words + first letter of 3rd word + "..."
|
|
357
354
|
return `${words[0]} ${words[1]} ${words[2].charAt(0)}...`;
|
|
358
355
|
};
|
|
359
356
|
const getSeatNames = () => {
|
|
@@ -551,11 +548,14 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
551
548
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dep_time.includes("PM"))
|
|
552
549
|
? null
|
|
553
550
|
: DateService.ampmOnly(serviceItem.dep_time))) : (React.createElement("div", { className: "font-[900] bold-text" }, DateService.formatTime(serviceItem.dep_time))),
|
|
554
|
-
serviceItem.boarding_stages && (React.createElement("div", { className: "hidden group-hover:block absolute -top-[8px]
|
|
551
|
+
serviceItem.boarding_stages && (React.createElement("div", { className: "hidden group-hover:block absolute -top-[8px] text-white px-3 py-2 rounded-[7px] whitespace-nowrap z-10 shadow-service", style: {
|
|
555
552
|
backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor,
|
|
556
553
|
zIndex: 100,
|
|
554
|
+
left: "clamp(80%, 100% - (100vw - 1400px) * 0.05, 100%)",
|
|
557
555
|
} },
|
|
558
|
-
React.createElement("div", { className: "tooltip-arrow absolute top-
|
|
556
|
+
React.createElement("div", { className: "tooltip-arrow absolute top-[5px] -left-[8px] w-0 h-0 \n border-t-[10px] border-b-[10px] border-r-[10px] \n border-t-transparent border-b-transparent", style: {
|
|
557
|
+
borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor,
|
|
558
|
+
} }),
|
|
559
559
|
React.createElement("div", { className: "text-center text-[14px] font-normal", style: { fontWeight: 400 } }, renderStages(serviceItem.boarding_stages, 1, busStage, hideBoardingTime((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.api_type) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.apiType))))))),
|
|
560
560
|
!isCiva && (React.createElement("div", { className: "h-[20px] flex items-center group relative" },
|
|
561
561
|
React.createElement("div", { className: "font-[900] bold-text" }, removeArrivalTime
|
|
@@ -563,11 +563,12 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
563
563
|
: serviceItem.arr_time
|
|
564
564
|
? DateService.formatTime(serviceItem.arr_time)
|
|
565
565
|
: null),
|
|
566
|
-
serviceItem.dropoff_stages && (React.createElement("div", { className: "hidden group-hover:block absolute -top-[8px]
|
|
566
|
+
serviceItem.dropoff_stages && (React.createElement("div", { className: "hidden group-hover:block absolute -top-[8px] text-white px-3 py-2 rounded-[7px] whitespace-nowrap z-10 shadow-service", style: {
|
|
567
567
|
backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor,
|
|
568
568
|
zIndex: 100,
|
|
569
|
+
left: "clamp(80%, 100% - (100vw - 1400px) * 0.05, 100%)",
|
|
569
570
|
} },
|
|
570
|
-
React.createElement("div", { className: "tooltip-arrow absolute top-
|
|
571
|
+
React.createElement("div", { className: "tooltip-arrow absolute top-[5px] -left-[8px] w-0 h-0 \n border-t-[10px] border-b-[10px] border-r-[10px] \n border-t-transparent border-b-transparent", style: {
|
|
571
572
|
borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor,
|
|
572
573
|
} }),
|
|
573
574
|
React.createElement("div", { className: "text-center text-[14px] font-normal", style: { fontWeight: 400 } }, renderStages(serviceItem.dropoff_stages, 2, busStage, hideBoardingTime((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.api_type) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.apiType)))))))))),
|
package/dist/styles.css
CHANGED
|
@@ -36,6 +36,9 @@
|
|
|
36
36
|
.top-\[2px\] {
|
|
37
37
|
top: 2px;
|
|
38
38
|
}
|
|
39
|
+
.top-\[5px\] {
|
|
40
|
+
top: 5px;
|
|
41
|
+
}
|
|
39
42
|
.top-\[15px\] {
|
|
40
43
|
top: 15px;
|
|
41
44
|
}
|
|
@@ -81,6 +84,9 @@
|
|
|
81
84
|
.-left-\[7px\] {
|
|
82
85
|
left: calc(7px * -1);
|
|
83
86
|
}
|
|
87
|
+
.-left-\[8px\] {
|
|
88
|
+
left: calc(8px * -1);
|
|
89
|
+
}
|
|
84
90
|
.left-1\/2 {
|
|
85
91
|
left: calc(1/2 * 100%);
|
|
86
92
|
}
|
|
@@ -517,6 +523,9 @@
|
|
|
517
523
|
.overflow-y-hidden {
|
|
518
524
|
overflow-y: hidden;
|
|
519
525
|
}
|
|
526
|
+
.rounded-\[7px\] {
|
|
527
|
+
border-radius: 7px;
|
|
528
|
+
}
|
|
520
529
|
.rounded-\[8px\] {
|
|
521
530
|
border-radius: 8px;
|
|
522
531
|
}
|
|
@@ -562,10 +571,18 @@
|
|
|
562
571
|
border-top-style: var(--tw-border-style);
|
|
563
572
|
border-top-width: 8px;
|
|
564
573
|
}
|
|
574
|
+
.border-t-\[10px\] {
|
|
575
|
+
border-top-style: var(--tw-border-style);
|
|
576
|
+
border-top-width: 10px;
|
|
577
|
+
}
|
|
565
578
|
.border-r-8 {
|
|
566
579
|
border-right-style: var(--tw-border-style);
|
|
567
580
|
border-right-width: 8px;
|
|
568
581
|
}
|
|
582
|
+
.border-r-\[10px\] {
|
|
583
|
+
border-right-style: var(--tw-border-style);
|
|
584
|
+
border-right-width: 10px;
|
|
585
|
+
}
|
|
569
586
|
.border-b {
|
|
570
587
|
border-bottom-style: var(--tw-border-style);
|
|
571
588
|
border-bottom-width: 1px;
|
|
@@ -574,6 +591,10 @@
|
|
|
574
591
|
border-bottom-style: var(--tw-border-style);
|
|
575
592
|
border-bottom-width: 8px;
|
|
576
593
|
}
|
|
594
|
+
.border-b-\[10px\] {
|
|
595
|
+
border-bottom-style: var(--tw-border-style);
|
|
596
|
+
border-bottom-width: 10px;
|
|
597
|
+
}
|
|
577
598
|
.border-l-8 {
|
|
578
599
|
border-left-style: var(--tw-border-style);
|
|
579
600
|
border-left-width: 8px;
|
|
@@ -1,33 +1,6 @@
|
|
|
1
1
|
declare const commonService: {
|
|
2
2
|
currency(amount: number, currencySign?: string): string;
|
|
3
3
|
copyObject: (ob: any) => any;
|
|
4
|
-
getServiceFilters: (routes: any, metaData: any, busTerminals: any, seatTypesOriginal: any) => {
|
|
5
|
-
operators: {
|
|
6
|
-
title: string;
|
|
7
|
-
type: string;
|
|
8
|
-
options: any[];
|
|
9
|
-
};
|
|
10
|
-
seatTypes: {
|
|
11
|
-
title: string;
|
|
12
|
-
type: string;
|
|
13
|
-
options: any[];
|
|
14
|
-
};
|
|
15
|
-
amenities: {
|
|
16
|
-
title: string;
|
|
17
|
-
type: string;
|
|
18
|
-
options: any[];
|
|
19
|
-
};
|
|
20
|
-
tipo: {
|
|
21
|
-
title: string;
|
|
22
|
-
type: string;
|
|
23
|
-
options: any[];
|
|
24
|
-
};
|
|
25
|
-
special_departure: {
|
|
26
|
-
title: string;
|
|
27
|
-
type: string;
|
|
28
|
-
options: any[];
|
|
29
|
-
};
|
|
30
|
-
};
|
|
31
4
|
getServiceTypeLabelForFilters: (service_type: any) => "" | "Tipo de servicio" | "Punto de embarque" | "Tipos de asiento" | "SERVICIOS";
|
|
32
5
|
getSeatNameForFilters: (rawSeat: any) => any;
|
|
33
6
|
capitalize: (str: any) => any;
|