kupos-ui-components-lib 9.7.8 → 9.7.9
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 +3 -0
- package/dist/components/ServiceItem/PeruServiceItemDesktop.d.ts +1 -1
- package/dist/components/ServiceItem/PeruServiceItemDesktop.js +134 -188
- package/dist/components/ServiceItem/ServiceItemDesktop.d.ts +1 -1
- package/dist/components/ServiceItem/ServiceItemDesktop.js +15 -2
- package/dist/components/ServiceItem/ServiceItemMobile.d.ts +1 -1
- package/dist/components/ServiceItem/ServiceItemMobile.js +16 -7
- package/dist/components/ServiceItem/mobileTypes.d.ts +32 -0
- package/dist/components/ServiceItem/types.d.ts +22 -0
- package/dist/styles.css +221 -0
- package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.js +9 -7
- package/dist/ui/FeatureServiceUI/FeatureServiceUi.js +3 -3
- package/dist/utils/CommonService.js +11 -1
- package/package.json +1 -1
- package/src/KuposUIComponent.tsx +3 -0
- package/src/assets/images/anims/service_list/thunder_icon.json +1 -0
- package/src/assets/images/anims/service_list/users_anim.json +1 -0
- package/src/components/ServiceItem/PeruServiceItemDesktop.tsx +254 -345
- package/src/components/ServiceItem/ServiceItemDesktop.tsx +49 -5
- package/src/components/ServiceItem/ServiceItemMobile.tsx +340 -286
- package/src/components/ServiceItem/mobileTypes.ts +29 -1
- package/src/components/ServiceItem/types.ts +23 -1
- package/src/styles.css +15 -0
- package/src/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.tsx +525 -0
- package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx +555 -0
- package/src/utils/CommonService.ts +13 -1
|
@@ -15,6 +15,9 @@ 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;
|
|
18
21
|
id?: string;
|
|
19
22
|
name?: string;
|
|
20
23
|
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,
|
|
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;
|
|
@@ -14,65 +14,73 @@ 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";
|
|
17
19
|
import opsitesFlexibleAnimation from "../../assets/images/anims/service_list/opsitesFlexible.json";
|
|
18
20
|
import opsitesPetFriendlyAnimation from "../../assets/images/anims/service_list/opsitesPetFriendly.json";
|
|
19
21
|
import opsitesLocationAnimation from "../../assets/images/anims/service_list/opsitesLocation.json";
|
|
20
22
|
import opsitesPriorityStageAnimation from "../../assets/images/anims/service_list/opsitesPriorityStage.json";
|
|
21
|
-
import
|
|
22
|
-
import
|
|
23
|
+
import opsitesPromoAnimation from "../../assets/images/anims/service_list/promocion.json";
|
|
24
|
+
import opsitesDirectoAnimation from "../../assets/images/anims/service_list/directo.json";
|
|
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";
|
|
23
31
|
import StageTooltip from "../../ui/StagesTooltip";
|
|
24
32
|
import RatingBlock from "../../ui/RatingBlock";
|
|
25
33
|
import DurationBlock from "../../ui/DurationBlock";
|
|
26
34
|
import PetBlock from "../../ui/PetBlock";
|
|
27
35
|
import FlexibleBlock from "../../ui/FlexibleBlock";
|
|
28
36
|
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";
|
|
32
37
|
const SEAT_EXCEPTIONS = ["Asiento mascota"];
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
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
|
-
|
|
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;
|
|
40
|
+
const animationMap = {
|
|
41
|
+
promoAnim: {
|
|
42
|
+
kupos: promoAnimation,
|
|
43
|
+
pullman: pullmanPromoAnimation,
|
|
44
|
+
opsites: opsitesPromoAnimation,
|
|
45
|
+
linatal: linatalPromoAnimation,
|
|
46
|
+
},
|
|
47
|
+
locationAnim: {
|
|
48
|
+
kupos: locationAnimation,
|
|
49
|
+
pullman: pullmanLocationAnimation,
|
|
50
|
+
opsites: opsitesLocationAnimation,
|
|
51
|
+
linatal: linatalLocationAnimation,
|
|
52
|
+
},
|
|
53
|
+
directoAnim: {
|
|
54
|
+
kupos: directoAnimation,
|
|
55
|
+
pullman: pullmanDirectoAnimation,
|
|
56
|
+
opsites: opsitesDirectoAnimation,
|
|
57
|
+
linatal: linatalDirectoAnimation,
|
|
58
|
+
},
|
|
59
|
+
petFriendlyAnim: {
|
|
60
|
+
kupos: petFriendlyAnimation,
|
|
61
|
+
pullman: pullmanPetFriendlyAnimation,
|
|
62
|
+
opsites: opsitesPetFriendlyAnimation,
|
|
63
|
+
linatal: linatalPetFriendlyAnimation,
|
|
64
|
+
},
|
|
65
|
+
priorityStageAnim: {
|
|
66
|
+
kupos: priorityStageAnimation,
|
|
67
|
+
pullman: pullmanPriorityStageAnimation,
|
|
68
|
+
opsites: opsitesPriorityStageAnimation,
|
|
69
|
+
linatal: linatalPriorityStageAnimation,
|
|
70
|
+
},
|
|
71
|
+
flexibleIcon: {
|
|
72
|
+
kupos: flexibleAnimation,
|
|
73
|
+
pullman: pullmanFlexibleAnimation,
|
|
74
|
+
opsites: opsitesFlexibleAnimation,
|
|
75
|
+
linatal: linatalFlexibleAnimation,
|
|
76
|
+
},
|
|
77
|
+
};
|
|
70
78
|
const getAnimationIcon = (icon) => {
|
|
71
|
-
|
|
72
|
-
const animation = ANIMATION_MAP[icon];
|
|
79
|
+
const animation = animationMap[icon];
|
|
73
80
|
if (!animation)
|
|
74
81
|
return null;
|
|
75
|
-
|
|
82
|
+
const currentSiteType = siteType || "kupos";
|
|
83
|
+
return animation[currentSiteType];
|
|
76
84
|
};
|
|
77
85
|
const SvgAmenities = ({ moreAnemities, name, color, }) => {
|
|
78
86
|
var _a;
|
|
@@ -216,7 +224,6 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
|
|
|
216
224
|
};
|
|
217
225
|
const checkMidnight = () => {
|
|
218
226
|
var _a, _b;
|
|
219
|
-
setIsExpand === null || setIsExpand === void 0 ? void 0 : setIsExpand(null);
|
|
220
227
|
if ((cityOrigin === null || cityOrigin === void 0 ? void 0 : cityOrigin.label) &&
|
|
221
228
|
(cityDestination === null || cityDestination === void 0 ? void 0 : cityDestination.label) &&
|
|
222
229
|
((cityOrigin.label.toLowerCase().includes("argentina") &&
|
|
@@ -305,55 +312,18 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
|
|
|
305
312
|
const dropoffName = ((_b = serviceItem.stage_details_arr) === null || _b === void 0 ? void 0 : _b.length)
|
|
306
313
|
? extractStage(serviceItem.stage_details_arr, 1)
|
|
307
314
|
: 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
|
-
};
|
|
331
315
|
const items = [
|
|
332
316
|
{
|
|
333
|
-
key: "
|
|
334
|
-
width: "
|
|
335
|
-
|
|
336
|
-
render: (React.createElement(AmenitiesBlock, { serviceItem: serviceItem, metaData: metaData, isSoldOut: isSoldOut, colors: colors, getAnimationIcon: getAnimationIcon, getAmenityName: CommonService.getAmenityName, SvgAmenities: SvgAmenities, isPeru: isPeru })),
|
|
317
|
+
key: "rating",
|
|
318
|
+
width: "30%",
|
|
319
|
+
render: (React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru })),
|
|
337
320
|
},
|
|
338
321
|
{
|
|
339
322
|
key: "duration",
|
|
340
|
-
width: "
|
|
323
|
+
width: "20%",
|
|
341
324
|
condition: serviceItem.duration,
|
|
342
325
|
render: (React.createElement(DurationBlock, { serviceItem: serviceItem, translation: translation, renderIcon: renderIcon, isSoldOut: isSoldOut, colors: colors })),
|
|
343
326
|
},
|
|
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
|
-
// },
|
|
357
327
|
{
|
|
358
328
|
key: "pet",
|
|
359
329
|
width: "20%",
|
|
@@ -364,82 +334,48 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
|
|
|
364
334
|
{
|
|
365
335
|
key: "flexible",
|
|
366
336
|
width: "20%",
|
|
367
|
-
condition:
|
|
337
|
+
condition: false,
|
|
368
338
|
render: (React.createElement(FlexibleBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, serviceItem: serviceItem, isSoldOut: isSoldOut })),
|
|
369
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
|
+
},
|
|
370
345
|
];
|
|
371
|
-
const
|
|
372
|
-
const
|
|
373
|
-
|
|
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) ||
|
|
346
|
+
const amenitiesItem = items.find((i) => i.key === "amenities");
|
|
347
|
+
const otherItems = items.filter((i) => i.key !== "amenities" && i.condition !== false);
|
|
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) ||
|
|
393
349
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
|
|
394
350
|
showTopLabel
|
|
395
351
|
? "mt-[24px]"
|
|
396
352
|
: "mt-[20px]"} ` },
|
|
397
|
-
React.createElement("div", {
|
|
398
|
-
|
|
399
|
-
: "
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
:
|
|
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 })),
|
|
353
|
+
React.createElement("div", { className: "bg-white rounded-[20px] shadow-service mx-auto relative" },
|
|
354
|
+
React.createElement("div", { className: "p-[15px] pt-[20px]" },
|
|
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" : "" } },
|
|
356
|
+
React.createElement("div", { className: "flex items-center justify-center m-[auto]" },
|
|
357
|
+
React.createElement("div", { className: " " },
|
|
358
|
+
React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: ` h-auto object-contain ${isSoldOut ? "grayscale" : ""}` })),
|
|
359
|
+
isCiva ? (React.createElement("div", { className: "text-[13.33px] black-text ml-2" }, serviceItem.operator_details[2])) : null),
|
|
424
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: {
|
|
425
361
|
gridTemplateRows: "1fr",
|
|
426
362
|
} },
|
|
427
|
-
React.createElement("div", { className: "flex flex-col gap-[
|
|
363
|
+
React.createElement("div", { className: "flex flex-col gap-[10px]" },
|
|
428
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" },
|
|
429
|
-
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" : ""}` }))),
|
|
430
366
|
!isCiva &&
|
|
431
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" },
|
|
432
|
-
React.createElement("img", { src: (
|
|
433
|
-
React.createElement("div", { className: "flex flex-col gap-[
|
|
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 } }))))),
|
|
369
|
+
React.createElement("div", { className: "flex flex-col gap-[10px]" },
|
|
434
370
|
React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
|
|
435
371
|
React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.travel_date))),
|
|
436
372
|
!isCiva && (React.createElement(StageTooltip, { stageData: serviceItem.dropoff_stages, direction: 2, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
|
|
437
373
|
React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.arrival_date))))),
|
|
438
|
-
React.createElement("div", { className: "flex flex-col gap-[
|
|
374
|
+
React.createElement("div", { className: "flex flex-col gap-[10px] items-center" },
|
|
439
375
|
React.createElement("div", { className: "h-[20px] flex items-center justify-center" },
|
|
440
376
|
React.createElement("div", null, "\u2022")),
|
|
441
377
|
!isCiva && (React.createElement("div", { className: "h-[20px] flex items-center justify-center" }, removeArrivalTime ? null : serviceItem.arr_time ? (React.createElement("div", null, "\u2022")) : null))),
|
|
442
|
-
React.createElement("div", { className: "flex flex-col gap-[
|
|
378
|
+
React.createElement("div", { className: "flex flex-col gap-[10px]" },
|
|
443
379
|
React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
|
|
444
380
|
React.createElement("div", { className: "font-[900] bold-text" }, DateService.formatTime(serviceItem.dep_time))),
|
|
445
381
|
!isCiva && (React.createElement(StageTooltip, { stageData: serviceItem.dropoff_stages, direction: 2, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
|
|
@@ -455,53 +391,63 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
|
|
|
455
391
|
margin: "auto",
|
|
456
392
|
} }),
|
|
457
393
|
React.createElement("div", { className: "content-center" },
|
|
458
|
-
React.createElement(
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
394
|
+
React.createElement("div", { className: `relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.5rem] ${getNumberOfSeats() < 3 ? "" : ""}`, style: getNumberOfSeats() < 2
|
|
395
|
+
? { alignItems: "center" }
|
|
396
|
+
: { alignItems: "center" } },
|
|
397
|
+
React.createElement("div", { className: "flex flex-col justify-between" }, getSeatNames()),
|
|
398
|
+
React.createElement("div", { className: "flex flex-col justify-between absolute inset-y-0 right-0 left-1/2 h-full", style: {
|
|
399
|
+
color: isSoldOut ? "#c0c0c0" : colors.priceColor,
|
|
400
|
+
top: 0,
|
|
401
|
+
bottom: 0,
|
|
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)))),
|
|
466
438
|
children,
|
|
467
|
-
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && (React.createElement("div", { className:
|
|
468
|
-
|
|
439
|
+
(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: {
|
|
440
|
+
backgroundColor: isSoldOut
|
|
441
|
+
? colors === null || colors === void 0 ? void 0 : colors.bottomStripColor
|
|
442
|
+
: colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
|
|
469
443
|
opacity: isSoldOut ? 0.5 : 1,
|
|
470
444
|
} },
|
|
471
|
-
React.createElement(
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
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"))))))),
|
|
445
|
+
React.createElement(LottiePlayer
|
|
446
|
+
// animationData={serviceItem.icons.promoAnim}
|
|
447
|
+
, {
|
|
448
|
+
// animationData={serviceItem.icons.promoAnim}
|
|
449
|
+
animationData: getAnimationIcon("promoAnim"), width: "18px", height: "18px" }),
|
|
450
|
+
React.createElement("span", { className: "ml-[10px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))),
|
|
505
451
|
React.createElement("div", { className: "absolute -top-[11px] left-0 w-full flex items-center justify-end gap-[12px] pr-[15px] z-10 " },
|
|
506
452
|
showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
|
|
507
453
|
backgroundColor: isSoldOut ? "#ddd" : colors.ratingBottomColor,
|
|
@@ -526,7 +472,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
|
|
|
526
472
|
(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: {
|
|
527
473
|
backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
|
|
528
474
|
} },
|
|
529
|
-
|
|
475
|
+
React.createElement(LottiePlayer, { animationData: serviceItem.icons.connectingServiceIcon, width: "14px", height: "14px" }),
|
|
530
476
|
React.createElement("div", null, "Conexión"))),
|
|
531
477
|
(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: {
|
|
532
478
|
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, showLoginModal, isLoggedIn, showLoginOption, }: 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, isExpand, setIsExpand, coachKey, viewersConfig, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, }: ServiceItemProps & {
|
|
4
4
|
currencySign?: string;
|
|
5
5
|
}): React.ReactElement;
|
|
6
6
|
export default ServiceItemPB;
|
|
@@ -23,6 +23,7 @@ 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";
|
|
26
27
|
import RatingBlock from "../../ui/RatingBlock";
|
|
27
28
|
import DurationBlock from "../../ui/DurationBlock";
|
|
28
29
|
import PetBlock from "../../ui/PetBlock";
|
|
@@ -32,6 +33,8 @@ import KuposButton from "../../ui/KuposButton/KuposButton";
|
|
|
32
33
|
import BottomAmenities from "../../ui/BottomAmenities/BottomAmenities";
|
|
33
34
|
import SeatSection from "../../ui/SeatSection/SeatSection";
|
|
34
35
|
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";
|
|
35
38
|
import ServiceBadges from "../../ui/ServiceBadges/ServiceBadges";
|
|
36
39
|
const SEAT_EXCEPTIONS = ["Asiento mascota"];
|
|
37
40
|
const ANIMATION_MAP = {
|
|
@@ -64,6 +67,9 @@ const ANIMATION_MAP = {
|
|
|
64
67
|
bombAnimation: {
|
|
65
68
|
kupos: bombAnimation,
|
|
66
69
|
},
|
|
70
|
+
thunderAnimation: {
|
|
71
|
+
kupos: thunderAnimation,
|
|
72
|
+
},
|
|
67
73
|
dotAnimation: {
|
|
68
74
|
kupos: dotAnimation,
|
|
69
75
|
},
|
|
@@ -73,8 +79,11 @@ const ANIMATION_MAP = {
|
|
|
73
79
|
femaaleAnimation: {
|
|
74
80
|
kupos: femaleAnimation,
|
|
75
81
|
},
|
|
82
|
+
usersAnimation: {
|
|
83
|
+
kupos: usersAnimation,
|
|
84
|
+
},
|
|
76
85
|
};
|
|
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, }) {
|
|
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, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, }) {
|
|
78
87
|
var _a;
|
|
79
88
|
const getAnimationIcon = (icon) => {
|
|
80
89
|
var _a;
|
|
@@ -243,7 +252,11 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
243
252
|
},
|
|
244
253
|
];
|
|
245
254
|
const otherItems = items.filter((i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition);
|
|
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
|
|
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 })) : isNewUi ? (React.createElement(FeatureServiceUi, { serviceItem: serviceItem, showTopLabel: showTopLabel, isSoldOut: isSoldOut, getAnimationIcon: getAnimationIcon, cityOrigin: cityOrigin, cityDestination: cityDestination, renderIcon: renderIcon, viewersConfig: viewersConfig, isFeatureDropDownExpand: isFeatureDropDownExpand, ticketQuantity: ticketQuantity, onIncreaseTicketQuantity: onIncreaseTicketQuantity, onDecreaseTicketQuantity: onDecreaseTicketQuantity, onBookButtonPress: onRemateUiButtonClick, onToggleExpand: () => setIsFeatureDropDownExpand &&
|
|
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) ||
|
|
247
260
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
|
|
248
261
|
showTopLabel
|
|
249
262
|
? "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, }: MobileServiceItemProps): React.ReactElement;
|
|
3
|
+
declare function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, }: MobileServiceItemProps): React.ReactElement;
|
|
4
4
|
export default ServiceItemMobile;
|
|
@@ -5,6 +5,7 @@ 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";
|
|
8
9
|
const SEAT_EXCEPTIONS = ["Asiento mascota"];
|
|
9
10
|
const exceptions = [
|
|
10
11
|
"gy",
|
|
@@ -17,7 +18,7 @@ const exceptions = [
|
|
|
17
18
|
"blanco",
|
|
18
19
|
"asiento_mascota",
|
|
19
20
|
];
|
|
20
|
-
function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, }) {
|
|
21
|
+
function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, }) {
|
|
21
22
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
22
23
|
const isItemExpanded = serviceItem.id === isExpanded;
|
|
23
24
|
const isPetSeat = (Object.keys(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.pet_seat_info) || []).length > 0;
|
|
@@ -87,7 +88,11 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
87
88
|
if (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) {
|
|
88
89
|
isConexion = true;
|
|
89
90
|
}
|
|
90
|
-
return (React.createElement(
|
|
91
|
+
return (React.createElement(React.Fragment, null, isNewUi ? (React.createElement(FeatureServiceUiMobile, { serviceItem: serviceItem, showTopLabel: showTopLabel, colors: colors, isSoldOut: isSoldOut, cityOrigin: cityOrigin, cityDestination: cityDestination, renderIcon: renderIcon, viewersConfig: viewersConfig, isFeatureDropDownExpand: isFeatureDropDownExpand, ticketQuantity: ticketQuantity, onIncreaseTicketQuantity: onIncreaseTicketQuantity, onDecreaseTicketQuantity: onDecreaseTicketQuantity, onBookButtonPress: onRemateUiButtonClick, onToggleExpand: () => setIsFeatureDropDownExpand &&
|
|
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) ||
|
|
91
96
|
isConexion ||
|
|
92
97
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
|
|
93
98
|
showTopLabel
|
|
@@ -108,7 +113,9 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
108
113
|
React.createElement("div", { className: "flex items-center" },
|
|
109
114
|
React.createElement("img", { src: serviceItem.icons.rating, alt: "origin", className: `w-[12px] h-[12px] mr-[4px] object-contain ${isSoldOut ? "grayscale" : ""}` }),
|
|
110
115
|
React.createElement("span", { style: { lineHeight: "normal" } }, getServiceStars(serviceItem))),
|
|
111
|
-
React.createElement("div", { className: "flex items-center cursor-pointer ", style: {
|
|
116
|
+
React.createElement("div", { className: "flex items-center cursor-pointer ", style: {
|
|
117
|
+
color: isSoldOut ? "#bbb" : "text-[#464647]",
|
|
118
|
+
} },
|
|
112
119
|
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)),
|
|
113
120
|
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 }),
|
|
114
121
|
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)),
|
|
@@ -123,7 +130,9 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
123
130
|
React.createElement(ServiceBadgesMobile, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, serviceItem: serviceItem, isConexion: isConexion })),
|
|
124
131
|
((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)) &&
|
|
125
132
|
!isSoldOut && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
|
|
126
|
-
background: isSoldOut
|
|
133
|
+
background: isSoldOut
|
|
134
|
+
? offerGradientWithOpacity
|
|
135
|
+
: offerGradient,
|
|
127
136
|
// opacity: isSoldOut ? 0.5 : 1,
|
|
128
137
|
borderRadius: "0 0 14px 14px",
|
|
129
138
|
zIndex: -1,
|
|
@@ -131,8 +140,8 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
131
140
|
React.createElement("div", { className: "flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]", style: { lineHeight: 1.6 } },
|
|
132
141
|
React.createElement("div", { className: "flex justify-between items-center" },
|
|
133
142
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
|
|
134
|
-
Object.keys((_f = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _f !== void 0 ? _f : {})
|
|
135
|
-
0 &&
|
|
143
|
+
Object.keys((_f = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _f !== void 0 ? _f : {})
|
|
144
|
+
.length === 0 &&
|
|
136
145
|
((_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]" },
|
|
137
146
|
React.createElement(LottiePlayer, { animationData: serviceItem.icons.starAnimation, width: "14px", height: "14px" }),
|
|
138
147
|
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"}` },
|
|
@@ -180,6 +189,6 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
180
189
|
zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? -3 : undefined,
|
|
181
190
|
marginTop: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "-15px" : "-10px",
|
|
182
191
|
} },
|
|
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 })))));
|
|
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 })))))));
|
|
184
193
|
}
|
|
185
194
|
export default ServiceItemMobile;
|