kupos-ui-components-lib 9.3.6 → 9.3.7
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 +3 -1
- package/dist/components/ServiceItem/ServiceItemMobile.js +2 -2
- package/dist/components/ServiceItem/mobileTypes.d.ts +2 -0
- package/dist/ui/SeatSection/SeatSection.js +3 -2
- package/dist/ui/mobileweb/DateTimeSectionMobile.js +2 -2
- package/dist/ui/mobileweb/SeatSectionMobile.js +27 -5
- package/dist/utils/CommonService.d.ts +1 -0
- package/dist/utils/CommonService.js +7 -0
- package/package.json +1 -1
- package/src/components/ServiceItem/ServiceItemDesktop.tsx +4 -1
- package/src/components/ServiceItem/ServiceItemMobile.tsx +7 -5
- package/src/components/ServiceItem/mobileTypes.ts +2 -0
- package/src/ui/SeatSection/SeatSection.tsx +6 -2
- package/src/ui/mobileweb/DateTimeSectionMobile.tsx +10 -10
- package/src/ui/mobileweb/SeatSectionMobile.tsx +42 -9
- package/src/utils/CommonService.ts +9 -0
|
@@ -294,7 +294,9 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
294
294
|
React.createElement(LottiePlayer, { animationData: getAnimationIcon("bombAnimation"), width: "18px", height: "18px" }),
|
|
295
295
|
React.createElement("div", { className: "flex items-center mt-[2px]" },
|
|
296
296
|
React.createElement("span", { className: "bold-text ml-[6px]" },
|
|
297
|
-
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || ""
|
|
297
|
+
((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").length > 30
|
|
298
|
+
? ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").slice(0, 30) + "..."
|
|
299
|
+
: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "",
|
|
298
300
|
"\u00A0"),
|
|
299
301
|
" ",
|
|
300
302
|
"| Termina en\u00A0",
|
|
@@ -29,7 +29,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
29
29
|
const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
|
|
30
30
|
const isLongOfferText = (((_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) === null || _b === void 0 ? void 0 : _b.length) || 0) > 35;
|
|
31
31
|
const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text);
|
|
32
|
-
const offerGradient =
|
|
32
|
+
const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
|
|
33
33
|
const serviceCardStyle = hasOfferText
|
|
34
34
|
? {
|
|
35
35
|
borderColor: "transparent",
|
|
@@ -125,7 +125,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
125
125
|
} },
|
|
126
126
|
React.createElement("div", { className: "flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]", style: { lineHeight: 1.6 } },
|
|
127
127
|
React.createElement("div", { className: "flex justify-between items-start" },
|
|
128
|
-
React.createElement("div", { className: `flex ${
|
|
128
|
+
React.createElement("div", { className: `flex ${((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").length > 10 ? "items-start" : "items-center"}` },
|
|
129
129
|
React.createElement("div", { className: isLongOfferText ? "mt-[2px]" : "" },
|
|
130
130
|
React.createElement(LottiePlayer, { animationData: serviceItem.icons.bombAnim, width: "14px", height: "14px" })),
|
|
131
131
|
React.createElement("div", { className: `ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`, style: {
|
|
@@ -145,8 +145,9 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
|
|
|
145
145
|
React.createElement("div", { className: "col-start-2 row-start-3 flex h-[30px] items-end justify-start" },
|
|
146
146
|
React.createElement("span", { className: "flex items-center gap-[6px] text-[22px] bold-text leading-[30px]", style: { color: isSoldOut ? "#c0c0c0" : "#ff5964" } },
|
|
147
147
|
renderIcon("fireIcon", "16px"),
|
|
148
|
-
|
|
149
|
-
|
|
148
|
+
availableSeats <= 0
|
|
149
|
+
? CommonService.currency(0, currencySign)
|
|
150
|
+
: CommonService.discountedCurrency(discountSeat.discountedPrice, currencySign)))));
|
|
150
151
|
}
|
|
151
152
|
return (React.createElement("div", { className: "relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.2rem]", style: isCentered ? { alignItems: "center" } : {} },
|
|
152
153
|
React.createElement("div", { className: "flex flex-col justify-between", style: { gap: "10px" } }, renderLabels()),
|
|
@@ -46,12 +46,12 @@ function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal
|
|
|
46
46
|
React.createElement("div", { className: "min-h-[2.5rem] flex flex-col justify-between gap-[4px] w-[50%] ", style: { justifyContent: isCiva && "center" } },
|
|
47
47
|
React.createElement(TimeRow, { label: orignLabel, icon: originIcon, alt: "origin", date: travelDate, timeContent: depTimeContent, isSoldOut: isSoldOut }),
|
|
48
48
|
isCiva ? null : (React.createElement(TimeRow, { label: destinationLabel, icon: destinationIcon, alt: "destination", date: arrivalDate, timeContent: DateService.formatTime(arrTime), isSoldOut: isSoldOut }))),
|
|
49
|
-
|
|
49
|
+
React.createElement("div", { style: {
|
|
50
50
|
width: "1px",
|
|
51
51
|
height: "2.5rem",
|
|
52
52
|
backgroundColor: "#ccc",
|
|
53
53
|
margin: "auto",
|
|
54
|
-
} })
|
|
54
|
+
} }),
|
|
55
55
|
React.createElement(SeatSectionMobile, { seatTypes: seatTypes, isSoldOut: isSoldOut, isPeru: isPeru, seatPriceColor: seatPriceColor, currencySign: currencySign, availableSeats: availableSeats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, tooltipBgColor: tooltipBgColor })));
|
|
56
56
|
}
|
|
57
57
|
export default DateTimeSectionMobile;
|
|
@@ -88,8 +88,16 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
|
|
|
88
88
|
? getUniqueSeats(seatTypesData, 3)
|
|
89
89
|
: (_c = (_b = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label))) === null || _b === void 0 ? void 0 : _b.sort((a, b) => a.fare - b.fare)) === null || _c === void 0 ? void 0 : _c.slice(0, 2);
|
|
90
90
|
const discountedSeats = seats === null || seats === void 0 ? void 0 : seats.map((seat) => (Object.assign(Object.assign({}, seat), commonService.calculateDiscountedPrice(seat.fare, serviceItem))));
|
|
91
|
-
const
|
|
92
|
-
const
|
|
91
|
+
const peruLowestFare = isPeru ? getLowestFare() : null;
|
|
92
|
+
const peruDiscountCalc = isPeru && peruLowestFare != null
|
|
93
|
+
? commonService.calculateDiscountedPrice(peruLowestFare, serviceItem)
|
|
94
|
+
: null;
|
|
95
|
+
const hasDiscount = isPeru
|
|
96
|
+
? peruDiscountCalc != null &&
|
|
97
|
+
peruDiscountCalc.originalPrice !== peruDiscountCalc.discountedPrice
|
|
98
|
+
: discountedSeats === null || discountedSeats === void 0 ? void 0 : discountedSeats.some((s) => s.originalPrice !== s.discountedPrice);
|
|
99
|
+
const discountSeat = isPeru && peruDiscountCalc
|
|
100
|
+
? Object.assign({ label: "", fare: peruLowestFare }, peruDiscountCalc) : (_d = discountedSeats === null || discountedSeats === void 0 ? void 0 : discountedSeats.filter((seat) => !EXCEPTIONS.includes(seat.label))) === null || _d === void 0 ? void 0 : _d.sort((a, b) => a.discountedPrice - b.discountedPrice)[0];
|
|
93
101
|
const discountValue = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_type) === "percentage" &&
|
|
94
102
|
typeof (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) === "number"
|
|
95
103
|
? Math.round(serviceItem.discount_value)
|
|
@@ -104,12 +112,26 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
|
|
|
104
112
|
discountValue,
|
|
105
113
|
"% OFF"))),
|
|
106
114
|
React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[20px] text-[#c2c2c2]" }, "Antes"),
|
|
107
|
-
React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[20px] text-[#9f9f9f]
|
|
115
|
+
React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[20px] text-[#9f9f9f] text-right", style: {
|
|
116
|
+
position: "relative",
|
|
117
|
+
display: "inline-block",
|
|
118
|
+
overflow: "hidden",
|
|
119
|
+
} },
|
|
120
|
+
commonService.currency(discountSeat.originalPrice, currencySign),
|
|
121
|
+
React.createElement("span", { style: {
|
|
122
|
+
position: "absolute",
|
|
123
|
+
top: "50%",
|
|
124
|
+
left: "25%",
|
|
125
|
+
width: "80%",
|
|
126
|
+
height: "1px",
|
|
127
|
+
background: "#9f9f9f",
|
|
128
|
+
transform: "rotate(-15deg)",
|
|
129
|
+
transformOrigin: "center",
|
|
130
|
+
} })),
|
|
108
131
|
React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[24px]", style: { color: isSoldOut ? "#bbb" : "#464647" } }, "Desde"),
|
|
109
132
|
React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: { color: isSoldOut ? "#bbb" : "#ff5964" } },
|
|
110
133
|
((_e = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _e === void 0 ? void 0 : _e.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { filter: isSoldOut ? "grayscale" : "" } })) : null,
|
|
111
|
-
currencySign
|
|
112
|
-
Math.floor((discountSeat.discountedPrice / 1000) * 1000) / 1000),
|
|
134
|
+
commonService.discountedCurrency(discountSeat.discountedPrice, currencySign)),
|
|
113
135
|
isSoldOut ? (React.createElement("span", { className: "col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]" }, "Agotado")) : null)) : (React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem] ", style: {
|
|
114
136
|
gap: isSoldOut ? "0px" : "5px",
|
|
115
137
|
justifyContent: hasMultipleTypes ? "space-between" : "center",
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
declare const commonService: {
|
|
2
2
|
currency(amount: number, currencySign?: string): string;
|
|
3
|
+
discountedCurrency(amount: number, currencySign?: string): string;
|
|
3
4
|
copyObject: (ob: any) => any;
|
|
4
5
|
getServiceTypeLabelForFilters: (service_type: any) => "Tipo de servicio" | "Punto de embarque" | "Tipo de asiento" | "SERVICIOS" | "";
|
|
5
6
|
truncateSeatLabel: (label: string | number) => string;
|
|
@@ -6,6 +6,13 @@ const commonService = {
|
|
|
6
6
|
const sign = currencySign || "$";
|
|
7
7
|
return sign + formattedAmount;
|
|
8
8
|
},
|
|
9
|
+
discountedCurrency(amount, currencySign) {
|
|
10
|
+
const formattedAmount = Math.trunc(amount)
|
|
11
|
+
.toString()
|
|
12
|
+
.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
|
|
13
|
+
const sign = currencySign || "$";
|
|
14
|
+
return sign + formattedAmount;
|
|
15
|
+
},
|
|
9
16
|
copyObject: (ob) => {
|
|
10
17
|
if (!ob)
|
|
11
18
|
return {};
|
package/package.json
CHANGED
|
@@ -614,7 +614,10 @@ function ServiceItemPB({
|
|
|
614
614
|
/>
|
|
615
615
|
<div className="flex items-center mt-[2px]">
|
|
616
616
|
<span className="bold-text ml-[6px]">
|
|
617
|
-
{serviceItem?.offer_text || ""
|
|
617
|
+
{(serviceItem?.offer_text || "").length > 30
|
|
618
|
+
? (serviceItem?.offer_text || "").slice(0, 30) + "..."
|
|
619
|
+
: serviceItem?.offer_text || ""}
|
|
620
|
+
|
|
618
621
|
</span>{" "}
|
|
619
622
|
| Termina en
|
|
620
623
|
<span
|
|
@@ -69,7 +69,7 @@ function ServiceItemMobile({
|
|
|
69
69
|
const isLongOfferText = (serviceItem?.offer_text?.length || 0) > 35;
|
|
70
70
|
|
|
71
71
|
const hasOfferText = Boolean(serviceItem?.offer_text);
|
|
72
|
-
const offerGradient =
|
|
72
|
+
const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
|
|
73
73
|
const serviceCardStyle: React.CSSProperties = hasOfferText
|
|
74
74
|
? {
|
|
75
75
|
borderColor: "transparent",
|
|
@@ -312,7 +312,7 @@ function ServiceItemMobile({
|
|
|
312
312
|
>
|
|
313
313
|
<div className="flex justify-between items-start">
|
|
314
314
|
<div
|
|
315
|
-
className={`flex ${
|
|
315
|
+
className={`flex ${(serviceItem?.offer_text || "").length > 10 ? "items-start" : "items-center"}`}
|
|
316
316
|
>
|
|
317
317
|
<div className={isLongOfferText ? "mt-[2px]" : ""}>
|
|
318
318
|
<LottiePlayer
|
|
@@ -329,9 +329,11 @@ function ServiceItemMobile({
|
|
|
329
329
|
}}
|
|
330
330
|
>
|
|
331
331
|
{/* <span className="min-[380px]:text-[12px] bold-text">
|
|
332
|
-
{serviceItem?.offer_text || ""
|
|
333
|
-
|
|
334
|
-
|
|
332
|
+
{(serviceItem?.offer_text || "").length > 30
|
|
333
|
+
? (serviceItem?.offer_text || "").slice(0, 30) + "..."
|
|
334
|
+
: serviceItem?.offer_text || ""}
|
|
335
|
+
</span>{" "}
|
|
336
|
+
<span className="min-[380px]:text-[12px]">|</span>{" "} */}
|
|
335
337
|
<span className="whitespace-nowrap min-[380px]:text-[12px]">
|
|
336
338
|
Termina en
|
|
337
339
|
<span
|
|
@@ -284,8 +284,12 @@ function SeatSection({
|
|
|
284
284
|
>
|
|
285
285
|
{/* <span className="text-[18px] leading-[24px]">🔥</span> */}
|
|
286
286
|
{renderIcon("fireIcon", "16px")}
|
|
287
|
-
{
|
|
288
|
-
|
|
287
|
+
{availableSeats <= 0
|
|
288
|
+
? CommonService.currency(0, currencySign)
|
|
289
|
+
: CommonService.discountedCurrency(
|
|
290
|
+
discountSeat.discountedPrice,
|
|
291
|
+
currencySign,
|
|
292
|
+
)}
|
|
289
293
|
</span>
|
|
290
294
|
</div>
|
|
291
295
|
</div>
|
|
@@ -169,16 +169,16 @@ function DateTimeSectionMobile({
|
|
|
169
169
|
/>
|
|
170
170
|
)}
|
|
171
171
|
</div>
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
172
|
+
|
|
173
|
+
<div
|
|
174
|
+
style={{
|
|
175
|
+
width: "1px",
|
|
176
|
+
height: "2.5rem",
|
|
177
|
+
backgroundColor: "#ccc",
|
|
178
|
+
margin: "auto",
|
|
179
|
+
}}
|
|
180
|
+
></div>
|
|
181
|
+
|
|
182
182
|
{/* SEATS */}
|
|
183
183
|
<SeatSectionMobile
|
|
184
184
|
seatTypes={seatTypes}
|
|
@@ -236,12 +236,24 @@ function SeatSectionMobile({
|
|
|
236
236
|
...commonService.calculateDiscountedPrice(seat.fare, serviceItem),
|
|
237
237
|
}));
|
|
238
238
|
|
|
239
|
-
const
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
239
|
+
const peruLowestFare = isPeru ? getLowestFare() : null;
|
|
240
|
+
const peruDiscountCalc =
|
|
241
|
+
isPeru && peruLowestFare != null
|
|
242
|
+
? commonService.calculateDiscountedPrice(peruLowestFare, serviceItem)
|
|
243
|
+
: null;
|
|
244
|
+
|
|
245
|
+
const hasDiscount = isPeru
|
|
246
|
+
? peruDiscountCalc != null &&
|
|
247
|
+
peruDiscountCalc.originalPrice !== peruDiscountCalc.discountedPrice
|
|
248
|
+
: discountedSeats?.some((s) => s.originalPrice !== s.discountedPrice);
|
|
249
|
+
|
|
250
|
+
const discountSeat =
|
|
251
|
+
isPeru && peruDiscountCalc
|
|
252
|
+
? { label: "", fare: peruLowestFare as number, ...peruDiscountCalc }
|
|
253
|
+
: discountedSeats
|
|
254
|
+
?.filter((seat) => !EXCEPTIONS.includes(seat.label))
|
|
255
|
+
?.sort((a, b) => a.discountedPrice - b.discountedPrice)[0];
|
|
256
|
+
|
|
245
257
|
const discountValue =
|
|
246
258
|
serviceItem?.discount_type === "percentage" &&
|
|
247
259
|
typeof serviceItem?.discount_value === "number"
|
|
@@ -273,8 +285,27 @@ function SeatSectionMobile({
|
|
|
273
285
|
<span className="min-[420]:text-[13px] text-[12px] leading-[20px] text-[#c2c2c2]">
|
|
274
286
|
Antes
|
|
275
287
|
</span>
|
|
276
|
-
<span
|
|
288
|
+
<span
|
|
289
|
+
className="min-[420]:text-[13px] text-[12px] leading-[20px] text-[#9f9f9f] text-right"
|
|
290
|
+
style={{
|
|
291
|
+
position: "relative",
|
|
292
|
+
display: "inline-block",
|
|
293
|
+
overflow: "hidden",
|
|
294
|
+
}}
|
|
295
|
+
>
|
|
277
296
|
{commonService.currency(discountSeat.originalPrice, currencySign)}
|
|
297
|
+
<span
|
|
298
|
+
style={{
|
|
299
|
+
position: "absolute",
|
|
300
|
+
top: "50%",
|
|
301
|
+
left: "25%",
|
|
302
|
+
width: "80%",
|
|
303
|
+
height: "1px",
|
|
304
|
+
background: "#9f9f9f",
|
|
305
|
+
transform: "rotate(-15deg)",
|
|
306
|
+
transformOrigin: "center",
|
|
307
|
+
}}
|
|
308
|
+
/>
|
|
278
309
|
</span>
|
|
279
310
|
|
|
280
311
|
<span
|
|
@@ -296,8 +327,10 @@ function SeatSectionMobile({
|
|
|
296
327
|
/>
|
|
297
328
|
) : null}
|
|
298
329
|
{/* {commonService.currency(discountSeat.discountedPrice, currencySign)} */}
|
|
299
|
-
{
|
|
300
|
-
|
|
330
|
+
{commonService.discountedCurrency(
|
|
331
|
+
discountSeat.discountedPrice,
|
|
332
|
+
currencySign,
|
|
333
|
+
)}
|
|
301
334
|
</span>
|
|
302
335
|
|
|
303
336
|
{isSoldOut ? (
|
|
@@ -8,6 +8,15 @@ const commonService = {
|
|
|
8
8
|
return sign + formattedAmount;
|
|
9
9
|
},
|
|
10
10
|
|
|
11
|
+
discountedCurrency(amount: number, currencySign?: string) {
|
|
12
|
+
const formattedAmount = Math.trunc(amount)
|
|
13
|
+
.toString()
|
|
14
|
+
.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
|
|
15
|
+
|
|
16
|
+
const sign = currencySign || "$";
|
|
17
|
+
return sign + formattedAmount;
|
|
18
|
+
},
|
|
19
|
+
|
|
11
20
|
copyObject: (ob) => {
|
|
12
21
|
if (!ob) return {};
|
|
13
22
|
return JSON.parse(JSON.stringify(ob));
|