kupos-ui-components-lib 10.4.57 → 10.4.58

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 (26) hide show
  1. package/dist/components/ServiceItem/PeruServiceItemDesktop.d.ts +1 -1
  2. package/dist/components/ServiceItem/PeruServiceItemDesktop.js +2 -2
  3. package/dist/components/ServiceItem/ServiceItemDesktop.d.ts +1 -1
  4. package/dist/components/ServiceItem/ServiceItemDesktop.js +3 -3
  5. package/dist/components/ServiceItem/ServiceItemMobile.d.ts +1 -1
  6. package/dist/components/ServiceItem/ServiceItemMobile.js +2 -2
  7. package/dist/components/ServiceItem/mobileTypes.d.ts +5 -0
  8. package/dist/components/ServiceItem/types.d.ts +5 -0
  9. package/dist/ui/SeatSection/PeruSeatSection.d.ts +2 -1
  10. package/dist/ui/SeatSection/PeruSeatSection.js +26 -2
  11. package/dist/ui/SeatSection/SeatSection.d.ts +2 -1
  12. package/dist/ui/SeatSection/SeatSection.js +26 -2
  13. package/dist/ui/mobileweb/DateTimeSectionMobile.d.ts +2 -1
  14. package/dist/ui/mobileweb/DateTimeSectionMobile.js +2 -2
  15. package/dist/ui/mobileweb/SeatSectionMobile.d.ts +2 -1
  16. package/dist/ui/mobileweb/SeatSectionMobile.js +31 -4
  17. package/package.json +1 -1
  18. package/src/components/ServiceItem/PeruServiceItemDesktop.tsx +2 -0
  19. package/src/components/ServiceItem/ServiceItemDesktop.tsx +3 -0
  20. package/src/components/ServiceItem/ServiceItemMobile.tsx +2 -0
  21. package/src/components/ServiceItem/mobileTypes.ts +5 -0
  22. package/src/components/ServiceItem/types.ts +5 -0
  23. package/src/ui/SeatSection/PeruSeatSection.tsx +31 -1
  24. package/src/ui/SeatSection/SeatSection.tsx +31 -1
  25. package/src/ui/mobileweb/DateTimeSectionMobile.tsx +3 -0
  26. package/src/ui/mobileweb/SeatSectionMobile.tsx +35 -2
package/dist/components/ServiceItem/PeruServiceItemDesktop.d.ts CHANGED
@@ -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, priority_stage_ids, 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, isShowSeatIcon, t, }: ServiceItemProps & {
4
4
  currencySign?: string;
5
5
  }): React.ReactElement;
6
6
  export default PeruServiceItemDesktop;
package/dist/components/ServiceItem/PeruServiceItemDesktop.js CHANGED
@@ -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, priority_stage_ids, 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, isShowSeatIcon = false, t = (key) => key, }) {
70
70
  var _a, _b, _c, _d, _e, _f;
71
71
  const getAnimationIcon = (icon) => {
72
72
  var _a;
@@ -489,7 +489,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
489
489
  margin: "auto",
490
490
  } }),
491
491
  React.createElement("div", { className: "content-center" },
492
- React.createElement(PeruSeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, renderIcon: renderIcon, discountSeatPriceColor: colors.discountSeatPriceColor, isSeatIcon: isSeatIcon })),
492
+ React.createElement(PeruSeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, renderIcon: renderIcon, discountSeatPriceColor: colors.discountSeatPriceColor, isSeatIcon: isSeatIcon, isShowSeatIcon: isShowSeatIcon })),
493
493
  React.createElement("div", { className: "relative" },
494
494
  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 }),
495
495
  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 &&
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, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel, priority_stage_ids, }: 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, isShowSeatIcon, }: ServiceItemProps & {
4
4
  currencySign?: string;
5
5
  }): React.ReactElement;
