kupos-ui-components-lib 9.11.8 → 9.11.10

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 (22) hide show
  1. package/dist/components/ServiceItem/PeruServiceItemDesktop.js +3 -3
  2. package/dist/components/ServiceItem/ServiceItemDesktop.js +3 -3
  3. package/dist/components/ServiceItem/ServiceItemMobile.d.ts +1 -1
  4. package/dist/components/ServiceItem/ServiceItemMobile.js +20 -8
  5. package/dist/components/ServiceItem/mobileTypes.d.ts +2 -0
  6. package/dist/styles.css +3 -0
  7. package/dist/ui/OfferBanner.d.ts +1 -0
  8. package/dist/ui/OfferBanner.js +6 -2
  9. package/dist/ui/SeatSection/SeatSection.js +2 -2
  10. package/dist/ui/ServiceBadges/ServiceBadges.d.ts +3 -0
  11. package/dist/ui/ServiceBadges/ServiceBadges.js +9 -2
  12. package/dist/ui/mobileweb/ServiceBadgesMobile.d.ts +2 -0
  13. package/dist/ui/mobileweb/ServiceBadgesMobile.js +31 -2
  14. package/package.json +1 -1
  15. package/src/components/ServiceItem/PeruServiceItemDesktop.tsx +5 -2
  16. package/src/components/ServiceItem/ServiceItemDesktop.tsx +4 -4
  17. package/src/components/ServiceItem/ServiceItemMobile.tsx +22 -1
  18. package/src/components/ServiceItem/mobileTypes.ts +2 -0
  19. package/src/ui/OfferBanner.tsx +7 -1
  20. package/src/ui/SeatSection/SeatSection.tsx +2 -2
  21. package/src/ui/ServiceBadges/ServiceBadges.tsx +30 -0
  22. package/src/ui/mobileweb/ServiceBadgesMobile.tsx +49 -0
package/dist/components/ServiceItem/PeruServiceItemDesktop.js CHANGED
@@ -461,12 +461,12 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
461
461
  React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru, renderIcon: renderIcon, discountSeatPriceColor: colors.discountSeatPriceColor })),
462
462
  React.createElement("div", { className: "relative" },
463
463
  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 }),
464
- 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 &&
465
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[12px] mt-1 text-center", style: {
464
+ showLastSeats ? (React.createElement("div", { className: "flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[36px]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
465
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[11px] mt-1 text-center whitespace-nowrap", style: {
466
466
  color: colors.seatPriceColor,
467
467
  } }, "\u00A1\u00DAltimos Asientos!")))) : null)),
468
468
  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 }))),
469
469
  children,
470
- React.createElement(ServiceBadges, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, translation: translation, serviceItem: serviceItem })));
470
+ React.createElement(ServiceBadges, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, translation: translation, serviceItem: serviceItem, isAllinBus: isAllinBus, boardingName: boardingName, getAnimationIcon: getAnimationIcon })));
471
471
  }
472
472
  export default PeruServiceItemDesktop;
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -298,7 +298,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
298
298
  showTopLabel
299
299
  ? "mt-[30px]"
300
300
  : "mt-[20px]"} ` },
301
- ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDpEnabled) && !isSoldOut && (React.createElement(OfferBanner, { offerGradient: offerGradient, isSoldOut: isSoldOut, serviceItem: serviceItem, renderIcon: renderIcon, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon, showLoginOption: showLoginOption, isNewUiEnabled: isNewUiEnabled, colors: colors })),
301
+ ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDpEnabled) && !isSoldOut && (React.createElement(OfferBanner, { offerGradient: offerGradient, isSoldOut: isSoldOut, serviceItem: serviceItem, renderIcon: renderIcon, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon, showLoginOption: showLoginOption, isNewUiEnabled: isNewUiEnabled, colors: colors, isLinatal: isLinatal })),
302
302
  React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${(hasOfferText && isNewUiEnabled && !isSoldOut) || hasDpEnabled
303
303
  ? "z-[3] rounded-[18px]"
304
304
  : "rounded-[10px] border border-[#ccc]"}`, style: serviceCardStyle },
@@ -344,10 +344,10 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
344
344
  gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
345
345
  transition: "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
346
346
  position: "relative",
