kupos-ui-components-lib 9.7.7 → 9.7.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/KuposUIComponent.d.ts +0 -3
- package/dist/components/ServiceItem/PeruServiceItemDesktop.d.ts +1 -1
- package/dist/components/ServiceItem/PeruServiceItemDesktop.js +188 -134
- package/dist/components/ServiceItem/ServiceItemDesktop.d.ts +1 -1
- package/dist/components/ServiceItem/ServiceItemDesktop.js +2 -15
- package/dist/components/ServiceItem/ServiceItemMobile.d.ts +1 -1
- package/dist/components/ServiceItem/ServiceItemMobile.js +7 -16
- package/dist/components/ServiceItem/mobileTypes.d.ts +0 -32
- package/dist/components/ServiceItem/types.d.ts +0 -22
- package/dist/styles.css +0 -221
- package/dist/ui/FeatureServiceUI/FeatureServiceUi.js +1 -1
- package/dist/utils/CommonService.js +1 -11
- package/package.json +1 -1
- package/src/KuposUIComponent.tsx +0 -3
- package/src/components/ServiceItem/PeruServiceItemDesktop.tsx +345 -254
- package/src/components/ServiceItem/ServiceItemDesktop.tsx +5 -49
- package/src/components/ServiceItem/ServiceItemMobile.tsx +286 -340
- package/src/components/ServiceItem/mobileTypes.ts +1 -29
- package/src/components/ServiceItem/types.ts +1 -23
- package/src/styles.css +0 -15
- package/src/utils/CommonService.ts +1 -13
- package/src/assets/images/anims/service_list/thunder_icon.json +0 -1
- package/src/assets/images/anims/service_list/users_anim.json +0 -1
- package/src/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.tsx +0 -517
- package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx +0 -554
|
@@ -15,9 +15,6 @@ interface KuposUIComponentProps {
|
|
|
15
15
|
orignLabel?: string;
|
|
16
16
|
destinationLabel?: string;
|
|
17
17
|
t?: (key: string) => string;
|
|
18
|
-
ticketQuantity?: number;
|
|
19
|
-
onIncreaseTicketQuantity?: (serviceItem: any) => void;
|
|
20
|
-
onDecreaseTicketQuantity?: (serviceItem: any) => void;
|
|
21
18
|
id?: string;
|
|
22
19
|
name?: string;
|
|
23
20
|
description?: string;
|
|
@@ -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, isAllinBus, 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, viewersConfig, isExpand, setIsExpand, coachKey, isLoggedIn, showLoginModal, t, }: ServiceItemProps & {
|
|
4
4
|
currencySign?: string;
|
|
5
5
|
}): React.ReactElement;
|
|
6
6
|
export default PeruServiceItemDesktop;
|
|
@@ -14,73 +14,65 @@ import pullmanFlexibleAnimation from "../../assets/images/anims/service_list/pul
|
|
|
14
14
|
import pullmanPetFriendlyAnimation from "../../assets/images/anims/service_list/pullmanPetFriendly.json";
|
|
15
15
|
import pullmanLocationAnimation from "../../assets/images/anims/service_list/pullmanLocation.json";
|
|
16
16
|
import pullmanPriorityStageAnimation from "../../assets/images/anims/service_list/pullmanPriorityStage.json";
|
|
17
|
-
import pullmanPromoAnimation from "../../assets/images/anims/service_list/promocion.json";
|
|
18
|
-
import pullmanDirectoAnimation from "../../assets/images/anims/service_list/directo.json";
|
|
19
17
|
import opsitesFlexibleAnimation from "../../assets/images/anims/service_list/opsitesFlexible.json";
|
|
20
18
|
import opsitesPetFriendlyAnimation from "../../assets/images/anims/service_list/opsitesPetFriendly.json";
|
|
21
19
|
import opsitesLocationAnimation from "../../assets/images/anims/service_list/opsitesLocation.json";
|
|
22
20
|
import opsitesPriorityStageAnimation from "../../assets/images/anims/service_list/opsitesPriorityStage.json";
|
|
23
|
-
import
|
|
24
|
-
import
|
|
25
|
-
import linatalFlexibleAnimation from "../../assets/images/anims/service_list/flexible.json";
|
|
26
|
-
import linatalPromoAnimation from "../../assets/images/anims/service_list/promocion.json";
|
|
27
|
-
import linatalDirectoAnimation from "../../assets/images/anims/service_list/directo.json";
|
|
28
|
-
import linatalPriorityStageAnimation from "../../assets/images/anims/service_list/priority_stage.json";
|
|
29
|
-
import linatalPetFriendlyAnimation from "../../assets/images/anims/service_list/pet_friendly.json";
|
|
30
|
-
import linatalLocationAnimation from "../../assets/images/anims/service_list/location.json";
|
|
21
|
+
import bombAnimation from "../../assets/images/anims/service_list/bomb.json";
|
|
22
|
+
import dotAnimation from "../../assets/images/anims/service_list/dot_animation.json";
|
|
31
23
|
import StageTooltip from "../../ui/StagesTooltip";
|
|
32
24
|
import RatingBlock from "../../ui/RatingBlock";
|
|
33
25
|
import DurationBlock from "../../ui/DurationBlock";
|
|
34
26
|
import PetBlock from "../../ui/PetBlock";
|
|
35
27
|
import FlexibleBlock from "../../ui/FlexibleBlock";
|
|
36
28
|
import AmenitiesBlock from "../../ui/AmenitiesBlock";
|
|
29
|
+
import SeatSection from "../../ui/SeatSection/SeatSection";
|
|
30
|
+
import KuposButton from "../../ui/KuposButton/KuposButton";
|
|
31
|
+
import BottomAmenities from "../../ui/BottomAmenities/BottomAmenities";
|
|
37
32
|
const SEAT_EXCEPTIONS = ["Asiento mascota"];
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
linatal: linatalFlexibleAnimation,
|
|
76
|
-
},
|
|
77
|
-
};
|
|
33
|
+
const ANIMATION_MAP = {
|
|
34
|
+
promoAnim: {
|
|
35
|
+
kupos: promoAnimation,
|
|
36
|
+
},
|
|
37
|
+
locationAnim: {
|
|
38
|
+
kupos: locationAnimation,
|
|
39
|
+
pullman: pullmanLocationAnimation,
|
|
40
|
+
opsites: opsitesLocationAnimation,
|
|
41
|
+
},
|
|
42
|
+
directoAnim: {
|
|
43
|
+
kupos: directoAnimation,
|
|
44
|
+
},
|
|
45
|
+
petFriendlyAnim: {
|
|
46
|
+
kupos: petFriendlyAnimation,
|
|
47
|
+
pullman: pullmanPetFriendlyAnimation,
|
|
48
|
+
opsites: opsitesPetFriendlyAnimation,
|
|
49
|
+
},
|
|
50
|
+
priorityStageAnim: {
|
|
51
|
+
kupos: priorityStageAnimation,
|
|
52
|
+
pullman: pullmanPriorityStageAnimation,
|
|
53
|
+
opsites: opsitesPriorityStageAnimation,
|
|
54
|
+
},
|
|
55
|
+
flexibleIcon: {
|
|
56
|
+
kupos: flexibleAnimation,
|
|
57
|
+
pullman: pullmanFlexibleAnimation,
|
|
58
|
+
opsites: opsitesFlexibleAnimation,
|
|
59
|
+
},
|
|
60
|
+
bombAnimation: {
|
|
61
|
+
kupos: bombAnimation,
|
|
62
|
+
},
|
|
63
|
+
dotAnimation: {
|
|
64
|
+
kupos: dotAnimation,
|
|
65
|
+
opsites: dotAnimation,
|
|
66
|
+
},
|
|
67
|
+
};
|
|
68
|
+
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, viewersConfig, isExpand, setIsExpand, coachKey, isLoggedIn, showLoginModal, t = (key) => key, }) {
|
|
69
|
+
var _a, _b, _c, _d, _e;
|
|
78
70
|
const getAnimationIcon = (icon) => {
|
|
79
|
-
|
|
71
|
+
var _a;
|
|
72
|
+
const animation = ANIMATION_MAP[icon];
|
|
80
73
|
if (!animation)
|
|
81
74
|
return null;
|
|
82
|
-
|
|
83
|
-
return animation[currentSiteType];
|
|
75
|
+
return (_a = animation[siteType]) !== null && _a !== void 0 ? _a : animation.kupos;
|
|
84
76
|
};
|
|
85
77
|
const SvgAmenities = ({ moreAnemities, name, color, }) => {
|
|
86
78
|
var _a;
|
|
@@ -224,6 +216,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
|
|
|
224
216
|
};
|
|
225
217
|
const checkMidnight = () => {
|
|
226
218
|
var _a, _b;
|
|
219
|
+
setIsExpand === null || setIsExpand === void 0 ? void 0 : setIsExpand(null);
|
|
227
220
|
if ((cityOrigin === null || cityOrigin === void 0 ? void 0 : cityOrigin.label) &&
|
|
228
221
|
(cityDestination === null || cityDestination === void 0 ? void 0 : cityDestination.label) &&
|
|
229
222
|
((cityOrigin.label.toLowerCase().includes("argentina") &&
|
|
@@ -312,18 +305,55 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
|
|
|
312
305
|
const dropoffName = ((_b = serviceItem.stage_details_arr) === null || _b === void 0 ? void 0 : _b.length)
|
|
313
306
|
? extractStage(serviceItem.stage_details_arr, 1)
|
|
314
307
|
: null;
|
|
308
|
+
const countdownSeconds = 599;
|
|
309
|
+
const startCountdown = (node) => {
|
|
310
|
+
if (!node)
|
|
311
|
+
return;
|
|
312
|
+
const prevId = node.dataset.countdownId;
|
|
313
|
+
if (prevId)
|
|
314
|
+
clearInterval(Number(prevId));
|
|
315
|
+
let remaining = countdownSeconds;
|
|
316
|
+
const formatTime = (totalSecs) => {
|
|
317
|
+
const m = Math.floor(totalSecs / 60);
|
|
318
|
+
const s = totalSecs % 60;
|
|
319
|
+
return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
|
|
320
|
+
};
|
|
321
|
+
node.textContent = formatTime(remaining);
|
|
322
|
+
const id = setInterval(() => {
|
|
323
|
+
remaining -= 1;
|
|
324
|
+
if (remaining <= 0) {
|
|
325
|
+
remaining = countdownSeconds;
|
|
326
|
+
}
|
|
327
|
+
node.textContent = formatTime(remaining);
|
|
328
|
+
}, 1000);
|
|
329
|
+
node.dataset.countdownId = String(id);
|
|
330
|
+
};
|
|
315
331
|
const items = [
|
|
316
332
|
{
|
|
317
|
-
key: "
|
|
318
|
-
width: "
|
|
319
|
-
|
|
333
|
+
key: "amenities",
|
|
334
|
+
width: "20%",
|
|
335
|
+
condition: true,
|
|
336
|
+
render: (React.createElement(AmenitiesBlock, { serviceItem: serviceItem, metaData: metaData, isSoldOut: isSoldOut, colors: colors, getAnimationIcon: getAnimationIcon, getAmenityName: CommonService.getAmenityName, SvgAmenities: SvgAmenities, isPeru: isPeru })),
|
|
320
337
|
},
|
|
321
338
|
{
|
|
322
339
|
key: "duration",
|
|
323
|
-
width: "
|
|
340
|
+
width: "12%",
|
|
324
341
|
condition: serviceItem.duration,
|
|
325
342
|
render: (React.createElement(DurationBlock, { serviceItem: serviceItem, translation: translation, renderIcon: renderIcon, isSoldOut: isSoldOut, colors: colors })),
|
|
326
343
|
},
|
|
344
|
+
// {
|
|
345
|
+
// key: "directo",
|
|
346
|
+
// width: "12%",
|
|
347
|
+
// condition: serviceItem?.is_direct_trip === true,
|
|
348
|
+
// render: (
|
|
349
|
+
// <DirectoBlock
|
|
350
|
+
// translation={translation}
|
|
351
|
+
// getAnimationIcon={getAnimationIcon}
|
|
352
|
+
// colors={colors}
|
|
353
|
+
// isSoldOut={isSoldOut}
|
|
354
|
+
// />
|
|
355
|
+
// ),
|
|
356
|
+
// },
|
|
327
357
|
{
|
|
328
358
|
key: "pet",
|
|
329
359
|
width: "20%",
|
|
@@ -334,48 +364,82 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
|
|
|
334
364
|
{
|
|
335
365
|
key: "flexible",
|
|
336
366
|
width: "20%",
|
|
337
|
-
condition:
|
|
367
|
+
condition: serviceItem.is_change_ticket === true,
|
|
338
368
|
render: (React.createElement(FlexibleBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, serviceItem: serviceItem, isSoldOut: isSoldOut })),
|
|
339
369
|
},
|
|
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
370
|
];
|
|
346
|
-
const
|
|
347
|
-
const
|
|
348
|
-
|
|
371
|
+
const otherItems = items.filter((i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition);
|
|
372
|
+
const isItemExpanded = serviceItem.id === isExpand || isExpand === true;
|
|
373
|
+
const grayscaleClass = isSoldOut ? "grayscale" : "";
|
|
374
|
+
const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text);
|
|
375
|
+
const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
|
|
376
|
+
const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
|
|
377
|
+
const serviceCardStyle = hasOfferText
|
|
378
|
+
? {
|
|
379
|
+
borderColor: "transparent",
|
|
380
|
+
borderStyle: "solid",
|
|
381
|
+
borderWidth: "3px 3px 0 3px",
|
|
382
|
+
borderRadius: isItemExpanded || coachKey ? "18px 18px 0 0" : "18px",
|
|
383
|
+
background: `linear-gradient(#fff, #fff) padding-box, ${isSoldOut ? offerGradientWithOpacity : offerGradient} border-box`,
|
|
384
|
+
// zIndex: 1,
|
|
385
|
+
}
|
|
386
|
+
: {};
|
|
387
|
+
const seats = removeDuplicateSeats
|
|
388
|
+
? ((_c = serviceItem.seat_types) === null || _c === void 0 ? void 0 : _c.filter((seat, index, self) => index === self.findIndex((s) => s.label === seat.label))) || []
|
|
389
|
+
: serviceItem.seat_types || [];
|
|
390
|
+
const discountedSeats = seats.map((seat) => (Object.assign(Object.assign({}, seat), CommonService.calculateDiscountedPrice(seat.fare, serviceItem))));
|
|
391
|
+
const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
|
|
392
|
+
return (React.createElement("div", { className: `relative hover:z-[150] ${hasOfferText ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
|
|
349
393
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
|
|
350
394
|
showTopLabel
|
|
351
395
|
? "mt-[24px]"
|
|
352
396
|
: "mt-[20px]"} ` },
|
|
353
|
-
React.createElement("div", { className:
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
397
|
+
React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${hasOfferText && !isSoldOut
|
|
398
|
+
? "z-[3] rounded-[18px]"
|
|
399
|
+
: "rounded-[10px] border border-[#ccc]"}`, style: serviceCardStyle },
|
|
400
|
+
React.createElement("div", { className: " pt-[20px]", style: {
|
|
401
|
+
padding: hasOfferText
|
|
402
|
+
? "20px 15px 10px 15px"
|
|
403
|
+
: coachKey
|
|
404
|
+
? "20px 15px 20px 15px"
|
|
405
|
+
: "20px 15px 10px 15px",
|
|
406
|
+
marginTop: hasDiscount || hasOfferText ? "14px" : "",
|
|
407
|
+
} },
|
|
408
|
+
React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:14%_40%_0.5%_24%_13.5%] gap-x-[2%] items-center",
|
|
409
|
+
// style={{ marginTop: showTopLabel ? "8px" : "" }}
|
|
410
|
+
style: {
|
|
411
|
+
marginTop: showTopLabel || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "8px" : "",
|
|
412
|
+
} },
|
|
413
|
+
React.createElement("div", { style: {
|
|
414
|
+
display: "flex",
|
|
415
|
+
flexDirection: "column",
|
|
416
|
+
// gap: "5px",
|
|
417
|
+
} },
|
|
418
|
+
React.createElement("div", {
|
|
419
|
+
// className="flex items-center justify-center m-[auto]"
|
|
420
|
+
className: "" },
|
|
421
|
+
React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `h-[30px] w-[auto] ${isSoldOut ? "grayscale" : ""}` }),
|
|
422
|
+
isCiva ? (React.createElement("div", { className: "text-[13.33px] black-text ml-2" }, serviceItem.operator_details[2])) : null),
|
|
423
|
+
React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru })),
|
|
360
424
|
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: {
|
|
361
425
|
gridTemplateRows: "1fr",
|
|
362
426
|
} },
|
|
363
|
-
React.createElement("div", { className: "flex flex-col gap-[
|
|
427
|
+
React.createElement("div", { className: "flex flex-col gap-[4px]" },
|
|
364
428
|
orignLabel ? (React.createElement("div", { className: "w-[60px] h-[20px] flex items-center bold-text" }, orignLabel)) : (React.createElement("div", { className: "h-[20px] flex items-center" },
|
|
365
|
-
React.createElement("img", { src: (
|
|
429
|
+
React.createElement("img", { src: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.origin, alt: "origin", className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}` }))),
|
|
366
430
|
!isCiva &&
|
|
367
431
|
(destinationLabel ? (React.createElement("div", { className: "w-[60px] h-[20px] flex items-center bold-text" }, destinationLabel)) : (React.createElement("div", { className: "h-[20px] flex items-center" },
|
|
368
|
-
React.createElement("img", { src: (
|
|
369
|
-
React.createElement("div", { className: "flex flex-col gap-[
|
|
432
|
+
React.createElement("img", { src: (_e = serviceItem.icons) === null || _e === void 0 ? void 0 : _e.destination, className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }))))),
|
|
433
|
+
React.createElement("div", { className: "flex flex-col gap-[4px]" },
|
|
370
434
|
React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
|
|
371
435
|
React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.travel_date))),
|
|
372
436
|
!isCiva && (React.createElement(StageTooltip, { stageData: serviceItem.dropoff_stages, direction: 2, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
|
|
373
437
|
React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.arrival_date))))),
|
|
374
|
-
React.createElement("div", { className: "flex flex-col gap-[
|
|
438
|
+
React.createElement("div", { className: "flex flex-col gap-[4px] items-center" },
|
|
375
439
|
React.createElement("div", { className: "h-[20px] flex items-center justify-center" },
|
|
376
440
|
React.createElement("div", null, "\u2022")),
|
|
377
441
|
!isCiva && (React.createElement("div", { className: "h-[20px] flex items-center justify-center" }, removeArrivalTime ? null : serviceItem.arr_time ? (React.createElement("div", null, "\u2022")) : null))),
|
|
378
|
-
React.createElement("div", { className: "flex flex-col gap-[
|
|
442
|
+
React.createElement("div", { className: "flex flex-col gap-[4px]" },
|
|
379
443
|
React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
|
|
380
444
|
React.createElement("div", { className: "font-[900] bold-text" }, DateService.formatTime(serviceItem.dep_time))),
|
|
381
445
|
!isCiva && (React.createElement(StageTooltip, { stageData: serviceItem.dropoff_stages, direction: 2, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
|
|
@@ -391,63 +455,53 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
|
|
|
391
455
|
margin: "auto",
|
|
392
456
|
} }),
|
|
393
457
|
React.createElement("div", { className: "content-center" },
|
|
394
|
-
React.createElement(
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
React.createElement("div", { className: "
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
left: "68%",
|
|
403
|
-
right: 0,
|
|
404
|
-
justifyContent: getNumberOfSeats() < 2 ? "center" : "center",
|
|
405
|
-
gap: "5px",
|
|
406
|
-
} },
|
|
407
|
-
React.createElement("span", { style: {
|
|
408
|
-
position: "absolute",
|
|
409
|
-
top: getNumberOfSeats() > 1 ? -10 : -5,
|
|
410
|
-
fontWeight: "initial",
|
|
411
|
-
fontSize: "12px",
|
|
412
|
-
left: 0,
|
|
413
|
-
color: "#6a6a6a",
|
|
414
|
-
} }, "Desde"),
|
|
415
|
-
getSeatPrice()))),
|
|
416
|
-
React.createElement("div", null,
|
|
417
|
-
React.createElement("button", { onClick: () => (!isSoldOut ? checkMidnight() : null), disabled: serviceDetailsLoading, className: `w-full ${serviceDetailsLoading || isSoldOut ? "py-[12px]" : "py-[12px]"} text-[13.33px] font-bold text-white rounded-[10px] border-none px-[20px] flex items-center justify-center`, style: {
|
|
418
|
-
backgroundColor: serviceDetailsLoading || isSoldOut
|
|
419
|
-
? "lightgray"
|
|
420
|
-
: colors.kuposButtonColor,
|
|
421
|
-
cursor: serviceDetailsLoading || isSoldOut
|
|
422
|
-
? "not-allowed"
|
|
423
|
-
: "pointer",
|
|
424
|
-
} },
|
|
425
|
-
React.createElement("span", { className: "min-w-[75px] flex justify-center items-center bold-text uppercase" },
|
|
426
|
-
isSoldOut ? renderIcon("soldOutIcon", "14px") : null,
|
|
427
|
-
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))))),
|
|
428
|
-
showLastSeats ? (React.createElement("div", { className: "flex justify-end mr-[11px]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
|
|
429
|
-
(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,
|
|
430
|
-
React.createElement("div", { className: "flex items-center mt-[15px] border-t border-[#eee] pt-[10px]" },
|
|
431
|
-
React.createElement("div", { className: "grid items-center gap-[2%] flex-1", style: {
|
|
432
|
-
gridTemplateColumns: "30% 18% 23% 23%",
|
|
433
|
-
// otherItems
|
|
434
|
-
// .map((i) => i.width)
|
|
435
|
-
// .join(" "),
|
|
436
|
-
} }, otherItems.map((item) => (React.createElement("div", { key: item.key, className: "flex items-center " }, item.render)))),
|
|
437
|
-
React.createElement("div", { className: "flex items-center ml-[12px] shrink-0 w-[130px] justify-end" }, amenitiesItem === null || amenitiesItem === void 0 ? void 0 : amenitiesItem.render)))),
|
|
458
|
+
React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru, renderIcon: renderIcon, discountSeatPriceColor: colors.discountSeatPriceColor })),
|
|
459
|
+
React.createElement("div", { className: "relative" },
|
|
460
|
+
React.createElement(KuposButton, { isSoldOut: isSoldOut, isLoading: serviceDetailsLoading, buttonColor: colors.kuposButtonColor, buyLabel: translation === null || translation === void 0 ? void 0 : translation.buyButton, soldOutLabel: translation === null || translation === void 0 ? void 0 : translation.soldOutButton, soldOutIcon: renderIcon("soldOutIcon", "14px"), onClick: checkMidnight }),
|
|
461
|
+
showLastSeats ? (React.createElement("div", { className: "flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
|
|
462
|
+
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[12px] mt-1 text-center", style: {
|
|
463
|
+
color: colors.seatPriceColor,
|
|
464
|
+
} }, "\u00A1\u00DAltimos Asientos!")))) : null)),
|
|
465
|
+
React.createElement(BottomAmenities, { otherItems: otherItems, serviceItem: serviceItem, grayscaleClass: grayscaleClass, isSoldOut: isSoldOut, isItemExpanded: isItemExpanded, colors: colors, translation: translation, getAnimationIcon: getAnimationIcon, downArrowIcon: renderIcon("downArrow", "10px"), onToggleExpand: () => setIsExpand && setIsExpand(isItemExpanded ? null : serviceItem.id), isPeru: isPeru }))),
|
|
438
466
|
children,
|
|
439
|
-
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && (React.createElement("div", { className:
|
|
440
|
-
|
|
441
|
-
? colors === null || colors === void 0 ? void 0 : colors.bottomStripColor
|
|
442
|
-
: colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
|
|
467
|
+
(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] rounded-b-[14px] text-[14px]", style: {
|
|
468
|
+
background: offerGradient,
|
|
443
469
|
opacity: isSoldOut ? 0.5 : 1,
|
|
444
470
|
} },
|
|
445
|
-
React.createElement(
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
471
|
+
React.createElement("div", { className: "flex justify-between items-center w-full" },
|
|
472
|
+
React.createElement("div", { className: "flex items-center " },
|
|
473
|
+
React.createElement("div", { className: "flex items-center" },
|
|
474
|
+
React.createElement(LottiePlayer, { animationData: getAnimationIcon("bombAnimation"), width: "18px", height: "18px" }),
|
|
475
|
+
React.createElement("div", { className: "flex items-center mt-[2px]" },
|
|
476
|
+
React.createElement("span", { className: "bold-text ml-[6px]" },
|
|
477
|
+
((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").length > 30
|
|
478
|
+
? ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").slice(0, 30) + "..."
|
|
479
|
+
: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "",
|
|
480
|
+
" ",
|
|
481
|
+
isLoggedIn ? null : (React.createElement("span", { onClick: showLoginModal, className: "cursor-pointer" }, "- registro")),
|
|
482
|
+
" ",
|
|
483
|
+
"\u00A0"),
|
|
484
|
+
" ",
|
|
485
|
+
"| Termina en\u00A0",
|
|
486
|
+
React.createElement("span", { className: "bold-text text-end", ref: (node) => CommonService.startCountdown(node, 599), style: {
|
|
487
|
+
fontVariantNumeric: "tabular-nums",
|
|
488
|
+
display: "inline-block",
|
|
489
|
+
} })))),
|
|
490
|
+
React.createElement("div", { className: "flex items-center" },
|
|
491
|
+
React.createElement(LottiePlayer, { animationData: getAnimationIcon("dotAnimation"), width: "12px", height: "12px" }),
|
|
492
|
+
React.createElement("span", { className: "ml-[6px]" },
|
|
493
|
+
React.createElement("span", { className: "bold-text", ref: (node) => CommonService.startViewerCount(node, viewersConfig), style: { fontVariantNumeric: "tabular-nums" } }),
|
|
494
|
+
" ",
|
|
495
|
+
React.createElement("span", null,
|
|
496
|
+
" ",
|
|
497
|
+
(viewersConfig === null || viewersConfig === void 0 ? void 0 : viewersConfig.label) || " viendo",
|
|
498
|
+
" |",
|
|
499
|
+
" ",
|
|
500
|
+
React.createElement("span", { className: "" },
|
|
501
|
+
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? null : "Quedan pocos • ",
|
|
502
|
+
React.createElement("span", { className: "bold-text", ref: (node) => CommonService.startComprandoCount(node, 4, 16), style: { fontVariantNumeric: "tabular-nums" } }),
|
|
503
|
+
" ",
|
|
504
|
+
"comprando"))))))),
|
|
451
505
|
React.createElement("div", { className: "absolute -top-[11px] left-0 w-full flex items-center justify-end gap-[12px] pr-[15px] z-10 " },
|
|
452
506
|
showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
|
|
453
507
|
backgroundColor: isSoldOut ? "#ddd" : colors.ratingBottomColor,
|
|
@@ -472,7 +526,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
|
|
|
472
526
|
(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: {
|
|
473
527
|
backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
|
|
474
528
|
} },
|
|
475
|
-
|
|
529
|
+
renderIcon("connectingServiceIcon", "12px"),
|
|
476
530
|
React.createElement("div", null, "Conexión"))),
|
|
477
531
|
(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: {
|
|
478
532
|
backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
|
|
@@ -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, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig,
|
|
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, isExpand, setIsExpand, coachKey, viewersConfig, showLoginModal, isLoggedIn, showLoginOption, }: ServiceItemProps & {
|
|
4
4
|
currencySign?: string;
|
|
5
5
|
}): React.ReactElement;
|
|
6
6
|
export default ServiceItemPB;
|
|
@@ -23,7 +23,6 @@ import bombAnimation from "../../assets/images/anims/service_list/bomb.json";
|
|
|
23
23
|
import dotAnimation from "../../assets/images/anims/service_list/dot_animation.json";
|
|
24
24
|
import starAnimation from "../../assets/images/anims/service_list/star_anim.json";
|
|
25
25
|
import femaleAnimation from "../../assets/images/anims/service_list/female_anim.json";
|
|
26
|
-
import usersAnimation from "../../assets/images/anims/service_list/users_anim.json";
|
|
27
26
|
import RatingBlock from "../../ui/RatingBlock";
|
|
28
27
|
import DurationBlock from "../../ui/DurationBlock";
|
|
29
28
|
import PetBlock from "../../ui/PetBlock";
|
|
@@ -33,8 +32,6 @@ import KuposButton from "../../ui/KuposButton/KuposButton";
|
|
|
33
32
|
import BottomAmenities from "../../ui/BottomAmenities/BottomAmenities";
|
|
34
33
|
import SeatSection from "../../ui/SeatSection/SeatSection";
|
|
35
34
|
import DateTimeSection from "../../ui/DateTimeSection/DateTimeSection";
|
|
36
|
-
import FeatureServiceUi from "../../ui/FeatureServiceUI/FeatureServiceUi";
|
|
37
|
-
import thunderAnimation from "../../assets/images/anims/service_list/thunder_icon.json";
|
|
38
35
|
import ServiceBadges from "../../ui/ServiceBadges/ServiceBadges";
|
|
39
36
|
const SEAT_EXCEPTIONS = ["Asiento mascota"];
|
|
40
37
|
const ANIMATION_MAP = {
|
|
@@ -67,9 +64,6 @@ const ANIMATION_MAP = {
|
|
|
67
64
|
bombAnimation: {
|
|
68
65
|
kupos: bombAnimation,
|
|
69
66
|
},
|
|
70
|
-
thunderAnimation: {
|
|
71
|
-
kupos: thunderAnimation,
|
|
72
|
-
},
|
|
73
67
|
dotAnimation: {
|
|
74
68
|
kupos: dotAnimation,
|
|
75
69
|
},
|
|
@@ -79,11 +73,8 @@ const ANIMATION_MAP = {
|
|
|
79
73
|
femaaleAnimation: {
|
|
80
74
|
kupos: femaleAnimation,
|
|
81
75
|
},
|
|
82
|
-
usersAnimation: {
|
|
83
|
-
kupos: usersAnimation,
|
|
84
|
-
},
|
|
85
76
|
};
|
|
86
|
-
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,
|
|
77
|
+
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, showLoginModal, isLoggedIn, showLoginOption, }) {
|
|
87
78
|
var _a;
|
|
88
79
|
const getAnimationIcon = (icon) => {
|
|
89
80
|
var _a;
|
|
@@ -252,11 +243,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
252
243
|
},
|
|
253
244
|
];
|
|
254
245
|
const otherItems = items.filter((i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition);
|
|
255
|
-
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
|
|
256
|
-
setIsFeatureDropDownExpand(isFeatureDropDownExpand === serviceItem.id ||
|
|
257
|
-
isFeatureDropDownExpand === true
|
|
258
|
-
? null
|
|
259
|
-
: serviceItem.id), selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle })) : (React.createElement("div", { className: `relative hover:z-[150] ${hasOfferText || hasDpEnabled ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
|
|
246
|
+
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, viewersConfig: viewersConfig, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, isExpand: isExpand, setIsExpand: setIsExpand, coachKey: coachKey })) : (React.createElement("div", { className: `relative hover:z-[150] ${hasOfferText || hasDpEnabled ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
|
|
260
247
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
|
|
261
248
|
showTopLabel
|
|
262
249
|
? "mt-[24px]"
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { MobileServiceItemProps } from "./mobileTypes";
|
|
3
|
-
declare function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig,
|
|
3
|
+
declare function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, }: MobileServiceItemProps): React.ReactElement;
|
|
4
4
|
export default ServiceItemMobile;
|
|
@@ -5,7 +5,6 @@ import BottomAmenitiesMobile from "../../ui/mobileweb/BottomAmenitiesMobile";
|
|
|
5
5
|
import DateTimeSectionMobile from "../../ui/mobileweb/DateTimeSectionMobile";
|
|
6
6
|
import ExpandedDropdownMobile from "../../ui/mobileweb/ExpandedDropdownMobile";
|
|
7
7
|
import ServiceBadgesMobile from "../../ui/mobileweb/ServiceBadgesMobile";
|
|
8
|
-
import FeatureServiceUiMobile from "../../ui/FeaturServiceUiMobile/FeatureServiceUiMobile";
|
|
9
8
|
const SEAT_EXCEPTIONS = ["Asiento mascota"];
|
|
10
9
|
const exceptions = [
|
|
11
10
|
"gy",
|
|
@@ -18,7 +17,7 @@ const exceptions = [
|
|
|
18
17
|
"blanco",
|
|
19
18
|
"asiento_mascota",
|
|
20
19
|
];
|
|
21
|
-
function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig,
|
|
20
|
+
function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, }) {
|
|
22
21
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
23
22
|
const isItemExpanded = serviceItem.id === isExpanded;
|
|
24
23
|
const isPetSeat = (Object.keys(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.pet_seat_info) || []).length > 0;
|
|
@@ -88,11 +87,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
88
87
|
if (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) {
|
|
89
88
|
isConexion = true;
|
|
90
89
|
}
|
|
91
|
-
return (React.createElement(
|
|
92
|
-
setIsFeatureDropDownExpand(isFeatureDropDownExpand === serviceItem.id ||
|
|
93
|
-
isFeatureDropDownExpand === true
|
|
94
|
-
? null
|
|
95
|
-
: serviceItem.id), selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle })) : (React.createElement("div", { className: `relative ${!serviceItem.offer_text || !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? "mb-[14px]" : showTopLabel || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "mb-[20px]" : "mb-[12px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
|
|
90
|
+
return (React.createElement("div", { className: `relative ${!serviceItem.offer_text || !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? "mb-[14px]" : showTopLabel || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "mb-[20px]" : "mb-[12px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
|
|
96
91
|
isConexion ||
|
|
97
92
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
|
|
98
93
|
showTopLabel
|
|
@@ -113,9 +108,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
113
108
|
React.createElement("div", { className: "flex items-center" },
|
|
114
109
|
React.createElement("img", { src: serviceItem.icons.rating, alt: "origin", className: `w-[12px] h-[12px] mr-[4px] object-contain ${isSoldOut ? "grayscale" : ""}` }),
|
|
115
110
|
React.createElement("span", { style: { lineHeight: "normal" } }, getServiceStars(serviceItem))),
|
|
116
|
-
React.createElement("div", { className: "flex items-center cursor-pointer ", style: {
|
|
117
|
-
color: isSoldOut ? "#bbb" : "text-[#464647]",
|
|
118
|
-
} },
|
|
111
|
+
React.createElement("div", { className: "flex items-center cursor-pointer ", style: { color: isSoldOut ? "#bbb" : "text-[#464647]" } },
|
|
119
112
|
React.createElement("span", { className: "ml-[3px] min-[420]:text-[13px] text-[12px] text-ellipsis overflow-hidden whitespace-nowrap max-w-[120px]" }, serviceItem.operator_details[2]))))) : null)),
|
|
120
113
|
React.createElement(DateTimeSectionMobile, { onBookButtonPress: onBookButtonPress, isCiva: isCiva, isSoldOut: isSoldOut, isLinatal: isLinatal, isPeru: isPeru, orignLabel: orignLabel, destinationLabel: destinationLabel, originIcon: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.origin, destinationIcon: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.destination, travelDate: serviceItem.travel_date, arrivalDate: serviceItem.arrival_date, depTime: serviceItem.dep_time, arrTime: serviceItem.arr_time, seatTypes: serviceItem.seat_types, seatPriceColor: colors.seatPriceColor, tooltipBgColor: colors.tooltipBgColor, currencySign: currencySign, availableSeats: serviceItem.available_seats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, showLastSeats: showLastSeats, discountSeatPriceColor: colors.discountSeatPriceColor }),
|
|
121
114
|
hasDiscount && (React.createElement("div", { className: "flex justify-end" }, isSoldOut ? (React.createElement("span", { className: "col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]" }, "Agotado")) : null)),
|
|
@@ -130,9 +123,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
130
123
|
React.createElement(ServiceBadgesMobile, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, serviceItem: serviceItem, isConexion: isConexion })),
|
|
131
124
|
((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)) &&
|
|
132
125
|
!isSoldOut && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
|
|
133
|
-
background: isSoldOut
|
|
134
|
-
? offerGradientWithOpacity
|
|
135
|
-
: offerGradient,
|
|
126
|
+
background: isSoldOut ? offerGradientWithOpacity : offerGradient,
|
|
136
127
|
// opacity: isSoldOut ? 0.5 : 1,
|
|
137
128
|
borderRadius: "0 0 14px 14px",
|
|
138
129
|
zIndex: -1,
|
|
@@ -140,8 +131,8 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
140
131
|
React.createElement("div", { className: "flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]", style: { lineHeight: 1.6 } },
|
|
141
132
|
React.createElement("div", { className: "flex justify-between items-center" },
|
|
142
133
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
|
|
143
|
-
Object.keys((_f = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _f !== void 0 ? _f : {})
|
|
144
|
-
|
|
134
|
+
Object.keys((_f = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _f !== void 0 ? _f : {}).length ===
|
|
135
|
+
0 &&
|
|
145
136
|
((_g = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _g !== void 0 ? _g : []).length === 0 ? (React.createElement("div", { className: "flex items-center gap-[6px]" },
|
|
146
137
|
React.createElement(LottiePlayer, { animationData: serviceItem.icons.starAnimation, width: "14px", height: "14px" }),
|
|
147
138
|
React.createElement("span", { className: "text-[#fff]" }, "M\u00E1s elegido"))) : (React.createElement("div", { className: `flex ${((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").length > 10 ? "items-start" : "items-center"}` },
|
|
@@ -189,6 +180,6 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
189
180
|
zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? -3 : undefined,
|
|
190
181
|
marginTop: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "-15px" : "-10px",
|
|
191
182
|
} },
|
|
192
|
-
React.createElement(ExpandedDropdownMobile, { serviceItem: serviceItem, isPeru: isPeru, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, isSoldOut: isSoldOut, isChangeTicket: serviceItem.is_change_ticket === true, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, femaleAnim: serviceItem.icons.femaleAnim, flexibleAnim: serviceItem.icons.flexibleAnim, renderIcon: renderIcon })))))
|
|
183
|
+
React.createElement(ExpandedDropdownMobile, { serviceItem: serviceItem, isPeru: isPeru, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, isSoldOut: isSoldOut, isChangeTicket: serviceItem.is_change_ticket === true, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, femaleAnim: serviceItem.icons.femaleAnim, flexibleAnim: serviceItem.icons.flexibleAnim, renderIcon: renderIcon })))));
|
|
193
184
|
}
|
|
194
185
|
export default ServiceItemMobile;
|