kupos-ui-components-lib 10.4.16 → 10.4.18

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.
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  import { ServiceItemProps } from "./types";
3
- declare function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isSeatIcon, showAvailableSeats, isPeru, siteType, isAllinBus, viewersConfig, isExpand, setIsExpand, coachKey, isLoggedIn, showLoginModal, isFlores, isNewUiEnabled, showLoginOption, t, }: ServiceItemProps & {
3
+ declare function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isSeatIcon, showAvailableSeats, isPeru, siteType, isAllinBus, viewersConfig, isExpand, setIsExpand, coachKey, isLoggedIn, showLoginModal, isFlores, isNewUiEnabled, showLoginOption, priority_stage_ids, t, }: ServiceItemProps & {
4
4
  currencySign?: string;
5
5
  }): React.ReactElement;
6
6
  export default PeruServiceItemDesktop;
@@ -66,7 +66,7 @@ const ANIMATION_MAP = {
66
66
  opsites: dotAnimation,
67
67
  },
68
68
  };
69
- function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isSeatIcon, showAvailableSeats, isPeru, siteType, isAllinBus, viewersConfig, isExpand, setIsExpand, coachKey, isLoggedIn, showLoginModal, isFlores, isNewUiEnabled, showLoginOption, t = (key) => key, }) {
69
+ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isSeatIcon, showAvailableSeats, isPeru, siteType, isAllinBus, viewersConfig, isExpand, setIsExpand, coachKey, isLoggedIn, showLoginModal, isFlores, isNewUiEnabled, showLoginOption, priority_stage_ids, t = (key) => key, }) {
70
70
  var _a, _b, _c, _d, _e;
71
71
  const getAnimationIcon = (icon) => {
72
72
  var _a;
@@ -94,10 +94,21 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
94
94
  const labelId = typeof serviceItem.boarding_stages === "string"
95
95
  ? serviceItem.boarding_stages.split("|")[0]
96
96
  : "";
97
- const showTopLabel = busStage &&
98
- busStage[labelId] &&
99
- busStage[labelId].split("|")[1] === "true" &&
100
- busStage[labelId].split("|")[0];
97
+ const showTopLabel = (() => {
98
+ if (!busStage || !busStage[labelId])
99
+ return false;
100
+ const stageValue = busStage[labelId];
101
+ const isVisible = stageValue.split("|")[1] === "true";
102
+ const label = stageValue.split("|")[0];
103
+ if (!isVisible || !label)
104
+ return false;
105
+ // If priority_stage_ids is provided and non-empty, only show the label
106
+ // when the current labelId is included in that list.
107
+ if (priority_stage_ids && priority_stage_ids.length > 0) {
108
+ return priority_stage_ids.includes(labelId) ? label : false;
109
+ }
110
+ return label;
111
+ })();
101
112
  let isSoldOut = serviceItem.available_seats <= 0;
102
113
  const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true;
103
114
  const renderIcon = (iconKey, size = "14px") => {
@@ -473,6 +484,6 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
473
484
  } }, "\u00A1\u00DAltimos Asientos!")))) : null)),
474
485
  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 && setIsExpand(isItemExpanded ? null : serviceItem.id), isPeru: isPeru }))),
475
486
  children,
476
- React.createElement(ServiceBadges, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, translation: translation, serviceItem: serviceItem, isAllinBus: isAllinBus, boardingName: boardingName, getAnimationIcon: getAnimationIcon })));
487
+ React.createElement(ServiceBadges, { showTopLabel: showTopLabel || undefined, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, translation: translation, serviceItem: serviceItem, isAllinBus: isAllinBus, boardingName: boardingName, getAnimationIcon: getAnimationIcon })));
477
488
  }
478
489
  export default PeruServiceItemDesktop;
@@ -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, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, 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, priority_stage_ids, }: ServiceItemProps & {
4
4
  currencySign?: string;
5
5
  }): React.ReactElement;
6
6
  export default ServiceItemPB;
