kupos-ui-components-lib 9.6.1 → 9.6.3
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.js +2 -2
- package/dist/components/ServiceItem/ServiceItemMobile.js +1 -1
- package/dist/components/ServiceItem/types.d.ts +2 -0
- package/dist/styles.css +0 -15
- package/dist/ui/SeatSection/SeatSection.d.ts +2 -1
- package/dist/ui/SeatSection/SeatSection.js +16 -6
- package/dist/ui/mobileweb/SeatSectionMobile.js +1 -4
- package/dist/utils/CommonService.js +7 -2
- package/package.json +1 -1
- package/src/components/ServiceItem/PeruServiceItemDesktop.tsx +322 -255
- package/src/components/ServiceItem/ServiceItemDesktop.tsx +7 -0
- package/src/components/ServiceItem/ServiceItemMobile.tsx +2 -2
- package/src/components/ServiceItem/types.ts +2 -0
- package/src/ui/SeatSection/SeatSection.tsx +21 -6
- package/src/ui/mobileweb/SeatSectionMobile.tsx +3 -2
- package/src/utils/CommonService.ts +9 -2
|
@@ -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,
|
|
@@ -239,7 +239,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
239
239
|
},
|
|
240
240
|
];
|
|
241
241
|
const otherItems = items.filter((i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition);
|
|
242
|
-
return (React.createElement(React.Fragment, null, isPeruSites ? (React.createElement(PeruServiceItemDesktop, { serviceItem: serviceItem, onBookButtonPress: onBookButtonPress, colors: colors, metaData: metaData, children: children, busStage: busStage, serviceDetailsLoading: serviceDetailsLoading, cityOrigin: cityOrigin, cityDestination: cityDestination, translation: translation, orignLabel: orignLabel, destinationLabel: destinationLabel, currencySign: currencySign, isCiva: isCiva, showRating: showRating, showLastSeats: showLastSeats, removeArrivalTime: removeArrivalTime, removeDuplicateSeats: removeDuplicateSeats, isPeruSites: isPeruSites, t: (key) => t(key), showAvailableSeats: showAvailableSeats, isSeatIcon: isSeatIcon, isPeru: isPeru, siteType: siteType, isAllinBus: isAllinBus })) : (React.createElement("div", { className: `relative hover:z-[150] ${hasOfferText || hasDpEnabled ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
|
|
242
|
+
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) ||
|
|
243
243
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
|
|
244
244
|
showTopLabel
|
|
245
245
|
? "mt-[24px]"
|
|
@@ -271,7 +271,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
271
271
|
backgroundColor: "#ccc",
|
|
272
272
|
} }),
|
|
273
273
|
React.createElement("div", { className: "content-center" },
|
|
274
|
-
React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, dpSeatColor: colors.seatPriceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru, renderIcon: renderIcon })),
|
|
274
|
+
React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, dpSeatColor: colors.seatPriceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru, renderIcon: renderIcon, discountSeatPriceColor: colors.discountSeatPriceColor })),
|
|
275
275
|
React.createElement("div", { className: "relative" },
|
|
276
276
|
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 }),
|
|
277
277
|
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 &&
|
|
@@ -115,7 +115,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
115
115
|
showLastSeats ? (React.createElement("div", { className: "flex justify-end " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
|
|
116
116
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[10px] text-center", style: {
|
|
117
117
|
color: colors.tooltipBgColor,
|
|
118
|
-
} }, "\u00A1
|
|
118
|
+
} }, "\u00A1\u00DAltimos Asientos!")))) : null,
|
|
119
119
|
React.createElement("div", { className: "bg-[#E6E6E6] mt-[10px] mb-[8px] h-[1px]" }),
|
|
120
120
|
React.createElement(BottomAmenitiesMobile, { isSoldOut: isSoldOut, amenitiesNodes: amenities(), hoursIcon: renderIcon("hours", "14px"), duration: (_e = serviceItem.duration) === null || _e === void 0 ? void 0 : _e.toString(), isDirectTrip: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip, directoColor: colors.directoColor, directoAnim: serviceItem.icons.directoAnim, isChangeTicket: serviceItem.is_change_ticket, isPetSeat: isPetSeat, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, flexibleAnim: serviceItem.icons.flexibleAnim, isTrackingEnabled: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled, locationAnim: serviceItem.icons.locationAnim, downArrowIcon: serviceItem.icons.downArrow, showDropdown: isItemExpanded, setShowDropdown: () => setIsExpanded(isItemExpanded ? null : serviceItem.id), onDropdownToggle: () => {
|
|
121
121
|
setIsExpanded(isItemExpanded ? null : serviceItem.id);
|
|
@@ -127,6 +127,7 @@ export interface ServiceItemProps {
|
|
|
127
127
|
downArrow?: string;
|
|
128
128
|
personIcon?: string;
|
|
129
129
|
whiteFireIcon?: string;
|
|
130
|
+
fireIcon?: string;
|
|
130
131
|
[key: string]: string | Record<string, string | undefined> | undefined;
|
|
131
132
|
};
|
|
132
133
|
useLottieFor?: string[];
|
|
@@ -156,6 +157,7 @@ export interface ServiceItemProps {
|
|
|
156
157
|
seatPriceColor?: string;
|
|
157
158
|
rightGradiantColor?: string;
|
|
158
159
|
leftGradiantColor?: string;
|
|
160
|
+
discountSeatPriceColor?: string;
|
|
159
161
|
};
|
|
160
162
|
cityOrigin?: {
|
|
161
163
|
value: number;
|
package/dist/styles.css
CHANGED
|
@@ -279,9 +279,6 @@
|
|
|
279
279
|
.ml-\[10px\] {
|
|
280
280
|
margin-left: 10px;
|
|
281
281
|
}
|
|
282
|
-
.ml-\[12px\] {
|
|
283
|
-
margin-left: 12px;
|
|
284
|
-
}
|
|
285
282
|
.ml-\[50px\] {
|
|
286
283
|
margin-left: 50px;
|
|
287
284
|
}
|
|
@@ -399,12 +396,6 @@
|
|
|
399
396
|
.w-\[115px\] {
|
|
400
397
|
width: 115px;
|
|
401
398
|
}
|
|
402
|
-
.w-\[120px\] {
|
|
403
|
-
width: 120px;
|
|
404
|
-
}
|
|
405
|
-
.w-\[130px\] {
|
|
406
|
-
width: 130px;
|
|
407
|
-
}
|
|
408
399
|
.w-\[150px\] {
|
|
409
400
|
width: 150px;
|
|
410
401
|
}
|
|
@@ -794,9 +785,6 @@
|
|
|
794
785
|
.pt-\[6px\] {
|
|
795
786
|
padding-top: 6px;
|
|
796
787
|
}
|
|
797
|
-
.pt-\[10px\] {
|
|
798
|
-
padding-top: 10px;
|
|
799
|
-
}
|
|
800
788
|
.pt-\[20px\] {
|
|
801
789
|
padding-top: 20px;
|
|
802
790
|
}
|
|
@@ -956,9 +944,6 @@
|
|
|
956
944
|
.text-\[\#fff\] {
|
|
957
945
|
color: #fff;
|
|
958
946
|
}
|
|
959
|
-
.text-\[red\] {
|
|
960
|
-
color: red;
|
|
961
|
-
}
|
|
962
947
|
.capitalize {
|
|
963
948
|
text-transform: capitalize;
|
|
964
949
|
}
|
|
@@ -15,6 +15,7 @@ interface SeatSectionProps {
|
|
|
15
15
|
isPeru?: boolean;
|
|
16
16
|
serviceItem?: any;
|
|
17
17
|
renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
|
|
18
|
+
discountSeatPriceColor?: string;
|
|
18
19
|
}
|
|
19
|
-
declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, isPeru, serviceItem, renderIcon, dpSeatColor, }: SeatSectionProps): React.ReactElement;
|
|
20
|
+
declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, }: SeatSectionProps): React.ReactElement;
|
|
20
21
|
export default SeatSection;
|
|
@@ -54,7 +54,7 @@ function getUniqueSeats(seatTypes) {
|
|
|
54
54
|
function getNumberOfSeats(seatTypes) {
|
|
55
55
|
return seatTypes.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
|
|
56
56
|
}
|
|
57
|
-
function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, isPeru, serviceItem, renderIcon, dpSeatColor, }) {
|
|
57
|
+
function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, }) {
|
|
58
58
|
var _a, _b, _c;
|
|
59
59
|
const uniqueSeats = getUniqueSeats(seatTypes);
|
|
60
60
|
const sortedSeatTypes = getSortedSeatTypes(seatTypes);
|
|
@@ -101,10 +101,19 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
|
|
|
101
101
|
const discountSeat = discountedSeats
|
|
102
102
|
.filter((seat) => !SEAT_EXCEPTIONS.includes(seat.label))
|
|
103
103
|
.sort((a, b) => a.discountedPrice - b.discountedPrice)[0];
|
|
104
|
-
const discountValue = (
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
104
|
+
const discountValue = (() => {
|
|
105
|
+
if ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_type) === "percentage" &&
|
|
106
|
+
typeof (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) === "number") {
|
|
107
|
+
return Math.round(serviceItem.discount_value);
|
|
108
|
+
}
|
|
109
|
+
if ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_type) === "fixed" && discountSeat) {
|
|
110
|
+
const { originalPrice, discountedPrice } = discountSeat;
|
|
111
|
+
if (originalPrice > 0 && originalPrice !== discountedPrice) {
|
|
112
|
+
return Math.round(((originalPrice - discountedPrice) / originalPrice) * 100);
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
return null;
|
|
116
|
+
})();
|
|
108
117
|
const renderLabels = () => {
|
|
109
118
|
if (isPeru) {
|
|
110
119
|
return (React.createElement(React.Fragment, null,
|
|
@@ -201,6 +210,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
|
|
|
201
210
|
React.createElement("div", { className: "col-start-2 row-start-1 flex items-center justify-center absolute", style: { top: "-22px", left: "50%", transform: "translateX(-50%)" } }, discountValue != null && (React.createElement("span", { className: "rounded-[100px] bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white", style: {
|
|
202
211
|
animation: "pulse-zoom 2s ease-in-out infinite",
|
|
203
212
|
whiteSpace: "nowrap",
|
|
213
|
+
backgroundColor: discountSeatPriceColor,
|
|
204
214
|
} },
|
|
205
215
|
discountValue,
|
|
206
216
|
"% OFF"))),
|
|
@@ -220,7 +230,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
|
|
|
220
230
|
transformOrigin: "center",
|
|
221
231
|
} }))),
|
|
222
232
|
React.createElement("div", { className: "col-start-2 row-start-3 flex h-[30px] items-end justify-center relative" },
|
|
223
|
-
React.createElement("span", { className: "flex items-center gap-[6px] text-[22px] bold-text leading-[30px]", style: { color: isSoldOut ? "#c0c0c0" :
|
|
233
|
+
React.createElement("span", { className: "flex items-center gap-[6px] text-[22px] bold-text leading-[30px]", style: { color: isSoldOut ? "#c0c0c0" : discountSeatPriceColor } },
|
|
224
234
|
React.createElement("div", { className: "absolute", style: {
|
|
225
235
|
left: isPeru ? "-1px" : "-8px",
|
|
226
236
|
} }, renderIcon("fireIcon", "16px")),
|
|
@@ -44,6 +44,7 @@ const getUniqueSeats = (data, limit) => {
|
|
|
44
44
|
};
|
|
45
45
|
function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, }) {
|
|
46
46
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
47
|
+
console.log("🚀 ~ SeatSectionMobile ~ serviceItem:", serviceItem);
|
|
47
48
|
const hasMultipleTypes = ((_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.length) !== null && _a !== void 0 ? _a : 0) > 2;
|
|
48
49
|
const getFare = (fare) => {
|
|
49
50
|
if (removeDuplicateSeats && availableSeats <= 0 && !isPeru) {
|
|
@@ -97,10 +98,6 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
|
|
|
97
98
|
React.createElement("span", { className: "flex items-center gap-[4px] min-[420]:text-[13px] text-[14px] bold-text", style: { color: priceColor } },
|
|
98
99
|
((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _a === void 0 ? void 0 : _a.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "dp", className: "h-[14px] w-[14px] object-contain", style: { filter: isSoldOut ? "grayscale(1)" : "" } })) : null,
|
|
99
100
|
commonService.currency(discountedPrice, currencySign))),
|
|
100
|
-
showLastSeats ? (React.createElement("div", { className: "flex justify-end" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
|
|
101
|
-
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[10px] text-center mt-[3px]", style: {
|
|
102
|
-
color: tooltipBgColor,
|
|
103
|
-
} }, "\u00A1\u00DAltimos Asientos!")))) : null,
|
|
104
101
|
isSoldOut ? (React.createElement("div", { className: "flex justify-end" },
|
|
105
102
|
React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] text-[#464647]", style: { opacity: isSoldOut ? 0.5 : 1 } }, "Agotado"))) : null));
|
|
106
103
|
};
|