kupos-ui-components-lib 2.0.6 → 2.0.8

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 (4) hide show
  1. package/dist/components/ServiceItem/ServiceItemDesktop.js +35 -27
  2. package/dist/styles.css +9 -6
  3. package/package.json +1 -1
  4. package/src/components/ServiceItem/ServiceItemDesktop.tsx +80 -109
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -283,14 +283,14 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
283
283
  const onBookButtonPressHandler = () => {
284
284
  onBookButtonPress();
285
285
  };
286
- return (React.createElement("div", { className: `relative ${serviceItem.offer_text ? "mb-[60px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
286
+ return (React.createElement("div", { className: `relative ${serviceItem.offer_text ? "mb-[60px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
287
287
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
288
288
  showTopLabel
289
289
  ? "mt-[24px]"
290
290
  : "mt-[14px]"} ` },
291
- React.createElement("div", { className: "bg-white rounded-[20px] shadow-service mb-[10px] mx-auto relative" },
291
+ React.createElement("div", { className: "bg-white rounded-[20px] shadow-service mx-auto relative" },
292
292
  React.createElement("div", { className: "p-[15px]" },
293
- React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:12%_28%_minmax(0,0.2fr)_29%_15%] gap-x-[4%] items-center" },
293
+ React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:12%_28%_minmax(0,0.2fr)_29%_15%] gap-x-[4%] items-center", style: { marginTop: showTopLabel ? "8px" : "" } },
294
294
  React.createElement("div", { className: "flex items-center justify-center m-[auto]" },
295
295
  React.createElement("div", { className: " " },
296
296
  React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: ` h-auto object-contain ${isSoldOut ? "grayscale" : ""}` })),
@@ -300,32 +300,37 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
300
300
  React.createElement("div", { className: "flex items-center", style: { flex: 1 } },
301
301
  React.createElement("div", null,
302
302
  " ",
303
- orignLabel ? (React.createElement("div", { className: "w-[60px]" }, orignLabel)) : (React.createElement("div", { className: " h-auto mr-[8px]", style: { width: originIconStyle ? "16px" : "18px" } },
304
- React.createElement("img", { src: (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a.origin, alt: "origin", className: ` h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}`, style: { width: originIconStyle ? "16px" : "18px" } })))),
303
+ orignLabel ? (React.createElement("div", { className: "w-[60px]" }, orignLabel)) : (React.createElement("div", { className: "w-[18px] h-auto mr-[8px]", style: { width: originIconStyle ? "16px" : "18px" } },
304
+ 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" : ""}` })))),
305
305
  React.createElement("div", { className: "flex items-center capitalize relative group items-center justify-between ", style: { flex: 1 } },
306
306
  React.createElement("span", { className: "cursor-pointer bold-text" }, DateService.getServiceItemDate(serviceItem.travel_date)),
307
- React.createElement("div", { className: "absolute left-[48%]" }, "\u2022"),
308
- React.createElement("div", { className: "font-[900] bold-text group relative" },
309
- DateService.formatTime(serviceItem.dep_time),
310
- 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 } },
311
- 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 } }),
312
- React.createElement("div", { className: "text-center text-[14px]" }, renderStages(serviceItem.boarding_stages, 1, busStage, hideBoardingTime((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.api_type) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.apiType)))))))))),
307
+ React.createElement("div", { className: "absolute left-[40%] flex items-center w-[60%]" },
308
+ React.createElement("div", null, "\u2022"),
309
+ React.createElement("div", { className: "font-[900] bold-text group relative ml-[20%]" },
310
+ DateService.formatTime(serviceItem.dep_time),
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 } },
312
+ 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 } }),
313
+ React.createElement("div", { className: "text-center text-[14px]" }, renderStages(serviceItem.boarding_stages, 1, busStage, hideBoardingTime((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.api_type) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.apiType))))))))))),
313
314
  isCiva ? null : (React.createElement("div", { className: `flex items-center text-[13.33px] justify-between relative ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
314
315
  React.createElement("div", { className: "flex items-center", style: { flex: 1 } },
315
316
  React.createElement("div", null, destinationLabel ? (React.createElement("div", { className: "w-[60px]" }, destinationLabel)) : (React.createElement("div", { className: "w-[18px] h-auto mr-[8px]" },
316
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" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } })))),
317
318
  React.createElement("div", { className: "flex items-center capitalize relative group items-center justify-between ", style: { flex: 1 } },
318
319
  React.createElement("span", { className: "cursor-pointer bold-text" }, DateService.getServiceItemDate(serviceItem.arrival_date)),
319
- removeArrivalTime ? null : serviceItem.arr_time ? (React.createElement("div", { className: "absolute left-[48%]" }, "\u2022")) : null,
320
- React.createElement("div", { className: "font-[900] bold-text group relative" },
321
- removeArrivalTime
322
- ? null
323
- : serviceItem.arr_time
324
- ? DateService.formatTime(serviceItem.arr_time)
325
- : null,
326
- 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
- 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
- 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)))))))))))),
320
+ React.createElement("div", { className: "absolute left-[40%] flex items-center w-[60%]" },
321
+ removeArrivalTime ? null : serviceItem.arr_time ? (React.createElement("div", null, "\u2022")) : null,
322
+ React.createElement("div", { className: "font-[900] bold-text group relative ml-[20%]" },
323
+ removeArrivalTime
324
+ ? null
325
+ : serviceItem.arr_time
326
+ ? DateService.formatTime(serviceItem.arr_time)
327
+ : null,
328
+ 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 } },
329
+ 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: {
330
+ borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor,
331
+ } }),
332
+ 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) ||
333
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.apiType))))))))))))),
329
334
  React.createElement("div", { style: {
330
335
  width: "1px",
331
336
  height: "2.5rem",
@@ -339,7 +344,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
339
344
  color: isSoldOut ? "#c0c0c0" : colors.seatPriceColor,
340
345
  top: 0,
341
346
  bottom: 0,
342
- left: "60%",
347
+ left: "70%",
343
348
  right: 0,
344
349
  justifyContent: getNumberOfSeats() < 2 ? "center" : "",
345
350
  } }, getSeatPrice()))),
@@ -357,12 +362,12 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
357
362
  serviceDetailsLoading ? (React.createElement("span", { className: "loader-circle" })) : !isSoldOut ? (translation === null || translation === void 0 ? void 0 : translation.buyButton) : (translation === null || translation === void 0 ? void 0 : translation.soldOutButton))))),
358
363
  showLastSeats ? (React.createElement("div", { className: "flex justify-end mr-[11px]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
359
364
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[12px] text-[red] mt-1 text-center" }, "\u00A1 \u00DAltimos Asientos!")))) : null,
360
- React.createElement("div", { className: `${"flex justify-between items-center mt-[15px] items-center border-t border-[#eee] mt-[15px] pt-[12px]"}` },
365
+ React.createElement("div", { className: `${"flex justify-between items-center mt-[15px] items-center border-t border-[#eee] mt-[15px] pt-[8px]"}` },
361
366
  React.createElement("div", null,
362
367
  React.createElement("div", { className: "flex items-center " },
363
368
  React.createElement("div", { className: `flex items-center ${isSoldOut ? "grayscale" : ""} ${showRating ? "cursor-pointer" : ""}`, style: { color: isSoldOut ? "#c0c0c0" : "" } },
364
369
  showRating ? (React.createElement(RatingHover, { serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation })) : null,
365
- React.createElement("span", { className: "ml-[10px] text-[#464647] text-[13.33px]", style: { marginLeft: showRating ? "10px" : "0" } }, serviceItem.operator_details[2])))),
370
+ React.createElement("span", { className: "ml-[10px] text-[#464647] text-[13.33px] bold-text", style: { marginLeft: showRating ? "10px" : "0" } }, serviceItem.operator_details[2])))),
366
371
  serviceItem.duration && (React.createElement("div", { className: "flex items-baseline relative text-[#464647]" },
367
372
  React.createElement("div", { className: `w-[18px] h-auto mr-[4px] ${isSoldOut ? "grayscale" : ""}` }, renderIcon("hours", "14px")),
368
373
  React.createElement("div", { className: `cursor-default group text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
@@ -390,7 +395,10 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
390
395
  React.createElement(LottiePlayer, { animationData: serviceItem.icons.flexibleAnim, width: "20px", height: "20px" })),
391
396
  React.createElement("div", { className: "h-auto mr-[4px] text-[13px] text-[#464647]" },
392
397
  React.createElement("span", null, translation === null || translation === void 0 ? void 0 : translation.flexible))),
393
- React.createElement("div", { className: "hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[230px] text-center break-normal shadow-service text-[12px]", style: { backgroundColor: colors.tooltipColor } },
398
+ React.createElement("div", { className: "hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[230px] text-center break-normal shadow-service text-[12px]", style: {
399
+ backgroundColor: colors.tooltipColor,
400
+ lineHeight: "1.2",
401
+ } },
394
402
  React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent ", style: { borderBottomColor: colors.tooltipColor } }),
395
403
  "Esta empresa permite cambios sin costo hasta (", (_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.change_ticket_hours) !== null && _c !== void 0 ? _c : 6,
396
404
  ") horas antes del viaje.")))),
