kupos-ui-components-lib 9.6.8 → 9.6.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ServiceItem/PeruServiceItemDesktop.d.ts +1 -1
- package/dist/components/ServiceItem/PeruServiceItemDesktop.js +189 -133
- package/dist/components/ServiceItem/ServiceItemDesktop.d.ts +1 -1
- package/dist/components/ServiceItem/ServiceItemDesktop.js +4 -9
- package/dist/components/ServiceItem/ServiceItemMobile.js +1 -1
- package/dist/components/ServiceItem/types.d.ts +0 -7
- package/dist/styles.css +0 -129
- package/dist/ui/ExpendedDropDown/ExpandedDropdown.js +6 -2
- package/dist/ui/mobileweb/ExpandedDropdownMobile.d.ts +3 -1
- package/dist/ui/mobileweb/ExpandedDropdownMobile.js +9 -3
- package/package.json +1 -1
- package/src/components/ServiceItem/PeruServiceItemDesktop.tsx +322 -255
- package/src/components/ServiceItem/ServiceItemDesktop.tsx +7 -20
- package/src/components/ServiceItem/ServiceItemMobile.tsx +2 -0
- package/src/components/ServiceItem/types.ts +0 -8
- package/src/ui/ExpendedDropDown/ExpandedDropdown.tsx +17 -3
- package/src/ui/mobileweb/ExpandedDropdownMobile.tsx +24 -2
- package/src/assets/images/anims/service_list/thunder_icon.json +0 -1
- package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx +0 -549
|
@@ -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,55 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
|
|
|
391
455
|
margin: "auto",
|
|
392
456
|
} }),
|
|
393
457
|
React.createElement("div", { className: "content-center" },
|
|
394
|
-
React.createElement(
|
|
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()))),
|
|
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 })),
|
|
416
459
|
React.createElement("div", null,
|
|
417
|
-
React.createElement("
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
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)))),
|
|
460
|
+
showLastSeats ? (React.createElement("div", { className: "flex justify-end mr-[11px] ", style: {
|
|
461
|
+
position: "absolute",
|
|
462
|
+
top: serviceDetailsLoading ? "7px" : "5px",
|
|
463
|
+
right: "16px",
|
|
464
|
+
} }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
|
|
465
|
+
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[12px] text-[#464647] mt-1 text-center" }, "\u00A1\u00DAltimos Asientos!")))) : null,
|
|
466
|
+
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 }))),
|
|
467
|
+
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
468
|
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,
|
|
469
|
+
(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: {
|
|
470
|
+
background: offerGradient,
|
|
443
471
|
opacity: isSoldOut ? 0.5 : 1,
|
|
444
472
|
} },
|
|
445
|
-
React.createElement(
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
473
|
+
React.createElement("div", { className: "flex justify-between items-center w-full" },
|
|
474
|
+
React.createElement("div", { className: "flex items-center " },
|
|
475
|
+
React.createElement("div", { className: "flex items-center" },
|
|
476
|
+
React.createElement(LottiePlayer, { animationData: getAnimationIcon("bombAnimation"), width: "18px", height: "18px" }),
|
|
477
|
+
React.createElement("div", { className: "flex items-center mt-[2px]" },
|
|
478
|
+
React.createElement("span", { className: "bold-text ml-[6px]" },
|
|
479
|
+
((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").length > 30
|
|
480
|
+
? ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").slice(0, 30) + "..."
|
|
481
|
+
: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "",
|
|
482
|
+
" ",
|
|
483
|
+
isLoggedIn ? null : (React.createElement("span", { onClick: showLoginModal, className: "cursor-pointer" }, "- registro")),
|
|
484
|
+
" ",
|
|
485
|
+
"\u00A0"),
|
|
486
|
+
" ",
|
|
487
|
+
"| Termina en\u00A0",
|
|
488
|
+
React.createElement("span", { className: "bold-text text-end", ref: (node) => CommonService.startCountdown(node, 599), style: {
|
|
489
|
+
fontVariantNumeric: "tabular-nums",
|
|
490
|
+
display: "inline-block",
|
|
491
|
+
} })))),
|
|
492
|
+
React.createElement("div", { className: "flex items-center" },
|
|
493
|
+
React.createElement(LottiePlayer, { animationData: getAnimationIcon("dotAnimation"), width: "12px", height: "12px" }),
|
|
494
|
+
React.createElement("span", { className: "ml-[6px]" },
|
|
495
|
+
React.createElement("span", { className: "bold-text", ref: (node) => CommonService.startViewerCount(node, viewersConfig), style: { fontVariantNumeric: "tabular-nums" } }),
|
|
496
|
+
" ",
|
|
497
|
+
React.createElement("span", null,
|
|
498
|
+
" ",
|
|
499
|
+
(viewersConfig === null || viewersConfig === void 0 ? void 0 : viewersConfig.label) || " viendo",
|
|
500
|
+
" |",
|
|
501
|
+
" ",
|
|
502
|
+
React.createElement("span", { className: "" },
|
|
503
|
+
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? null : "Quedan pocos • ",
|
|
504
|
+
React.createElement("span", { className: "bold-text", ref: (node) => CommonService.startComprandoCount(node, 4, 16), style: { fontVariantNumeric: "tabular-nums" } }),
|
|
505
|
+
" ",
|
|
506
|
+
"comprando"))))))),
|
|
451
507
|
React.createElement("div", { className: "absolute -top-[11px] left-0 w-full flex items-center justify-end gap-[12px] pr-[15px] z-10 " },
|
|
452
508
|
showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
|
|
453
509
|
backgroundColor: isSoldOut ? "#ddd" : colors.ratingBottomColor,
|
|
@@ -472,7 +528,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
|
|
|
472
528
|
(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
529
|
backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
|
|
474
530
|
} },
|
|
475
|
-
|
|
531
|
+
renderIcon("connectingServiceIcon", "12px"),
|
|
476
532
|
React.createElement("div", null, "Conexión"))),
|
|
477
533
|
(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
534
|
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;
|
|
@@ -32,8 +32,6 @@ import KuposButton from "../../ui/KuposButton/KuposButton";
|
|
|
32
32
|
import BottomAmenities from "../../ui/BottomAmenities/BottomAmenities";
|
|
33
33
|
import SeatSection from "../../ui/SeatSection/SeatSection";
|
|
34
34
|
import DateTimeSection from "../../ui/DateTimeSection/DateTimeSection";
|
|
35
|
-
import FeatureServiceUi from "../../ui/FeatureServiceUI/FeatureServiceUi";
|
|
36
|
-
import thunderAnimation from "../../assets/images/anims/service_list/thunder_icon.json";
|
|
37
35
|
import ServiceBadges from "../../ui/ServiceBadges/ServiceBadges";
|
|
38
36
|
const SEAT_EXCEPTIONS = ["Asiento mascota"];
|
|
39
37
|
const ANIMATION_MAP = {
|
|
@@ -66,9 +64,6 @@ const ANIMATION_MAP = {
|
|
|
66
64
|
bombAnimation: {
|
|
67
65
|
kupos: bombAnimation,
|
|
68
66
|
},
|
|
69
|
-
thunderAnimation: {
|
|
70
|
-
kupos: thunderAnimation,
|
|
71
|
-
},
|
|
72
67
|
dotAnimation: {
|
|
73
68
|
kupos: dotAnimation,
|
|
74
69
|
},
|
|
@@ -79,7 +74,7 @@ const ANIMATION_MAP = {
|
|
|
79
74
|
kupos: femaleAnimation,
|
|
80
75
|
},
|
|
81
76
|
};
|
|
82
|
-
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, }) {
|
|
83
78
|
var _a;
|
|
84
79
|
const getAnimationIcon = (icon) => {
|
|
85
80
|
var _a;
|
|
@@ -248,7 +243,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
248
243
|
},
|
|
249
244
|
];
|
|
250
245
|
const otherItems = items.filter((i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition);
|
|
251
|
-
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
|
|
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) ||
|
|
252
247
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
|
|
253
248
|
showTopLabel
|
|
254
249
|
? "mt-[24px]"
|
|
@@ -298,8 +293,8 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
298
293
|
} },
|
|
299
294
|
React.createElement("div", { style: Object.assign({ overflow: "hidden", minHeight: 0, marginTop: hasDpEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "" : "-10px" }, (hasOfferText || hasDpEnabled
|
|
300
295
|
? {
|
|
301
|
-
borderLeft:
|
|
302
|
-
borderRight:
|
|
296
|
+
borderLeft: isSoldOut ? "" : "3px solid #ff5964",
|
|
297
|
+
borderRight: isSoldOut ? "" : "3px solid #ff8842",
|
|
303
298
|
borderRadius: "0 0 18px 18px",
|
|
304
299
|
boxSizing: "border-box",
|
|
305
300
|
}
|
|
@@ -180,6 +180,6 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
180
180
|
zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? -3 : undefined,
|
|
181
181
|
marginTop: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "-15px" : "-10px",
|
|
182
182
|
} },
|
|
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 })))));
|
|
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 })))));
|
|
184
184
|
}
|
|
185
185
|
export default ServiceItemMobile;
|
|
@@ -129,12 +129,6 @@ export interface ServiceItemProps {
|
|
|
129
129
|
personIcon?: string;
|
|
130
130
|
whiteFireIcon?: string;
|
|
131
131
|
fireIcon?: string;
|
|
132
|
-
whiteOrigin?: string;
|
|
133
|
-
whiteDestination?: string;
|
|
134
|
-
userIcon?: string;
|
|
135
|
-
sheildIcon?: string;
|
|
136
|
-
busIcon?: string;
|
|
137
|
-
whiteDownArrow?: string;
|
|
138
132
|
[key: string]: string | Record<string, string | undefined> | undefined;
|
|
139
133
|
};
|
|
140
134
|
useLottieFor?: string[];
|
|
@@ -227,7 +221,6 @@ export interface ServiceItemProps {
|
|
|
227
221
|
label?: string;
|
|
228
222
|
icon?: string;
|
|
229
223
|
};
|
|
230
|
-
isNewUi?: boolean;
|
|
231
224
|
showLoginModal?: any;
|
|
232
225
|
isLoggedIn?: any;
|
|
233
226
|
showLoginOption?: boolean;
|