kupos-ui-components-lib 2.0.9 → 2.0.11

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 (6) hide show
  1. package/dist/components/ServiceItem/ServiceItemDesktop.js +11 -13
  2. package/dist/components/ServiceItem/ServiceItemMobile.js +3 -5
  3. package/dist/styles.css +2 -2
  4. package/package.json +1 -1
  5. package/src/components/ServiceItem/ServiceItemDesktop.tsx +51 -61
  6. package/src/components/ServiceItem/ServiceItemMobile.tsx +3 -5
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -298,10 +298,9 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
298
298
  React.createElement("div", { className: "min-h-[2.5rem] flex flex-col gap-[10px]", style: { justifyContent: isCiva ? "center" : "space-between" } },
299
299
  React.createElement("div", { className: `flex items-center text-[13.33px] justify-between relative ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
300
300
  React.createElement("div", { className: "flex items-center", style: { flex: 1 } },
301
- React.createElement("div", null,
302
- " ",
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" : ""}` })))),
301
+ " ",
302
+ orignLabel ? (React.createElement("div", { className: "w-[60px]" }, orignLabel)) : (React.createElement("div", null,
303
+ 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
304
  React.createElement("div", { className: "flex items-center capitalize relative group items-center justify-between ", style: { flex: 1 } },
306
305
  React.createElement("span", { className: "cursor-pointer bold-text" }, DateService.getServiceItemDate(serviceItem.travel_date)),
307
306
  React.createElement("div", { className: "absolute left-[40%] flex items-center w-[60%]" },
@@ -313,8 +312,8 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
313
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))))))))))),
314
313
  isCiva ? null : (React.createElement("div", { className: `flex items-center text-[13.33px] justify-between relative ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
315
314
  React.createElement("div", { className: "flex items-center", style: { flex: 1 } },
316
- React.createElement("div", null, destinationLabel ? (React.createElement("div", { className: "w-[60px]" }, destinationLabel)) : (React.createElement("div", { className: "w-[18px] h-auto mr-[8px]" },
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 } })))),
315
+ destinationLabel ? (React.createElement("div", { className: "w-[60px]" }, destinationLabel)) : (React.createElement("div", null,
316
+ 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 } }))),
318
317
  React.createElement("div", { className: "flex items-center capitalize relative group items-center justify-between ", style: { flex: 1 } },
319
318
  React.createElement("span", { className: "cursor-pointer bold-text" }, DateService.getServiceItemDate(serviceItem.arrival_date)),
320
319
  React.createElement("div", { className: "absolute left-[40%] flex items-center w-[60%]" },
@@ -362,12 +361,11 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
362
361
  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))))),
363
362
  showLastSeats ? (React.createElement("div", { className: "flex justify-end mr-[11px]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
364
363
  (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,
365
- React.createElement("div", { className: `${"flex justify-between items-center mt-[15px] items-center border-t border-[#eee] mt-[15px] pt-[8px]"}` },
366
- React.createElement("div", null,
367
- React.createElement("div", { className: "flex items-center " },
368
- React.createElement("div", { className: `flex items-center ${isSoldOut ? "grayscale" : ""} ${showRating ? "cursor-pointer" : ""}`, style: { color: isSoldOut ? "#c0c0c0" : "" } },
369
- showRating ? (React.createElement(RatingHover, { serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation })) : null,
370
- React.createElement("span", { className: "ml-[10px] text-[#464647] text-[13.33px] bold-text", style: { marginLeft: showRating ? "10px" : "0" } }, serviceItem.operator_details[2])))),
364
+ React.createElement("div", { className: `${"flex justify-between items-center mt-[15px] items-center border-t border-[#eee] mt-[15px] pt-[10px]"}` },
365
+ React.createElement("div", { className: "flex items-center " },
366
+ React.createElement("div", { className: `flex items-center ${isSoldOut ? "grayscale" : ""} ${showRating ? "cursor-pointer" : ""}`, style: { color: isSoldOut ? "#c0c0c0" : "" } },
367
+ showRating ? (React.createElement(RatingHover, { serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation })) : null,
368
+ React.createElement("span", { className: "ml-[10px] text-[#464647] text-[13.33px] bold-text", style: { marginLeft: showRating ? "10px" : "0" } }, serviceItem.operator_details[2]))),
371
369
  serviceItem.duration && (React.createElement("div", { className: "flex items-baseline relative text-[#464647]" },
372
370
  React.createElement("div", { className: `w-[18px] h-auto mr-[4px] ${isSoldOut ? "grayscale" : ""}` }, renderIcon("hours", "14px")),
373
371
  React.createElement("div", { className: `cursor-default group text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
@@ -397,7 +395,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
397
395
  React.createElement("span", null, translation === null || translation === void 0 ? void 0 : translation.flexible))),
398
396
  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
397
  backgroundColor: colors.tooltipColor,
400
- lineHeight: "1.2",
398
+ lineHeight: "1.5",
401
399
  } },