@@ -419,7 +427,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
419
427
  getAmenityName((_d = metaData.amenities[val]) === null || _d === void 0 ? void 0 : _d.split(".")[0].split("_").join(" ")))))) : null;
420
428
  }),
421
429
  ((_e = serviceItem.operator_details[4]) === null || _e === void 0 ? void 0 : _e.length) > 3 && (React.createElement("div", { className: "relative ml-1 cursor-pointer" },
422
- React.createElement("div", { className: "w-[16px] h-[16px] bg-gray-200 rounded-full flex items-center justify-center text-sm font-bold ml-[5px] group" },
430
+ React.createElement("div", { className: "w-[16px] h-[16px] bg-gray-200 rounded-full flex justify-center text-sm font-bold ml-[5px] group", style: { alignItems: "flex-end", marginTop: "5px" } },
423
431
  React.createElement("img", { src: ((_f = serviceItem.icons) === null || _f === void 0 ? void 0 : _f.plus) ||
424
432
  "/images/icons/amenities/icon_plus.svg", className: "w-[16px] h-[16px]", alt: "plus" }),
425
433
  React.createElement("div", { className: "hidden group-hover:block absolute -top-[13px] left-[40px] z-20 pl-[10px]" },
@@ -448,7 +456,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
448
456
  } },
449
457
  React.createElement(LottiePlayer, { animationData: serviceItem.icons.promoAnim, width: "18px", height: "18px" }),
450
458
  React.createElement("span", { className: "ml-[10px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))),
451
- React.createElement("div", { className: "absolute -top-[13px] left-0 w-full flex items-center justify-end gap-[12px] pr-[28px] z-10 " },
459
+ React.createElement("div", { className: "absolute -top-[13px] left-0 w-full flex items-center justify-end gap-[12px] pr-[15px] z-10 " },
452
460
  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 } },
453
461
  React.createElement("div", { className: isSoldOut ? "grayscale" : "" },
454
462
  React.createElement(LottiePlayer, { animationData: serviceItem.icons.priorityStageAnim, width: "16px", height: "16px" })),
package/dist/styles.css CHANGED
@@ -78,12 +78,12 @@
78
78
  .left-\[36\%\] {
79
79
  left: 36%;
80
80
  }
81
+ .left-\[40\%\] {
82
+ left: 40%;
83
+ }
81
84
  .left-\[40px\] {
82
85
  left: 40px;
83
86
  }
84
- .left-\[48\%\] {
85
- left: 48%;
86
- }
87
87
  .left-\[50\%\] {
88
88
  left: 50%;
89
89
  }
@@ -228,6 +228,9 @@
228
228
  .ml-\[10px\] {
229
229
  margin-left: 10px;
230
230
  }
231
+ .ml-\[20\%\] {
232
+ margin-left: 20%;
233
+ }
231
234
  .ml-\[25px\] {
232
235
  margin-left: 25px;
233
236
  }
@@ -633,6 +636,9 @@
633
636
  .pt-\[5px\] {
634
637
  padding-top: 5px;
635
638
  }
639
+ .pt-\[8px\] {
640
+ padding-top: 8px;
641
+ }
636
642
  .pt-\[12px\] {
637
643
  padding-top: 12px;
638
644
  }
@@ -651,9 +657,6 @@
651
657
  .pr-\[20px\] {
652
658
  padding-right: 20px;
653
659
  }
654
- .pr-\[28px\] {
655
- padding-right: 28px;
656
- }
657
660
  .pb-\[5px\] {
658
661
  padding-bottom: 5px;
659
662
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "2.0.6",
3
+ "version": "2.0.8",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -403,7 +403,7 @@ function ServiceItemPB({
403
403
  return (
404
404
  <div
405
405
  className={`relative ${
406
- serviceItem.offer_text ? "mb-[60px]" : "mb-[20px]"
406
+ serviceItem.offer_text ? "mb-[60px]" : "mb-[10px]"
407
407
  } ${
408
408
  serviceItem?.is_direct_trip ||
409
409
  serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
@@ -413,9 +413,7 @@ function ServiceItemPB({
413
413
  } `}
414
414
  >
415
415
  <div
416
- className={
417
- "bg-white rounded-[20px] shadow-service mb-[10px] mx-auto relative"
418
- }
416
+ className={"bg-white rounded-[20px] shadow-service mx-auto relative"}
419
417
  >
420
418
  <div className="p-[15px]">
421
419
  {/* Header with operator info and favorite */}
@@ -443,7 +441,10 @@ function ServiceItemPB({
443
441
  </div> */}
444
442
 
445
443
  {/* <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]"> */}
446
- <div className="grid text-[#464647] w-full [grid-template-columns:12%_28%_minmax(0,0.2fr)_29%_15%] gap-x-[4%] items-center">
444
+ <div
445
+ className="grid text-[#464647] w-full [grid-template-columns:12%_28%_minmax(0,0.2fr)_29%_15%] gap-x-[4%] items-center"
446
+ style={{ marginTop: showTopLabel ? "8px" : "" }}
447
+ >
447
448
  {/* OPERATOR LOGO */}
448
449
  <div className="flex items-center justify-center m-[auto]">
449
450
  <div className=" ">
@@ -479,16 +480,16 @@ function ServiceItemPB({
479
480
  <div className="w-[60px]">{orignLabel}</div>
480
481
  ) : (
481
482
  <div
482
- className=" h-auto mr-[8px]"
483
+ className="w-[18px] h-auto mr-[8px]"
483
484
  style={{ width: originIconStyle ? "16px" : "18px" }}
484
485
  >
485
486
  <img
486
487
  src={serviceItem.icons?.origin}
487
488
  alt="origin"
488
- className={` h-auto mr-[8px] ${
489
+ className={`w-[18px] h-auto mr-[8px] ${
489
490
  isSoldOut ? "grayscale" : ""
490
491
  }`}
491
- style={{ width: originIconStyle ? "16px" : "18px" }}
492
+ // style={{ width: originIconStyle ? "16px" : "18px" }}
492
493
  />
493
494
  </div>
494
495
  )}
@@ -502,78 +503,37 @@ function ServiceItemPB({
502
503
  {DateService.getServiceItemDate(serviceItem.travel_date)}
503
504
  </span>
504
505
 
505
- <div className="absolute left-[48%]">•</div>
506
- <div className="font-[900] bold-text group relative">
507
- {DateService.formatTime(serviceItem.dep_time)}
506
+ <div className="absolute left-[40%] flex items-center w-[60%]">
507
+ <div>•</div>
508
+ <div className="font-[900] bold-text group relative ml-[20%]">
509
+ {DateService.formatTime(serviceItem.dep_time)}
508
510
 
509
- {serviceItem.boarding_stages && (
510
- <div
511
- 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"
512
- style={{ backgroundColor: colors?.tooltipColor }}
513
- >
511
+ {serviceItem.boarding_stages && (
514
512
  <div
515
- className="tooltip-arrow absolute top-2 -left-[7px] w-0 h-0
513
+ 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"
514
+ style={{ backgroundColor: colors?.tooltipColor }}
515
+ >
516
+ <div
517
+ className="tooltip-arrow absolute top-2 -left-[7px] w-0 h-0
516
518
  border-t-8 border-b-8 border-r-8
517
519
  border-t-transparent border-b-transparent"
518
- style={{ borderRightColor: colors?.tooltipColor }}
519
- ></div>
520
- <div className="text-center text-[14px]">
521
- {renderStages(
522
- serviceItem.boarding_stages,
523
- 1,
524
- busStage,
525
- hideBoardingTime(
526
- serviceItem?.api_type || serviceItem?.apiType
527
- )
528
- )}
520
+ style={{ borderRightColor: colors?.tooltipColor }}
521
+ ></div>
522
+ <div className="text-center text-[14px]">
523
+ {renderStages(
524
+ serviceItem.boarding_stages,
525
+ 1,
526
+ busStage,
527
+ hideBoardingTime(
528
+ serviceItem?.api_type || serviceItem?.apiType
529
+ )
530
+ )}
531
+ </div>
529
532
  </div>
530
- </div>
531
- )}
532
- </div>
533
- </div>
534
- {/* <div
535
- className="flex items-center capitalize group relative items-center justify-between "
536
- style={{ flex: 1 }}
537
- >
538
- <div className="relative group">
539
- <span className="cursor-pointer bold-text">
540
- {DateService.getServiceItemDate(
541
- serviceItem.travel_date
542
533
  )}
543
- </span>
544
-
545
- {serviceItem.boarding_stages && (
546
- <div
547
- className="hidden group-hover:block absolute -top-[8px] left-[100%] ml-[25px]
548
- text-white px-3 py-2 rounded-[10px] whitespace-nowrap
549
- z-10 shadow-service"
550
- style={{ backgroundColor: colors?.tooltipColor }}
551
- >
552
- <div
553
- className="tooltip-arrow absolute top-2 -left-[7px] w-0 h-0
554
- border-t-8 border-b-8 border-r-8
555
- border-t-transparent border-b-transparent"
556
- style={{ borderRightColor: colors?.tooltipColor }}
557
- ></div>
558
- <div className="text-center text-[14px]">
559
- {renderStages(
560
- serviceItem.boarding_stages,
561
- 1,
562
- busStage,
563
- hideBoardingTime(
564
- serviceItem?.api_type || serviceItem?.apiType
565
- )
566
- )}
567
- </div>
568
- </div>
569
- )}
570
- </div>
571
-
572
- <div className="absolute left-[50%]">•</div>
573
- <div className="font-[900] relative bold-text">
574
- {DateService.formatTime(serviceItem.dep_time)}
534
+ </div>
575
535
  </div>
576
- </div> */}
536
+ </div>
577
537
  </div>
578
538
  </div>
579
539
  {isCiva ? null : (
@@ -608,41 +568,46 @@ function ServiceItemPB({
608
568
  )}
609
569
  </span>
610
570
 
611
- {removeArrivalTime ? null : serviceItem.arr_time ? (
612
- <div className="absolute left-[48%]">•</div>
613
- ) : null}
614
- <div className="font-[900] bold-text group relative">
615
- {removeArrivalTime
616
- ? null
617
- : serviceItem.arr_time
618
- ? DateService.formatTime(serviceItem.arr_time)
619
- : null}
571
+ <div className="absolute left-[40%] flex items-center w-[60%]">
572
+ {removeArrivalTime ? null : serviceItem.arr_time ? (
573
+ <div>•</div>
574
+ ) : null}
575
+ <div className="font-[900] bold-text group relative ml-[20%]">
576
+ {removeArrivalTime
577
+ ? null
578
+ : serviceItem.arr_time
579
+ ? DateService.formatTime(serviceItem.arr_time)
580
+ : null}
620
581
 
621
- {/* Dropping stage tooltip */}
622
- {serviceItem.dropoff_stages && (
623
- <div
624
- 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"
625
- style={{ backgroundColor: colors?.tooltipColor }}
626
- >
627
- {/* Tooltip arrow */}
582
+ {/* Dropping stage tooltip */}
583
+ {serviceItem.dropoff_stages && (
628
584
  <div
629
- className="tooltip-arrow absolute top-2 -left-[7px] w-0 h-0
585
+ 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"
586
+ style={{ backgroundColor: colors?.tooltipColor }}
587
+ >
588
+ {/* Tooltip arrow */}
589
+ <div
590
+ className="tooltip-arrow absolute top-2 -left-[7px] w-0 h-0
630
591
  border-t-8 border-b-8 border-r-8
631
592
  border-t-transparent border-b-transparent"
632
- style={{ borderRightColor: colors?.tooltipColor }}
633
- ></div>
634
- <div className="text-center text-[14px]">
635
- {renderStages(
636
- serviceItem.dropoff_stages,
637
- 2,
638
- busStage,
639
- hideBoardingTime(
640
- serviceItem?.api_type || serviceItem?.apiType
641
- )
642
- )}
593
+ style={{
594
+ borderRightColor: colors?.tooltipColor,
595
+ }}
596
+ ></div>
597
+ <div className="text-center text-[14px]">
598
+ {renderStages(
599
+ serviceItem.dropoff_stages,
600
+ 2,
601
+ busStage,
602
+ hideBoardingTime(
603
+ serviceItem?.api_type ||
604
+ serviceItem?.apiType
605
+ )
606
+ )}
607
+ </div>
643
608
  </div>
644
- </div>
645
- )}
609
+ )}
610
+ </div>
646
611
  </div>
647
612
  </div>
648
613
  </div>
@@ -674,7 +639,7 @@ function ServiceItemPB({
674
639
  color: isSoldOut ? "#c0c0c0" : colors.seatPriceColor,
675
640
  top: 0,
676
641
  bottom: 0,
677
- left: "60%",
642
+ left: "70%",
678
643
  right: 0,
679
644
  justifyContent: getNumberOfSeats() < 2 ? "center" : "",
680
645
  }}
@@ -729,7 +694,7 @@ function ServiceItemPB({
729
694
  ) : null}
730
695
 
731
696
  <div
732
- className={`${"flex justify-between items-center mt-[15px] items-center border-t border-[#eee] mt-[15px] pt-[12px]"}`}
697
+ className={`${"flex justify-between items-center mt-[15px] items-center border-t border-[#eee] mt-[15px] pt-[8px]"}`}
733
698
  >
734
699
  {/* Rating */}
735
700
  <div>
@@ -750,7 +715,7 @@ function ServiceItemPB({
750
715
  />
751
716
  ) : null}
752
717
  <span
753
- className="ml-[10px] text-[#464647] text-[13.33px]"
718
+ className="ml-[10px] text-[#464647] text-[13.33px] bold-text"
754
719
  style={{ marginLeft: showRating ? "10px" : "0" }}
755
720
  >
756
721
  {serviceItem.operator_details[2]}
@@ -840,7 +805,10 @@ function ServiceItemPB({
840
805
  </div>
841
806
  <div
842
807
  className="hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[230px] text-center break-normal shadow-service text-[12px]"
843
- style={{ backgroundColor: colors.tooltipColor }}
808
+ style={{
809
+ backgroundColor: colors.tooltipColor,
810
+ lineHeight: "1.2",
811
+ }}
844
812
  >
845
813
  {/* Tooltip arrow */}
846
814
  <div
@@ -926,7 +894,10 @@ function ServiceItemPB({
926
894
  {/* Plus icon for more amenities */}
927
895
  {serviceItem.operator_details[4]?.length > 3 && (
928
896
  <div className="relative ml-1 cursor-pointer">
929
- <div className="w-[16px] h-[16px] bg-gray-200 rounded-full flex items-center justify-center text-sm font-bold ml-[5px] group">
897
+ <div
898
+ className="w-[16px] h-[16px] bg-gray-200 rounded-full flex justify-center text-sm font-bold ml-[5px] group"
899
+ style={{ alignItems: "flex-end", marginTop: "5px" }}
900
+ >
930
901
  <img
931
902
  src={
932
903
  serviceItem.icons?.plus ||
@@ -1024,7 +995,7 @@ function ServiceItemPB({
1024
995
  </div>
1025
996
  )}
1026
997
 
1027
- <div className="absolute -top-[13px] left-0 w-full flex items-center justify-end gap-[12px] pr-[28px] z-10 ">
998
+ <div className="absolute -top-[13px] left-0 w-full flex items-center justify-end gap-[12px] pr-[15px] z-10 ">
1028
999
  {showTopLabel && (
1029
1000
  <div
1030
1001
  className={`flex items-center gap-[10px] py-[5px] px-[14px] rounded-[38px] text-[13.33px] z-20`}