kupos-ui-components-lib 9.11.6 → 9.11.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 (29) hide show
  1. package/dist/components/ServiceItem/ServiceItemDesktop.d.ts +1 -1
  2. package/dist/components/ServiceItem/ServiceItemDesktop.js +22 -4
  3. package/dist/components/ServiceItem/ServiceItemMobile.d.ts +1 -1
  4. package/dist/components/ServiceItem/ServiceItemMobile.js +1 -1
  5. package/dist/components/ServiceItem/mobileTypes.d.ts +1 -0
  6. package/dist/components/ServiceItem/types.d.ts +7 -0
  7. package/dist/styles.css +6 -0
  8. package/dist/ui/BottomAmenities/BottomAmenities.d.ts +2 -1
  9. package/dist/ui/BottomAmenities/BottomAmenities.js +4 -2
  10. package/dist/ui/DateTimeSection/DateTimeSection.js +4 -4
  11. package/dist/ui/SeatSection/SeatSection.d.ts +7 -1
  12. package/dist/ui/SeatSection/SeatSection.js +48 -14
  13. package/dist/ui/mobileweb/DateTimeSectionMobile.d.ts +2 -1
  14. package/dist/ui/mobileweb/DateTimeSectionMobile.js +13 -7
  15. package/dist/ui/mobileweb/SeatSectionMobile.d.ts +2 -1
  16. package/dist/ui/mobileweb/SeatSectionMobile.js +24 -16
  17. package/dist/utils/CommonService.d.ts +1 -1
  18. package/dist/utils/CommonService.js +5 -1
  19. package/package.json +1 -1
  20. package/src/components/ServiceItem/ServiceItemDesktop.tsx +47 -1
  21. package/src/components/ServiceItem/ServiceItemMobile.tsx +2 -1
  22. package/src/components/ServiceItem/mobileTypes.ts +31 -26
  23. package/src/components/ServiceItem/types.ts +12 -0
  24. package/src/ui/BottomAmenities/BottomAmenities.tsx +5 -1
  25. package/src/ui/DateTimeSection/DateTimeSection.tsx +4 -4
  26. package/src/ui/SeatSection/SeatSection.tsx +95 -23
  27. package/src/ui/mobileweb/DateTimeSectionMobile.tsx +47 -34
  28. package/src/ui/mobileweb/SeatSectionMobile.tsx +29 -13
  29. package/src/utils/CommonService.ts +7 -1
package/dist/components/ServiceItem/ServiceItemDesktop.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  import { ServiceItemProps } from "./types";
3
- declare function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel, }: ServiceItemProps & {
3
+ declare function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel, }: ServiceItemProps & {
4
4
  currencySign?: string;
5
5
  }): React.ReactElement;
6
6
  export default ServiceItemPB;
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -87,8 +87,12 @@ const ANIMATION_MAP = {
87
87
  kupos: flameAnimation,
88
88
  },
89
89
  };
90
- function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t = (key) => key, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel, }) {
90
+ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t = (key) => key, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel, }) {
91
91
  var _a, _b, _c;
92
+ const handleSeatSelect = (key, price, seatKey, apiSeatType) => {
93
+ onClearSeatSelectionError === null || onClearSeatSelectionError === void 0 ? void 0 : onClearSeatSelectionError();
94
+ onSeatSelect === null || onSeatSelect === void 0 ? void 0 : onSeatSelect(key, price, seatKey, apiSeatType);
95
+ };
92
96
  const getAnimationIcon = (icon) => {
93
97
  var _a;
94
98
  const animation = ANIMATION_MAP[icon];
@@ -245,6 +249,16 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
245
249
  });
246
250
  return;
247
251
  }
252
+ if (isTrain) {
253
+ if (!selectedSeatKey) {
254
+ onShowSeatSelectionError === null || onShowSeatSelectionError === void 0 ? void 0 : onShowSeatSelectionError(serviceItem.id);
255
+ return;
256
+ }
257
+ if (onTrainButtonClick) {
258
+ onTrainButtonClick();
259
+ return;
260
+ }
261
+ }
248
262
  onBookButtonPress();
249
263
  };
250
264
  const items = [
@@ -299,7 +313,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
299
313
  ? "14px"
300
314
  : "",
301
315
  } },
