kupos-ui-components-lib 2.0.1 β†’ 2.0.3

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.
Files changed (8) hide show
  1. package/dist/components/ServiceItem/ServiceItemDesktop.d.ts +1 -1
  2. package/dist/components/ServiceItem/ServiceItemDesktop.js +31 -29
  3. package/dist/components/ServiceItem/types.d.ts +1 -0
  4. package/dist/styles.css +19 -0
  5. package/package.json +3 -2
  6. package/src/components/ServiceItem/ServiceItemDesktop.tsx +55 -45
  7. package/src/components/ServiceItem/types.ts +1 -0
  8. package/watch-and-build.js +58 -0
package/dist/components/ServiceItem/ServiceItemDesktop.d.ts CHANGED
@@ -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;
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -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-[30px]"
291
- : "mt-[20px]"} ` },
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: "flex justify-between items-center mb-[15px]" },
295
- React.createElement("div", { className: "flex items-center justify-between w-[250px]" },
296
- React.createElement("div", { className: "w-[120px] overflow-y-hidden" },
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-[50%]" }, "\u2022"),
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,13 @@ 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-[50%]" }, "\u2022"),
320
+ removeArrivalTime ? null : serviceItem.arr_time ? (React.createElement("div", { className: "absolute left-[53%]" }, "\u2022")) : null,
324
321
  React.createElement("div", { className: "font-[900] bold-text group relative" },
325
- DateService.formatTime(serviceItem.arr_time),
322
+ removeArrivalTime
323
+ ? null
324
+ : serviceItem.arr_time
325
+ ? DateService.formatTime(serviceItem.arr_time)
326
+ : null,
326
327
  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
328
  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
329
  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 +334,15 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
333
334
  margin: "auto",
334
335
  } }),
335
336
  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" } : {} },
337
+ 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
338
  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: {
339
+ React.createElement("div", { className: "flex flex-col justify-between absolute inset-y-0 right-0 left-1/2 h-full", style: {
343
340
  color: isSoldOut ? "#c0c0c0" : colors.seatPriceColor,
341
+ top: 0,
342
+ bottom: 0,
343
+ left: "60%",
344
+ right: 0,
345
+ justifyContent: getNumberOfSeats() < 2 ? "center" : "",
344
346
  } }, getSeatPrice()))),
345
347
  React.createElement("div", null,
346
348
  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 +449,25 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
447
449
  } },
448
450
  React.createElement(LottiePlayer, { animationData: serviceItem.icons.promoAnim, width: "18px", height: "18px" }),
449
451
  React.createElement("span", { className: "ml-[10px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))),
450
- React.createElement("div", { className: "absolute -top-[17px] left-0 w-full flex items-center justify-end gap-[12px] pr-[20px] z-10 " },
451
- showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[8px] px-[14px] rounded-[38px] text-[13.33px] z-20`, style: { backgroundColor: !isSoldOut && colors.ratingBottomColor } },
452
+ React.createElement("div", { className: "absolute -top-[13px] left-0 w-full flex items-center justify-end gap-[12px] pr-[28px] z-10 " },
453
+ 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
454
  React.createElement("div", { className: isSoldOut ? "grayscale" : "" },
453
- React.createElement(LottiePlayer, { animationData: serviceItem.icons.priorityStageAnim, width: "20px", height: "20px" })),
455
+ React.createElement(LottiePlayer, { animationData: serviceItem.icons.priorityStageAnim, width: "16px", height: "16px" })),
454
456
  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-[8px] text-white px-[14px] rounded-[38px] text-[13.33px] z-20`, style: {
457
+ (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
458
  backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
457
459
  } },
458
- React.createElement(LottiePlayer, { animationData: serviceItem.icons.connectingServiceIcon, width: "20px", height: "20px" }),
460
+ React.createElement(LottiePlayer, { animationData: serviceItem.icons.connectingServiceIcon, width: "16px", height: "16px" }),
459
461
  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-[8px] text-white px-[14px] rounded-[38px] text-[13.33px] z-20 `, style: {
462
+ (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
463
  backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
462
464
  } },
