kupos-ui-components-lib 9.6.3 → 9.6.5
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/assets/images/anims/service_list/female_anim.json +1 -0
- package/dist/components/ServiceItem/PeruServiceItemDesktop.d.ts +1 -1
- package/dist/components/ServiceItem/PeruServiceItemDesktop.js +133 -189
- package/dist/components/ServiceItem/ServiceItemDesktop.d.ts +1 -1
- package/dist/components/ServiceItem/ServiceItemDesktop.js +8 -4
- package/dist/components/ServiceItem/ServiceItemMobile.js +8 -5
- package/dist/components/ServiceItem/mobileTypes.d.ts +5 -0
- package/dist/components/ServiceItem/types.d.ts +5 -3
- package/dist/styles.css +17 -2
- package/dist/types.d.ts +1 -0
- package/dist/ui/BottomAmenities/BottomAmenities.d.ts +2 -0
- package/dist/ui/BottomAmenities/BottomAmenities.js +4 -0
- package/dist/ui/ExpendedDropDown/ExpandedDropdown.d.ts +3 -1
- package/dist/ui/ExpendedDropDown/ExpandedDropdown.js +8 -1
- package/dist/ui/FemaleBlock.d.ts +9 -0
- package/dist/ui/FemaleBlock.js +19 -0
- package/dist/ui/OfferBanner.d.ts +2 -1
- package/dist/ui/OfferBanner.js +17 -6
- package/dist/ui/SeatSection/SeatSection.js +17 -9
- package/dist/ui/mobileweb/BottomAmenitiesMobile.d.ts +4 -1
- package/dist/ui/mobileweb/BottomAmenitiesMobile.js +8 -1
- package/dist/ui/mobileweb/DateTimeSectionMobile.d.ts +2 -1
- package/dist/ui/mobileweb/DateTimeSectionMobile.js +2 -2
- package/dist/ui/mobileweb/ExpandedDropdownMobile.d.ts +3 -1
- package/dist/ui/mobileweb/ExpandedDropdownMobile.js +8 -1
- package/dist/ui/mobileweb/SeatSectionMobile.d.ts +2 -1
- package/dist/ui/mobileweb/SeatSectionMobile.js +30 -15
- package/package.json +1 -1
- package/src/assets/images/anims/service_list/female_anim.json +1 -0
- package/src/components/ServiceItem/PeruServiceItemDesktop.tsx +255 -322
- package/src/components/ServiceItem/ServiceItemDesktop.tsx +8 -6
- package/src/components/ServiceItem/ServiceItemMobile.tsx +10 -70
- package/src/components/ServiceItem/mobileTypes.ts +5 -0
- package/src/components/ServiceItem/types.ts +5 -3
- package/src/types.ts +1 -0
- package/src/ui/BottomAmenities/BottomAmenities.tsx +14 -0
- package/src/ui/ExpendedDropDown/ExpandedDropdown.tsx +16 -0
- package/src/ui/FemaleBlock.tsx +45 -0
- package/src/ui/OfferBanner.tsx +24 -6
- package/src/ui/SeatSection/SeatSection.tsx +17 -8
- package/src/ui/mobileweb/BottomAmenitiesMobile.tsx +27 -0
- package/src/ui/mobileweb/DateTimeSectionMobile.tsx +3 -0
- package/src/ui/mobileweb/ExpandedDropdownMobile.tsx +15 -0
- package/src/ui/mobileweb/SeatSectionMobile.tsx +41 -32
|
@@ -18,7 +18,7 @@ const exceptions = [
|
|
|
18
18
|
"asiento_mascota",
|
|
19
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
|
-
var _a, _b, _c, _d, _e;
|
|
21
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
22
22
|
const isItemExpanded = serviceItem.id === isExpanded;
|
|
23
23
|
const isPetSeat = (Object.keys(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.pet_seat_info) || []).length > 0;
|
|
24
24
|
let isSoldOut = serviceItem.available_seats <= 0;
|
|
@@ -110,7 +110,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
110
110
|
React.createElement("span", { style: { lineHeight: "normal" } }, getServiceStars(serviceItem))),
|
|
111
111
|
React.createElement("div", { className: "flex items-center cursor-pointer ", style: { color: isSoldOut ? "#bbb" : "text-[#464647]" } },
|
|
112
112
|
React.createElement("span", { className: "ml-[3px] min-[420]:text-[13px] text-[12px] text-ellipsis overflow-hidden whitespace-nowrap max-w-[120px]" }, serviceItem.operator_details[2]))))) : null)),
|
|
113
|
-
React.createElement(DateTimeSectionMobile, { onBookButtonPress: onBookButtonPress, isCiva: isCiva, isSoldOut: isSoldOut, isLinatal: isLinatal, isPeru: isPeru, orignLabel: orignLabel, destinationLabel: destinationLabel, originIcon: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.origin, destinationIcon: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.destination, travelDate: serviceItem.travel_date, arrivalDate: serviceItem.arrival_date, depTime: serviceItem.dep_time, arrTime: serviceItem.arr_time, seatTypes: serviceItem.seat_types, seatPriceColor: colors.seatPriceColor, tooltipBgColor: colors.tooltipBgColor, currencySign: currencySign, availableSeats: serviceItem.available_seats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, showLastSeats: showLastSeats }),
|
|
113
|
+
React.createElement(DateTimeSectionMobile, { onBookButtonPress: onBookButtonPress, isCiva: isCiva, isSoldOut: isSoldOut, isLinatal: isLinatal, isPeru: isPeru, orignLabel: orignLabel, destinationLabel: destinationLabel, originIcon: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.origin, destinationIcon: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.destination, travelDate: serviceItem.travel_date, arrivalDate: serviceItem.arrival_date, depTime: serviceItem.dep_time, arrTime: serviceItem.arr_time, seatTypes: serviceItem.seat_types, seatPriceColor: colors.seatPriceColor, tooltipBgColor: colors.tooltipBgColor, currencySign: currencySign, availableSeats: serviceItem.available_seats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, showLastSeats: showLastSeats, discountSeatPriceColor: colors.discountSeatPriceColor }),
|
|
114
114
|
hasDiscount && (React.createElement("div", { className: "flex justify-end" }, isSoldOut ? (React.createElement("span", { className: "col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]" }, "Agotado")) : null)),
|
|
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: {
|
|
@@ -119,7 +119,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
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);
|
|
122
|
-
}, isPeru: isPeru })),
|
|
122
|
+
}, isPeru: isPeru, femaleAnim: serviceItem.icons.femaleAnim, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled })),
|
|
123
123
|
React.createElement(ServiceBadgesMobile, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, serviceItem: serviceItem, isConexion: isConexion })),
|
|
124
124
|
((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)) &&
|
|
125
125
|
!isSoldOut && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
|
|
@@ -130,7 +130,10 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
130
130
|
} },
|
|
131
131
|
React.createElement("div", { className: "flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]", style: { lineHeight: 1.6 } },
|
|
132
132
|
React.createElement("div", { className: "flex justify-between items-center" },
|
|
133
|
-
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
|
|
133
|
+
(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 : {}).length ===
|
|
135
|
+
0 &&
|
|
136
|
+
((_g = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _g !== void 0 ? _g : []).length === 0 ? (React.createElement("div", { className: "flex items-center gap-[6px]" },
|
|
134
137
|
React.createElement(LottiePlayer, { animationData: serviceItem.icons.starAnimation, width: "14px", height: "14px" }),
|
|
135
138
|
React.createElement("span", { className: "text-[#fff]" }, "M\u00E1s elegido"))) : (React.createElement("div", { className: `flex ${((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").length > 10 ? "items-start" : "items-center"}` },
|
|
136
139
|
React.createElement("div", { className: isLongOfferText ? "mt-[2px]" : "" },
|
|
@@ -177,6 +180,6 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
177
180
|
zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? -3 : undefined,
|
|
178
181
|
marginTop: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "-15px" : "-10px",
|
|
179
182
|
} },
|
|
180
|
-
React.createElement(ExpandedDropdownMobile, { serviceItem: serviceItem, isPeru: isPeru, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, isSoldOut: isSoldOut, isChangeTicket: serviceItem.is_change_ticket === true })))));
|
|
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 })))));
|
|
181
184
|
}
|
|
182
185
|
export default ServiceItemMobile;
|
|
@@ -34,11 +34,14 @@ export interface MobileServiceItemProps {
|
|
|
34
34
|
change_ticket_hours?: number;
|
|
35
35
|
duration?: number;
|
|
36
36
|
train_type_label?: string;
|
|
37
|
+
ladies_booked_seats?: string;
|
|
37
38
|
is_dp_enabled?: boolean;
|
|
38
39
|
offer_text?: string;
|
|
39
40
|
is_direct_trip?: boolean;
|
|
40
41
|
is_train_type?: boolean;
|
|
41
42
|
operator_service_name?: string;
|
|
43
|
+
dp_discount_percents?: Record<string, number>;
|
|
44
|
+
dp_discounted_seats?: string[];
|
|
42
45
|
dep_validation_text?: string;
|
|
43
46
|
metaData?: {};
|
|
44
47
|
is_tracking_enabled?: boolean;
|
|
@@ -120,6 +123,7 @@ export interface MobileServiceItemProps {
|
|
|
120
123
|
fireIcon?: string;
|
|
121
124
|
directoIcon?: string;
|
|
122
125
|
whiteFireIcon?: string;
|
|
126
|
+
femaleAnim?: string;
|
|
123
127
|
[key: string]: string | Record<string, string | undefined> | undefined;
|
|
124
128
|
};
|
|
125
129
|
useLottieFor?: string[];
|
|
@@ -160,6 +164,7 @@ export interface MobileServiceItemProps {
|
|
|
160
164
|
seatPriceColor?: string;
|
|
161
165
|
rightGradiantColor?: string;
|
|
162
166
|
leftGradiantColor?: string;
|
|
167
|
+
discountSeatPriceColor?: string;
|
|
163
168
|
};
|
|
164
169
|
isCiva?: boolean;
|
|
165
170
|
currencySign?: string;
|
|
@@ -39,15 +39,16 @@ export interface ServiceItemProps {
|
|
|
39
39
|
offer_text?: string;
|
|
40
40
|
is_direct_trip?: boolean;
|
|
41
41
|
is_dp_enabled?: boolean;
|
|
42
|
-
dp_discount_percents?:
|
|
43
|
-
dp_discounted_seats?:
|
|
44
|
-
original_dp_price?:
|
|
42
|
+
dp_discount_percents?: any;
|
|
43
|
+
dp_discounted_seats?: any;
|
|
44
|
+
original_dp_price?: any;
|
|
45
45
|
discount_type?: string;
|
|
46
46
|
discount_value?: number;
|
|
47
47
|
max_discount?: number;
|
|
48
48
|
is_transpordo?: boolean;
|
|
49
49
|
is_train_type?: boolean;
|
|
50
50
|
operator_service_name?: string;
|
|
51
|
+
ladies_booked_seats?: string;
|
|
51
52
|
dep_validation_text?: string;
|
|
52
53
|
metaData?: {};
|
|
53
54
|
is_tracking_enabled?: boolean;
|
|
@@ -222,4 +223,5 @@ export interface ServiceItemProps {
|
|
|
222
223
|
};
|
|
223
224
|
showLoginModal?: any;
|
|
224
225
|
isLoggedIn?: any;
|
|
226
|
+
showLoginOption?: boolean;
|
|
225
227
|
}
|
package/dist/styles.css
CHANGED
|
@@ -36,8 +36,8 @@
|
|
|
36
36
|
.-top-\[18px\] {
|
|
37
37
|
top: calc(18px * -1);
|
|
38
38
|
}
|
|
39
|
-
.top-1\/
|
|
40
|
-
top: calc(1/
|
|
39
|
+
.top-1\/3 {
|
|
40
|
+
top: calc(1/3 * 100%);
|
|
41
41
|
}
|
|
42
42
|
.top-\[2px\] {
|
|
43
43
|
top: 2px;
|
|
@@ -279,6 +279,9 @@
|
|
|
279
279
|
.ml-\[10px\] {
|
|
280
280
|
margin-left: 10px;
|
|
281
281
|
}
|
|
282
|
+
.ml-\[12px\] {
|
|
283
|
+
margin-left: 12px;
|
|
284
|
+
}
|
|
282
285
|
.ml-\[50px\] {
|
|
283
286
|
margin-left: 50px;
|
|
284
287
|
}
|
|
@@ -396,6 +399,12 @@
|
|
|
396
399
|
.w-\[115px\] {
|
|
397
400
|
width: 115px;
|
|
398
401
|
}
|
|
402
|
+
.w-\[120px\] {
|
|
403
|
+
width: 120px;
|
|
404
|
+
}
|
|
405
|
+
.w-\[130px\] {
|
|
406
|
+
width: 130px;
|
|
407
|
+
}
|
|
399
408
|
.w-\[150px\] {
|
|
400
409
|
width: 150px;
|
|
401
410
|
}
|
|
@@ -785,6 +794,9 @@
|
|
|
785
794
|
.pt-\[6px\] {
|
|
786
795
|
padding-top: 6px;
|
|
787
796
|
}
|
|
797
|
+
.pt-\[10px\] {
|
|
798
|
+
padding-top: 10px;
|
|
799
|
+
}
|
|
788
800
|
.pt-\[20px\] {
|
|
789
801
|
padding-top: 20px;
|
|
790
802
|
}
|
|
@@ -944,6 +956,9 @@
|
|
|
944
956
|
.text-\[\#fff\] {
|
|
945
957
|
color: #fff;
|
|
946
958
|
}
|
|
959
|
+
.text-\[red\] {
|
|
960
|
+
color: red;
|
|
961
|
+
}
|
|
947
962
|
.capitalize {
|
|
948
963
|
text-transform: capitalize;
|
|
949
964
|
}
|
package/dist/types.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import React from "react";
|
|
|
2
2
|
import LottiePlayer from "../../assets/LottiePlayer";
|
|
3
3
|
import FlexibleBlock from "../FlexibleBlock";
|
|
4
4
|
import PetBlock from "../PetBlock";
|
|
5
|
+
import FemaleBlock from "../FemaleBlock";
|
|
5
6
|
function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, isItemExpanded, colors, translation, getAnimationIcon, downArrowIcon, onToggleExpand, isPeru, }) {
|
|
6
7
|
const hasPetInfo = serviceItem.pet_seat_info &&
|
|
7
8
|
Object.keys(serviceItem.pet_seat_info).length > 0;
|
|
@@ -17,6 +18,9 @@ function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, i
|
|
|
17
18
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled) && (React.createElement("div", { className: grayscaleClass + " mr-[10px]" },
|
|
18
19
|
React.createElement(LottiePlayer, { animationData: getAnimationIcon("locationAnim"), width: "20px", height: "20px" }))),
|
|
19
20
|
serviceItem.is_change_ticket && (React.createElement(FlexibleBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, serviceItem: serviceItem, isSoldOut: isSoldOut })),
|
|
21
|
+
serviceItem.ladies_booked_seats &&
|
|
22
|
+
String(serviceItem.ladies_booked_seats).trim() !== "" &&
|
|
23
|
+
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true && (React.createElement(FemaleBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, serviceItem: serviceItem, isSoldOut: isSoldOut })),
|
|
20
24
|
hasPetInfo && (React.createElement(PetBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, isSoldOut: isSoldOut })),
|
|
21
25
|
isPeru ? null : (React.createElement("div", { className: `flex items-center cursor-pointer ml-[4px] transition-transform duration-300 w-[14px] h-[14px] ${isItemExpanded ? "rotate-180" : ""}`, onClick: onToggleExpand }, downArrowIcon)))));
|
|
22
26
|
}
|
|
@@ -11,6 +11,8 @@ interface ExpandedDropdownProps {
|
|
|
11
11
|
getAnimationIcon?: (iconName: string) => any;
|
|
12
12
|
isChangeTicket?: boolean;
|
|
13
13
|
isSoldOut?: boolean;
|
|
14
|
+
ladiesBookedSeats?: string;
|
|
15
|
+
isDpEnabled?: boolean;
|
|
14
16
|
}
|
|
15
|
-
declare function ExpandedDropdown({ serviceItem, isPeru, translation, getAnimationIcon, isChangeTicket, isSoldOut, }: ExpandedDropdownProps): React.ReactElement;
|
|
17
|
+
declare function ExpandedDropdown({ serviceItem, isPeru, translation, getAnimationIcon, isChangeTicket, isSoldOut, ladiesBookedSeats, isDpEnabled, }: ExpandedDropdownProps): React.ReactElement;
|
|
16
18
|
export default ExpandedDropdown;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import LottiePlayer from "../../assets/LottiePlayer";
|
|
3
|
-
function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAnimationIcon, isChangeTicket = false, isSoldOut, }) {
|
|
3
|
+
function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAnimationIcon, isChangeTicket = false, isSoldOut, ladiesBookedSeats, isDpEnabled, }) {
|
|
4
4
|
const hasPetInfo = serviceItem.pet_seat_info &&
|
|
5
5
|
Object.keys(serviceItem.pet_seat_info).length > 0;
|
|
6
6
|
return (React.createElement("div", { className: "px-[15px] pt-[26px] pb-[14px] -mt-[16px] pt-[35px] relative -z-9", style: {
|
|
@@ -29,6 +29,13 @@ function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAn
|
|
|
29
29
|
React.createElement(LottiePlayer, { animationData: getAnimationIcon("petFriendlyAnim"), width: "20px", height: "20px" }),
|
|
30
30
|
React.createElement("div", { className: "h-auto mr-[4px] text-[13px] text-[#464647] bold-text" },
|
|
31
31
|
React.createElement("span", null, translation === null || translation === void 0 ? void 0 : translation.petFriendly)))),
|
|
32
|
+
ladiesBookedSeats &&
|
|
33
|
+
String(ladiesBookedSeats).trim() !== "" &&
|
|
34
|
+
isDpEnabled === true && (React.createElement("div", { className: "flex gap-[6px]" },
|
|
35
|
+
React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
|
|
36
|
+
React.createElement("span", null,
|
|
37
|
+
React.createElement("span", { className: "bold-text" }, "Asientos para damas:"),
|
|
38
|
+
" Esta empresa cuenta con asientos recomendados para mujeres."))),
|
|
32
39
|
React.createElement("div", { className: "flex gap-[8px] text-[13.33px]" },
|
|
33
40
|
React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
|
|
34
41
|
React.createElement("span", null,
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
declare const FemaleBlock: ({ translation, getAnimationIcon, colors, serviceItem, isSoldOut, }: {
|
|
3
|
+
translation: any;
|
|
4
|
+
getAnimationIcon: any;
|
|
5
|
+
colors: any;
|
|
6
|
+
serviceItem: any;
|
|
7
|
+
isSoldOut: any;
|
|
8
|
+
}) => React.JSX.Element;
|
|
9
|
+
export default FemaleBlock;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import LottiePlayer from "../assets/LottiePlayer";
|
|
3
|
+
const FemaleBlock = ({ translation, getAnimationIcon, colors, serviceItem, isSoldOut, }) => (React.createElement("div", { className: "flex items-center" },
|
|
4
|
+
React.createElement("div", { className: "relative group cursor-pointer" },
|
|
5
|
+
React.createElement("div", { className: "flex items-center" },
|
|
6
|
+
React.createElement("div", { className: `mr-[5px] ${isSoldOut ? "grayscale" : ""}` },
|
|
7
|
+
React.createElement(LottiePlayer
|
|
8
|
+
// animationData={serviceItem.icons.flexibleAnim}
|
|
9
|
+
, {
|
|
10
|
+
// animationData={serviceItem.icons.flexibleAnim}
|
|
11
|
+
animationData: getAnimationIcon("femaaleAnimation"), width: "20px", height: "20px" }))),
|
|
12
|
+
React.createElement("div", { className: "hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[230px] text-center break-normal shadow-service text-[12px]", style: {
|
|
13
|
+
backgroundColor: colors.bottomStripColor,
|
|
14
|
+
lineHeight: "1.5",
|
|
15
|
+
zIndex: "1000",
|
|
16
|
+
} },
|
|
17
|
+
React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent ", style: { borderBottomColor: colors.bottomStripColor } }),
|
|
18
|
+
"Esta empresa cuenta con asientos recomendados para mujeres."))));
|
|
19
|
+
export default FemaleBlock;
|
package/dist/ui/OfferBanner.d.ts
CHANGED
|
@@ -3,12 +3,13 @@ import { ServiceItemProps } from "../components/ServiceItem/types";
|
|
|
3
3
|
interface OfferBannerProps {
|
|
4
4
|
offerGradient: string;
|
|
5
5
|
isSoldOut: boolean;
|
|
6
|
-
serviceItem: Pick<ServiceItemProps["serviceItem"], "is_dp_enabled" | "offer_text">;
|
|
6
|
+
serviceItem: Pick<ServiceItemProps["serviceItem"], "is_dp_enabled" | "offer_text" | "dp_discount_percents" | "dp_discounted_seats">;
|
|
7
7
|
renderIcon: (name: string, size: string) => React.ReactNode;
|
|
8
8
|
isLoggedIn: any;
|
|
9
9
|
showLoginModal: any;
|
|
10
10
|
viewersConfig: ServiceItemProps["viewersConfig"];
|
|
11
11
|
getAnimationIcon: (name: string) => any;
|
|
12
|
+
showLoginOption?: boolean;
|
|
12
13
|
}
|
|
13
14
|
declare const OfferBanner: React.FC<OfferBannerProps>;
|
|
14
15
|
export default OfferBanner;
|
package/dist/ui/OfferBanner.js
CHANGED
|
@@ -1,28 +1,34 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import LottiePlayer from "../assets/LottiePlayer";
|
|
3
3
|
import CommonService from "../utils/CommonService";
|
|
4
|
-
const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, renderIcon, isLoggedIn, showLoginModal, viewersConfig, getAnimationIcon, }) => {
|
|
4
|
+
const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, renderIcon, isLoggedIn, showLoginModal, viewersConfig, getAnimationIcon, showLoginOption }) => {
|
|
5
|
+
var _a, _b, _c, _d;
|
|
5
6
|
return (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: {
|
|
6
7
|
background: offerGradient,
|
|
7
8
|
opacity: isSoldOut ? 0.5 : 1,
|
|
8
9
|
// zIndex: 0,
|
|
9
10
|
} },
|
|
10
11
|
React.createElement("div", { className: "flex justify-between items-center w-full" },
|
|
11
|
-
React.createElement("div", { className: "flex items-center " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
|
|
12
|
+
React.createElement("div", { className: "flex items-center " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
|
|
13
|
+
Object.keys((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _a !== void 0 ? _a : {}).length === 0 &&
|
|
14
|
+
((_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _b !== void 0 ? _b : []).length === 0 ? (React.createElement("div", { className: "flex items-center gap-[5px]" },
|
|
12
15
|
React.createElement(LottiePlayer, { animationData: getAnimationIcon("starAnimation"), width: "18px", height: "18px" }),
|
|
13
16
|
React.createElement("span", null, "Servicio popular entre los usuarios"))) : (React.createElement("div", { className: "flex items-center" },
|
|
14
17
|
React.createElement(LottiePlayer, { animationData: getAnimationIcon("bombAnimation"), width: "18px", height: "18px" }),
|
|
15
18
|
React.createElement("div", { className: "flex items-center mt-[2px]" },
|
|
16
|
-
React.createElement("span", { className: "bold-text
|
|
19
|
+
React.createElement("span", { className: "bold-text", style: {
|
|
20
|
+
marginLeft: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "6px" : "3px",
|
|
21
|
+
} },
|
|
17
22
|
((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").length > 30
|
|
18
23
|
? ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").slice(0, 30) + "..."
|
|
19
24
|
: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "",
|
|
20
25
|
" ",
|
|
21
|
-
isLoggedIn ? null : (React.createElement("span", { onClick: showLoginModal, className: "cursor-pointer" }, "- registro")),
|
|
26
|
+
isLoggedIn && showLoginOption ? null : (React.createElement("span", { onClick: showLoginModal, className: "cursor-pointer" }, "- registro")),
|
|
22
27
|
" ",
|
|
23
28
|
"\u00A0"),
|
|
24
29
|
" ",
|
|
25
|
-
"|
|
|
30
|
+
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "|" : "",
|
|
31
|
+
"Termina en\u00A0",
|
|
26
32
|
React.createElement("span", { className: "bold-text text-end", ref: (node) => CommonService.startCountdown(node, 599), style: {
|
|
27
33
|
fontVariantNumeric: "tabular-nums",
|
|
28
34
|
display: "inline-block",
|
|
@@ -38,7 +44,12 @@ const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, renderIcon, isLogg
|
|
|
38
44
|
" |",
|
|
39
45
|
" ",
|
|
40
46
|
React.createElement("span", { className: "" },
|
|
41
|
-
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
|
|
47
|
+
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
|
|
48
|
+
Object.keys((_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _c !== void 0 ? _c : {}).length ===
|
|
49
|
+
0 &&
|
|
50
|
+
((_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _d !== void 0 ? _d : []).length === 0
|
|
51
|
+
? null
|
|
52
|
+
: "Quedan pocos • ",
|
|
42
53
|
React.createElement("span", { className: "bold-text", ref: (node) => CommonService.startComprandoCount(node, 4, 16), style: { fontVariantNumeric: "tabular-nums" } }),
|
|
43
54
|
" ",
|
|
44
55
|
"comprando")))))));
|
|
@@ -55,7 +55,7 @@ function getNumberOfSeats(seatTypes) {
|
|
|
55
55
|
return seatTypes.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
|
|
56
56
|
}
|
|
57
57
|
function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, }) {
|
|
58
|
-
var _a
|
|
58
|
+
var _a;
|
|
59
59
|
const uniqueSeats = getUniqueSeats(seatTypes);
|
|
60
60
|
const sortedSeatTypes = getSortedSeatTypes(seatTypes);
|
|
61
61
|
const numberOfSeats = getNumberOfSeats(seatTypes);
|
|
@@ -129,12 +129,16 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
|
|
|
129
129
|
// const dpDiscountEntry = Object.entries(
|
|
130
130
|
// serviceItem?.dp_discount_percents || {},
|
|
131
131
|
// ).find(([, percent]) => Number(percent));
|
|
132
|
-
const dpDiscountEntry = Object.entries((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) || {})[0];
|
|
132
|
+
const dpDiscountEntry = Object.entries((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) || {}).sort(([, a], [, b]) => Number(a) - Number(b))[0];
|
|
133
133
|
const dpDiscountPercent = dpDiscountEntry === null || dpDiscountEntry === void 0 ? void 0 : dpDiscountEntry[1];
|
|
134
|
-
const
|
|
134
|
+
const getLowestDpValue = (source) => {
|
|
135
135
|
if (!source)
|
|
136
136
|
return undefined;
|
|
137
|
-
|
|
137
|
+
const values = Array.isArray(source)
|
|
138
|
+
? source
|
|
139
|
+
: Object.values(source);
|
|
140
|
+
const nums = values.map(Number).filter((n) => !isNaN(n) && n > 0);
|
|
141
|
+
return nums.length > 0 ? Math.min(...nums) : undefined;
|
|
138
142
|
};
|
|
139
143
|
const renderDpDiscountUi = (originalDpPrice, seatTypeFare) => {
|
|
140
144
|
return (React.createElement("div", { className: "grid grid-cols-2 items-center text-[13.33px] relative" },
|
|
@@ -164,7 +168,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
|
|
|
164
168
|
} }))),
|
|
165
169
|
React.createElement("div", { className: "col-start-2 row-start-3 flex h-[30px] items-end justify-center relative" },
|
|
166
170
|
React.createElement("span", { className: "flex items-center gap-[6px] text-[22px] bold-text leading-[30px]", style: { color: isSoldOut ? "#c0c0c0" : "#ff5964" } },
|
|
167
|
-
React.createElement("div", { className: "absolute", style: { left: isPeru ? "-1px" : "-
|
|
171
|
+
React.createElement("div", { className: "absolute", style: { left: isPeru ? "-1px" : "-19px", bottom: "1px" } }, renderIcon("fireIcon", "16px")),
|
|
168
172
|
availableSeats <= 0
|
|
169
173
|
? CommonService.currency(0, currencySign)
|
|
170
174
|
: CommonService.discountedCurrency(Number(seatTypeFare), currencySign)))));
|
|
@@ -180,7 +184,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
|
|
|
180
184
|
React.createElement("span", { className: "text-[13.33px] font-normal leading-[24px] text-[#464647]" }, "Desde")),
|
|
181
185
|
React.createElement("div", null,
|
|
182
186
|
React.createElement("div", { className: "relative" },
|
|
183
|
-
React.createElement("div", { className: "absolute -left-[20px] top-1/
|
|
187
|
+
React.createElement("div", { className: "absolute -left-[20px] top-1/3 transform -translate-y-1/2" }, renderIcon("fireIcon", "16px")),
|
|
184
188
|
React.createElement("div", { className: "absolute bottom-[35px] left-1/2 -translate-x-1/2 ", style: {
|
|
185
189
|
animation: "pulse-zoom 2s ease-in-out infinite",
|
|
186
190
|
whiteSpace: "nowrap",
|
|
@@ -195,8 +199,11 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
|
|
|
195
199
|
: CommonService.discountedCurrency(lowestFare, currencySign))))));
|
|
196
200
|
}
|
|
197
201
|
if (dpDiscountEntry) {
|
|
198
|
-
const originalDpPrice =
|
|
199
|
-
const
|
|
202
|
+
const originalDpPrice = getLowestDpValue(serviceItem.original_dp_price);
|
|
203
|
+
const allFares = ((_a = serviceItem.seat_types) !== null && _a !== void 0 ? _a : [])
|
|
204
|
+
.map((st) => st.fare)
|
|
205
|
+
.filter((f) => f != null && !isNaN(Number(f)));
|
|
206
|
+
const seatTypeFare = allFares.length > 0 ? Math.min(...allFares) : originalDpPrice;
|
|
200
207
|
if (originalDpPrice && seatTypeFare) {
|
|
201
208
|
return renderDpDiscountUi(originalDpPrice, seatTypeFare);
|
|
202
209
|
}
|
|
@@ -232,7 +239,8 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
|
|
|
232
239
|
React.createElement("div", { className: "col-start-2 row-start-3 flex h-[30px] items-end justify-center relative" },
|
|
233
240
|
React.createElement("span", { className: "flex items-center gap-[6px] text-[22px] bold-text leading-[30px]", style: { color: isSoldOut ? "#c0c0c0" : discountSeatPriceColor } },
|
|
234
241
|
React.createElement("div", { className: "absolute", style: {
|
|
235
|
-
left: isPeru ? "-1px" : "-
|
|
242
|
+
left: isPeru ? "-1px" : "-18px",
|
|
243
|
+
bottom: "1px"
|
|
236
244
|
} }, renderIcon("fireIcon", "16px")),
|
|
237
245
|
availableSeats <= 0
|
|
238
246
|
? CommonService.currency(0, currencySign)
|
|
@@ -20,6 +20,9 @@ interface BottomAmenitiesMobileProps {
|
|
|
20
20
|
onDropdownToggle: () => void;
|
|
21
21
|
isItemExpanded?: boolean;
|
|
22
22
|
isPeru?: boolean;
|
|
23
|
+
femaleAnim?: any;
|
|
24
|
+
ladiesBookedSeats?: string;
|
|
25
|
+
isDpEnabled?: boolean;
|
|
23
26
|
}
|
|
24
|
-
declare function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration, isDirectTrip, directoColor, directoAnim, isChangeTicket, isPetSeat, petSeatInfo, petFriendlyAnim, flexibleAnim, isTrackingEnabled, locationAnim, downArrowIcon, showDropdown, setShowDropdown, onDropdownToggle, isItemExpanded, isPeru, }: BottomAmenitiesMobileProps): React.ReactElement;
|
|
27
|
+
declare function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration, isDirectTrip, directoColor, directoAnim, isChangeTicket, isPetSeat, petSeatInfo, petFriendlyAnim, flexibleAnim, isTrackingEnabled, locationAnim, downArrowIcon, showDropdown, setShowDropdown, onDropdownToggle, isItemExpanded, isPeru, femaleAnim, ladiesBookedSeats, isDpEnabled, }: BottomAmenitiesMobileProps): React.ReactElement;
|
|
25
28
|
export default BottomAmenitiesMobile;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import LottiePlayer from "../../assets/LottiePlayer";
|
|
3
|
-
function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration, isDirectTrip, directoColor, directoAnim, isChangeTicket, isPetSeat, petSeatInfo, petFriendlyAnim, flexibleAnim, isTrackingEnabled, locationAnim, downArrowIcon, showDropdown, setShowDropdown, onDropdownToggle, isItemExpanded, isPeru, }) {
|
|
3
|
+
function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration, isDirectTrip, directoColor, directoAnim, isChangeTicket, isPetSeat, petSeatInfo, petFriendlyAnim, flexibleAnim, isTrackingEnabled, locationAnim, downArrowIcon, showDropdown, setShowDropdown, onDropdownToggle, isItemExpanded, isPeru, femaleAnim, ladiesBookedSeats, isDpEnabled, }) {
|
|
4
4
|
return (React.createElement("div", { className: `${"flex justify-between items-center items-center "}` },
|
|
5
5
|
React.createElement("div", { className: "w-[55%] flex justify-between items-center" },
|
|
6
6
|
React.createElement("div", { style: { opacity: isSoldOut ? 0.5 : 1 } }, amenitiesNodes),
|
|
@@ -22,6 +22,13 @@ function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration,
|
|
|
22
22
|
React.createElement("div", { className: "flex items-center" },
|
|
23
23
|
React.createElement("div", { className: `mr-[5px] ${isSoldOut ? "grayscale" : ""}` },
|
|
24
24
|
React.createElement(LottiePlayer, { animationData: flexibleAnim, width: "16px", height: "16px" })))))),
|
|
25
|
+
ladiesBookedSeats &&
|
|
26
|
+
String(ladiesBookedSeats).trim() !== "" &&
|
|
27
|
+
isDpEnabled === true && (React.createElement("div", { className: "flex items-center" },
|
|
28
|
+
React.createElement("div", { className: "relative group cursor-default" },
|
|
29
|
+
React.createElement("div", { className: "flex items-center" },
|
|
30
|
+
React.createElement("div", { className: `mr-[5px] ${isSoldOut ? "grayscale" : ""}` },
|
|
31
|
+
React.createElement(LottiePlayer, { animationData: femaleAnim, width: "16px", height: "16px" })))))),
|
|
25
32
|
isTrackingEnabled && (React.createElement("div", { className: "flex items-center mr-[10px]" },
|
|
26
33
|
React.createElement("div", { className: `h-auto mr-[4px] min-[420]:text-[13px] text-[11px] text-[#464647] ${isSoldOut ? "grayscale" : ""}` },
|
|
27
34
|
React.createElement(LottiePlayer, { animationData: locationAnim, width: "16px", height: "16px" }))))))),
|
|
@@ -21,6 +21,7 @@ interface DateTimeSectionMobileProps {
|
|
|
21
21
|
serviceItem?: any;
|
|
22
22
|
tooltipBgColor?: string;
|
|
23
23
|
showLastSeats?: boolean;
|
|
24
|
+
discountSeatPriceColor?: string;
|
|
24
25
|
}
|
|
25
|
-
declare function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, }: DateTimeSectionMobileProps): React.ReactElement;
|
|
26
|
+
declare function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, }: DateTimeSectionMobileProps): React.ReactElement;
|
|
26
27
|
export default DateTimeSectionMobile;
|
|
@@ -31,7 +31,7 @@ const TimeRow = ({ label, icon, alt, date, timeContent, isSoldOut, }) => (React.
|
|
|
31
31
|
React.createElement("span", { className: "cursor-pointer black-text" }, DateService.getServiceItemDate(date)),
|
|
32
32
|
React.createElement("div", { className: "absolute left-[50%]" }, "\u2022"),
|
|
33
33
|
React.createElement("div", { className: "font-[900] relative black-text" }, timeContent)))));
|
|
34
|
-
function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, }) {
|
|
34
|
+
function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, }) {
|
|
35
35
|
const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
|
|
36
36
|
const depTimeContent = isLinatal ? (React.createElement("div", null,
|
|
37
37
|
React.createElement("span", null,
|
|
@@ -52,6 +52,6 @@ function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal
|
|
|
52
52
|
backgroundColor: "#ccc",
|
|
53
53
|
margin: "auto",
|
|
54
54
|
} }),
|
|
55
|
-
React.createElement(SeatSectionMobile, { seatTypes: seatTypes, isSoldOut: isSoldOut, isPeru: isPeru, seatPriceColor: seatPriceColor, currencySign: currencySign, availableSeats: availableSeats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, tooltipBgColor: tooltipBgColor, showLastSeats: showLastSeats })));
|
|
55
|
+
React.createElement(SeatSectionMobile, { seatTypes: seatTypes, isSoldOut: isSoldOut, isPeru: isPeru, seatPriceColor: seatPriceColor, currencySign: currencySign, availableSeats: availableSeats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, tooltipBgColor: tooltipBgColor, showLastSeats: showLastSeats, discountSeatPriceColor: discountSeatPriceColor })));
|
|
56
56
|
}
|
|
57
57
|
export default DateTimeSectionMobile;
|
|
@@ -11,6 +11,8 @@ interface ExpandedDropdownMobileProps {
|
|
|
11
11
|
petFriendlyAnim?: any;
|
|
12
12
|
isSoldOut?: boolean;
|
|
13
13
|
isChangeTicket?: boolean;
|
|
14
|
+
ladiesBookedSeats?: string;
|
|
15
|
+
isDpEnabled?: boolean;
|
|
14
16
|
}
|
|
15
|
-
declare function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyAnim, isSoldOut, isChangeTicket, }: ExpandedDropdownMobileProps): React.ReactElement;
|
|
17
|
+
declare function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyAnim, isSoldOut, isChangeTicket, ladiesBookedSeats, isDpEnabled, }: ExpandedDropdownMobileProps): React.ReactElement;
|
|
16
18
|
export default ExpandedDropdownMobile;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import LottiePlayer from "../../assets/LottiePlayer";
|
|
3
|
-
function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyAnim, isSoldOut, isChangeTicket = false, }) {
|
|
3
|
+
function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyAnim, isSoldOut, isChangeTicket = false, ladiesBookedSeats, isDpEnabled, }) {
|
|
4
4
|
return (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[12px] relative -z-9", style: {
|
|
5
5
|
backgroundColor: "#ffefef",
|
|
6
6
|
borderRadius: "0 0 14px 14px",
|
|
@@ -24,6 +24,13 @@ function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyA
|
|
|
24
24
|
React.createElement("span", null,
|
|
25
25
|
React.createElement("span", { className: "bold-text" }, "Pasaje flexible:"),
|
|
26
26
|
" Esta empresa no permite cambios de pasajes")))),
|
|
27
|
+
ladiesBookedSeats &&
|
|
28
|
+
String(ladiesBookedSeats).trim() !== "" &&
|
|
29
|
+
isDpEnabled === true && (React.createElement("div", { className: "flex gap-[6px]" },
|
|
30
|
+
React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
|
|
31
|
+
React.createElement("span", null,
|
|
32
|
+
React.createElement("span", { className: "bold-text" }, "Asientos para damas:"),
|
|
33
|
+
" Esta empresa cuenta con asientos recomendados para mujeres."))),
|
|
27
34
|
petSeatInfo && Object.keys(petSeatInfo).length > 0 ? (React.createElement("div", { className: "flex items-center" },
|
|
28
35
|
React.createElement("div", { className: `relative group cursor-default ` },
|
|
29
36
|
React.createElement("div", { className: "flex items-center" },
|
|
@@ -15,6 +15,7 @@ interface SeatSectionMobileProps {
|
|
|
15
15
|
serviceItem?: any;
|
|
16
16
|
tooltipBgColor?: string;
|
|
17
17
|
showLastSeats?: boolean;
|
|
18
|
+
discountSeatPriceColor?: string;
|
|
18
19
|
}
|
|
19
|
-
declare function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, }: SeatSectionMobileProps): React.ReactElement;
|
|
20
|
+
declare function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, }: SeatSectionMobileProps): React.ReactElement;
|
|
20
21
|
export default SeatSectionMobile;
|
|
@@ -42,9 +42,8 @@ const getUniqueSeats = (data, limit) => {
|
|
|
42
42
|
.sort((a, b) => a.fare - b.fare)
|
|
43
43
|
.slice(0, limit);
|
|
44
44
|
};
|
|
45
|
-
function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, }) {
|
|
45
|
+
function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, }) {
|
|
46
46
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
47
|
-
console.log("🚀 ~ SeatSectionMobile ~ serviceItem:", serviceItem);
|
|
48
47
|
const hasMultipleTypes = ((_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.length) !== null && _a !== void 0 ? _a : 0) > 2;
|
|
49
48
|
const getFare = (fare) => {
|
|
50
49
|
if (removeDuplicateSeats && availableSeats <= 0 && !isPeru) {
|
|
@@ -126,17 +125,29 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
|
|
|
126
125
|
: discountedSeats === null || discountedSeats === void 0 ? void 0 : discountedSeats.some((s) => s.originalPrice !== s.discountedPrice);
|
|
127
126
|
const discountSeat = isPeru && peruDiscountCalc
|
|
128
127
|
? Object.assign({ label: "", fare: peruLowestFare }, peruDiscountCalc) : (_d = discountedSeats === null || discountedSeats === void 0 ? void 0 : discountedSeats.filter((seat) => !EXCEPTIONS.includes(seat.label))) === null || _d === void 0 ? void 0 : _d.sort((a, b) => a.discountedPrice - b.discountedPrice)[0];
|
|
129
|
-
const discountValue = (
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
? serviceItem.
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
128
|
+
const discountValue = (() => {
|
|
129
|
+
if ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_type) === "percentage" &&
|
|
130
|
+
typeof (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) === "number") {
|
|
131
|
+
return Math.round(serviceItem.discount_value);
|
|
132
|
+
}
|
|
133
|
+
if ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_type) === "fixed" && discountSeat) {
|
|
134
|
+
const { originalPrice, discountedPrice } = discountSeat;
|
|
135
|
+
if (originalPrice > 0 && originalPrice !== discountedPrice) {
|
|
136
|
+
return Math.round(((originalPrice - discountedPrice) / originalPrice) * 100);
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
return null;
|
|
140
|
+
})();
|
|
141
|
+
const getMinValue = (data) => {
|
|
142
|
+
const vals = (Array.isArray(data) ? data : Object.values(data || {})).map(Number);
|
|
143
|
+
if (!vals.length)
|
|
144
|
+
return undefined;
|
|
145
|
+
const min = Math.min(...vals);
|
|
146
|
+
return isFinite(min) ? min : undefined;
|
|
147
|
+
};
|
|
148
|
+
const originalDpPrice = getMinValue(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.original_dp_price);
|
|
149
|
+
const dpDiscountPercent = getMinValue(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents);
|
|
150
|
+
const firstSeatFare = (_f = (_e = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label) && !EXCEPTIONS.includes(item.label))) === null || _e === void 0 ? void 0 : _e.sort((a, b) => a.fare - b.fare)[0]) === null || _f === void 0 ? void 0 : _f.fare;
|
|
140
151
|
const hasDpDiscount = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) &&
|
|
141
152
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) &&
|
|
142
153
|
originalDpPrice != null &&
|
|
@@ -172,7 +183,9 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
|
|
|
172
183
|
transformOrigin: "center",
|
|
173
184
|
} })),
|
|
174
185
|
React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[24px]", style: { color: isSoldOut ? "#bbb" : "#464647" } }, "Desde"),
|
|
175
|
-
React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: {
|
|
186
|
+
React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: {
|
|
187
|
+
color: isSoldOut ? "#bbb" : discountSeatPriceColor || "#ff5964",
|
|
188
|
+
} },
|
|
176
189
|
((_h = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _h === void 0 ? void 0 : _h.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { filter: isSoldOut ? "grayscale" : "" } })) : null,
|
|
177
190
|
commonService.discountedCurrency(Number(firstSeatFare), currencySign)),
|
|
178
191
|
isSoldOut ? (React.createElement("span", { className: "col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]" }, "Agotado")) : null)) : hasDiscount && discountSeat ? (React.createElement("div", null,
|
|
@@ -204,7 +217,9 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
|
|
|
204
217
|
transformOrigin: "center",
|
|
205
218
|
} })),
|
|
206
219
|
React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[24px]", style: { color: isSoldOut ? "#bbb" : "#464647" } }, "Desde"),
|
|
207
|
-
React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: {
|
|
220
|
+
React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: {
|
|
221
|
+
color: isSoldOut ? "#bbb" : discountSeatPriceColor || "#ff5964",
|
|
222
|
+
} },
|
|
208
223
|
((_j = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _j === void 0 ? void 0 : _j.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { opacity: isSoldOut ? 0.5 : 1 } })) : null,
|
|
209
224
|
commonService.discountedCurrency(discountSeat.discountedPrice, currencySign))))) : (React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem] ", style: {
|
|
210
225
|
gap: isSoldOut ? "0px" : "5px",
|