302
- React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:20%_30%_2.5%_24%_15.5%] gap-x-[2%] items-center" },
316
+ 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` },
303
317
  React.createElement("div", { className: "flex flex-col gap-[5px]" },
304
318
  React.createElement("div", null,
305
319
  React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `h-[30px] w-[auto] ${isSoldOut ? "grayscale" : ""}` }),
@@ -312,15 +326,19 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
312
326
  backgroundColor: "#ccc",
313
327
  } }),
314
328
  React.createElement("div", { className: "content-center" },
315
- React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, dpSeatColor: colors.seatPriceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru, renderIcon: renderIcon, discountSeatPriceColor: colors.discountSeatPriceColor, tooltipColor: colors.tooltipColor })),
329
+ React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, dpSeatColor: colors.seatPriceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru, renderIcon: renderIcon, discountSeatPriceColor: colors.discountSeatPriceColor, isTrain: isTrain, selectedSeatKey: selectedSeatKey, onSeatSelect: handleSeatSelect, topLabelColor: colors.topLabelColor, tooltipColor: colors.tooltipColor })),
316
330
  React.createElement("div", { className: "relative" },
317
331
  React.createElement(KuposButton, { isSoldOut: isSoldOut, isLoading: serviceDetailsLoading, buttonColor: colors.kuposButtonColor, buyLabel: translation === null || translation === void 0 ? void 0 : translation.buyButton, soldOutLabel: translation === null || translation === void 0 ? void 0 : translation.soldOutButton, soldOutIcon: renderIcon("soldOutIcon", "14px"), onClick: checkMidnight }),
332
+ showSeatSelectionError === serviceItem.id && isTrain && (React.createElement("div", { className: "flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]" },
333
+ React.createElement("div", { className: "text-[9px] text-center whitespace-nowrap", style: {
334
+ color: colors.seatPriceColor,
335
+ } }, "Selecciona el tipo de servicio"))),
318
336
  showLastSeats ? (React.createElement("div", { className: "flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
319
337
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[12px] mt-1 text-center", style: {
320
338
  color: colors.seatPriceColor,
321
339
  } }, "\u00A1\u00DAltimos Asientos!")))) : null)),
322
340
  React.createElement(BottomAmenities, { otherItems: otherItems, serviceItem: serviceItem, grayscaleClass: grayscaleClass, isSoldOut: isSoldOut, isItemExpanded: isItemExpanded, colors: colors, translation: translation, getAnimationIcon: getAnimationIcon, downArrowIcon: renderIcon("downArrow", "10px"), onToggleExpand: () => setIsExpand &&
323
- setIsExpand(isItemExpanded ? null : serviceItem.id), isPeru: isPeru }))),
341
+ setIsExpand(isItemExpanded ? null : serviceItem.id), isPeru: isPeru, isTrain: isTrain }))),
324
342
  isPeru ? null : (React.createElement("div", { style: {
325
343
  display: "grid",
326
344
  gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
package/dist/components/ServiceItem/ServiceItemMobile.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import { MobileServiceItemProps } from "./mobileTypes";
3
- declare function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel }: MobileServiceItemProps): React.ReactElement;
3
+ declare function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, operatorLabel, isTrain, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, }: MobileServiceItemProps): React.ReactElement;
4
4
  export default ServiceItemMobile;
package/dist/components/ServiceItem/ServiceItemMobile.js CHANGED
@@ -18,7 +18,7 @@ const exceptions = [
18
18
  "blanco",
19
19
  "asiento_mascota",
20
20
  ];
21
- function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel }) {
21
+ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, operatorLabel, isTrain, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, }) {
22
22
  var _a, _b, _c, _d, _e, _f, _g, _h, _j;
23
23
  const isItemExpanded = serviceItem.id === isExpanded;
24
24
  const isPetSeat = (Object.keys(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.pet_seat_info) || []).length > 0;
package/dist/components/ServiceItem/mobileTypes.d.ts CHANGED
@@ -215,6 +215,7 @@ export interface MobileServiceItemProps {
215
215
  label?: string;
216
216
  icon?: string;
217
217
  };
218
+ isTrain?: boolean;
218
219
  isFeatureDropDownExpand?: any;
219
220
  setIsFeatureDropDownExpand?: (value: any) => void;
220
221
  ticketQuantity?: number;
package/dist/components/ServiceItem/types.d.ts CHANGED
@@ -245,6 +245,13 @@ export interface ServiceItemProps {
245
245
  showLoginModal?: any;
246
246
  isLoggedIn?: any;
247
247
  showLoginOption?: boolean;
248
+ isTrain?: boolean;
249
+ selectedSeatKey?: any;
250
+ onSeatSelect?: (key: any, price: number, seatKey: string, apiSeatType?: string) => void;
251
+ onTrainButtonClick?: any;
252
+ showSeatSelectionError?: string | null;
253
+ onShowSeatSelectionError?: (serviceId: string) => void;
254
+ onClearSeatSelectionError?: () => void;
248
255
  selectedTimeSlot?: string;
249
256
  onTimeSlotChange?: (slot: string) => void;
250
257
  isTimeDropdownOpen?: string | number | null;
package/dist/styles.css CHANGED
@@ -566,6 +566,9 @@
566
566
  .\[grid-template-columns\:14\%_40\%_0\.5\%_24\%_13\.5\%\] {
567
567
  grid-template-columns: 14% 40% 0.5% 24% 13.5%;
568
568
  }
569
+ .\[grid-template-columns\:16\%_30\%_2\.5\%_28\%_15\.5\%\] {
570
+ grid-template-columns: 16% 30% 2.5% 28% 15.5%;
571
+ }
569
572
  .\[grid-template-columns\:20\%_30\%_2\.5\%_24\%_15\.5\%\] {
570
573
  grid-template-columns: 20% 30% 2.5% 24% 15.5%;
571
574
  }
@@ -1026,6 +1029,9 @@
1026
1029
  .text-right {
1027
1030
  text-align: right;
1028
1031
  }
1032
+ .text-\[9px\] {
1033
+ font-size: 9px;
1034
+ }
1029
1035
  .text-\[10px\] {
1030
1036
  font-size: 10px;
1031
1037
  }
package/dist/ui/BottomAmenities/BottomAmenities.d.ts CHANGED
@@ -24,6 +24,7 @@ interface BottomAmenitiesProps {
24
24
  downArrowIcon?: React.ReactNode;
25
25
  onToggleExpand: () => void;
26
26
  isPeru?: boolean;
27
+ isTrain?: boolean;
27
28
  }
28
- declare function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, isItemExpanded, colors, translation, getAnimationIcon, downArrowIcon, onToggleExpand, isPeru, }: BottomAmenitiesProps): React.ReactElement;
29
+ declare function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, isItemExpanded, colors, translation, getAnimationIcon, downArrowIcon, onToggleExpand, isPeru, isTrain, }: BottomAmenitiesProps): React.ReactElement;
29
30
  export default BottomAmenities;
package/dist/ui/BottomAmenities/BottomAmenities.js CHANGED
@@ -3,7 +3,7 @@ import LottiePlayer from "../../assets/LottiePlayer";
3
3
  import FlexibleBlock from "../FlexibleBlock";
4
4
  import PetBlock from "../PetBlock";
5
5
  import FemaleBlock from "../FemaleBlock";
6
- function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, isItemExpanded, colors, translation, getAnimationIcon, downArrowIcon, onToggleExpand, isPeru, }) {
6
+ function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, isItemExpanded, colors, translation, getAnimationIcon, downArrowIcon, onToggleExpand, isPeru, isTrain, }) {
7
7
  const hasPetInfo = serviceItem.pet_seat_info &&
8
8
  Object.keys(serviceItem.pet_seat_info).length > 0;
9
9
  const showDownArrow = ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_change_ticket) && serviceItem.pet_seat_info) ||
@@ -12,7 +12,9 @@ function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, i
12
12
  return (React.createElement("div", { className: "flex items-center mt-[15px] border-t border-[#eee] pt-[6px]" },
13
13
  React.createElement("div", { className: "grid items-center gap-[2%] flex-1 ", style: {
14
14
  // gridTemplateColumns: " 28% 21% 23% 23%",
15
- gridTemplateColumns: "25.3% 17% 23% 23%",
15
+ gridTemplateColumns: isTrain
16
+ ? "20.6% 17% 23% 23%"
17
+ : "25.3% 17% 23% 23%",
16
18
  } }, otherItems.map((item) => (React.createElement("div", { key: item.key, className: "flex items-center" }, item.render)))),
17
19
  React.createElement("div", { className: "flex items-center justify-end shrink-0 ml-[5px] w-[150px]" },
18
20
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled) && (React.createElement("div", { className: grayscaleClass + " mr-[10px]" },
package/dist/ui/DateTimeSection/DateTimeSection.js CHANGED
@@ -32,16 +32,16 @@ function DateTimeSection({ serviceItem, isSoldOut, isCiva, isLinatal, removeArri
32
32
  React.createElement("img", { src: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.destination, className: `w-[16px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }))))),
