kupos-ui-components-lib 9.2.0 → 9.2.1
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/ServiceItemMobile.js +2 -2
- package/dist/ui/mobileweb/ExpandedDropdownMobile.d.ts +4 -1
- package/dist/ui/mobileweb/ExpandedDropdownMobile.js +13 -1
- package/package.json +1 -1
- package/src/components/ServiceItem/ServiceItemMobile.tsx +8 -2
- package/src/ui/mobileweb/ExpandedDropdownMobile.tsx +34 -0
|
@@ -138,7 +138,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
138
138
|
React.createElement("img", { src: serviceItem.icons.rating, alt: "origin", className: `w-[12px] h-[12px] mr-[4px] object-contain ${isSoldOut ? "grayscale" : ""}` }),
|
|
139
139
|
React.createElement("span", { style: { lineHeight: "normal" } }, getServiceStars(serviceItem))),
|
|
140
140
|
React.createElement("div", { className: "flex items-center cursor-pointer ", style: { color: isSoldOut ? "#bbb" : "text-[#464647]" } },
|
|
141
|
-
React.createElement("span", { className: "ml-[3px] min-[420]:text-[13px] text-[12px] text-ellipsis" }, serviceItem.operator_details[2]))))) : null),
|
|
141
|
+
React.createElement("span", { className: "ml-[3px] min-[420]:text-[13px] text-[12px] text-ellipsis overflow-hidden whitespace-nowrap max-w-[120px]" }, 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
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 }),
|
|
@@ -229,6 +229,6 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
229
229
|
zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? -3 : undefined,
|
|
230
230
|
marginTop: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "-15px" : "-10px",
|
|
231
231
|
} },
|
|
232
|
-
React.createElement(ExpandedDropdownMobile, { serviceItem: serviceItem, isPeru: isPeru })))));
|
|
232
|
+
React.createElement(ExpandedDropdownMobile, { serviceItem: serviceItem, isPeru: isPeru, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, isSoldOut: isSoldOut })))));
|
|
233
233
|
}
|
|
234
234
|
export default ServiceItemMobile;
|
|
@@ -7,6 +7,9 @@ interface ExpandedDropdownMobileProps {
|
|
|
7
7
|
is_tracking_enabled?: boolean;
|
|
8
8
|
};
|
|
9
9
|
isPeru?: boolean;
|
|
10
|
+
petSeatInfo?: Record<string, any>;
|
|
11
|
+
petFriendlyAnim?: any;
|
|
12
|
+
isSoldOut?: boolean;
|
|
10
13
|
}
|
|
11
|
-
declare function ExpandedDropdownMobile({ serviceItem, isPeru, }: ExpandedDropdownMobileProps): React.ReactElement;
|
|
14
|
+
declare function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyAnim, isSoldOut, }: ExpandedDropdownMobileProps): React.ReactElement;
|
|
12
15
|
export default ExpandedDropdownMobile;
|
|
@@ -1,10 +1,22 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
|
|
2
|
+
import LottiePlayer from "../../assets/LottiePlayer";
|
|
3
|
+
function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyAnim, isSoldOut, }) {
|
|
3
4
|
return (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[12px] relative -z-9", style: {
|
|
4
5
|
backgroundColor: "#ffefef",
|
|
5
6
|
borderRadius: "0 0 14px 14px",
|
|
6
7
|
} },
|
|
7
8
|
React.createElement("div", { className: "flex flex-col gap-[8px] text-[11px] min-[420px]:text-[12px] text-[#464647]", style: { lineHeight: 1.6 } },
|
|
9
|
+
petSeatInfo && Object.keys(petSeatInfo).length > 0 ? (React.createElement("div", { className: "flex items-center" },
|
|
10
|
+
React.createElement("div", { className: `relative group cursor-default ` },
|
|
11
|
+
React.createElement("div", { className: "flex items-center" },
|
|
12
|
+
React.createElement("div", { className: `flex items-justify gap-[6px] mr-[5px] ${isSoldOut ? "grayscale" : ""}` },
|
|
13
|
+
React.createElement("div", null,
|
|
14
|
+
React.createElement(LottiePlayer, { animationData: petFriendlyAnim, width: "16px", height: "16px" })),
|
|
15
|
+
React.createElement("div", null,
|
|
16
|
+
React.createElement("span", null, "Servicio Pet friendly"),
|
|
17
|
+
React.createElement("span", null,
|
|
18
|
+
" ",
|
|
19
|
+
"Asientos designados Pet friendly, lo que significa que puede viajar con su mascota a bordo."))))))) : null,
|
|
8
20
|
React.createElement("div", { className: "flex gap-[6px]" },
|
|
9
21
|
React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
|
|
10
22
|
React.createElement("span", null,
|
package/package.json
CHANGED
|
@@ -253,7 +253,7 @@ function ServiceItemMobile({
|
|
|
253
253
|
className="flex items-center cursor-pointer "
|
|
254
254
|
style={{ color: isSoldOut ? "#bbb" : "text-[#464647]" }}
|
|
255
255
|
>
|
|
256
|
-
<span className="ml-[3px] min-[420]:text-[13px] text-[12px] text-ellipsis">
|
|
256
|
+
<span className="ml-[3px] min-[420]:text-[13px] text-[12px] text-ellipsis overflow-hidden whitespace-nowrap max-w-[120px]">
|
|
257
257
|
{serviceItem.operator_details[2]}
|
|
258
258
|
</span>
|
|
259
259
|
</div>
|
|
@@ -497,7 +497,13 @@ function ServiceItemMobile({
|
|
|
497
497
|
marginTop: serviceItem?.offer_text ? "-15px" : "-10px",
|
|
498
498
|
}}
|
|
499
499
|
>
|
|
500
|
-
<ExpandedDropdownMobile
|
|
500
|
+
<ExpandedDropdownMobile
|
|
501
|
+
serviceItem={serviceItem}
|
|
502
|
+
isPeru={isPeru}
|
|
503
|
+
petSeatInfo={serviceItem.pet_seat_info}
|
|
504
|
+
petFriendlyAnim={serviceItem.icons.petFriendlyAnim}
|
|
505
|
+
isSoldOut={isSoldOut}
|
|
506
|
+
/>
|
|
501
507
|
</div>
|
|
502
508
|
</div>
|
|
503
509
|
</div>
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
import LottiePlayer from "../../assets/LottiePlayer";
|
|
2
3
|
|
|
3
4
|
interface ExpandedDropdownMobileProps {
|
|
4
5
|
serviceItem: {
|
|
@@ -8,11 +9,17 @@ interface ExpandedDropdownMobileProps {
|
|
|
8
9
|
is_tracking_enabled?: boolean;
|
|
9
10
|
};
|
|
10
11
|
isPeru?: boolean;
|
|
12
|
+
petSeatInfo?: Record<string, any>;
|
|
13
|
+
petFriendlyAnim?: any;
|
|
14
|
+
isSoldOut?: boolean;
|
|
11
15
|
}
|
|
12
16
|
|
|
13
17
|
function ExpandedDropdownMobile({
|
|
14
18
|
serviceItem,
|
|
15
19
|
isPeru,
|
|
20
|
+
petSeatInfo,
|
|
21
|
+
petFriendlyAnim,
|
|
22
|
+
isSoldOut,
|
|
16
23
|
}: ExpandedDropdownMobileProps): React.ReactElement {
|
|
17
24
|
return (
|
|
18
25
|
<div
|
|
@@ -26,6 +33,33 @@ function ExpandedDropdownMobile({
|
|
|
26
33
|
className="flex flex-col gap-[8px] text-[11px] min-[420px]:text-[12px] text-[#464647]"
|
|
27
34
|
style={{ lineHeight: 1.6 }}
|
|
28
35
|
>
|
|
36
|
+
{petSeatInfo && Object.keys(petSeatInfo).length > 0 ? (
|
|
37
|
+
<div className="flex items-center">
|
|
38
|
+
<div className={`relative group cursor-default `}>
|
|
39
|
+
<div className="flex items-center">
|
|
40
|
+
<div
|
|
41
|
+
className={`flex items-justify gap-[6px] mr-[5px] ${isSoldOut ? "grayscale" : ""}`}
|
|
42
|
+
>
|
|
43
|
+
<div>
|
|
44
|
+
<LottiePlayer
|
|
45
|
+
animationData={petFriendlyAnim}
|
|
46
|
+
width="16px"
|
|
47
|
+
height="16px"
|
|
48
|
+
/>
|
|
49
|
+
</div>
|
|
50
|
+
<div>
|
|
51
|
+
<span>Servicio Pet friendly</span>
|
|
52
|
+
<span>
|
|
53
|
+
{" "}
|
|
54
|
+
Asientos designados Pet friendly, lo que significa que
|
|
55
|
+
puede viajar con su mascota a bordo.
|
|
56
|
+
</span>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
) : null}
|
|
29
63
|
<div className="flex gap-[6px]">
|
|
30
64
|
<span style={{ marginTop: "2px" }}>•</span>
|
|
31
65
|
<span>
|