kupos-ui-components-lib 7.0.0 → 7.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/components/FilterBar/FilterBarDesktop.js +70 -38
  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 +2 -2
  7. package/dist/styles.css +3 -0
  8. package/package.json +1 -1
  9. package/src/components/FilterBar/FilterBarDesktop.tsx +74 -42
  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 +2 -2
package/dist/components/FilterBar/FilterBarDesktop.js CHANGED
@@ -135,50 +135,82 @@ const FilterBarDesktop = ({ t, serviceList, setServiceList, allSchedules, showRe
135
135
  // }
136
136
  }
137
137
  if (isPeru) {
138
- if (fil.type == "seat_types") {
139
- let activeOptions = fil.options.filter((it) => it.active);
140
- filteredRoutes = filteredRoutes.filter((it) => {
141
- if (activeOptions && activeOptions.length) {
142
- // Check if ANY of the active filter options match ANY seat type
143
- for (let f of activeOptions) {
144
- if (f.active) {
145
- const filterValue = f.value.toLowerCase();
146
- // Check if this filter value appears in any seat type label
147
- const hasMatchingSeatType = it.seat_types.some((bt) => { var _a; return ((_a = bt === null || bt === void 0 ? void 0 : bt.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().indexOf(filterValue)) > -1; });
148
- if (hasMatchingSeatType) {
149
- return true;
150
- }
151
- }
152
- }
153
- return false;
154
- }
155
- else {
138
+ // if (fil.type == "seat_types") {
139
+ // let activeOptions = fil.options.filter((it) => it.active);
140
+ // filteredRoutes = filteredRoutes.filter((it) => {
141
+ // if (activeOptions && activeOptions.length) {
142
+ // // Check if ANY of the active filter options match ANY seat type
143
+ // for (let f of activeOptions) {
144
+ // if (f.active) {
145
+ // const filterValue = f.value.toLowerCase();
146
+ // // Check if this filter value appears in any seat type label
147
+ // const hasMatchingSeatType = it.seat_types.some(
148
+ // (bt) => bt?.label?.toLowerCase().indexOf(filterValue) > -1
149
+ // );
150
+ // if (hasMatchingSeatType) {
151
+ // return true;
152
+ // }
153
+ // }
154
+ // }
155
+ // return false;
156
+ // } else {
157
+ // return true;
158
+ // }
159
+ // });
160
+ // }
161
+ if (fil.type === "seat_types") {
162
+ const activeOptions = fil.options.filter((it) => it.active);
163
+ filteredRoutes = filteredRoutes.filter((route) => {
164
+ if (!activeOptions.length)
156
165
  return true;
157
- }
166
+ return activeOptions.some((opt) => {
167
+ const filterValue = opt.value.trim().toLowerCase();
168
+ return route.seat_types.some((seat) => {
169
+ var _a;
170
+ const seatLabel = (_a = seat === null || seat === void 0 ? void 0 : seat.label) === null || _a === void 0 ? void 0 : _a.trim().toLowerCase();
171
+ return seatLabel === filterValue;
172
+ });
173
+ });
158
174
  });
159
175
  }
160
176
  }
161
177
  else {
162
- if (fil.type == "seat_types") {
163
- let activeOptions = fil.options.filter((it) => it.active);
164
- filteredRoutes = filteredRoutes.filter((it) => {
165
- if (activeOptions && activeOptions.length) {
166
- // Check if ANY of the active filter options match ANY seat type
167
- for (let f of activeOptions) {
168
- if (f.active) {
169
- const filterValue = f.value.toLowerCase();
170
- // Check if this filter value appears in any seat type label
171
- const hasMatchingSeatType = it.seat_types.some((bt) => { var _a; return ((_a = bt === null || bt === void 0 ? void 0 : bt.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().indexOf(filterValue)) > -1; });
172
- if (hasMatchingSeatType) {
173
- return true;
174
- }
175
- }
176
- }
177
- return false;
178
- }
179
- else {
178
+ // if (fil.type == "seat_types") {
179
+ // let activeOptions = fil.options.filter((it) => it.active);
180
+ // filteredRoutes = filteredRoutes.filter((it) => {
181
+ // if (activeOptions && activeOptions.length) {
182
+ // // Check if ANY of the active filter options match ANY seat type
183
+ // for (let f of activeOptions) {
184
+ // if (f.active) {
185
+ // const filterValue = f.value.toLowerCase();
186
+ // // Check if this filter value appears in any seat type label
187
+ // const hasMatchingSeatType = it.seat_types.some(
188
+ // (bt) => bt?.label?.toLowerCase().indexOf(filterValue) > -1
189
+ // );
190
+ // if (hasMatchingSeatType) {
191
+ // return true;
192
+ // }
193
+ // }
194
+ // }
195
+ // return false;
196
+ // } else {
197
+ // return true;
198
+ // }
199
+ // });
200
+ // }
201
+ if (fil.type === "seat_types") {
202
+ const activeOptions = fil.options.filter((it) => it.active);
203
+ filteredRoutes = filteredRoutes.filter((route) => {
204
+ if (!activeOptions.length)
180
205
  return true;
181
- }
206
+ return activeOptions.some((opt) => {
207
+ const filterValue = opt.value.trim().toLowerCase();
208
+ return route.seat_types.some((seat) => {
209
+ var _a;
210
+ const seatLabel = (_a = seat === null || seat === void 0 ? void 0 : seat.label) === null || _a === void 0 ? void 0 : _a.trim().toLowerCase();
211
+ return seatLabel === filterValue;
212
+ });
213
+ });
182
214
  });
183
215
  }
184
216
  }
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
@@ -232,7 +232,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
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)
@@ -302,7 +302,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
302
302
  isSoldOut ? (React.createElement("div", { className: "flex justify-end" },
303
303
  React.createElement("span", { className: "min-[420]:text-[13px] text-[11px] 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]" } },
package/dist/styles.css CHANGED
@@ -641,6 +641,9 @@
641
641
  .p-\[10px_15px\] {
642
642
  padding: 10px 15px;
643
643
  }
644
+ .p-\[12px\] {
645
+ padding: 12px;
646
+ }
644
647
  .p-\[15px\] {
645
648
  padding: 15px;
646
649
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "7.0.0",
3
+ "version": "7.0.2",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/FilterBar/FilterBarDesktop.tsx CHANGED
@@ -167,53 +167,85 @@ const FilterBarDesktop = ({
167
167
  // }
168
168
  }
169
169
  if (isPeru) {
170
- if (fil.type == "seat_types") {
171
- let activeOptions = fil.options.filter((it) => it.active);
170
+ // if (fil.type == "seat_types") {
171
+ // let activeOptions = fil.options.filter((it) => it.active);
172
172
 
173
- filteredRoutes = filteredRoutes.filter((it) => {
174
- if (activeOptions && activeOptions.length) {
175
- // Check if ANY of the active filter options match ANY seat type
176
- for (let f of activeOptions) {
177
- if (f.active) {
178
- const filterValue = f.value.toLowerCase();
179
- // Check if this filter value appears in any seat type label
180
- const hasMatchingSeatType = it.seat_types.some(
181
- (bt) => bt?.label?.toLowerCase().indexOf(filterValue) > -1
182
- );
183
- if (hasMatchingSeatType) {
184
- return true;
185
- }
186
- }
187
- }
188
- return false;
189
- } else {
190
- return true;
191
- }
173
+ // filteredRoutes = filteredRoutes.filter((it) => {
174
+ // if (activeOptions && activeOptions.length) {
175
+ // // Check if ANY of the active filter options match ANY seat type
176
+ // for (let f of activeOptions) {
177
+ // if (f.active) {
178
+ // const filterValue = f.value.toLowerCase();
179
+ // // Check if this filter value appears in any seat type label
180
+ // const hasMatchingSeatType = it.seat_types.some(
181
+ // (bt) => bt?.label?.toLowerCase().indexOf(filterValue) > -1
182
+ // );
183
+ // if (hasMatchingSeatType) {
184
+ // return true;
185
+ // }
186
+ // }
187
+ // }
188
+ // return false;
189
+ // } else {
190
+ // return true;
191
+ // }
192
+ // });
193
+ // }
194
+ if (fil.type === "seat_types") {
195
+ const activeOptions = fil.options.filter((it) => it.active);
196
+
197
+ filteredRoutes = filteredRoutes.filter((route) => {
198
+ if (!activeOptions.length) return true;
199
+
200
+ return activeOptions.some((opt) => {
201
+ const filterValue = opt.value.trim().toLowerCase();
202
+
203
+ return route.seat_types.some((seat) => {
204
+ const seatLabel = seat?.label?.trim().toLowerCase();
205
+ return seatLabel === filterValue;
206
+ });
207
+ });
192
208
  });
193
209
  }
194
210
  } else {
195
- if (fil.type == "seat_types") {
196
- let activeOptions = fil.options.filter((it) => it.active);
211
+ // if (fil.type == "seat_types") {
212
+ // let activeOptions = fil.options.filter((it) => it.active);
197
213
 
198
- filteredRoutes = filteredRoutes.filter((it) => {
199
- if (activeOptions && activeOptions.length) {
200
- // Check if ANY of the active filter options match ANY seat type
201
- for (let f of activeOptions) {
202
- if (f.active) {
203
- const filterValue = f.value.toLowerCase();
204
- // Check if this filter value appears in any seat type label
205
- const hasMatchingSeatType = it.seat_types.some(
206
- (bt) => bt?.label?.toLowerCase().indexOf(filterValue) > -1
207
- );
208
- if (hasMatchingSeatType) {
209
- return true;
210
- }
211
- }
212
- }
213
- return false;
214
- } else {
215
- return true;
216
- }
214
+ // filteredRoutes = filteredRoutes.filter((it) => {
215
+ // if (activeOptions && activeOptions.length) {
216
+ // // Check if ANY of the active filter options match ANY seat type
217
+ // for (let f of activeOptions) {
218
+ // if (f.active) {
219
+ // const filterValue = f.value.toLowerCase();
220
+ // // Check if this filter value appears in any seat type label
221
+ // const hasMatchingSeatType = it.seat_types.some(
222
+ // (bt) => bt?.label?.toLowerCase().indexOf(filterValue) > -1
223
+ // );
224
+ // if (hasMatchingSeatType) {
225
+ // return true;
226
+ // }
227
+ // }
228
+ // }
229
+ // return false;
230
+ // } else {
231
+ // return true;
232
+ // }
233
+ // });
234
+ // }
235
+ if (fil.type === "seat_types") {
236
+ const activeOptions = fil.options.filter((it) => it.active);
237
+
238
+ filteredRoutes = filteredRoutes.filter((route) => {
239
+ if (!activeOptions.length) return true;
240
+
241
+ return activeOptions.some((opt) => {
242
+ const filterValue = opt.value.trim().toLowerCase();
243
+
244
+ return route.seat_types.some((seat) => {
245
+ const seatLabel = seat?.label?.trim().toLowerCase();
246
+ return seatLabel === filterValue;
247
+ });
248
+ });
217
249
  });
218
250
  }
219
251
  }
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
@@ -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 ||
@@ -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>