33
33
  React.createElement("div", { className: "flex flex-col gap-[4px]" },
34
34
  React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
35
- React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.travel_date))),
35
+ React.createElement("span", { className: "cursor-pointer bold-text capitalize whitespace-nowrap" }, DateService.getServiceItemDate(serviceItem.travel_date))),
36
36
  !isCiva && (React.createElement(StageTooltip, { stageData: serviceItem.dropoff_stages, direction: 2, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
37
- React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.arrival_date))))),
37
+ React.createElement("span", { className: "cursor-pointer bold-text capitalize whitespace-nowrap" }, DateService.getServiceItemDate(serviceItem.arrival_date))))),
38
38
  React.createElement("div", { className: "flex flex-col gap-[4px] items-center" },
39
39
  React.createElement("div", { className: "h-[20px] flex items-center justify-center" },
40
40
  React.createElement("div", null, "\u2022")),
41
41
  !isCiva && (React.createElement("div", { className: "h-[20px] flex items-center justify-center" }, removeArrivalTime ? null : serviceItem.arr_time ? (React.createElement("div", null, "\u2022")) : null))),
42
42
  React.createElement("div", { className: "flex flex-col gap-[4px]" },
43
43
  React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
44
- React.createElement("div", { className: "font-[900] bold-text" }, isLinatal ? (React.createElement(React.Fragment, null,
44
+ React.createElement("div", { className: "font-[900] bold-text whitespace-nowrap" }, isLinatal ? (React.createElement(React.Fragment, null,
45
45
  cleanedDepTime,
46
46
  " ",
47
47
  React.createElement("span", null, hasPM ? "PM" : hasAM ? "AM" : ""),
@@ -49,7 +49,7 @@ function DateTimeSection({ serviceItem, isSoldOut, isCiva, isLinatal, removeArri
49
49
  !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dep_time.includes("PM")) &&
50
50
  DateService.ampmOnly(serviceItem.dep_time))) : (DateService.formatTime(serviceItem.dep_time)))),
51
51
  !isCiva && (React.createElement(StageTooltip, { stageData: serviceItem.dropoff_stages, direction: 2, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
52
- React.createElement("div", { className: "font-[900] bold-text" }, removeArrivalTime
52
+ React.createElement("div", { className: "font-[900] bold-text whitespace-nowrap" }, removeArrivalTime
53
53
  ? "\u00A0"
54
54
  : serviceItem.arr_time
55
55
  ? DateService.formatTime(serviceItem.arr_time)
package/dist/ui/SeatSection/SeatSection.d.ts CHANGED
@@ -3,6 +3,8 @@ interface SeatType {
3
3
  label: string;
4
4
  fare: number;
5
5
  key: any;
6
+ apiSeatType?: string;
7
+ api_seat_type?: string;
6
8
  }
7
9
  interface SeatSectionProps {
8
10
  seatTypes: SeatType[];
@@ -16,7 +18,11 @@ interface SeatSectionProps {
16
18
  serviceItem?: any;
17
19
  renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
18
20
  discountSeatPriceColor?: string;
21
+ isTrain?: boolean;
22
+ selectedSeatKey?: any;
23
+ onSeatSelect?: (key: any, price: number, seatKey: string, apiSeatType?: string) => void;
24
+ topLabelColor?: string;
19
25
  tooltipColor?: string;
20
26
  }
21
- declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, tooltipColor, }: SeatSectionProps): React.ReactElement;
27
+ declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isTrain, topLabelColor, tooltipColor, }: SeatSectionProps): React.ReactElement;
22
28
  export default SeatSection;
package/dist/ui/SeatSection/SeatSection.js CHANGED
@@ -8,11 +8,13 @@ function getAllSeatTypes(seatTypes) {
8
8
  let seatTypesWithPrices = seatTypes.filter(Boolean).map((val) => ({
9
9
  label: val === null || val === void 0 ? void 0 : val.label,
10
10
  price: val === null || val === void 0 ? void 0 : val.fare,
11
+ key: val === null || val === void 0 ? void 0 : val.key,
12
+ apiSeatType: (val === null || val === void 0 ? void 0 : val.apiSeatType) || (val === null || val === void 0 ? void 0 : val.api_seat_type),
11
13
  }));
12
14
  seatTypesWithPrices.sort((a, b) => a.price - b.price);
13
15
  return seatTypesWithPrices;
14
16
  }
15
- function getSortedSeatTypes(seatTypes) {
17
+ function getSortedSeatTypes(seatTypes, isTrain) {
16
18
  if (!(seatTypes === null || seatTypes === void 0 ? void 0 : seatTypes.length)) {
17
19
  return [{ label: "Salon cama", price: 0 }];
18
20
  }
@@ -21,7 +23,9 @@ function getSortedSeatTypes(seatTypes) {
21
23
  if (premiumIndex >= 3) {
22
24
  seatTypesWithPrices[2] = seatTypesWithPrices[premiumIndex];
23
25
  }
24
- seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
26
+ if (!isTrain) {
27
+ seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
28
+ }
25
29
  const seenPrices = new Set();
26
30
  seatTypesWithPrices = seatTypesWithPrices.filter((seat) => {
27
31
  if (seenPrices.has(seat.price))
@@ -54,10 +58,10 @@ function getUniqueSeats(seatTypes) {
54
58
  function getNumberOfSeats(seatTypes) {
55
59
  return seatTypes.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
56
60
  }
57
- function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, tooltipColor, }) {
61
+ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isTrain, topLabelColor, tooltipColor, }) {
58
62
  var _a;
59
63
  const uniqueSeats = getUniqueSeats(seatTypes);
60
- const sortedSeatTypes = getSortedSeatTypes(seatTypes);
64
+ const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
61
65
  const numberOfSeats = getNumberOfSeats(seatTypes);
62
66
  const isCentered = numberOfSeats < 2 || removeDuplicateSeats;
63
67
  const formatPrice = (price) => availableSeats <= 0
@@ -65,15 +69,41 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
65
69
  : CommonService.currency(price, currencySign);
66
70
  const renderSeatNames = () => {
67
71
  const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
68
- return seats.map((val, key) => SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("span", { key: key, className: `flex items-center justify-between text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` }, typeof val.label === "string" || typeof val.label === "number"
69
- ? removeDuplicateSeats && isPeru
70
- ? CommonService.truncateSeatLabel(val.label)
71
- : val.label
72
- : null)));
72
+ return seats.map((val, key) => {
73
+ return SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("div", { className: "flex items-center", style: isTrain ? { cursor: "pointer" } : undefined, onClick: isTrain && !isSoldOut
74
+ ? () => val.label === selectedSeatKey
75
+ ? onSeatSelect === null || onSeatSelect === void 0 ? void 0 : onSeatSelect(null, 0, "", "")
76
+ : onSeatSelect === null || onSeatSelect === void 0 ? void 0 : onSeatSelect(val.label, val.price, val.key, val.apiSeatType)
77
+ : undefined },
78
+ isTrain && (React.createElement("div", { style: {
79
+ border: `1px solid ${val.label === selectedSeatKey ? topLabelColor : "#ccc"}`,
80
+ borderRadius: "50%",
81
+ width: "14px",
82
+ height: "14px",
83
+ minWidth: "14px",
84
+ marginRight: "10px",
85
+ display: "flex",
86
+ alignItems: "center",
87
+ justifyContent: "center",
88
+ } }, val.label === selectedSeatKey && (React.createElement("div", { style: {
89
+ backgroundColor: topLabelColor,
90
+ borderRadius: "50%",
91
+ width: "7px",
92
+ height: "7px",
93
+ } })))),
94
+ React.createElement("span", { key: key, className: `flex items-center justify-between text-[13.33px] whitespace-nowrap ${isSoldOut ? "text-[#c0c0c0]" : ""}` }, typeof val.label === "string" || typeof val.label === "number"
95
+ ? removeDuplicateSeats && isPeru
96
+ ? CommonService.truncateSeatLabel(val.label)
97
+ : isTrain
98
+ ? CommonService.capitalize(String(val.label))
99
+ : val.label
100
+ : null)));
101
+ });
73
102
  };
74
103
  const renderSeatPrices = () => {
75
104
  if (isPeru) {
76
- const isMovilBus = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus" || "Movil Bus";
105
+ const isMovilBus = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus" ||
106
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "Movil Bus";
77
107
  // Multiple unique seat types → show a price row for each (MovilBus only)
78
108
  if (isMovilBus && uniqueSeats.length > 1) {
79
109
  return uniqueSeats
@@ -125,6 +155,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
125
155
  }
126
156
  return null;
127
157
  })();
158
+ console.log("🚀 ~ SeatSection ~ serviceItem:", serviceItem);
128
159
  // Hide the % OFF badge when max_discount is capping the percentage discount
129
160
  // (i.e. both percentage and max_discount exist, and the raw % amount exceeds the cap)
130
161
  const isMaxDiscountApplied = (() => {
@@ -141,7 +172,8 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
141
172
  })();
142
173
  const renderLabels = () => {
143
174
  if (isPeru) {
144
- const isMovilBus = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus" || "Movil Bus";
175
+ const isMovilBus = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus" ||
176
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "Movil Bus";
145
177
  // Multiple unique seat types → show a label row for each (MovilBus only)
146
178
  if (isMovilBus && uniqueSeats.length > 1) {
147
179
  return uniqueSeats
@@ -161,7 +193,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
161
193
  hasDiscount && (React.createElement("span", { className: "text-[13.33px]", style: {
162
194
  color: "#999",
163
195
  } }, "Antes")),
164
- React.createElement("span", { className: "text-[13.33px] flex flex-col" }, operatorServiceName ? (React.createElement("span", { className: "text-[13.33px]" }, seatLabel)) : (React.createElement("span", { className: "text-[13.33px]" }, "Desde")))));
196
+ React.createElement("span", { className: "text-[13.33px] flex flex-col" }, operatorServiceName ? (React.createElement("span", { className: "text-[13.33px] whitespace-nowrap" }, seatLabel)) : (React.createElement("span", { className: "text-[13.33px]" }, "Desde")))));
165
197
  }
166
198
  return renderSeatNames();
167
199
  };
@@ -263,7 +295,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
263
295
  discountValue,
264
296
  "% OFF"))),
265
297
  React.createElement("div", { className: "col-start-2 row-start-2 flex items-center justify-center ", style: { textAlign: "center" } },
266
- React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative", style: {
298
+ React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative whitespace-nowrap", style: {
267
299
  position: "relative",
268
300
  } },
269
301
  formatPrice(discountSeat.originalPrice),
@@ -293,7 +325,9 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
293
325
  color: isSoldOut ? "#c0c0c0" : priceColor,
294
326
  top: 0,
295
327
  bottom: 0,
296
- left: "clamp(60%, 65% + (100vw - 1300px) * 0.1, 65%)",
328
+ left: isTrain
329
+ ? "73%"
330
+ : "clamp(60%, 65% + (100vw - 1300px) * 0.1, 65%)",
297
331
  right: 0,
298
332
  justifyContent: isCentered ? "center" : "",
299
333
  gap: "10px",
package/dist/ui/mobileweb/DateTimeSectionMobile.d.ts CHANGED
@@ -22,6 +22,7 @@ interface DateTimeSectionMobileProps {
22
22
  tooltipBgColor?: string;
23
23
  showLastSeats?: boolean;
24
24
  discountSeatPriceColor?: string;
25
+ isTrain?: boolean;
25
26
  }
26
- declare function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, }: DateTimeSectionMobileProps): React.ReactElement;
27
+ declare function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, }: DateTimeSectionMobileProps): React.ReactElement;
27
28
  export default DateTimeSectionMobile;
