kupos-ui-components-lib 7.0.1 → 7.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 (13) hide show
  1. package/dist/components/ServiceItem/PeruServiceItemDesktop.js +1 -1
  2. package/dist/components/ServiceItem/RatingHover.js +13 -10
  3. package/dist/components/ServiceItem/RatingItem.d.ts +1 -0
  4. package/dist/components/ServiceItem/RatingItem.js +2 -2
  5. package/dist/components/ServiceItem/ServiceItemDesktop.js +7 -2
  6. package/dist/components/ServiceItem/ServiceItemMobile.js +13 -12
  7. package/dist/styles.css +6 -5
  8. package/package.json +1 -1
  9. package/src/components/ServiceItem/PeruServiceItemDesktop.tsx +3 -3
  10. package/src/components/ServiceItem/RatingHover.tsx +16 -6
  11. package/src/components/ServiceItem/RatingItem.tsx +10 -2
  12. package/src/components/ServiceItem/ServiceItemDesktop.tsx +11 -6
  13. package/src/components/ServiceItem/ServiceItemMobile.tsx +14 -13
package/dist/components/ServiceItem/PeruServiceItemDesktop.js CHANGED
@@ -583,7 +583,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
583
583
  serviceItem.available_seats,
584
584
  " ",
585
585
  "Asientos restantes")) : (React.createElement("div", { className: "flex items-center " },
586
- React.createElement("div", { className: `flex items-center ${isSoldOut ? "grayscale" : ""} ${showRating ? "cursor-pointer" : ""}`, style: { color: isSoldOut ? "#c0c0c0" : "" } },
586
+ React.createElement("div", { className: `flex items-center ${showRating ? "cursor-pointer" : ""}`, style: { color: isSoldOut ? "#c0c0c0" : "" } },
587
587
  showRating ? (React.createElement(RatingHover, { serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation })) : null,
588
588
  React.createElement("span", { className: "ml-[10px] text-[#464647] text-[13.33px]", style: { marginLeft: showRating ? "10px" : "0" } }, serviceItem.operator_details[2])))),
589
589
  serviceItem.duration && (React.createElement("div", { className: "flex items-baseline relative text-[#464647]" },
package/dist/components/ServiceItem/RatingHover.js CHANGED
@@ -13,12 +13,14 @@ const RatingHover = ({ serviceItem, isSoldOut, colors, t = (key) => key, transla
13
13
  tooltip.style.display = "none";
14
14
  } }),
15
15
  React.createElement("div", { className: "hidden group-hover:block absolute left-[80px] -bottom-[160px] z-20 mt-2 w-[280px] rounded-lg shadow-service-2 bg-white overflow-hidden rounded-[14px] border-[2px]", style: {
16
- borderColor: colors.ratingBorderColor,
16
+ borderColor: isSoldOut ? "#c0c0c0" : colors.ratingBorderColor,
17
17
  color: isSoldOut ? "#c0c0c0" : "",
18
18
  } },
19
- React.createElement("div", { className: "pt-[20px] text-center" },
20
- React.createElement("div", { className: "text-[12px] bold-text text-[#464647]" }, translation === null || translation === void 0 ? void 0 : translation.ratingMouseOverText),
21
- React.createElement("div", { className: "text-[12px] font-light text-[#464647]" }, serviceItem.operator_service_name)),
19
+ React.createElement("div", { className: "pt-[20px] text-center", style: {
20
+ color: isSoldOut ? "#c0c0c0" : "#464647",
21
+ } },
22
+ React.createElement("div", { className: "text-[12px] bold-text" }, translation === null || translation === void 0 ? void 0 : translation.ratingMouseOverText),
23
+ React.createElement("div", { className: "text-[12px] font-light" }, serviceItem.operator_service_name)),
22
24
  React.createElement("div", { className: "px-3 py-2 flex flex-col gap-[10px] font9" },
23
25
  React.createElement(RatingItem, { rating: serviceItem.operator_details[6] &&
24
26
  serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
@@ -27,7 +29,7 @@ const RatingHover = ({ serviceItem, isSoldOut, colors, t = (key) => key, transla
27
29
  serviceItem.operator_details[6])[0]]).toFixed(1)
28
30
  ? +parseFloat(serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
29
31
  serviceItem.operator_details[6])[0]]).toFixed(1)
30
- : 0, label: translation === null || translation === void 0 ? void 0 : translation.busQuality }),
32
+ : 0, label: translation === null || translation === void 0 ? void 0 : translation.busQuality, isSoldOut: isSoldOut }),
31
33
  React.createElement(RatingItem, { rating: serviceItem.operator_details[6] &&
32
34
  serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
33
35
  serviceItem.operator_details[6])[1]] &&