6
6
  export default ServiceItemPB;
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -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, priority_stage_ids, }) {
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, isShowSeatIcon = false, }) {
91
91
  var _a, _b, _c;
92
92
  const handleSeatSelect = (key, price, seatKey, apiSeatType) => {
93
93
  onClearSeatSelectionError === null || onClearSeatSelectionError === void 0 ? void 0 : onClearSeatSelectionError();
@@ -316,7 +316,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
316
316
  i.key !== "flexible" &&
317
317
  i.key !== "servicetype" &&
318
318
  !!i.condition);
319
- return (React.createElement(React.Fragment, null, isPeruSites ? (React.createElement(PeruServiceItemDesktop, { serviceItem: serviceItem, onBookButtonPress: onBookButtonPress, colors: colors, metaData: metaData, children: children, busStage: busStage, serviceDetailsLoading: serviceDetailsLoading, cityOrigin: cityOrigin, cityDestination: cityDestination, translation: translation, orignLabel: orignLabel, destinationLabel: destinationLabel, currencySign: currencySign, isCiva: isCiva, showRating: showRating, showLastSeats: showLastSeats, removeArrivalTime: removeArrivalTime, removeDuplicateSeats: removeDuplicateSeats, isPeruSites: isPeruSites, t: (key) => t(key), showAvailableSeats: showAvailableSeats, isSeatIcon: isSeatIcon, isPeru: isPeru, siteType: siteType, isAllinBus: isAllinBus, viewersConfig: viewersConfig, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, isExpand: isExpand, setIsExpand: setIsExpand, coachKey: coachKey, isFlores: isFlores, isNewUiEnabled: isNewUiEnabledPeru, showLoginOption: showLoginOption, priority_stage_ids: priority_stage_ids })) : isNewUi && !isTrain ? (React.createElement(FeatureServiceUi, { serviceItem: serviceItem, showTopLabel: showTopLabel, getAnimationIcon: getAnimationIcon, cityOrigin: cityOrigin, cityDestination: cityDestination, renderIcon: renderIcon, viewersConfig: viewersConfig, isFeatureDropDownExpand: isFeatureDropDownExpand, ticketQuantity: ticketQuantity, onIncreaseTicketQuantity: onIncreaseTicketQuantity, onDecreaseTicketQuantity: onDecreaseTicketQuantity, onBookButtonPress: onRemateUiButtonClick, onToggleExpand: () => setIsFeatureDropDownExpand &&
319
+ return (React.createElement(React.Fragment, null, isPeruSites ? (React.createElement(PeruServiceItemDesktop, { serviceItem: serviceItem, onBookButtonPress: onBookButtonPress, colors: colors, metaData: metaData, children: children, busStage: busStage, serviceDetailsLoading: serviceDetailsLoading, cityOrigin: cityOrigin, cityDestination: cityDestination, translation: translation, orignLabel: orignLabel, destinationLabel: destinationLabel, currencySign: currencySign, isCiva: isCiva, showRating: showRating, showLastSeats: showLastSeats, removeArrivalTime: removeArrivalTime, removeDuplicateSeats: removeDuplicateSeats, isPeruSites: isPeruSites, t: (key) => t(key), showAvailableSeats: showAvailableSeats, isSeatIcon: isSeatIcon, isPeru: isPeru, siteType: siteType, isAllinBus: isAllinBus, viewersConfig: viewersConfig, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, isExpand: isExpand, setIsExpand: setIsExpand, coachKey: coachKey, isFlores: isFlores, isNewUiEnabled: isNewUiEnabledPeru, showLoginOption: showLoginOption, priority_stage_ids: priority_stage_ids, isShowSeatIcon: isShowSeatIcon })) : isNewUi && !isTrain ? (React.createElement(FeatureServiceUi, { serviceItem: serviceItem, showTopLabel: showTopLabel, getAnimationIcon: getAnimationIcon, cityOrigin: cityOrigin, cityDestination: cityDestination, renderIcon: renderIcon, viewersConfig: viewersConfig, isFeatureDropDownExpand: isFeatureDropDownExpand, ticketQuantity: ticketQuantity, onIncreaseTicketQuantity: onIncreaseTicketQuantity, onDecreaseTicketQuantity: onDecreaseTicketQuantity, onBookButtonPress: onRemateUiButtonClick, onToggleExpand: () => setIsFeatureDropDownExpand &&
320
320
  setIsFeatureDropDownExpand(isFeatureDropDownExpand === serviceItem.id ||
321
321
  isFeatureDropDownExpand === true
322
322
  ? null
@@ -364,7 +364,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
364
364
  backgroundColor: "#ccc",
365
365
  } }),
366
366
  React.createElement("div", { className: "content-center" },
367
- 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, isSeatIcon: isSeatIcon, isTrain: isTrain, selectedSeatKey: selectedSeatKey, onSeatSelect: handleSeatSelect, topLabelColor: colors.topLabelColor, tooltipColor: colors.tooltipColor, discountSeatCrossPriceColor: colors.discountSeatCrossPriceColor })),
367
+ 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, isSeatIcon: isSeatIcon, isTrain: isTrain, selectedSeatKey: selectedSeatKey, onSeatSelect: handleSeatSelect, topLabelColor: colors.topLabelColor, tooltipColor: colors.tooltipColor, discountSeatCrossPriceColor: colors.discountSeatCrossPriceColor, isShowSeatIcon: isShowSeatIcon })),
368
368
  React.createElement("div", { className: "relative" },
369
369
  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 }),
370
370
  showSeatSelectionError === serviceItem.id && isTrain && (React.createElement("div", { className: "flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]" },
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, isAllinBus, isPeruSite, priority_stage_ids, }: 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, isShowSeatIcon, }: MobileServiceItemProps): React.ReactElement;
4
4
  export default ServiceItemMobile;
package/dist/components/ServiceItem/ServiceItemMobile.js CHANGED
@@ -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, priority_stage_ids, }) {
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, isShowSeatIcon = false, }) {
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;
@@ -154,7 +154,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
154
154
  color: isSoldOut ? "#bbb" : "text-[#464647]",
155
155
  } },
156
156
  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)),
157
- 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, isTrain: isTrain, discountSeatCrossPriceColor: colors.discountSeatCrossPriceColor }),
157
+ 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, isTrain: isTrain, discountSeatCrossPriceColor: colors.discountSeatCrossPriceColor, isShowSeatIcon: isShowSeatIcon }),
158
158
  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)),