package/dist/ui/mobileweb/DateTimeSectionMobile.js CHANGED
@@ -23,19 +23,21 @@ const getCleanedDepTime = (raw) => {
23
23
  };
24
24
  const TimeRow = ({ label, icon, alt, date, timeContent, isSoldOut, }) => {
25
25
  const formattedDate = DateService.getServiceItemDate(date);
26
- const dotPositionClass = formattedDate.includes("dom") ? "max-[399px]:left-[53%]" : "";
27
- return React.createElement("div", { className: `flex items-center min-[420]:text-[13px] text-[12px] justify-between ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
26
+ const dotPositionClass = formattedDate.includes("dom")
27
+ ? "max-[399px]:left-[53%]"
28
+ : "";
29
+ return (React.createElement("div", { className: `flex items-center min-[420]:text-[13px] text-[12px] justify-between ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
28
30
  React.createElement("div", { className: "flex items-center", style: { flex: 1 } },
29
31
  React.createElement("div", null,
30
32
  " ",
31
33
  label ? (React.createElement("div", { className: "w-[60px]" }, label)) : (React.createElement("div", { className: "w-[12px] h-auto mr-[5px]" },
32
34
  React.createElement("img", { src: icon, alt: alt, className: `w-[12px] h-auto mr-[5px] ${isSoldOut ? "grayscale" : ""}` })))),
33
35
  React.createElement("div", { className: "flex items-center relative capitalize justify-between", style: { flex: 1 } },
34
- React.createElement("span", { className: "cursor-pointer black-text" }, formattedDate),
36
+ React.createElement("span", { className: "cursor-pointer black-text whitespace-nowrap" }, formattedDate),
35
37
  React.createElement("div", { className: `absolute left-[50%] ${dotPositionClass}` }, "\u2022"),
36
- React.createElement("div", { className: "font-[900] relative black-text" }, timeContent))));
38
+ React.createElement("div", { className: "font-[900] relative black-text whitespace-nowrap" }, timeContent)))));
37
39
  };
