kupos-ui-components-lib 10.4.10 → 10.4.11
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 +6 -0
- package/dist/components/ServiceItem/PeruServiceItemMobile.js +3 -1
- package/dist/components/ServiceItem/mobileTypes.d.ts +2 -0
- package/dist/components/ServiceItem/types.d.ts +1 -0
- package/dist/styles.css +7 -0
- package/dist/ui/mobileweb/BottomAmenitiesMobile.d.ts +2 -1
- package/dist/ui/mobileweb/BottomAmenitiesMobile.js +2 -1
- package/package.json +1 -1
- package/src/components/ServiceItem/PeruServiceItemDesktop.tsx +13 -0
- package/src/components/ServiceItem/PeruServiceItemMobile.tsx +5 -0
- package/src/components/ServiceItem/mobileTypes.ts +2 -0
- package/src/components/ServiceItem/types.ts +1 -0
- package/src/ui/mobileweb/BottomAmenitiesMobile.tsx +11 -0
|
@@ -363,6 +363,12 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
|
|
|
363
363
|
Object.keys(serviceItem.pet_seat_info).length > 0,
|
|
364
364
|
render: (React.createElement(PetBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, isSoldOut: isSoldOut })),
|
|
365
365
|
},
|
|
366
|
+
{
|
|
367
|
+
key: "seatCategory",
|
|
368
|
+
width: "40%",
|
|
369
|
+
condition: serviceItem.api_type === 78 && !!serviceItem.number,
|
|
370
|
+
render: (React.createElement("span", { className: "text-[13.33px] whitespace-nowrap ml-auto mt-[3px] translate-x-[100px]", style: { opacity: isSoldOut ? 0.5 : 1 } }, serviceItem.number)),
|
|
371
|
+
},
|
|
366
372
|
{
|
|
367
373
|
key: "flexible",
|
|
368
374
|
width: "20%",
|
|
@@ -140,7 +140,9 @@ function PeruServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStag
|
|
|
140
140
|
React.createElement("div", { className: "bg-[#E6E6E6] mt-[10px] mb-[8px] h-[1px]" }),
|
|
141
141
|
React.createElement(BottomAmenitiesMobile, { isSoldOut: isSoldOut, amenitiesNodes: amenities(), hoursIcon: renderIcon("hours", "14px"), duration: (_h = serviceItem.duration) === null || _h === void 0 ? void 0 : _h.toString(), isDirectTrip: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip, directoColor: colors.directoColor, directoAnim: (_j = serviceItem.icons) === null || _j === void 0 ? void 0 : _j.directoAnim, isChangeTicket: serviceItem.is_change_ticket, isPetSeat: isPetSeat, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: (_k = serviceItem.icons) === null || _k === void 0 ? void 0 : _k.petFriendlyAnim, flexibleAnim: (_l = serviceItem.icons) === null || _l === void 0 ? void 0 : _l.flexibleAnim, isTrackingEnabled: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled, locationAnim: (_m = serviceItem.icons) === null || _m === void 0 ? void 0 : _m.locationAnim, downArrowIcon: (_o = serviceItem.icons) === null || _o === void 0 ? void 0 : _o.downArrow, showDropdown: isItemExpanded, setShowDropdown: () => setIsExpanded && setIsExpanded(isItemExpanded ? null : serviceItem.id), onDropdownToggle: () => {
|
|
142
142
|
setIsExpanded && setIsExpanded(isItemExpanded ? null : serviceItem.id);
|
|
143
|
-
}, isPeru: isPeru, femaleAnim: (_p = serviceItem.icons) === null || _p === void 0 ? void 0 : _p.femaleAnim, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, isTrain: isTrain
|
|
143
|
+
}, isPeru: isPeru, femaleAnim: (_p = serviceItem.icons) === null || _p === void 0 ? void 0 : _p.femaleAnim, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, isTrain: isTrain, seatCategoryText: serviceItem.api_type === 78 && serviceItem.number
|
|
144
|
+
? serviceItem.number
|
|
145
|
+
: undefined })),
|
|
144
146
|
React.createElement(ServiceBadgesMobile, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, serviceItem: serviceItem, isConexion: isConexion, isAllinBus: isAllinBus, boardingName: boardingName !== null && boardingName !== void 0 ? boardingName : undefined })),
|
|
145
147
|
hasOfferText &&
|
|
146
148
|
!isNewUiEnabled &&
|
package/dist/styles.css
CHANGED
|
@@ -342,6 +342,9 @@
|
|
|
342
342
|
.ml-\[50px\] {
|
|
343
343
|
margin-left: 50px;
|
|
344
344
|
}
|
|
345
|
+
.ml-auto {
|
|
346
|
+
margin-left: auto;
|
|
347
|
+
}
|
|
345
348
|
.block {
|
|
346
349
|
display: block;
|
|
347
350
|
}
|
|
@@ -543,6 +546,10 @@
|
|
|
543
546
|
--tw-translate-x: calc(calc(1/2 * 100%) * -1);
|
|
544
547
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
545
548
|
}
|
|
549
|
+
.translate-x-\[100px\] {
|
|
550
|
+
--tw-translate-x: 100px;
|
|
551
|
+
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
552
|
+
}
|
|
546
553
|
.-translate-y-1\/2 {
|
|
547
554
|
--tw-translate-y: calc(calc(1/2 * 100%) * -1);
|
|
548
555
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
@@ -24,6 +24,7 @@ interface BottomAmenitiesMobileProps {
|
|
|
24
24
|
ladiesBookedSeats?: string;
|
|
25
25
|
isDpEnabled?: boolean;
|
|
26
26
|
isTrain?: boolean;
|
|
27
|
+
seatCategoryText?: string;
|
|
27
28
|
}
|
|
28
|
-
declare function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration, isDirectTrip, directoColor, directoAnim, isChangeTicket, isPetSeat, petSeatInfo, petFriendlyAnim, flexibleAnim, isTrackingEnabled, locationAnim, downArrowIcon, showDropdown, setShowDropdown, onDropdownToggle, isItemExpanded, isPeru, femaleAnim, ladiesBookedSeats, isDpEnabled, isTrain, }: BottomAmenitiesMobileProps): React.ReactElement;
|
|
29
|
+
declare function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration, isDirectTrip, directoColor, directoAnim, isChangeTicket, isPetSeat, petSeatInfo, petFriendlyAnim, flexibleAnim, isTrackingEnabled, locationAnim, downArrowIcon, showDropdown, setShowDropdown, onDropdownToggle, isItemExpanded, isPeru, femaleAnim, ladiesBookedSeats, isDpEnabled, isTrain, seatCategoryText, }: BottomAmenitiesMobileProps): React.ReactElement;
|
|
29
30
|
export default BottomAmenitiesMobile;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import LottiePlayer from "../../assets/LottiePlayer";
|
|
3
3
|
import DateService from "../../utils/DateService";
|
|
4
|
-
function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration, isDirectTrip, directoColor, directoAnim, isChangeTicket, isPetSeat, petSeatInfo, petFriendlyAnim, flexibleAnim, isTrackingEnabled, locationAnim, downArrowIcon, showDropdown, setShowDropdown, onDropdownToggle, isItemExpanded, isPeru, femaleAnim, ladiesBookedSeats, isDpEnabled, isTrain, }) {
|
|
4
|
+
function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration, isDirectTrip, directoColor, directoAnim, isChangeTicket, isPetSeat, petSeatInfo, petFriendlyAnim, flexibleAnim, isTrackingEnabled, locationAnim, downArrowIcon, showDropdown, setShowDropdown, onDropdownToggle, isItemExpanded, isPeru, femaleAnim, ladiesBookedSeats, isDpEnabled, isTrain, seatCategoryText, }) {
|
|
5
5
|
return (React.createElement("div", { className: `${"flex justify-between items-center items-center "}` },
|
|
6
6
|
React.createElement("div", { className: "w-[55%] flex justify-between items-center" },
|
|
7
7
|
React.createElement("div", { style: { opacity: isSoldOut ? 0.5 : 1 } }, amenitiesNodes),
|
|
@@ -11,6 +11,7 @@ function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration,
|
|
|
11
11
|
React.createElement("div", { className: `cursor-default group min-[420]:text-[13px] text-[12px] ${isSoldOut ? "text-[#c0c0c0]" : ""}`, style: { lineHeight: "normal" } },
|
|
12
12
|
DateService.formatDuration(duration),
|
|
13
13
|
"hrs"))),
|
|
14
|
+
seatCategoryText && (React.createElement("div", { className: "flex-1 text-right whitespace-nowrap min-[420]:text-[13px] text-[12px]", style: { opacity: isSoldOut ? 0.5 : 1 } }, seatCategoryText)),
|
|
14
15
|
React.createElement("div", { className: "flex items-center" },
|
|
15
16
|
React.createElement("div", null, (isChangeTicket || isPetSeat) && (React.createElement("div", { className: "flex items-center" },
|
|
16
17
|
petSeatInfo && Object.keys(petSeatInfo).length > 0 ? (React.createElement("div", { className: "flex items-center" },
|
package/package.json
CHANGED
|
@@ -547,6 +547,19 @@ function PeruServiceItemDesktop({
|
|
|
547
547
|
/>
|
|
548
548
|
),
|
|
549
549
|
},
|
|
550
|
+
{
|
|
551
|
+
key: "seatCategory",
|
|
552
|
+
width: "40%",
|
|
553
|
+
condition: serviceItem.api_type === 78 && !!serviceItem.number,
|
|
554
|
+
render: (
|
|
555
|
+
<span
|
|
556
|
+
className="text-[13.33px] whitespace-nowrap ml-auto mt-[3px] translate-x-[100px]"
|
|
557
|
+
style={{ opacity: isSoldOut ? 0.5 : 1 }}
|
|
558
|
+
>
|
|
559
|
+
{serviceItem.number}
|
|
560
|
+
</span>
|
|
561
|
+
),
|
|
562
|
+
},
|
|
550
563
|
|
|
551
564
|
{
|
|
552
565
|
key: "flexible",
|
|
@@ -366,6 +366,11 @@ function PeruServiceItemMobile({
|
|
|
366
366
|
ladiesBookedSeats={serviceItem.ladies_booked_seats}
|
|
367
367
|
isDpEnabled={serviceItem.is_dp_enabled}
|
|
368
368
|
isTrain={isTrain}
|
|
369
|
+
seatCategoryText={
|
|
370
|
+
serviceItem.api_type === 78 && serviceItem.number
|
|
371
|
+
? serviceItem.number
|
|
372
|
+
: undefined
|
|
373
|
+
}
|
|
369
374
|
/>
|
|
370
375
|
</div>
|
|
371
376
|
|
|
@@ -27,6 +27,7 @@ interface BottomAmenitiesMobileProps {
|
|
|
27
27
|
ladiesBookedSeats?: string;
|
|
28
28
|
isDpEnabled?: boolean;
|
|
29
29
|
isTrain?: boolean;
|
|
30
|
+
seatCategoryText?: string;
|
|
30
31
|
}
|
|
31
32
|
|
|
32
33
|
function BottomAmenitiesMobile({
|
|
@@ -54,6 +55,7 @@ function BottomAmenitiesMobile({
|
|
|
54
55
|
ladiesBookedSeats,
|
|
55
56
|
isDpEnabled,
|
|
56
57
|
isTrain,
|
|
58
|
+
seatCategoryText,
|
|
57
59
|
}: BottomAmenitiesMobileProps): React.ReactElement {
|
|
58
60
|
return (
|
|
59
61
|
<div className={`${"flex justify-between items-center items-center "}`}>
|
|
@@ -100,6 +102,15 @@ function BottomAmenitiesMobile({
|
|
|
100
102
|
)} */}
|
|
101
103
|
</div>
|
|
102
104
|
|
|
105
|
+
{seatCategoryText && (
|
|
106
|
+
<div
|
|
107
|
+
className="flex-1 text-right whitespace-nowrap min-[420]:text-[13px] text-[12px]"
|
|
108
|
+
style={{ opacity: isSoldOut ? 0.5 : 1 }}
|
|
109
|
+
>
|
|
110
|
+
{seatCategoryText}
|
|
111
|
+
</div>
|
|
112
|
+
)}
|
|
113
|
+
|
|
103
114
|
<div className="flex items-center">
|
|
104
115
|
<div>
|
|
105
116
|
{(isChangeTicket || isPetSeat) && (
|