347
- zIndex: hasOfferText || hasDpEnabled ? 0 : -1,
347
+ zIndex: hasDiscount || hasDpEnabled ? 0 : -1,
348
348
  marginTop: isItemExpanded ? "" : "-10px",
349
349
  } },
350
- React.createElement("div", { style: Object.assign({ overflow: "hidden", minHeight: 0, marginTop: hasDpEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "" : "-10px" }, (hasOfferText || hasDpEnabled
350
+ React.createElement("div", { style: Object.assign({ overflow: "hidden", minHeight: 0, marginTop: hasDpEnabled || hasDiscount ? "" : "-10px" }, (hasDpEnabled || hasDiscount
351
351
  ? {
352
352
  borderLeft: isSoldOut
353
353
  ? ""
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, operatorLabel, isTrain, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, }: 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, }: MobileServiceItemProps): React.ReactElement;
4
4
  export default ServiceItemMobile;
package/dist/components/ServiceItem/ServiceItemMobile.js CHANGED
@@ -18,8 +18,8 @@ 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, operatorLabel, isTrain, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, }) {
22
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
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, isAllinBus, }) {
22
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
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;
25
25
  const isNewUiEnabled = ((_b = (_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discounts) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.new_ui_enabled) === true;
@@ -89,6 +89,17 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
89
89
  if (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) {
90
90
  isConexion = true;
91
91
  }
92
+ const extractStage = (stageArr, index) => {
93
+ const stageObj = stageArr[index];
94
+ const key = Object.keys(stageObj)[0];
95
+ return stageObj[key][0].split(", ")[0];
96
+ };
97
+ const boardingName = ((_e = serviceItem.stage_details_arr) === null || _e === void 0 ? void 0 : _e.length)
98
+ ? extractStage(serviceItem.stage_details_arr, 0)
99
+ : null;
100
+ const dropoffName = ((_f = serviceItem.stage_details_arr) === null || _f === void 0 ? void 0 : _f.length)
101
+ ? extractStage(serviceItem.stage_details_arr, 1)
102
+ : null;
92
103
  return (React.createElement(React.Fragment, null, isNewUi ? (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 &&
93
104
  setIsFeatureDropDownExpand(isFeatureDropDownExpand === serviceItem.id ||
94
105
  isFeatureDropDownExpand === true
@@ -96,7 +107,8 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
96
107
  : serviceItem.id), selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle, wowDealData: wowDealData })) : (React.createElement("div", { className: `relative ${!serviceItem.offer_text || !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? "mb-[14px]" : showTopLabel || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "mb-[20px]" : "mb-[12px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
97
108
  isConexion ||
98
109
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
99
- showTopLabel
110
+ showTopLabel ||
111
+ boardingName
100
112
  ? "mt-[20px]"
101
113
  : "mt-[10px]"} `, style: { zIndex: 1 } },
102
114
  React.createElement("div", { className: `z-1 ${((hasOfferText && isNewUiEnabled) ||
@@ -125,17 +137,17 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
125
137
  color: isSoldOut ? "#bbb" : "text-[#464647]",
126
138
  } },
127
139
  React.createElement("span", { className: "ml-[3px] min-[420]:text-[13px] text-[12px] text-ellipsis overflow-hidden whitespace-nowrap max-w-[120px]" }, serviceItem.operator_details[2]))))) : null)),
128
- React.createElement(DateTimeSectionMobile, { onBookButtonPress: onBookButtonPress, isCiva: isCiva, isSoldOut: isSoldOut, isLinatal: isLinatal, isPeru: isPeru, orignLabel: orignLabel, destinationLabel: destinationLabel, originIcon: (_e = serviceItem.icons) === null || _e === void 0 ? void 0 : _e.origin, destinationIcon: (_f = serviceItem.icons) === null || _f === void 0 ? void 0 : _f.destination, travelDate: serviceItem.travel_date, arrivalDate: serviceItem.arrival_date, depTime: serviceItem.dep_time, arrTime: serviceItem.arr_time, seatTypes: serviceItem.seat_types, seatPriceColor: colors.seatPriceColor, tooltipBgColor: colors.tooltipBgColor, currencySign: currencySign, availableSeats: serviceItem.available_seats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, showLastSeats: showLastSeats, discountSeatPriceColor: colors.discountSeatPriceColor }),
140
+ React.createElement(DateTimeSectionMobile, { onBookButtonPress: onBookButtonPress, isCiva: isCiva, isSoldOut: isSoldOut, isLinatal: isLinatal, isPeru: isPeru, orignLabel: orignLabel, destinationLabel: destinationLabel, originIcon: (_g = serviceItem.icons) === null || _g === void 0 ? void 0 : _g.origin, destinationIcon: (_h = serviceItem.icons) === null || _h === void 0 ? void 0 : _h.destination, travelDate: serviceItem.travel_date, arrivalDate: serviceItem.arrival_date, depTime: serviceItem.dep_time, arrTime: serviceItem.arr_time, seatTypes: serviceItem.seat_types, seatPriceColor: colors.seatPriceColor, tooltipBgColor: colors.tooltipBgColor, currencySign: currencySign, availableSeats: serviceItem.available_seats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, showLastSeats: showLastSeats, discountSeatPriceColor: colors.discountSeatPriceColor }),
129
141
  hasDiscount && (React.createElement("div", { className: "flex justify-end" }, isSoldOut ? (React.createElement("span", { className: "col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]" }, "Agotado")) : null)),
130
142
  showLastSeats ? (React.createElement("div", { className: "flex justify-end " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
131
143
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[10px] text-center", style: {
132
144
  color: colors.tooltipBgColor,
133
145
  } }, "\u00A1\u00DAltimos Asientos!")))) : null,
134
146
  React.createElement("div", { className: "bg-[#E6E6E6] mt-[10px] mb-[8px] h-[1px]" }),
135
- React.createElement(BottomAmenitiesMobile, { isSoldOut: isSoldOut, amenitiesNodes: amenities(), hoursIcon: renderIcon("hours", "14px"), duration: (_g = serviceItem.duration) === null || _g === void 0 ? void 0 : _g.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: () => {
147
+ 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: () => {
136
148
  setIsExpanded(isItemExpanded ? null : serviceItem.id);
137
149
  }, isPeru: isPeru, femaleAnim: serviceItem.icons.femaleAnim, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled })),
138
- React.createElement(ServiceBadgesMobile, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, serviceItem: serviceItem, isConexion: isConexion })),
150
+ React.createElement(ServiceBadgesMobile, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, serviceItem: serviceItem, isConexion: isConexion, isAllinBus: isAllinBus, boardingName: boardingName })),
139
151
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) &&
140
152
  !isNewUiEnabled &&
141
153
  !isSoldOut &&
@@ -167,9 +179,9 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
167
179
  React.createElement("div", { className: "flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]", style: { lineHeight: 1.6 } },
168
180
  React.createElement("div", { className: "flex justify-between items-center" },
169
181
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
170
- Object.keys((_h = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _h !== void 0 ? _h : {})
182
+ Object.keys((_k = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _k !== void 0 ? _k : {})
171
183
  .length === 0 &&
172
- ((_j = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _j !== void 0 ? _j : []).length === 0 ? (React.createElement("div", { className: "flex items-center gap-[6px]" },
184
+ ((_l = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _l !== void 0 ? _l : []).length === 0 ? (React.createElement("div", { className: "flex items-center gap-[6px]" },
173
185
  React.createElement(LottiePlayer, { animationData: serviceItem.icons.starAnimation, width: "14px", height: "14px" }),
174
186
  React.createElement("span", { className: "text-[#fff]" }, "M\u00E1s elegido"))) : (React.createElement("div", { className: `flex ${((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").length > 10 ? "items-start" : "items-center"}` },
175
187
  React.createElement("div", { className: isLongOfferText ? "mt-[2px]" : "" },
package/dist/components/ServiceItem/mobileTypes.d.ts CHANGED
@@ -158,6 +158,7 @@ export interface MobileServiceItemProps {
158
158
  [key: string]: string | Record<string, string | undefined> | undefined;
159
159
  };
160
160
  useLottieFor?: string[];
161
+ stage_details_arr?: any;
161
162
  };
162
163
  onBookButtonPress?: () => void;
163
164
  onRemateUiButtonClick?: () => void;
@@ -237,4 +238,5 @@ export interface MobileServiceItemProps {
237
238
  wowDealData?: any;
238
239
  isFlores?: boolean;
239
240
  operatorLabel?: string;
241
+ isAllinBus?: any;
240
242
  }
package/dist/styles.css CHANGED
@@ -60,6 +60,9 @@
60
60
  .top-\[30px\] {
61
61
  top: 30px;
62
62
  }
63
+ .top-\[36px\] {
64
+ top: 36px;
65
+ }
63
66
  .top-\[40px\] {
64
67
  top: 40px;
65
68
  }
package/dist/ui/OfferBanner.d.ts CHANGED
@@ -16,6 +16,7 @@ interface OfferBannerProps {
16
16
  showLoginOption?: boolean;
17
17
  isNewUiEnabled?: boolean;
18
18
  colors: OfferBannerColors;
19
+ isLinatal?: boolean;
19
20
  }
20
21
  declare const OfferBanner: React.FC<OfferBannerProps>;
21
22
  export default OfferBanner;
package/dist/ui/OfferBanner.js CHANGED
@@ -54,7 +54,7 @@ const ViewersCount = ({ serviceItem, viewersConfig, getAnimationIcon, }) => {
54
54
  "comprando")))));
55
55
  };
56
56
  // ─── Main Component ───────────────────────────────────────────────────────────
57
- const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, showLoginModal, viewersConfig, getAnimationIcon, showLoginOption, isNewUiEnabled, colors, }) => {
57
+ const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, showLoginModal, viewersConfig, getAnimationIcon, showLoginOption, isNewUiEnabled, colors, isLinatal, }) => {
58
58
  const isLegacyOffer = !!(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && !isNewUiEnabled && !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled);
59
59
  const isDpEnabledWithoutDiscounts = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && !hasDpDiscounts(serviceItem);
60
60
  const showViewers = isNewUiEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled);
@@ -72,7 +72,11 @@ const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, showLo
72
72
  }
73
73
  return null;
74
74
  };
75
- return (React.createElement("div", { className: "text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[44px] pt-[50px] rounded-b-[14px] text-[14px] mt-[10px]", style: { background, opacity: isSoldOut ? 0.5 : 1 } },
75
+ return (React.createElement("div", { className: "text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[44px] pt-[50px] rounded-b-[14px] text-[14px] mt-[10px]", style: {
76
+ background,
77
+ opacity: isSoldOut ? 0.5 : 1,
78
+ zIndex: isLinatal ? "-1" : "",
79
+ } },
76
80
  React.createElement("div", { className: "flex justify-between items-center w-full" },
77
81
  React.createElement("div", { className: "flex items-center" }, renderLeftContent()),
78
82
  showViewers && (React.createElement(ViewersCount, { serviceItem: serviceItem, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon })))));
package/dist/ui/SeatSection/SeatSection.js CHANGED
@@ -155,7 +155,6 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
155
155
  }
156
156
  return null;
157
157
  })();
158
- console.log("🚀 ~ SeatSection ~ serviceItem:", serviceItem);
159
158
  // Hide the % OFF badge when max_discount is capping the percentage discount
160
159
  // (i.e. both percentage and max_discount exist, and the raw % amount exceeds the cap)
161
160
  const isMaxDiscountApplied = (() => {
@@ -188,7 +187,8 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
188
187
  ? CommonService.truncateSeatLabel(filteredSeats[0].label)
189
188
  : filteredSeats[0].label
190
189
  : null;
191
- const operatorServiceName = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus" || "Movil Bus";
190
+ const operatorServiceName = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus" ||
191
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "Movil Bus";
192
192
  return (React.createElement(React.Fragment, null,
193
193
  hasDiscount && (React.createElement("span", { className: "text-[13.33px]", style: {
194
194
  color: "#999",
package/dist/ui/ServiceBadges/ServiceBadges.d.ts CHANGED
@@ -12,6 +12,9 @@ interface ServiceBadgesProps {
12
12
  is_direct_trip?: boolean;
13
13
  train_type_label?: string;
14
14
  };
15
+ isAllinBus?: boolean;
16
+ boardingName?: string;
17
+ getAnimationIcon?: (iconKey: string) => any;
15
18
  }
16
19
  declare const ServiceBadges: React.FC<ServiceBadgesProps>;
17
20
  export default ServiceBadges;
package/dist/ui/ServiceBadges/ServiceBadges.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from "react";
2
- const ServiceBadges = ({ showTopLabel, isSoldOut, colors, renderIcon, translation, serviceItem, }) => {
2
+ import LottiePlayer from "../../assets/LottiePlayer";
3
+ const ServiceBadges = ({ showTopLabel, isSoldOut, colors, renderIcon, translation, serviceItem, isAllinBus = false, boardingName, getAnimationIcon, }) => {
3
4
  return (React.createElement("div", { className: "absolute -top-[10px] left-0 w-full flex items-center justify-end gap-[12px] pr-[22px] z-10" },
4
5
  showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-10`, style: {
5
6
  backgroundColor: "#fff",
@@ -38,6 +39,12 @@ const ServiceBadges = ({ showTopLabel, isSoldOut, colors, renderIcon, translatio
38
39
  color: isSoldOut ? "#ccc" : colors.topLabelColor,
39
40
  } },
40
41
  renderIcon("directo", "12px"),
41
- React.createElement("div", null, "Tren Express")))));
42
+ React.createElement("div", null, "Tren Express"))),
43
+ boardingName && isAllinBus && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
44
+ backgroundColor: isSoldOut ? "#ddd" : colors.ratingBottomColor,
45
+ } },
46
+ React.createElement("div", { className: isSoldOut ? "grayscale" : "" },
47
+ React.createElement(LottiePlayer, { animationData: getAnimationIcon("priorityStageAnim"), width: "14px", height: "14px" })),
48
+ React.createElement("div", { className: isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]` }, boardingName)))));
42
49
  };
43
50
  export default ServiceBadges;
package/dist/ui/mobileweb/ServiceBadgesMobile.d.ts CHANGED
@@ -12,6 +12,8 @@ interface ServiceBadgesMobileProps {
12
12
  train_type_label?: string;
13
13
  };
14
14
  isConexion?: boolean;
15
+ isAllinBus?: any;
16
+ boardingName?: string;
15
17
  }
16
18
  declare const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps>;
17
19
  export default ServiceBadgesMobile;
package/dist/ui/mobileweb/ServiceBadgesMobile.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- const ServiceBadgesMobile = ({ showTopLabel, isSoldOut, colors, renderIcon, serviceItem, isConexion, }) => {
2
+ const ServiceBadgesMobile = ({ showTopLabel, isSoldOut, colors, renderIcon, serviceItem, isConexion, isAllinBus = false, boardingName, }) => {
3
3
  return (React.createElement("div", { className: "absolute -top-[11px] left-0 w-full flex items-center justify-end gap-[12px] pr-[17px] z-10" },
4
4
  showTopLabel && (React.createElement("div", { className: `flex items-center gap-[2p x] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] h-[24px] z-20`, style: {
5
5
  backgroundColor: "#fff",
@@ -38,6 +38,35 @@ const ServiceBadgesMobile = ({ showTopLabel, isSoldOut, colors, renderIcon, serv
38
38
  color: isSoldOut ? "#ccc" : colors.topLabelColor,
39
39
  } },
40
40
  renderIcon("directo", "12px"),
41
- React.createElement("div", null, "Tren Express")))));
41
+ React.createElement("div", null, "Tren Express"))),
42
+ boardingName && isAllinBus && (React.createElement("div", { className: `flex items-center gap-[2p x] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] h-[24px] z-20`, style: {
43
+ backgroundColor: "#fff",
44
+ border: isSoldOut
45
+ ? "1px solid #ccc"
46
+ : `1px solid ${colors.topLabelColor}`,
47
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
48
+ } },
49
+ React.createElement("div", { className: isSoldOut ? "grayscale" : "", style: { marginTop: "1px" } }, renderIcon("specialDeparture", "12px", { marginTop: "1px" })),
50
+ React.createElement("div", { style: {
51
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
52
+ } }, boardingName))
53
+ // <div
54
+ // className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`}
55
+ // style={{
56
+ // backgroundColor: isSoldOut ? "#ddd" : colors.ratingBottomColor,
57
+ // }}
58
+ // >
59
+ // <div className={isSoldOut ? "grayscale" : ""}>
60
+ // {renderIcon("specialDeparture", "12px", { marginTop: "1px" })}
61
+ // </div>
62
+ // <div
63
+ // className={
64
+ // isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]`
65
+ // }
66
+ // >
67
+ // {boardingName}
68
+ // </div>
69
+ // </div>
70
+ )));
42
71
  };
43
72
  export default ServiceBadgesMobile;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "9.11.8",
3
+ "version": "9.11.10",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/PeruServiceItemDesktop.tsx CHANGED
@@ -906,11 +906,11 @@ function PeruServiceItemDesktop({
906
906
  onClick={checkMidnight}
907
907
  />
908
908
  {showLastSeats ? (
909
- <div className="flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]">
909
+ <div className="flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[36px]">
910
910
  {serviceItem?.available_seats < 10 &&
911
911
  serviceItem?.available_seats > 0 && (
912
912
  <div
913
- className="text-[12px] mt-1 text-center"
913
+ className="text-[11px] mt-1 text-center whitespace-nowrap"
914
914
  style={{
915
915
  color: colors.seatPriceColor,
916
916
  }}
@@ -1025,6 +1025,9 @@ function PeruServiceItemDesktop({
1025
1025
  renderIcon={renderIcon}
1026
1026
  translation={translation}
1027
1027
  serviceItem={serviceItem}
1028
+ isAllinBus={isAllinBus}
1029
+ boardingName={boardingName}
1030
+ getAnimationIcon={getAnimationIcon}
1028
1031
  />
1029
1032
 
1030
1033
  {/* <div className="absolute -top-[11px] left-0 w-full flex items-center justify-end gap-[12px] pr-[15px] z-10 ">
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -557,6 +557,7 @@ function ServiceItemPB({
557
557
  showLoginOption={showLoginOption}
558
558
  isNewUiEnabled={isNewUiEnabled}
559
559
  colors={colors}
560
+ isLinatal={isLinatal}
560
561
  />
561
562
  )}
562
563
  <div
@@ -727,7 +728,7 @@ function ServiceItemPB({
727
728
  transition:
728
729
  "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
729
730
  position: "relative",
730
- zIndex: hasOfferText || hasDpEnabled ? 0 : -1,
731
+ zIndex: hasDiscount || hasDpEnabled ? 0 : -1,
731
732
  marginTop: isItemExpanded ? "" : "-10px",
732
733
  }}
733
734
  >
@@ -735,9 +736,8 @@ function ServiceItemPB({
735
736
  style={{
736
737
  overflow: "hidden",
737
738
  minHeight: 0,
738
- marginTop:
739
- hasDpEnabled || serviceItem?.offer_text ? "" : "-10px",
740
- ...(hasOfferText || hasDpEnabled
739
+ marginTop: hasDpEnabled || hasDiscount ? "" : "-10px",
740
+ ...(hasDpEnabled || hasDiscount
741
741
  ? {
742
742
  borderLeft: isSoldOut
743
743
  ? ""
package/src/components/ServiceItem/ServiceItemMobile.tsx CHANGED
@@ -63,6 +63,7 @@ function ServiceItemMobile({
63
63
  onTimeDropdownToggle,
64
64
  wowDealData,
65
65
  isFlores,
66
+ isAllinBus,
66
67
  }: MobileServiceItemProps): React.ReactElement {
67
68
  const isItemExpanded = serviceItem.id === isExpanded;
68
69
  const isPetSeat = (Object.keys(serviceItem?.pet_seat_info) || []).length > 0;
@@ -174,6 +175,23 @@ function ServiceItemMobile({
174
175
  isConexion = true;
175
176
  }
176
177
 
178
+ const extractStage = (
179
+ stageArr: Record<string, string[]>[],
180
+ index: number,
181
+ ) => {
182
+ const stageObj = stageArr[index];
183
+ const key = Object.keys(stageObj)[0];
184
+ return stageObj[key][0].split(", ")[0];
185
+ };
186
+
187
+ const boardingName = serviceItem.stage_details_arr?.length
188
+ ? extractStage(serviceItem.stage_details_arr, 0)
189
+ : null;
190
+
191
+ const dropoffName = serviceItem.stage_details_arr?.length
192
+ ? extractStage(serviceItem.stage_details_arr, 1)
193
+ : null;
194
+
177
195
  return (
178
196
  <>
179
197
  {isNewUi ? (
@@ -212,7 +230,8 @@ function ServiceItemMobile({
212
230
  serviceItem?.is_direct_trip ||
213
231
  isConexion ||
214
232
  serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
215
- showTopLabel
233
+ showTopLabel ||
234
+ boardingName
216
235
  ? "mt-[20px]"
217
236
  : "mt-[10px]"
218
237
  } `}
@@ -384,6 +403,8 @@ function ServiceItemMobile({
384
403
  renderIcon={renderIcon}
385
404
  serviceItem={serviceItem}
386
405
  isConexion={isConexion}
406
+ isAllinBus={isAllinBus}
407
+ boardingName={boardingName}
387
408
  />
388
409
  </div>
389
410
 
package/src/components/ServiceItem/mobileTypes.ts CHANGED
@@ -162,6 +162,7 @@ export interface MobileServiceItemProps {
162
162
  [key: string]: string | Record<string, string | undefined> | undefined;
163
163
  };
164
164
  useLottieFor?: string[];
165
+ stage_details_arr?: any;
165
166
  };
166
167
  onBookButtonPress?: () => void;
167
168
  onRemateUiButtonClick?: () => void;
@@ -249,4 +250,5 @@ export interface MobileServiceItemProps {
249
250
  wowDealData?: any;
250
251
  isFlores?: boolean;
251
252
  operatorLabel?: string;
253
+ isAllinBus?: any;
252
254
  }
package/src/ui/OfferBanner.tsx CHANGED
@@ -29,6 +29,7 @@ interface OfferBannerProps {
29
29
  showLoginOption?: boolean;
30
30
  isNewUiEnabled?: boolean;
31
31
  colors: OfferBannerColors;
32
+ isLinatal?: boolean;
32
33
  }
33
34
 
34
35
  // ─── Helpers ──────────────────────────────────────────────────────────────────
@@ -206,6 +207,7 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
206
207
  showLoginOption,
207
208
  isNewUiEnabled,
208
209
  colors,
210
+ isLinatal,
209
211
  }) => {
210
212
  const isLegacyOffer =
211
213
  !!serviceItem?.offer_text && !isNewUiEnabled && !serviceItem?.is_dp_enabled;
@@ -250,7 +252,11 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
250
252
  return (
251
253
  <div
252
254
  className="text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[44px] pt-[50px] rounded-b-[14px] text-[14px] mt-[10px]"
253
- style={{ background, opacity: isSoldOut ? 0.5 : 1 }}
255
+ style={{
256
+ background,
257
+ opacity: isSoldOut ? 0.5 : 1,
258
+ zIndex: isLinatal ? "-1" : "",
259
+ }}
254
260
  >
255
261
  <div className="flex justify-between items-center w-full">
256
262
  <div className="flex items-center">{renderLeftContent()}</div>
package/src/ui/SeatSection/SeatSection.tsx CHANGED
@@ -304,7 +304,6 @@ function SeatSection({
304
304
  }
305
305
  return null;
306
306
  })();
307
- console.log("🚀 ~ SeatSection ~ serviceItem:", serviceItem);
308
307
 
309
308
  // Hide the % OFF badge when max_discount is capping the percentage discount
310
309
  // (i.e. both percentage and max_discount exist, and the raw % amount exceeds the cap)
@@ -359,7 +358,8 @@ function SeatSection({
359
358
  : null;
360
359
 
361
360
  const operatorServiceName =
362
- serviceItem?.operator_service_name === "MovilBus" || "Movil Bus";
361
+ serviceItem?.operator_service_name === "MovilBus" ||
362
+ serviceItem?.operator_service_name === "Movil Bus";
363
363
 
364
364
  return (
365
365
  <>
package/src/ui/ServiceBadges/ServiceBadges.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from "react";
2
+ import LottiePlayer from "../../assets/LottiePlayer";
2
3
 
3
4
  interface ServiceBadgesProps {
4
5
  showTopLabel?: string;
@@ -13,6 +14,9 @@ interface ServiceBadgesProps {
13
14
  is_direct_trip?: boolean;
14
15
  train_type_label?: string;
15
16
  };
17
+ isAllinBus?: boolean;
18
+ boardingName?: string;
19
+ getAnimationIcon?: (iconKey: string) => any;
16
20
  }
17
21
 
18
22
  const ServiceBadges: React.FC<ServiceBadgesProps> = ({
@@ -22,6 +26,9 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
22
26
  renderIcon,
23
27
  translation,
24
28
  serviceItem,
29
+ isAllinBus = false,
30
+ boardingName,
31
+ getAnimationIcon,
25
32
  }) => {
26
33
  return (
27
34
  <div className="absolute -top-[10px] left-0 w-full flex items-center justify-end gap-[12px] pr-[22px] z-10">
@@ -89,6 +96,29 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
89
96
  <div>{"Tren Express"}</div>
90
97
  </div>
91
98
  )}
99
+ {boardingName && isAllinBus && (
100
+ <div
101
+ className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`}
102
+ style={{
103
+ backgroundColor: isSoldOut ? "#ddd" : colors.ratingBottomColor,
104
+ }}
105
+ >
106
+ <div className={isSoldOut ? "grayscale" : ""}>
107
+ <LottiePlayer
108
+ animationData={getAnimationIcon("priorityStageAnim")}
109
+ width="14px"
110
+ height="14px"
111
+ />
112
+ </div>
113
+ <div
114
+ className={
115
+ isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]`
116
+ }
117
+ >
118
+ {boardingName}
119
+ </div>
120
+ </div>
121
+ )}
92
122
  </div>
93
123
  );
94
124
  };
package/src/ui/mobileweb/ServiceBadgesMobile.tsx CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from "react";
2
+ import LottiePlayer from "../../assets/LottiePlayer";
2
3
 
3
4
  interface ServiceBadgesMobileProps {
4
5
  showTopLabel?: string;
@@ -13,6 +14,8 @@ interface ServiceBadgesMobileProps {
13
14
  train_type_label?: string;
14
15
  };
15
16
  isConexion?: boolean;
17
+ isAllinBus?: any;
18
+ boardingName?: string;
16
19
  }
17
20
 
18
21
  const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
@@ -22,6 +25,8 @@ const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
22
25
  renderIcon,
23
26
  serviceItem,
24
27
  isConexion,
28
+ isAllinBus = false,
29
+ boardingName,
25
30
  }) => {
26
31
  return (
27
32
  <div className="absolute -top-[11px] left-0 w-full flex items-center justify-end gap-[12px] pr-[17px] z-10">
@@ -96,6 +101,50 @@ const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
96
101
  <div>{"Tren Express"}</div>
97
102
  </div>
98
103
  )}
104
+ {boardingName && isAllinBus && (
105
+ <div
106
+ className={`flex items-center gap-[2p x] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] h-[24px] z-20`}
107
+ style={{
108
+ backgroundColor: "#fff",
109
+ border: isSoldOut
110
+ ? "1px solid #ccc"
111
+ : `1px solid ${colors.topLabelColor}`,
112
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
113
+ }}
114
+ >
115
+ <div
116
+ className={isSoldOut ? "grayscale" : ""}
117
+ style={{ marginTop: "1px" }}
118
+ >
119
+ {renderIcon("specialDeparture", "12px", { marginTop: "1px" })}
120
+ </div>
121
+ <div
122
+ style={{
123
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
124
+ }}
125
+ >
126
+ {boardingName}
127
+ </div>
128
+ </div>
129
+
130
+ // <div
131
+ // className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`}
132
+ // style={{
133
+ // backgroundColor: isSoldOut ? "#ddd" : colors.ratingBottomColor,
134
+ // }}
135
+ // >
136
+ // <div className={isSoldOut ? "grayscale" : ""}>
137
+ // {renderIcon("specialDeparture", "12px", { marginTop: "1px" })}
138
+ // </div>
139
+ // <div
140
+ // className={
141
+ // isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]`
142
+ // }
143
+ // >
144
+ // {boardingName}
145
+ // </div>
146
+ // </div>
147
+ )}
99
148
  </div>
100
149
  );
101
150
  };