38
- function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, }) {
40
+ function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, }) {
39
41
  const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
40
42
  const depTimeContent = isLinatal ? (React.createElement("div", null,
41
43
  React.createElement("span", null,
@@ -47,7 +49,11 @@ function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal
47
49
  ? null
48
50
  : DateService.ampmOnly(depTime)))) : (DateService.formatTime(depTime));
49
51
  return (React.createElement("div", { className: "flex justify-between gap-[5px] w-full", onClick: onBookButtonPress },
50
- React.createElement("div", { className: "min-h-[2.5rem] flex flex-col justify-between gap-[4px] w-[50%] ", style: { justifyContent: isCiva && "center" } },
52
+ React.createElement("div", { className: `flex flex-col gap-[4px] w-[50%] ${isTrain ? "justify-center" : "justify-between"}`, style: {
53
+ justifyContent: isCiva && "center",
54
+ minHeight: isTrain ? undefined : "2.5rem",
55
+ alignSelf: isTrain ? "stretch" : undefined,
56
+ } },
51
57
  React.createElement(TimeRow, { label: orignLabel, icon: originIcon, alt: "origin", date: travelDate, timeContent: depTimeContent, isSoldOut: isSoldOut }),
52
58
  isCiva ? null : (React.createElement(TimeRow, { label: destinationLabel, icon: destinationIcon, alt: "destination", date: arrivalDate, timeContent: DateService.formatTime(arrTime), isSoldOut: isSoldOut }))),
53
59
  React.createElement("div", { style: {
@@ -56,6 +62,6 @@ function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal
56
62
  backgroundColor: "#ccc",
57
63
  margin: "auto",
58
64
  } }),
59
- React.createElement(SeatSectionMobile, { seatTypes: seatTypes, isSoldOut: isSoldOut, isPeru: isPeru, seatPriceColor: seatPriceColor, currencySign: currencySign, availableSeats: availableSeats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, tooltipBgColor: tooltipBgColor, showLastSeats: showLastSeats, discountSeatPriceColor: discountSeatPriceColor })));
65
+ React.createElement(SeatSectionMobile, { seatTypes: seatTypes, isSoldOut: isSoldOut, isPeru: isPeru, seatPriceColor: seatPriceColor, currencySign: currencySign, availableSeats: availableSeats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, tooltipBgColor: tooltipBgColor, showLastSeats: showLastSeats, discountSeatPriceColor: discountSeatPriceColor, isTrain: isTrain })));
60
66
  }
