kupos-ui-components-lib 9.11.5 → 9.11.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 +2 -2
- package/dist/styles.css +11 -0
- package/dist/ui/FeatureServiceUI/FeatureServiceUi.js +5 -5
- package/dist/ui/SeatSection/SeatSection.js +4 -2
- package/dist/ui/mobileweb/SeatSectionMobile.js +2 -1
- package/dist/utils/CommonService.js +1 -1
- package/package.json +1 -1
- package/src/components/ServiceItem/ServiceItemDesktop.tsx +2 -2
- package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx +8 -5
- package/src/ui/SeatSection/SeatSection.tsx +4 -2
- package/src/ui/mobileweb/SeatSectionMobile.tsx +2 -1
- package/src/utils/CommonService.ts +1 -1
|
@@ -333,10 +333,10 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
333
333
|
? {
|
|
334
334
|
borderLeft: isSoldOut
|
|
335
335
|
? ""
|
|
336
|
-
: `3px solid ${colors.
|
|
336
|
+
: `3px solid ${colors.rightGradiantColor || "#ff8842"}`,
|
|
337
337
|
borderRight: isSoldOut
|
|
338
338
|
? ""
|
|
339
|
-
: `3px solid ${colors.
|
|
339
|
+
: `3px solid ${colors.leftGradiantColor || "#ff8842"}`,
|
|
340
340
|
borderRadius: "0 0 18px 18px",
|
|
341
341
|
boxSizing: "border-box",
|
|
342
342
|
}
|
package/dist/styles.css
CHANGED
|
@@ -678,6 +678,9 @@
|
|
|
678
678
|
.overflow-hidden {
|
|
679
679
|
overflow: hidden;
|
|
680
680
|
}
|
|
681
|
+
.overflow-x-auto {
|
|
682
|
+
overflow-x: auto;
|
|
683
|
+
}
|
|
681
684
|
.overflow-y-hidden {
|
|
682
685
|
overflow-y: hidden;
|
|
683
686
|
}
|
|
@@ -1206,10 +1209,18 @@
|
|
|
1206
1209
|
outline-style: var(--tw-outline-style);
|
|
1207
1210
|
outline-width: 1px;
|
|
1208
1211
|
}
|
|
1212
|
+
.brightness-0 {
|
|
1213
|
+
--tw-brightness: brightness(0%);
|
|
1214
|
+
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
|
1215
|
+
}
|
|
1209
1216
|
.grayscale {
|
|
1210
1217
|
--tw-grayscale: grayscale(100%);
|
|
1211
1218
|
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
|
1212
1219
|
}
|
|
1220
|
+
.invert {
|
|
1221
|
+
--tw-invert: invert(100%);
|
|
1222
|
+
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
|
1223
|
+
}
|
|
1213
1224
|
.filter {
|
|
1214
1225
|
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
|
1215
1226
|
}
|
|
@@ -253,7 +253,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
|
|
|
253
253
|
React.createElement("span", { className: "text-[11px]", style: {
|
|
254
254
|
lineHeight: 1.3,
|
|
255
255
|
} }, "Tu compra est\u00E1 100% asegurada.")))),
|
|
256
|
-
React.createElement("div", { className: "min-w-0 px-[22px] flex flex-col items-center justify-between gap-[16px] py-[2px] border-r border-[#363c48] border-l border-[#363c48]" },
|
|
256
|
+
React.createElement("div", { className: "min-w-0 overflow-x-auto px-[22px] flex flex-col items-center justify-between gap-[16px] py-[2px] border-r border-[#363c48] border-l border-[#363c48]" },
|
|
257
257
|
React.createElement("div", { className: "text-center" },
|
|
258
258
|
React.createElement("div", { className: "bold-text text-[13px]" },
|
|
259
259
|
servicesInActiveSlot.length > 0
|
|
@@ -261,8 +261,8 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
|
|
|
261
261
|
: operatorsCompetingCount,
|
|
262
262
|
" ",
|
|
263
263
|
"operadores compitiendo por tu compra")),
|
|
264
|
-
React.createElement("div", { className: "grid
|
|
265
|
-
gridTemplateColumns: `repeat(${Math.min(servicesInActiveSlot.length || operators.length, 3)}, 1fr)`,
|
|
264
|
+
React.createElement("div", { className: "grid items-stretch gap-[14px]", style: {
|
|
265
|
+
gridTemplateColumns: `repeat(${Math.min(servicesInActiveSlot.length || operators.length, 3)}, minmax(80px, 1fr))`,
|
|
266
266
|
} }, (servicesInActiveSlot.length > 0
|
|
267
267
|
? servicesInActiveSlot.slice(0, 3).map((s) => ({
|
|
268
268
|
logo: s.operator_logo_url,
|
|
@@ -282,8 +282,8 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
|
|
|
282
282
|
e.currentTarget.src =
|
|
283
283
|
((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details) === null || _a === void 0 ? void 0 : _a[0]) ||
|
|
284
284
|
"/images/service-list/bus-icon.svg";
|
|
285
|
-
}, className: `h-[24px] max-w-full object-contain
|
|
286
|
-
React.createElement("span", { className: "text-[11px] truncate
|
|
285
|
+
}, className: `h-[24px] max-w-full object-contain ${isSoldOut ? "grayscale" : ""}` }),
|
|
286
|
+
React.createElement("span", { className: "text-[11px] truncate w-full text-center text-[white] overflow-hidden" }, op.name),
|
|
287
287
|
React.createElement("div", { className: "bg-[#FF8F45] text-white text-[12px] font-bold px-[10px] py-[4px] rounded-[4px] bold-text whitespace-nowrap" },
|
|
288
288
|
React.createElement("span", null, op === null || op === void 0 ? void 0 : op.time)),
|
|
289
289
|
React.createElement("span", { className: "text-[10px] mt-[6px] text-[white]" }, op === null || op === void 0 ? void 0 : op.seatsAvailable))))),
|
|
@@ -73,7 +73,8 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
|
|
|
73
73
|
};
|
|
74
74
|
const renderSeatPrices = () => {
|
|
75
75
|
if (isPeru) {
|
|
76
|
-
const isMovilBus = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus" ||
|
|
76
|
+
const isMovilBus = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus" ||
|
|
77
|
+
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "Movil Bus";
|
|
77
78
|
// Multiple unique seat types → show a price row for each (MovilBus only)
|
|
78
79
|
if (isMovilBus && uniqueSeats.length > 1) {
|
|
79
80
|
return uniqueSeats
|
|
@@ -141,7 +142,8 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
|
|
|
141
142
|
})();
|
|
142
143
|
const renderLabels = () => {
|
|
143
144
|
if (isPeru) {
|
|
144
|
-
const isMovilBus = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus" ||
|
|
145
|
+
const isMovilBus = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus" ||
|
|
146
|
+
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "Movil Bus";
|
|
145
147
|
// Multiple unique seat types → show a label row for each (MovilBus only)
|
|
146
148
|
if (isMovilBus && uniqueSeats.length > 1) {
|
|
147
149
|
return uniqueSeats
|
|
@@ -64,7 +64,8 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
|
|
|
64
64
|
if (lowestFare === null)
|
|
65
65
|
return null;
|
|
66
66
|
const priceColor = isSoldOut ? "#bbb" : seatPriceColor;
|
|
67
|
-
const isMovilBus = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus" ||
|
|
67
|
+
const isMovilBus = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus" ||
|
|
68
|
+
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "Movil Bus";
|
|
68
69
|
// Fetch ALL unique seats (no slice limit) for the multi-row MovilBus case
|
|
69
70
|
const uniqueSeats = getUniqueSeats(seatTypesData !== null && seatTypesData !== void 0 ? seatTypesData : [], Infinity);
|
|
70
71
|
// MovilBus + multiple unique seat types → render a row per seat
|
|
@@ -360,7 +360,7 @@ const commonService = {
|
|
|
360
360
|
let remaining = Math.max(0, Math.floor(countdownSeconds));
|
|
361
361
|
const formatTime = (totalSeconds) => {
|
|
362
362
|
if (totalSeconds <= 0)
|
|
363
|
-
return "
|
|
363
|
+
return "00:00";
|
|
364
364
|
const h = Math.floor(totalSeconds / 3600);
|
|
365
365
|
const m = Math.floor((totalSeconds % 3600) / 60);
|
|
366
366
|
const s = totalSeconds % 60;
|
package/package.json
CHANGED
|
@@ -695,10 +695,10 @@ function ServiceItemPB({
|
|
|
695
695
|
? {
|
|
696
696
|
borderLeft: isSoldOut
|
|
697
697
|
? ""
|
|
698
|
-
: `3px solid ${colors.
|
|
698
|
+
: `3px solid ${colors.rightGradiantColor || "#ff8842"}`,
|
|
699
699
|
borderRight: isSoldOut
|
|
700
700
|
? ""
|
|
701
|
-
: `3px solid ${colors.
|
|
701
|
+
: `3px solid ${colors.leftGradiantColor || "#ff8842"}`,
|
|
702
702
|
borderRadius: "0 0 18px 18px",
|
|
703
703
|
boxSizing: "border-box",
|
|
704
704
|
}
|
|
@@ -423,7 +423,7 @@ const FeatureServiceUi = ({
|
|
|
423
423
|
</div>
|
|
424
424
|
|
|
425
425
|
{/* MIDDLE: competing operators + viewers */}
|
|
426
|
-
<div className="min-w-0 px-[22px] flex flex-col items-center justify-between gap-[16px] py-[2px] border-r border-[#363c48] border-l border-[#363c48]">
|
|
426
|
+
<div className="min-w-0 overflow-x-auto px-[22px] flex flex-col items-center justify-between gap-[16px] py-[2px] border-r border-[#363c48] border-l border-[#363c48]">
|
|
427
427
|
<div className="text-center">
|
|
428
428
|
<div className="bold-text text-[13px]">
|
|
429
429
|
{servicesInActiveSlot.length > 0
|
|
@@ -434,12 +434,12 @@ const FeatureServiceUi = ({
|
|
|
434
434
|
</div>
|
|
435
435
|
|
|
436
436
|
<div
|
|
437
|
-
className="grid
|
|
437
|
+
className="grid items-stretch gap-[14px]"
|
|
438
438
|
style={{
|
|
439
439
|
gridTemplateColumns: `repeat(${Math.min(
|
|
440
440
|
servicesInActiveSlot.length || operators.length,
|
|
441
441
|
3,
|
|
442
|
-
)}, 1fr)`,
|
|
442
|
+
)}, minmax(80px, 1fr))`,
|
|
443
443
|
}}
|
|
444
444
|
>
|
|
445
445
|
{(servicesInActiveSlot.length > 0
|
|
@@ -470,11 +470,14 @@ const FeatureServiceUi = ({
|
|
|
470
470
|
serviceItem?.operator_details?.[0] ||
|
|
471
471
|
"/images/service-list/bus-icon.svg";
|
|
472
472
|
}}
|
|
473
|
-
className={`h-[24px] max-w-full object-contain
|
|
473
|
+
className={`h-[24px] max-w-full object-contain ${
|
|
474
474
|
isSoldOut ? "grayscale" : ""
|
|
475
475
|
}`}
|
|
476
|
+
// className={`h-[24px] max-w-full object-contain brightness-0 invert ${
|
|
477
|
+
// isSoldOut ? "grayscale" : ""
|
|
478
|
+
// }`}
|
|
476
479
|
/>
|
|
477
|
-
<span className="text-[11px] truncate
|
|
480
|
+
<span className="text-[11px] truncate w-full text-center text-[white] overflow-hidden">
|
|
478
481
|
{op.name}
|
|
479
482
|
</span>
|
|
480
483
|
<div className="bg-[#FF8F45] text-white text-[12px] font-bold px-[10px] py-[4px] rounded-[4px] bold-text whitespace-nowrap">
|
|
@@ -139,7 +139,8 @@ function SeatSection({
|
|
|
139
139
|
const renderSeatPrices = () => {
|
|
140
140
|
if (isPeru) {
|
|
141
141
|
const isMovilBus =
|
|
142
|
-
serviceItem?.operator_service_name === "MovilBus" ||
|
|
142
|
+
serviceItem?.operator_service_name === "MovilBus" ||
|
|
143
|
+
serviceItem?.operator_service_name === "Movil Bus";
|
|
143
144
|
|
|
144
145
|
// Multiple unique seat types → show a price row for each (MovilBus only)
|
|
145
146
|
if (isMovilBus && uniqueSeats.length > 1) {
|
|
@@ -260,7 +261,8 @@ function SeatSection({
|
|
|
260
261
|
const renderLabels = () => {
|
|
261
262
|
if (isPeru) {
|
|
262
263
|
const isMovilBus =
|
|
263
|
-
serviceItem?.operator_service_name === "MovilBus" ||
|
|
264
|
+
serviceItem?.operator_service_name === "MovilBus" ||
|
|
265
|
+
serviceItem?.operator_service_name === "Movil Bus";
|
|
264
266
|
|
|
265
267
|
// Multiple unique seat types → show a label row for each (MovilBus only)
|
|
266
268
|
if (isMovilBus && uniqueSeats.length > 1) {
|
|
@@ -150,7 +150,8 @@ function SeatSectionMobile({
|
|
|
150
150
|
|
|
151
151
|
const priceColor = isSoldOut ? "#bbb" : seatPriceColor;
|
|
152
152
|
const isMovilBus =
|
|
153
|
-
serviceItem?.operator_service_name === "MovilBus" ||
|
|
153
|
+
serviceItem?.operator_service_name === "MovilBus" ||
|
|
154
|
+
serviceItem?.operator_service_name === "Movil Bus";
|
|
154
155
|
|
|
155
156
|
// Fetch ALL unique seats (no slice limit) for the multi-row MovilBus case
|
|
156
157
|
const uniqueSeats = getUniqueSeats(seatTypesData ?? [], Infinity as number);
|
|
@@ -413,7 +413,7 @@ const commonService = {
|
|
|
413
413
|
let remaining = Math.max(0, Math.floor(countdownSeconds));
|
|
414
414
|
|
|
415
415
|
const formatTime = (totalSeconds: number) => {
|
|
416
|
-
if (totalSeconds <= 0) return "
|
|
416
|
+
if (totalSeconds <= 0) return "00:00";
|
|
417
417
|
const h = Math.floor(totalSeconds / 3600);
|
|
418
418
|
const m = Math.floor((totalSeconds % 3600) / 60);
|
|
419
419
|
const s = totalSeconds % 60;
|