kupos-ui-components-lib 9.1.6 → 9.1.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/assets/images/anims/service_list/directo.json +1 -1
- package/dist/components/FilterBar/FilterBarDesktop.d.ts +1 -1
- package/dist/components/FilterBar/FilterBarDesktop.js +38 -3
- package/dist/components/FilterBar/tyoes.d.ts +1 -0
- package/dist/components/ServiceItem/RatingHover.js +61 -55
- package/dist/components/ServiceItem/RatingItem.js +3 -22
- package/dist/components/ServiceItem/ServiceItemDesktop.js +36 -17
- package/dist/components/ServiceItem/ServiceItemMobile.js +17 -8
- package/dist/styles.css +70 -11
- package/dist/ui/RatingBlock.d.ts +1 -9
- package/dist/ui/RatingBlock.js +1 -1
- package/dist/ui/mobileweb/BottomAmenitiesMobile.js +1 -7
- package/package.json +1 -1
- package/src/assets/images/anims/service_list/directo.json +1 -1
- package/src/components/FilterBar/FilterBarDesktop.tsx +46 -3
- package/src/components/FilterBar/tyoes.ts +1 -0
- package/src/components/ServiceItem/RatingHover.tsx +137 -155
- package/src/components/ServiceItem/RatingItem.tsx +5 -27
- package/src/components/ServiceItem/ServiceItemDesktop.tsx +30 -26
- package/src/components/ServiceItem/ServiceItemMobile.tsx +28 -8
- package/src/ui/RatingBlock.tsx +2 -2
- package/src/ui/mobileweb/BottomAmenitiesMobile.tsx +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"nm":"Main Scene","ddd":0,"h":500,"w":500,"meta":{"g":"@lottiefiles/creator 1.
|
|
1
|
+
{"nm":"Main Scene","ddd":0,"h":500,"w":500,"meta":{"g":"@lottiefiles/creator 1.25.0"},"layers":[{"ty":0,"nm":" Main Scene","sr":1,"st":0,"op":90,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[250,250]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[250,250]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"w":500,"h":500,"refId":"precomp_Main Scene_c6717324-fe11-4912-8421-1a94a5c0a552","ind":1}],"v":"5.7.0","fr":30,"op":90,"ip":0,"assets":[{"nm":"Main Scene","id":"precomp_Main Scene_c6717324-fe11-4912-8421-1a94a5c0a552","layers":[{"ty":4,"nm":"Shape Layer - SVG","sr":1,"st":0,"op":90,"ip":0,"hd":false,"ln":"Capa_1","ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[38.5,32.5]},"s":{"a":0,"k":[596.2908,596.2908]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[103.191,249.995],"t":24},{"s":[221.8237,249.9635],"t":39}]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":24},{"s":[100],"t":30}]}},"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.2699999999999996,0.37000000000000455],[-0.5899999999999999,0.759999999999998],[0,0],[0,0],[0,0.5100000000000002],[-0.2700000000000031,0.3600000000000001],[-0.39000000000000057,0],[-0.2699999999999996,-0.37000000000000005],[0,0],[0.5700000000000003,-0.759999999999998],[0,0],[0.39000000000000057,0]],"o":[[-0.39000000000000057,0],[-0.5700000000000003,-0.75],[0,0],[0,0],[-0.28000000000000114,-0.33999999999999986],[0,-0.5100000000000002],[0.28000000000000114,-0.36],[0.39000000000000057,0],[0,0],[0.5700000000000003,0.75],[0,0],[-0.28000000000000114,0.35999999999999943],[0,0]],"v":[[26.98,65],[25.96,64.44],[25.96,61.71],[48.010000000000005,32.269999999999996],[25.94,3.28],[25.52,1.9299999999999997],[25.94,0.5599999999999996],[26.98,-4.440892098500626e-16],[28,0.5599999999999996],[51.07,30.88],[51.07,33.61],[28.01,64.43],[26.970000000000002,65.01]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":100},"w":{"a":0,"k":0.87},"c":{"a":0,"k":[1,1,1]}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":1},{"ty":4,"nm":"Shape Layer - SVG 1","sr":1,"st":0,"op":90,"ip":0,"hd":false,"ln":"Capa_1","ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[38.5,32.5]},"s":{"a":0,"k":[596.2908,596.2908]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[80.0835,249.995],"t":2},{"s":[395.1269,249.9635],"t":24}]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":0},{"s":[100],"t":4}]}},"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.2699999999999996,0.37000000000000455],[-0.5899999999999999,0.759999999999998],[0,0],[0,0],[0,0.5100000000000002],[-0.2700000000000031,0.3600000000000001],[-0.39000000000000057,0],[-0.2699999999999996,-0.37000000000000005],[0,0],[0.5700000000000003,-0.759999999999998],[0,0],[0.39000000000000057,0]],"o":[[-0.39000000000000057,0],[-0.5700000000000003,-0.75],[0,0],[0,0],[-0.28000000000000114,-0.33999999999999986],[0,-0.5100000000000002],[0.28000000000000114,-0.36],[0.39000000000000057,0],[0,0],[0.5700000000000003,0.75],[0,0],[-0.28000000000000114,0.35999999999999943],[0,0]],"v":[[26.98,65],[25.96,64.44],[25.96,61.71],[48.010000000000005,32.269999999999996],[25.94,3.28],[25.52,1.9299999999999997],[25.94,0.5599999999999996],[26.98,-4.440892098500626e-16],[28,0.5599999999999996],[51.07,30.88],[51.07,33.61],[28.01,64.43],[26.970000000000002,65.01]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":1,"lj":1,"ml":4,"o":{"a":0,"k":100},"w":{"a":0,"k":0.87},"c":{"a":0,"k":[1,1,1]}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":2}]}]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { FilterBarProps } from "./tyoes";
|
|
3
|
-
declare const FilterBarDesktop: ({ t, serviceList, setServiceList, allSchedules, showReturnTripModal, filterArrData, isBlankTicket, operatorId, filtersArray, setFiltersArray, metaData, busTerminals, setTypes, colors, icons, translation, isTrain, isPeru, hideOperator, setCoachLoading, setCoachKey, }: FilterBarProps) => React.JSX.Element;
|
|
3
|
+
declare const FilterBarDesktop: ({ t, serviceList, setServiceList, allSchedules, showReturnTripModal, filterArrData, isBlankTicket, operatorId, filtersArray, setFiltersArray, metaData, busTerminals, setTypes, colors, icons, translation, isTrain, isPeru, hideOperator, setCoachLoading, setCoachKey, isAllinBus, }: FilterBarProps) => React.JSX.Element;
|
|
4
4
|
export default FilterBarDesktop;
|
|
@@ -1,7 +1,42 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import commonService from "../../utils/CommonService";
|
|
3
3
|
import ServiceFilter from "./ServiceFilter";
|
|
4
|
-
const FilterBarDesktop = ({ t, serviceList, setServiceList, allSchedules, showReturnTripModal, filterArrData, isBlankTicket, operatorId, filtersArray, setFiltersArray, metaData, busTerminals, setTypes, colors, icons, translation, isTrain, isPeru, hideOperator, setCoachLoading, setCoachKey, }) => {
|
|
4
|
+
const FilterBarDesktop = ({ t, serviceList, setServiceList, allSchedules, showReturnTripModal, filterArrData, isBlankTicket, operatorId, filtersArray, setFiltersArray, metaData, busTerminals, setTypes, colors, icons, translation, isTrain, isPeru, hideOperator, setCoachLoading, setCoachKey, isAllinBus, }) => {
|
|
5
|
+
const getEnrichedFilters = () => {
|
|
6
|
+
if (!isAllinBus || !(allSchedules === null || allSchedules === void 0 ? void 0 : allSchedules.length))
|
|
7
|
+
return filtersArray;
|
|
8
|
+
const hasSpecialDeparture = filtersArray.some((f) => { var _a; return f.type === "special_departure" && ((_a = f.options) === null || _a === void 0 ? void 0 : _a.length) > 0; });
|
|
9
|
+
if (hasSpecialDeparture)
|
|
10
|
+
return filtersArray;
|
|
11
|
+
const stageMap = new Map();
|
|
12
|
+
allSchedules.forEach((schedule) => {
|
|
13
|
+
var _a, _b, _c;
|
|
14
|
+
if ((_a = schedule.stage_details_arr) === null || _a === void 0 ? void 0 : _a.length) {
|
|
15
|
+
const stageObj = schedule.stage_details_arr[0];
|
|
16
|
+
const stageId = Object.keys(stageObj)[0];
|
|
17
|
+
const stageName = (_c = (_b = stageObj[stageId]) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.split(", ")[0];
|
|
18
|
+
if (stageId && stageName) {
|
|
19
|
+
stageMap.set(stageId, stageName);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
if (stageMap.size === 0)
|
|
24
|
+
return filtersArray;
|
|
25
|
+
const specialDeptOptions = Array.from(stageMap.entries()).map(([id, name]) => ({
|
|
26
|
+
label: name,
|
|
27
|
+
value: id,
|
|
28
|
+
active: false,
|
|
29
|
+
}));
|
|
30
|
+
return [
|
|
31
|
+
...filtersArray,
|
|
32
|
+
{
|
|
33
|
+
type: "special_departure",
|
|
34
|
+
title: "SPECIAL_DEPARTURE",
|
|
35
|
+
options: specialDeptOptions,
|
|
36
|
+
},
|
|
37
|
+
];
|
|
38
|
+
};
|
|
39
|
+
const enrichedFilters = getEnrichedFilters();
|
|
5
40
|
const filterBy = (filters) => {
|
|
6
41
|
try {
|
|
7
42
|
let routes = allSchedules;
|
|
@@ -179,12 +214,12 @@ const FilterBarDesktop = ({ t, serviceList, setServiceList, allSchedules, showRe
|
|
|
179
214
|
const onFilterSelected = (key, i) => {
|
|
180
215
|
setCoachLoading(null);
|
|
181
216
|
setCoachKey(null);
|
|
182
|
-
let filters = commonService.copyObject(
|
|
217
|
+
let filters = commonService.copyObject(enrichedFilters);
|
|
183
218
|
filters[key].options[i].active = !filters[key].options[i].active;
|
|
184
219
|
filterBy(filters);
|
|
185
220
|
setFiltersArray(filters);
|
|
186
221
|
};
|
|
187
|
-
return (React.createElement(ServiceFilter, { filtersArray:
|
|
222
|
+
return (React.createElement(ServiceFilter, { filtersArray: enrichedFilters, onFilterSelected: onFilterSelected, onFilterClear: (val) => {
|
|
188
223
|
setFiltersArray(val);
|
|
189
224
|
filterBy(val);
|
|
190
225
|
}, showReturnTripModal: showReturnTripModal, initialOpenFilters: isBlankTicket ? ["operator"] : [], colors: colors, icons: icons, translation: translation, isTrain: isTrain, hideOperator: hideOperator, t: t }));
|
|
@@ -2,65 +2,71 @@ import React from "react";
|
|
|
2
2
|
import RatingItem from "./RatingItem";
|
|
3
3
|
const RatingHover = ({ serviceItem, isSoldOut, colors, t = (key) => key, translation, isPeru, }) => {
|
|
4
4
|
const ratingIndex = isPeru ? 7 : 6;
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
5
|
+
const handleBottomRating = isPeru ? 6 : 5;
|
|
6
|
+
const getRatingValue = (item, rIdx, keyIdx) => {
|
|
7
|
+
const details = item.operator_details[rIdx];
|
|
8
|
+
if (!details)
|
|
9
|
+
return 0;
|
|
10
|
+
const key = Object.keys(details)[keyIdx];
|
|
11
|
+
const val = parseFloat(details[key]);
|
|
12
|
+
return isNaN(val) ? 0 : +val.toFixed(1);
|
|
13
|
+
};
|
|
14
|
+
return (React.createElement("div", { className: "flex items-center relative cursor-pointer group" },
|
|
15
|
+
React.createElement("div", { className: "w-[18px] h-auto mr-[4px]" },
|
|
16
|
+
React.createElement("img", { src: serviceItem.icons.rating, alt: "origin", className: `w-[16px] h-[16px] mr-[4px] object-contain mb-[4px] ${isSoldOut ? "grayscale" : ""}` })),
|
|
17
|
+
React.createElement("span", { className: "text-[#464647] text-[13.33px]" }, typeof serviceItem.operator_details[1] === "number"
|
|
18
|
+
? serviceItem.operator_details[1].toFixed(1)
|
|
19
|
+
: serviceItem.operator_details[1]),
|
|
20
|
+
React.createElement("div", { className: "hidden group-hover:block absolute -left-[30px] z-20 top-[25px]" },
|
|
21
|
+
React.createElement("div", { className: "absolute -top-[8px] left-[30px] w-0 h-0 border-l-[8px] border-r-[8px] border-b-[8px] border-l-transparent border-r-transparent z-10", style: {
|
|
22
|
+
borderBottomColor: isSoldOut ? "#c0c0c0" : colors.bottomStripColor,
|
|
15
23
|
} }),
|
|
16
|
-
React.createElement("div", { className: "
|
|
17
|
-
|
|
24
|
+
React.createElement("div", { className: "absolute -top-[6px] left-[31px] w-0 h-0 border-l-[7px] border-r-[7px] border-b-[7px] border-l-transparent border-r-transparent z-20", style: {
|
|
25
|
+
borderBottomColor: "#fff",
|
|
26
|
+
} }),
|
|
27
|
+
React.createElement("div", { className: "rounded-[14px] bg-white border-[1px] overflow-hidden p-[18px]", style: {
|
|
28
|
+
borderColor: isSoldOut ? "#c0c0c0" : colors.bottomStripColor,
|
|
18
29
|
color: isSoldOut ? "#c0c0c0" : "",
|
|
19
30
|
} },
|
|
20
|
-
React.createElement("div", { className: "
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
serviceItem.operator_details[
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
serviceItem.operator_details[ratingIndex])[3]]).toFixed(1)
|
|
55
|
-
? +parseFloat(serviceItem.operator_details[ratingIndex][Object.keys(serviceItem.operator_details[ratingIndex] &&
|
|
56
|
-
serviceItem.operator_details[ratingIndex])[3]]).toFixed(1)
|
|
57
|
-
: 0, label: translation === null || translation === void 0 ? void 0 : translation.serviceRecommendation, isSoldOut: isSoldOut })),
|
|
58
|
-
React.createElement("div", { className: "px-1 py-2 text-center text-[12px] font9", style: {
|
|
31
|
+
React.createElement("div", { className: "flex gap-[14px]" },
|
|
32
|
+
React.createElement("div", { className: "flex flex-col items-center justify-center" },
|
|
33
|
+
React.createElement("span", { className: "text-[42px] font-bold leading-none", style: {
|
|
34
|
+
color: isSoldOut ? "#c0c0c0" : colors.bottomStripColor,
|
|
35
|
+
} }, typeof serviceItem.operator_details[1] === "number"
|
|
36
|
+
? serviceItem.operator_details[1].toFixed(1)
|
|
37
|
+
: serviceItem.operator_details[1]),
|
|
38
|
+
React.createElement("div", { className: "flex mt-[4px] gap-[1px]" }, [1, 2, 3, 4, 5].map((star) => {
|
|
39
|
+
const overall = typeof serviceItem.operator_details[1] === "number"
|
|
40
|
+
? serviceItem.operator_details[1]
|
|
41
|
+
: parseFloat(serviceItem.operator_details[1]) || 0;
|
|
42
|
+
const filled = star <= Math.floor(overall);
|
|
43
|
+
const half = !filled &&
|
|
44
|
+
star === Math.ceil(overall) &&
|
|
45
|
+
overall % 1 >= 0.3;
|
|
46
|
+
return (React.createElement("svg", { key: star, width: "14", height: "14", viewBox: "0 0 24 24", fill: filled
|
|
47
|
+
? isSoldOut
|
|
48
|
+
? "#c0c0c0"
|
|
49
|
+
: colors.bottomStripColor
|
|
50
|
+
: half
|
|
51
|
+
? "url(#halfGrad)"
|
|
52
|
+
: "none", stroke: isSoldOut ? "#c0c0c0" : colors.bottomStripColor, strokeWidth: "2" },
|
|
53
|
+
half && (React.createElement("defs", null,
|
|
54
|
+
React.createElement("linearGradient", { id: "halfGrad" },
|
|
55
|
+
React.createElement("stop", { offset: "50%", stopColor: isSoldOut ? "#c0c0c0" : colors.bottomStripColor }),
|
|
56
|
+
React.createElement("stop", { offset: "50%", stopColor: "transparent" })))),
|
|
57
|
+
React.createElement("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })));
|
|
58
|
+
}))),
|
|
59
|
+
React.createElement("div", { className: "flex flex-col gap-[6px] justify-center" },
|
|
60
|
+
React.createElement(RatingItem, { rating: getRatingValue(serviceItem, ratingIndex, 0), label: (translation === null || translation === void 0 ? void 0 : translation.busQuality) || "", isSoldOut: isSoldOut }),
|
|
61
|
+
React.createElement(RatingItem, { rating: getRatingValue(serviceItem, ratingIndex, 1), label: (translation === null || translation === void 0 ? void 0 : translation.punctuality) || "", isSoldOut: isSoldOut }),
|
|
62
|
+
React.createElement(RatingItem, { rating: getRatingValue(serviceItem, ratingIndex, 2), label: (translation === null || translation === void 0 ? void 0 : translation.serviceQuality) || "", isSoldOut: isSoldOut }),
|
|
63
|
+
React.createElement(RatingItem, { rating: getRatingValue(serviceItem, ratingIndex, 3), label: (translation === null || translation === void 0 ? void 0 : translation.serviceRecommendation) || "", isSoldOut: isSoldOut }))),
|
|
64
|
+
React.createElement("div", { className: "px-[10px] py-[8px] text-center text-[12px] rounded-full mt-[10px]", style: {
|
|
59
65
|
backgroundColor: isSoldOut ? "#f5f5f5" : colors.ratingBottomColor,
|
|
60
66
|
color: isSoldOut ? "#c0c0c1" : "#ff8f45",
|
|
61
|
-
} },
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
67
|
+
} },
|
|
68
|
+
React.createElement("span", null,
|
|
69
|
+
`${translation === null || translation === void 0 ? void 0 : translation.ratingMouseOverCalculationText} ${Object.values(serviceItem.operator_details)[handleBottomRating]} ${translation === null || translation === void 0 ? void 0 : translation.ratingMouseOverCalculationUsers}`,
|
|
70
|
+
" "))))));
|
|
65
71
|
};
|
|
66
72
|
export default RatingHover;
|
|
@@ -1,26 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
const RatingItem = ({ rating, label, isSoldOut, }) => {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
const getColorClass = () => {
|
|
7
|
-
const percent = parseInt(percentage);
|
|
8
|
-
if (percent < 30)
|
|
9
|
-
return "red";
|
|
10
|
-
if (percent < 50)
|
|
11
|
-
return "yellow";
|
|
12
|
-
if (percent < 80)
|
|
13
|
-
return "orange";
|
|
14
|
-
return "green";
|
|
15
|
-
};
|
|
16
|
-
const colorClass = getColorClass();
|
|
17
|
-
return (React.createElement("div", { className: "rating_item flex items-center mb-2", style: { opacity: isSoldOut ? 0.5 : 1 } },
|
|
18
|
-
React.createElement("div", { className: "rating_circle relative" },
|
|
19
|
-
React.createElement("div", { className: `c100 small p${percentage} ${colorClass}` },
|
|
20
|
-
React.createElement("span", { className: "text-[#464647] font-medium text-[12px]" }, rating.toFixed(1)),
|
|
21
|
-
React.createElement("div", { className: "slice" },
|
|
22
|
-
React.createElement("div", { className: "bar" }),
|
|
23
|
-
React.createElement("div", { className: "fill" })))),
|
|
24
|
-
React.createElement("span", { className: "text-[#464647] text-[13.33px] ml-[10px]" }, label)));
|
|
3
|
+
return (React.createElement("div", { className: "flex items-center gap-[6px]", style: { opacity: isSoldOut ? 0.5 : 1 } },
|
|
4
|
+
React.createElement("span", { className: "text-[#464647] bold-text text-[12px]" }, rating.toFixed(1)),
|
|
5
|
+
React.createElement("span", { className: "text-[#464647] text-[12px] font-normal" }, label)));
|
|
25
6
|
};
|
|
26
7
|
export default RatingItem;
|
|
@@ -22,7 +22,6 @@ import opsitesPriorityStageAnimation from "../../assets/images/anims/service_lis
|
|
|
22
22
|
import bombAnimation from "../../assets/images/anims/service_list/bomb.json";
|
|
23
23
|
import RatingBlock from "../../ui/RatingBlock";
|
|
24
24
|
import DurationBlock from "../../ui/DurationBlock";
|
|
25
|
-
import DirectoBlock from "../../ui/DirectoBlock";
|
|
26
25
|
import PetBlock from "../../ui/PetBlock";
|
|
27
26
|
import FlexibleBlock from "../../ui/FlexibleBlock";
|
|
28
27
|
import AmenitiesBlock from "../../ui/AmenitiesBlock";
|
|
@@ -63,6 +62,7 @@ const ANIMATION_MAP = {
|
|
|
63
62
|
},
|
|
64
63
|
};
|
|
65
64
|
function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t = (key) => key, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, }) {
|
|
65
|
+
console.log("🚀 ~ ServiceItemPB ~ serviceItem:", serviceItem);
|
|
66
66
|
const startViewerCount = (node) => {
|
|
67
67
|
if (!node || !viewersConfig)
|
|
68
68
|
return;
|
|
@@ -70,10 +70,14 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
70
70
|
if (prevId)
|
|
71
71
|
clearInterval(Number(prevId));
|
|
72
72
|
const { min, max, interval = 5000 } = viewersConfig;
|
|
73
|
-
const
|
|
74
|
-
|
|
73
|
+
const clamp = (v) => Math.min(max, Math.max(min, v));
|
|
74
|
+
const initialValue = Math.floor(Math.random() * (max - min + 1)) + min;
|
|
75
|
+
node.textContent = String(initialValue);
|
|
75
76
|
const id = setInterval(() => {
|
|
76
|
-
node.textContent
|
|
77
|
+
const current = Number(node.textContent) || initialValue;
|
|
78
|
+
const delta = Math.ceil(current * 0.2);
|
|
79
|
+
const next = current + Math.floor(Math.random() * (2 * delta + 1)) - delta;
|
|
80
|
+
node.textContent = String(clamp(Math.round(next)));
|
|
77
81
|
}, interval);
|
|
78
82
|
node.dataset.viewerId = String(id);
|
|
79
83
|
};
|
|
@@ -196,7 +200,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
196
200
|
}
|
|
197
201
|
onBookButtonPress();
|
|
198
202
|
};
|
|
199
|
-
const countdownSeconds =
|
|
203
|
+
const countdownSeconds = 599;
|
|
200
204
|
const startCountdown = (node) => {
|
|
201
205
|
if (!node)
|
|
202
206
|
return;
|
|
@@ -205,10 +209,9 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
205
209
|
clearInterval(Number(prevId));
|
|
206
210
|
let remaining = countdownSeconds;
|
|
207
211
|
const formatTime = (totalSecs) => {
|
|
208
|
-
const
|
|
209
|
-
const m = Math.floor((totalSecs % 3600) / 60);
|
|
212
|
+
const m = Math.floor(totalSecs / 60);
|
|
210
213
|
const s = totalSecs % 60;
|
|
211
|
-
return `${String(
|
|
214
|
+
return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
|
|
212
215
|
};
|
|
213
216
|
node.textContent = formatTime(remaining);
|
|
214
217
|
const id = setInterval(() => {
|
|
@@ -226,7 +229,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
226
229
|
key: "amenities",
|
|
227
230
|
width: "20%",
|
|
228
231
|
condition: true,
|
|
229
|
-
render: (React.createElement(AmenitiesBlock, { serviceItem: serviceItem, metaData: metaData, isSoldOut: isSoldOut, colors: colors,
|
|
232
|
+
render: (React.createElement(AmenitiesBlock, { serviceItem: serviceItem, metaData: metaData, isSoldOut: isSoldOut, colors: colors, getAnimationIcon: getAnimationIcon, getAmenityName: CommonService.getAmenityName, SvgAmenities: SvgAmenities, isPeru: isPeru })),
|
|
230
233
|
},
|
|
231
234
|
{
|
|
232
235
|
key: "duration",
|
|
@@ -234,12 +237,19 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
234
237
|
condition: serviceItem.duration,
|
|
235
238
|
render: (React.createElement(DurationBlock, { serviceItem: serviceItem, translation: translation, renderIcon: renderIcon, isSoldOut: isSoldOut, colors: colors })),
|
|
236
239
|
},
|
|
237
|
-
{
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
240
|
+
// {
|
|
241
|
+
// key: "directo",
|
|
242
|
+
// width: "12%",
|
|
243
|
+
// condition: serviceItem?.is_direct_trip === true,
|
|
244
|
+
// render: (
|
|
245
|
+
// <DirectoBlock
|
|
246
|
+
// translation={translation}
|
|
247
|
+
// getAnimationIcon={getAnimationIcon}
|
|
248
|
+
// colors={colors}
|
|
249
|
+
// isSoldOut={isSoldOut}
|
|
250
|
+
// />
|
|
251
|
+
// ),
|
|
252
|
+
// },
|
|
243
253
|
{
|
|
244
254
|
key: "pet",
|
|
245
255
|
width: "20%",
|
|
@@ -283,7 +293,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
283
293
|
React.createElement("div", {
|
|
284
294
|
// className="flex items-center justify-center m-[auto]"
|
|
285
295
|
className: "" },
|
|
286
|
-
React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `h-
|
|
296
|
+
React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `h-[30px] w-[150px] ${isSoldOut ? "grayscale" : ""}` }),
|
|
287
297
|
isCiva ? (React.createElement("div", { className: "text-[13.33px] black-text ml-2" }, serviceItem.operator_details[2])) : null),
|
|
288
298
|
React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru })),
|
|
289
299
|
React.createElement(DateTimeSection, { serviceItem: serviceItem, isSoldOut: isSoldOut, isCiva: isCiva, isLinatal: isLinatal, removeArrivalTime: removeArrivalTime, orignLabel: orignLabel, destinationLabel: destinationLabel, busStage: busStage, metaData: metaData, colors: colors }),
|
|
@@ -344,7 +354,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
344
354
|
" ",
|
|
345
355
|
React.createElement("span", null,
|
|
346
356
|
" ",
|
|
347
|
-
viewersConfig.label || " están viendo este viaje")))))),
|
|
357
|
+
(viewersConfig === null || viewersConfig === void 0 ? void 0 : viewersConfig.label) || " están viendo este viaje")))))),
|
|
348
358
|
React.createElement("div", { className: "absolute -top-[11px] left-0 w-full flex items-center justify-end gap-[12px] pr-[15px] z-10 " },
|
|
349
359
|
showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-10`, style: {
|
|
350
360
|
backgroundColor: isSoldOut
|
|
@@ -365,6 +375,15 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
365
375
|
// animationData={getAnimationIcon(connectingServiceIcon)}
|
|
366
376
|
width: "14px", height: "14px" }),
|
|
367
377
|
React.createElement("div", null, "Conexión"))),
|
|
378
|
+
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] text-white px-[14px] rounded-[38px] text-[12.5px] z-20 `, style: {
|
|
379
|
+
backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
|
|
380
|
+
} },
|
|
381
|
+
React.createElement(LottiePlayer
|
|
382
|
+
// animationData={serviceItem.icons.directoAnim}
|
|
383
|
+
, {
|
|
384
|
+
// animationData={serviceItem.icons.directoAnim}
|
|
385
|
+
animationData: getAnimationIcon("directoAnim"), width: "14px", height: "14px" }),
|
|
386
|
+
React.createElement("div", null, translation === null || translation === void 0 ? void 0 : translation.directService))),
|
|
368
387
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] text-white px-[14px] rounded-[38px] text-[12.5px] z-20 `, style: {
|
|
369
388
|
backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
|
|
370
389
|
} },
|
|
@@ -28,14 +28,18 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
28
28
|
if (prevId)
|
|
29
29
|
clearInterval(Number(prevId));
|
|
30
30
|
const { min, max, interval = 5000 } = viewersConfig;
|
|
31
|
-
const
|
|
32
|
-
|
|
31
|
+
const clamp = (v) => Math.min(max, Math.max(min, v));
|
|
32
|
+
const initialValue = Math.floor(Math.random() * (max - min + 1)) + min;
|
|
33
|
+
node.textContent = String(initialValue);
|
|
33
34
|
const id = setInterval(() => {
|
|
34
|
-
node.textContent
|
|
35
|
+
const current = Number(node.textContent) || initialValue;
|
|
36
|
+
const delta = Math.ceil(current * 0.2);
|
|
37
|
+
const next = current + Math.floor(Math.random() * (2 * delta + 1)) - delta;
|
|
38
|
+
node.textContent = String(clamp(Math.round(next)));
|
|
35
39
|
}, interval);
|
|
36
40
|
node.dataset.viewerId = String(id);
|
|
37
41
|
};
|
|
38
|
-
const countdownSeconds =
|
|
42
|
+
const countdownSeconds = 599;
|
|
39
43
|
const startCountdown = (node) => {
|
|
40
44
|
if (!node)
|
|
41
45
|
return;
|
|
@@ -44,10 +48,9 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
44
48
|
clearInterval(Number(prevId));
|
|
45
49
|
let remaining = countdownSeconds;
|
|
46
50
|
const formatTime = (totalSecs) => {
|
|
47
|
-
const
|
|
48
|
-
const m = Math.floor((totalSecs % 3600) / 60);
|
|
51
|
+
const m = Math.floor(totalSecs / 60);
|
|
49
52
|
const s = totalSecs % 60;
|
|
50
|
-
return `${String(
|
|
53
|
+
return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
|
|
51
54
|
};
|
|
52
55
|
node.textContent = formatTime(remaining);
|
|
53
56
|
const id = setInterval(() => {
|
|
@@ -111,7 +114,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
111
114
|
// className={`relative ${
|
|
112
115
|
// serviceItem.offer_text ? "mb-[55px]" : "mb-[14px]"
|
|
113
116
|
// }
|
|
114
|
-
className: `relative ${serviceItem.offer_text ? "" : "mb-[
|
|
117
|
+
className: `relative ${serviceItem.offer_text ? "mb-[20px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
|
|
115
118
|
isConexion ||
|
|
116
119
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
|
|
117
120
|
showTopLabel
|
|
@@ -158,6 +161,12 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
158
161
|
React.createElement("div", { className: isSoldOut ? "grayscale" : "" },
|
|
159
162
|
React.createElement(LottiePlayer, { animationData: serviceItem.icons.priorityStageAnim, width: "18px", height: "18px" })),
|
|
160
163
|
React.createElement("div", { className: isSoldOut ? "text-[#bbb]" : `text-[${colors.topLabelColor}]` }, showTopLabel))),
|
|
164
|
+
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) === true && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20 `, style: {
|
|
165
|
+
backgroundColor: isSoldOut ? "#ddd" : colors.tooltipBgColor,
|
|
166
|
+
color: isSoldOut ? "#bbb" : colors.directoColor,
|
|
167
|
+
} },
|
|
168
|
+
React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "16px", height: "16px" }),
|
|
169
|
+
React.createElement("div", { className: "ml-[5px]" }, "Directo"))),
|
|
161
170
|
isConexion && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[11px] z-20 ${isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]`}`, style: {
|
|
162
171
|
backgroundColor: !isSoldOut && colors.ratingBottomColor,
|
|
163
172
|
} },
|