61
67
  export default DateTimeSectionMobile;
package/dist/ui/mobileweb/SeatSectionMobile.d.ts CHANGED
@@ -16,6 +16,7 @@ interface SeatSectionMobileProps {
16
16
  tooltipBgColor?: string;
17
17
  showLastSeats?: boolean;
18
18
  discountSeatPriceColor?: string;
19
+ isTrain?: boolean;
19
20
  }
20
- declare function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, }: SeatSectionMobileProps): React.ReactElement;
21
+ declare function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, }: SeatSectionMobileProps): React.ReactElement;
21
22
  export default SeatSectionMobile;
package/dist/ui/mobileweb/SeatSectionMobile.js CHANGED
@@ -11,7 +11,7 @@ const EXCEPTIONS = [
11
11
  "blanco",
12
12
  "asiento_mascota",
13
13
  ];
14
- const SeatRow = ({ type, index, displayLabel, fare, isSoldOut, seatPriceColor, hasMultipleTypes, textSize, }) => {
14
+ const SeatRow = ({ type, index, displayLabel, fare, isSoldOut, seatPriceColor, hasMultipleTypes, textSize, isTrain, }) => {
15
15
  if (EXCEPTIONS.includes(type.label))
16
16
  return null;
17
17
  const rowClass = hasMultipleTypes
@@ -20,7 +20,9 @@ const SeatRow = ({ type, index, displayLabel, fare, isSoldOut, seatPriceColor, h
20
20
  const labelColor = isSoldOut ? "#bbb" : "#464647";
21
21
  const priceColor = isSoldOut ? "#bbb" : seatPriceColor;
22
22
  return (React.createElement("div", { className: rowClass, key: index },
23
- React.createElement("span", { className: `min-[420]:text-[13px] ${textSize} `, style: { color: labelColor } }, displayLabel),
23
+ React.createElement("span", { className: `min-[420]:text-[13px] ${textSize} `, style: { color: labelColor } }, isTrain
24
+ ? commonService.truncateSeatLabel(commonService.capitalize(displayLabel), 8)
25
+ : displayLabel),
24
26
  React.createElement("span", { className: `min-[420]:text-[13px] ${textSize} bold-text`, style: { color: priceColor } }, fare)));
25
27
  };
26
28
  const getFilteredSeats = (item) => {
@@ -42,8 +44,8 @@ const getUniqueSeats = (data, limit) => {
42
44
  .sort((a, b) => a.fare - b.fare)
43
45
  .slice(0, limit);
44
46
  };
45
- function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, }) {
46
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
47
+ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, }) {
48
+ var _a, _b, _c, _d, _e, _f, _g;
47
49
  const hasMultipleTypes = ((_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.length) !== null && _a !== void 0 ? _a : 0) > 2;
48
50
  const getFare = (fare) => {
49
51
  if (removeDuplicateSeats && availableSeats <= 0 && !isPeru) {
@@ -64,7 +66,8 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
64
66
  if (lowestFare === null)
65
67
  return null;
66
68
  const priceColor = isSoldOut ? "#bbb" : seatPriceColor;
67
- const isMovilBus = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus" || "Movil Bus";
69
+ const isMovilBus = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus" ||
70
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "Movil Bus";
68
71
  // Fetch ALL unique seats (no slice limit) for the multi-row MovilBus case
69
72
  const uniqueSeats = getUniqueSeats(seatTypesData !== null && seatTypesData !== void 0 ? seatTypesData : [], Infinity);
70
73
  // MovilBus + multiple unique seat types → render a row per seat
@@ -72,7 +75,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
72
75
  return (React.createElement(React.Fragment, null, uniqueSeats.map((seat, key) => {
73
76
  const { discountedPrice } = commonService.calculateDiscountedPrice(Number(seat.fare), serviceItem);
74
77
  return (React.createElement("div", { key: key, className: "w-[100%] flex flex-row justify-between items-center" },
75
- React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: isSoldOut ? "#bbb" : "#464647" } }, commonService.truncateSeatLabel(seat.label)),
78
+ React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text whitespace-nowrap", style: { color: isSoldOut ? "#bbb" : "#464647" } }, commonService.truncateSeatLabel(seat.label)),
76
79
  React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: priceColor } }, commonService.currency(discountedPrice, currencySign))));
77
80
  })));
