kupos-ui-components-lib 8.0.10 → 9.0.2
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/ServiceItem/PeruServiceItemDesktop.d.ts +1 -1
- package/dist/components/ServiceItem/PeruServiceItemDesktop.js +84 -361
- package/dist/components/ServiceItem/ServiceItemDesktop.d.ts +1 -1
- package/dist/components/ServiceItem/ServiceItemDesktop.js +3 -3
- package/dist/components/ServiceItem/types.d.ts +2 -0
- package/dist/styles.css +0 -17
- package/package.json +1 -1
- package/src/components/ServiceItem/PeruServiceItemDesktop.tsx +231 -671
- package/src/components/ServiceItem/ServiceItemDesktop.tsx +3 -1
- package/src/components/ServiceItem/types.ts +5 -3
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { ServiceItemProps } from "./types";
|
|
3
|
-
declare function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isSeatIcon, showAvailableSeats, isPeru, siteType, t, }: ServiceItemProps & {
|
|
3
|
+
declare function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isSeatIcon, showAvailableSeats, isPeru, siteType, isAllinBus, t, }: ServiceItemProps & {
|
|
4
4
|
currencySign?: string;
|
|
5
5
|
}): React.ReactElement;
|
|
6
6
|
export default PeruServiceItemDesktop;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import DateService from "../../utils/DateService";
|
|
3
3
|
import CommonService from "../../utils/CommonService";
|
|
4
|
-
import RatingHover from "./RatingHover";
|
|
5
4
|
import ModalEventManager from "../../utils/ModalEventManager";
|
|
6
5
|
import InternationalServicePopupBody from "../InternationalServicePopupBody";
|
|
7
6
|
import LottiePlayer from "../../assets/LottiePlayer";
|
|
@@ -29,9 +28,15 @@ import linatalDirectoAnimation from "../../assets/images/anims/service_list/dire
|
|
|
29
28
|
import linatalPriorityStageAnimation from "../../assets/images/anims/service_list/priority_stage.json";
|
|
30
29
|
import linatalPetFriendlyAnimation from "../../assets/images/anims/service_list/pet_friendly.json";
|
|
31
30
|
import linatalLocationAnimation from "../../assets/images/anims/service_list/location.json";
|
|
31
|
+
import StageTooltip from "../../ui/StagesTooltip";
|
|
32
|
+
import RatingBlock from "../../ui/RatingBlock";
|
|
33
|
+
import DurationBlock from "../../ui/DurationBlock";
|
|
34
|
+
import PetBlock from "../../ui/PetBlock";
|
|
35
|
+
import FlexibleBlock from "../../ui/FlexibleBlock";
|
|
36
|
+
import AmenitiesBlock from "../../ui/AmenitiesBlock";
|
|
32
37
|
const SEAT_EXCEPTIONS = ["Asiento mascota"];
|
|
33
|
-
function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isSeatIcon, showAvailableSeats, isPeru, siteType, t = (key) => key, }) {
|
|
34
|
-
var _a, _b, _c;
|
|
38
|
+
function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isSeatIcon, showAvailableSeats, isPeru, siteType, isAllinBus, t = (key) => key, }) {
|
|
39
|
+
var _a, _b, _c, _d;
|
|
35
40
|
const animationMap = {
|
|
36
41
|
promoAnim: {
|
|
37
42
|
kupos: promoAnimation,
|
|
@@ -82,7 +87,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
|
|
|
82
87
|
const amenityKey = (_a = name === null || name === void 0 ? void 0 : name.toLowerCase()) === null || _a === void 0 ? void 0 : _a.replace(/\s/g, "_");
|
|
83
88
|
const getIconPath = () => {
|
|
84
89
|
const amenityFileName = `${amenityKey}.png`;
|
|
85
|
-
const imagePath = getAmenitiesImage(amenityFileName);
|
|
90
|
+
const imagePath = CommonService.getAmenitiesImage(amenityFileName, serviceItem);
|
|
86
91
|
if (!imagePath) {
|
|
87
92
|
return `/public/images/amenities/${amenityKey}.svg`;
|
|
88
93
|
}
|
|
@@ -93,144 +98,6 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
|
|
|
93
98
|
filter: color === "white" ? "brightness(0) invert(1)" : "",
|
|
94
99
|
}, className: `object-contain ${moreAnemities ? "w-[16px] h-[16px]" : "w-[16px] h-[16px]"}` }));
|
|
95
100
|
};
|
|
96
|
-
const getAmenitiesImage = (name) => {
|
|
97
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
|
|
98
|
-
switch (name) {
|
|
99
|
-
case "air_condtion.png": {
|
|
100
|
-
return (_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _a === void 0 ? void 0 : _a.airConditionIcon;
|
|
101
|
-
}
|
|
102
|
-
case "baggage.png": {
|
|
103
|
-
return (_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _b === void 0 ? void 0 : _b.baggageIcon;
|
|
104
|
-
}
|
|
105
|
-
case "charging_plug.png": {
|
|
106
|
-
return (_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _c === void 0 ? void 0 : _c.chargingIcon;
|
|
107
|
-
}
|
|
108
|
-
case "coffee.png": {
|
|
109
|
-
return (_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _d === void 0 ? void 0 : _d.coffeeIcon;
|
|
110
|
-
}
|
|
111
|
-
case "food_new_icon.png": {
|
|
112
|
-
return (_e = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _e === void 0 ? void 0 : _e.foodIcon;
|
|
113
|
-
}
|
|
114
|
-
case "gaming.png": {
|
|
115
|
-
return (_f = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _f === void 0 ? void 0 : _f.gamingIcon;
|
|
116
|
-
}
|
|
117
|
-
case "handicap.png": {
|
|
118
|
-
return (_g = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _g === void 0 ? void 0 : _g.handicapIcon;
|
|
119
|
-
}
|
|
120
|
-
case "mobile_ticket.png": {
|
|
121
|
-
return (_h = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _h === void 0 ? void 0 : _h.mobileTicketIcon;
|
|
122
|
-
}
|
|
123
|
-
case "movie.png": {
|
|
124
|
-
return (_j = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _j === void 0 ? void 0 : _j.movieIcon;
|
|
125
|
-
}
|
|
126
|
-
case "restrooms.png": {
|
|
127
|
-
return (_k = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _k === void 0 ? void 0 : _k.restroomsIcon;
|
|
128
|
-
}
|
|
129
|
-
case "snacks_new.png": {
|
|
130
|
-
return (_l = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _l === void 0 ? void 0 : _l.snackIcon;
|
|
131
|
-
}
|
|
132
|
-
case "wifi.png": {
|
|
133
|
-
return (_m = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _m === void 0 ? void 0 : _m.wifiIcon;
|
|
134
|
-
}
|
|
135
|
-
case "cortina_divisoria.png": {
|
|
136
|
-
return (_o = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _o === void 0 ? void 0 : _o.cortinaIcon;
|
|
137
|
-
}
|
|
138
|
-
case "frazada.png": {
|
|
139
|
-
return (_p = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _p === void 0 ? void 0 : _p.frazaIcon;
|
|
140
|
-
}
|
|
141
|
-
case "blanket.png": {
|
|
142
|
-
return (_q = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _q === void 0 ? void 0 : _q.blankketIcon;
|
|
143
|
-
}
|
|
144
|
-
case "cctv.png": {
|
|
145
|
-
return (_r = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _r === void 0 ? void 0 : _r.cctvIcon;
|
|
146
|
-
}
|
|
147
|
-
case "cup_holder.png": {
|
|
148
|
-
return (_s = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _s === void 0 ? void 0 : _s.cupHolderIcon;
|
|
149
|
-
}
|
|
150
|
-
case "emergency_contact.png": {
|
|
151
|
-
return (_t = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _t === void 0 ? void 0 : _t.emergencyContactIcon;
|
|
152
|
-
}
|
|
153
|
-
case "emergency_exit.png": {
|
|
154
|
-
return (_u = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _u === void 0 ? void 0 : _u.emergencyExitIcon;
|
|
155
|
-
}
|
|
156
|
-
case "fire_extinguisher.png": {
|
|
157
|
-
return (_v = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _v === void 0 ? void 0 : _v.fireExtinguisherIcon;
|
|
158
|
-
}
|
|
159
|
-
case "reading_light.png": {
|
|
160
|
-
return (_w = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _w === void 0 ? void 0 : _w.readingLIghtIcon;
|
|
161
|
-
}
|
|
162
|
-
case "seat_belt.png": {
|
|
163
|
-
return (_x = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _x === void 0 ? void 0 : _x.sercurityBeltIcon;
|
|
164
|
-
}
|
|
165
|
-
case "service_on_board.png": {
|
|
166
|
-
return (_y = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _y === void 0 ? void 0 : _y.serviceOnBoardIcon;
|
|
167
|
-
}
|
|
168
|
-
case "personal_tv.png": {
|
|
169
|
-
return (_z = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _z === void 0 ? void 0 : _z.personalTVIcon;
|
|
170
|
-
}
|
|
171
|
-
case "pet_admission.png": {
|
|
172
|
-
return (_0 = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _0 === void 0 ? void 0 : _0.petAdmissionIcon;
|
|
173
|
-
}
|
|
174
|
-
case "music.png": {
|
|
175
|
-
return (_1 = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _1 === void 0 ? void 0 : _1.musicIcon;
|
|
176
|
-
}
|
|
177
|
-
default: {
|
|
178
|
-
return "";
|
|
179
|
-
}
|
|
180
|
-
}
|
|
181
|
-
};
|
|
182
|
-
const getAmenityName = (rawAmenity) => {
|
|
183
|
-
switch (rawAmenity) {
|
|
184
|
-
case "mobile ticket":
|
|
185
|
-
return "Ticket móvil";
|
|
186
|
-
case "charging plug":
|
|
187
|
-
return "Cargador";
|
|
188
|
-
case "wifi":
|
|
189
|
-
return "WiFi";
|
|
190
|
-
case "movie":
|
|
191
|
-
return "Entretenimiento";
|
|
192
|
-
case "baggage":
|
|
193
|
-
return "Equipaje";
|
|
194
|
-
case "Restrooms":
|
|
195
|
-
return "Baños";
|
|
196
|
-
case "air condtion":
|
|
197
|
-
return "Aire acondicionado";
|
|
198
|
-
case "snacks new":
|
|
199
|
-
return "Snacks";
|
|
200
|
-
case "coffee":
|
|
201
|
-
return "Café";
|
|
202
|
-
case "cortina divisoria":
|
|
203
|
-
return "Cortina Divisoria";
|
|
204
|
-
case "frazada":
|
|
205
|
-
return "Frazada";
|
|
206
|
-
case "blanket":
|
|
207
|
-
return "Mantas";
|
|
208
|
-
case "cctv":
|
|
209
|
-
return "Cámara de seguridad";
|
|
210
|
-
case "cup holder":
|
|
211
|
-
return "Portavasos";
|
|
212
|
-
case "emergency contact":
|
|
213
|
-
return "Contacto de emergencia";
|
|
214
|
-
case "emergency exit":
|
|
215
|
-
return "Salida de emergencia";
|
|
216
|
-
case "fire extinguisher":
|
|
217
|
-
return "Extintor de incendio";
|
|
218
|
-
case "reading light":
|
|
219
|
-
return "Luz de lectura";
|
|
220
|
-
case "seat belt":
|
|
221
|
-
return "Cinturón de seguridad";
|
|
222
|
-
case "service on board":
|
|
223
|
-
return "Servicio a bordo";
|
|
224
|
-
case "personal tv":
|
|
225
|
-
return "TV personal";
|
|
226
|
-
case "pet admission":
|
|
227
|
-
return "Admisión de mascotas";
|
|
228
|
-
case "music":
|
|
229
|
-
return "Música";
|
|
230
|
-
default:
|
|
231
|
-
return rawAmenity;
|
|
232
|
-
}
|
|
233
|
-
};
|
|
234
101
|
const labelId = typeof serviceItem.boarding_stages === "string"
|
|
235
102
|
? serviceItem.boarding_stages.split("|")[0]
|
|
236
103
|
: "";
|
|
@@ -238,51 +105,6 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
|
|
|
238
105
|
busStage[labelId] &&
|
|
239
106
|
busStage[labelId].split("|")[1] === "true" &&
|
|
240
107
|
busStage[labelId].split("|")[0];
|
|
241
|
-
const hideBoardingTime = (serviceItemApiType) => {
|
|
242
|
-
var _a;
|
|
243
|
-
let exceptions = (_a = metaData === null || metaData === void 0 ? void 0 : metaData.sibus_stage_api_types) !== null && _a !== void 0 ? _a : [];
|
|
244
|
-
let found = false;
|
|
245
|
-
if (exceptions && exceptions.length) {
|
|
246
|
-
found = exceptions.includes(serviceItemApiType);
|
|
247
|
-
}
|
|
248
|
-
return found;
|
|
249
|
-
};
|
|
250
|
-
const renderStages = (stageData, direction = 1, terminals = null, hideTime = false) => {
|
|
251
|
-
if (typeof stageData === "string") {
|
|
252
|
-
const arr = direction === 1 ? stageData.split(",") : stageData.split(",");
|
|
253
|
-
const formattedStages = [];
|
|
254
|
-
for (let i = 0; i < arr.length; i++) {
|
|
255
|
-
let terminal = arr[i].split("||")[1];
|
|
256
|
-
let locationName = terminals[arr[i].split("||")[0].split("|")[0]] || "";
|
|
257
|
-
let time = arr[i].split("||")[0].split("|")[1];
|
|
258
|
-
if (direction !== 1 && i > 0) {
|
|
259
|
-
}
|
|
260
|
-
else {
|
|
261
|
-
formattedStages.push(`${locationName} ${time}`);
|
|
262
|
-
}
|
|
263
|
-
}
|
|
264
|
-
const extractTiming = (location) => {
|
|
265
|
-
const timingIndex = location.lastIndexOf(" ") + 1;
|
|
266
|
-
return location.substring(timingIndex);
|
|
267
|
-
};
|
|
268
|
-
const compareTimings = (locationA, locationB) => {
|
|
269
|
-
const timingA = extractTiming(locationA);
|
|
270
|
-
const timingB = extractTiming(locationB);
|
|
271
|
-
return timingA.localeCompare(timingB);
|
|
272
|
-
};
|
|
273
|
-
const sortedStages = hideTime
|
|
274
|
-
? [...formattedStages].sort()
|
|
275
|
-
: [...formattedStages].sort(compareTimings);
|
|
276
|
-
return (React.createElement("div", { className: "flex flex-col space-y-3 text-justify gap-[4px]" }, sortedStages.map((item, key) => (React.createElement("div", { key: key, className: "font-normal", style: { fontWeight: 400 } }, hideTime
|
|
277
|
-
? item === null || item === void 0 ? void 0 : item.split("|")[0]
|
|
278
|
-
: item
|
|
279
|
-
.replace(/false/g, "")
|
|
280
|
-
.replace("true", "")
|
|
281
|
-
.replace("|", " |")
|
|
282
|
-
.replace("||", " |"))))));
|
|
283
|
-
}
|
|
284
|
-
return null;
|
|
285
|
-
};
|
|
286
108
|
let isSoldOut = serviceItem.available_seats <= 0;
|
|
287
109
|
const renderIcon = (iconKey, size = "14px") => {
|
|
288
110
|
var _a;
|
|
@@ -337,19 +159,6 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
|
|
|
337
159
|
const getNumberOfSeats = () => {
|
|
338
160
|
return serviceItem.seat_types.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
|
|
339
161
|
};
|
|
340
|
-
// Helper function to truncate seat labels with more than 2 words
|
|
341
|
-
const truncateSeatLabel = (label) => {
|
|
342
|
-
if (typeof label !== "string")
|
|
343
|
-
return String(label);
|
|
344
|
-
// Don't truncate if label contains parentheses (e.g., "Cama (180°)")
|
|
345
|
-
if (label.includes("("))
|
|
346
|
-
return label;
|
|
347
|
-
const words = label.trim().split(/\s+/);
|
|
348
|
-
if (words.length <= 2)
|
|
349
|
-
return label;
|
|
350
|
-
// Take first 2 words + first letter of 3rd word + "..."
|
|
351
|
-
return `${words[0]} ${words[1]} ${words[2].charAt(0)}...`;
|
|
352
|
-
};
|
|
353
162
|
// Seat type icon logic
|
|
354
163
|
const getSeatTypeIcon = (seatLabel) => {
|
|
355
164
|
var _a, _b, _c, _d;
|
|
@@ -375,7 +184,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
|
|
|
375
184
|
marginBottom: "2px",
|
|
376
185
|
} })),
|
|
377
186
|
typeof val.label === "string" || typeof val.label === "number"
|
|
378
|
-
? truncateSeatLabel(val.label)
|
|
187
|
+
? CommonService.truncateSeatLabel(val.label)
|
|
379
188
|
: null)));
|
|
380
189
|
}
|
|
381
190
|
return sortedSeatTypes.map((val, key) => SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("span", { key: key, className: `flex items-center justify-between text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
|
|
@@ -387,7 +196,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
|
|
|
387
196
|
marginBottom: "2px",
|
|
388
197
|
} })),
|
|
389
198
|
typeof val.label === "string" || typeof val.label === "number"
|
|
390
|
-
? truncateSeatLabel(val.label)
|
|
199
|
+
? CommonService.truncateSeatLabel(val.label)
|
|
391
200
|
: null)));
|
|
392
201
|
};
|
|
393
202
|
const getSeatPrice = () => {
|
|
@@ -492,11 +301,55 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
|
|
|
492
301
|
const onBookButtonPressHandler = () => {
|
|
493
302
|
onBookButtonPress();
|
|
494
303
|
};
|
|
304
|
+
const extractStage = (stageArr, index) => {
|
|
305
|
+
const stageObj = stageArr[index];
|
|
306
|
+
const key = Object.keys(stageObj)[0];
|
|
307
|
+
return stageObj[key][0].split(", ")[0];
|
|
308
|
+
};
|
|
309
|
+
const boardingName = ((_a = serviceItem.stage_details_arr) === null || _a === void 0 ? void 0 : _a.length)
|
|
310
|
+
? extractStage(serviceItem.stage_details_arr, 0)
|
|
311
|
+
: null;
|
|
312
|
+
const dropoffName = ((_b = serviceItem.stage_details_arr) === null || _b === void 0 ? void 0 : _b.length)
|
|
313
|
+
? extractStage(serviceItem.stage_details_arr, 1)
|
|
314
|
+
: null;
|
|
315
|
+
const items = [
|
|
316
|
+
{
|
|
317
|
+
key: "rating",
|
|
318
|
+
width: "30%",
|
|
319
|
+
render: (React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation })),
|
|
320
|
+
},
|
|
321
|
+
{
|
|
322
|
+
key: "duration",
|
|
323
|
+
width: "20%",
|
|
324
|
+
condition: serviceItem.duration,
|
|
325
|
+
render: (React.createElement(DurationBlock, { serviceItem: serviceItem, translation: translation, renderIcon: renderIcon, isSoldOut: isSoldOut, colors: colors })),
|
|
326
|
+
},
|
|
327
|
+
{
|
|
328
|
+
key: "pet",
|
|
329
|
+
width: "20%",
|
|
330
|
+
condition: serviceItem.pet_seat_info &&
|
|
331
|
+
Object.keys(serviceItem.pet_seat_info).length > 0,
|
|
332
|
+
render: (React.createElement(PetBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, isSoldOut: isSoldOut })),
|
|
333
|
+
},
|
|
334
|
+
{
|
|
335
|
+
key: "flexible",
|
|
336
|
+
width: "20%",
|
|
337
|
+
condition: false,
|
|
338
|
+
render: (React.createElement(FlexibleBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, serviceItem: serviceItem, isSoldOut: isSoldOut })),
|
|
339
|
+
},
|
|
340
|
+
{
|
|
341
|
+
key: "amenities",
|
|
342
|
+
width: "20%",
|
|
343
|
+
render: (React.createElement(AmenitiesBlock, { serviceItem: serviceItem, metaData: metaData, isSoldOut: isSoldOut, colors: colors, isPeru: isPeru, getAnimationIcon: getAnimationIcon, getAmenityName: CommonService.getAmenityName, SvgAmenities: SvgAmenities })),
|
|
344
|
+
},
|
|
345
|
+
];
|
|
346
|
+
const amenitiesItem = items.find((i) => i.key === "amenities");
|
|
347
|
+
const otherItems = items.filter((i) => i.key !== "amenities" && i.condition !== false);
|
|
495
348
|
return (React.createElement("div", { className: `relative ${serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
|
|
496
349
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
|
|
497
350
|
showTopLabel
|
|
498
351
|
? "mt-[24px]"
|
|
499
|
-
: "mt-[
|
|
352
|
+
: "mt-[20px]"} ` },
|
|
500
353
|
React.createElement("div", { className: "bg-white rounded-[20px] shadow-service mx-auto relative" },
|
|
501
354
|
React.createElement("div", { className: "p-[15px] pt-[20px]" },
|
|
502
355
|
React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:14%_40%_0.5%_24%_13.5%] gap-x-[2%] items-center", style: { marginTop: showTopLabel ? "8px" : "" } },
|
|
@@ -505,50 +358,32 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
|
|
|
505
358
|
React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: ` h-auto object-contain ${isSoldOut ? "grayscale" : ""}` })),
|
|
506
359
|
isCiva ? (React.createElement("div", { className: "text-[13.33px] black-text ml-2" }, serviceItem.operator_details[2])) : null),
|
|
507
360
|
React.createElement("div", { className: `min-h-[2.5rem] grid grid-cols-[0.8fr_auto_26%_1fr] gap-x-4 items-center text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}`, style: {
|
|
508
|
-
// gridTemplateRows: isCiva ? "1fr" : "1fr 1fr",
|
|
509
361
|
gridTemplateRows: "1fr",
|
|
510
|
-
// gap: isCiva ? "0" : "10px 16px"
|
|
511
362
|
} },
|
|
512
363
|
React.createElement("div", { className: "flex flex-col gap-[10px]" },
|
|
513
364
|
orignLabel ? (React.createElement("div", { className: "w-[60px] h-[20px] flex items-center bold-text" }, orignLabel)) : (React.createElement("div", { className: "h-[20px] flex items-center" },
|
|
514
|
-
React.createElement("img", { src: (
|
|
365
|
+
React.createElement("img", { src: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.origin, alt: "origin", className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}` }))),
|
|
515
366
|
!isCiva &&
|
|
516
367
|
(destinationLabel ? (React.createElement("div", { className: "w-[60px] h-[20px] flex items-center bold-text" }, destinationLabel)) : (React.createElement("div", { className: "h-[20px] flex items-center" },
|
|
517
|
-
React.createElement("img", { src: (
|
|
368
|
+
React.createElement("img", { src: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.destination, className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }))))),
|
|
518
369
|
React.createElement("div", { className: "flex flex-col gap-[10px]" },
|
|
519
|
-
React.createElement(
|
|
520
|
-
React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.travel_date)),
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
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))))))),
|
|
524
|
-
!isCiva && (React.createElement("div", { className: "h-[20px] flex items-center group relative" },
|
|
525
|
-
React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.arrival_date)),
|
|
526
|
-
serviceItem.dropoff_stages && (React.createElement("div", { className: "hidden group-hover:block absolute -top-[8px] left-[210px] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service", style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } },
|
|
527
|
-
React.createElement("div", { className: "tooltip-arrow absolute top-2 -left-[7px] w-0 h-0 \n border-t-8 border-b-8 border-r-8 \n border-t-transparent border-b-transparent", style: {
|
|
528
|
-
borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor,
|
|
529
|
-
} }),
|
|
530
|
-
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))))))))),
|
|
370
|
+
React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
|
|
371
|
+
React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.travel_date))),
|
|
372
|
+
!isCiva && (React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
|
|
373
|
+
React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.arrival_date))))),
|
|
531
374
|
React.createElement("div", { className: "flex flex-col gap-[10px] items-center" },
|
|
532
375
|
React.createElement("div", { className: "h-[20px] flex items-center justify-center" },
|
|
533
376
|
React.createElement("div", null, "\u2022")),
|
|
534
377
|
!isCiva && (React.createElement("div", { className: "h-[20px] flex items-center justify-center" }, removeArrivalTime ? null : serviceItem.arr_time ? (React.createElement("div", null, "\u2022")) : null))),
|
|
535
378
|
React.createElement("div", { className: "flex flex-col gap-[10px]" },
|
|
536
|
-
React.createElement(
|
|
537
|
-
React.createElement("div", { className: "font-[900] bold-text" }, DateService.formatTime(serviceItem.dep_time)),
|
|
538
|
-
|
|
539
|
-
React.createElement("div", { className: "tooltip-arrow absolute top-2 -left-[7px] w-0 h-0 \n border-t-8 border-b-8 border-r-8 \n border-t-transparent border-b-transparent", style: { borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } }),
|
|
540
|
-
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))))))),
|
|
541
|
-
!isCiva && (React.createElement("div", { className: "h-[20px] flex items-center relative" },
|
|
379
|
+
React.createElement(StageTooltip, { stageData: serviceItem.dropoff_stages, direction: 2, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
|
|
380
|
+
React.createElement("div", { className: "font-[900] bold-text" }, DateService.formatTime(serviceItem.dep_time))),
|
|
381
|
+
!isCiva && (React.createElement(StageTooltip, { stageData: serviceItem.dropoff_stages, direction: 2, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
|
|
542
382
|
React.createElement("div", { className: "font-[900] bold-text" }, removeArrivalTime
|
|
543
383
|
? null
|
|
544
384
|
: serviceItem.arr_time
|
|
545
385
|
? DateService.formatTime(serviceItem.arr_time)
|
|
546
|
-
: null),
|
|
547
|
-
serviceItem.dropoff_stages && (React.createElement("div", { className: "hidden group-hover:block absolute -top-[8px] left-[35%] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service", style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } },
|
|
548
|
-
React.createElement("div", { className: "tooltip-arrow absolute top-2 -left-[7px] w-0 h-0 \n border-t-8 border-b-8 border-r-8 \n border-t-transparent border-b-transparent", style: {
|
|
549
|
-
borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor,
|
|
550
|
-
} }),
|
|
551
|
-
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)))))))))),
|
|
386
|
+
: null))))),
|
|
552
387
|
React.createElement("div", { style: {
|
|
553
388
|
width: "1px",
|
|
554
389
|
height: "2.5rem",
|
|
@@ -591,136 +426,14 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
|
|
|
591
426
|
serviceDetailsLoading ? (React.createElement("span", { className: "loader-circle" })) : !isSoldOut ? (translation === null || translation === void 0 ? void 0 : translation.buyButton) : (translation === null || translation === void 0 ? void 0 : translation.soldOutButton))))),
|
|
592
427
|
showLastSeats ? (React.createElement("div", { className: "flex justify-end mr-[11px]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
|
|
593
428
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[12px] text-[red] mt-1 text-center" }, "\u00A1 \u00DAltimos Asientos!")))) : null,
|
|
594
|
-
React.createElement("div", { className:
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
serviceItem.duration && (React.createElement("div", { className: "flex items-baseline relative text-[#464647]" },
|
|
603
|
-
React.createElement("div", { className: `w-[18px] h-auto mr-[4px] ${isSoldOut ? "grayscale" : ""}` }, renderIcon("hours", "14px")),
|
|
604
|
-
React.createElement("div", { className: `cursor-default group text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
|
|
605
|
-
serviceItem.duration,
|
|
606
|
-
" ",
|
|
607
|
-
translation.hours,
|
|
608
|
-
React.createElement("div", { className: "hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[188px] text-center break-normal shadow-service text-[12px]", style: { backgroundColor: colors.tooltipColor } },
|
|
609
|
-
React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent", style: { borderBottomColor: colors.tooltipColor } }),
|
|
610
|
-
"Duraci\u00F3n estimada del viaje")))),
|
|
611
|
-
serviceItem.pet_seat_info &&
|
|
612
|
-
Object.keys(serviceItem.pet_seat_info).length > 0 ? (React.createElement("div", { className: "flex items-center text-[13.33px]" },
|
|
613
|
-
React.createElement("div", { className: `relative group cursor-default ` },
|
|
614
|
-
React.createElement("div", { className: "flex items-center" },
|
|
615
|
-
React.createElement("div", { className: `mr-[5px] ${isSoldOut ? "grayscale" : ""}` },
|
|
616
|
-
React.createElement(LottiePlayer
|
|
617
|
-
// animationData={serviceItem.icons.petFriendlyAnim}
|
|
618
|
-
, {
|
|
619
|
-
// animationData={serviceItem.icons.petFriendlyAnim}
|
|
620
|
-
animationData: getAnimationIcon("petFriendlyAnim"), width: "20px", height: "20px" })),
|
|
621
|
-
React.createElement("div", { className: "h-auto mr-[4px] text-[13px] text-[#464647]" },
|
|
622
|
-
React.createElement("span", null, translation === null || translation === void 0 ? void 0 : translation.petFriendly))),
|
|
623
|
-
React.createElement("div", { className: " hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[230px] text-center break-normal shadow-service", style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } },
|
|
624
|
-
React.createElement("div", { className: "tooltip-arrow absolute text-[13.33px] -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent", style: { borderBottomColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } }),
|
|
625
|
-
"Este servicio incluye asientos para mascotas.")))) : null,
|
|
626
|
-
serviceItem.is_change_ticket && (React.createElement("div", { className: "flex items-center" },
|
|
627
|
-
React.createElement("div", { className: "relative group cursor-default" },
|
|
628
|
-
React.createElement("div", { className: "flex items-center" },
|
|
629
|
-
React.createElement("div", { className: `mr-[5px] ${isSoldOut ? "grayscale" : ""}` },
|
|
630
|
-
React.createElement(LottiePlayer
|
|
631
|
-
// animationData={serviceItem.icons.flexibleAnim}
|
|
632
|
-
, {
|
|
633
|
-
// animationData={serviceItem.icons.flexibleAnim}
|
|
634
|
-
animationData: getAnimationIcon("flexibleIcon"), width: "20px", height: "20px" })),
|
|
635
|
-
React.createElement("div", { className: "h-auto mr-[4px] text-[13px] text-[#464647]" },
|
|
636
|
-
React.createElement("span", null, translation === null || translation === void 0 ? void 0 : translation.flexible))),
|
|
637
|
-
React.createElement("div", { className: "hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[230px] text-center break-normal shadow-service text-[12px]", style: {
|
|
638
|
-
backgroundColor: colors.tooltipColor,
|
|
639
|
-
lineHeight: "1.5",
|
|
640
|
-
} },
|
|
641
|
-
React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent ", style: { borderBottomColor: colors.tooltipColor } }),
|
|
642
|
-
"Esta empresa permite cambios sin costo hasta (", (_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.change_ticket_hours) !== null && _c !== void 0 ? _c : 6,
|
|
643
|
-
") horas antes del viaje.")))),
|
|
644
|
-
React.createElement("div", { className: "flex items-center" },
|
|
645
|
-
React.createElement("div", null, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled) && (React.createElement("div", { className: "flex items-center mr-[10px]" },
|
|
646
|
-
React.createElement("div", { className: `h-auto mr-[4px] text-[13px] text-[#464647] ${isSoldOut ? "grayscale" : ""}` },
|
|
647
|
-
React.createElement(LottiePlayer
|
|
648
|
-
// animationData={serviceItem.icons.locationAnim}
|
|
649
|
-
, {
|
|
650
|
-
// animationData={serviceItem.icons.locationAnim}
|
|
651
|
-
animationData: getAnimationIcon("locationAnim"), width: "18px", height: "18px" }))))),
|
|
652
|
-
React.createElement("div", null, metaData &&
|
|
653
|
-
serviceItem.operator_details[4] &&
|
|
654
|
-
(() => {
|
|
655
|
-
var _a;
|
|
656
|
-
const PRIORITY_IDS = ["2", "3", "13"];
|
|
657
|
-
const amenities = [...serviceItem.operator_details[4]];
|
|
658
|
-
const priorityAmenities = amenities.filter((id) => PRIORITY_IDS.includes(id));
|
|
659
|
-
const nonPriorityAmenities = amenities.filter((id) => !PRIORITY_IDS.includes(id));
|
|
660
|
-
const hasPriority = priorityAmenities.length > 0;
|
|
661
|
-
/* ============================
|
|
662
|
-
🇵🇪 PERU LOGIC
|
|
663
|
-
============================ */
|
|
664
|
-
let visibleAmenities = [];
|
|
665
|
-
let shouldShowPlus = false;
|
|
666
|
-
let plusAmenities = [];
|
|
667
|
-
if (isPeru) {
|
|
668
|
-
if (hasPriority) {
|
|
669
|
-
visibleAmenities = priorityAmenities;
|
|
670
|
-
shouldShowPlus = nonPriorityAmenities.length > 0;
|
|
671
|
-
plusAmenities = nonPriorityAmenities;
|
|
672
|
-
}
|
|
673
|
-
else {
|
|
674
|
-
visibleAmenities = [];
|
|
675
|
-
shouldShowPlus = amenities.length > 0;
|
|
676
|
-
plusAmenities = amenities;
|
|
677
|
-
}
|
|
678
|
-
}
|
|
679
|
-
/* ============================
|
|
680
|
-
🌍 NON-PERU LOGIC
|
|
681
|
-
============================ */
|
|
682
|
-
if (!isPeru) {
|
|
683
|
-
const sortedAmenities = [...amenities].sort((a, b) => Number(PRIORITY_IDS.includes(b)) -
|
|
684
|
-
Number(PRIORITY_IDS.includes(a)));
|
|
685
|
-
visibleAmenities = sortedAmenities.slice(0, 3);
|
|
686
|
-
shouldShowPlus = sortedAmenities.length > 3;
|
|
687
|
-
plusAmenities = sortedAmenities.slice(3);
|
|
688
|
-
}
|
|
689
|
-
return (React.createElement("div", { className: "flex items-center gap-[6px]" },
|
|
690
|
-
visibleAmenities.map((val, key) => {
|
|
691
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
692
|
-
return ((_b = (_a = metaData.amenities[val]) === null || _a === void 0 ? void 0 : _a.split(".")[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== "WATER" ? (React.createElement("div", { key: key, className: "relative mr-2 cursor-pointer" },
|
|
693
|
-
React.createElement("div", { className: "group" },
|
|
694
|
-
React.createElement("div", { className: `${isSoldOut ? "grayscale" : ""}` },
|
|
695
|
-
React.createElement(SvgAmenities, { moreAnemities: false, name: (_d = (_c = metaData.amenities[val]) === null || _c === void 0 ? void 0 : _c.split(".")[0]) === null || _d === void 0 ? void 0 : _d.toLowerCase() })),
|
|
696
|
-
React.createElement("div", { className: "hidden group-hover:block absolute top-[30px] left-1/2 -translate-x-1/2 text-white rounded-[14px] whitespace-nowrap mt-2.5 text-center shadow-service text-[13.33px]", style: {
|
|
697
|
-
backgroundColor: colors.tooltipColor,
|
|
698
|
-
zIndex: 21,
|
|
699
|
-
padding: "12px",
|
|
700
|
-
} },
|
|
701
|
-
React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent", style: {
|
|
702
|
-
borderBottomColor: colors.tooltipColor,
|
|
703
|
-
} }),
|
|
704
|
-
getAmenityName((_g = (_f = (_e = metaData.amenities[val]) === null || _e === void 0 ? void 0 : _e.split(".")[0]) === null || _f === void 0 ? void 0 : _f.split("_")) === null || _g === void 0 ? void 0 : _g.join(" ")))))) : null;
|
|
705
|
-
}),
|
|
706
|
-
shouldShowPlus && (React.createElement("div", { className: "relative ml-1 cursor-pointer" },
|
|
707
|
-
React.createElement("div", { className: "group" },
|
|
708
|
-
React.createElement("img", { src: ((_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a.plus) ||
|
|
709
|
-
"/images/icons/amenities/icon_plus.svg", className: "w-[16px] h-[16px]", alt: "plus" }),
|
|
710
|
-
React.createElement("div", { style: { zIndex: 100 }, className: "hidden group-hover:block absolute top-[30px] left-1/2 -translate-x-1/2 text-white rounded-[14px] whitespace-nowrap mt-2.5 text-center shadow-service text-[13.33px]" },
|
|
711
|
-
React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent", style: {
|
|
712
|
-
borderBottomColor: colors.tooltipColor,
|
|
713
|
-
} }),
|
|
714
|
-
React.createElement("div", { className: "flex flex-col gap-[10px] p-3 rounded-[8px] shadow-md animate-fadeIn relative", style: {
|
|
715
|
-
backgroundColor: colors.tooltipColor,
|
|
716
|
-
padding: "1rem",
|
|
717
|
-
} }, plusAmenities.map((val, key) => {
|
|
718
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
719
|
-
return ((_b = (_a = metaData.amenities[val]) === null || _a === void 0 ? void 0 : _a.split(".")[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== "WATER" ? (React.createElement("div", { key: key, className: "flex items-center gap-[5px] text-xs whitespace-nowrap" },
|
|
720
|
-
React.createElement(SvgAmenities, { moreAnemities: true, name: (_d = (_c = metaData.amenities[val]) === null || _c === void 0 ? void 0 : _c.split(".")[0]) === null || _d === void 0 ? void 0 : _d.toUpperCase(), color: "white" }),
|
|
721
|
-
getAmenityName((_g = (_f = (_e = metaData.amenities[val]) === null || _e === void 0 ? void 0 : _e.split(".")[0]) === null || _f === void 0 ? void 0 : _f.split("_")) === null || _g === void 0 ? void 0 : _g.join(" ")))) : null;
|
|
722
|
-
}))))))));
|
|
723
|
-
})()))))),
|
|
429
|
+
React.createElement("div", { className: "flex items-center mt-[15px] border-t border-[#eee] pt-[10px]" },
|
|
430
|
+
React.createElement("div", { className: "grid items-center gap-[2%] flex-1", style: {
|
|
431
|
+
gridTemplateColumns: "30% 18% 23% 23%",
|
|
432
|
+
// otherItems
|
|
433
|
+
// .map((i) => i.width)
|
|
434
|
+
// .join(" "),
|
|
435
|
+
} }, otherItems.map((item) => (React.createElement("div", { key: item.key, className: "flex items-center " }, item.render)))),
|
|
436
|
+
React.createElement("div", { className: "flex items-center ml-[12px] shrink-0 w-[130px] justify-end" }, amenitiesItem === null || amenitiesItem === void 0 ? void 0 : amenitiesItem.render)))),
|
|
724
437
|
children,
|
|
725
438
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && (React.createElement("div", { className: ` text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[36px] pt-[50px] -z-10 rounded-b-[14px] text-[14px]`, style: {
|
|
726
439
|
backgroundColor: isSoldOut
|
|
@@ -745,6 +458,16 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
|
|
|
745
458
|
// animationData={serviceItem.icons.priorityStageAnim}
|
|
746
459
|
animationData: getAnimationIcon("priorityStageAnim"), width: "14px", height: "14px" })),
|
|
747
460
|
React.createElement("div", { className: isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]` }, showTopLabel))),
|
|
461
|
+
boardingName && isAllinBus && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
|
|
462
|
+
backgroundColor: isSoldOut ? "#ddd" : colors.ratingBottomColor,
|
|
463
|
+
} },
|
|
464
|
+
React.createElement("div", { className: isSoldOut ? "grayscale" : "" },
|
|
465
|
+
React.createElement(LottiePlayer
|
|
466
|
+
// animationData={serviceItem.icons.priorityStageAnim}
|
|
467
|
+
, {
|
|
468
|
+
// animationData={serviceItem.icons.priorityStageAnim}
|
|
469
|
+
animationData: getAnimationIcon("priorityStageAnim"), width: "14px", height: "14px" })),
|
|
470
|
+
React.createElement("div", { className: isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]` }, boardingName))),
|
|
748
471
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] text-white px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
|
|
749
472
|
backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
|
|
750
473
|
} },
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { ServiceItemProps } from "./types";
|
|
3
|
-
declare 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, siteType, }: ServiceItemProps & {
|
|
3
|
+
declare 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, siteType, isAllinBus, }: ServiceItemProps & {
|
|
4
4
|
currencySign?: string;
|
|
5
5
|
}): React.ReactElement;
|
|
6
6
|
export default ServiceItemPB;
|
|
@@ -36,7 +36,7 @@ import FlexibleBlock from "../../ui/FlexibleBlock";
|
|
|
36
36
|
import AmenitiesBlock from "../../ui/AmenitiesBlock";
|
|
37
37
|
import StageTooltip from "../../ui/StagesTooltip";
|
|
38
38
|
const SEAT_EXCEPTIONS = ["Asiento mascota"];
|
|
39
|
-
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, }) {
|
|
39
|
+
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, }) {
|
|
40
40
|
var _a, _b;
|
|
41
41
|
const animationMap = {
|
|
42
42
|
promoAnim: {
|
|
@@ -329,7 +329,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
329
329
|
];
|
|
330
330
|
const amenitiesItem = items.find((i) => i.key === "amenities");
|
|
331
331
|
const otherItems = items.filter((i) => i.key !== "amenities" && i.condition !== false);
|
|
332
|
-
return (React.createElement(React.Fragment, null, isPeruSites ? (React.createElement(PeruServiceItemDesktop, { serviceItem: serviceItem, onBookButtonPress: onBookButtonPress, colors: colors, metaData: metaData, children: children, busStage: busStage, serviceDetailsLoading: serviceDetailsLoading, cityOrigin: cityOrigin, cityDestination: cityDestination, translation: translation, orignLabel: orignLabel, destinationLabel: destinationLabel, currencySign: currencySign, isCiva: isCiva, showRating: showRating, showLastSeats: showLastSeats, removeArrivalTime: removeArrivalTime, removeDuplicateSeats: removeDuplicateSeats, isPeruSites: isPeruSites, t: (key) => t(key), showAvailableSeats: showAvailableSeats, isSeatIcon: isSeatIcon, isPeru: isPeru, siteType: siteType })) : (React.createElement("div", { className: `relative ${serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
|
|
332
|
+
return (React.createElement(React.Fragment, null, isPeruSites ? (React.createElement(PeruServiceItemDesktop, { serviceItem: serviceItem, onBookButtonPress: onBookButtonPress, colors: colors, metaData: metaData, children: children, busStage: busStage, serviceDetailsLoading: serviceDetailsLoading, cityOrigin: cityOrigin, cityDestination: cityDestination, translation: translation, orignLabel: orignLabel, destinationLabel: destinationLabel, currencySign: currencySign, isCiva: isCiva, showRating: showRating, showLastSeats: showLastSeats, removeArrivalTime: removeArrivalTime, removeDuplicateSeats: removeDuplicateSeats, isPeruSites: isPeruSites, t: (key) => t(key), showAvailableSeats: showAvailableSeats, isSeatIcon: isSeatIcon, isPeru: isPeru, siteType: siteType, isAllinBus: isAllinBus })) : (React.createElement("div", { className: `relative ${serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
|
|
333
333
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
|
|
334
334
|
showTopLabel
|
|
335
335
|
? "mt-[24px]"
|
|
@@ -414,7 +414,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
414
414
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[12px] text-[red] mt-1 text-center" }, "\u00A1 \u00DAltimos Asientos!")))) : null,
|
|
415
415
|
React.createElement("div", { className: "flex items-center mt-[15px] border-t border-[#eee] pt-[10px]" },
|
|
416
416
|
React.createElement("div", { className: "grid items-center gap-[2%] flex-1", style: {
|
|
417
|
-
gridTemplateColumns: "
|
|
417
|
+
gridTemplateColumns: "40% 18% 23% 23%",
|
|
418
418
|
// otherItems
|
|
419
419
|
// .map((i) => i.width)
|
|
420
420
|
// .join(" "),
|