kupos-ui-components-lib 10.3.3 → 10.3.5

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.
@@ -314,7 +314,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
314
314
  ? "14px"
315
315
  : "",
316
316
  } },
317
- React.createElement("div", { className: `grid text-[#464647] w-full ${isTrain ? "[grid-template-columns:16%_30%_2.5%_28%_15.5%]" : "[grid-template-columns:20%_30%_2.5%_24%_15.5%]"} gap-x-[2%] items-center` },
317
+ React.createElement("div", { className: `grid text-[#464647] w-full ${isTrain ? "[grid-template-columns:20%_27%_2.5%_27%_15.5%]" : "[grid-template-columns:20%_30%_2.5%_24%_15.5%]"} gap-x-[2%] items-center` },
318
318
  React.createElement("div", { className: "flex flex-col gap-[5px]" },
319
319
  React.createElement("div", null,
320
320
  React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `h-[30px] w-[auto] ${isSoldOut ? "grayscale" : ""}` }),
package/dist/styles.css CHANGED
@@ -572,8 +572,8 @@
572
572
  .\[grid-template-columns\:14\%_40\%_0\.5\%_24\%_13\.5\%\] {
573
573
  grid-template-columns: 14% 40% 0.5% 24% 13.5%;
574
574
  }
575
- .\[grid-template-columns\:16\%_30\%_2\.5\%_28\%_15\.5\%\] {
576
- grid-template-columns: 16% 30% 2.5% 28% 15.5%;
575
+ .\[grid-template-columns\:20\%_27\%_2\.5\%_27\%_15\.5\%\] {
576
+ grid-template-columns: 20% 27% 2.5% 27% 15.5%;
577
577
  }
578
578
  .\[grid-template-columns\:20\%_30\%_2\.5\%_24\%_15\.5\%\] {
579
579
  grid-template-columns: 20% 30% 2.5% 24% 15.5%;
@@ -1,6 +1,5 @@
1
1
  import React from "react";
2
2
  import RatingHover from "../components/ServiceItem/RatingHover";
3
- import commonService from "../utils/CommonService";
4
3
  const RatingBlock = ({ showRating, serviceItem, isSoldOut, colors, t, translation, isPeru = false, isTrain = false, }) => {
5
4
  return (React.createElement("div", { className: "flex items-center whitespace-nowrap" },
6
5
  showRating && (React.createElement(RatingHover, { serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru })),
@@ -8,9 +7,7 @@ const RatingBlock = ({ showRating, serviceItem, isSoldOut, colors, t, translatio
8
7
  marginLeft: showRating ? "6px" : "0",
9
8
  color: isSoldOut ? "#c0c0c0" : "#464647",
10
9
  } },
11
- React.createElement("span", { className: `block max-w-[120px] cursor-pointer text-[12px] ${isPeru || isTrain ? "overflow-hidden text-ellipsis whitespace-nowrap" : ""}` }, isTrain
12
- ? commonService.truncateSeatLabel(serviceItem.operator_details[2], 14)
13
- : commonService.capitalize(serviceItem.operator_details[2])),
10
+ React.createElement("span", { className: `block max-w-[120px] cursor-pointer text-[12px] ${isPeru || isTrain ? "overflow-hidden text-ellipsis whitespace-nowrap" : ""}` }, serviceItem.operator_details[2]),
14
11
  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-nowrap z-10 mt-2.5 w-max text-center shadow-service text-[12px]", style: { backgroundColor: colors.bottomStripColor, zIndex: "300" } },
15
12
  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.bottomStripColor } }),
16
13
  serviceItem.operator_details[2]))));
@@ -114,7 +114,9 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
114
114
  typeof val.label === "string" || typeof val.label === "number"
115
115
  ? removeDuplicateSeats && isPeru
116
116
  ? CommonService.truncateSeatLabel(val.label)
117
- : CommonService.capitalize(String(val.label))
117
+ : isTrain
118
+ ? CommonService.capitalize(String(val.apiSeatType))
119
+ : CommonService.capitalize(String(val.label))
118
120
  : null)));
119
121
  });
120
122
  };
@@ -3,6 +3,7 @@ interface SeatType {
3
3
  label: string;
4
4
  key?: string;
5
5
  fare: number;
6
+ api_seat_type?: string;
6
7
  }
7
8
  interface SeatSectionMobileProps {
8
9
  seatTypes: SeatType[];
@@ -131,7 +131,9 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
131
131
  return uniqueSeats.map((type, i) => (React.createElement(SeatRow, { key: i, type: type, index: i, displayLabel: commonService.truncateSeatLabel(type.label), fare: getFare(type.fare), isSoldOut: isSoldOut, seatPriceColor: seatPriceColor, hasMultipleTypes: hasMultipleTypes, textSize: "text-[11px]", isTrain: isTrain })));
132
132
  }
133
133
  const filteredSeats = (_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label))) === null || _a === void 0 ? void 0 : _a.sort((a, b) => a.fare - b.fare);
