kupos-ui-components-lib 9.8.2 → 9.8.4
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/ServiceItemDesktop.d.ts +1 -1
- package/dist/components/ServiceItem/ServiceItemDesktop.js +21 -21
- package/dist/components/ServiceItem/ServiceItemMobile.d.ts +1 -1
- package/dist/components/ServiceItem/ServiceItemMobile.js +16 -7
- package/dist/components/ServiceItem/mobileTypes.d.ts +33 -0
- package/dist/components/ServiceItem/types.d.ts +23 -7
- package/dist/styles.css +212 -3
- package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.d.ts +2 -1
- package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.js +81 -50
- package/dist/ui/FeatureServiceUI/FeatureServiceUi.d.ts +2 -1
- package/dist/ui/FeatureServiceUI/FeatureServiceUi.js +83 -44
- package/dist/ui/SeatSection/SeatSection.d.ts +1 -5
- package/dist/ui/SeatSection/SeatSection.js +6 -28
- package/dist/ui/mobileweb/SeatSectionMobile.js +1 -1
- 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/flame_anim.json +1 -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/ServiceItemDesktop.tsx +57 -38
- package/src/components/ServiceItem/ServiceItemMobile.tsx +342 -286
- package/src/components/ServiceItem/mobileTypes.ts +30 -1
- package/src/components/ServiceItem/types.ts +24 -7
- package/src/styles.css +15 -0
- package/src/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.tsx +556 -0
- package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx +592 -0
- package/src/ui/SeatSection/SeatSection.tsx +11 -59
- package/src/ui/mobileweb/SeatSectionMobile.tsx +3 -2
- 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 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,
|
|
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, wowDealData, }: ServiceItemProps & {
|
|
4
4
|
currencySign?: string;
|
|
5
5
|
}): React.ReactElement;
|
|
6
6
|
export default ServiceItemPB;
|
|
@@ -23,6 +23,8 @@ import bombAnimation from "../../assets/images/anims/service_list/bomb.json";
|
|
|
23
23
|
import dotAnimation from "../../assets/images/anims/service_list/dot_animation.json";
|
|
24
24
|
import starAnimation from "../../assets/images/anims/service_list/star_anim.json";
|
|
25
25
|
import femaleAnimation from "../../assets/images/anims/service_list/female_anim.json";
|
|
26
|
+
import usersAnimation from "../../assets/images/anims/service_list/users_anim.json";
|
|
27
|
+
import flameAnimation from "../../assets/images/anims/service_list/flame_anim.json";
|
|
26
28
|
import RatingBlock from "../../ui/RatingBlock";
|
|
27
29
|
import DurationBlock from "../../ui/DurationBlock";
|
|
28
30
|
import PetBlock from "../../ui/PetBlock";
|
|
@@ -32,6 +34,8 @@ import KuposButton from "../../ui/KuposButton/KuposButton";
|
|
|
32
34
|
import BottomAmenities from "../../ui/BottomAmenities/BottomAmenities";
|
|
33
35
|
import SeatSection from "../../ui/SeatSection/SeatSection";
|
|
34
36
|
import DateTimeSection from "../../ui/DateTimeSection/DateTimeSection";
|
|
37
|
+
import FeatureServiceUi from "../../ui/FeatureServiceUI/FeatureServiceUi";
|
|
38
|
+
import thunderAnimation from "../../assets/images/anims/service_list/thunder_icon.json";
|
|
35
39
|
import ServiceBadges from "../../ui/ServiceBadges/ServiceBadges";
|
|
36
40
|
const SEAT_EXCEPTIONS = ["Asiento mascota"];
|
|
37
41
|
const ANIMATION_MAP = {
|
|
@@ -64,6 +68,9 @@ const ANIMATION_MAP = {
|
|
|
64
68
|
bombAnimation: {
|
|
65
69
|
kupos: bombAnimation,
|
|
66
70
|
},
|
|
71
|
+
thunderAnimation: {
|
|
72
|
+
kupos: thunderAnimation,
|
|
73
|
+
},
|
|
67
74
|
dotAnimation: {
|
|
68
75
|
kupos: dotAnimation,
|
|
69
76
|
},
|
|
@@ -73,13 +80,15 @@ const ANIMATION_MAP = {
|
|
|
73
80
|
femaaleAnimation: {
|
|
74
81
|
kupos: femaleAnimation,
|
|
75
82
|
},
|
|
83
|
+
usersAnimation: {
|
|
84
|
+
kupos: usersAnimation,
|
|
85
|
+
},
|
|
86
|
+
flameAnimation: {
|
|
87
|
+
kupos: flameAnimation,
|
|
88
|
+
},
|
|
76
89
|
};
|
|
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,
|
|
90
|
+
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, wowDealData, }) {
|
|
78
91
|
var _a;
|
|
79
|
-
const handleSeatSelect = (key, price) => {
|
|
80
|
-
onClearSeatSelectionError === null || onClearSeatSelectionError === void 0 ? void 0 : onClearSeatSelectionError();
|
|
81
|
-
onSeatSelect === null || onSeatSelect === void 0 ? void 0 : onSeatSelect(key, price);
|
|
82
|
-
};
|
|
83
92
|
const getAnimationIcon = (icon) => {
|
|
84
93
|
var _a;
|
|
85
94
|
const animation = ANIMATION_MAP[icon];
|
|
@@ -217,16 +226,6 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
217
226
|
});
|
|
218
227
|
return;
|
|
219
228
|
}
|
|
220
|
-
if (isTrain) {
|
|
221
|
-
if (!selectedSeatKey) {
|
|
222
|
-
onShowSeatSelectionError === null || onShowSeatSelectionError === void 0 ? void 0 : onShowSeatSelectionError(serviceItem.id);
|
|
223
|
-
return;
|
|
224
|
-
}
|
|
225
|
-
if (onTrainButtonClick) {
|
|
226
|
-
onTrainButtonClick();
|
|
227
|
-
return;
|
|
228
|
-
}
|
|
229
|
-
}
|
|
230
229
|
onBookButtonPress();
|
|
231
230
|
};
|
|
232
231
|
const items = [
|
|
@@ -257,7 +256,11 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
257
256
|
},
|
|
258
257
|
];
|
|
259
258
|
const otherItems = items.filter((i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition);
|
|
260
|
-
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(
|
|
259
|
+
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 &&
|
|
260
|
+
setIsFeatureDropDownExpand(isFeatureDropDownExpand === serviceItem.id ||
|
|
261
|
+
isFeatureDropDownExpand === true
|
|
262
|
+
? null
|
|
263
|
+
: serviceItem.id), selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle, wowDealData: wowDealData })) : (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) ||
|
|
261
264
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
|
|
262
265
|
showTopLabel
|
|
263
266
|
? "mt-[24px]"
|
|
@@ -289,13 +292,9 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
289
292
|
backgroundColor: "#ccc",
|
|
290
293
|
} }),
|
|
291
294
|
React.createElement("div", { className: "content-center" },
|
|
292
|
-
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
|
|
295
|
+
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 })),
|
|
293
296
|
React.createElement("div", { className: "relative" },
|
|
294
297
|
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 }),
|
|
295
|
-
showSeatSelectionError === serviceItem.id && isTrain && (React.createElement("div", { className: "flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]" },
|
|
296
|
-
React.createElement("div", { className: "text-[9px] text-center whitespace-nowrap", style: {
|
|
297
|
-
color: colors.seatPriceColor,
|
|
298
|
-
} }, "Selecciona el tipo de servicio"))),
|
|
299
298
|
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 &&
|
|
300
299
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[12px] mt-1 text-center", style: {
|
|
301
300
|
color: colors.seatPriceColor,
|
|
@@ -308,6 +307,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
308
307
|
transition: "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
|
|
309
308
|
position: "relative",
|
|
310
309
|
zIndex: hasOfferText || hasDpEnabled ? 0 : -1,
|
|
310
|
+
marginTop: isItemExpanded ? "" : "-10px",
|
|
311
311
|
} },
|
|
312
312
|
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
|
|
313
313
|
? {
|
|
@@ -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, wowDealData, }: 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, wowDealData, }) {
|
|
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, wowDealData: wowDealData })) : (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;
|
|
@@ -124,6 +124,19 @@ export interface MobileServiceItemProps {
|
|
|
124
124
|
directoIcon?: string;
|
|
125
125
|
whiteFireIcon?: string;
|
|
126
126
|
femaleAnim?: string;
|
|
127
|
+
thunderAnim?: string;
|
|
128
|
+
personsAnim?: string;
|
|
129
|
+
whiteOrigin?: string;
|
|
130
|
+
whiteDestination?: string;
|
|
131
|
+
userIcon?: string;
|
|
132
|
+
sheildIcon?: string;
|
|
133
|
+
busIcon?: string;
|
|
134
|
+
whiteDownArrow?: string;
|
|
135
|
+
empressaIcon?: string;
|
|
136
|
+
flexibleIcon?: string;
|
|
137
|
+
listoIcon?: string;
|
|
138
|
+
precioIcon?: string;
|
|
139
|
+
confirmarIcon?: string;
|
|
127
140
|
cancelTicketIcon?: string;
|
|
128
141
|
changeTicketIcon?: string;
|
|
129
142
|
petFriendlyIcon?: string;
|
|
@@ -133,6 +146,7 @@ export interface MobileServiceItemProps {
|
|
|
133
146
|
useLottieFor?: string[];
|
|
134
147
|
};
|
|
135
148
|
onBookButtonPress?: () => void;
|
|
149
|
+
onRemateUiButtonClick?: () => void;
|
|
136
150
|
terminals?: any[];
|
|
137
151
|
showDropdown?: boolean;
|
|
138
152
|
setShowDropdown?: (value: boolean) => void;
|
|
@@ -187,4 +201,23 @@ export interface MobileServiceItemProps {
|
|
|
187
201
|
label?: string;
|
|
188
202
|
icon?: string;
|
|
189
203
|
};
|
|
204
|
+
isFeatureDropDownExpand?: any;
|
|
205
|
+
setIsFeatureDropDownExpand?: (value: any) => void;
|
|
206
|
+
ticketQuantity?: number;
|
|
207
|
+
onIncreaseTicketQuantity?: (serviceItem: MobileServiceItemProps["serviceItem"]) => void;
|
|
208
|
+
onDecreaseTicketQuantity?: (serviceItem: MobileServiceItemProps["serviceItem"]) => void;
|
|
209
|
+
cityOrigin?: {
|
|
210
|
+
value: number;
|
|
211
|
+
label: string;
|
|
212
|
+
};
|
|
213
|
+
cityDestination?: {
|
|
214
|
+
value: number;
|
|
215
|
+
label: string;
|
|
216
|
+
};
|
|
217
|
+
isNewUi?: boolean;
|
|
218
|
+
selectedTimeSlot?: string;
|
|
219
|
+
onTimeSlotChange?: (slot: string) => void;
|
|
220
|
+
isTimeDropdownOpen?: string | number | null;
|
|
221
|
+
onTimeDropdownToggle?: (id?: string | number | null) => void;
|
|
222
|
+
wowDealData?: any;
|
|
190
223
|
}
|
|
@@ -129,11 +129,23 @@ 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
|
+
empressaIcon?: string;
|
|
139
|
+
flexibleIcon?: string;
|
|
140
|
+
listoIcon?: string;
|
|
141
|
+
precioIcon?: string;
|
|
142
|
+
confirmarIcon?: string;
|
|
132
143
|
[key: string]: string | Record<string, string | undefined> | undefined;
|
|
133
144
|
};
|
|
134
145
|
useLottieFor?: string[];
|
|
135
146
|
};
|
|
136
147
|
onBookButtonPress?: () => void;
|
|
148
|
+
onRemateUiButtonClick?: () => void;
|
|
137
149
|
terminals?: any[];
|
|
138
150
|
t?: (key: string) => string;
|
|
139
151
|
serviceDetailsLoading?: boolean;
|
|
@@ -213,6 +225,11 @@ export interface ServiceItemProps {
|
|
|
213
225
|
isAllinBus?: boolean;
|
|
214
226
|
isExpand?: any;
|
|
215
227
|
setIsExpand?: (value: any) => void;
|
|
228
|
+
isFeatureDropDownExpand?: any;
|
|
229
|
+
setIsFeatureDropDownExpand?: (value: any) => void;
|
|
230
|
+
ticketQuantity?: number;
|
|
231
|
+
onIncreaseTicketQuantity?: (serviceItem: ServiceItemProps["serviceItem"]) => void;
|
|
232
|
+
onDecreaseTicketQuantity?: (serviceItem: ServiceItemProps["serviceItem"]) => void;
|
|
216
233
|
coachKey?: number;
|
|
217
234
|
viewersConfig?: {
|
|
218
235
|
min: number;
|
|
@@ -221,14 +238,13 @@ export interface ServiceItemProps {
|
|
|
221
238
|
label?: string;
|
|
222
239
|
icon?: string;
|
|
223
240
|
};
|
|
241
|
+
isNewUi?: boolean;
|
|
224
242
|
showLoginModal?: any;
|
|
225
243
|
isLoggedIn?: any;
|
|
226
244
|
showLoginOption?: boolean;
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
onShowSeatSelectionError?: (serviceId: string) => void;
|
|
233
|
-
onClearSeatSelectionError?: () => void;
|
|
245
|
+
selectedTimeSlot?: string;
|
|
246
|
+
onTimeSlotChange?: (slot: string) => void;
|
|
247
|
+
isTimeDropdownOpen?: string | number | null;
|
|
248
|
+
onTimeDropdownToggle?: (id?: string | number | null) => void;
|
|
249
|
+
wowDealData?: any;
|
|
234
250
|
}
|