@@ -35,7 +37,7 @@ const RatingHover = ({ serviceItem, isSoldOut, colors, t = (key) => key, transla
35
37
  serviceItem.operator_details[6])[1]]).toFixed(1)
36
38
  ? +parseFloat(serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
37
39
  serviceItem.operator_details[6])[1]]).toFixed(1)
38
- : 0, label: translation === null || translation === void 0 ? void 0 : translation.punctuality }),
40
+ : 0, label: translation === null || translation === void 0 ? void 0 : translation.punctuality, isSoldOut: isSoldOut }),
39
41
  React.createElement(RatingItem, { rating: serviceItem.operator_details[6] &&
40
42
  serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
41
43
  serviceItem.operator_details[6])[2]] &&
@@ -43,7 +45,7 @@ const RatingHover = ({ serviceItem, isSoldOut, colors, t = (key) => key, transla
43
45
  serviceItem.operator_details[6])[2]]).toFixed(1)
44
46
  ? +parseFloat(serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
45
47
  serviceItem.operator_details[6])[2]]).toFixed(1)
46
- : 0, label: translation === null || translation === void 0 ? void 0 : translation.serviceQuality }),
48
+ : 0, label: translation === null || translation === void 0 ? void 0 : translation.serviceQuality, isSoldOut: isSoldOut }),
47
49
  React.createElement(RatingItem, { rating: serviceItem.operator_details[6] &&
48
50
  serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
49
51
  serviceItem.operator_details[6])[3]] &&
@@ -51,9 +53,10 @@ const RatingHover = ({ serviceItem, isSoldOut, colors, t = (key) => key, transla
51
53
  serviceItem.operator_details[6])[3]]).toFixed(1)
52
54
  ? +parseFloat(serviceItem.operator_details[6][Object.keys(serviceItem.operator_details[6] &&
53
55
  serviceItem.operator_details[6])[3]]).toFixed(1)
54
- : 0, label: translation === null || translation === void 0 ? void 0 : translation.serviceRecommendation })),
55
- React.createElement("div", { className: "px-1 py-2 text-center text-[12px] text-[#ff8f45] font9", style: {
56
- backgroundColor: colors.ratingBottomColor,
56
+ : 0, label: translation === null || translation === void 0 ? void 0 : translation.serviceRecommendation, isSoldOut: isSoldOut })),
57
+ React.createElement("div", { className: "px-1 py-2 text-center text-[12px] font9", style: {
58
+ backgroundColor: isSoldOut ? "#f5f5f5" : colors.ratingBottomColor,
59
+ color: isSoldOut ? "#c0c0c1" : "#ff8f45",
57
60
  } }, `${translation === null || translation === void 0 ? void 0 : translation.ratingMouseOverCalculationText} ${Object.values(serviceItem.operator_details)[5]} ${translation === null || translation === void 0 ? void 0 : translation.ratingMouseOverCalculationUsers}`))),