134
- return (_b = (isTrain ? filteredSeats : filteredSeats === null || filteredSeats === void 0 ? void 0 : filteredSeats.slice(0, 2))) === null || _b === void 0 ? void 0 : _b.map((type, i) => (React.createElement(SeatRow, { key: i, type: type, index: i, displayLabel: type.label, fare: getFare(type.fare), isSoldOut: isSoldOut, seatPriceColor: seatPriceColor, hasMultipleTypes: hasMultipleTypes, textSize: "text-[12px]", isTrain: isTrain })));
134
+ return (_b = (isTrain ? filteredSeats : filteredSeats === null || filteredSeats === void 0 ? void 0 : filteredSeats.slice(0, 2))) === null || _b === void 0 ? void 0 : _b.map((type, i) => {
135
+ return (React.createElement(SeatRow, { key: i, type: type, index: i, displayLabel: isTrain ? type.api_seat_type : type.label, fare: getFare(type.fare), isSoldOut: isSoldOut, seatPriceColor: seatPriceColor, hasMultipleTypes: hasMultipleTypes, textSize: "text-[12px]", isTrain: isTrain }));
136
+ });
135
137
  };
136
138
  const seats = removeDuplicateSeats
137
139
  ? getUniqueSeats(seatTypesData, 3)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "10.3.3",
3
+ "version": "10.3.5",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -593,7 +593,7 @@ function ServiceItemPB({
593
593
  }}
594
594
  >
595
595
  <div
596
- className={`grid text-[#464647] w-full ${isTrain ? "[grid-template-columns:16%_30%_2.5%_28%_15.5%]" : "[grid-template-columns:20%_30%_2.5%_24%_15.5%]"} gap-x-[2%] items-center`}
596
+ className={`grid text-[#464647] w-full ${isTrain ? "[grid-template-columns:20%_27%_2.5%_27%_15.5%]" : "[grid-template-columns:20%_30%_2.5%_24%_15.5%]"} gap-x-[2%] items-center`}
597
597
  >
598
598
  {/* OPERATOR LOGO */}
599
599
  <div className="flex flex-col gap-[5px]">
@@ -38,12 +38,7 @@ const RatingBlock = ({
38
38
  <span
39
39
  className={`block max-w-[120px] cursor-pointer text-[12px] ${isPeru || isTrain ? "overflow-hidden text-ellipsis whitespace-nowrap" : ""}`}
40
40
  >
41
- {isTrain
42
- ? commonService.truncateSeatLabel(
43
- serviceItem.operator_details[2],
44
- 14,
45
- )
46
- : commonService.capitalize(serviceItem.operator_details[2])}
41
+ {serviceItem.operator_details[2]}
47
42
  </span>
48
43
  <div
49
44
  className="hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-nowrap z-10 mt-2.5 w-max text-center shadow-service text-[12px]"
@@ -217,7 +217,9 @@ function SeatSection({
217
217
  {typeof val.label === "string" || typeof val.label === "number"
218
218
  ? removeDuplicateSeats && isPeru
219
219
  ? CommonService.truncateSeatLabel(val.label)
220
- : CommonService.capitalize(String(val.label))
220
+ : isTrain
221
+ ? CommonService.capitalize(String(val.apiSeatType))
222
+ : CommonService.capitalize(String(val.label))
221
223
  : null}
222
224
  </span>
223
225
  </div>
@@ -17,6 +17,7 @@ interface SeatType {
17
17
  label: string;
18
18
  key?: string;
19
19
  fare: number;
20
+ api_seat_type?: string;
20
21
  }
21
22
 
22
23
  interface SeatSectionMobileProps {
@@ -345,20 +346,22 @@ function SeatSectionMobile({
345
346
  ?.sort((a, b) => a.fare - b.fare);
346
347
 
347
348
  return (isTrain ? filteredSeats : filteredSeats?.slice(0, 2))?.map(
348
- (type, i) => (
349
- <SeatRow
350
- key={i}
351
- type={type}
352
- index={i}
353
- displayLabel={type.label}
354
- fare={getFare(type.fare)}
355
- isSoldOut={isSoldOut}
356
- seatPriceColor={seatPriceColor}
357
- hasMultipleTypes={hasMultipleTypes}
358
- textSize="text-[12px]"
359
- isTrain={isTrain}
360
- />
361
- ),
349
+ (type, i) => {
350
+ return (
351
+ <SeatRow
352
+ key={i}
353
+ type={type}
354
+ index={i}
355
+ displayLabel={isTrain ? type.api_seat_type : type.label}
356
+ fare={getFare(type.fare)}
357
+ isSoldOut={isSoldOut}
358
+ seatPriceColor={seatPriceColor}
359
+ hasMultipleTypes={hasMultipleTypes}
360
+ textSize="text-[12px]"
361
+ isTrain={isTrain}
362
+ />
363
+ );
364
+ },
362
365
  );
363
366
  };
364
367