kupos-ui-components-lib 9.9.1 → 9.9.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ServiceItem/ServiceItemDesktop.d.ts +1 -1
- package/dist/components/ServiceItem/ServiceItemDesktop.js +2 -20
- package/dist/components/ServiceItem/types.d.ts +0 -7
- package/dist/styles.css +0 -3
- package/dist/ui/ExpendedDropDown/ExpandedDropdown.js +1 -1
- package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.js +22 -41
- package/dist/ui/FeatureServiceUI/FeatureServiceUi.js +24 -44
- package/dist/ui/SeatSection/SeatSection.d.ts +1 -7
- package/dist/ui/SeatSection/SeatSection.js +9 -41
- package/dist/ui/mobileweb/ExpandedDropdownMobile.js +1 -1
- package/package.json +1 -1
- package/src/components/ServiceItem/ServiceItemDesktop.tsx +0 -43
- package/src/components/ServiceItem/types.ts +0 -12
- package/src/ui/ExpendedDropDown/ExpandedDropdown.tsx +1 -1
- package/src/ui/SeatSection/SeatSection.tsx +18 -85
- package/src/ui/mobileweb/ExpandedDropdownMobile.tsx +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { ServiceItemProps } from "./types";
|
|
3
|
-
declare function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, showLoginModal, isLoggedIn, showLoginOption,
|
|
3
|
+
declare function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, showLoginModal, isLoggedIn, showLoginOption, isFlores, operatorLabel, }: ServiceItemProps & {
|
|
4
4
|
currencySign?: string;
|
|
5
5
|
}): React.ReactElement;
|
|
6
6
|
export default ServiceItemPB;
|
|
@@ -74,12 +74,8 @@ const ANIMATION_MAP = {
|
|
|
74
74
|
kupos: femaleAnimation,
|
|
75
75
|
},
|
|
76
76
|
};
|
|
77
|
-
function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t = (key) => key, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, showLoginModal, isLoggedIn, showLoginOption,
|
|
77
|
+
function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t = (key) => key, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, showLoginModal, isLoggedIn, showLoginOption, isFlores, operatorLabel, }) {
|
|
78
78
|
var _a;
|
|
79
|
-
const handleSeatSelect = (key, price, seatKey, apiSeatType) => {
|
|
80
|
-
onClearSeatSelectionError === null || onClearSeatSelectionError === void 0 ? void 0 : onClearSeatSelectionError();
|
|
81
|
-
onSeatSelect === null || onSeatSelect === void 0 ? void 0 : onSeatSelect(key, price, seatKey, apiSeatType);
|
|
82
|
-
};
|
|
83
79
|
const getAnimationIcon = (icon) => {
|
|
84
80
|
var _a;
|
|
85
81
|
const animation = ANIMATION_MAP[icon];
|
|
@@ -217,16 +213,6 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
217
213
|
});
|
|
218
214
|
return;
|
|
219
215
|
}
|
|
220
|
-
if (isTrain) {
|
|
221
|
-
if (!selectedSeatKey) {
|
|
222
|
-
onShowSeatSelectionError === null || onShowSeatSelectionError === void 0 ? void 0 : onShowSeatSelectionError(serviceItem.id);
|
|
223
|
-
return;
|
|
224
|
-
}
|
|
225
|
-
if (onTrainButtonClick) {
|
|
226
|
-
onTrainButtonClick();
|
|
227
|
-
return;
|
|
228
|
-
}
|
|
229
|
-
}
|
|
230
216
|
onBookButtonPress();
|
|
231
217
|
};
|
|
232
218
|
const items = [
|
|
@@ -289,13 +275,9 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
289
275
|
backgroundColor: "#ccc",
|
|
290
276
|
} }),
|
|
291
277
|
React.createElement("div", { className: "content-center" },
|
|
292
|
-
React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, dpSeatColor: colors.seatPriceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru, renderIcon: renderIcon, discountSeatPriceColor: colors.discountSeatPriceColor
|
|
278
|
+
React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, dpSeatColor: colors.seatPriceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru, renderIcon: renderIcon, discountSeatPriceColor: colors.discountSeatPriceColor })),
|
|
293
279
|
React.createElement("div", { className: "relative" },
|
|
294
280
|
React.createElement(KuposButton, { isSoldOut: isSoldOut, isLoading: serviceDetailsLoading, buttonColor: colors.kuposButtonColor, buyLabel: translation === null || translation === void 0 ? void 0 : translation.buyButton, soldOutLabel: translation === null || translation === void 0 ? void 0 : translation.soldOutButton, soldOutIcon: renderIcon("soldOutIcon", "14px"), onClick: checkMidnight }),
|
|
295
|
-
showSeatSelectionError === serviceItem.id && isTrain && (React.createElement("div", { className: "flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]" },
|
|
296
|
-
React.createElement("div", { className: "text-[9px] text-center whitespace-nowrap", style: {
|
|
297
|
-
color: colors.seatPriceColor,
|
|
298
|
-
} }, "Selecciona el tipo de servicio"))),
|
|
299
281
|
showLastSeats ? (React.createElement("div", { className: "flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
|
|
300
282
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[12px] mt-1 text-center", style: {
|
|
301
283
|
color: colors.seatPriceColor,
|
|
@@ -224,13 +224,6 @@ export interface ServiceItemProps {
|
|
|
224
224
|
showLoginModal?: any;
|
|
225
225
|
isLoggedIn?: any;
|
|
226
226
|
showLoginOption?: boolean;
|
|
227
|
-
isTrain?: boolean;
|
|
228
|
-
selectedSeatKey?: any;
|
|
229
|
-
onSeatSelect?: (key: any, price: number, seatKey: string, apiSeatType?: string) => void;
|
|
230
|
-
onTrainButtonClick?: any;
|
|
231
|
-
showSeatSelectionError?: string | null;
|
|
232
|
-
onShowSeatSelectionError?: (serviceId: string) => void;
|
|
233
|
-
onClearSeatSelectionError?: () => void;
|
|
234
227
|
isFlores?: boolean;
|
|
235
228
|
operatorLabel?: string;
|
|
236
229
|
}
|
package/dist/styles.css
CHANGED
|
@@ -11,7 +11,7 @@ function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAn
|
|
|
11
11
|
React.createElement("span", null, renderIcon("changeTicketIcon", "16px")),
|
|
12
12
|
React.createElement("span", null,
|
|
13
13
|
React.createElement("span", { className: "bold-text" }, "Pasaje flexible:"),
|
|
14
|
-
" Tu pasaje puede ser cambiado
|
|
14
|
+
" Tu pasaje puede ser cambiado sin costo",
|
|
15
15
|
" ",
|
|
16
16
|
React.createElement("span", { className: "bold-text" },
|
|
17
17
|
"hasta ",
|
|
@@ -29,14 +29,14 @@ const HARDCODED_OPERATORS = [
|
|
|
29
29
|
},
|
|
30
30
|
];
|
|
31
31
|
const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity = 1, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, selectedTimeSlot = TIME_SLOTS[0], onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData = undefined, }) => {
|
|
32
|
-
var _a, _b, _c, _d, _e, _f;
|
|
32
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
33
33
|
// Use wow_deal data if available, otherwise fall back to serviceItem operators or hardcoded
|
|
34
|
-
const operators = ((_a = wowDealData === null || wowDealData === void 0 ? void 0 : wowDealData.
|
|
35
|
-
? wowDealData.
|
|
36
|
-
logo:
|
|
37
|
-
name:
|
|
38
|
-
time:
|
|
39
|
-
seatsAvailable: `${
|
|
34
|
+
const operators = ((_a = wowDealData === null || wowDealData === void 0 ? void 0 : wowDealData.services) === null || _a === void 0 ? void 0 : _a.length) > 0
|
|
35
|
+
? wowDealData.services.slice(0, 3).map((service) => ({
|
|
36
|
+
logo: service.operator_logo_url,
|
|
37
|
+
name: service.operator_name,
|
|
38
|
+
time: service.departure_time,
|
|
39
|
+
seatsAvailable: `${service.available_seats} disponibles`,
|
|
40
40
|
}))
|
|
41
41
|
: ((_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operators) === null || _b === void 0 ? void 0 : _b.length) > 0
|
|
42
42
|
? serviceItem.operators
|
|
@@ -68,6 +68,16 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
|
|
|
68
68
|
isFeatureDropDownExpand === true;
|
|
69
69
|
const isThisTimeDropdownOpen = isTimeDropdownOpen === serviceItem.id;
|
|
70
70
|
const canDecreaseTicketQuantity = ticketQuantity > 1;
|
|
71
|
+
const departures = (_d = (_c = wowDealData === null || wowDealData === void 0 ? void 0 : wowDealData.services) === null || _c === void 0 ? void 0 : _c.map((s) => s.departure_time)) === null || _d === void 0 ? void 0 : _d.filter(Boolean);
|
|
72
|
+
let departureRange = `Entre ${dealWindowFrom} y ${dealWindowTo}`;
|
|
73
|
+
if (departures === null || departures === void 0 ? void 0 : departures.length) {
|
|
74
|
+
const sorted = [...departures].sort((a, b) => {
|
|
75
|
+
const [ah, am] = a.split(":").map(Number);
|
|
76
|
+
const [bh, bm] = b.split(":").map(Number);
|
|
77
|
+
return ah * 60 + am - (bh * 60 + bm);
|
|
78
|
+
});
|
|
79
|
+
departureRange = `Entre ${sorted[0]} y ${sorted[sorted.length - 1]}`;
|
|
80
|
+
}
|
|
71
81
|
const HOW_IT_WORKS_STEPS = [
|
|
72
82
|
{
|
|
73
83
|
icon: "flexible",
|
|
@@ -142,41 +152,13 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
|
|
|
142
152
|
React.createElement("div", { className: " text-[white]" },
|
|
143
153
|
React.createElement("div", { className: "flex flex-col gap-[10px] relative" },
|
|
144
154
|
React.createElement("div", { className: "flex items-center gap-[6px]" },
|
|
145
|
-
React.createElement("img", { src: (
|
|
155
|
+
React.createElement("img", { src: (_e = serviceItem.icons) === null || _e === void 0 ? void 0 : _e.whiteOrigin, alt: "origin", className: `w-[13px] h-[13px] shrink-0 ${isSoldOut ? "grayscale" : ""}` }),
|
|
146
156
|
React.createElement("span", { className: "text-[14px] bold-text" }, cityOrigin === null || cityOrigin === void 0 ? void 0 : cityOrigin.label.split(",")[0]),
|
|
147
157
|
React.createElement("span", { className: "mx-[6px] text-[14px] bold-text" }, "\u2192"),
|
|
148
|
-
React.createElement("img", { src: (
|
|
158
|
+
React.createElement("img", { src: (_f = serviceItem.icons) === null || _f === void 0 ? void 0 : _f.whiteDestination, alt: "destination", className: `w-[13px] h-[13px] shrink-0 ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
|
|
149
159
|
React.createElement("span", { className: "text-[14px] bold-text" }, cityDestination === null || cityDestination === void 0 ? void 0 : cityDestination.label.split(",")[0])),
|
|
150
160
|
React.createElement("div", { className: "flex items-center gap-[6px]" },
|
|
151
|
-
React.createElement("div", { className: "
|
|
152
|
-
if (!e.currentTarget.contains(e.relatedTarget)) {
|
|
153
|
-
onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(null);
|
|
154
|
-
}
|
|
155
|
-
}, style: { outline: "none" } },
|
|
156
|
-
React.createElement("button", { type: "button", onClick: () => onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(isThisTimeDropdownOpen ? null : serviceItem.id), className: "flex cursor-pointer select-none items-center gap-[6px] border-none bg-transparent p-0 bold-text text-[13px] text-[white]" },
|
|
157
|
-
React.createElement("span", null, displayTimeSlot),
|
|
158
|
-
React.createElement("img", { src: (_e = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _e === void 0 ? void 0 : _e.downArrow, alt: "down arrow", className: `kupos-time-chevron transition-transform duration-200 ${isThisTimeDropdownOpen ? "rotate-180" : "rotate-0"}`, style: {
|
|
159
|
-
width: "12px",
|
|
160
|
-
height: "8px",
|
|
161
|
-
filter: "brightness(0) invert(1)",
|
|
162
|
-
} })),
|
|
163
|
-
isThisTimeDropdownOpen && (React.createElement(React.Fragment, null,
|
|
164
|
-
React.createElement("div", { className: "absolute left-0 top-[calc(100%+10px)]", style: {
|
|
165
|
-
zIndex: 20,
|
|
166
|
-
backgroundColor: "#fff",
|
|
167
|
-
borderRadius: "14px",
|
|
168
|
-
minWidth: "190px",
|
|
169
|
-
boxShadow: "0 8px 32px rgba(0,0,0,0.28)",
|
|
170
|
-
overflow: "hidden",
|
|
171
|
-
padding: "6px 0",
|
|
172
|
-
} }, TIME_SLOTS.map((slot) => {
|
|
173
|
-
const isActive = slot === selectedTimeSlot;
|
|
174
|
-
return (React.createElement("button", { key: slot, type: "button", onClick: () => {
|
|
175
|
-
onTimeSlotChange === null || onTimeSlotChange === void 0 ? void 0 : onTimeSlotChange(slot);
|
|
176
|
-
onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(null);
|
|
177
|
-
}, className: `flex w-full cursor-pointer items-center gap-[10px] border-none px-[12px] py-[9px] text-left text-[13px] ${isActive ? "bg-[#FF5C60] font-bold text-[white]" : "bg-transparent font-normal text-[#1a1a1a]"}` },
|
|
178
|
-
React.createElement("span", null, slot)));
|
|
179
|
-
})))))))),
|
|
161
|
+
React.createElement("div", { className: "bold-text text-[12px] text-white" }, departureRange)))),
|
|
180
162
|
React.createElement("div", { className: "border-t border-[#363c48] my-[8px]" }),
|
|
181
163
|
React.createElement("div", null,
|
|
182
164
|
React.createElement("span", { className: "block w-full text-[14px] bold-text text-[white] mb-[10px]", style: { textAlign: "center" } },
|
|
@@ -238,8 +220,7 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
|
|
|
238
220
|
} },
|
|
239
221
|
React.createElement("div", { className: "flex flex-col" },
|
|
240
222
|
React.createElement("span", { className: "text-[18px] font-normal leading-[20px] text-[#9f9f9f] relative", style: { position: "relative" } },
|
|
241
|
-
|
|
242
|
-
originalPrice.toLocaleString(),
|
|
223
|
+
`$${((originalPrice * ticketQuantity)).toLocaleString()}`,
|
|
243
224
|
React.createElement("span", { style: {
|
|
244
225
|
position: "absolute",
|
|
245
226
|
left: "-2px",
|
|
@@ -265,7 +246,7 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
|
|
|
265
246
|
React.createElement(LottiePlayer, { animationData: serviceItem.icons.thunderAnim, width: "16px", height: "16px" }),
|
|
266
247
|
React.createElement("span", { className: "whitespace-nowrap" }, "\u00A1Lo quiero!")),
|
|
267
248
|
React.createElement("div", { className: "flex justify-end mt-[10px]", onClick: onToggleExpand },
|
|
268
|
-
React.createElement("img", { src: (
|
|
249
|
+
React.createElement("img", { src: (_g = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _g === void 0 ? void 0 : _g.downArrow, alt: "down arrow", className: `transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`, style: {
|
|
269
250
|
width: "14px",
|
|
270
251
|
height: "8px",
|
|
271
252
|
filter: "brightness(0) invert(1)",
|
|
@@ -28,14 +28,14 @@ const HARDCODED_OPERATORS = [
|
|
|
28
28
|
},
|
|
29
29
|
];
|
|
30
30
|
const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIcon, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity = 1, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData = undefined, }) => {
|
|
31
|
-
var _a, _b, _c, _d, _e, _f;
|
|
32
|
-
// Use wow_deal
|
|
33
|
-
const operators = ((_a = wowDealData === null || wowDealData === void 0 ? void 0 : wowDealData.
|
|
34
|
-
? wowDealData.
|
|
35
|
-
logo:
|
|
36
|
-
name:
|
|
37
|
-
time:
|
|
38
|
-
seatsAvailable: `${
|
|
31
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
32
|
+
// Use wow_deal services if available, otherwise fall back to serviceItem operators or hardcoded
|
|
33
|
+
const operators = ((_a = wowDealData === null || wowDealData === void 0 ? void 0 : wowDealData.services) === null || _a === void 0 ? void 0 : _a.length) > 0
|
|
34
|
+
? wowDealData.services.slice(0, 3).map((service) => ({
|
|
35
|
+
logo: service.operator_logo_url,
|
|
36
|
+
name: service.operator_name,
|
|
37
|
+
time: service.departure_time,
|
|
38
|
+
seatsAvailable: `${service.available_seats} disponibles`,
|
|
39
39
|
}))
|
|
40
40
|
: ((_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operators) === null || _b === void 0 ? void 0 : _b.length) > 0
|
|
41
41
|
? serviceItem.operators
|
|
@@ -67,6 +67,16 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
|
|
|
67
67
|
isFeatureDropDownExpand === true;
|
|
68
68
|
const isThisTimeDropdownOpen = isTimeDropdownOpen === serviceItem.id;
|
|
69
69
|
const canDecreaseTicketQuantity = ticketQuantity > 1;
|
|
70
|
+
const departures = (_d = (_c = wowDealData === null || wowDealData === void 0 ? void 0 : wowDealData.services) === null || _c === void 0 ? void 0 : _c.map((s) => s.departure_time)) === null || _d === void 0 ? void 0 : _d.filter(Boolean);
|
|
71
|
+
let departureRange = `Entre ${dealWindowFrom} y ${dealWindowTo}`;
|
|
72
|
+
if (departures === null || departures === void 0 ? void 0 : departures.length) {
|
|
73
|
+
const sorted = [...departures].sort((a, b) => {
|
|
74
|
+
const [ah, am] = a.split(":").map(Number);
|
|
75
|
+
const [bh, bm] = b.split(":").map(Number);
|
|
76
|
+
return ah * 60 + am - (bh * 60 + bm);
|
|
77
|
+
});
|
|
78
|
+
departureRange = `Entre ${sorted[0]} y ${sorted[sorted.length - 1]}`;
|
|
79
|
+
}
|
|
70
80
|
const HOW_IT_WORKS_STEPS = [
|
|
71
81
|
{
|
|
72
82
|
icon: "flexible",
|
|
@@ -142,8 +152,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
|
|
|
142
152
|
// animationData={serviceItem.icons.flexibleAnim}
|
|
143
153
|
animationData: getAnimationIcon("flameAnimation"), width: "18px", height: "18px" })),
|
|
144
154
|
React.createElement("span", { className: "bold-text" }, "Remate"),
|
|
145
|
-
"\u00A0t\u00E9rmina en",
|
|
146
|
-
" ",
|
|
155
|
+
"\u00A0t\u00E9rmina en \u00A0",
|
|
147
156
|
React.createElement("span", { className: "bold-text text-end", ref: (node) => commonService.startCountdown(node, getCountdownSeconds()), style: {
|
|
148
157
|
fontVariantNumeric: "tabular-nums",
|
|
149
158
|
display: "inline-block",
|
|
@@ -155,42 +164,14 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
|
|
|
155
164
|
React.createElement("div", { className: "flex flex-col justify-between gap-[20px] mb-[16px] pr-[22px]" },
|
|
156
165
|
React.createElement("div", { className: "flex flex-col gap-[8px]" },
|
|
157
166
|
React.createElement("div", { className: "flex items-center gap-[8px]" },
|
|
158
|
-
React.createElement("img", { src: (
|
|
167
|
+
React.createElement("img", { src: (_e = serviceItem.icons) === null || _e === void 0 ? void 0 : _e.whiteOrigin, alt: "origin", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}` }),
|
|
159
168
|
React.createElement("span", { className: "text-[13px] bold-text" }, cityOrigin === null || cityOrigin === void 0 ? void 0 : cityOrigin.label.split(",")[0])),
|
|
160
169
|
React.createElement("div", { className: "flex items-center gap-[8px]" },
|
|
161
|
-
React.createElement("img", { src: (
|
|
170
|
+
React.createElement("img", { src: (_f = serviceItem.icons) === null || _f === void 0 ? void 0 : _f.whiteDestination, alt: "destination", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
|
|
162
171
|
React.createElement("span", { className: "text-[13px] bold-text" }, cityDestination === null || cityDestination === void 0 ? void 0 : cityDestination.label.split(",")[0]))),
|
|
163
172
|
React.createElement("div", { className: "flex flex-col gap-[8px]" },
|
|
164
173
|
React.createElement("div", { className: "text-[12px] bold-text" }, travelDate ? new Date(travelDate).toLocaleDateString('es-CL', { weekday: 'long', day: 'numeric', month: 'long' }) : 'Viernes 23 de mayo'),
|
|
165
|
-
React.createElement("div", { className: "
|
|
166
|
-
if (!e.currentTarget.contains(e.relatedTarget)) {
|
|
167
|
-
onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(null);
|
|
168
|
-
}
|
|
169
|
-
}, style: { outline: "none" } },
|
|
170
|
-
React.createElement("button", { type: "button", onClick: () => onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(isThisTimeDropdownOpen ? null : serviceItem.id), className: "flex whitespace-nowrap cursor-pointer select-none items-center gap-[6px] border-none bg-transparent p-0 bold-text text-[12px] text-[white]" },
|
|
171
|
-
React.createElement("span", null, displayTimeSlot),
|
|
172
|
-
React.createElement("img", { src: (_e = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _e === void 0 ? void 0 : _e.downArrow, alt: "down arrow", className: `kupos-time-chevron transition-transform duration-200 ${isThisTimeDropdownOpen ? "rotate-180" : "rotate-0"}`, style: {
|
|
173
|
-
width: "12px",
|
|
174
|
-
height: "8px",
|
|
175
|
-
filter: "brightness(0) invert(1)",
|
|
176
|
-
} })),
|
|
177
|
-
isThisTimeDropdownOpen && (React.createElement(React.Fragment, null,
|
|
178
|
-
React.createElement("div", { className: "absolute left-0 top-[calc(100%+10px)]", style: {
|
|
179
|
-
zIndex: 20,
|
|
180
|
-
backgroundColor: "#fff",
|
|
181
|
-
borderRadius: "14px",
|
|
182
|
-
minWidth: "190px",
|
|
183
|
-
boxShadow: "0 8px 32px rgba(0,0,0,0.28)",
|
|
184
|
-
overflow: "hidden",
|
|
185
|
-
padding: "6px 0",
|
|
186
|
-
} }, TIME_SLOTS.map((slot) => {
|
|
187
|
-
const isActive = slot === selectedTimeSlot;
|
|
188
|
-
return (React.createElement("button", { key: slot, type: "button", onClick: () => {
|
|
189
|
-
onTimeSlotChange === null || onTimeSlotChange === void 0 ? void 0 : onTimeSlotChange(slot);
|
|
190
|
-
onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(null);
|
|
191
|
-
}, className: `flex w-full cursor-pointer items-center gap-[10px] border-none px-[12px] py-[9px] text-left text-[13px] ${isActive ? "bg-[#FF5C60] font-bold text-[white]" : "bg-transparent font-normal text-[#1a1a1a]"}` },
|
|
192
|
-
React.createElement("span", null, slot)));
|
|
193
|
-
})))))),
|
|
174
|
+
React.createElement("div", { className: "bold-text text-[12px] text-white" }, departureRange)),
|
|
194
175
|
React.createElement("div", { className: "flex flex-col items-start gap-[10px] text-[12px] " },
|
|
195
176
|
React.createElement("div", { className: "flex items-justify gap-[8px]" },
|
|
196
177
|
renderIcon("sheildIcon", "16px"),
|
|
@@ -256,8 +237,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
|
|
|
256
237
|
savingsPercent,
|
|
257
238
|
"% OFF"),
|
|
258
239
|
React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative", style: { position: "relative" } },
|
|
259
|
-
|
|
260
|
-
originalPrice.toLocaleString(),
|
|
240
|
+
`$${(originalPrice * ticketQuantity).toLocaleString()}`,
|
|
261
241
|
React.createElement("span", { style: {
|
|
262
242
|
position: "absolute",
|
|
263
243
|
left: "-2px",
|
|
@@ -292,7 +272,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
|
|
|
292
272
|
animationData: getAnimationIcon("thunderAnimation"), width: "16px", height: "16px" }),
|
|
293
273
|
React.createElement("span", { className: "whitespace-nowrap" }, "\u00A1Lo quiero!"))),
|
|
294
274
|
React.createElement("div", { className: `absolute bottom-[11px] right-[18px] cursor-pointer transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`, onClick: onToggleExpand },
|
|
295
|
-
React.createElement("img", { src: (
|
|
275
|
+
React.createElement("img", { src: (_g = serviceItem.icons) === null || _g === void 0 ? void 0 : _g.downArrow, alt: "down arrow", style: {
|
|
296
276
|
width: "14px",
|
|
297
277
|
height: "8px",
|
|
298
278
|
filter: "brightness(0) invert(1)",
|
|
@@ -3,8 +3,6 @@ interface SeatType {
|
|
|
3
3
|
label: string;
|
|
4
4
|
fare: number;
|
|
5
5
|
key: any;
|
|
6
|
-
apiSeatType?: string;
|
|
7
|
-
api_seat_type?: string;
|
|
8
6
|
}
|
|
9
7
|
interface SeatSectionProps {
|
|
10
8
|
seatTypes: SeatType[];
|
|
@@ -18,10 +16,6 @@ interface SeatSectionProps {
|
|
|
18
16
|
serviceItem?: any;
|
|
19
17
|
renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
|
|
20
18
|
discountSeatPriceColor?: string;
|
|
21
|
-
isTrain?: boolean;
|
|
22
|
-
selectedSeatKey?: any;
|
|
23
|
-
onSeatSelect?: (key: any, price: number, seatKey: string, apiSeatType?: string) => void;
|
|
24
|
-
topLabelColor?: string;
|
|
25
19
|
}
|
|
26
|
-
declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats,
|
|
20
|
+
declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, }: SeatSectionProps): React.ReactElement;
|
|
27
21
|
export default SeatSection;
|
|
@@ -8,13 +8,11 @@ function getAllSeatTypes(seatTypes) {
|
|
|
8
8
|
let seatTypesWithPrices = seatTypes.filter(Boolean).map((val) => ({
|
|
9
9
|
label: val === null || val === void 0 ? void 0 : val.label,
|
|
10
10
|
price: val === null || val === void 0 ? void 0 : val.fare,
|
|
11
|
-
key: val === null || val === void 0 ? void 0 : val.key,
|
|
12
|
-
apiSeatType: (val === null || val === void 0 ? void 0 : val.apiSeatType) || (val === null || val === void 0 ? void 0 : val.api_seat_type),
|
|
13
11
|
}));
|
|
14
12
|
seatTypesWithPrices.sort((a, b) => a.price - b.price);
|
|
15
13
|
return seatTypesWithPrices;
|
|
16
14
|
}
|
|
17
|
-
function getSortedSeatTypes(seatTypes
|
|
15
|
+
function getSortedSeatTypes(seatTypes) {
|
|
18
16
|
if (!(seatTypes === null || seatTypes === void 0 ? void 0 : seatTypes.length)) {
|
|
19
17
|
return [{ label: "Salon cama", price: 0 }];
|
|
20
18
|
}
|
|
@@ -23,12 +21,7 @@ function getSortedSeatTypes(seatTypes, isTrain) {
|
|
|
23
21
|
if (premiumIndex >= 3) {
|
|
24
22
|
seatTypesWithPrices[2] = seatTypesWithPrices[premiumIndex];
|
|
25
23
|
}
|
|
26
|
-
|
|
27
|
-
seatTypesWithPrices = seatTypesWithPrices.slice(0, 4);
|
|
28
|
-
}
|
|
29
|
-
else {
|
|
30
|
-
seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
|
|
31
|
-
}
|
|
24
|
+
seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
|
|
32
25
|
const seenPrices = new Set();
|
|
33
26
|
seatTypesWithPrices = seatTypesWithPrices.filter((seat) => {
|
|
34
27
|
if (seenPrices.has(seat.price))
|
|
@@ -61,10 +54,10 @@ function getUniqueSeats(seatTypes) {
|
|
|
61
54
|
function getNumberOfSeats(seatTypes) {
|
|
62
55
|
return seatTypes.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
|
|
63
56
|
}
|
|
64
|
-
function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats,
|
|
57
|
+
function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, }) {
|
|
65
58
|
var _a;
|
|
66
59
|
const uniqueSeats = getUniqueSeats(seatTypes);
|
|
67
|
-
const sortedSeatTypes = getSortedSeatTypes(seatTypes
|
|
60
|
+
const sortedSeatTypes = getSortedSeatTypes(seatTypes);
|
|
68
61
|
const numberOfSeats = getNumberOfSeats(seatTypes);
|
|
69
62
|
const isCentered = numberOfSeats < 2 || removeDuplicateSeats;
|
|
70
63
|
const formatPrice = (price) => availableSeats <= 0
|
|
@@ -72,36 +65,11 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
|
|
|
72
65
|
: CommonService.currency(price, currencySign);
|
|
73
66
|
const renderSeatNames = () => {
|
|
74
67
|
const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
|
|
75
|
-
return seats.map((val, key) => {
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
: undefined },
|
|
81
|
-
isTrain && (React.createElement("div", { style: {
|
|
82
|
-
border: `1px solid ${val.label === selectedSeatKey ? topLabelColor : "#ccc"}`,
|
|
83
|
-
borderRadius: "50%",
|
|
84
|
-
width: "14px",
|
|
85
|
-
height: "14px",
|
|
86
|
-
minWidth: "14px",
|
|
87
|
-
marginRight: "10px",
|
|
88
|
-
display: "flex",
|
|
89
|
-
alignItems: "center",
|
|
90
|
-
justifyContent: "center",
|
|
91
|
-
} }, val.label === selectedSeatKey && (React.createElement("div", { style: {
|
|
92
|
-
backgroundColor: topLabelColor,
|
|
93
|
-
borderRadius: "50%",
|
|
94
|
-
width: "7px",
|
|
95
|
-
height: "7px",
|
|
96
|
-
} })))),
|
|
97
|
-
React.createElement("span", { key: key, className: `flex items-center justify-between text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` }, typeof val.label === "string" || typeof val.label === "number"
|
|
98
|
-
? removeDuplicateSeats && isPeru
|
|
99
|
-
? CommonService.truncateSeatLabel(val.label)
|
|
100
|
-
: isTrain
|
|
101
|
-
? CommonService.truncateSeatLabel(val.label)
|
|
102
|
-
: val.label
|
|
103
|
-
: null)));
|
|
104
|
-
});
|
|
68
|
+
return seats.map((val, key) => SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("span", { key: key, className: `flex items-center justify-between text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` }, typeof val.label === "string" || typeof val.label === "number"
|
|
69
|
+
? removeDuplicateSeats && isPeru
|
|
70
|
+
? CommonService.truncateSeatLabel(val.label)
|
|
71
|
+
: val.label
|
|
72
|
+
: null)));
|
|
105
73
|
};
|
|
106
74
|
const renderSeatPrices = () => {
|
|
107
75
|
if (isPeru) {
|
|
@@ -10,7 +10,7 @@ function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyA
|
|
|
10
10
|
React.createElement("span", { className: "mt-[3px]" }, renderIcon("changeTicketIcon", "14px")),
|
|
11
11
|
React.createElement("span", null,
|
|
12
12
|
React.createElement("span", { className: "bold-text" }, "Pasaje flexible:"),
|
|
13
|
-
" Tu pasaje puede ser cambiado
|
|
13
|
+
" Tu pasaje puede ser cambiado sin costo",
|
|
14
14
|
" ",
|
|
15
15
|
React.createElement("span", { className: "bold-text" },
|
|
16
16
|
"hasta ",
|
package/package.json
CHANGED
|
@@ -116,25 +116,9 @@ function ServiceItemPB({
|
|
|
116
116
|
showLoginModal,
|
|
117
117
|
isLoggedIn,
|
|
118
118
|
showLoginOption,
|
|
119
|
-
isTrain,
|
|
120
|
-
selectedSeatKey,
|
|
121
|
-
onSeatSelect,
|
|
122
|
-
onTrainButtonClick,
|
|
123
|
-
showSeatSelectionError,
|
|
124
|
-
onShowSeatSelectionError,
|
|
125
|
-
onClearSeatSelectionError,
|
|
126
119
|
isFlores,
|
|
127
120
|
operatorLabel,
|
|
128
121
|
}: ServiceItemProps & { currencySign?: string }): React.ReactElement {
|
|
129
|
-
const handleSeatSelect = (
|
|
130
|
-
key: any,
|
|
131
|
-
price: number,
|
|
132
|
-
seatKey: string,
|
|
133
|
-
apiSeatType?: string,
|
|
134
|
-
) => {
|
|
135
|
-
onClearSeatSelectionError?.();
|
|
136
|
-
onSeatSelect?.(key, price, seatKey, apiSeatType);
|
|
137
|
-
};
|
|
138
122
|
const getAnimationIcon = (icon: string) => {
|
|
139
123
|
const animation = ANIMATION_MAP[icon];
|
|
140
124
|
if (!animation) return null;
|
|
@@ -331,17 +315,6 @@ function ServiceItemPB({
|
|
|
331
315
|
return;
|
|
332
316
|
}
|
|
333
317
|
|
|
334
|
-
if (isTrain) {
|
|
335
|
-
if (!selectedSeatKey) {
|
|
336
|
-
onShowSeatSelectionError?.(serviceItem.id);
|
|
337
|
-
return;
|
|
338
|
-
}
|
|
339
|
-
if (onTrainButtonClick) {
|
|
340
|
-
onTrainButtonClick();
|
|
341
|
-
return;
|
|
342
|
-
}
|
|
343
|
-
}
|
|
344
|
-
|
|
345
318
|
onBookButtonPress();
|
|
346
319
|
};
|
|
347
320
|
|
|
@@ -555,10 +528,6 @@ function ServiceItemPB({
|
|
|
555
528
|
isPeru={isPeru}
|
|
556
529
|
renderIcon={renderIcon}
|
|
557
530
|
discountSeatPriceColor={colors.discountSeatPriceColor}
|
|
558
|
-
isTrain={isTrain}
|
|
559
|
-
selectedSeatKey={selectedSeatKey}
|
|
560
|
-
onSeatSelect={handleSeatSelect}
|
|
561
|
-
topLabelColor={colors.topLabelColor}
|
|
562
531
|
/>
|
|
563
532
|
</div>
|
|
564
533
|
|
|
@@ -574,18 +543,6 @@ function ServiceItemPB({
|
|
|
574
543
|
soldOutIcon={renderIcon("soldOutIcon", "14px")}
|
|
575
544
|
onClick={checkMidnight}
|
|
576
545
|
/>
|
|
577
|
-
{showSeatSelectionError === serviceItem.id && isTrain && (
|
|
578
|
-
<div className="flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]">
|
|
579
|
-
<div
|
|
580
|
-
className="text-[9px] text-center whitespace-nowrap"
|
|
581
|
-
style={{
|
|
582
|
-
color: colors.seatPriceColor,
|
|
583
|
-
}}
|
|
584
|
-
>
|
|
585
|
-
Selecciona el tipo de servicio
|
|
586
|
-
</div>
|
|
587
|
-
</div>
|
|
588
|
-
)}
|
|
589
546
|
{showLastSeats ? (
|
|
590
547
|
<div className="flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]">
|
|
591
548
|
{serviceItem?.available_seats < 10 &&
|
|
@@ -226,18 +226,6 @@ export interface ServiceItemProps {
|
|
|
226
226
|
showLoginModal?: any;
|
|
227
227
|
isLoggedIn?: any;
|
|
228
228
|
showLoginOption?: boolean;
|
|
229
|
-
isTrain?: boolean;
|
|
230
|
-
selectedSeatKey?: any;
|
|
231
|
-
onSeatSelect?: (
|
|
232
|
-
key: any,
|
|
233
|
-
price: number,
|
|
234
|
-
seatKey: string,
|
|
235
|
-
apiSeatType?: string,
|
|
236
|
-
) => void;
|
|
237
|
-
onTrainButtonClick?: any;
|
|
238
|
-
showSeatSelectionError?: string | null;
|
|
239
|
-
onShowSeatSelectionError?: (serviceId: string) => void;
|
|
240
|
-
onClearSeatSelectionError?: () => void;
|
|
241
229
|
isFlores?: boolean;
|
|
242
230
|
operatorLabel?: string;
|
|
243
231
|
}
|
|
@@ -60,7 +60,7 @@ function ExpandedDropdown({
|
|
|
60
60
|
</span> */}
|
|
61
61
|
<span>
|
|
62
62
|
<span className="bold-text">Pasaje flexible:</span> Tu pasaje
|
|
63
|
-
puede ser cambiado
|
|
63
|
+
puede ser cambiado sin costo{" "}
|
|
64
64
|
<span className="bold-text">
|
|
65
65
|
hasta {serviceItem?.change_ticket_hours || 6} horas antes
|
|
66
66
|
</span>{" "}
|
|
@@ -7,8 +7,6 @@ interface SeatType {
|
|
|
7
7
|
label: string;
|
|
8
8
|
fare: number;
|
|
9
9
|
key: any;
|
|
10
|
-
apiSeatType?: string;
|
|
11
|
-
api_seat_type?: string;
|
|
12
10
|
}
|
|
13
11
|
|
|
14
12
|
interface SeatSectionProps {
|
|
@@ -23,15 +21,6 @@ interface SeatSectionProps {
|
|
|
23
21
|
serviceItem?: any;
|
|
24
22
|
renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
|
|
25
23
|
discountSeatPriceColor?: string;
|
|
26
|
-
isTrain?: boolean;
|
|
27
|
-
selectedSeatKey?: any;
|
|
28
|
-
onSeatSelect?: (
|
|
29
|
-
key: any,
|
|
30
|
-
price: number,
|
|
31
|
-
seatKey: string,
|
|
32
|
-
apiSeatType?: string,
|
|
33
|
-
) => void;
|
|
34
|
-
topLabelColor?: string;
|
|
35
24
|
}
|
|
36
25
|
|
|
37
26
|
function getAllSeatTypes(seatTypes: SeatType[]) {
|
|
@@ -42,8 +31,6 @@ function getAllSeatTypes(seatTypes: SeatType[]) {
|
|
|
42
31
|
let seatTypesWithPrices = seatTypes.filter(Boolean).map((val) => ({
|
|
43
32
|
label: val?.label,
|
|
44
33
|
price: val?.fare,
|
|
45
|
-
key: val?.key,
|
|
46
|
-
apiSeatType: val?.apiSeatType || val?.api_seat_type,
|
|
47
34
|
}));
|
|
48
35
|
|
|
49
36
|
seatTypesWithPrices.sort((a, b) => a.price - b.price);
|
|
@@ -51,7 +38,7 @@ function getAllSeatTypes(seatTypes: SeatType[]) {
|
|
|
51
38
|
return seatTypesWithPrices;
|
|
52
39
|
}
|
|
53
40
|
|
|
54
|
-
function getSortedSeatTypes(seatTypes: SeatType[]
|
|
41
|
+
function getSortedSeatTypes(seatTypes: SeatType[]) {
|
|
55
42
|
if (!seatTypes?.length) {
|
|
56
43
|
return [{ label: "Salon cama", price: 0 }];
|
|
57
44
|
}
|
|
@@ -65,11 +52,7 @@ function getSortedSeatTypes(seatTypes: SeatType[], isTrain: any) {
|
|
|
65
52
|
seatTypesWithPrices[2] = seatTypesWithPrices[premiumIndex];
|
|
66
53
|
}
|
|
67
54
|
|
|
68
|
-
|
|
69
|
-
seatTypesWithPrices = seatTypesWithPrices.slice(0, 4);
|
|
70
|
-
} else {
|
|
71
|
-
seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
|
|
72
|
-
}
|
|
55
|
+
seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
|
|
73
56
|
|
|
74
57
|
const seenPrices = new Set<number>();
|
|
75
58
|
seatTypesWithPrices = seatTypesWithPrices.filter((seat) => {
|
|
@@ -114,18 +97,14 @@ function SeatSection({
|
|
|
114
97
|
priceColor,
|
|
115
98
|
currencySign,
|
|
116
99
|
removeDuplicateSeats,
|
|
117
|
-
selectedSeatKey,
|
|
118
|
-
onSeatSelect,
|
|
119
100
|
isPeru,
|
|
120
101
|
serviceItem,
|
|
121
102
|
renderIcon,
|
|
122
103
|
dpSeatColor,
|
|
123
104
|
discountSeatPriceColor,
|
|
124
|
-
isTrain,
|
|
125
|
-
topLabelColor,
|
|
126
105
|
}: SeatSectionProps): React.ReactElement {
|
|
127
106
|
const uniqueSeats = getUniqueSeats(seatTypes);
|
|
128
|
-
const sortedSeatTypes = getSortedSeatTypes(seatTypes
|
|
107
|
+
const sortedSeatTypes = getSortedSeatTypes(seatTypes);
|
|
129
108
|
const numberOfSeats = getNumberOfSeats(seatTypes);
|
|
130
109
|
const isCentered = numberOfSeats < 2 || removeDuplicateSeats;
|
|
131
110
|
|
|
@@ -137,68 +116,22 @@ function SeatSection({
|
|
|
137
116
|
const renderSeatNames = () => {
|
|
138
117
|
const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
|
|
139
118
|
|
|
140
|
-
return seats.map((val, key: number) =>
|
|
141
|
-
|
|
142
|
-
<
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
? () =>
|
|
148
|
-
val.label === selectedSeatKey
|
|
149
|
-
? onSeatSelect?.(null, 0, "", "")
|
|
150
|
-
: onSeatSelect?.(
|
|
151
|
-
val.label,
|
|
152
|
-
val.price,
|
|
153
|
-
val.key,
|
|
154
|
-
(val as any).apiSeatType,
|
|
155
|
-
)
|
|
156
|
-
: undefined
|
|
157
|
-
}
|
|
119
|
+
return seats.map((val, key: number) =>
|
|
120
|
+
SEAT_EXCEPTIONS.includes(val.label) ? null : (
|
|
121
|
+
<span
|
|
122
|
+
key={key}
|
|
123
|
+
className={`flex items-center justify-between text-[13.33px] ${
|
|
124
|
+
isSoldOut ? "text-[#c0c0c0]" : ""
|
|
125
|
+
}`}
|
|
158
126
|
>
|
|
159
|
-
{
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
marginRight: "10px",
|
|
168
|
-
display: "flex",
|
|
169
|
-
alignItems: "center",
|
|
170
|
-
justifyContent: "center",
|
|
171
|
-
}}
|
|
172
|
-
>
|
|
173
|
-
{val.label === selectedSeatKey && (
|
|
174
|
-
<div
|
|
175
|
-
style={{
|
|
176
|
-
backgroundColor: topLabelColor,
|
|
177
|
-
borderRadius: "50%",
|
|
178
|
-
width: "7px",
|
|
179
|
-
height: "7px",
|
|
180
|
-
}}
|
|
181
|
-
/>
|
|
182
|
-
)}
|
|
183
|
-
</div>
|
|
184
|
-
)}
|
|
185
|
-
<span
|
|
186
|
-
key={key}
|
|
187
|
-
className={`flex items-center justify-between text-[13.33px] ${
|
|
188
|
-
isSoldOut ? "text-[#c0c0c0]" : ""
|
|
189
|
-
}`}
|
|
190
|
-
>
|
|
191
|
-
{typeof val.label === "string" || typeof val.label === "number"
|
|
192
|
-
? removeDuplicateSeats && isPeru
|
|
193
|
-
? CommonService.truncateSeatLabel(val.label)
|
|
194
|
-
: isTrain
|
|
195
|
-
? CommonService.truncateSeatLabel(val.label)
|
|
196
|
-
: val.label
|
|
197
|
-
: null}
|
|
198
|
-
</span>
|
|
199
|
-
</div>
|
|
200
|
-
);
|
|
201
|
-
});
|
|
127
|
+
{typeof val.label === "string" || typeof val.label === "number"
|
|
128
|
+
? removeDuplicateSeats && isPeru
|
|
129
|
+
? CommonService.truncateSeatLabel(val.label)
|
|
130
|
+
: val.label
|
|
131
|
+
: null}
|
|
132
|
+
</span>
|
|
133
|
+
),
|
|
134
|
+
);
|
|
202
135
|
};
|
|
203
136
|
|
|
204
137
|
const renderSeatPrices = () => {
|
|
@@ -56,7 +56,7 @@ function ExpandedDropdownMobile({
|
|
|
56
56
|
|
|
57
57
|
<span>
|
|
58
58
|
<span className="bold-text">Pasaje flexible:</span> Tu pasaje
|
|
59
|
-
puede ser cambiado
|
|
59
|
+
puede ser cambiado sin costo{" "}
|
|
60
60
|
<span className="bold-text">
|
|
61
61
|
hasta {serviceItem?.change_ticket_hours || 6} horas antes
|
|
62
62
|
</span>{" "}
|