@@ -87,7 +87,7 @@ 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, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, 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, priority_stage_ids, }) {
91
91
  var _a, _b, _c;
92
92
  const handleSeatSelect = (key, price, seatKey, apiSeatType) => {
93
93
  onClearSeatSelectionError === null || onClearSeatSelectionError === void 0 ? void 0 : onClearSeatSelectionError();
@@ -119,10 +119,21 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
119
119
  const labelId = typeof serviceItem.boarding_stages === "string"
120
120
  ? serviceItem.boarding_stages.split("|")[0]
121
121
  : "";
122
- const showTopLabel = busStage &&
123
- busStage[labelId] &&
124
- busStage[labelId].split("|")[1] === "true" &&
125
- busStage[labelId].split("|")[0];
122
+ const showTopLabel = (() => {
123
+ if (!busStage || !busStage[labelId])
124
+ return false;
125
+ const stageValue = busStage[labelId];
126
+ const isVisible = stageValue.split("|")[1] === "true";
127
+ const label = stageValue.split("|")[0];
128
+ if (!isVisible || !label)
129
+ return false;
130
+ // If priority_stage_ids is provided and non-empty, only show the label
131
+ // when the current labelId is included in that list.
132
+ if (priority_stage_ids && priority_stage_ids.length > 0) {
133
+ return priority_stage_ids.includes(labelId) ? label : false;
134
+ }
135
+ return label;
136
+ })();
126
137
  let isSoldOut = serviceItem.available_seats <= 0;
127
138
  const isItemExpanded = serviceItem.id === isExpand || isExpand === true;
128
139
  const grayscaleClass = isSoldOut ? "grayscale" : "";
@@ -377,6 +388,6 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
377
388
  : {})) },
378
389
  React.createElement(ExpandedDropdown, { serviceItem: serviceItem, isPeru: isPeru, translation: translation, getAnimationIcon: getAnimationIcon, isChangeTicket: serviceItem.is_change_ticket === true, isSoldOut: isSoldOut, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, renderIcon: renderIcon, operatorLabel: operatorLabel })))),
379
390
  children,
380
- React.createElement(ServiceBadges, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, translation: translation, serviceItem: serviceItem })))));
391
+ React.createElement(ServiceBadges, { showTopLabel: showTopLabel || undefined, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, translation: translation, serviceItem: serviceItem })))));
381
392
  }
382
393
  export default ServiceItemPB;
@@ -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, operatorLabel, isTrain, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, isAllinBus, isPeruSite, }: 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, isAllinBus, isPeruSite, priority_stage_ids, }: MobileServiceItemProps): React.ReactElement;
4
4
  export default ServiceItemMobile;
@@ -19,7 +19,7 @@ const exceptions = [
19
19
  "blanco",
20
20
  "asiento_mascota",
21
21
  ];