78
81
  }
@@ -117,19 +120,24 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
117
120
  React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] text-[#464647]", style: { opacity: isSoldOut ? 0.5 : 1 } }, "Agotado"))) : null));
118
121
  };
119
122
  const renderSeats = () => {
120
- var _a, _b, _c;
123
+ var _a, _b;
121
124
  if (isPeru) {
122
125
  return renderPeruSeats();
123
126
  }
124
127
  if (removeDuplicateSeats) {
125
128
  const uniqueSeats = getUniqueSeats(seatTypesData, 3);
126
- 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]" })));
129
+ 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 })));
127
130
  }
128
- return (_c = (_b = (_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)) === null || _b === void 0 ? void 0 : _b.slice(0, 2)) === null || _c === void 0 ? void 0 : _c.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]" })));
131
+ 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);
132
+ 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 })));
129
133
  };
130
134
  const seats = removeDuplicateSeats
131
135
  ? getUniqueSeats(seatTypesData, 3)
132
- : (_c = (_b = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label))) === null || _b === void 0 ? void 0 : _b.sort((a, b) => a.fare - b.fare)) === null || _c === void 0 ? void 0 : _c.slice(0, 2);
136
+ : (() => {
137
+ var _a;
138
+ const filtered = (_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);
139
+ return isTrain ? filtered : filtered === null || filtered === void 0 ? void 0 : filtered.slice(0, 2);
140
+ })();
133
141
  const discountedSeats = seats === null || seats === void 0 ? void 0 : seats.map((seat) => (Object.assign(Object.assign({}, seat), commonService.calculateDiscountedPrice(seat.fare, serviceItem))));
134
142
  const peruLowestFare = isPeru ? getLowestFare() : null;
135
143
  const peruDiscountCalc = isPeru && peruLowestFare != null
@@ -140,7 +148,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
140
148
  peruDiscountCalc.originalPrice !== peruDiscountCalc.discountedPrice
141
149
  : discountedSeats === null || discountedSeats === void 0 ? void 0 : discountedSeats.some((s) => s.originalPrice !== s.discountedPrice);
142
150
  const discountSeat = isPeru && peruDiscountCalc
143
- ? Object.assign({ label: "", fare: peruLowestFare }, peruDiscountCalc) : (_d = discountedSeats === null || discountedSeats === void 0 ? void 0 : discountedSeats.filter((seat) => !EXCEPTIONS.includes(seat.label))) === null || _d === void 0 ? void 0 : _d.sort((a, b) => a.discountedPrice - b.discountedPrice)[0];
151
+ ? Object.assign({ label: "", fare: peruLowestFare }, peruDiscountCalc) : (_b = discountedSeats === null || discountedSeats === void 0 ? void 0 : discountedSeats.filter((seat) => !EXCEPTIONS.includes(seat.label))) === null || _b === void 0 ? void 0 : _b.sort((a, b) => a.discountedPrice - b.discountedPrice)[0];
144
152
  const discountValue = (() => {
145
153
  if ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_type) === "percentage" &&
146
154
  typeof (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) === "number") {
@@ -176,14 +184,14 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
176
184
  };
