kupos-ui-components-lib 2.0.1 β 2.0.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.
- package/dist/components/ServiceItem/ServiceItemDesktop.d.ts +1 -1
- package/dist/components/ServiceItem/ServiceItemDesktop.js +29 -29
- package/dist/components/ServiceItem/types.d.ts +1 -0
- package/dist/styles.css +19 -0
- package/package.json +3 -2
- package/src/components/ServiceItem/ServiceItemDesktop.tsx +53 -45
- package/src/components/ServiceItem/types.ts +1 -0
- package/watch-and-build.js +58 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { ServiceItemProps } from "./types";
|
|
3
|
-
declare function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, t, }: ServiceItemProps & {
|
|
3
|
+
declare function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, t, }: ServiceItemProps & {
|
|
4
4
|
currencySign?: string;
|
|
5
5
|
}): React.ReactElement;
|
|
6
6
|
export default ServiceItemPB;
|
|
@@ -6,7 +6,7 @@ import ModalEventManager from "../../utils/ModalEventManager";
|
|
|
6
6
|
import InternationalServicePopupBody from "../InternationalServicePopupBody";
|
|
7
7
|
import LottiePlayer from "../../assets/LottiePlayer";
|
|
8
8
|
const SEAT_EXCEPTIONS = ["Asiento mascota"];
|
|
9
|
-
function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, t = (key) => key, }) {
|
|
9
|
+
function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, t = (key) => key, }) {
|
|
10
10
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
11
11
|
const SvgAmenities = ({ moreAnemities, name, color, }) => {
|
|
12
12
|
const amenityKey = name.toLowerCase().replace(/\s/g, "_");
|
|
@@ -194,7 +194,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
194
194
|
};
|
|
195
195
|
const getSeatPrice = () => {
|
|
196
196
|
const sortedSeatTypes = getSortedSeatTypes();
|
|
197
|
-
return sortedSeatTypes.map((val, key) => SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("span", { key: key, className: "flex items-center justify-between text-[13.33px]" }, typeof val.price === "string"
|
|
197
|
+
return sortedSeatTypes.map((val, key) => SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("span", { key: key, className: "flex items-center justify-between text-[13.33px] bold-text" }, typeof val.price === "string"
|
|
198
198
|
? CommonService.currency(val.price, currencySign)
|
|
199
199
|
: typeof val.price === "number"
|
|
200
200
|
? CommonService.currency(val.price, currencySign)
|
|
@@ -287,18 +287,15 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
287
287
|
: "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
|
|
288
288
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
|
|
289
289
|
showTopLabel
|
|
290
|
-
? "mt-[
|
|
291
|
-
: "mt-[
|
|
290
|
+
? "mt-[24px]"
|
|
291
|
+
: "mt-[14px]"} ` },
|
|
292
292
|
React.createElement("div", { className: "bg-white rounded-[20px] shadow-service mb-[10px] mx-auto relative" },
|
|
293
293
|
React.createElement("div", { className: "p-[15px]" },
|
|
294
|
-
React.createElement("div", { className: "
|
|
295
|
-
React.createElement("div", { className: "flex items-center justify-
|
|
296
|
-
React.createElement("div", { className: "w-[120px]
|
|
294
|
+
React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:12%_30%_minmax(0,0.2fr)_25%_15%] gap-x-[4%] items-center" },
|
|
295
|
+
React.createElement("div", { className: "flex items-center justify-center m-[auto]" },
|
|
296
|
+
React.createElement("div", { className: "w-[120px] " },
|
|
297
297
|
React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `w-[120px] h-auto object-contain ${isSoldOut ? "grayscale" : ""}` })),
|
|
298
|
-
React.createElement("div", null,
|
|
299
|
-
" ",
|
|
300
|
-
isCiva ? (React.createElement("div", { className: "text-[13.33px] black-text" }, serviceItem.operator_details[2])) : null))),
|
|
301
|
-
React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:minmax(0,1.4fr)_minmax(0,0.2fr)_minmax(0,1fr)_auto] gap-x-[7rem] min-[640px]:gap-x-[5\n rem] min-[768px]:gap-x-[4rem] min-[1024px]:gap-x-[4rem] min-[1280px]:gap-x-[4rem] min-[1380px]:gap-x-[5rem] items-center" },
|
|
298
|
+
isCiva ? (React.createElement("div", { className: "text-[13.33px] black-text ml-2" }, serviceItem.operator_details[2])) : null),
|
|
302
299
|
React.createElement("div", { className: "min-h-[2.5rem] flex flex-col gap-[10px]", style: { justifyContent: isCiva ? "center" : "space-between" } },
|
|
303
300
|
React.createElement("div", { className: `flex items-center text-[13.33px] justify-between relative ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
|
|
304
301
|
React.createElement("div", { className: "flex items-center", style: { flex: 1 } },
|
|
@@ -308,7 +305,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
308
305
|
React.createElement("img", { src: (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a.origin, alt: "origin", className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}` })))),
|
|
309
306
|
React.createElement("div", { className: "flex items-center capitalize relative group items-center justify-between ", style: { flex: 1 } },
|
|
310
307
|
React.createElement("span", { className: "cursor-pointer bold-text" }, DateService.getServiceItemDate(serviceItem.travel_date)),
|
|
311
|
-
React.createElement("div", { className: "absolute left-[
|
|
308
|
+
React.createElement("div", { className: "absolute left-[53%]" }, "\u2022"),
|
|
312
309
|
React.createElement("div", { className: "font-[900] bold-text group relative" },
|
|
313
310
|
DateService.formatTime(serviceItem.dep_time),
|
|
314
311
|
serviceItem.boarding_stages && (React.createElement("div", { className: "hidden group-hover:block absolute -top-[8px] left-[100%] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service", style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } },
|
|
@@ -320,9 +317,11 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
320
317
|
React.createElement("img", { src: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.destination, className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}` })))),
|
|
321
318
|
React.createElement("div", { className: "flex items-center capitalize relative group items-center justify-between ", style: { flex: 1 } },
|
|
322
319
|
React.createElement("span", { className: "cursor-pointer bold-text" }, DateService.getServiceItemDate(serviceItem.arrival_date)),
|
|
323
|
-
React.createElement("div", { className: "absolute left-[
|
|
320
|
+
removeArrivalTime ? null : (React.createElement("div", { className: "absolute left-[53%]" }, "\u2022")),
|
|
324
321
|
React.createElement("div", { className: "font-[900] bold-text group relative" },
|
|
325
|
-
|
|
322
|
+
removeArrivalTime
|
|
323
|
+
? null
|
|
324
|
+
: DateService.formatTime(serviceItem.arr_time),
|
|
326
325
|
serviceItem.dropoff_stages && (React.createElement("div", { className: "hidden group-hover:block absolute -top-[8px] left-[100%] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service", style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } },
|
|
327
326
|
React.createElement("div", { className: "tooltip-arrow absolute top-2 -left-[7px] w-0 h-0 \n border-t-8 border-b-8 border-r-8 \n border-t-transparent border-b-transparent", style: { borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } }),
|
|
328
327
|
React.createElement("div", { className: "text-center text-[14px]" }, renderStages(serviceItem.dropoff_stages, 2, busStage, hideBoardingTime((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.api_type) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.apiType)))))))))))),
|
|
@@ -333,14 +332,15 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
333
332
|
margin: "auto",
|
|
334
333
|
} }),
|
|
335
334
|
React.createElement("div", { className: "content-center" },
|
|
336
|
-
React.createElement("div", { className: `flex gap-[10px] text-[13.33px] justify-between min-h-[2.5rem] ${getNumberOfSeats() < 3 ? "" : ""}`, style: getNumberOfSeats() < 2 ? { alignItems: "center" } : {} },
|
|
335
|
+
React.createElement("div", { className: `relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.5rem] ${getNumberOfSeats() < 3 ? "" : ""}`, style: getNumberOfSeats() < 2 ? { alignItems: "center" } : {} },
|
|
337
336
|
React.createElement("div", { className: "flex flex-col justify-between" }, getSeatNames()),
|
|
338
|
-
React.createElement("div", { className: "flex flex-col justify-between",
|
|
339
|
-
// className={`flex flex-col ${
|
|
340
|
-
// getNumberOfSeats() < 3 ? "justify-between" : ""
|
|
341
|
-
// }`}
|
|
342
|
-
style: {
|
|
337
|
+
React.createElement("div", { className: "flex flex-col justify-between absolute inset-y-0 right-0 left-1/2 h-full", style: {
|
|
343
338
|
color: isSoldOut ? "#c0c0c0" : colors.seatPriceColor,
|
|
339
|
+
top: 0,
|
|
340
|
+
bottom: 0,
|
|
341
|
+
left: "60%",
|
|
342
|
+
right: 0,
|
|
343
|
+
justifyContent: getNumberOfSeats() < 2 ? "center" : "",
|
|
344
344
|
} }, getSeatPrice()))),
|
|
345
345
|
React.createElement("div", null,
|
|
346
346
|
React.createElement("button", { onClick: () => (!isSoldOut ? checkMidnight() : null), disabled: serviceDetailsLoading, className: `w-full ${serviceDetailsLoading || isSoldOut ? "py-[12px]" : "py-[12px]"} text-[13.33px] font-bold text-white rounded-[10px] border-none px-[20px] flex items-center justify-center`, style: {
|
|
@@ -447,25 +447,25 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
447
447
|
} },
|
|
448
448
|
React.createElement(LottiePlayer, { animationData: serviceItem.icons.promoAnim, width: "18px", height: "18px" }),
|
|
449
449
|
React.createElement("span", { className: "ml-[10px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))),
|
|
450
|
-
React.createElement("div", { className: "absolute -top-[
|
|
451
|
-
showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[
|
|
450
|
+
React.createElement("div", { className: "absolute -top-[13px] left-0 w-full flex items-center justify-end gap-[12px] pr-[28px] z-10 " },
|
|
451
|
+
showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[5px] px-[14px] rounded-[38px] text-[13.33px] z-20`, style: { backgroundColor: !isSoldOut && colors.ratingBottomColor } },
|
|
452
452
|
React.createElement("div", { className: isSoldOut ? "grayscale" : "" },
|
|
453
|
-
React.createElement(LottiePlayer, { animationData: serviceItem.icons.priorityStageAnim, width: "
|
|
453
|
+
React.createElement(LottiePlayer, { animationData: serviceItem.icons.priorityStageAnim, width: "16px", height: "16px" })),
|
|
454
454
|
React.createElement("div", { className: isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]` }, showTopLabel))),
|
|
455
|
-
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[
|
|
455
|
+
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[5px] text-white px-[14px] rounded-[38px] text-[13.33px] z-20`, style: {
|
|
456
456
|
backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
|
|
457
457
|
} },
|
|
458
|
-
React.createElement(LottiePlayer, { animationData: serviceItem.icons.connectingServiceIcon, width: "
|
|
458
|
+
React.createElement(LottiePlayer, { animationData: serviceItem.icons.connectingServiceIcon, width: "16px", height: "16px" }),
|
|
459
459
|
React.createElement("div", null, "ConexiΓ³n"))),
|
|
460
|
-
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[
|
|
460
|
+
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[5px] text-white px-[14px] rounded-[38px] text-[13.33px] z-20 `, style: {
|
|
461
461
|
backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
|
|
462
462
|
} },
|
|
463
|
-
React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "
|
|
463
|
+
React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "16px", height: "16px" }),
|
|
464
464
|
React.createElement("div", null, translation === null || translation === void 0 ? void 0 : translation.directService))),
|
|
465
|
-
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" && (React.createElement("div", { className: `flex items-center gap-[10px] py-[
|
|
465
|
+
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" && (React.createElement("div", { className: `flex items-center gap-[10px] py-[5px] text-white px-[14px] rounded-[38px] text-[13.33px] z-20 `, style: {
|
|
466
466
|
backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
|
|
467
467
|
} },
|
|
468
|
-
React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "
|
|
468
|
+
React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "16px", height: "16px" }),
|
|
469
469
|
React.createElement("div", null, "Tren Express"))))));
|
|
470
470
|
}
|
|
471
471
|
export default ServiceItemPB;
|
package/dist/styles.css
CHANGED
|
@@ -84,6 +84,9 @@
|
|
|
84
84
|
.left-\[50\%\] {
|
|
85
85
|
left: 50%;
|
|
86
86
|
}
|
|
87
|
+
.left-\[53\%\] {
|
|
88
|
+
left: 53%;
|
|
89
|
+
}
|
|
87
90
|
.left-\[80px\] {
|
|
88
91
|
left: 80px;
|
|
89
92
|
}
|
|
@@ -141,6 +144,9 @@
|
|
|
141
144
|
.mt-\[10px\] {
|
|
142
145
|
margin-top: 10px;
|
|
143
146
|
}
|
|
147
|
+
.mt-\[14px\] {
|
|
148
|
+
margin-top: 14px;
|
|
149
|
+
}
|
|
144
150
|
.mt-\[15px\] {
|
|
145
151
|
margin-top: 15px;
|
|
146
152
|
}
|
|
@@ -150,6 +156,9 @@
|
|
|
150
156
|
.mt-\[20px\] {
|
|
151
157
|
margin-top: 20px;
|
|
152
158
|
}
|
|
159
|
+
.mt-\[24px\] {
|
|
160
|
+
margin-top: 24px;
|
|
161
|
+
}
|
|
153
162
|
.mt-\[30px\] {
|
|
154
163
|
margin-top: 30px;
|
|
155
164
|
}
|
|
@@ -379,6 +388,9 @@
|
|
|
379
388
|
.cursor-pointer {
|
|
380
389
|
cursor: pointer;
|
|
381
390
|
}
|
|
391
|
+
.\[grid-template-columns\:12\%_30\%_minmax\(0\,0\.2fr\)_25\%_15\%\] {
|
|
392
|
+
grid-template-columns: 12% 30% minmax(0,0.2fr) 25% 15%;
|
|
393
|
+
}
|
|
382
394
|
.\[grid-template-columns\:minmax\(0\,1\.4fr\)_minmax\(0\,0\.2fr\)_minmax\(0\,1fr\)_auto\] {
|
|
383
395
|
grid-template-columns: minmax(0,1.4fr) minmax(0,0.2fr) minmax(0,1fr) auto;
|
|
384
396
|
}
|
|
@@ -439,6 +451,10 @@
|
|
|
439
451
|
.gap-\[12px\] {
|
|
440
452
|
gap: 12px;
|
|
441
453
|
}
|
|
454
|
+
.gap-x-\[4\%\] {
|
|
455
|
+
-moz-column-gap: 4%;
|
|
456
|
+
column-gap: 4%;
|
|
457
|
+
}
|
|
442
458
|
.gap-x-\[7rem\] {
|
|
443
459
|
-moz-column-gap: 7rem;
|
|
444
460
|
column-gap: 7rem;
|
|
@@ -635,6 +651,9 @@
|
|
|
635
651
|
.pr-\[20px\] {
|
|
636
652
|
padding-right: 20px;
|
|
637
653
|
}
|
|
654
|
+
.pr-\[28px\] {
|
|
655
|
+
padding-right: 28px;
|
|
656
|
+
}
|
|
638
657
|
.pb-\[5px\] {
|
|
639
658
|
padding-bottom: 5px;
|
|
640
659
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "kupos-ui-components-lib",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.2",
|
|
4
4
|
"description": "A reusable UI components package",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -20,7 +20,8 @@
|
|
|
20
20
|
"build:css": "node build-css.js",
|
|
21
21
|
"copy-assets": "node copy-assets.js",
|
|
22
22
|
"prepublishOnly": "npm run build",
|
|
23
|
-
"dev": "npm run start"
|
|
23
|
+
"dev": "npm run start",
|
|
24
|
+
"watch": "node watch-and-build.js"
|
|
24
25
|
},
|
|
25
26
|
"keywords": [
|
|
26
27
|
"react",
|
|
@@ -26,6 +26,7 @@ function ServiceItemPB({
|
|
|
26
26
|
isCiva,
|
|
27
27
|
showRating,
|
|
28
28
|
showLastSeats,
|
|
29
|
+
removeArrivalTime,
|
|
29
30
|
t = (key: string) => key,
|
|
30
31
|
}: ServiceItemProps & { currencySign?: string }): React.ReactElement {
|
|
31
32
|
const SvgAmenities = ({
|
|
@@ -296,7 +297,7 @@ function ServiceItemPB({
|
|
|
296
297
|
SEAT_EXCEPTIONS.includes(val.label) ? null : (
|
|
297
298
|
<span
|
|
298
299
|
key={key}
|
|
299
|
-
className="flex items-center justify-between text-[13.33px]"
|
|
300
|
+
className="flex items-center justify-between text-[13.33px] bold-text"
|
|
300
301
|
>
|
|
301
302
|
{typeof val.price === "string"
|
|
302
303
|
? CommonService.currency(val.price, currencySign)
|
|
@@ -410,16 +411,9 @@ function ServiceItemPB({
|
|
|
410
411
|
serviceItem?.is_direct_trip ||
|
|
411
412
|
serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
|
|
412
413
|
showTopLabel
|
|
413
|
-
? "mt-[
|
|
414
|
-
: "mt-[
|
|
414
|
+
? "mt-[24px]"
|
|
415
|
+
: "mt-[14px]"
|
|
415
416
|
} `}
|
|
416
|
-
// ${
|
|
417
|
-
// serviceItem?.is_direct_trip ||
|
|
418
|
-
// serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
|
|
419
|
-
// !showTopLabel
|
|
420
|
-
// ? "mb-[60px]"
|
|
421
|
-
// : ""
|
|
422
|
-
// }
|
|
423
417
|
>
|
|
424
418
|
<div
|
|
425
419
|
className={
|
|
@@ -428,7 +422,7 @@ function ServiceItemPB({
|
|
|
428
422
|
>
|
|
429
423
|
<div className="p-[15px]">
|
|
430
424
|
{/* Header with operator info and favorite */}
|
|
431
|
-
<div className="flex justify-between items-center mb-[15px]">
|
|
425
|
+
{/* <div className="flex justify-between items-center mb-[15px]">
|
|
432
426
|
<div className="flex items-center justify-between w-[250px]">
|
|
433
427
|
<div className="w-[120px] overflow-y-hidden">
|
|
434
428
|
<img
|
|
@@ -449,13 +443,28 @@ function ServiceItemPB({
|
|
|
449
443
|
) : null}
|
|
450
444
|
</div>
|
|
451
445
|
</div>
|
|
452
|
-
</div>
|
|
446
|
+
</div> */}
|
|
453
447
|
|
|
454
448
|
{/* <div className="grid grid-cols-[1.5fr_1fr_auto] gap-[3rem] sm:gap-[4rem] md:gap-[5rem] lg:gap-[6rem] xl:gap-[5rem] 2xl:gap-[7rem] text-[#464647]"> */}
|
|
455
|
-
<div
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
449
|
+
<div className="grid text-[#464647] w-full [grid-template-columns:12%_30%_minmax(0,0.2fr)_25%_15%] gap-x-[4%] items-center">
|
|
450
|
+
{/* OPERATOR LOGO */}
|
|
451
|
+
<div className="flex items-center justify-center m-[auto]">
|
|
452
|
+
<div className="w-[120px] ">
|
|
453
|
+
<img
|
|
454
|
+
src={serviceItem.operator_details[0]}
|
|
455
|
+
alt="service logo"
|
|
456
|
+
className={`w-[120px] h-auto object-contain ${
|
|
457
|
+
isSoldOut ? "grayscale" : ""
|
|
458
|
+
}`}
|
|
459
|
+
/>
|
|
460
|
+
</div>
|
|
461
|
+
{isCiva ? (
|
|
462
|
+
<div className="text-[13.33px] black-text ml-2">
|
|
463
|
+
{serviceItem.operator_details[2]}
|
|
464
|
+
</div>
|
|
465
|
+
) : null}
|
|
466
|
+
</div>
|
|
467
|
+
|
|
459
468
|
{/* DATE AND TIME */}
|
|
460
469
|
<div
|
|
461
470
|
className="min-h-[2.5rem] flex flex-col gap-[10px]"
|
|
@@ -492,17 +501,15 @@ function ServiceItemPB({
|
|
|
492
501
|
{DateService.getServiceItemDate(serviceItem.travel_date)}
|
|
493
502
|
</span>
|
|
494
503
|
|
|
495
|
-
<div className="absolute left-[
|
|
504
|
+
<div className="absolute left-[53%]">β’</div>
|
|
496
505
|
<div className="font-[900] bold-text group relative">
|
|
497
506
|
{DateService.formatTime(serviceItem.dep_time)}
|
|
498
507
|
|
|
499
|
-
{/* Dropping stage tooltip */}
|
|
500
508
|
{serviceItem.boarding_stages && (
|
|
501
509
|
<div
|
|
502
510
|
className="hidden group-hover:block absolute -top-[8px] left-[100%] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service"
|
|
503
511
|
style={{ backgroundColor: colors?.tooltipColor }}
|
|
504
512
|
>
|
|
505
|
-
{/* Tooltip arrow */}
|
|
506
513
|
<div
|
|
507
514
|
className="tooltip-arrow absolute top-2 -left-[7px] w-0 h-0
|
|
508
515
|
border-t-8 border-b-8 border-r-8
|
|
@@ -599,9 +606,13 @@ function ServiceItemPB({
|
|
|
599
606
|
)}
|
|
600
607
|
</span>
|
|
601
608
|
|
|
602
|
-
|
|
609
|
+
{removeArrivalTime ? null : (
|
|
610
|
+
<div className="absolute left-[53%]">β’</div>
|
|
611
|
+
)}
|
|
603
612
|
<div className="font-[900] bold-text group relative">
|
|
604
|
-
{
|
|
613
|
+
{removeArrivalTime
|
|
614
|
+
? null
|
|
615
|
+
: DateService.formatTime(serviceItem.arr_time)}
|
|
605
616
|
|
|
606
617
|
{/* Dropping stage tooltip */}
|
|
607
618
|
{serviceItem.dropoff_stages && (
|
|
@@ -645,26 +656,23 @@ function ServiceItemPB({
|
|
|
645
656
|
{/* SEATS */}
|
|
646
657
|
<div className="content-center">
|
|
647
658
|
<div
|
|
648
|
-
className={`flex gap-[10px] text-[13.33px] justify-between min-h-[2.5rem] ${
|
|
659
|
+
className={`relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.5rem] ${
|
|
649
660
|
getNumberOfSeats() < 3 ? "" : ""
|
|
650
661
|
}`}
|
|
651
662
|
style={getNumberOfSeats() < 2 ? { alignItems: "center" } : {}}
|
|
652
663
|
>
|
|
653
|
-
<div
|
|
654
|
-
className="flex flex-col justify-between"
|
|
655
|
-
// className={`flex flex-col ${
|
|
656
|
-
// getNumberOfSeats() < 3 ? "justify-between" : ""
|
|
657
|
-
// }`}
|
|
658
|
-
>
|
|
664
|
+
<div className="flex flex-col justify-between">
|
|
659
665
|
{getSeatNames()}
|
|
660
666
|
</div>
|
|
661
667
|
<div
|
|
662
|
-
className="flex flex-col justify-between"
|
|
663
|
-
// className={`flex flex-col ${
|
|
664
|
-
// getNumberOfSeats() < 3 ? "justify-between" : ""
|
|
665
|
-
// }`}
|
|
668
|
+
className="flex flex-col justify-between absolute inset-y-0 right-0 left-1/2 h-full"
|
|
666
669
|
style={{
|
|
667
670
|
color: isSoldOut ? "#c0c0c0" : colors.seatPriceColor,
|
|
671
|
+
top: 0,
|
|
672
|
+
bottom: 0,
|
|
673
|
+
left: "60%",
|
|
674
|
+
right: 0,
|
|
675
|
+
justifyContent: getNumberOfSeats() < 2 ? "center" : "",
|
|
668
676
|
}}
|
|
669
677
|
>
|
|
670
678
|
{getSeatPrice()}
|
|
@@ -1012,17 +1020,17 @@ function ServiceItemPB({
|
|
|
1012
1020
|
</div>
|
|
1013
1021
|
)}
|
|
1014
1022
|
|
|
1015
|
-
<div className="absolute -top-[
|
|
1023
|
+
<div className="absolute -top-[13px] left-0 w-full flex items-center justify-end gap-[12px] pr-[28px] z-10 ">
|
|
1016
1024
|
{showTopLabel && (
|
|
1017
1025
|
<div
|
|
1018
|
-
className={`flex items-center gap-[10px] py-[
|
|
1026
|
+
className={`flex items-center gap-[10px] py-[5px] px-[14px] rounded-[38px] text-[13.33px] z-20`}
|
|
1019
1027
|
style={{ backgroundColor: !isSoldOut && colors.ratingBottomColor }}
|
|
1020
1028
|
>
|
|
1021
1029
|
<div className={isSoldOut ? "grayscale" : ""}>
|
|
1022
1030
|
<LottiePlayer
|
|
1023
1031
|
animationData={serviceItem.icons.priorityStageAnim}
|
|
1024
|
-
width="
|
|
1025
|
-
height="
|
|
1032
|
+
width="16px"
|
|
1033
|
+
height="16px"
|
|
1026
1034
|
/>
|
|
1027
1035
|
</div>
|
|
1028
1036
|
<div
|
|
@@ -1036,45 +1044,45 @@ function ServiceItemPB({
|
|
|
1036
1044
|
)}
|
|
1037
1045
|
{serviceItem?.is_transpordo && (
|
|
1038
1046
|
<div
|
|
1039
|
-
className={`flex items-center gap-[10px] py-[
|
|
1047
|
+
className={`flex items-center gap-[10px] py-[5px] text-white px-[14px] rounded-[38px] text-[13.33px] z-20`}
|
|
1040
1048
|
style={{
|
|
1041
1049
|
backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
|
|
1042
1050
|
}}
|
|
1043
1051
|
>
|
|
1044
1052
|
<LottiePlayer
|
|
1045
1053
|
animationData={serviceItem.icons.connectingServiceIcon}
|
|
1046
|
-
width="
|
|
1047
|
-
height="
|
|
1054
|
+
width="16px"
|
|
1055
|
+
height="16px"
|
|
1048
1056
|
/>
|
|
1049
1057
|
<div>{"ConexiΓ³n"}</div>
|
|
1050
1058
|
</div>
|
|
1051
1059
|
)}
|
|
1052
1060
|
{serviceItem?.is_direct_trip && (
|
|
1053
1061
|
<div
|
|
1054
|
-
className={`flex items-center gap-[10px] py-[
|
|
1062
|
+
className={`flex items-center gap-[10px] py-[5px] text-white px-[14px] rounded-[38px] text-[13.33px] z-20 `}
|
|
1055
1063
|
style={{
|
|
1056
1064
|
backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
|
|
1057
1065
|
}}
|
|
1058
1066
|
>
|
|
1059
1067
|
<LottiePlayer
|
|
1060
1068
|
animationData={serviceItem.icons.directoAnim}
|
|
1061
|
-
width="
|
|
1062
|
-
height="
|
|
1069
|
+
width="16px"
|
|
1070
|
+
height="16px"
|
|
1063
1071
|
/>
|
|
1064
1072
|
<div>{translation?.directService}</div>
|
|
1065
1073
|
</div>
|
|
1066
1074
|
)}
|
|
1067
1075
|
{serviceItem?.train_type_label === "Tren Express (Nuevo)" && (
|
|
1068
1076
|
<div
|
|
1069
|
-
className={`flex items-center gap-[10px] py-[
|
|
1077
|
+
className={`flex items-center gap-[10px] py-[5px] text-white px-[14px] rounded-[38px] text-[13.33px] z-20 `}
|
|
1070
1078
|
style={{
|
|
1071
1079
|
backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
|
|
1072
1080
|
}}
|
|
1073
1081
|
>
|
|
1074
1082
|
<LottiePlayer
|
|
1075
1083
|
animationData={serviceItem.icons.directoAnim}
|
|
1076
|
-
width="
|
|
1077
|
-
height="
|
|
1084
|
+
width="16px"
|
|
1085
|
+
height="16px"
|
|
1078
1086
|
/>
|
|
1079
1087
|
<div>{"Tren Express"}</div>
|
|
1080
1088
|
</div>
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
const { exec } = require('child_process');
|
|
4
|
+
const fs = require('fs');
|
|
5
|
+
const path = require('path');
|
|
6
|
+
|
|
7
|
+
console.log('π Watching for changes in kupos-ui-components...');
|
|
8
|
+
console.log('π Watching: src/ directory');
|
|
9
|
+
console.log('π Auto-rebuild: ON');
|
|
10
|
+
console.log('');
|
|
11
|
+
|
|
12
|
+
let isBuilding = false;
|
|
13
|
+
|
|
14
|
+
function buildPackage() {
|
|
15
|
+
if (isBuilding) {
|
|
16
|
+
console.log('β³ Build already in progress, skipping...');
|
|
17
|
+
return;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
isBuilding = true;
|
|
21
|
+
console.log('π¨ Building package...');
|
|
22
|
+
|
|
23
|
+
exec('yarn build', (error, stdout, stderr) => {
|
|
24
|
+
isBuilding = false;
|
|
25
|
+
|
|
26
|
+
if (error) {
|
|
27
|
+
console.error('β Build failed:', error);
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
console.log('β
Package built successfully!');
|
|
32
|
+
console.log('π‘ Restart your Next.js dev server to see changes');
|
|
33
|
+
console.log('');
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// Watch src directory for changes
|
|
38
|
+
const srcDir = path.join(__dirname, 'src');
|
|
39
|
+
|
|
40
|
+
if (fs.existsSync(srcDir)) {
|
|
41
|
+
fs.watch(srcDir, { recursive: true }, (eventType, filename) => {
|
|
42
|
+
if (filename && (filename.endsWith('.ts') || filename.endsWith('.tsx') || filename.endsWith('.css') || filename.endsWith('.scss'))) {
|
|
43
|
+
console.log(`π File changed: ${filename}`);
|
|
44
|
+
setTimeout(buildPackage, 500); // Debounce builds
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
} else {
|
|
48
|
+
console.log('β οΈ src/ directory not found. Make sure you run this from the kupos-ui-components directory.');
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
// Initial build
|
|
52
|
+
buildPackage();
|
|
53
|
+
|
|
54
|
+
// Keep the process running
|
|
55
|
+
process.on('SIGINT', () => {
|
|
56
|
+
console.log('\nπ Stopping watch mode...');
|
|
57
|
+
process.exit(0);
|
|
58
|
+
});
|