58
61
  React.createElement("span", { className: "text-[#464647] text-[13.33px]" }, typeof serviceItem.operator_details[1] === "number"
59
62
  ? serviceItem.operator_details[1].toFixed(1)
package/dist/components/ServiceItem/RatingItem.d.ts CHANGED
@@ -2,6 +2,7 @@ import React from "react";
2
2
  interface RatingItemProps {
3
3
  rating: number;
4
4
  label: string;
5
+ isSoldOut?: boolean;
5
6
  }
6
7
  declare const RatingItem: React.FC<RatingItemProps>;
7
8
  export default RatingItem;
package/dist/components/ServiceItem/RatingItem.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- const RatingItem = ({ rating, label }) => {
2
+ const RatingItem = ({ rating, label, isSoldOut, }) => {
3
3
  // Calculate percentage for styling
4
4
  const percentage = ((rating / 5) * 100).toFixed(0);
5
5
  // Determine color based on rating percentage
@@ -14,7 +14,7 @@ const RatingItem = ({ rating, label }) => {
14
14
  return "green";
15
15
  };
16
16
  const colorClass = getColorClass();
17
- return (React.createElement("div", { className: "rating_item flex items-center mb-2" },
17
+ return (React.createElement("div", { className: "rating_item flex items-center mb-2", style: { opacity: isSoldOut ? 0.5 : 1 } },
18
18
  React.createElement("div", { className: "rating_circle relative" },
19
19
  React.createElement("div", { className: `c100 small p${percentage} ${colorClass}` },
20
20
  React.createElement("span", { className: "text-[#464647] font-medium text-[12px]" }, rating.toFixed(1)),
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -599,9 +599,14 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
599
599
  (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,
600
600
  React.createElement("div", { className: `${"flex justify-between items-center mt-[15px] items-center border-t border-[#eee] mt-[15px] pt-[10px]"}` },
601
601
  React.createElement("div", { className: "flex items-center " },
602
- React.createElement("div", { className: `flex items-center ${isSoldOut ? "grayscale" : ""} ${showRating ? "cursor-pointer" : ""}`, style: { color: isSoldOut ? "#c0c0c0" : "" } },
602
+ React.createElement("div", { className: `flex items-center ${showRating ? "cursor-pointer" : ""}`, style: {
603
+ color: isSoldOut ? "#c0c0c0" : "",
604
+ } },
603
605
  showRating ? (React.createElement(RatingHover, { serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation })) : null,
604
- React.createElement("span", { className: "ml-[10px] text-[#464647] text-[13.33px]", style: { marginLeft: showRating ? "10px" : "0" } }, serviceItem.operator_details[2]))),
606
+ React.createElement("span", { className: "ml-[10px] text-[13.33px]", style: {
607
+ marginLeft: showRating ? "10px" : "0",
608
+ color: isSoldOut ? "#c0c0c0" : "#464647",
609
+ } }, serviceItem.operator_details[2]))),
605
610
  serviceItem.duration && (React.createElement("div", { className: "flex items-baseline relative text-[#464647]" },
606
611
  React.createElement("div", { className: `w-[18px] h-auto mr-[4px] ${isSoldOut ? "grayscale" : ""}` }, renderIcon("hours", "14px")),
607
612
  React.createElement("div", { className: `cursor-default group text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
package/dist/components/ServiceItem/ServiceItemMobile.js CHANGED
@@ -43,11 +43,11 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
43
43
  return exceptions.includes(type.label) ? null : (React.createElement("div", { className: ((_a = serviceItem.seat_types) === null || _a === void 0 ? void 0 : _a.length) > 2
44
44
  ? "w-[100%] flex flex-row justify-between "
45
45
  : "w-[100%] flex flex-row justify-between items-center", key: i },
46
- React.createElement("span", { className: "min-[420]:text-[13px] text-[11px] ", style: {
46
+ React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] ", style: {
47
47
  // marginLeft: "10px",
48
48
  color: isSoldOut ? "#bbb" : "#464647",
49
49
  } }, type.label),
50
- React.createElement("span", { className: "min-[420]:text-[13px] text-[11px] bold-text", style: { color: isSoldOut ? "#bbb" : colors.seatPriceColor } }, commonService.currency(type.fare, currencySign))));
50
+ React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: isSoldOut ? "#bbb" : colors.seatPriceColor } }, commonService.currency(type.fare, currencySign))));
51
51
  });
52
52
  return seatTypes;
53
53
  };
@@ -225,14 +225,14 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
225
225
  else {
226
226
  cleanedDepTime = timePart;
227
227
  }
228
- return (React.createElement("div", { className: `relative ${serviceItem.offer_text ? "mb-[55px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
228
+ return (React.createElement("div", { className: `relative ${serviceItem.offer_text ? "mb-[55px]" : "mb-[14px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
229
229
  isConexion ||
230
230
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
231
231
  showTopLabel
232
232
  ? "mt-[20px]"
233
233
  : "mt-[10px]"} `, style: { backgroundColor: "#fff", zIndex: 1 } },
234
234
  React.createElement("div", { className: "border border-[#E6E6E6] rounded-[20px]", style: { backgroundColor: "#fff", zIndex: 1 } },
235
- React.createElement("div", { className: `p-[15px] ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
235
+ React.createElement("div", { className: `p-[12px] ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
236
236
  showTopLabel ||
237
237
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
238
238
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo)
@@ -242,7 +242,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
242
242
  React.createElement("div", { className: "flex items-center w-[50%] justify-between" },
243
243
  React.createElement("div", { className: "w-[120px] overflow-y-hidden" },
244
244
  React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `w-[100px] h-auto object-contain ${isSoldOut ? "grayscale" : ""}` })),
245
- isCiva ? (React.createElement("div", { className: "black-text min-[420]:text-[11px] text-[11px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details[2])) : showRating ? (React.createElement("div", { className: "flex min-[420]:text-[13px] text-[11px] bold-text items-center" },
245
+ isCiva ? (React.createElement("div", { className: "black-text min-[420]:text-[12px] text-[12px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details[2])) : showRating ? (React.createElement("div", { className: "flex min-[420]:text-[13px] text-[12px] bold-text items-center" },
246
246
  React.createElement("img", { src: serviceItem.icons.rating, alt: "origin", className: `w-[12px] h-[12px] mr-[4px] object-contain ${isSoldOut ? "grayscale" : ""}` }),
247
247
  React.createElement("span", { style: { lineHeight: "normal" } }, getServiceStars(serviceItem)))) : null),
248
248
  showLastSeats ? (React.createElement("div", { className: "flex justify-end -mt-[5px] -mb-[5px] items-center pt-[5px] pb-[5px] text-center " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
@@ -252,7 +252,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
252
252
  } }, "\u00A1 \u00DAltimos Asientos!")))) : null),
253
253
  React.createElement("div", { className: "flex justify-between gap-[5px] w-full", onClick: onBookButtonPress },
254
254
  React.createElement("div", { className: "min-h-[2.5rem] flex flex-col justify-between gap-[4px] w-[50%] ", style: { justifyContent: isCiva && "center" } },
255
- React.createElement("div", { className: `flex items-center min-[420]:text-[13px] text-[11px] justify-between ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
255
+ React.createElement("div", { className: `flex items-center min-[420]:text-[13px] text-[12px] justify-between ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
256
256
  React.createElement("div", { className: "flex items-center", style: { flex: 1 } },
257
257
  React.createElement("div", null,
258
258
  " ",
@@ -271,7 +271,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
271
271
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dep_time.includes("PM"))
272
272
  ? null
273
273
  : DateService.ampmOnly(serviceItem.dep_time)))) : (DateService.formatTime(serviceItem.dep_time)))))),
274
- isCiva ? null : (React.createElement("div", { className: `flex items-center min-[420]:text-[13px] text-[11px] justify-between ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
274
+ isCiva ? null : (React.createElement("div", { className: `flex items-center min-[420]:text-[13px] text-[12px] justify-between ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
275
275
  React.createElement("div", { className: "flex items-center", style: { flex: 1 } },
276
276
  React.createElement("div", null,
277
277
  " ",
@@ -300,16 +300,17 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
300
300
  ? seatTypesWithRemoveDuplicateSeats()
301
301
  : seatTypes(),
302
302
  isSoldOut ? (React.createElement("div", { className: "flex justify-end" },
303
- React.createElement("span", { className: "min-[420]:text-[13px] text-[11px] text-[#ccc]" }, "Agotado"))) : null))),
303
+ React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] text-[#ccc]" }, "Agotado"))) : null))),
304
304
  React.createElement("div", { className: "bg-[#E6E6E6] -ml-[12px] -mr-[12px] mt-[10px] mb-[10px] h-[1px]" }),
305
- React.createElement("div", { className: `${"flex justify-between items-center mt-[15px] items-center "}` },
305
+ React.createElement("div", { className: `${"flex justify-between items-center items-center "}` },
306
306
  React.createElement("div", null,
307
307
  React.createElement("div", { className: "flex items-center " },
308
308
  React.createElement("div", { className: "flex items-center cursor-pointer ", style: { color: isSoldOut ? "#bbb" : "text-[#464647]" } },
309
- React.createElement("span", { className: "ml-[3px] min-[420]:text-[13px] text-[11px] bold-text" }, serviceItem.operator_details[2])))),
309
+ React.createElement("span", { className: "ml-[3px] min-[420]:text-[13px] text-[12px] bold-text" }, serviceItem.operator_details[2])))),
310
310
  React.createElement("div", { className: "flex relative ", style: { color: isSoldOut ? "#bbb" : "text-[#464647]" } },
311
311
  React.createElement("div", { className: `w-[12px] h-auto mr-[2px] ${isSoldOut ? "grayscale" : ""}` }, renderIcon("hours", "14px")),
312
- React.createElement("div", { className: `cursor-default group min-[420]:text-[13px] text-[11px] ${isSoldOut ? "text-[#c0c0c0]" : ""}`, style: { lineHeight: "normal" } },
312
+ "\u00A0",
313
+ React.createElement("div", { className: `cursor-default group min-[420]:text-[13px] text-[12px] ${isSoldOut ? "text-[#c0c0c0]" : ""}`, style: { lineHeight: "normal" } },
313
314
  serviceItem.duration,
314
315
  "hrs")),
315
316
  React.createElement("div", { style: { opacity: isSoldOut ? 0.5 : 1 } }, amenities()),
@@ -351,7 +352,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
351
352
  React.createElement("div", { className: isSoldOut ? "grayscale" : "" },
352
353
  React.createElement(LottiePlayer, { animationData: serviceItem.icons.priorityStageAnim, width: "18px", height: "18px" })),
353
354
  React.createElement("div", { className: isSoldOut ? "text-[#bbb]" : `text-[${colors.topLabelColor}]` }, showTopLabel))),
354
- isConexion && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20 ${isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]`}`, style: {
355
+ isConexion && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[11px] z-20 ${isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]`}`, style: {
355
356
  backgroundColor: !isSoldOut && colors.ratingBottomColor,
356
357
  } },
357
358
  renderIcon("airportIcon", "14px"),
package/dist/styles.css CHANGED
@@ -222,6 +222,9 @@
222
222
  .mb-\[10px\] {
223
223
  margin-bottom: 10px;
224
224
  }
225
+ .mb-\[14px\] {
226
+ margin-bottom: 14px;
227
+ }
225
228
  .mb-\[15px\] {
226
229
  margin-bottom: 15px;
227
230
  }
@@ -641,6 +644,9 @@
641
644
  .p-\[10px_15px\] {
642
645
  padding: 10px 15px;
643
646
  }
647
+ .p-\[12px\] {
648
+ padding: 12px;
649
+ }
644
650
  .p-\[15px\] {
645
651
  padding: 15px;
646
652
  }
@@ -869,11 +875,6 @@
869
875
  }
870
876
  }
871
877
  }
872
- .min-\[420\]\:text-\[11px\] {
873
- @media (width >= 420) {
874
- font-size: 11px;
875
- }
876
- }
877
878
  .min-\[420\]\:text-\[12px\] {
878
879
  @media (width >= 420) {
879
880
  font-size: 12px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "7.0.1",
3
+ "version": "7.0.3",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/PeruServiceItemDesktop.tsx CHANGED
@@ -1019,9 +1019,9 @@ function PeruServiceItemDesktop({
1019
1019
  ) : (
1020
1020
  <div className="flex items-center ">
1021
1021
  <div
1022
- className={`flex items-center ${
1023
- isSoldOut ? "grayscale" : ""
1024
- } ${showRating ? "cursor-pointer" : ""}`}
1022
+ className={`flex items-center ${
1023
+ showRating ? "cursor-pointer" : ""
1024
+ }`}
1025
1025
  style={{ color: isSoldOut ? "#c0c0c0" : "" }}
1026
1026
  >
1027
1027
  {showRating ? (
package/src/components/ServiceItem/RatingHover.tsx CHANGED
@@ -37,15 +37,20 @@ const RatingHover: React.FC<RatingHoverProps> = ({
37
37
  <div
38
38
  className="hidden group-hover:block absolute left-[80px] -bottom-[160px] z-20 mt-2 w-[280px] rounded-lg shadow-service-2 bg-white overflow-hidden rounded-[14px] border-[2px]"
39
39
  style={{
40
- borderColor: colors.ratingBorderColor,
40
+ borderColor: isSoldOut ? "#c0c0c0" : colors.ratingBorderColor,
41
41
  color: isSoldOut ? "#c0c0c0" : "",
42
42
  }}
43
43
  >
44
- <div className="pt-[20px] text-center">
45
- <div className="text-[12px] bold-text text-[#464647]">
44
+ <div
45
+ className="pt-[20px] text-center"
46
+ style={{
47
+ color: isSoldOut ? "#c0c0c0" : "#464647",
48
+ }}
49
+ >
50
+ <div className="text-[12px] bold-text">
46
51
  {translation?.ratingMouseOverText}
47
52
  </div>
48
- <div className="text-[12px] font-light text-[#464647]">
53
+ <div className="text-[12px] font-light">
49
54
  {serviceItem.operator_service_name}
50
55
  </div>
51
56
  </div>
@@ -80,6 +85,7 @@ const RatingHover: React.FC<RatingHoverProps> = ({
80
85
  : 0
81
86
  }
82
87
  label={translation?.busQuality}
88
+ isSoldOut={isSoldOut}
83
89
  />
84
90
  <RatingItem
85
91
  rating={
@@ -109,6 +115,7 @@ const RatingHover: React.FC<RatingHoverProps> = ({
109
115
  : 0
110
116
  }
111
117
  label={translation?.punctuality}
118
+ isSoldOut={isSoldOut}
112
119
  />
113
120
  <RatingItem
114
121
  rating={
@@ -138,6 +145,7 @@ const RatingHover: React.FC<RatingHoverProps> = ({
138
145
  : 0
139
146
  }
140
147
  label={translation?.serviceQuality}
148
+ isSoldOut={isSoldOut}
141
149
  />
142
150
  <RatingItem
143
151
  rating={
@@ -167,14 +175,16 @@ const RatingHover: React.FC<RatingHoverProps> = ({
167
175
  : 0
168
176
  }
169
177
  label={translation?.serviceRecommendation}
178
+ isSoldOut={isSoldOut}
170
179
  />
171
180
  </div>
172
181
 
173
182
  {/* Footer */}
174
183
  <div
175
- className="px-1 py-2 text-center text-[12px] text-[#ff8f45] font9"
184
+ className="px-1 py-2 text-center text-[12px] font9"
176
185
  style={{
177
- backgroundColor: colors.ratingBottomColor,
186
+ backgroundColor: isSoldOut ? "#f5f5f5" : colors.ratingBottomColor,
187
+ color: isSoldOut ? "#c0c0c1" : "#ff8f45",
178
188
  }}
179
189
  >
180
190
  {`${translation?.ratingMouseOverCalculationText} ${
package/src/components/ServiceItem/RatingItem.tsx CHANGED
@@ -4,9 +4,14 @@ import React from "react";
4
4
  interface RatingItemProps {
5
5
  rating: number;
6
6
  label: string;
7
+ isSoldOut?: boolean;
7
8
  }
8
9
 
9
- const RatingItem: React.FC<RatingItemProps> = ({ rating, label }) => {
10
+ const RatingItem: React.FC<RatingItemProps> = ({
11
+ rating,
12
+ label,
13
+ isSoldOut,
14
+ }) => {
10
15
  // Calculate percentage for styling
11
16
  const percentage = ((rating / 5) * 100).toFixed(0);
12
17
 
@@ -22,7 +27,10 @@ const RatingItem: React.FC<RatingItemProps> = ({ rating, label }) => {
22
27
  const colorClass = getColorClass();
23
28
 
24
29
  return (
25
- <div className="rating_item flex items-center mb-2">
30
+ <div
31
+ className="rating_item flex items-center mb-2"
32
+ style={{ opacity: isSoldOut ? 0.5 : 1 }}
33
+ >
26
34
  <div className="rating_circle relative">
27
35
  <div className={`c100 small p${percentage} ${colorClass}`}>
28
36
  <span className="text-[#464647] font-medium text-[12px]">
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -1070,10 +1070,12 @@ function ServiceItemPB({
1070
1070
  {/* Rating */}
1071
1071
  <div className="flex items-center ">
1072
1072
  <div
1073
- className={`flex items-center ${
1074
- isSoldOut ? "grayscale" : ""
1075
- } ${showRating ? "cursor-pointer" : ""}`}
1076
- style={{ color: isSoldOut ? "#c0c0c0" : "" }}
1073
+ className={`flex items-center ${
1074
+ showRating ? "cursor-pointer" : ""
1075
+ }`}
1076
+ style={{
1077
+ color: isSoldOut ? "#c0c0c0" : "",
1078
+ }}
1077
1079
  >
1078
1080
  {showRating ? (
1079
1081
  <RatingHover
@@ -1085,8 +1087,11 @@ function ServiceItemPB({
1085
1087
  />
1086
1088
  ) : null}
1087
1089
  <span
1088
- className="ml-[10px] text-[#464647] text-[13.33px]"
1089
- style={{ marginLeft: showRating ? "10px" : "0" }}
1090
+ className="ml-[10px] text-[13.33px]"
1091
+ style={{
1092
+ marginLeft: showRating ? "10px" : "0",
1093
+ color: isSoldOut ? "#c0c0c0" : "#464647",
1094
+ }}
1090
1095
  >
1091
1096
  {serviceItem.operator_details[2]}
1092
1097
  </span>
package/src/components/ServiceItem/ServiceItemMobile.tsx CHANGED
@@ -77,7 +77,7 @@ function ServiceItemMobile({
77
77
  key={i}
78
78
  >
79
79
  <span
80
- className="min-[420]:text-[13px] text-[11px] "
80
+ className="min-[420]:text-[13px] text-[12px] "
81
81
  style={{
82
82
  // marginLeft: "10px",
83
83
  color: isSoldOut ? "#bbb" : "#464647",
@@ -86,7 +86,7 @@ function ServiceItemMobile({
86
86
  {type.label}
87
87
  </span>
88
88
  <span
89
- className={"min-[420]:text-[13px] text-[11px] bold-text"}
89
+ className={"min-[420]:text-[13px] text-[12px] bold-text"}
90
90
  style={{ color: isSoldOut ? "#bbb" : colors.seatPriceColor }}
91
91
  >
92
92
  {commonService.currency(type.fare, currencySign)}
@@ -322,7 +322,7 @@ function ServiceItemMobile({
322
322
  return (
323
323
  <div
324
324
  className={`relative ${
325
- serviceItem.offer_text ? "mb-[55px]" : "mb-[20px]"
325
+ serviceItem.offer_text ? "mb-[55px]" : "mb-[14px]"
326
326
  } ${
327
327
  serviceItem?.is_direct_trip ||
328
328
  isConexion ||
@@ -338,7 +338,7 @@ function ServiceItemMobile({
338
338
  style={{ backgroundColor: "#fff", zIndex: 1 }}
339
339
  >
340
340
  <div
341
- className={`p-[15px] ${
341
+ className={`p-[12px] ${
342
342
  serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
343
343
  showTopLabel ||
344
344
  serviceItem?.is_direct_trip ||
@@ -360,11 +360,11 @@ function ServiceItemMobile({
360
360
  />
361
361
  </div>
362
362
  {isCiva ? (
363
- <div className="black-text min-[420]:text-[11px] text-[11px]">
363
+ <div className="black-text min-[420]:text-[12px] text-[12px]">
364
364
  {serviceItem?.operator_details[2]}
365
365
  </div>
366
366
  ) : showRating ? (
367
- <div className="flex min-[420]:text-[13px] text-[11px] bold-text items-center">
367
+ <div className="flex min-[420]:text-[13px] text-[12px] bold-text items-center">
368
368
  <img
369
369
  src={serviceItem.icons.rating}
370
370
  alt="origin"
@@ -406,7 +406,7 @@ function ServiceItemMobile({
406
406
  style={{ justifyContent: isCiva && "center" }}
407
407
  >
408
408
  <div
409
- className={`flex items-center min-[420]:text-[13px] text-[11px] justify-between ${
409
+ className={`flex items-center min-[420]:text-[13px] text-[12px] justify-between ${
410
410
  isSoldOut ? "text-[#c0c0c0]" : ""
411
411
  }`}
412
412
  >
@@ -459,7 +459,7 @@ function ServiceItemMobile({
459
459
  </div>
460
460
  {isCiva ? null : (
461
461
  <div
462
- className={`flex items-center min-[420]:text-[13px] text-[11px] justify-between ${
462
+ className={`flex items-center min-[420]:text-[13px] text-[12px] justify-between ${
463
463
  isSoldOut ? "text-[#c0c0c0]" : ""
464
464
  }`}
465
465
  >
@@ -531,7 +531,7 @@ function ServiceItemMobile({
531
531
  <div className="flex justify-end">
532
532
  <span
533
533
  className={
534
- "min-[420]:text-[13px] text-[11px] text-[#ccc]"
534
+ "min-[420]:text-[13px] text-[12px] text-[#ccc]"
535
535
  }
536
536
  >
537
537
  Agotado
@@ -543,7 +543,7 @@ function ServiceItemMobile({
543
543
  </div>
544
544
  <div className="bg-[#E6E6E6] -ml-[12px] -mr-[12px] mt-[10px] mb-[10px] h-[1px]"></div>
545
545
  <div
546
- className={`${"flex justify-between items-center mt-[15px] items-center "}`}
546
+ className={`${"flex justify-between items-center items-center "}`}
547
547
  >
548
548
  {/* Rating */}
549
549
  <div>
@@ -552,7 +552,7 @@ function ServiceItemMobile({
552
552
  className="flex items-center cursor-pointer "
553
553
  style={{ color: isSoldOut ? "#bbb" : "text-[#464647]" }}
554
554
  >
555
- <span className="ml-[3px] min-[420]:text-[13px] text-[11px] bold-text">
555
+ <span className="ml-[3px] min-[420]:text-[13px] text-[12px] bold-text">
556
556
  {serviceItem.operator_details[2]}
557
557
  </span>
558
558
  </div>
@@ -570,8 +570,9 @@ function ServiceItemMobile({
570
570
  >
571
571
  {renderIcon("hours", "14px")}
572
572
  </div>
573
+ &nbsp;
573
574
  <div
574
- className={`cursor-default group min-[420]:text-[13px] text-[11px] ${
575
+ className={`cursor-default group min-[420]:text-[13px] text-[12px] ${
575
576
  isSoldOut ? "text-[#c0c0c0]" : ""
576
577
  }`}
577
578
  style={{ lineHeight: "normal" }}
@@ -704,7 +705,7 @@ function ServiceItemMobile({
704
705
 
705
706
  {isConexion && (
706
707
  <div
707
- className={`flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20 ${
708
+ className={`flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[11px] z-20 ${
708
709
  isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]`
709
710
  }`}
710
711
  style={{