177
185
  const originalDpPrice = getMinValue(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.original_dp_price);
178
186
  const dpDiscountPercent = getMinValue(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents);
179
- const firstSeatFare = (_f = (_e = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label) && !EXCEPTIONS.includes(item.label))) === null || _e === void 0 ? void 0 : _e.sort((a, b) => a.fare - b.fare)[0]) === null || _f === void 0 ? void 0 : _f.fare;
187
+ const firstSeatFare = (_d = (_c = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label) && !EXCEPTIONS.includes(item.label))) === null || _c === void 0 ? void 0 : _c.sort((a, b) => a.fare - b.fare)[0]) === null || _d === void 0 ? void 0 : _d.fare;
180
188
  const hasDpDiscount = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) &&
181
189
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) &&
182
190
  originalDpPrice != null &&
183
191
  dpDiscountPercent != null &&
184
192
  firstSeatFare != null;
185
193
  return (React.createElement("div", { className: "content-center relative", style: { width: "40%" } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
186
- !((_g = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) === null || _g === void 0 ? void 0 : _g.length) &&
194
+ !((_e = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) === null || _e === void 0 ? void 0 : _e.length) &&
187
195
  !dpDiscountPercent ? (React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem]", style: { gap: isSoldOut ? "0px" : "5px" } }, renderDpSeats())) : hasDpDiscount ? (React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] " },
188
196
  !isNaN(Number(dpDiscountPercent)) &&
189
197
  Number(dpDiscountPercent) > 0 && (React.createElement("div", { className: "absolute -top-[18px] right-[0px]", style: {
@@ -215,7 +223,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
215
223
  React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: {
216
224
  color: isSoldOut ? "#bbb" : discountSeatPriceColor || "#ff5964",
217
225
  } },
218
- ((_h = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _h === void 0 ? void 0 : _h.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { filter: isSoldOut ? "grayscale" : "" } })) : null,
226
+ ((_f = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _f === void 0 ? void 0 : _f.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { filter: isSoldOut ? "grayscale" : "" } })) : null,
219
227
  commonService.discountedCurrency(Number(firstSeatFare), currencySign)),
220
228
  isSoldOut ? (React.createElement("span", { className: "col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]" }, "Agotado")) : null)) : hasDiscount && discountSeat ? (React.createElement("div", null,
221
229
  React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] " },
@@ -249,8 +257,8 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
249
257
  React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: {
250
258
  color: isSoldOut ? "#bbb" : discountSeatPriceColor || "#ff5964",
251
259
  } },
252
- ((_j = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _j === void 0 ? void 0 : _j.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { opacity: isSoldOut ? 0.5 : 1 } })) : null,
253
- commonService.discountedCurrency(discountSeat.discountedPrice, currencySign))))) : (React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem] ", style: {
260
+ ((_g = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _g === void 0 ? void 0 : _g.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { opacity: isSoldOut ? 0.5 : 1 } })) : null,
261
+ commonService.discountedCurrency(discountSeat.discountedPrice, currencySign))))) : (React.createElement("div", { className: `flex flex-col justify-between ${isTrain ? "" : "h-[2.5rem]"} `, style: {
254
262
  gap: isSoldOut ? "0px" : "5px",
255
263
  justifyContent: hasMultipleTypes ? "space-between" : "center",
256
264
  } },
package/dist/utils/CommonService.d.ts CHANGED
@@ -3,7 +3,7 @@ declare const commonService: {
3
3
  discountedCurrency(amount: number, currencySign?: string): string;
4
4
  copyObject: (ob: any) => any;
5
5
  getServiceTypeLabelForFilters: (service_type: any) => "Tipo de servicio" | "Punto de embarque" | "Tipo de asiento" | "SERVICIOS" | "";
6
- truncateSeatLabel: (label: string | number) => string;
6
+ truncateSeatLabel: (label: string | number, maxLength?: number) => string;
7
7
  getAmenitiesImage: (name: string, serviceItem: any) => string;
8
8
  getAmenityName: (rawAmenity: string) => string;
9
9
  getSeatNameForFilters: (rawSeat: any) => any;
package/dist/utils/CommonService.js CHANGED
@@ -34,11 +34,15 @@ const commonService = {
34
34
  return "";
35
35
  }
36
36
  },
37
- truncateSeatLabel: (label) => {
37
+ truncateSeatLabel: (label, maxLength) => {
38
38
  if (typeof label !== "string")
39
39
  return String(label);
40
40
  if (label.includes("("))
41
41
  return label;
42
+ // If maxLength provided, hard-truncate regardless of word count
43
+ if (maxLength != null && label.length > maxLength) {
44
+ return label.slice(0, maxLength) + "...";
45
+ }
42
46
  const words = label.trim().split(/\s+/);
43
47
  const truncateWord = (word) => word.length > 5 ? word.slice(0, 3) + "..." : word;
44
48
  if (words.length === 1)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "9.11.6",
3
+ "version": "9.11.8",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"