402
400
  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 } }),
403
401
  "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,
package/dist/components/ServiceItem/ServiceItemMobile.js CHANGED
@@ -134,14 +134,12 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
134
134
  if (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) {
135
135
  isConexion = true;
136
136
  }
137
- return (React.createElement("div", { className: `relative ${serviceItem.offer_text || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip)
138
- ? "mb-[60px]"
139
- : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
137
+ return (React.createElement("div", { className: `relative ${serviceItem.offer_text ? "mb-[55px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
140
138
  isConexion ||
141
139
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
142
140
  showTopLabel
143
- ? "mt-[30px]"
144
- : "mt-[20px]"} `, style: { backgroundColor: "#fff", zIndex: 1 } },
141
+ ? "mt-[20px]"
142
+ : "mt-[10px]"} `, style: { backgroundColor: "#fff", zIndex: 1 } },
145
143
  React.createElement("div", { className: "border border-[#E6E6E6] rounded-[20px]", style: { backgroundColor: "#fff", zIndex: 1 } },
146
144
  React.createElement("div", { className: `p-[15px] ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
147
145
  showTopLabel ||
package/dist/styles.css CHANGED
@@ -639,8 +639,8 @@
639
639
  .pt-\[5px\] {
640
640
  padding-top: 5px;
641
641
  }
642
- .pt-\[8px\] {
643
- padding-top: 8px;
642
+ .pt-\[10px\] {
643
+ padding-top: 10px;
644
644
  }
645
645
  .pt-\[12px\] {
646
646
  padding-top: 12px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "2.0.9",
3
+ "version": "2.0.11",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -474,27 +474,21 @@ function ServiceItemPB({
474
474
  }`}
475
475
  >
476
476
  <div className="flex items-center" style={{ flex: 1 }}>
477
- <div>
478
- {" "}
479
- {orignLabel ? (
480
- <div className="w-[60px]">{orignLabel}</div>
481
- ) : (
482
- <div
483
- className="w-[18px] h-auto mr-[8px]"
484
- style={{ width: originIconStyle ? "16px" : "18px" }}
485
- >
486
- <img
487
- src={serviceItem.icons?.origin}
488
- alt="origin"
489
- className={`w-[18px] h-auto mr-[8px] ${
490
- isSoldOut ? "grayscale" : ""
491
- }`}
492
- // style={{ width: originIconStyle ? "16px" : "18px" }}
493
- />
494
- </div>
495
- )}
496
- </div>
497
-
477
+ {" "}
478
+ {orignLabel ? (
479
+ <div className="w-[60px]">{orignLabel}</div>
480
+ ) : (
481
+ <div>
482
+ <img
483
+ src={serviceItem.icons?.origin}
484
+ alt="origin"
485
+ className={`w-[18px] h-auto mr-[8px] ${
486
+ isSoldOut ? "grayscale" : ""
487
+ }`}
488
+ // style={{ width: originIconStyle ? "16px" : "18px" }}
489
+ />
490
+ </div>
491
+ )}
498
492
  <div
499
493
  className="flex items-center capitalize relative group items-center justify-between "
500
494
  style={{ flex: 1 }}
@@ -543,21 +537,19 @@ function ServiceItemPB({
543
537
  }`}
544
538
  >
545
539
  <div className="flex items-center" style={{ flex: 1 }}>
546
- <div>
547
- {destinationLabel ? (
548
- <div className="w-[60px]">{destinationLabel}</div>
549
- ) : (
550
- <div className="w-[18px] h-auto mr-[8px]">
551
- <img
552
- src={serviceItem.icons?.destination}
553
- className={`w-[18px] h-auto mr-[8px] ${
554
- isSoldOut ? "grayscale" : ""
555
- }`}
556
- style={{ opacity: isSoldOut ? 0.5 : 1 }}
557
- />
558
- </div>
559
- )}
560
- </div>
540
+ {destinationLabel ? (
541
+ <div className="w-[60px]">{destinationLabel}</div>
542
+ ) : (
543
+ <div>
544
+ <img
545
+ src={serviceItem.icons?.destination}
546
+ className={`w-[18px] h-auto mr-[8px] ${
547
+ isSoldOut ? "grayscale" : ""
548
+ }`}
549
+ style={{ opacity: isSoldOut ? 0.5 : 1 }}
550
+ />
551
+ </div>
552
+ )}
561
553
  <div
562
554
  className="flex items-center capitalize relative group items-center justify-between "
563
555
  style={{ flex: 1 }}
@@ -694,33 +686,31 @@ function ServiceItemPB({
694
686
  ) : null}
695
687
 
696
688
  <div
697
- className={`${"flex justify-between items-center mt-[15px] items-center border-t border-[#eee] mt-[15px] pt-[8px]"}`}
689
+ className={`${"flex justify-between items-center mt-[15px] items-center border-t border-[#eee] mt-[15px] pt-[10px]"}`}
698
690
  >
699
691
  {/* Rating */}
700
- <div>
701
- <div className="flex items-center ">
702
- <div
703
- className={`flex items-center ${
704
- isSoldOut ? "grayscale" : ""
705
- } ${showRating ? "cursor-pointer" : ""}`}
706
- style={{ color: isSoldOut ? "#c0c0c0" : "" }}
692
+ <div className="flex items-center ">
693
+ <div
694
+ className={`flex items-center ${isSoldOut ? "grayscale" : ""} ${
695
+ showRating ? "cursor-pointer" : ""
696
+ }`}
697
+ style={{ color: isSoldOut ? "#c0c0c0" : "" }}
698
+ >
699
+ {showRating ? (
700
+ <RatingHover
701
+ serviceItem={serviceItem}
702
+ isSoldOut={isSoldOut}
703
+ colors={colors}
704
+ t={t}
705
+ translation={translation}
706
+ />
707
+ ) : null}
708
+ <span
709
+ className="ml-[10px] text-[#464647] text-[13.33px] bold-text"
710
+ style={{ marginLeft: showRating ? "10px" : "0" }}
707
711
  >
708
- {showRating ? (
709
- <RatingHover
710
- serviceItem={serviceItem}
711
- isSoldOut={isSoldOut}
712
- colors={colors}
713
- t={t}
714
- translation={translation}
715
- />
716
- ) : null}
717
- <span
718
- className="ml-[10px] text-[#464647] text-[13.33px] bold-text"
719
- style={{ marginLeft: showRating ? "10px" : "0" }}
720
- >
721
- {serviceItem.operator_details[2]}
722
- </span>
723
- </div>
712
+ {serviceItem.operator_details[2]}
713
+ </span>
724
714
  </div>
725
715
  </div>
726
716
 
@@ -807,7 +797,7 @@ function ServiceItemPB({
807
797
  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]"
808
798
  style={{
809
799
  backgroundColor: colors.tooltipColor,
810
- lineHeight: "1.2",
800
+ lineHeight: "1.5",
811
801
  }}
812
802
  >
813
803
  {/* Tooltip arrow */}
package/src/components/ServiceItem/ServiceItemMobile.tsx CHANGED
@@ -198,16 +198,14 @@ function ServiceItemMobile({
198
198
  return (
199
199
  <div
200
200
  className={`relative ${
201
- serviceItem.offer_text || serviceItem?.is_direct_trip
202
- ? "mb-[60px]"
203
- : "mb-[20px]"
201
+ serviceItem.offer_text ? "mb-[55px]" : "mb-[20px]"
204
202
  } ${
205
203
  serviceItem?.is_direct_trip ||
206
204
  isConexion ||
207
205
  serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
208
206
  showTopLabel
209
- ? "mt-[30px]"
210
- : "mt-[20px]"
207
+ ? "mt-[20px]"
208
+ : "mt-[10px]"
211
209
  } `}
212
210
  style={{ backgroundColor: "#fff", zIndex: 1 }}
213
211
  >