kupos-ui-components-lib 10.4.62 → 10.4.64
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/FilterBar/FilterBarDesktop.js +10 -0
- package/dist/components/FilterBar/ServiceFilter.d.ts +1 -0
- package/dist/components/FilterBar/ServiceFilter.js +10 -4
- package/dist/components/ServiceItem/PeruServiceItemDesktop.js +3 -1
- package/dist/components/ServiceItem/PeruServiceItemMobile.js +5 -3
- package/dist/components/ServiceItem/ServiceItemDesktop.d.ts +1 -1
- package/dist/components/ServiceItem/ServiceItemDesktop.js +7 -5
- package/dist/components/ServiceItem/ServiceItemMobile.d.ts +1 -1
- package/dist/components/ServiceItem/ServiceItemMobile.js +14 -16
- package/dist/components/ServiceItem/mobileTypes.d.ts +3 -0
- package/dist/components/ServiceItem/types.d.ts +3 -0
- package/dist/styles.css +3 -0
- package/dist/ui/OfferBanner.d.ts +1 -1
- package/dist/ui/OfferBanner.js +9 -5
- package/dist/ui/PeruOfferBanner.d.ts +1 -1
- package/dist/ui/PeruOfferBanner.js +5 -1
- package/dist/ui/RatingBlock.d.ts +1 -1
- package/dist/ui/RatingBlock.js +7 -3
- package/dist/ui/SeatSection/SeatSection.js +28 -13
- package/dist/ui/ServiceBadges/ServiceBadges.js +1 -1
- package/dist/ui/mobileweb/SeatSectionMobile.js +10 -5
- package/dist/utils/CommonService.d.ts +7 -0
- package/dist/utils/CommonService.js +6 -0
- package/package.json +1 -1
- package/src/components/FilterBar/FilterBarDesktop.tsx +16 -0
- package/src/components/FilterBar/ServiceFilter.tsx +12 -2
- package/src/components/ServiceItem/PeruServiceItemDesktop.tsx +4 -1
- package/src/components/ServiceItem/PeruServiceItemMobile.tsx +6 -3
- package/src/components/ServiceItem/ServiceItemDesktop.tsx +9 -3
- package/src/components/ServiceItem/ServiceItemMobile.tsx +25 -14
- package/src/components/ServiceItem/mobileTypes.ts +3 -0
- package/src/components/ServiceItem/types.ts +3 -0
- package/src/ui/OfferBanner.tsx +10 -5
- package/src/ui/PeruOfferBanner.tsx +7 -1
- package/src/ui/RatingBlock.tsx +7 -2
- package/src/ui/SeatSection/SeatSection.tsx +53 -29
- package/src/ui/ServiceBadges/ServiceBadges.tsx +1 -1
- package/src/ui/mobileweb/SeatSectionMobile.tsx +30 -20
- package/src/utils/CommonService.ts +13 -0
|
@@ -175,6 +175,16 @@ const FilterBarDesktop = ({ t, serviceList, setServiceList, allSchedules, showRe
|
|
|
175
175
|
return true;
|
|
176
176
|
});
|
|
177
177
|
}
|
|
178
|
+
if (fil.type == "service_type") {
|
|
179
|
+
const activeOptions = fil.options.filter((it) => it.active);
|
|
180
|
+
if (activeOptions.length) {
|
|
181
|
+
filteredRoutes = filteredRoutes.filter((it) => activeOptions.some((f) => f.value ===
|
|
182
|
+
String(it.service_type || "")
|
|
183
|
+
.trim()
|
|
184
|
+
.replace(/\s+/g, " ")
|
|
185
|
+
.toLowerCase()));
|
|
186
|
+
}
|
|
187
|
+
}
|
|
178
188
|
if (fil.type == "operator") {
|
|
179
189
|
let activeOptions = fil.options.filter((it) => it.active);
|
|
180
190
|
filteredRoutes = filteredRoutes.filter((it) => {
|
|
@@ -9,6 +9,7 @@ interface ServiceFilterBarDesktopState {
|
|
|
9
9
|
showTrainType: boolean;
|
|
10
10
|
addMargin: boolean;
|
|
11
11
|
showAmenities: boolean;
|
|
12
|
+
showServiceType: boolean;
|
|
12
13
|
sortedFilters: any[];
|
|
13
14
|
}
|
|
14
15
|
declare class ServiceFilter extends React.Component<ServiceFilterProps, ServiceFilterBarDesktopState> {
|
|
@@ -23,6 +23,7 @@ class ServiceFilter extends React.Component {
|
|
|
23
23
|
showTrainType: ((_f = props.initialOpenFilters) === null || _f === void 0 ? void 0 : _f.includes("train_type")) || true,
|
|
24
24
|
addMargin: false,
|
|
25
25
|
showAmenities: ((_g = props.initialOpenFilters) === null || _g === void 0 ? void 0 : _g.includes("amenities")) || true,
|
|
26
|
+
showServiceType: true,
|
|
26
27
|
sortedFilters: this.sortFilters(props.filtersArray),
|
|
27
28
|
};
|
|
28
29
|
this.handleScroll = this.handleScroll.bind(this);
|
|
@@ -53,6 +54,7 @@ class ServiceFilter extends React.Component {
|
|
|
53
54
|
const FILTER_ORDER = [
|
|
54
55
|
"time",
|
|
55
56
|
"operator",
|
|
57
|
+
"service_type",
|
|
56
58
|
"special_departure",
|
|
57
59
|
"tipo",
|
|
58
60
|
"seat_types",
|
|
@@ -120,18 +122,21 @@ class ServiceFilter extends React.Component {
|
|
|
120
122
|
? !prevState.showTrainType
|
|
121
123
|
: prevState.showTrainType, showAmenities: type === "amenities"
|
|
122
124
|
? !prevState.showAmenities
|
|
123
|
-
: prevState.showAmenities
|
|
125
|
+
: prevState.showAmenities, showServiceType: type === "service_type"
|
|
126
|
+
? !prevState.showServiceType
|
|
127
|
+
: prevState.showServiceType });
|
|
124
128
|
});
|
|
125
129
|
}
|
|
126
130
|
renderFilterItem(option, onClick, key) {
|
|
127
|
-
const { showOperators, showTimeOptions, showSeatOptions, showTypeOptions, showSpecialDeparture, showTrainType, showAmenities, } = this.state;
|
|
131
|
+
const { showOperators, showTimeOptions, showSeatOptions, showTypeOptions, showSpecialDeparture, showTrainType, showAmenities, showServiceType, } = this.state;
|
|
128
132
|
const isOpen = (option.type === "operator" && showOperators) ||
|
|
129
133
|
(option.type === "time" && showTimeOptions) ||
|
|
130
134
|
(option.type === "seat_types" && showSeatOptions) ||
|
|
131
135
|
(option.type === "tipo" && showTypeOptions) ||
|
|
132
136
|
(option.type === "special_departure" && showSpecialDeparture) ||
|
|
133
137
|
(option.type === "train_type" && showTrainType) ||
|
|
134
|
-
(option.type === "amenities" && showAmenities)
|
|
138
|
+
(option.type === "amenities" && showAmenities) ||
|
|
139
|
+
(option.type === "service_type" && showServiceType);
|
|
135
140
|
if ((option === null || option === void 0 ? void 0 : option.type) === "train_type" && !this.props.isTrain) {
|
|
136
141
|
return null;
|
|
137
142
|
}
|
|
@@ -159,7 +164,8 @@ class ServiceFilter extends React.Component {
|
|
|
159
164
|
option.type !== "seat_types" &&
|
|
160
165
|
option.type !== "tipo" &&
|
|
161
166
|
option.type !== "special_departure" &&
|
|
162
|
-
option.type !== "train_type"
|
|
167
|
+
option.type !== "train_type" &&
|
|
168
|
+
option.type !== "service_type")) &&
|
|
163
169
|
option.options.map((val, i) => {
|
|
164
170
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
165
171
|
let iconKey = "";
|
|
@@ -110,7 +110,9 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
|
|
|
110
110
|
return label;
|
|
111
111
|
})();
|
|
112
112
|
let isSoldOut = serviceItem.available_seats <= 0;
|
|
113
|
-
|
|
113
|
+
// show_dp_ui: false renders a DP service with the regular card UI
|
|
114
|
+
const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true &&
|
|
115
|
+
!CommonService.isDpUiHidden(serviceItem);
|
|
114
116
|
const peruDiscount = (_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discounts) === null || _a === void 0 ? void 0 : _a[0];
|
|
115
117
|
const uiType = peruDiscount === null || peruDiscount === void 0 ? void 0 : peruDiscount.ui_type;
|
|
116
118
|
const renderIcon = (iconKey, size = "14px") => {
|
|
@@ -33,7 +33,9 @@ function PeruServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStag
|
|
|
33
33
|
const displayOfferText = offerText.length > OFFER_TEXT_MAX_CHARS
|
|
34
34
|
? `${offerText.slice(0, OFFER_TEXT_MAX_CHARS).trimEnd()}...`
|
|
35
35
|
: offerText;
|
|
36
|
-
|
|
36
|
+
// show_dp_ui: false renders a DP service with the regular card UI
|
|
37
|
+
const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true &&
|
|
38
|
+
!commonService.isDpUiHidden(serviceItem);
|
|
37
39
|
const hasDpRibbon = hasDpEnabled && Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents);
|
|
38
40
|
// ui_type comes from the active discount entry: 1 = offer-text-only tier,
|
|
39
41
|
// 2 = full new-UI tier (timer, bomb animation, viewers).
|
|
@@ -117,7 +119,7 @@ function PeruServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStag
|
|
|
117
119
|
const dropoffName = ((_f = serviceItem.stage_details_arr) === null || _f === void 0 ? void 0 : _f.length)
|
|
118
120
|
? extractStage(serviceItem.stage_details_arr, 1)
|
|
119
121
|
: null;
|
|
120
|
-
return (React.createElement("div", { className: `relative ${!hasOfferText || !
|
|
122
|
+
return (React.createElement("div", { className: `relative ${!hasOfferText || !hasDpEnabled ? "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) ||
|
|
121
123
|
isConexion ||
|
|
122
124
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
|
|
123
125
|
showTopLabel ||
|
|
@@ -185,7 +187,7 @@ function PeruServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStag
|
|
|
185
187
|
} },
|
|
186
188
|
React.createElement("div", { className: "flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]", style: { lineHeight: 1.6 } },
|
|
187
189
|
React.createElement("div", { className: "flex justify-between items-center" },
|
|
188
|
-
|
|
190
|
+
hasDpEnabled &&
|
|
189
191
|
Object.keys((_s = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _s !== void 0 ? _s : {}).length ===
|
|
190
192
|
0 &&
|
|
191
193
|
((_t = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _t !== void 0 ? _t : []).length === 0 ? (React.createElement("div", { className: "flex items-center gap-[6px]" },
|
|
@@ -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, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel, priority_stage_ids, isShowSeatIcon, showDesdeLabel, }: ServiceItemProps & {
|
|
3
|
+
declare function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel, priority_stage_ids, isShowSeatIcon, showDesdeLabel, showServiceTypeUnderLogo, }: ServiceItemProps & {
|
|
4
4
|
currencySign?: string;
|
|
5
5
|
}): React.ReactElement;
|
|
6
6
|
export default ServiceItemPB;
|
|
@@ -87,7 +87,7 @@ const ANIMATION_MAP = {
|
|
|
87
87
|
kupos: flameAnimation,
|
|
88
88
|
},
|
|
89
89
|
};
|
|
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, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel, priority_stage_ids, isShowSeatIcon = false, showDesdeLabel = false, }) {
|
|
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, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel, priority_stage_ids, isShowSeatIcon = false, showDesdeLabel = false, showServiceTypeUnderLogo = false, }) {
|
|
91
91
|
var _a, _b, _c;
|
|
92
92
|
const handleSeatSelect = (key, price, seatKey, apiSeatType) => {
|
|
93
93
|
onClearSeatSelectionError === null || onClearSeatSelectionError === void 0 ? void 0 : onClearSeatSelectionError();
|
|
@@ -165,9 +165,11 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
165
165
|
}
|
|
166
166
|
return false;
|
|
167
167
|
})();
|
|
168
|
+
// show_dp_ui: false renders a DP service with the regular card UI
|
|
169
|
+
const isDpUiHidden = CommonService.isDpUiHidden(serviceItem);
|
|
168
170
|
const dpDiscountEntry = Object.entries((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) || {})[0];
|
|
169
|
-
const dpDiscountPercent = dpDiscountEntry === null || dpDiscountEntry === void 0 ? void 0 : dpDiscountEntry[1];
|
|
170
|
-
const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true;
|
|
171
|
+
const dpDiscountPercent = isDpUiHidden ? undefined : dpDiscountEntry === null || dpDiscountEntry === void 0 ? void 0 : dpDiscountEntry[1];
|
|
172
|
+
const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true && !isDpUiHidden;
|
|
171
173
|
const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
|
|
172
174
|
const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
|
|
173
175
|
const serviceCardStyle = ((isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
|
|
@@ -356,7 +358,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
356
358
|
React.createElement("div", null,
|
|
357
359
|
React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `h-[30px] w-[auto] ${isSoldOut ? "grayscale" : ""}` }),
|
|
358
360
|
isCiva ? (React.createElement("div", { className: "text-[13.33px] black-text ml-2" }, serviceItem.operator_details[2])) : null),
|
|
359
|
-
React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru, isTrain: isTrain })),
|
|
361
|
+
React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru, isTrain: isTrain, showServiceTypeUnderLogo: showServiceTypeUnderLogo })),
|
|
360
362
|
React.createElement(DateTimeSection, { serviceItem: serviceItem, isSoldOut: isSoldOut, isCiva: isCiva, isLinatal: isLinatal, removeArrivalTime: removeArrivalTime, orignLabel: orignLabel, destinationLabel: destinationLabel, busStage: busStage, metaData: metaData, colors: colors }),
|
|
361
363
|
React.createElement("div", { style: {
|
|
362
364
|
width: "1px",
|
|
@@ -376,7 +378,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
376
378
|
color: colors.seatPriceColor,
|
|
377
379
|
} }, "\u00A1\u00DAltimos Asientos!")))) : null)),
|
|
378
380
|
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 &&
|
|
379
|
-
setIsExpand(isItemExpanded ? null : serviceItem.id), isPeru: isPeru, isTrain: isTrain, isDpEnabled: serviceItem.is_dp_enabled, serviceType: serviceItem.service_type, renderIcon: renderIcon }))),
|
|
381
|
+
setIsExpand(isItemExpanded ? null : serviceItem.id), isPeru: isPeru, isTrain: isTrain, isDpEnabled: serviceItem.is_dp_enabled, serviceType: showServiceTypeUnderLogo ? undefined : serviceItem.service_type, renderIcon: renderIcon }))),
|
|
380
382
|
isPeru ? null : (React.createElement("div", { style: {
|
|
381
383
|
display: "grid",
|
|
382
384
|
gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
|
|
@@ -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, operatorLabel, isTrain, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, isAllinBus, isPeruSite, priority_stage_ids, isShowSeatIcon, showDesdeLabel, }: 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, operatorLabel, isTrain, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, isAllinBus, isPeruSite, priority_stage_ids, isShowSeatIcon, showDesdeLabel, showServiceTypeUnderLogo, }: MobileServiceItemProps): React.ReactElement;
|
|
4
4
|
export default ServiceItemMobile;
|
|
@@ -19,7 +19,7 @@ const exceptions = [
|
|
|
19
19
|
"blanco",
|
|
20
20
|
"asiento_mascota",
|
|
21
21
|
];
|
|
22
|
-
function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, operatorLabel, isTrain, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, isAllinBus, isPeruSite, priority_stage_ids, isShowSeatIcon = false, showDesdeLabel = false, }) {
|
|
22
|
+
function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, operatorLabel, isTrain, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, isAllinBus, isPeruSite, priority_stage_ids, isShowSeatIcon = false, showDesdeLabel = false, showServiceTypeUnderLogo = false, }) {
|
|
23
23
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
24
24
|
const isItemExpanded = serviceItem.id === isExpanded;
|
|
25
25
|
const isPetSeat = (Object.keys(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.pet_seat_info) || []).length > 0;
|
|
@@ -32,13 +32,15 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
32
32
|
const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
|
|
33
33
|
const isLongOfferText = (((_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) === null || _d === void 0 ? void 0 : _d.length) || 0) > 35;
|
|
34
34
|
const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true;
|
|
35
|
+
// show_dp_ui: false renders a DP service with the regular card UI
|
|
36
|
+
const showDpUi = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && !commonService.isDpUiHidden(serviceItem);
|
|
35
37
|
const isDiscountBelow20 = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) > 0 &&
|
|
36
38
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) < 20;
|
|
37
39
|
const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text);
|
|
38
40
|
const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
|
|
39
41
|
const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
|
|
40
42
|
const serviceCardStyle = (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
|
|
41
|
-
(
|
|
43
|
+
(showDpUi && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
|
|
42
44
|
? {
|
|
43
45
|
borderColor: isSoldOut ? "#ccc" : "transparent",
|
|
44
46
|
borderStyle: "solid",
|
|
@@ -120,7 +122,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
120
122
|
setIsFeatureDropDownExpand(isFeatureDropDownExpand === serviceItem.id ||
|
|
121
123
|
isFeatureDropDownExpand === true
|
|
122
124
|
? null
|
|
123
|
-
: serviceItem.id), selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle, wowDealData: wowDealData })) : (React.createElement("div", { className: `relative ${!hasOfferText || !
|
|
125
|
+
: serviceItem.id), selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle, wowDealData: wowDealData })) : (React.createElement("div", { className: `relative ${!hasOfferText || !showDpUi ? "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) ||
|
|
124
126
|
isConexion ||
|
|
125
127
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
|
|
126
128
|
showTopLabel ||
|
|
@@ -128,8 +130,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
128
130
|
? "mt-[20px]"
|
|
129
131
|
: "mt-[10px]"} `, style: { zIndex: 1 } },
|
|
130
132
|
React.createElement("div", { className: `z-1 ${((isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
|
|
131
|
-
((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.
|
|
132
|
-
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))) &&
|
|
133
|
+
(showDpUi && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))) &&
|
|
133
134
|
!isSoldOut
|
|
134
135
|
? "rounded-[18px]"
|
|
135
136
|
: "rounded-[10px] border border-[#ccc]"}`, style: Object.assign(Object.assign({}, serviceCardStyle), { backgroundColor: "#fff" }) },
|
|
@@ -145,7 +146,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
145
146
|
} },
|
|
146
147
|
React.createElement("div", { className: `w-[115px] ${isFlores ? "" : "overflow-y-hidden"} h-[30px]` },
|
|
147
148
|
React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `w-[100px] h-auto object-contain ${isSoldOut ? "grayscale" : ""}` })),
|
|
148
|
-
isCiva ? (React.createElement("div", { className: "black-text min-[420]:text-[12px] text-[12px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details[2])) : showRating ? (React.createElement("div", { className: "flex min-[420]:text-[13px] text-[12px] h-[22px] items-center" },
|
|
149
|
+
isCiva ? (React.createElement("div", { className: "black-text min-[420]:text-[12px] text-[12px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details[2])) : showServiceTypeUnderLogo && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.service_type) ? (React.createElement("div", { className: "min-[420]:text-[13px] text-[12px] text-ellipsis overflow-hidden whitespace-nowrap max-w-[150px]", style: { color: isSoldOut ? "#bbb" : "#464647" } }, commonService.capitalizeFirstLetter(serviceItem.service_type))) : showRating ? (React.createElement("div", { className: "flex min-[420]:text-[13px] text-[12px] h-[22px] items-center" },
|
|
149
150
|
React.createElement("div", { className: "flex items-center" },
|
|
150
151
|
React.createElement("div", { className: "flex items-center" },
|
|
151
152
|
React.createElement("img", { src: serviceItem.icons.rating, alt: "origin", className: `w-[12px] h-[12px] mr-[4px] object-contain ${isSoldOut ? "grayscale" : ""}` }),
|
|
@@ -161,7 +162,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
161
162
|
color: colors.tooltipBgColor,
|
|
162
163
|
} }, "\u00A1\u00DAltimos Asientos!")))) : null,
|
|
163
164
|
React.createElement("div", { className: "bg-[#E6E6E6] mt-[10px] mb-[8px] h-[1px]" }),
|
|
164
|
-
React.createElement(BottomAmenitiesMobile, { isSoldOut: isSoldOut, amenitiesNodes: amenities(), hoursIcon: renderIcon("hours", "14px"), duration: (_j = serviceItem.duration) === null || _j === void 0 ? void 0 : _j.toString(), isDirectTrip: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip, serviceType: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.service_type, 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: () => {
|
|
165
|
+
React.createElement(BottomAmenitiesMobile, { isSoldOut: isSoldOut, amenitiesNodes: amenities(), hoursIcon: renderIcon("hours", "14px"), duration: (_j = serviceItem.duration) === null || _j === void 0 ? void 0 : _j.toString(), isDirectTrip: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip, serviceType: showServiceTypeUnderLogo ? undefined : serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.service_type, 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: () => {
|
|
165
166
|
setIsExpanded(isItemExpanded ? null : serviceItem.id);
|
|
166
167
|
}, isPeru: isPeru, femaleAnim: serviceItem.icons.femaleAnim, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, isTrain: isTrain, renderIcon: renderIcon })),
|
|
167
168
|
React.createElement(ServiceBadgesMobile, { showTopLabel: showTopLabel || undefined, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, serviceItem: serviceItem, isConexion: isConexion, isAllinBus: isAllinBus, boardingName: boardingName })),
|
|
@@ -169,7 +170,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
169
170
|
isNewUiEnabled &&
|
|
170
171
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 &&
|
|
171
172
|
!isSoldOut &&
|
|
172
|
-
!
|
|
173
|
+
!showDpUi && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
|
|
173
174
|
background: colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
|
|
174
175
|
borderRadius: "0 0 14px 14px",
|
|
175
176
|
zIndex: -1,
|
|
@@ -185,8 +186,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
185
186
|
} },
|
|
186
187
|
React.createElement("span", { className: "whitespace-nowrap min-[380px]:text-[12px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))))))),
|
|
187
188
|
((isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
|
|
188
|
-
((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.
|
|
189
|
-
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))) &&
|
|
189
|
+
(showDpUi && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))) &&
|
|
190
190
|
!isSoldOut && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
|
|
191
191
|
background: isSoldOut
|
|
192
192
|
? offerGradientWithOpacity
|
|
@@ -197,7 +197,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
197
197
|
} },
|
|
198
198
|
React.createElement("div", { className: "flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]", style: { lineHeight: 1.6 } },
|
|
199
199
|
React.createElement("div", { className: "flex justify-between items-center" },
|
|
200
|
-
|
|
200
|
+
showDpUi &&
|
|
201
201
|
Object.keys((_k = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _k !== void 0 ? _k : {})
|
|
202
202
|
.length === 0 &&
|
|
203
203
|
((_l = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _l !== void 0 ? _l : []).length === 0 ? (React.createElement("div", { className: "flex items-center gap-[6px]" },
|
|
@@ -242,8 +242,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
242
242
|
transition: "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
|
|
243
243
|
position: "relative",
|
|
244
244
|
zIndex: hasOfferText ||
|
|
245
|
-
((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.
|
|
246
|
-
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents)) ||
|
|
245
|
+
(showDpUi && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents)) ||
|
|
247
246
|
(isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2)
|
|
248
247
|
? -2
|
|
249
248
|
: -1,
|
|
@@ -251,13 +250,12 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
251
250
|
React.createElement("div", { style: {
|
|
252
251
|
overflow: "hidden",
|
|
253
252
|
minHeight: 0,
|
|
254
|
-
position: hasOfferText || isNewUiEnabled ||
|
|
253
|
+
position: hasOfferText || isNewUiEnabled || showDpUi
|
|
255
254
|
? "relative"
|
|
256
255
|
: undefined,
|
|
257
256
|
zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ||
|
|
258
257
|
(isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
|
|
259
|
-
((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.
|
|
260
|
-
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
|
|
258
|
+
(showDpUi && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
|
|
261
259
|
? -3
|
|
262
260
|
: undefined,
|
|
263
261
|
marginTop: hasOfferText ? "-15px" : "-10px",
|
|
@@ -37,6 +37,8 @@ export interface MobileServiceItemProps {
|
|
|
37
37
|
train_type_label?: string;
|
|
38
38
|
ladies_booked_seats?: string;
|
|
39
39
|
is_dp_enabled?: boolean;
|
|
40
|
+
show_dp_ui?: boolean;
|
|
41
|
+
show_best_price?: boolean;
|
|
40
42
|
offer_text?: string;
|
|
41
43
|
is_direct_trip?: boolean;
|
|
42
44
|
is_train_type?: boolean;
|
|
@@ -254,4 +256,5 @@ export interface MobileServiceItemProps {
|
|
|
254
256
|
priority_stage_ids?: string[];
|
|
255
257
|
isShowSeatIcon?: boolean;
|
|
256
258
|
showDesdeLabel?: boolean;
|
|
259
|
+
showServiceTypeUnderLogo?: boolean;
|
|
257
260
|
}
|
|
@@ -41,6 +41,8 @@ export interface ServiceItemProps {
|
|
|
41
41
|
offer_text?: string;
|
|
42
42
|
is_direct_trip?: boolean;
|
|
43
43
|
is_dp_enabled?: boolean;
|
|
44
|
+
show_dp_ui?: boolean;
|
|
45
|
+
show_best_price?: boolean;
|
|
44
46
|
dp_discount_percents?: any;
|
|
45
47
|
dp_discounted_seats?: any;
|
|
46
48
|
original_dp_price?: any;
|
|
@@ -275,4 +277,5 @@ export interface ServiceItemProps {
|
|
|
275
277
|
priority_stage_ids?: string[];
|
|
276
278
|
isShowSeatIcon?: boolean;
|
|
277
279
|
showDesdeLabel?: boolean;
|
|
280
|
+
showServiceTypeUnderLogo?: boolean;
|
|
278
281
|
}
|
package/dist/styles.css
CHANGED
package/dist/ui/OfferBanner.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { ServiceItemProps } from "../components/ServiceItem/types";
|
|
3
|
-
type ServiceItemSlice = Pick<ServiceItemProps["serviceItem"], "is_dp_enabled" | "offer_text" | "dp_discount_percents" | "dp_discounted_seats" | "show_register_button" | "ui_type">;
|
|
3
|
+
type ServiceItemSlice = Pick<ServiceItemProps["serviceItem"], "is_dp_enabled" | "show_dp_ui" | "offer_text" | "dp_discount_percents" | "dp_discounted_seats" | "show_register_button" | "ui_type">;
|
|
4
4
|
interface OfferBannerColors {
|
|
5
5
|
bottomStripColor?: string;
|
|
6
6
|
}
|
package/dist/ui/OfferBanner.js
CHANGED
|
@@ -10,6 +10,8 @@ function truncateOfferText(text) {
|
|
|
10
10
|
}
|
|
11
11
|
function hasDpDiscounts(serviceItem) {
|
|
12
12
|
var _a, _b;
|
|
13
|
+
if (CommonService.isDpUiHidden(serviceItem))
|
|
14
|
+
return false;
|
|
13
15
|
return (Object.keys((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _a !== void 0 ? _a : {}).length > 0 ||
|
|
14
16
|
((_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _b !== void 0 ? _b : []).length > 0);
|
|
15
17
|
}
|
|
@@ -64,16 +66,18 @@ const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, showLo
|
|
|
64
66
|
const isDiscountBelow20 = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) > 0 &&
|
|
65
67
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) < 20;
|
|
66
68
|
const offerText = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "";
|
|
69
|
+
// With show_dp_ui: false the banner renders as for a non-DP service
|
|
70
|
+
const showDpUi = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && !CommonService.isDpUiHidden(serviceItem);
|
|
67
71
|
const isLegacyOffer = !!offerText &&
|
|
68
72
|
isNewUiEnabled &&
|
|
69
73
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 &&
|
|
70
|
-
!
|
|
74
|
+
!showDpUi;
|
|
71
75
|
const showViewers = (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1) ||
|
|
72
|
-
|
|
76
|
+
showDpUi;
|
|
73
77
|
const background = isLegacyOffer ? colors === null || colors === void 0 ? void 0 : colors.bottomStripColor : offerGradient;
|
|
74
78
|
const renderLeftContent = () => {
|
|
75
79
|
const hasDp = hasDpDiscounts(serviceItem);
|
|
76
|
-
if (
|
|
80
|
+
if (showDpUi && !hasDp) {
|
|
77
81
|
return React.createElement(PopularServiceBanner, { getAnimationIcon: getAnimationIcon });
|
|
78
82
|
}
|
|
79
83
|
if (isLegacyOffer) {
|
|
@@ -86,13 +90,13 @@ const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, showLo
|
|
|
86
90
|
};
|
|
87
91
|
return (React.createElement("div", { className: `text-white w-full absolute ${coachKey ? "-bottom-[40px]" : isExpand ? "-bottom-[40px]" : "-bottom-[40px]"} rounded-b-[14px] text-[14px] h-[58px] flex items-end `, style: {
|
|
88
92
|
background: (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
|
|
89
|
-
(
|
|
93
|
+
(showDpUi && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
|
|
90
94
|
? offerGradient
|
|
91
95
|
: background,
|
|
92
96
|
opacity: isSoldOut ? 0.5 : 1,
|
|
93
97
|
zIndex: isLinatal ? "-1" : "0",
|
|
94
98
|
paddingBottom: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 2
|
|
95
|
-
? "
|
|
99
|
+
? "7px"
|
|
96
100
|
: "9px",
|
|
97
101
|
} },
|
|
98
102
|
React.createElement("div", { className: "flex items-center w-full gap-[20px] px-[15px] justify-between" },
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { ServiceItemProps } from "../components/ServiceItem/types";
|
|
3
|
-
type ServiceItemSlice = Pick<ServiceItemProps["serviceItem"], "is_dp_enabled" | "offer_text" | "dp_discount_percents" | "dp_discounted_seats" | "show_register_button">;
|
|
3
|
+
type ServiceItemSlice = Pick<ServiceItemProps["serviceItem"], "is_dp_enabled" | "show_dp_ui" | "offer_text" | "dp_discount_percents" | "dp_discounted_seats" | "show_register_button">;
|
|
4
4
|
interface OfferBannerColors {
|
|
5
5
|
bottomStripColor?: string;
|
|
6
6
|
}
|
|
@@ -10,6 +10,8 @@ function truncateOfferText(text) {
|
|
|
10
10
|
}
|
|
11
11
|
function hasDpDiscounts(serviceItem) {
|
|
12
12
|
var _a, _b;
|
|
13
|
+
if (CommonService.isDpUiHidden(serviceItem))
|
|
14
|
+
return false;
|
|
13
15
|
return (Object.keys((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _a !== void 0 ? _a : {}).length > 0 ||
|
|
14
16
|
((_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _b !== void 0 ? _b : []).length > 0);
|
|
15
17
|
}
|
|
@@ -64,7 +66,9 @@ const PeruOfferBanner = ({ offerGradient, isSoldOut, serviceItem, renderIcon, is
|
|
|
64
66
|
? (colors === null || colors === void 0 ? void 0 : colors.bottomStripColor) || offerGradient
|
|
65
67
|
: offerGradient;
|
|
66
68
|
const renderLeftContent = () => {
|
|
67
|
-
if ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
|
|
69
|
+
if ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
|
|
70
|
+
!CommonService.isDpUiHidden(serviceItem) &&
|
|
71
|
+
!hasDp) {
|
|
68
72
|
return React.createElement(PopularServiceBanner, { getAnimationIcon: getAnimationIcon });
|
|
69
73
|
}
|
|
70
74
|
if (isOfferTextOnly) {
|
package/dist/ui/RatingBlock.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
declare const RatingBlock: ({ showRating, serviceItem, isSoldOut, colors, t, translation, isPeru, isTrain, }: any) => React.JSX.Element;
|
|
2
|
+
declare const RatingBlock: ({ showRating, serviceItem, isSoldOut, colors, t, translation, isPeru, isTrain, showServiceTypeUnderLogo, }: any) => React.JSX.Element;
|
|
3
3
|
export default RatingBlock;
|
package/dist/ui/RatingBlock.js
CHANGED
|
@@ -1,15 +1,19 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import RatingHover from "../components/ServiceItem/RatingHover";
|
|
3
|
-
|
|
3
|
+
import commonService from "../utils/CommonService";
|
|
4
|
+
const RatingBlock = ({ showRating, serviceItem, isSoldOut, colors, t, translation, isPeru = false, isTrain = false, showServiceTypeUnderLogo = false, }) => {
|
|
5
|
+
const operatorLabel = showServiceTypeUnderLogo
|
|
6
|
+
? commonService.capitalizeFirstLetter(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.service_type)
|
|
7
|
+
: serviceItem.operator_details[2];
|
|
4
8
|
return (React.createElement("div", { className: "flex items-center whitespace-nowrap" },
|
|
5
9
|
showRating && (React.createElement(RatingHover, { serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru })),
|
|
6
10
|
React.createElement("div", { className: "group relative ml-[10px] text-[12px]", style: {
|
|
7
11
|
marginLeft: showRating ? "6px" : "0",
|
|
8
12
|
color: isSoldOut ? "#c0c0c0" : "#464647",
|
|
9
13
|
} },
|
|
10
|
-
React.createElement("span", { className: `block max-w-[120px] cursor-pointer text-[12px] ${isPeru || isTrain ? "overflow-hidden text-ellipsis whitespace-nowrap" : ""}` },
|
|
14
|
+
React.createElement("span", { className: `block max-w-[120px] cursor-pointer text-[12px] ${isPeru || isTrain ? "overflow-hidden text-ellipsis whitespace-nowrap" : ""}` }, operatorLabel),
|
|
11
15
|
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-nowrap z-10 mt-2.5 w-max text-center shadow-service text-[12px]", style: { backgroundColor: colors.bottomStripColor, zIndex: "300" } },
|
|
12
16
|
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 } }),
|
|
13
|
-
|
|
17
|
+
operatorLabel))));
|
|
14
18
|
};
|
|
15
19
|
export default RatingBlock;
|
|
@@ -66,6 +66,10 @@ function getUniqueSeats(seatTypes, isTrain) {
|
|
|
66
66
|
return true;
|
|
67
67
|
});
|
|
68
68
|
}
|
|
69
|
+
// Matches "160°" as well as a bare "160" label
|
|
70
|
+
function hasInclinationSeatTypes(seatTypes) {
|
|
71
|
+
return (seatTypes !== null && seatTypes !== void 0 ? seatTypes : []).some((seat) => { var _a; return /\b(120|140|160|180)\b/.test(String((_a = seat === null || seat === void 0 ? void 0 : seat.label) !== null && _a !== void 0 ? _a : "")); });
|
|
72
|
+
}
|
|
69
73
|
function getNumberOfSeats(seatTypes) {
|
|
70
74
|
return seatTypes.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
|
|
71
75
|
}
|
|
@@ -101,6 +105,12 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
|
|
|
101
105
|
const uniqueSeats = getUniqueSeats(seatTypes, isTrain);
|
|
102
106
|
const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
|
|
103
107
|
const numberOfSeats = getNumberOfSeats(seatTypes);
|
|
108
|
+
const isMovilBus = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus" ||
|
|
109
|
+
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "Movil Bus";
|
|
110
|
+
// Peru: list every seat type with its own fare (MovilBus, or inclination
|
|
111
|
+
// seats like 160° / 180°) instead of only the cheapest one.
|
|
112
|
+
const showSeatTypeRows = (isMovilBus || hasInclinationSeatTypes(seatTypes)) &&
|
|
113
|
+
uniqueSeats.length > 1;
|
|
104
114
|
const isCentered = numberOfSeats < 2 || removeDuplicateSeats;
|
|
105
115
|
const formatPrice = (price) => availableSeats <= 0
|
|
106
116
|
? CommonService.currency(0, currencySign)
|
|
@@ -146,10 +156,8 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
|
|
|
146
156
|
};
|
|
147
157
|
const renderSeatPrices = () => {
|
|
148
158
|
if (isPeru) {
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
// Multiple unique seat types → show a price row for each (MovilBus only)
|
|
152
|
-
if (isMovilBus && uniqueSeats.length > 1) {
|
|
159
|
+
// Multiple unique seat types → show a price row for each
|
|
160
|
+
if (showSeatTypeRows) {
|
|
153
161
|
return uniqueSeats
|
|
154
162
|
.filter((s) => !SEAT_EXCEPTIONS.includes(s.label))
|
|
155
163
|
.map((val, key) => {
|
|
@@ -215,10 +223,8 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
|
|
|
215
223
|
})();
|
|
216
224
|
const renderLabels = () => {
|
|
217
225
|
if (isPeru) {
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
// Multiple unique seat types → show a label row for each (MovilBus only)
|
|
221
|
-
if (isMovilBus && uniqueSeats.length > 1) {
|
|
226
|
+
// Multiple unique seat types → show a label row for each
|
|
227
|
+
if (showSeatTypeRows) {
|
|
222
228
|
return uniqueSeats
|
|
223
229
|
.filter((s) => !SEAT_EXCEPTIONS.includes(s.label))
|
|
224
230
|
.map((val, key) => (React.createElement("span", { key: key, className: `flex items-center justify-between text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
|
|
@@ -227,7 +233,14 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
|
|
|
227
233
|
height: "20px",
|
|
228
234
|
marginRight: "5px",
|
|
229
235
|
} })),
|
|
230
|
-
|
|
236
|
+
!isMovilBus && isShowSeatIcon && (React.createElement("img", { src: getSeatLabelIcon(val.label, serviceItem), alt: "seattype", style: {
|
|
237
|
+
width: "20px",
|
|
238
|
+
height: "20px",
|
|
239
|
+
marginRight: "5px",
|
|
240
|
+
} })),
|
|
241
|
+
isMovilBus
|
|
242
|
+
? CommonService.truncateSeatLabel(val.label)
|
|
243
|
+
: CommonService.capitalize(addSeatDegree(val.label)))));
|
|
231
244
|
}
|
|
232
245
|
// Single seat type → original behaviour
|
|
233
246
|
const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
|
|
@@ -268,6 +281,8 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
|
|
|
268
281
|
// ).find(([, percent]) => Number(percent));
|
|
269
282
|
const dpDiscountEntry = Object.entries((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) || {}).sort(([, a], [, b]) => Number(a) - Number(b))[0];
|
|
270
283
|
const dpDiscountPercent = dpDiscountEntry === null || dpDiscountEntry === void 0 ? void 0 : dpDiscountEntry[1];
|
|
284
|
+
// show_dp_ui: false falls through to the regular fare layout
|
|
285
|
+
const isDpUiHidden = CommonService.isDpUiHidden(serviceItem);
|
|
271
286
|
const getLowestDpValue = (source) => {
|
|
272
287
|
if (!source)
|
|
273
288
|
return undefined;
|
|
@@ -312,7 +327,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
|
|
|
312
327
|
? CommonService.currency(0, currencySign)
|
|
313
328
|
: CommonService.discountedCurrency(Number(seatTypeFare), currencySign)))));
|
|
314
329
|
};
|
|
315
|
-
if ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && !dpDiscountEntry) {
|
|
330
|
+
if ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && !isDpUiHidden && !dpDiscountEntry) {
|
|
316
331
|
const dpSeats = (removeDuplicateSeats ? uniqueSeats : sortedSeatTypes).filter((s) => !SEAT_EXCEPTIONS.includes(s.label));
|
|
317
332
|
const lowestFare = dpSeats.length > 0 ? Math.min(...dpSeats.map((s) => Number(s.price))) : 0;
|
|
318
333
|
return (React.createElement("div", { className: "flex items-center justify-between text-[13.33px] ", style: {
|
|
@@ -324,7 +339,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
|
|
|
324
339
|
React.createElement("div", null,
|
|
325
340
|
React.createElement("div", { className: "relative" },
|
|
326
341
|
React.createElement("div", { className: "absolute -left-[20px] transform -translate-y-1/2 top-[16px]" }, renderIcon("fireIcon", "16px")),
|
|
327
|
-
React.createElement("div", { className: "absolute bottom-[35px] left-1/2 -translate-x-1/2 ", style: {
|
|
342
|
+
CommonService.showDpBestPrice(serviceItem) && (React.createElement("div", { className: "absolute bottom-[35px] left-1/2 -translate-x-1/2 ", style: {
|
|
328
343
|
animation: "pulse-zoom 2s ease-in-out infinite",
|
|
329
344
|
whiteSpace: "nowrap",
|
|
330
345
|
} },
|
|
@@ -333,12 +348,12 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
|
|
|
333
348
|
whiteSpace: "nowrap",
|
|
334
349
|
color: dpSeatColor,
|
|
335
350
|
backgroundColor: tooltipColor,
|
|
336
|
-
} }, "Mejor precio")),
|
|
351
|
+
} }, "Mejor precio"))),
|
|
337
352
|
React.createElement("div", { className: "text-[22px] bold-text leading-[30px] text-center", style: { color: isSoldOut ? "#c0c0c0" : dpSeatColor } }, availableSeats <= 0
|
|
338
353
|
? CommonService.currency(0, currencySign)
|
|
339
354
|
: CommonService.discountedCurrency(lowestFare, currencySign))))));
|
|
340
355
|
}
|
|
341
|
-
if (dpDiscountEntry) {
|
|
356
|
+
if (dpDiscountEntry && !isDpUiHidden) {
|
|
342
357
|
const originalDpPrice = getLowestDpValue(serviceItem.original_dp_price);
|
|
343
358
|
const allFares = ((_a = serviceItem.seat_types) !== null && _a !== void 0 ? _a : [])
|
|
344
359
|
.map((st) => st.fare)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import CommonService from "../../utils/CommonService";
|
|
3
3
|
const ServiceBadges = ({ showTopLabel, isSoldOut, colors, renderIcon, translation, serviceItem, isAllinBus = false, boardingName, getAnimationIcon, }) => {
|
|
4
|
-
return (React.createElement("div", { className: "absolute -top-[
|
|
4
|
+
return (React.createElement("div", { className: "absolute -top-[11px] left-0 w-full flex items-center justify-end gap-[12px] pr-[22px] z-10" },
|
|
5
5
|
showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-10`, style: {
|
|
6
6
|
backgroundColor: colors.topLabelBgColor || "#fff",
|
|
7
7
|
border: isSoldOut
|