159
159
  showLastSeats ? (React.createElement("div", { className: "flex justify-end " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
160
160
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[10px] text-center", style: {
package/dist/components/ServiceItem/mobileTypes.d.ts CHANGED
@@ -160,6 +160,10 @@ export interface MobileServiceItemProps {
160
160
  changeTicketIcon?: string;
161
161
  petFriendlyIcon?: string;
162
162
  womenSeatIcon?: string;
163
+ seat140?: string;
164
+ seat160?: string;
165
+ seat180?: string;
166
+ fallBackSeatIcon?: string;
163
167
  [key: string]: string | Record<string, string | undefined> | undefined;
164
168
  };
165
169
  useLottieFor?: string[];
@@ -248,4 +252,5 @@ export interface MobileServiceItemProps {
248
252
  isAllinBus?: any;
249
253
  isPeruSite?: boolean;
250
254
  priority_stage_ids?: string[];
255
+ isShowSeatIcon?: boolean;
251
256
  }
package/dist/components/ServiceItem/types.d.ts CHANGED
@@ -148,6 +148,10 @@ export interface ServiceItemProps {
148
148
  listoIcon?: string;
149
149
  precioIcon?: string;
150
150
  confirmarIcon?: string;
151
+ seat140?: string;
152
+ seat160?: string;
153
+ seat180?: string;
154
+ fallBackSeatIcon?: string;
151
155
  [key: string]: string | Record<string, string | undefined> | undefined;
152
156
  };
153
157
  useLottieFor?: string[];
@@ -269,4 +273,5 @@ export interface ServiceItemProps {
269
273
  isFlores?: boolean;
270
274
  operatorLabel?: string;
271
275
  priority_stage_ids?: string[];
276
+ isShowSeatIcon?: boolean;
272
277
  }
package/dist/ui/SeatSection/PeruSeatSection.d.ts CHANGED
@@ -17,6 +17,7 @@ interface PeruSeatSectionProps {
17
17
  renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
18
18
  discountSeatPriceColor?: string;
19
19
  isSeatIcon?: boolean;
20
+ isShowSeatIcon?: boolean;
20
21
  }
21
- declare function PeruSeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, serviceItem, renderIcon, discountSeatPriceColor, isSeatIcon, }: PeruSeatSectionProps): React.ReactElement;
22
+ declare function PeruSeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, serviceItem, renderIcon, discountSeatPriceColor, isSeatIcon, isShowSeatIcon, }: PeruSeatSectionProps): React.ReactElement;
22
23
  export default PeruSeatSection;
package/dist/ui/SeatSection/PeruSeatSection.js CHANGED
@@ -72,7 +72,23 @@ function getSeatTypeIcon(label, serviceItem) {
72
72
  return (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.seat145Icon;
73
73
  return (_e = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _e === void 0 ? void 0 : _e.seatFallBackIcon;
74
74
  }
75
- function PeruSeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, serviceItem, renderIcon, discountSeatPriceColor, isSeatIcon, }) {
75
+ function getSeatLabelIcon(label, serviceItem) {
76
+ var _a, _b, _c, _d;
77
+ const seatLabel = String(label !== null && label !== void 0 ? label : "");
78
+ if (seatLabel.includes("180"))
79
+ return (_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _a === void 0 ? void 0 : _a.seat180;
80
+ if (seatLabel.includes("160"))
81
+ return (_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _b === void 0 ? void 0 : _b.seat160;
82
+ if (seatLabel.includes("140"))
83
+ return (_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _c === void 0 ? void 0 : _c.seat140;
84
+ return (_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _d === void 0 ? void 0 : _d.fallBackSeatIcon;
85
+ }
86
+ function addSeatDegree(label) {
87
+ if (!label)
88
+ return label;
89
+ return String(label).replace(/\b(140|160|180)\b(?!°)/g, "$1°");
90
+ }
91
+ function PeruSeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, serviceItem, renderIcon, discountSeatPriceColor, isSeatIcon, isShowSeatIcon, }) {
76
92
  var _a;
77
93
  const uniqueSeats = getUniqueSeats(seatTypes);
78
94
  const sortedSeatTypes = getSortedSeatTypes(seatTypes);
@@ -197,6 +213,9 @@ function PeruSeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, cur
197
213
  ? filteredSeats[0].label
198
214
  : filteredSeats[0].label
199
215
  : null;
216
+ const seatLabelIcon = isShowSeatIcon
217
+ ? getSeatLabelIcon(seatLabel, serviceItem)
218
+ : null;
200
219
  return (React.createElement(React.Fragment, null,
201
220
  hasStrikeOff && (React.createElement("span", { className: "text-[13.33px]", style: {
202
221
  color: "#999",
@@ -209,7 +228,12 @@ function PeruSeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, cur
209
228
  height: "20px",
210
229
  marginRight: "5px",
211
230
  } })),
212
- CommonService.capitalize(seatLabel))) : (React.createElement("span", { className: "text-[13.33px]" }, "Desde")))));
231
+ seatLabelIcon && (React.createElement("img", { src: seatLabelIcon, alt: "seattype", style: {
232
+ width: "20px",
233
+ height: "20px",
234
+ marginRight: "5px",
235
+ } })),
236
+ CommonService.capitalize(addSeatDegree(seatLabel)))) : (React.createElement("span", { className: "text-[13.33px]" }, "Desde")))));
213
237
  };