463
- React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "20px", height: "20px" }),
465
+ React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "16px", height: "16px" }),
464
466
  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-[8px] text-white px-[14px] rounded-[38px] text-[13.33px] z-20 `, style: {
467
+ (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
468
  backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
467
469
  } },
468
- React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "20px", height: "20px" }),
470
+ React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "16px", height: "16px" }),
469
471
  React.createElement("div", null, "Tren Express"))))));
470
472
  }
471
473
  export default ServiceItemPB;
package/dist/components/ServiceItem/types.d.ts CHANGED
@@ -157,4 +157,5 @@ export interface ServiceItemProps {
157
157
  isCiva?: boolean;
158
158
  showRating?: boolean;
159
159
  showLastSeats?: boolean;
160
+ removeArrivalTime?: boolean;
160
161
  }
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.1",
3
+ "version": "2.0.3",
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",
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -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-[30px]"
414
- : "mt-[20px]"
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
- 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
457
- rem] min-[768px]:gap-x-[4rem] min-[1024px]:gap-x-[4rem] min-[1280px]:gap-x-[4rem] min-[1380px]:gap-x-[5rem] items-center"
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-[50%]">β€’</div>
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,15 @@ function ServiceItemPB({
599
606
  )}
600
607
  </span>
601
608
 
602
- <div className="absolute left-[50%]">β€’</div>
609
+ {removeArrivalTime ? null : serviceItem.arr_time ? (
610
+ <div className="absolute left-[53%]">β€’</div>
611
+ ) : null}
603
612
  <div className="font-[900] bold-text group relative">
604
- {DateService.formatTime(serviceItem.arr_time)}
613
+ {removeArrivalTime
614
+ ? null
615
+ : serviceItem.arr_time
616
+ ? DateService.formatTime(serviceItem.arr_time)
617
+ : null}
605
618
 
606
619
  {/* Dropping stage tooltip */}
607
620
  {serviceItem.dropoff_stages && (
@@ -645,26 +658,23 @@ function ServiceItemPB({
645
658
  {/* SEATS */}
646
659
  <div className="content-center">
647
660
  <div
648
- className={`flex gap-[10px] text-[13.33px] justify-between min-h-[2.5rem] ${
661
+ className={`relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.5rem] ${
649
662
  getNumberOfSeats() < 3 ? "" : ""
650
663
  }`}
651
664
  style={getNumberOfSeats() < 2 ? { alignItems: "center" } : {}}
652
665
  >
653
- <div
654
- className="flex flex-col justify-between"
655
- // className={`flex flex-col ${
656
- // getNumberOfSeats() < 3 ? "justify-between" : ""
657
- // }`}
658
- >
666
+ <div className="flex flex-col justify-between">
659
667
  {getSeatNames()}
660
668
  </div>
661
669
  <div
662
- className="flex flex-col justify-between"
663
- // className={`flex flex-col ${
664
- // getNumberOfSeats() < 3 ? "justify-between" : ""
665
- // }`}
670
+ className="flex flex-col justify-between absolute inset-y-0 right-0 left-1/2 h-full"
666
671
  style={{
667
672
  color: isSoldOut ? "#c0c0c0" : colors.seatPriceColor,
673
+ top: 0,
674
+ bottom: 0,
675
+ left: "60%",
676
+ right: 0,
677
+ justifyContent: getNumberOfSeats() < 2 ? "center" : "",
668
678
  }}
669
679
  >
670
680
  {getSeatPrice()}
@@ -1012,17 +1022,17 @@ function ServiceItemPB({
1012
1022
  </div>
1013
1023
  )}
1014
1024
 
1015
- <div className="absolute -top-[17px] left-0 w-full flex items-center justify-end gap-[12px] pr-[20px] z-10 ">
1025
+ <div className="absolute -top-[13px] left-0 w-full flex items-center justify-end gap-[12px] pr-[28px] z-10 ">
1016
1026
  {showTopLabel && (
1017
1027
  <div
1018
- className={`flex items-center gap-[10px] py-[8px] px-[14px] rounded-[38px] text-[13.33px] z-20`}
1028
+ className={`flex items-center gap-[10px] py-[5px] px-[14px] rounded-[38px] text-[13.33px] z-20`}
1019
1029
  style={{ backgroundColor: !isSoldOut && colors.ratingBottomColor }}
1020
1030
  >
1021
1031
  <div className={isSoldOut ? "grayscale" : ""}>
1022
1032
  <LottiePlayer
1023
1033
  animationData={serviceItem.icons.priorityStageAnim}
1024
- width="20px"
1025
- height="20px"
1034
+ width="16px"
1035
+ height="16px"
1026
1036
  />
1027
1037
  </div>
1028
1038
  <div
@@ -1036,45 +1046,45 @@ function ServiceItemPB({
1036
1046
  )}
1037
1047
  {serviceItem?.is_transpordo && (
1038
1048
  <div
1039
- className={`flex items-center gap-[10px] py-[8px] text-white px-[14px] rounded-[38px] text-[13.33px] z-20`}
1049
+ className={`flex items-center gap-[10px] py-[5px] text-white px-[14px] rounded-[38px] text-[13.33px] z-20`}
1040
1050
  style={{
1041
1051
  backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
1042
1052
  }}
1043
1053
  >
1044
1054
  <LottiePlayer
1045
1055
  animationData={serviceItem.icons.connectingServiceIcon}
1046
- width="20px"
1047
- height="20px"
1056
+ width="16px"
1057
+ height="16px"
1048
1058
  />
1049
1059
  <div>{"ConexiΓ³n"}</div>
1050
1060
  </div>
1051
1061
  )}
1052
1062
  {serviceItem?.is_direct_trip && (
1053
1063
  <div
1054
- className={`flex items-center gap-[10px] py-[8px] text-white px-[14px] rounded-[38px] text-[13.33px] z-20 `}
1064
+ className={`flex items-center gap-[10px] py-[5px] text-white px-[14px] rounded-[38px] text-[13.33px] z-20 `}
1055
1065
  style={{
1056
1066
  backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
1057
1067
  }}
1058
1068
  >
1059
1069
  <LottiePlayer
1060
1070
  animationData={serviceItem.icons.directoAnim}
1061
- width="20px"
1062
- height="20px"
1071
+ width="16px"
1072
+ height="16px"
1063
1073
  />
1064
1074
  <div>{translation?.directService}</div>
1065
1075
  </div>
1066
1076
  )}
1067
1077
  {serviceItem?.train_type_label === "Tren Express (Nuevo)" && (
1068
1078
  <div
1069
- className={`flex items-center gap-[10px] py-[8px] text-white px-[14px] rounded-[38px] text-[13.33px] z-20 `}
1079
+ className={`flex items-center gap-[10px] py-[5px] text-white px-[14px] rounded-[38px] text-[13.33px] z-20 `}
1070
1080
  style={{
1071
1081
  backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
1072
1082
  }}
1073
1083
  >
1074
1084
  <LottiePlayer
1075
1085
  animationData={serviceItem.icons.directoAnim}
1076
- width="20px"
1077
- height="20px"
1086
+ width="16px"
1087
+ height="16px"
1078
1088
  />
1079
1089
  <div>{"Tren Express"}</div>
1080
1090
  </div>
package/src/components/ServiceItem/types.ts CHANGED
@@ -152,4 +152,5 @@ export interface ServiceItemProps {
152
152
  isCiva?: boolean;
153
153
  showRating?: boolean;
154
154
  showLastSeats?: boolean
155
+ removeArrivalTime?: boolean
155
156
  }
package/watch-and-build.js ADDED
@@ -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
+ });