kupos-ui-components-lib 9.1.9 → 9.1.10
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.js +1 -2
- package/dist/components/ServiceItem/ServiceItemMobile.js +24 -23
- package/dist/styles.css +10 -0
- package/dist/ui/SeatSection/SeatSection.js +10 -11
- package/dist/ui/mobileweb/SeatSectionMobile.js +2 -4
- package/package.json +1 -1
- package/src/components/ServiceItem/ServiceItemDesktop.tsx +1 -2
- package/src/components/ServiceItem/ServiceItemMobile.tsx +34 -27
- package/src/ui/SeatSection/SeatSection.tsx +26 -24
- package/src/ui/mobileweb/SeatSectionMobile.tsx +16 -16
|
@@ -217,8 +217,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
217
217
|
const id = setInterval(() => {
|
|
218
218
|
remaining -= 1;
|
|
219
219
|
if (remaining <= 0) {
|
|
220
|
-
remaining =
|
|
221
|
-
clearInterval(id);
|
|
220
|
+
remaining = countdownSeconds;
|
|
222
221
|
}
|
|
223
222
|
node.textContent = formatTime(remaining);
|
|
224
223
|
}, 1000);
|
|
@@ -17,10 +17,11 @@ const exceptions = [
|
|
|
17
17
|
"asiento_mascota",
|
|
18
18
|
];
|
|
19
19
|
function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, }) {
|
|
20
|
-
var _a, _b, _c;
|
|
20
|
+
var _a, _b, _c, _d;
|
|
21
21
|
const isItemExpanded = serviceItem.id === isExpanded;
|
|
22
22
|
const isPetSeat = (Object.keys(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.pet_seat_info) || []).length > 0;
|
|
23
23
|
let isSoldOut = serviceItem.available_seats <= 0;
|
|
24
|
+
const isLongOfferText = (((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) === null || _a === void 0 ? void 0 : _a.length) || 0) > 35;
|
|
24
25
|
const startViewerCount = (node) => {
|
|
25
26
|
if (!node || !viewersConfig)
|
|
26
27
|
return;
|
|
@@ -56,8 +57,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
56
57
|
const id = setInterval(() => {
|
|
57
58
|
remaining -= 1;
|
|
58
59
|
if (remaining <= 0) {
|
|
59
|
-
remaining =
|
|
60
|
-
clearInterval(id);
|
|
60
|
+
remaining = countdownSeconds;
|
|
61
61
|
}
|
|
62
62
|
node.textContent = formatTime(remaining);
|
|
63
63
|
}, 1000);
|
|
@@ -141,9 +141,9 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
141
141
|
React.createElement("span", { className: "ml-[3px] min-[420]:text-[13px] text-[12px] text-ellipsis" }, serviceItem.operator_details[2]))))) : null),
|
|
142
142
|
showLastSeats ? (React.createElement("div", { className: "flex justify-end " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
|
|
143
143
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[10px] text-[#464647] text-center" }, "\u00A1 \u00DAltimos Asientos!")))) : null),
|
|
144
|
-
React.createElement(DateTimeSectionMobile, { onBookButtonPress: onBookButtonPress, isCiva: isCiva, isSoldOut: isSoldOut, isLinatal: isLinatal, isPeru: isPeru, orignLabel: orignLabel, destinationLabel: destinationLabel, originIcon: (
|
|
144
|
+
React.createElement(DateTimeSectionMobile, { onBookButtonPress: onBookButtonPress, isCiva: isCiva, isSoldOut: isSoldOut, isLinatal: isLinatal, isPeru: isPeru, orignLabel: orignLabel, destinationLabel: destinationLabel, originIcon: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.origin, destinationIcon: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.destination, travelDate: serviceItem.travel_date, arrivalDate: serviceItem.arrival_date, depTime: serviceItem.dep_time, arrTime: serviceItem.arr_time, seatTypes: serviceItem.seat_types, seatPriceColor: colors.seatPriceColor, currencySign: currencySign, availableSeats: serviceItem.available_seats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem }),
|
|
145
145
|
React.createElement("div", { className: "bg-[#E6E6E6] mt-[10px] mb-[10px] h-[1px]" }),
|
|
146
|
-
React.createElement(BottomAmenitiesMobile, { isSoldOut: isSoldOut, amenitiesNodes: amenities(), hoursIcon: renderIcon("hours", "14px"), duration: (
|
|
146
|
+
React.createElement(BottomAmenitiesMobile, { isSoldOut: isSoldOut, amenitiesNodes: amenities(), hoursIcon: renderIcon("hours", "14px"), duration: (_d = serviceItem.duration) === null || _d === void 0 ? void 0 : _d.toString(), isDirectTrip: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip, directoColor: colors.directoColor, directoAnim: serviceItem.icons.directoAnim, isChangeTicket: serviceItem.is_change_ticket, isPetSeat: isPetSeat, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, flexibleAnim: serviceItem.icons.flexibleAnim, isTrackingEnabled: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled, locationAnim: serviceItem.icons.locationAnim, downArrowIcon: serviceItem.icons.downArrow, showDropdown: isItemExpanded, setShowDropdown: () => setIsExpanded(isItemExpanded ? null : serviceItem.id),
|
|
147
147
|
// onDropdownToggle={() => {
|
|
148
148
|
// setShowDropdown(!showDropdown);
|
|
149
149
|
// setAmenetiesAtomValue({
|
|
@@ -177,35 +177,36 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
177
177
|
} },
|
|
178
178
|
React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "20px", height: "20px" }),
|
|
179
179
|
React.createElement("div", null, "Tren Express"))))),
|
|
180
|
-
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[
|
|
180
|
+
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
|
|
181
181
|
backgroundColor: isSoldOut ? "#ccc" : colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
|
|
182
182
|
opacity: isSoldOut ? 0.5 : 1,
|
|
183
183
|
borderRadius: "0 0 14px 14px",
|
|
184
184
|
zIndex: -1,
|
|
185
185
|
} },
|
|
186
186
|
React.createElement("div", { className: "flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]", style: { lineHeight: 1.6 } },
|
|
187
|
-
React.createElement("div", { className: "flex flex-col" },
|
|
188
|
-
React.createElement("div", { className:
|
|
189
|
-
React.createElement(
|
|
190
|
-
|
|
187
|
+
React.createElement("div", { className: "flex flex-col gap-[4px]" },
|
|
188
|
+
React.createElement("div", { className: `flex ${isLongOfferText ? "items-start" : "items-center"}` },
|
|
189
|
+
React.createElement("div", { className: isLongOfferText ? "mt-[2px]" : "" },
|
|
190
|
+
React.createElement(LottiePlayer, { animationData: serviceItem.icons.bombAnim, width: "18px", height: "18px" })),
|
|
191
|
+
React.createElement("div", { className: `ml-[6px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`, style: {
|
|
191
192
|
color: "#fff",
|
|
193
|
+
lineHeight: 1.4,
|
|
192
194
|
} },
|
|
193
|
-
React.createElement("span", { className: "
|
|
194
|
-
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "",
|
|
195
|
-
"\u00A0"),
|
|
195
|
+
React.createElement("span", { className: "min-[380px]:text-[12px] bold-text" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || ""),
|
|
196
196
|
" ",
|
|
197
|
-
"
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
197
|
+
React.createElement("span", { className: "min-[380px]:text-[12px]" }, "|"),
|
|
198
|
+
" ",
|
|
199
|
+
React.createElement("span", { className: "whitespace-nowrap min-[380px]:text-[12px]" },
|
|
200
|
+
"Termina en\u00A0",
|
|
201
|
+
React.createElement("span", { className: "bold-text", ref: startCountdown, style: {
|
|
202
|
+
fontVariantNumeric: "tabular-nums",
|
|
203
|
+
display: "inline-block",
|
|
204
|
+
} })))),
|
|
205
|
+
React.createElement("div", { className: "flex items-start", style: {
|
|
204
206
|
color: "#fff",
|
|
205
207
|
} },
|
|
206
|
-
renderIcon("personIcon", "16px"),
|
|
207
|
-
"
|
|
208
|
-
React.createElement("span", { className: "" },
|
|
208
|
+
React.createElement("div", null, renderIcon("personIcon", "16px")),
|
|
209
|
+
React.createElement("span", { className: "flex-1", style: { lineHeight: 1.4 } },
|
|
209
210
|
React.createElement("span", { className: "bold-text", ref: startViewerCount, style: { fontVariantNumeric: "tabular-nums" } }),
|
|
210
211
|
" ",
|
|
211
212
|
React.createElement("span", { className: "bold-text" }, "personas"),
|
package/dist/styles.css
CHANGED
|
@@ -460,6 +460,9 @@
|
|
|
460
460
|
.items-center {
|
|
461
461
|
align-items: center;
|
|
462
462
|
}
|
|
463
|
+
.items-start {
|
|
464
|
+
align-items: flex-start;
|
|
465
|
+
}
|
|
463
466
|
.justify-between {
|
|
464
467
|
justify-content: space-between;
|
|
465
468
|
}
|
|
@@ -741,6 +744,9 @@
|
|
|
741
744
|
.pb-\[7px\] {
|
|
742
745
|
padding-bottom: 7px;
|
|
743
746
|
}
|
|
747
|
+
.pb-\[8px\] {
|
|
748
|
+
padding-bottom: 8px;
|
|
749
|
+
}
|
|
744
750
|
.pb-\[10px\] {
|
|
745
751
|
padding-bottom: 10px;
|
|
746
752
|
}
|
|
@@ -895,6 +901,10 @@
|
|
|
895
901
|
--tw-duration: 300ms;
|
|
896
902
|
transition-duration: 300ms;
|
|
897
903
|
}
|
|
904
|
+
.outline-none {
|
|
905
|
+
--tw-outline-style: none;
|
|
906
|
+
outline-style: none;
|
|
907
|
+
}
|
|
898
908
|
.group-hover\:block {
|
|
899
909
|
&:is(:where(.group):hover *) {
|
|
900
910
|
@media (hover: hover) {
|
|
@@ -95,25 +95,25 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
|
|
|
95
95
|
: null));
|
|
96
96
|
});
|
|
97
97
|
};
|
|
98
|
+
const strikethroughStyle = Object.assign({ color: "#ccc", display: "flex", textAlign: "end", textDecoration: "line-through" }, (isPeru
|
|
99
|
+
? { position: "relative", top: 0 }
|
|
100
|
+
: { position: "absolute", top: isCentered ? "-10px" : "-18px" }));
|
|
101
|
+
const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
|
|
102
|
+
const discountedSeats = seats.map((seat) => (Object.assign(Object.assign({}, seat), CommonService.calculateDiscountedPrice(seat.price, serviceItem))));
|
|
103
|
+
const highestOriginalPrice = Math.max(...discountedSeats.map((seat) => seat.originalPrice));
|
|
104
|
+
const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
|
|
98
105
|
const renderLabels = () => {
|
|
99
106
|
if (isPeru) {
|
|
100
107
|
return (React.createElement(React.Fragment, null,
|
|
101
|
-
React.createElement("span", { className: "text-[13.33px]", style: {
|
|
108
|
+
hasDiscount && (React.createElement("span", { className: "text-[13.33px]", style: {
|
|
102
109
|
color: "#999",
|
|
103
110
|
// position: "relative",
|
|
104
111
|
// bottom: numberOfSeats ? "10px" : "",
|
|
105
|
-
} }, "Antes"),
|
|
112
|
+
} }, "Antes")),
|
|
106
113
|
React.createElement("span", { className: "text-[13.33px]" }, "Desde")));
|
|
107
114
|
}
|
|
108
115
|
return renderSeatNames();
|
|
109
116
|
};
|
|
110
|
-
const strikethroughStyle = Object.assign({ color: "#ccc", display: "flex", textAlign: "end", textDecoration: "line-through" }, (isPeru
|
|
111
|
-
? { position: "relative", top: 0 }
|
|
112
|
-
: { position: "absolute", top: isCentered ? "-10px" : "-18px" }));
|
|
113
|
-
const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
|
|
114
|
-
const discountedSeats = seats.map((seat) => (Object.assign(Object.assign({}, seat), CommonService.calculateDiscountedPrice(seat.price, serviceItem))));
|
|
115
|
-
const highestOriginalPrice = Math.max(...discountedSeats.map((seat) => seat.originalPrice));
|
|
116
|
-
const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
|
|
117
117
|
return (React.createElement("div", { className: "relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.2rem]", style: isCentered ? { alignItems: "center" } : {} },
|
|
118
118
|
React.createElement("div", { className: "flex flex-col justify-between", style: { gap: "10px" } }, renderLabels()),
|
|
119
119
|
React.createElement("div", { className: "flex flex-col justify-between absolute inset-y-0 right-0 left-1/2 h-full", style: {
|
|
@@ -125,8 +125,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
|
|
|
125
125
|
justifyContent: isCentered ? "center" : "",
|
|
126
126
|
gap: "10px",
|
|
127
127
|
} },
|
|
128
|
-
isPeru && (React.createElement("span", { className: "text-[13.33px]", style: strikethroughStyle }, formatPrice(
|
|
129
|
-
hasDiscount && (React.createElement("span", { className: "text-[13.33px]", style: strikethroughStyle }, formatPrice(highestOriginalPrice))),
|
|
128
|
+
hasDiscount && !isPeru && (React.createElement("span", { className: "text-[13.33px]", style: strikethroughStyle }, formatPrice(highestOriginalPrice))),
|
|
130
129
|
renderSeatPrices())));
|
|
131
130
|
}
|
|
132
131
|
export default SeatSection;
|
|
@@ -70,11 +70,9 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
|
|
|
70
70
|
const priceColor = isSoldOut ? "#bbb" : seatPriceColor;
|
|
71
71
|
const { originalPrice, discountedPrice } = commonService.calculateDiscountedPrice(lowestFare, serviceItem);
|
|
72
72
|
return (React.createElement(React.Fragment, null,
|
|
73
|
-
React.createElement("div", { className: "w-[100%] flex flex-row justify-between items-center" },
|
|
73
|
+
originalPrice !== discountedPrice && (React.createElement("div", { className: "w-[100%] flex flex-row justify-between items-center" },
|
|
74
74
|
React.createElement("span", { className: "min-[420]:text-[13px] text-[12px]", style: { color: "#bbb" } }, "Antes"),
|
|
75
|
-
React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] line-through", style: { color: "#bbb" } }, originalPrice
|
|
76
|
-
? commonService.currency(originalPrice, currencySign)
|
|
77
|
-
: commonService.currency(getHighestFare(), currencySign))),
|
|
75
|
+
React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] line-through", style: { color: "#bbb" } }, commonService.currency(originalPrice, currencySign)))),
|
|
78
76
|
React.createElement("div", { className: "w-[100%] flex flex-row justify-between items-center" },
|
|
79
77
|
React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: isSoldOut ? "#bbb" : "#464647" } }, "Desde"),
|
|
80
78
|
React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: priceColor } }, commonService.currency(discountedPrice, currencySign)))));
|
package/package.json
CHANGED
|
@@ -48,6 +48,8 @@ function ServiceItemMobile({
|
|
|
48
48
|
const isItemExpanded = serviceItem.id === isExpanded;
|
|
49
49
|
const isPetSeat = (Object.keys(serviceItem?.pet_seat_info) || []).length > 0;
|
|
50
50
|
let isSoldOut = serviceItem.available_seats <= 0;
|
|
51
|
+
const isLongOfferText = (serviceItem?.offer_text?.length || 0) > 35;
|
|
52
|
+
|
|
51
53
|
const startViewerCount = (node: HTMLSpanElement | null) => {
|
|
52
54
|
if (!node || !viewersConfig) return;
|
|
53
55
|
|
|
@@ -92,8 +94,7 @@ function ServiceItemMobile({
|
|
|
92
94
|
const id = setInterval(() => {
|
|
93
95
|
remaining -= 1;
|
|
94
96
|
if (remaining <= 0) {
|
|
95
|
-
remaining =
|
|
96
|
-
clearInterval(id);
|
|
97
|
+
remaining = countdownSeconds;
|
|
97
98
|
}
|
|
98
99
|
node.textContent = formatTime(remaining);
|
|
99
100
|
}, 1000);
|
|
@@ -405,7 +406,7 @@ function ServiceItemMobile({
|
|
|
405
406
|
{/* 🔹 EXPANDABLE DROPDOWN (below the card) */}
|
|
406
407
|
{serviceItem?.offer_text && (
|
|
407
408
|
<div
|
|
408
|
-
className="px-[12px] pt-[22px] pb-[
|
|
409
|
+
className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
|
|
409
410
|
style={{
|
|
410
411
|
backgroundColor: isSoldOut ? "#ccc" : colors?.bottomStripColor,
|
|
411
412
|
opacity: isSoldOut ? 0.5 : 1,
|
|
@@ -417,43 +418,49 @@ function ServiceItemMobile({
|
|
|
417
418
|
className="flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]"
|
|
418
419
|
style={{ lineHeight: 1.6 }}
|
|
419
420
|
>
|
|
420
|
-
<div className="flex flex-col">
|
|
421
|
-
<div
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
421
|
+
<div className="flex flex-col gap-[4px]">
|
|
422
|
+
<div
|
|
423
|
+
className={`flex ${isLongOfferText ? "items-start" : "items-center"}`}
|
|
424
|
+
>
|
|
425
|
+
<div className={isLongOfferText ? "mt-[2px]" : ""}>
|
|
426
|
+
<LottiePlayer
|
|
427
|
+
animationData={serviceItem.icons.bombAnim}
|
|
428
|
+
width="18px"
|
|
429
|
+
height="18px"
|
|
430
|
+
/>
|
|
431
|
+
</div>
|
|
427
432
|
<div
|
|
428
|
-
className=
|
|
433
|
+
className={`ml-[6px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`}
|
|
429
434
|
style={{
|
|
430
435
|
color: "#fff",
|
|
436
|
+
lineHeight: 1.4,
|
|
431
437
|
}}
|
|
432
438
|
>
|
|
433
|
-
<span className="
|
|
434
|
-
{serviceItem?.offer_text || ""}
|
|
439
|
+
<span className="min-[380px]:text-[12px] bold-text">
|
|
440
|
+
{serviceItem?.offer_text || ""}
|
|
435
441
|
</span>{" "}
|
|
436
|
-
|
|
437
|
-
<span
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
442
|
+
<span className="min-[380px]:text-[12px]">|</span>{" "}
|
|
443
|
+
<span className="whitespace-nowrap min-[380px]:text-[12px]">
|
|
444
|
+
Termina en
|
|
445
|
+
<span
|
|
446
|
+
className="bold-text"
|
|
447
|
+
ref={startCountdown}
|
|
448
|
+
style={{
|
|
449
|
+
fontVariantNumeric: "tabular-nums",
|
|
450
|
+
display: "inline-block",
|
|
451
|
+
}}
|
|
452
|
+
/>
|
|
453
|
+
</span>
|
|
446
454
|
</div>
|
|
447
455
|
</div>
|
|
448
456
|
<div
|
|
449
|
-
className="flex items-
|
|
457
|
+
className="flex items-start"
|
|
450
458
|
style={{
|
|
451
459
|
color: "#fff",
|
|
452
460
|
}}
|
|
453
461
|
>
|
|
454
|
-
{renderIcon("personIcon", "16px")}
|
|
455
|
-
|
|
456
|
-
<span className="">
|
|
462
|
+
<div>{renderIcon("personIcon", "16px")}</div>
|
|
463
|
+
<span className="flex-1" style={{ lineHeight: 1.4 }}>
|
|
457
464
|
<span
|
|
458
465
|
className="bold-text"
|
|
459
466
|
ref={startViewerCount}
|
|
@@ -178,27 +178,6 @@ function SeatSection({
|
|
|
178
178
|
});
|
|
179
179
|
};
|
|
180
180
|
|
|
181
|
-
const renderLabels = () => {
|
|
182
|
-
if (isPeru) {
|
|
183
|
-
return (
|
|
184
|
-
<>
|
|
185
|
-
<span
|
|
186
|
-
className="text-[13.33px]"
|
|
187
|
-
style={{
|
|
188
|
-
color: "#999",
|
|
189
|
-
// position: "relative",
|
|
190
|
-
// bottom: numberOfSeats ? "10px" : "",
|
|
191
|
-
}}
|
|
192
|
-
>
|
|
193
|
-
Antes
|
|
194
|
-
</span>
|
|
195
|
-
<span className="text-[13.33px]">Desde</span>
|
|
196
|
-
</>
|
|
197
|
-
);
|
|
198
|
-
}
|
|
199
|
-
return renderSeatNames();
|
|
200
|
-
};
|
|
201
|
-
|
|
202
181
|
const strikethroughStyle: React.CSSProperties = {
|
|
203
182
|
color: "#ccc",
|
|
204
183
|
display: "flex",
|
|
@@ -223,6 +202,29 @@ function SeatSection({
|
|
|
223
202
|
(seat) => seat.originalPrice !== seat.discountedPrice,
|
|
224
203
|
);
|
|
225
204
|
|
|
205
|
+
const renderLabels = () => {
|
|
206
|
+
if (isPeru) {
|
|
207
|
+
return (
|
|
208
|
+
<>
|
|
209
|
+
{hasDiscount && (
|
|
210
|
+
<span
|
|
211
|
+
className="text-[13.33px]"
|
|
212
|
+
style={{
|
|
213
|
+
color: "#999",
|
|
214
|
+
// position: "relative",
|
|
215
|
+
// bottom: numberOfSeats ? "10px" : "",
|
|
216
|
+
}}
|
|
217
|
+
>
|
|
218
|
+
Antes
|
|
219
|
+
</span>
|
|
220
|
+
)}
|
|
221
|
+
<span className="text-[13.33px]">Desde</span>
|
|
222
|
+
</>
|
|
223
|
+
);
|
|
224
|
+
}
|
|
225
|
+
return renderSeatNames();
|
|
226
|
+
};
|
|
227
|
+
|
|
226
228
|
return (
|
|
227
229
|
<div
|
|
228
230
|
className="relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.2rem]"
|
|
@@ -243,13 +245,13 @@ function SeatSection({
|
|
|
243
245
|
gap: "10px",
|
|
244
246
|
}}
|
|
245
247
|
>
|
|
246
|
-
{isPeru && (
|
|
248
|
+
{/* {isPeru && (
|
|
247
249
|
<span className="text-[13.33px]" style={strikethroughStyle}>
|
|
248
250
|
{formatPrice(1000)}
|
|
249
251
|
</span>
|
|
250
|
-
)}
|
|
252
|
+
)} */}
|
|
251
253
|
|
|
252
|
-
{hasDiscount && (
|
|
254
|
+
{hasDiscount && !isPeru && (
|
|
253
255
|
<span className="text-[13.33px]" style={strikethroughStyle}>
|
|
254
256
|
{formatPrice(highestOriginalPrice)}
|
|
255
257
|
</span>
|
|
@@ -155,22 +155,22 @@ function SeatSectionMobile({
|
|
|
155
155
|
|
|
156
156
|
return (
|
|
157
157
|
<>
|
|
158
|
-
|
|
159
|
-
<
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
</
|
|
173
|
-
|
|
158
|
+
{originalPrice !== discountedPrice && (
|
|
159
|
+
<div className="w-[100%] flex flex-row justify-between items-center">
|
|
160
|
+
<span
|
|
161
|
+
className="min-[420]:text-[13px] text-[12px]"
|
|
162
|
+
style={{ color: "#bbb" }}
|
|
163
|
+
>
|
|
164
|
+
Antes
|
|
165
|
+
</span>
|
|
166
|
+
<span
|
|
167
|
+
className="min-[420]:text-[13px] text-[12px] line-through"
|
|
168
|
+
style={{ color: "#bbb" }}
|
|
169
|
+
>
|
|
170
|
+
{commonService.currency(originalPrice, currencySign)}
|
|
171
|
+
</span>
|
|
172
|
+
</div>
|
|
173
|
+
)}
|
|
174
174
|
<div className="w-[100%] flex flex-row justify-between items-center">
|
|
175
175
|
<span
|
|
176
176
|
className="min-[420]:text-[13px] text-[12px] bold-text"
|