214
238
  if (hasDiscount && discountSeat && uiType !== 1) {
215
239
  return (React.createElement("div", { className: "grid grid-cols-2 items-center text-[13.33px] relative", style: { opacity: isSoldOut ? 0.5 : 1 } },
package/dist/ui/SeatSection/SeatSection.d.ts CHANGED
@@ -25,6 +25,7 @@ interface SeatSectionProps {
25
25
  topLabelColor?: string;
26
26
  tooltipColor?: string;
27
27
  discountSeatCrossPriceColor?: string;
28
+ isShowSeatIcon?: boolean;
28
29
  }
29
- declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isSeatIcon, isTrain, topLabelColor, tooltipColor, discountSeatCrossPriceColor, }: SeatSectionProps): React.ReactElement;
30
+ declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isSeatIcon, isTrain, topLabelColor, tooltipColor, discountSeatCrossPriceColor, isShowSeatIcon }: SeatSectionProps): React.ReactElement;
30
31
  export default SeatSection;
package/dist/ui/SeatSection/SeatSection.js CHANGED
@@ -80,7 +80,23 @@ function getSeatTypeIcon(label, serviceItem) {
80
80
  return (_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _c === void 0 ? void 0 : _c.seat140Icon;
81
81
  return (_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _d === void 0 ? void 0 : _d.seatFallBackIcon;
82
82
  }
83
- function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isSeatIcon, isTrain, topLabelColor, tooltipColor, discountSeatCrossPriceColor, }) {
83
+ function getSeatLabelIcon(label, serviceItem) {
84
+ var _a, _b, _c, _d;
85
+ const seatLabel = String(label !== null && label !== void 0 ? label : "");
86
+ if (seatLabel.includes("180"))
87
+ return (_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _a === void 0 ? void 0 : _a.seat180;
88
+ if (seatLabel.includes("160"))
89
+ return (_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _b === void 0 ? void 0 : _b.seat160;
90
+ if (seatLabel.includes("140"))
91
+ return (_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _c === void 0 ? void 0 : _c.seat140;
92
+ return (_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _d === void 0 ? void 0 : _d.fallBackSeatIcon;
93
+ }
94
+ function addSeatDegree(label) {
95
+ if (!label)
96
+ return label;
97
+ return String(label).replace(/\b(140|160|180)\b(?!°)/g, "$1°");
98
+ }
99
+ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isSeatIcon, isTrain, topLabelColor, tooltipColor, discountSeatCrossPriceColor, isShowSeatIcon }) {
84
100
  var _a;
85
101
  const uniqueSeats = getUniqueSeats(seatTypes, isTrain);
86
102
  const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
@@ -221,6 +237,9 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
221
237
  ? filteredSeats[0].label
222
238
  : filteredSeats[0].label
223
239
  : null;
240
+ const seatLabelIcon = isShowSeatIcon
241
+ ? getSeatLabelIcon(seatLabel, serviceItem)
242
+ : null;
224
243
  const operatorServiceName = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus" ||
225
244
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "Movil Bus";
226
245
  return (React.createElement(React.Fragment, null,
@@ -235,7 +254,12 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
235
254
  height: "20px",
236
255
  marginRight: "5px",
237
256
  } })),
238
- CommonService.capitalize(seatLabel))) : (React.createElement("span", { className: "text-[13.33px]" }, "Desde")))));
257
+ seatLabelIcon && (React.createElement("img", { src: seatLabelIcon, alt: "seattype", style: {
258
+ width: "20px",
259
+ height: "20px",
260
+ marginRight: "5px",
261
+ } })),
262
+ CommonService.capitalize(addSeatDegree(seatLabel)))) : (React.createElement("span", { className: "text-[13.33px]" }, "Desde")))));
239
263
  }
240
264
  return renderSeatNames();
241
265
  };
package/dist/ui/mobileweb/DateTimeSectionMobile.d.ts CHANGED
@@ -24,6 +24,7 @@ interface DateTimeSectionMobileProps {
24
24
  discountSeatPriceColor?: string;
25
25
  isTrain?: boolean;
26
26
  discountSeatCrossPriceColor?: string;
27
+ isShowSeatIcon?: boolean;
27
28
  }
28
- 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, discountSeatCrossPriceColor, }: DateTimeSectionMobileProps): React.ReactElement;
29
+ 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, discountSeatCrossPriceColor, isShowSeatIcon, }: DateTimeSectionMobileProps): React.ReactElement;
29
30
  export default DateTimeSectionMobile;
package/dist/ui/mobileweb/DateTimeSectionMobile.js CHANGED
@@ -38,7 +38,7 @@ const TimeRow = ({ label, icon, alt, date, timeContent, isSoldOut, }) => {
38
38
  React.createElement("div", null, "\u2022"),
39
39
  React.createElement("div", { className: "font-[900] relative black-text", style: { fontVariantNumeric: "tabular-nums" } }, timeContent))))));
40
40
  };
