kupos-ui-components-lib 9.4.0 → 9.4.2
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.
|
@@ -241,7 +241,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
241
241
|
: "rounded-[10px] border border-[#ccc]"}`, style: serviceCardStyle },
|
|
242
242
|
React.createElement("div", { className: " pt-[20px]", style: {
|
|
243
243
|
padding: coachKey
|
|
244
|
-
? "15px 15px
|
|
244
|
+
? "15px 15px 10px 15px"
|
|
245
245
|
: "20px 15px 11px 15px",
|
|
246
246
|
marginTop: hasDiscount || hasOfferText ? "14px" : "0",
|
|
247
247
|
} },
|
|
@@ -273,7 +273,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
273
273
|
opacity: isItemExpanded ? 1 : 0,
|
|
274
274
|
transition: "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
|
|
275
275
|
position: "relative",
|
|
276
|
-
zIndex: 1,
|
|
276
|
+
zIndex: hasOfferText ? 1 : -1,
|
|
277
277
|
} },
|
|
278
278
|
React.createElement("div", { style: Object.assign({ overflow: "hidden", minHeight: 0, marginTop: "-10px" }, (hasOfferText || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
|
|
279
279
|
? {
|
|
@@ -288,6 +288,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
288
288
|
((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)) && (React.createElement("div", { className: "text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[36px] pt-[50px] rounded-b-[14px] text-[14px]", style: {
|
|
289
289
|
background: offerGradient,
|
|
290
290
|
opacity: isSoldOut ? 0.5 : 1,
|
|
291
|
+
zIndex: hasOfferText ? 2 : -2,
|
|
291
292
|
} },
|
|
292
293
|
React.createElement("div", { className: "flex justify-between items-center w-full" },
|
|
293
294
|
React.createElement("div", { className: "flex items-center " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? (React.createElement("div", { className: "flex items-center gap-[3px]" },
|
package/dist/styles.css
CHANGED
|
@@ -36,6 +36,9 @@
|
|
|
36
36
|
.-top-\[18px\] {
|
|
37
37
|
top: calc(18px * -1);
|
|
38
38
|
}
|
|
39
|
+
.top-1\/2 {
|
|
40
|
+
top: calc(1/2 * 100%);
|
|
41
|
+
}
|
|
39
42
|
.top-\[2px\] {
|
|
40
43
|
top: 2px;
|
|
41
44
|
}
|
|
@@ -447,6 +450,10 @@
|
|
|
447
450
|
--tw-translate-x: calc(calc(1/2 * 100%) * -1);
|
|
448
451
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
449
452
|
}
|
|
453
|
+
.-translate-y-1\/2 {
|
|
454
|
+
--tw-translate-y: calc(calc(1/2 * 100%) * -1);
|
|
455
|
+
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
456
|
+
}
|
|
450
457
|
.translate-y-\[-10px\] {
|
|
451
458
|
--tw-translate-y: -10px;
|
|
452
459
|
translate: var(--tw-translate-x) var(--tw-translate-y);
|
|
@@ -123,17 +123,20 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
|
|
|
123
123
|
React.createElement("div", null,
|
|
124
124
|
React.createElement("span", { className: "text-[13.33px] font-normal leading-[24px] text-[#464647]" }, "Desde")),
|
|
125
125
|
React.createElement("div", null,
|
|
126
|
-
React.createElement("
|
|
127
|
-
React.createElement("div", { className: "absolute
|
|
126
|
+
React.createElement("div", { className: "relative" },
|
|
127
|
+
React.createElement("div", { className: "absolute -left-[20px] top-1/2 transform -translate-y-1/2" }, renderIcon("fireIcon", "16px")),
|
|
128
|
+
React.createElement("div", { className: "absolute bottom-[85%] left-1/2 -translate-x-1/2", style: {
|
|
129
|
+
animation: "pulse-zoom 2s ease-in-out infinite",
|
|
130
|
+
whiteSpace: "nowrap",
|
|
131
|
+
} },
|
|
128
132
|
React.createElement("span", { className: "rounded-[100px] bg-[#ff5964] px-[6px] w-fit text-[12px] bold-text leading-[20px] text-white", style: {
|
|
129
133
|
animation: "pulse-zoom 2s ease-in-out infinite",
|
|
130
134
|
whiteSpace: "nowrap",
|
|
131
135
|
color: dpSeatColor,
|
|
132
136
|
} }, "Mejor precio")),
|
|
133
|
-
React.createElement("div", { className: "
|
|
134
|
-
availableSeats <= 0
|
|
137
|
+
React.createElement("div", { className: "text-[22px] bold-text leading-[30px] text-center", style: { color: isSoldOut ? "#c0c0c0" : dpSeatColor } }, availableSeats <= 0
|
|
135
138
|
? CommonService.currency(0, currencySign)
|
|
136
|
-
: CommonService.discountedCurrency(lowestFare, currencySign))))
|
|
139
|
+
: CommonService.discountedCurrency(lowestFare, currencySign)))))
|
|
137
140
|
// <div className="flex items-center justify-between text-[13.33px]">
|
|
138
141
|
// <span className="text-[13.33px] font-normal leading-[24px] text-[#464647]">
|
|
139
142
|
// Desde
|
package/package.json
CHANGED
|
@@ -422,7 +422,7 @@ function ServiceItemPB({
|
|
|
422
422
|
className=" pt-[20px]"
|
|
423
423
|
style={{
|
|
424
424
|
padding: coachKey
|
|
425
|
-
? "15px 15px
|
|
425
|
+
? "15px 15px 10px 15px"
|
|
426
426
|
: "20px 15px 11px 15px",
|
|
427
427
|
marginTop: hasDiscount || hasOfferText ? "14px" : "0",
|
|
428
428
|
}}
|
|
@@ -575,7 +575,7 @@ function ServiceItemPB({
|
|
|
575
575
|
transition:
|
|
576
576
|
"grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
|
|
577
577
|
position: "relative",
|
|
578
|
-
zIndex: 1,
|
|
578
|
+
zIndex: hasOfferText ? 1 : -1,
|
|
579
579
|
}}
|
|
580
580
|
>
|
|
581
581
|
<div
|
|
@@ -612,6 +612,7 @@ function ServiceItemPB({
|
|
|
612
612
|
style={{
|
|
613
613
|
background: offerGradient,
|
|
614
614
|
opacity: isSoldOut ? 0.5 : 1,
|
|
615
|
+
zIndex: hasOfferText ? 2 : -2,
|
|
615
616
|
}}
|
|
616
617
|
>
|
|
617
618
|
<div className="flex justify-between items-center w-full">
|
|
@@ -237,6 +237,39 @@ function SeatSection({
|
|
|
237
237
|
</span>
|
|
238
238
|
</div>
|
|
239
239
|
<div>
|
|
240
|
+
<div className="relative">
|
|
241
|
+
<div className="absolute -left-[20px] top-1/2 transform -translate-y-1/2">
|
|
242
|
+
{renderIcon("fireIcon", "16px")}
|
|
243
|
+
</div>
|
|
244
|
+
<div
|
|
245
|
+
className="absolute bottom-[85%] left-1/2 -translate-x-1/2"
|
|
246
|
+
style={{
|
|
247
|
+
animation: "pulse-zoom 2s ease-in-out infinite",
|
|
248
|
+
whiteSpace: "nowrap",
|
|
249
|
+
}}
|
|
250
|
+
>
|
|
251
|
+
<span
|
|
252
|
+
className="rounded-[100px] bg-[#ff5964] px-[6px] w-fit text-[12px] bold-text leading-[20px] text-white"
|
|
253
|
+
style={{
|
|
254
|
+
animation: "pulse-zoom 2s ease-in-out infinite",
|
|
255
|
+
whiteSpace: "nowrap",
|
|
256
|
+
color: dpSeatColor,
|
|
257
|
+
}}
|
|
258
|
+
>
|
|
259
|
+
Mejor precio
|
|
260
|
+
</span>
|
|
261
|
+
</div>
|
|
262
|
+
<div
|
|
263
|
+
className="text-[22px] bold-text leading-[30px] text-center"
|
|
264
|
+
style={{ color: isSoldOut ? "#c0c0c0" : dpSeatColor }}
|
|
265
|
+
>
|
|
266
|
+
{availableSeats <= 0
|
|
267
|
+
? CommonService.currency(0, currencySign)
|
|
268
|
+
: CommonService.discountedCurrency(lowestFare, currencySign)}
|
|
269
|
+
</div>
|
|
270
|
+
</div>
|
|
271
|
+
</div>
|
|
272
|
+
{/* <div>
|
|
240
273
|
<span
|
|
241
274
|
className="flex items-center gap-[6px] text-[22px] bold-text leading-[30px] relative"
|
|
242
275
|
style={{ color: isSoldOut ? "#c0c0c0" : dpSeatColor }}
|
|
@@ -260,7 +293,7 @@ function SeatSection({
|
|
|
260
293
|
? CommonService.currency(0, currencySign)
|
|
261
294
|
: CommonService.discountedCurrency(lowestFare, currencySign)}
|
|
262
295
|
</span>
|
|
263
|
-
</div>
|
|
296
|
+
</div> */}
|
|
264
297
|
</div>
|
|
265
298
|
// <div className="flex items-center justify-between text-[13.33px]">
|
|
266
299
|
// <span className="text-[13.33px] font-normal leading-[24px] text-[#464647]">
|