22
- 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, isAllinBus, isPeruSite, }) {
22
+ 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, isAllinBus, isPeruSite, priority_stage_ids, }) {
23
23
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
24
24
  const isItemExpanded = serviceItem.id === isExpanded;
25
25
  const isPetSeat = (Object.keys(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.pet_seat_info) || []).length > 0;
@@ -48,10 +48,21 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
48
48
  const labelId = typeof serviceItem.boarding_stages === "string"
49
49
  ? serviceItem.boarding_stages.split("|")[0]
50
50
  : "";
51
- const showTopLabel = busStage &&
52
- busStage[labelId] &&
53
- busStage[labelId].split("|")[1] === "true" &&
54
- busStage[labelId].split("|")[0];
51
+ const showTopLabel = (() => {
52
+ if (!busStage || !busStage[labelId])
53
+ return false;
54
+ const stageValue = busStage[labelId];
55
+ const isVisible = stageValue.split("|")[1] === "true";
56
+ const label = stageValue.split("|")[0];
57
+ if (!isVisible || !label)
58
+ return false;
59
+ // If priority_stage_ids is provided and non-empty, only show the label
60
+ // when the current labelId is included in that list.
61
+ if (priority_stage_ids && priority_stage_ids.length > 0) {
62
+ return priority_stage_ids.includes(labelId) ? label : false;
63
+ }
64
+ return label;
65
+ })();
55
66
  const getServiceStars = (serviceItem) => {
56
67
  try {
57
68
  return serviceItem.operator_details && serviceItem.operator_details[1]
@@ -103,7 +114,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
103
114
  const dropoffName = ((_f = serviceItem.stage_details_arr) === null || _f === void 0 ? void 0 : _f.length)
104
115
  ? extractStage(serviceItem.stage_details_arr, 1)
105
116
  : null;
106
- return (React.createElement(React.Fragment, null, isPeruSite ? (React.createElement(PeruServiceItemMobile, { serviceItem: serviceItem, onBookButtonPress: onBookButtonPress, colors: colors, busStage: busStage, orignLabel: orignLabel, destinationLabel: destinationLabel, amenitiesData: amenitiesData, setShowDropdown: setShowDropdown, showDropdown: showDropdown, isExpanded: isExpanded, setIsExpanded: setIsExpanded, setAmenetiesAtomValue: setAmenetiesAtomValue, isCiva: isCiva, currencySign: currencySign, isPeru: isPeru, showRating: showRating, showLastSeats: showLastSeats, removeDuplicateSeats: removeDuplicateSeats, isLinatal: isLinatal, viewersConfig: viewersConfig, operatorLabel: operatorLabel, isTrain: isTrain, isFeatureDropDownExpand: isFeatureDropDownExpand, setIsFeatureDropDownExpand: setIsFeatureDropDownExpand, ticketQuantity: ticketQuantity, onIncreaseTicketQuantity: onIncreaseTicketQuantity, onDecreaseTicketQuantity: onDecreaseTicketQuantity, cityOrigin: cityOrigin, cityDestination: cityDestination, isNewUiEnabled: isNewUiEnabled, onRemateUiButtonClick: onRemateUiButtonClick, selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle, wowDealData: wowDealData, isFlores: isFlores, isAllinBus: isAllinBus })) : isNewUi && !isTrain ? (React.createElement(FeatureServiceUiMobile, { serviceItem: serviceItem, showTopLabel: showTopLabel, colors: colors, isSoldOut: isSoldOut, cityOrigin: cityOrigin, cityDestination: cityDestination, renderIcon: renderIcon, viewersConfig: viewersConfig, isFeatureDropDownExpand: isFeatureDropDownExpand, ticketQuantity: ticketQuantity, onIncreaseTicketQuantity: onIncreaseTicketQuantity, onDecreaseTicketQuantity: onDecreaseTicketQuantity, onBookButtonPress: onRemateUiButtonClick, onToggleExpand: () => setIsFeatureDropDownExpand &&
117
+ return (React.createElement(React.Fragment, null, isPeruSite ? (React.createElement(PeruServiceItemMobile, { serviceItem: serviceItem, onBookButtonPress: onBookButtonPress, colors: colors, busStage: busStage, orignLabel: orignLabel, destinationLabel: destinationLabel, amenitiesData: amenitiesData, setShowDropdown: setShowDropdown, showDropdown: showDropdown, isExpanded: isExpanded, setIsExpanded: setIsExpanded, setAmenetiesAtomValue: setAmenetiesAtomValue, isCiva: isCiva, currencySign: currencySign, isPeru: isPeru, showRating: showRating, showLastSeats: showLastSeats, removeDuplicateSeats: removeDuplicateSeats, isLinatal: isLinatal, viewersConfig: viewersConfig, operatorLabel: operatorLabel, isTrain: isTrain, isFeatureDropDownExpand: isFeatureDropDownExpand, setIsFeatureDropDownExpand: setIsFeatureDropDownExpand, ticketQuantity: ticketQuantity, onIncreaseTicketQuantity: onIncreaseTicketQuantity, onDecreaseTicketQuantity: onDecreaseTicketQuantity, cityOrigin: cityOrigin, cityDestination: cityDestination, isNewUiEnabled: isNewUiEnabled, onRemateUiButtonClick: onRemateUiButtonClick, selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle, wowDealData: wowDealData, isFlores: isFlores, isAllinBus: isAllinBus })) : isNewUi && !isTrain ? (React.createElement(FeatureServiceUiMobile, { serviceItem: serviceItem, showTopLabel: showTopLabel || undefined, colors: colors, isSoldOut: isSoldOut, cityOrigin: cityOrigin, cityDestination: cityDestination, renderIcon: renderIcon, viewersConfig: viewersConfig, isFeatureDropDownExpand: isFeatureDropDownExpand, ticketQuantity: ticketQuantity, onIncreaseTicketQuantity: onIncreaseTicketQuantity, onDecreaseTicketQuantity: onDecreaseTicketQuantity, onBookButtonPress: onRemateUiButtonClick, onToggleExpand: () => setIsFeatureDropDownExpand &&
107
118
  setIsFeatureDropDownExpand(isFeatureDropDownExpand === serviceItem.id ||
108
119
  isFeatureDropDownExpand === true
109
120
  ? null
@@ -150,7 +161,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
150
161
  React.createElement(BottomAmenitiesMobile, { isSoldOut: isSoldOut, amenitiesNodes: amenities(), hoursIcon: renderIcon("hours", "14px"), duration: (_j = serviceItem.duration) === null || _j === void 0 ? void 0 : _j.toString(), isDirectTrip: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip, directoColor: colors.directoColor, directoAnim: serviceItem.icons.directoAnim, isChangeTicket: serviceItem.is_change_ticket, isPetSeat: isPetSeat, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, flexibleAnim: serviceItem.icons.flexibleAnim, isTrackingEnabled: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled, locationAnim: serviceItem.icons.locationAnim, downArrowIcon: serviceItem.icons.downArrow, showDropdown: isItemExpanded, setShowDropdown: () => setIsExpanded(isItemExpanded ? null : serviceItem.id), onDropdownToggle: () => {
151
162
  setIsExpanded(isItemExpanded ? null : serviceItem.id);
152
163
  }, isPeru: isPeru, femaleAnim: serviceItem.icons.femaleAnim, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, isTrain: isTrain })),
153
- React.createElement(ServiceBadgesMobile, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, serviceItem: serviceItem, isConexion: isConexion, isAllinBus: isAllinBus, boardingName: boardingName })),
164
+ React.createElement(ServiceBadgesMobile, { showTopLabel: showTopLabel || undefined, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, serviceItem: serviceItem, isConexion: isConexion, isAllinBus: isAllinBus, boardingName: boardingName })),
154
165
  hasOfferText &&
155
166
  (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1) &&
156
167
  !isSoldOut &&
@@ -244,4 +244,5 @@ export interface MobileServiceItemProps {
244
244
  operatorLabel?: string;
245
245
  isAllinBus?: any;
246
246
  isPeruSite?: boolean;
247
+ priority_stage_ids?: string[];
247
248
  }
@@ -265,4 +265,5 @@ export interface ServiceItemProps {
265
265
  isNewUiEnabled?: boolean;
266
266
  isFlores?: boolean;
267
267
  operatorLabel?: string;
268
+ priority_stage_ids?: string[];
268
269
  }
@@ -145,7 +145,6 @@ export const PaymentCardMobile = (props) => {
145
145
  activeDate && (React.createElement("div", { style: {
146
146
  fontSize: "11px",
147
147
  color: "#555",
148
- textTransform: "capitalize",
149
148
  whiteSpace: "nowrap",
150
149
  borderRadius: "12px",
151
150
  padding: "4px 10px",
@@ -313,7 +312,7 @@ export const PaymentCardMobile = (props) => {
313
312
  display: "flex",
314
313
  flexDirection: "column",
315
314
  gap: "12px",
316
- marginBottom: "30px",
315
+ marginBottom: "20px",
317
316
  // borderBottom: "1px solid #f0f0f0",
318
317
  } },
319
318
  React.createElement("div", { className: "flex items-center gap-[12px] leading-[1.5]" },
@@ -344,7 +343,11 @@ export const PaymentCardMobile = (props) => {
344
343
  fontSize: "13px",
345
344
  marginTop: "2px",
346
345
  } }, formatSubText(modalDroppingStage, modalDroppingTime)))))),
347
- React.createElement("div", { style: S.section, className: "mt-[30px]" },
346
+ React.createElement("div", { style: {
347
+ borderTop: "1.5px dashed #464647",
348
+ margin: "14px 0",
349
+ } }),
350
+ React.createElement("div", { style: S.section, className: "mt-[20px]" },
348
351
  React.createElement("div", { style: S.sectionTitle, className: "bold-text" }, "Viaje"),
349
352
  React.createElement("div", { style: S.sectionRow },
350
353
  React.createElement("span", { style: { flex: 1 } }, "Empresa"),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "10.4.16",
3
+ "version": "10.4.18",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -110,6 +110,7 @@ function PeruServiceItemDesktop({
110
110
  isFlores,
111
111
  isNewUiEnabled,
112
112
  showLoginOption,
113
+ priority_stage_ids,
113
114
  t = (key: string) => key,
114
115
  }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
115
116
  const getAnimationIcon = (icon: string) => {
@@ -163,11 +164,19 @@ function PeruServiceItemDesktop({
163
164
  ? serviceItem.boarding_stages.split("|")[0]
164
165
  : "";
165
166
 
166
- const showTopLabel =
167
- busStage &&
168
- busStage[labelId] &&
169
- busStage[labelId].split("|")[1] === "true" &&
170
- busStage[labelId].split("|")[0];
167
+ const showTopLabel = (() => {
168
+ if (!busStage || !busStage[labelId]) return false;
169
+ const stageValue = busStage[labelId];
170
+ const isVisible = stageValue.split("|")[1] === "true";
171
+ const label = stageValue.split("|")[0];
172
+ if (!isVisible || !label) return false;
173
+ // If priority_stage_ids is provided and non-empty, only show the label
174
+ // when the current labelId is included in that list.
175
+ if (priority_stage_ids && priority_stage_ids.length > 0) {
176
+ return priority_stage_ids.includes(labelId) ? label : false;
177
+ }
178
+ return label;
179
+ })();
171
180
 
172
181
  let isSoldOut = serviceItem.available_seats <= 0;
173
182
  const hasDpEnabled = serviceItem?.is_dp_enabled === true;
@@ -1034,7 +1043,7 @@ function PeruServiceItemDesktop({
1034
1043
  )} */}
1035
1044
 
1036
1045
  <ServiceBadges
1037
- showTopLabel={showTopLabel}
1046
+ showTopLabel={showTopLabel || undefined}
1038
1047
  isSoldOut={isSoldOut}
1039
1048
  colors={colors}
1040
1049
  renderIcon={renderIcon}
@@ -151,6 +151,7 @@ function ServiceItemPB({
151
151
  wowDealData,
152
152
  isFlores,
153
153
  operatorLabel,
154
+ priority_stage_ids,
154
155
  }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
155
156
  const handleSeatSelect = (
156
157
  key: any,
@@ -211,11 +212,19 @@ function ServiceItemPB({
211
212
  ? serviceItem.boarding_stages.split("|")[0]
212
213
  : "";
213
214
 
214
- const showTopLabel =
215
- busStage &&
216
- busStage[labelId] &&
217
- busStage[labelId].split("|")[1] === "true" &&
218
- busStage[labelId].split("|")[0];
215
+ const showTopLabel = (() => {
216
+ if (!busStage || !busStage[labelId]) return false;
217
+ const stageValue = busStage[labelId];
218
+ const isVisible = stageValue.split("|")[1] === "true";
219
+ const label = stageValue.split("|")[0];
220
+ if (!isVisible || !label) return false;
221
+ // If priority_stage_ids is provided and non-empty, only show the label
222
+ // when the current labelId is included in that list.
223
+ if (priority_stage_ids && priority_stage_ids.length > 0) {
224
+ return priority_stage_ids.includes(labelId) ? label : false;
225
+ }
226
+ return label;
227
+ })();
219
228
 
220
229
  let isSoldOut = serviceItem.available_seats <= 0;
221
230
 
@@ -794,7 +803,7 @@ function ServiceItemPB({
794
803
 
795
804
  {children}
796
805
  <ServiceBadges
797
- showTopLabel={showTopLabel}
806
+ showTopLabel={showTopLabel || undefined}
798
807
  isSoldOut={isSoldOut}
799
808
  colors={colors}
800
809
  renderIcon={renderIcon}
@@ -66,6 +66,7 @@ function ServiceItemMobile({
66
66
  isFlores,
67
67
  isAllinBus,
68
68
  isPeruSite,
69
+ priority_stage_ids,
69
70
  }: MobileServiceItemProps): React.ReactElement {
70
71
  const isItemExpanded = serviceItem.id === isExpanded;
71
72
  const isPetSeat = (Object.keys(serviceItem?.pet_seat_info) || []).length > 0;
@@ -111,11 +112,19 @@ function ServiceItemMobile({
111
112
  ? serviceItem.boarding_stages.split("|")[0]
112
113
  : "";
113
114
 
114
- const showTopLabel =
115
- busStage &&
116
- busStage[labelId] &&
117
- busStage[labelId].split("|")[1] === "true" &&
118
- busStage[labelId].split("|")[0];
115
+ const showTopLabel = (() => {
116
+ if (!busStage || !busStage[labelId]) return false;
117
+ const stageValue = busStage[labelId];
118
+ const isVisible = stageValue.split("|")[1] === "true";
119
+ const label = stageValue.split("|")[0];
120
+ if (!isVisible || !label) return false;
121
+ // If priority_stage_ids is provided and non-empty, only show the label
122
+ // when the current labelId is included in that list.
123
+ if (priority_stage_ids && priority_stage_ids.length > 0) {
124
+ return priority_stage_ids.includes(labelId) ? label : false;
125
+ }
126
+ return label;
127
+ })();
119
128
 
120
129
  const getServiceStars = (serviceItem) => {
121
130
  try {
@@ -242,7 +251,7 @@ function ServiceItemMobile({
242
251
  ) : isNewUi && !isTrain ? (
243
252
  <FeatureServiceUiMobile
244
253
  serviceItem={serviceItem}
245
- showTopLabel={showTopLabel}
254
+ showTopLabel={showTopLabel || undefined}
246
255
  colors={colors}
247
256
  isSoldOut={isSoldOut}
248
257
  cityOrigin={cityOrigin}
@@ -444,7 +453,7 @@ function ServiceItemMobile({
444
453
  </div>
445
454
 
446
455
  <ServiceBadgesMobile
447
- showTopLabel={showTopLabel}
456
+ showTopLabel={showTopLabel || undefined}
448
457
  isSoldOut={isSoldOut}
449
458
  colors={colors}
450
459
  renderIcon={renderIcon}
@@ -256,4 +256,5 @@ export interface MobileServiceItemProps {
256
256
  operatorLabel?: string;
257
257
  isAllinBus?: any;
258
258
  isPeruSite?: boolean;
259
+ priority_stage_ids?: string[];
259
260
  }
@@ -277,4 +277,5 @@ export interface ServiceItemProps {
277
277
  isNewUiEnabled?: boolean;
278
278
  isFlores?: boolean;
279
279
  operatorLabel?: string;
280
+ priority_stage_ids?: string[];
280
281
  }
@@ -250,7 +250,6 @@ export const PaymentCardMobile: React.FC<PaymentSideBarProps> = (props) => {
250
250
  style={{
251
251
  fontSize: "11px",
252
252
  color: "#555",
253
- textTransform: "capitalize",
254
253
  whiteSpace: "nowrap",
255
254
  borderRadius: "12px",
256
255
  padding: "4px 10px",
@@ -524,7 +523,7 @@ export const PaymentCardMobile: React.FC<PaymentSideBarProps> = (props) => {
524
523
  display: "flex",
525
524
  flexDirection: "column",
526
525
  gap: "12px",
527
- marginBottom: "30px",
526
+ marginBottom: "20px",
528
527
  // borderBottom: "1px solid #f0f0f0",
529
528
  }}
530
529
  >
@@ -603,8 +602,16 @@ export const PaymentCardMobile: React.FC<PaymentSideBarProps> = (props) => {
603
602
  </div>
604
603
  </div>
605
604
 
605
+ {/* Dashed separator */}
606
+ <div
607
+ style={{
608
+ borderTop: "1.5px dashed #464647",
609
+ margin: "14px 0",
610
+ }}
611
+ />
612
+
606
613
  {/* ── VIAJE ── */}
607
- <div style={S.section} className="mt-[30px]">
614
+ <div style={S.section} className="mt-[20px]">
608
615
  <div style={S.sectionTitle} className="bold-text">
609
616
  Viaje
610
617
  </div>