41
- 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, discountSeatCrossPriceColor, }) {
41
+ 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, discountSeatCrossPriceColor, isShowSeatIcon, }) {
42
42
  const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
43
43
  const depTimeContent = isLinatal ? (React.createElement("div", null,
44
44
  React.createElement("span", null,
@@ -66,6 +66,6 @@ function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal
66
66
  margin: "auto 6px",
67
67
  flexShrink: 0,
68
68
  } }),
69
- 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, discountSeatCrossPriceColor: discountSeatCrossPriceColor })));
69
+ 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, discountSeatCrossPriceColor: discountSeatCrossPriceColor, isShowSeatIcon: isShowSeatIcon })));
70
70
  }
71
71
  export default DateTimeSectionMobile;
package/dist/ui/mobileweb/SeatSectionMobile.d.ts CHANGED
@@ -19,6 +19,7 @@ interface SeatSectionMobileProps {
19
19
  discountSeatPriceColor?: string;
20
20
  isTrain?: boolean;
21
21
  discountSeatCrossPriceColor?: string;
22
+ isShowSeatIcon?: boolean;
22
23
  }
23
- declare function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, }: SeatSectionMobileProps): React.ReactElement;
24
+ declare function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, isShowSeatIcon, }: SeatSectionMobileProps): React.ReactElement;
24
25
  export default SeatSectionMobile;
package/dist/ui/mobileweb/SeatSectionMobile.js CHANGED
@@ -28,6 +28,22 @@ const SeatRow = ({ type, index, displayLabel, fare, isSoldOut, seatPriceColor, h
28
28
  const getFilteredSeats = (item) => {
29
29
  return item;
30
30
  };
31
+ function getSeatLabelIcon(label, serviceItem) {
32
+ var _a, _b, _c, _d;
33
+ const seatLabel = String(label !== null && label !== void 0 ? label : "");
34
+ if (seatLabel.includes("180"))
35
+ return (_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _a === void 0 ? void 0 : _a.seat180;
36
+ if (seatLabel.includes("160"))
37
+ return (_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _b === void 0 ? void 0 : _b.seat160;
38
+ if (seatLabel.includes("140"))
39
+ return (_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _c === void 0 ? void 0 : _c.seat140;
40
+ return (_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _d === void 0 ? void 0 : _d.fallBackSeatIcon;
41
+ }
42
+ function addSeatDegree(label) {
43
+ if (!label)
44
+ return label;
45
+ return String(label).replace(/\b(140|160|180)\b(?!°)/g, "$1°");
46
+ }
31
47
  function hasInclinationSeatTypes(seatTypes) {
32
48
  return (seatTypes !== null && seatTypes !== void 0 ? seatTypes : []).some((seat) => { var _a; return String((_a = seat === null || seat === void 0 ? void 0 : seat.label) !== null && _a !== void 0 ? _a : "").includes("°"); });
33
49
  }
@@ -47,7 +63,7 @@ const getUniqueSeats = (data, limit) => {
47
63
  .sort((a, b) => a.fare - b.fare)
48
64
  .slice(0, limit);
49
65
  };
50
- function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, }) {
66
+ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, isShowSeatIcon, }) {
51
67
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
52
68
  const hasMultipleTypes = ((_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.length) !== null && _a !== void 0 ? _a : 0) > 2;
53
69
  const isMovilBus = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus" ||
@@ -98,15 +114,26 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
98
114
  const seatLabel = uniqueSeats.length > 0
99
115
  ? commonService.truncateSeatLabel(uniqueSeats[0].label)
100
116
  : null;
117
+ // Picked from the full label, since truncation can cut off the angle
118
+ const seatLabelIcon = isShowSeatIcon && !hasStrikeOff && uniqueSeats.length > 0
119
+ ? getSeatLabelIcon(uniqueSeats[0].label, serviceItem)
120
+ : null;
101
121
  return (React.createElement(React.Fragment, null,
102
122
  hasStrikeOff && (React.createElement("div", { className: "w-[100%] flex flex-row justify-between items-center" },
103
123
  React.createElement("span", { className: "min-[420]:text-[13px] text-[12px]", style: { color: "#bbb" } }, "Antes"),
104
124
  React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] line-through", style: { color: "#bbb" } }, commonService.currency(originalPrice, currencySign)))),
105
125
  React.createElement("div", { className: "relative w-[100%] flex flex-row justify-between items-center" },
106
126
  hasInclination && !hasStrikeOff && (React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] absolute", style: { color: "#6a6a6a", top: -20, right: 0 } }, "Desde")),
107
- React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: isSoldOut ? "#bbb" : "#464647" } }, hasStrikeOff
108
- ? "Desde"
109
- : commonService.capitalize(seatLabel) || "Desde"),
127
+ React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text flex items-center", style: { color: isSoldOut ? "#bbb" : "#464647" } },
128
+ seatLabelIcon && (React.createElement("img", { src: seatLabelIcon, alt: "seattype", style: {
129
+ width: "16px",
130
+ height: "16px",
131
+ marginRight: "4px",
132
+ filter: isSoldOut ? "grayscale(1)" : "",
133
+ } })),
134
+ hasStrikeOff
135
+ ? "Desde"
136
+ : commonService.capitalize(addSeatDegree(seatLabel)) || "Desde"),
110
137
  React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: priceColor } }, commonService.currency(showOriginalFare ? originalPrice : discountedPrice, currencySign)))));
