kupos-ui-components-lib 10.0.4 → 10.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ServiceItem/PeruServiceItemDesktop.js +4 -4
- package/dist/components/ServiceItem/ServiceItemDesktop.js +4 -4
- package/dist/ui/SeatSection/SeatSection.d.ts +2 -1
- package/dist/ui/SeatSection/SeatSection.js +39 -10
- package/dist/ui/ServiceBadges/ServiceBadges.d.ts +1 -1
- package/package.json +1 -1
- package/src/components/ServiceItem/PeruServiceItemDesktop.tsx +4 -3
- package/src/components/ServiceItem/ServiceItemDesktop.tsx +4 -3
- package/src/ui/SeatSection/SeatSection.tsx +45 -2
- package/src/ui/ServiceBadges/ServiceBadges.tsx +1 -1
|
@@ -376,7 +376,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
|
|
|
376
376
|
const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text);
|
|
377
377
|
const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
|
|
378
378
|
const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
|
|
379
|
-
const serviceCardStyle = (hasOfferText && isNewUiEnabled) || hasDpEnabled
|
|
379
|
+
const serviceCardStyle = ((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
|
|
380
380
|
? {
|
|
381
381
|
borderColor: "transparent",
|
|
382
382
|
borderStyle: "solid",
|
|
@@ -391,13 +391,13 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
|
|
|
391
391
|
: serviceItem.seat_types || [];
|
|
392
392
|
const discountedSeats = seats.map((seat) => (Object.assign(Object.assign({}, seat), CommonService.calculateDiscountedPrice(seat.fare, serviceItem))));
|
|
393
393
|
const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
|
|
394
|
-
return (React.createElement("div", { className: `relative hover:z-[150] ${hasOfferText || hasDpEnabled || isNewUiEnabled ? "mb-[65px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
|
|
394
|
+
return (React.createElement("div", { className: `relative hover:z-[150] ${(hasOfferText || hasDpEnabled || isNewUiEnabled) && !isSoldOut ? "mb-[65px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
|
|
395
395
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
|
|
396
396
|
showTopLabel
|
|
397
397
|
? "mt-[30px]"
|
|
398
398
|
: "mt-[20px]"} ` },
|
|
399
399
|
((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDpEnabled) && !isSoldOut && (React.createElement(OfferBanner, { offerGradient: offerGradient, isSoldOut: isSoldOut, serviceItem: serviceItem, renderIcon: renderIcon, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon, showLoginOption: showLoginOption, isNewUiEnabled: isNewUiEnabled, colors: colors })),
|
|
400
|
-
React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${(hasOfferText && isNewUiEnabled && !isSoldOut
|
|
400
|
+
React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
|
|
401
401
|
? "z-[3] rounded-[18px]"
|
|
402
402
|
: "rounded-[10px] border border-[#ccc]"}`, style: serviceCardStyle },
|
|
403
403
|
React.createElement("div", { className: " pt-[20px]", style: {
|
|
@@ -458,7 +458,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
|
|
|
458
458
|
margin: "auto",
|
|
459
459
|
} }),
|
|
460
460
|
React.createElement("div", { className: "content-center" },
|
|
461
|
-
React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru, renderIcon: renderIcon, discountSeatPriceColor: colors.discountSeatPriceColor })),
|
|
461
|
+
React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru, renderIcon: renderIcon, discountSeatPriceColor: colors.discountSeatPriceColor, isSeatIcon: isSeatIcon })),
|
|
462
462
|
React.createElement("div", { className: "relative" },
|
|
463
463
|
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 }),
|
|
464
464
|
showLastSeats ? (React.createElement("div", { className: "flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[36px]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
|
|
@@ -156,7 +156,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
156
156
|
const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true;
|
|
157
157
|
const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
|
|
158
158
|
const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
|
|
159
|
-
const serviceCardStyle = (hasOfferText && isNewUiEnabled) || hasDpEnabled
|
|
159
|
+
const serviceCardStyle = ((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
|
|
160
160
|
? {
|
|
161
161
|
borderColor: "transparent",
|
|
162
162
|
borderStyle: "solid",
|
|
@@ -293,13 +293,13 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
293
293
|
setIsFeatureDropDownExpand(isFeatureDropDownExpand === serviceItem.id ||
|
|
294
294
|
isFeatureDropDownExpand === true
|
|
295
295
|
? null
|
|
296
|
-
: serviceItem.id), selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle, wowDealData: wowDealData })) : (React.createElement("div", { className: `relative hover:z-[150] ${hasOfferText || hasDpEnabled || isNewUiEnabled ? "mb-[65px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
|
|
296
|
+
: serviceItem.id), selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle, wowDealData: wowDealData })) : (React.createElement("div", { className: `relative hover:z-[150] ${(hasOfferText || hasDpEnabled || isNewUiEnabled) && !isSoldOut ? "mb-[65px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
|
|
297
297
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
|
|
298
298
|
showTopLabel
|
|
299
299
|
? "mt-[30px]"
|
|
300
300
|
: "mt-[20px]"} ` },
|
|
301
301
|
((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDpEnabled) && !isSoldOut && (React.createElement(OfferBanner, { offerGradient: offerGradient, isSoldOut: isSoldOut, serviceItem: serviceItem, renderIcon: renderIcon, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon, showLoginOption: showLoginOption, isNewUiEnabled: isNewUiEnabled, colors: colors, isLinatal: isLinatal })),
|
|
302
|
-
React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${(hasOfferText && isNewUiEnabled && !isSoldOut
|
|
302
|
+
React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
|
|
303
303
|
? "z-[3] rounded-[18px]"
|
|
304
304
|
: "rounded-[10px] border border-[#ccc]"}`, style: serviceCardStyle },
|
|
305
305
|
React.createElement("div", { className: " pt-[20px]", style: {
|
|
@@ -326,7 +326,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
326
326
|
backgroundColor: "#ccc",
|
|
327
327
|
} }),
|
|
328
328
|
React.createElement("div", { className: "content-center" },
|
|
329
|
-
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, isTrain: isTrain, selectedSeatKey: selectedSeatKey, onSeatSelect: handleSeatSelect, topLabelColor: colors.topLabelColor, tooltipColor: colors.tooltipColor })),
|
|
329
|
+
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, isSeatIcon: isSeatIcon, isTrain: isTrain, selectedSeatKey: selectedSeatKey, onSeatSelect: handleSeatSelect, topLabelColor: colors.topLabelColor, tooltipColor: colors.tooltipColor })),
|
|
330
330
|
React.createElement("div", { className: "relative" },
|
|
331
331
|
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 }),
|
|
332
332
|
showSeatSelectionError === serviceItem.id && isTrain && (React.createElement("div", { className: "flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]" },
|
|
@@ -18,11 +18,12 @@ interface SeatSectionProps {
|
|
|
18
18
|
serviceItem?: any;
|
|
19
19
|
renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
|
|
20
20
|
discountSeatPriceColor?: string;
|
|
21
|
+
isSeatIcon?: boolean;
|
|
21
22
|
isTrain?: boolean;
|
|
22
23
|
selectedSeatKey?: any;
|
|
23
24
|
onSeatSelect?: (key: any, price: number, seatKey: string, apiSeatType?: string) => void;
|
|
24
25
|
topLabelColor?: string;
|
|
25
26
|
tooltipColor?: string;
|
|
26
27
|
}
|
|
27
|
-
declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isTrain, topLabelColor, tooltipColor, }: SeatSectionProps): React.ReactElement;
|
|
28
|
+
declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isSeatIcon, isTrain, topLabelColor, tooltipColor, }: SeatSectionProps): React.ReactElement;
|
|
28
29
|
export default SeatSection;
|
|
@@ -61,7 +61,18 @@ function getUniqueSeats(seatTypes) {
|
|
|
61
61
|
function getNumberOfSeats(seatTypes) {
|
|
62
62
|
return seatTypes.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
|
|
63
63
|
}
|
|
64
|
-
function
|
|
64
|
+
function getSeatTypeIcon(label, serviceItem) {
|
|
65
|
+
var _a, _b, _c, _d;
|
|
66
|
+
const seatLabel = String(label !== null && label !== void 0 ? label : "");
|
|
67
|
+
if (seatLabel.includes("180°"))
|
|
68
|
+
return (_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _a === void 0 ? void 0 : _a.seat180Icon;
|
|
69
|
+
if (seatLabel.includes("160°"))
|
|
70
|
+
return (_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _b === void 0 ? void 0 : _b.seat160Icon;
|
|
71
|
+
if (seatLabel.includes("140°"))
|
|
72
|
+
return (_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _c === void 0 ? void 0 : _c.seat140Icon;
|
|
73
|
+
return (_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _d === void 0 ? void 0 : _d.seatFallBackIcon;
|
|
74
|
+
}
|
|
75
|
+
function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isSeatIcon, isTrain, topLabelColor, tooltipColor, }) {
|
|
65
76
|
var _a;
|
|
66
77
|
const uniqueSeats = getUniqueSeats(seatTypes);
|
|
67
78
|
const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
|
|
@@ -94,13 +105,19 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
|
|
|
94
105
|
width: "7px",
|
|
95
106
|
height: "7px",
|
|
96
107
|
} })))),
|
|
97
|
-
React.createElement("span", { key: key, className: `flex items-center justify-between text-[13.33px] whitespace-nowrap ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
108
|
+
React.createElement("span", { key: key, className: `flex items-center justify-between text-[13.33px] whitespace-nowrap ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
|
|
109
|
+
isSeatIcon && (React.createElement("img", { src: getSeatTypeIcon(val.label, serviceItem), alt: "seattype", style: {
|
|
110
|
+
width: "20px",
|
|
111
|
+
height: "20px",
|
|
112
|
+
marginRight: "5px",
|
|
113
|
+
} })),
|
|
114
|
+
typeof val.label === "string" || typeof val.label === "number"
|
|
115
|
+
? removeDuplicateSeats && isPeru
|
|
116
|
+
? CommonService.truncateSeatLabel(val.label)
|
|
117
|
+
: isTrain
|
|
118
|
+
? CommonService.capitalize(String(val.label))
|
|
119
|
+
: val.label
|
|
120
|
+
: null)));
|
|
104
121
|
});
|
|
105
122
|
};
|
|
106
123
|
const renderSeatPrices = () => {
|
|
@@ -180,7 +197,13 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
|
|
|
180
197
|
if (isMovilBus && uniqueSeats.length > 1) {
|
|
181
198
|
return uniqueSeats
|
|
182
199
|
.filter((s) => !SEAT_EXCEPTIONS.includes(s.label))
|
|
183
|
-
.map((val, key) => (React.createElement("span", { key: key, className: `flex items-center justify-between text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
|
|
200
|
+
.map((val, key) => (React.createElement("span", { key: key, className: `flex items-center justify-between text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
|
|
201
|
+
isSeatIcon && !hasDiscount && (React.createElement("img", { src: getSeatTypeIcon(val.label, serviceItem), alt: "seattype", style: {
|
|
202
|
+
width: "20px",
|
|
203
|
+
height: "20px",
|
|
204
|
+
marginRight: "5px",
|
|
205
|
+
} })),
|
|
206
|
+
CommonService.truncateSeatLabel(val.label))));
|
|
184
207
|
}
|
|
185
208
|
// Single seat type → original behaviour
|
|
186
209
|
const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
|
|
@@ -196,7 +219,13 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
|
|
|
196
219
|
hasDiscount && (React.createElement("span", { className: "text-[13.33px]", style: {
|
|
197
220
|
color: "#999",
|
|
198
221
|
} }, "Antes")),
|
|
199
|
-
React.createElement("span", { className: "text-[13.33px] flex flex-col" },
|
|
222
|
+
React.createElement("span", { className: "text-[13.33px] flex flex-col" }, !hasDiscount ? (React.createElement("span", { className: "text-[13.33px] whitespace-nowrap flex items-center" },
|
|
223
|
+
isSeatIcon && !hasDiscount && (React.createElement("img", { src: getSeatTypeIcon(seatLabel, serviceItem), alt: "seattype", style: {
|
|
224
|
+
width: "20px",
|
|
225
|
+
height: "20px",
|
|
226
|
+
marginRight: "5px",
|
|
227
|
+
} })),
|
|
228
|
+
seatLabel)) : (React.createElement("span", { className: "text-[13.33px]" }, "Desde")))));
|
|
200
229
|
}
|
|
201
230
|
return renderSeatNames();
|
|
202
231
|
};
|
package/package.json
CHANGED
|
@@ -576,7 +576,7 @@ function PeruServiceItemDesktop({
|
|
|
576
576
|
const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
|
|
577
577
|
const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
|
|
578
578
|
const serviceCardStyle: React.CSSProperties =
|
|
579
|
-
(hasOfferText && isNewUiEnabled) || hasDpEnabled
|
|
579
|
+
((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
|
|
580
580
|
? {
|
|
581
581
|
borderColor: "transparent",
|
|
582
582
|
borderStyle: "solid",
|
|
@@ -605,7 +605,7 @@ function PeruServiceItemDesktop({
|
|
|
605
605
|
|
|
606
606
|
return (
|
|
607
607
|
<div
|
|
608
|
-
className={`relative hover:z-[150] ${hasOfferText || hasDpEnabled || isNewUiEnabled ? "mb-[65px]" : "mb-[20px]"} ${
|
|
608
|
+
className={`relative hover:z-[150] ${(hasOfferText || hasDpEnabled || isNewUiEnabled) && !isSoldOut ? "mb-[65px]" : "mb-[20px]"} ${
|
|
609
609
|
serviceItem?.is_direct_trip ||
|
|
610
610
|
serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
|
|
611
611
|
showTopLabel
|
|
@@ -631,7 +631,7 @@ function PeruServiceItemDesktop({
|
|
|
631
631
|
<div
|
|
632
632
|
id={`service-card-${serviceItem.id}`}
|
|
633
633
|
className={`bg-white mx-auto relative ${
|
|
634
|
-
(hasOfferText && isNewUiEnabled && !isSoldOut
|
|
634
|
+
((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
|
|
635
635
|
? "z-[3] rounded-[18px]"
|
|
636
636
|
: "rounded-[10px] border border-[#ccc]"
|
|
637
637
|
}`}
|
|
@@ -865,6 +865,7 @@ function PeruServiceItemDesktop({
|
|
|
865
865
|
isPeru={isPeru}
|
|
866
866
|
renderIcon={renderIcon}
|
|
867
867
|
discountSeatPriceColor={colors.discountSeatPriceColor}
|
|
868
|
+
isSeatIcon={isSeatIcon}
|
|
868
869
|
/>
|
|
869
870
|
</div>
|
|
870
871
|
|
|
@@ -270,7 +270,7 @@ function ServiceItemPB({
|
|
|
270
270
|
const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
|
|
271
271
|
const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
|
|
272
272
|
const serviceCardStyle: React.CSSProperties =
|
|
273
|
-
(hasOfferText && isNewUiEnabled) || hasDpEnabled
|
|
273
|
+
((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
|
|
274
274
|
? {
|
|
275
275
|
borderColor: "transparent",
|
|
276
276
|
borderStyle: "solid",
|
|
@@ -535,7 +535,7 @@ function ServiceItemPB({
|
|
|
535
535
|
/>
|
|
536
536
|
) : (
|
|
537
537
|
<div
|
|
538
|
-
className={`relative hover:z-[150] ${hasOfferText || hasDpEnabled || isNewUiEnabled ? "mb-[65px]" : "mb-[20px]"} ${
|
|
538
|
+
className={`relative hover:z-[150] ${(hasOfferText || hasDpEnabled || isNewUiEnabled) && !isSoldOut ? "mb-[65px]" : "mb-[20px]"} ${
|
|
539
539
|
serviceItem?.is_direct_trip ||
|
|
540
540
|
serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
|
|
541
541
|
showTopLabel
|
|
@@ -562,7 +562,7 @@ function ServiceItemPB({
|
|
|
562
562
|
<div
|
|
563
563
|
id={`service-card-${serviceItem.id}`}
|
|
564
564
|
className={`bg-white mx-auto relative ${
|
|
565
|
-
(hasOfferText && isNewUiEnabled && !isSoldOut
|
|
565
|
+
((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
|
|
566
566
|
? "z-[3] rounded-[18px]"
|
|
567
567
|
: "rounded-[10px] border border-[#ccc]"
|
|
568
568
|
}`}
|
|
@@ -649,6 +649,7 @@ function ServiceItemPB({
|
|
|
649
649
|
isPeru={isPeru}
|
|
650
650
|
renderIcon={renderIcon}
|
|
651
651
|
discountSeatPriceColor={colors.discountSeatPriceColor}
|
|
652
|
+
isSeatIcon={isSeatIcon}
|
|
652
653
|
isTrain={isTrain}
|
|
653
654
|
selectedSeatKey={selectedSeatKey}
|
|
654
655
|
onSeatSelect={handleSeatSelect}
|
|
@@ -23,6 +23,7 @@ interface SeatSectionProps {
|
|
|
23
23
|
serviceItem?: any;
|
|
24
24
|
renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
|
|
25
25
|
discountSeatPriceColor?: string;
|
|
26
|
+
isSeatIcon?: boolean;
|
|
26
27
|
isTrain?: boolean;
|
|
27
28
|
selectedSeatKey?: any;
|
|
28
29
|
onSeatSelect?: (
|
|
@@ -111,6 +112,14 @@ function getNumberOfSeats(seatTypes: SeatType[]) {
|
|
|
111
112
|
return seatTypes.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
|
|
112
113
|
}
|
|
113
114
|
|
|
115
|
+
function getSeatTypeIcon(label: string, serviceItem: any) {
|
|
116
|
+
const seatLabel = String(label ?? "");
|
|
117
|
+
if (seatLabel.includes("180°")) return serviceItem?.icons?.seat180Icon;
|
|
118
|
+
if (seatLabel.includes("160°")) return serviceItem?.icons?.seat160Icon;
|
|
119
|
+
if (seatLabel.includes("140°")) return serviceItem?.icons?.seat140Icon;
|
|
120
|
+
return serviceItem?.icons?.seatFallBackIcon;
|
|
121
|
+
}
|
|
122
|
+
|
|
114
123
|
function SeatSection({
|
|
115
124
|
seatTypes,
|
|
116
125
|
availableSeats,
|
|
@@ -125,6 +134,7 @@ function SeatSection({
|
|
|
125
134
|
renderIcon,
|
|
126
135
|
dpSeatColor,
|
|
127
136
|
discountSeatPriceColor,
|
|
137
|
+
isSeatIcon,
|
|
128
138
|
isTrain,
|
|
129
139
|
topLabelColor,
|
|
130
140
|
tooltipColor,
|
|
@@ -193,6 +203,17 @@ function SeatSection({
|
|
|
193
203
|
isSoldOut ? "text-[#c0c0c0]" : ""
|
|
194
204
|
}`}
|
|
195
205
|
>
|
|
206
|
+
{isSeatIcon && (
|
|
207
|
+
<img
|
|
208
|
+
src={getSeatTypeIcon(val.label, serviceItem) as string}
|
|
209
|
+
alt="seattype"
|
|
210
|
+
style={{
|
|
211
|
+
width: "20px",
|
|
212
|
+
height: "20px",
|
|
213
|
+
marginRight: "5px",
|
|
214
|
+
}}
|
|
215
|
+
/>
|
|
216
|
+
)}
|
|
196
217
|
{typeof val.label === "string" || typeof val.label === "number"
|
|
197
218
|
? removeDuplicateSeats && isPeru
|
|
198
219
|
? CommonService.truncateSeatLabel(val.label)
|
|
@@ -345,6 +366,17 @@ function SeatSection({
|
|
|
345
366
|
isSoldOut ? "text-[#c0c0c0]" : ""
|
|
346
367
|
}`}
|
|
347
368
|
>
|
|
369
|
+
{isSeatIcon && !hasDiscount && (
|
|
370
|
+
<img
|
|
371
|
+
src={getSeatTypeIcon(val.label, serviceItem) as string}
|
|
372
|
+
alt="seattype"
|
|
373
|
+
style={{
|
|
374
|
+
width: "20px",
|
|
375
|
+
height: "20px",
|
|
376
|
+
marginRight: "5px",
|
|
377
|
+
}}
|
|
378
|
+
/>
|
|
379
|
+
)}
|
|
348
380
|
{CommonService.truncateSeatLabel(val.label)}
|
|
349
381
|
</span>
|
|
350
382
|
));
|
|
@@ -380,8 +412,19 @@ function SeatSection({
|
|
|
380
412
|
)}
|
|
381
413
|
|
|
382
414
|
<span className="text-[13.33px] flex flex-col">
|
|
383
|
-
{
|
|
384
|
-
<span className="text-[13.33px] whitespace-nowrap">
|
|
415
|
+
{!hasDiscount ? (
|
|
416
|
+
<span className="text-[13.33px] whitespace-nowrap flex items-center">
|
|
417
|
+
{isSeatIcon && !hasDiscount && (
|
|
418
|
+
<img
|
|
419
|
+
src={getSeatTypeIcon(seatLabel as string, serviceItem) as string}
|
|
420
|
+
alt="seattype"
|
|
421
|
+
style={{
|
|
422
|
+
width: "20px",
|
|
423
|
+
height: "20px",
|
|
424
|
+
marginRight: "5px",
|
|
425
|
+
}}
|
|
426
|
+
/>
|
|
427
|
+
)}
|
|
385
428
|
{seatLabel}
|
|
386
429
|
</span>
|
|
387
430
|
) : (
|