111
138
  };
112
139
  const renderDpSeats = () => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "10.4.57",
3
+ "version": "10.4.58",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/PeruServiceItemDesktop.tsx CHANGED
@@ -111,6 +111,7 @@ function PeruServiceItemDesktop({
111
111
  isNewUiEnabled,
112
112
  showLoginOption,
113
113
  priority_stage_ids,
114
+ isShowSeatIcon = false,
114
115
  t = (key: string) => key,
115
116
  }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
116
117
  const getAnimationIcon = (icon: string) => {
@@ -903,6 +904,7 @@ function PeruServiceItemDesktop({
903
904
  renderIcon={renderIcon}
904
905
  discountSeatPriceColor={colors.discountSeatPriceColor}
905
906
  isSeatIcon={isSeatIcon}
907
+ isShowSeatIcon={isShowSeatIcon}
906
908
  />
907
909
  </div>
908
910
 
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -152,6 +152,7 @@ function ServiceItemPB({
152
152
  isFlores,
153
153
  operatorLabel,
154
154
  priority_stage_ids,
155
+ isShowSeatIcon = false,
155
156
  }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
156
157
  const handleSeatSelect = (
157
158
  key: any,
@@ -539,6 +540,7 @@ function ServiceItemPB({
539
540
  isNewUiEnabled={isNewUiEnabledPeru}
540
541
  showLoginOption={showLoginOption}
541
542
  priority_stage_ids={priority_stage_ids}
543
+ isShowSeatIcon={isShowSeatIcon}
542
544
  />
543
545
  ) : isNewUi && !isTrain ? (
544
546
  <FeatureServiceUi
@@ -712,6 +714,7 @@ function ServiceItemPB({
712
714
  discountSeatCrossPriceColor={
713
715
  colors.discountSeatCrossPriceColor
714
716
  }
717
+ isShowSeatIcon={isShowSeatIcon}
715
718
  />
716
719
  </div>
717
720
 
package/src/components/ServiceItem/ServiceItemMobile.tsx CHANGED
@@ -67,6 +67,7 @@ function ServiceItemMobile({
67
67
  isAllinBus,
68
68
  isPeruSite,
69
69
  priority_stage_ids,
70
+ isShowSeatIcon = false,
70
71
  }: MobileServiceItemProps): React.ReactElement {
71
72
  const isItemExpanded = serviceItem.id === isExpanded;
72
73
  const isPetSeat = (Object.keys(serviceItem?.pet_seat_info) || []).length > 0;
@@ -395,6 +396,7 @@ function ServiceItemMobile({
395
396
  discountSeatPriceColor={colors.discountSeatPriceColor}
396
397
  isTrain={isTrain}
397
398
  discountSeatCrossPriceColor={colors.discountSeatCrossPriceColor}
399
+ isShowSeatIcon={isShowSeatIcon}
398
400
  />
399
401
 
400
402
  {hasDiscount && (
package/src/components/ServiceItem/mobileTypes.ts CHANGED
@@ -164,6 +164,10 @@ export interface MobileServiceItemProps {
164
164
  changeTicketIcon?: string;
165
165
  petFriendlyIcon?: string;
166
166
  womenSeatIcon?: string;
167
+ seat140?: string;
168
+ seat160?: string;
169
+ seat180?: string;
170
+ fallBackSeatIcon?: string;
167
171
  [key: string]: string | Record<string, string | undefined> | undefined;
168
172
  };
169
173
  useLottieFor?: string[];
@@ -260,4 +264,5 @@ export interface MobileServiceItemProps {
260
264
  isAllinBus?: any;
261
265
  isPeruSite?: boolean;
262
266
  priority_stage_ids?: string[];
267
+ isShowSeatIcon?: boolean;
263
268
  }
package/src/components/ServiceItem/types.ts CHANGED
@@ -152,6 +152,10 @@ export interface ServiceItemProps {
152
152
  listoIcon?: string;
153
153
  precioIcon?: string;
154
154
  confirmarIcon?: string;
155
+ seat140?: string;
156
+ seat160?: string;
157
+ seat180?: string;
158
+ fallBackSeatIcon?: string;
155
159
  [key: string]: string | Record<string, string | undefined> | undefined;
156
160
  };
157
161
  useLottieFor?: string[];
@@ -281,4 +285,5 @@ export interface ServiceItemProps {
281
285
  isFlores?: boolean;
282
286
  operatorLabel?: string;
283
287
  priority_stage_ids?: string[];
288
+ isShowSeatIcon?: boolean;
284
289
  }
package/src/ui/SeatSection/PeruSeatSection.tsx CHANGED
@@ -22,6 +22,7 @@ interface PeruSeatSectionProps {
22
22
  renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
23
23
  discountSeatPriceColor?: string;
24
24
  isSeatIcon?: boolean;
25
+ isShowSeatIcon?: boolean;
25
26
  }
26
27
 
27
28
  function getAllSeatTypes(seatTypes: SeatType[]) {
@@ -109,6 +110,19 @@ function getSeatTypeIcon(label: string, serviceItem: any) {
109
110
  return serviceItem?.icons?.seatFallBackIcon;
110
111
  }
111
112
 
113
+ function getSeatLabelIcon(label: string, serviceItem: any) {
114
+ const seatLabel = String(label ?? "");
115
+ if (seatLabel.includes("180")) return serviceItem?.icons?.seat180;
116
+ if (seatLabel.includes("160")) return serviceItem?.icons?.seat160;
117
+ if (seatLabel.includes("140")) return serviceItem?.icons?.seat140;
118
+ return serviceItem?.icons?.fallBackSeatIcon;
119
+ }
120
+
121
+ function addSeatDegree(label: string) {
122
+ if (!label) return label;
123
+ return String(label).replace(/\b(140|160|180)\b(?!°)/g, "$1°");
124
+ }
125
+
112
126
  function PeruSeatSection({
113
127
  seatTypes,
114
128
  availableSeats,
@@ -120,6 +134,7 @@ function PeruSeatSection({
120
134
  renderIcon,
121
135
  discountSeatPriceColor,
122
136
  isSeatIcon,
137
+ isShowSeatIcon,
123
138
  }: PeruSeatSectionProps): React.ReactElement {
124
139
  const uniqueSeats = getUniqueSeats(seatTypes);
125
140
  const sortedSeatTypes = getSortedSeatTypes(seatTypes);
@@ -343,6 +358,10 @@ function PeruSeatSection({
343
358
  : filteredSeats[0].label
344
359
  : null;
345
360
 
361
+ const seatLabelIcon = isShowSeatIcon
362
+ ? getSeatLabelIcon(seatLabel as string, serviceItem)
363
+ : null;
364
+
346
365
  return (
347
366
  <>
348
367
  {hasStrikeOff && (
@@ -380,7 +399,18 @@ function PeruSeatSection({
380
399
  }}
381
400
  />
382
401
  )}
383
- {CommonService.capitalize(seatLabel)}
402
+ {seatLabelIcon && (
403
+ <img
404
+ src={seatLabelIcon}
405
+ alt="seattype"
406
+ style={{
407
+ width: "20px",
408
+ height: "20px",
409
+ marginRight: "5px",
410
+ }}
411
+ />
412
+ )}
413
+ {CommonService.capitalize(addSeatDegree(seatLabel))}
384
414
  </span>
385
415
  ) : (
386
416
  <span className="text-[13.33px]">Desde</span>
package/src/ui/SeatSection/SeatSection.tsx CHANGED
@@ -35,6 +35,7 @@ interface SeatSectionProps {
35
35
  topLabelColor?: string;
36
36
  tooltipColor?: string;
37
37
  discountSeatCrossPriceColor?: string;
38
+ isShowSeatIcon?: boolean;
38
39
  }
39
40
 
40
41
  function getAllSeatTypes(seatTypes: SeatType[], isTrain?: boolean) {
@@ -129,6 +130,19 @@ function getSeatTypeIcon(label: string, serviceItem: any) {
129
130
  return serviceItem?.icons?.seatFallBackIcon;
130
131
  }
131
132
 
133
+ function getSeatLabelIcon(label: string, serviceItem: any) {
134
+ const seatLabel = String(label ?? "");
135
+ if (seatLabel.includes("180")) return serviceItem?.icons?.seat180;
136
+ if (seatLabel.includes("160")) return serviceItem?.icons?.seat160;
137
+ if (seatLabel.includes("140")) return serviceItem?.icons?.seat140;
138
+ return serviceItem?.icons?.fallBackSeatIcon;
139
+ }
140
+
141
+ function addSeatDegree(label: string) {
142
+ if (!label) return label;
143
+ return String(label).replace(/\b(140|160|180)\b(?!°)/g, "$1°");
144
+ }
145
+
132
146
  function SeatSection({
133
147
  seatTypes,
134
148
  availableSeats,
@@ -148,6 +162,7 @@ function SeatSection({
148
162
  topLabelColor,
149
163
  tooltipColor,
150
164
  discountSeatCrossPriceColor,
165
+ isShowSeatIcon
151
166
  }: SeatSectionProps): React.ReactElement {
152
167
  const uniqueSeats = getUniqueSeats(seatTypes, isTrain);
153
168
  const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
@@ -404,6 +419,10 @@ function SeatSection({
404
419
  : filteredSeats[0].label
405
420
  : null;
406
421
 
422
+ const seatLabelIcon = isShowSeatIcon
423
+ ? getSeatLabelIcon(seatLabel as string, serviceItem)
424
+ : null;
425
+
407
426
  const operatorServiceName =
408
427
  serviceItem?.operator_service_name === "MovilBus" ||
409
428
  serviceItem?.operator_service_name === "Movil Bus";
@@ -445,7 +464,18 @@ function SeatSection({
445
464
  }}
446
465
  />
447
466
  )}
448
- {CommonService.capitalize(seatLabel)}
467
+ {seatLabelIcon && (
468
+ <img
469
+ src={seatLabelIcon}
470
+ alt="seattype"
471
+ style={{
472
+ width: "20px",
473
+ height: "20px",
474
+ marginRight: "5px",
475
+ }}
476
+ />
477
+ )}
478
+ {CommonService.capitalize(addSeatDegree(seatLabel))}
449
479
  </span>
450
480
  ) : (
451
481
  <span className="text-[13.33px]">Desde</span>
package/src/ui/mobileweb/DateTimeSectionMobile.tsx CHANGED
@@ -27,6 +27,7 @@ interface DateTimeSectionMobileProps {
27
27
  discountSeatPriceColor?: string;
28
28
  isTrain?: boolean;
29
29
  discountSeatCrossPriceColor?: string;
30
+ isShowSeatIcon?: boolean;
30
31
  }
31
32
 
32
33
  const pad = (n: number) => (n < 10 ? "0" + n : String(n));
@@ -147,6 +148,7 @@ function DateTimeSectionMobile({
147
148
  discountSeatPriceColor,
148
149
  isTrain,
149
150
  discountSeatCrossPriceColor,
151
+ isShowSeatIcon,
150
152
  }: DateTimeSectionMobileProps): React.ReactElement {
151
153
  const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
152
154
 
@@ -228,6 +230,7 @@ function DateTimeSectionMobile({
228
230
  discountSeatPriceColor={discountSeatPriceColor}
229
231
  isTrain={isTrain}
230
232
  discountSeatCrossPriceColor={discountSeatCrossPriceColor}
233
+ isShowSeatIcon={isShowSeatIcon}
231
234
  />
232
235
  </div>
233
236
  );
package/src/ui/mobileweb/SeatSectionMobile.tsx CHANGED
@@ -34,6 +34,7 @@ interface SeatSectionMobileProps {
34
34
  discountSeatPriceColor?: string;
35
35
  isTrain?: boolean;
36
36
  discountSeatCrossPriceColor?: string;
37
+ isShowSeatIcon?: boolean;
37
38
  }
38
39
 
39
40
  interface SeatRowProps {
@@ -95,6 +96,19 @@ const getFilteredSeats = (item: string) => {
95
96
  return item;
96
97
  };
97
98
 
99
+ function getSeatLabelIcon(label: string, serviceItem: any) {
100
+ const seatLabel = String(label ?? "");
101
+ if (seatLabel.includes("180")) return serviceItem?.icons?.seat180;
102
+ if (seatLabel.includes("160")) return serviceItem?.icons?.seat160;
103
+ if (seatLabel.includes("140")) return serviceItem?.icons?.seat140;
104
+ return serviceItem?.icons?.fallBackSeatIcon;
105
+ }
106
+
107
+ function addSeatDegree(label: string | null) {
108
+ if (!label) return label;
109
+ return String(label).replace(/\b(140|160|180)\b(?!°)/g, "$1°");
110
+ }
111
+
98
112
  function hasInclinationSeatTypes(seatTypes: SeatType[]): boolean {
99
113
  return (seatTypes ?? []).some((seat) =>
100
114
  String(seat?.label ?? "").includes("°"),
@@ -136,6 +150,7 @@ function SeatSectionMobile({
136
150
  discountSeatPriceColor,
137
151
  isTrain,
138
152
  discountSeatCrossPriceColor,
153
+ isShowSeatIcon,
139
154
  }: SeatSectionMobileProps): React.ReactElement {
140
155
  const hasMultipleTypes = (seatTypesData?.length ?? 0) > 2;
141
156
 
@@ -240,6 +255,12 @@ function SeatSectionMobile({
240
255
  ? commonService.truncateSeatLabel(uniqueSeats[0].label)
241
256
  : null;
242
257
 
258
+ // Picked from the full label, since truncation can cut off the angle
259
+ const seatLabelIcon =
260
+ isShowSeatIcon && !hasStrikeOff && uniqueSeats.length > 0
261
+ ? getSeatLabelIcon(uniqueSeats[0].label, serviceItem)
262
+ : null;
263
+
243
264
  return (
244
265
  <>
245
266
  {hasStrikeOff && (
@@ -269,12 +290,24 @@ function SeatSectionMobile({
269
290
  </span>
270
291
  )}
271
292
  <span
272
- className="min-[420]:text-[13px] text-[12px] bold-text"
293
+ className="min-[420]:text-[13px] text-[12px] bold-text flex items-center"
273
294
  style={{ color: isSoldOut ? "#bbb" : "#464647" }}
274
295
  >
296
+ {seatLabelIcon && (
297
+ <img
298
+ src={seatLabelIcon}
299
+ alt="seattype"
300
+ style={{
301
+ width: "16px",
302
+ height: "16px",
303
+ marginRight: "4px",
304
+ filter: isSoldOut ? "grayscale(1)" : "",
305
+ }}
306
+ />
307
+ )}
275
308
  {hasStrikeOff
276
309
  ? "Desde"
277
- : commonService.capitalize(seatLabel) || "Desde"}
310
+ : commonService.capitalize(addSeatDegree(seatLabel)) || "Desde"}
278
311
  </span>
279
312
  <span
280
313
  className="min-[420]:text-[13px] text-[12px] bold-text"