kupos-ui-components-lib 10.4.66 → 10.4.68

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/ServiceItemDesktop.d.ts +1 -1
  2. package/dist/components/ServiceItem/ServiceItemDesktop.js +2 -2
  3. package/dist/components/ServiceItem/ServiceItemMobile.d.ts +1 -1
  4. package/dist/components/ServiceItem/ServiceItemMobile.js +2 -2
  5. package/dist/components/ServiceItem/mobileTypes.d.ts +1 -0
  6. package/dist/components/ServiceItem/types.d.ts +1 -0
  7. package/dist/ui/PaymentCardMobile/PaymentCardMobile.js +2 -5
  8. package/dist/ui/SeatSection/SeatSection.d.ts +2 -1
  9. package/dist/ui/SeatSection/SeatSection.js +13 -5
  10. package/dist/ui/mobileweb/DateTimeSectionMobile.d.ts +2 -1
  11. package/dist/ui/mobileweb/DateTimeSectionMobile.js +2 -2
  12. package/dist/ui/mobileweb/SeatSectionMobile.d.ts +2 -1
  13. package/dist/ui/mobileweb/SeatSectionMobile.js +16 -3
  14. package/package.json +1 -1
  15. package/src/components/ServiceItem/ServiceItemDesktop.tsx +2 -0
  16. package/src/components/ServiceItem/ServiceItemMobile.tsx +2 -0
  17. package/src/components/ServiceItem/mobileTypes.ts +2 -0
  18. package/src/components/ServiceItem/types.ts +2 -0
  19. package/src/ui/PaymentCardMobile/PaymentCardMobile.tsx +2 -5
  20. package/src/ui/SeatSection/SeatSection.tsx +19 -4
  21. package/src/ui/mobileweb/DateTimeSectionMobile.tsx +3 -0
  22. package/src/ui/mobileweb/SeatSectionMobile.tsx +24 -9
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, isShowSeatIcon, showDesdeLabel, showServiceTypeUnderLogo, showSeatsWithDiscount, }: 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, showDesdeLabel, showServiceTypeUnderLogo, showSeatsWithDiscount, showSeatSoldOutLabel, }: 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, isShowSeatIcon = false, showDesdeLabel = false, showServiceTypeUnderLogo = false, showSeatsWithDiscount = false, }) {
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, showDesdeLabel = false, showServiceTypeUnderLogo = false, showSeatsWithDiscount = false, showSeatSoldOutLabel = 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();
@@ -366,7 +366,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
366
366
  backgroundColor: "#ccc",
367
367
  } }),
368
368
  React.createElement("div", { className: "content-center" },
369
- 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, showDesdeLabel: showDesdeLabel, showSeatsWithDiscount: showSeatsWithDiscount })),
369
+ 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, showDesdeLabel: showDesdeLabel, showSeatsWithDiscount: showSeatsWithDiscount, showSeatSoldOutLabel: showSeatSoldOutLabel })),
370
370
  React.createElement("div", { className: "relative" },
371
371
  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, buttonTextColor: colors.primaryButtonTextColor }),
372
372
  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, isShowSeatIcon, showDesdeLabel, showServiceTypeUnderLogo, }: 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, showDesdeLabel, showSeatSoldOutLabel, showServiceTypeUnderLogo, }: 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, isShowSeatIcon = false, showDesdeLabel = false, showServiceTypeUnderLogo = false, }) {
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, showDesdeLabel = false, showSeatSoldOutLabel = false, showServiceTypeUnderLogo = 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;
@@ -155,7 +155,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
155
155
  color: isSoldOut ? "#bbb" : "text-[#464647]",
156
156
  } },
157
157
  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)),
158
- 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, showDesdeLabel: showDesdeLabel }),
158
+ 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, showDesdeLabel: showDesdeLabel, showSeatSoldOutLabel: showSeatSoldOutLabel }),
159
159
  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)),
160
160
  showLastSeats ? (React.createElement("div", { className: "flex justify-end " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
161
161
  (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
@@ -256,5 +256,6 @@ export interface MobileServiceItemProps {
256
256
  priority_stage_ids?: string[];
257
257
  isShowSeatIcon?: boolean;
258
258
  showDesdeLabel?: boolean;
259
+ showSeatSoldOutLabel?: boolean;
259
260
  showServiceTypeUnderLogo?: boolean;
260
261
  }
package/dist/components/ServiceItem/types.d.ts CHANGED
@@ -278,5 +278,6 @@ export interface ServiceItemProps {
278
278
  isShowSeatIcon?: boolean;
279
279
  showDesdeLabel?: boolean;
280
280
  showSeatsWithDiscount?: boolean;
281
+ showSeatSoldOutLabel?: boolean;
281
282
  showServiceTypeUnderLogo?: boolean;
282
283
  }
package/dist/ui/PaymentCardMobile/PaymentCardMobile.js CHANGED
@@ -494,14 +494,11 @@ export const PaymentCardMobile = (props) => {
494
494
  currency ? currency : "",
495
495
  " ",
496
496
  CommonService.currency(isPeru
497
- ? Math.round(Math.max(0, ((removeDiscountAtomValue
498
- ? 0
499
- : (netFare !== null && netFare !== void 0 ? netFare : 0)) -
500
- (walletMoney !== null && walletMoney !== void 0 ? walletMoney : 0)) *
497
+ ? Math.round(Math.max(0, (removeDiscountAtomValue ? 0 : (netFare !== null && netFare !== void 0 ? netFare : 0)) *
501
498
  100)) / 100
502
499
  : removeDiscountAtomValue
503
500
  ? 0
504
- : Math.max(0, (netFare !== null && netFare !== void 0 ? netFare : 0) - (walletMoney !== null && walletMoney !== void 0 ? walletMoney : 0)), currencySign))))));
501
+ : Math.max(0, netFare !== null && netFare !== void 0 ? netFare : 0), currencySign))))));
505
502
  } }),
506
503
  React.createElement("div", { style: {
507
504
  display: "flex",
package/dist/ui/SeatSection/SeatSection.d.ts CHANGED
@@ -17,6 +17,7 @@ interface SeatSectionProps {
17
17
  isPeru?: boolean;
18
18
  showDesdeLabel?: boolean;
19
19
  showSeatsWithDiscount?: boolean;
20
+ showSeatSoldOutLabel?: boolean;
20
21
  serviceItem?: any;
21
22
  renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
22
23
  discountSeatPriceColor?: string;
@@ -29,5 +30,5 @@ interface SeatSectionProps {
29
30
  discountSeatCrossPriceColor?: string;
30
31
  isShowSeatIcon?: boolean;
31
32
  }
32
- declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isSeatIcon, isTrain, topLabelColor, tooltipColor, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel, showSeatsWithDiscount, }: SeatSectionProps): React.ReactElement;
33
+ declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isSeatIcon, isTrain, topLabelColor, tooltipColor, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel, showSeatsWithDiscount, showSeatSoldOutLabel, }: SeatSectionProps): React.ReactElement;
33
34
  export default SeatSection;
package/dist/ui/SeatSection/SeatSection.js CHANGED
@@ -100,7 +100,7 @@ function addSeatDegree(label) {
100
100
  return label;
101
101
  return String(label).replace(/\b(120|140|160|180)\b(?!°)/g, "$1°");
102
102
  }
103
- function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isSeatIcon, isTrain, topLabelColor, tooltipColor, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel = false, showSeatsWithDiscount = false, }) {
103
+ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isSeatIcon, isTrain, topLabelColor, tooltipColor, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel = false, showSeatsWithDiscount = false, showSeatSoldOutLabel = false, }) {
104
104
  var _a;
105
105
  const uniqueSeats = getUniqueSeats(seatTypes, isTrain);
106
106
  const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
@@ -115,6 +115,14 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
115
115
  const formatPrice = (price) => availableSeats <= 0
116
116
  ? CommonService.currency(0, currencySign)
117
117
  : CommonService.currency(price, currencySign);
118
+ // sold_out is keyed by seat type key, e.g. { "140": false, "160": true }
119
+ const isSeatTypeSoldOut = (seat) => {
120
+ var _a, _b;
121
+ return showSeatSoldOutLabel &&
122
+ (((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.sold_out) === null || _a === void 0 ? void 0 : _a[seat === null || seat === void 0 ? void 0 : seat.key]) === true ||
123
+ ((_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.sold_out) === null || _b === void 0 ? void 0 : _b[seat === null || seat === void 0 ? void 0 : seat.label]) === true);
124
+ };
125
+ const renderSeatPrice = (seat, price) => isSeatTypeSoldOut(seat) ? (React.createElement("span", { style: { color: priceColor } }, "Agotado")) : (formatPrice(price));
118
126
  const renderSeatNames = () => {
119
127
  const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
120
128
  return seats.map((val, key) => {
@@ -162,7 +170,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
162
170
  .filter((s) => !SEAT_EXCEPTIONS.includes(s.label))
163
171
  .map((val, key) => {
164
172
  const { discountedPrice } = CommonService.calculateDiscountedPrice(val.price, serviceItem);
165
- return (React.createElement("span", { key: key, className: "flex items-center text-[13.33px] bold-text" }, formatPrice(discountedPrice)));
173
+ return (React.createElement("span", { key: key, className: "flex items-center text-[13.33px] bold-text" }, renderSeatPrice(val, discountedPrice)));
166
174
  });
167
175
  }
168
176
  // Single seat type → original behaviour (one lowest-fare price)
@@ -170,12 +178,12 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
170
178
  const lowestFare = allSeats.length > 0 ? allSeats[0].price : 0;
171
179
  const { discountedPrice } = CommonService.calculateDiscountedPrice(lowestFare, serviceItem);
172
180
  return (React.createElement(React.Fragment, null,
173
- React.createElement("span", { className: "flex items-center text-[13.33px] bold-text" }, formatPrice(discountedPrice))));
181
+ React.createElement("span", { className: "flex items-center text-[13.33px] bold-text" }, renderSeatPrice(allSeats[0], discountedPrice))));
174
182
  }
175
183
  if (removeDuplicateSeats) {
176
184
  return uniqueSeats.map((val, key) => {
177
185
  const { discountedPrice } = CommonService.calculateDiscountedPrice(val.price, serviceItem);
178
- return React.createElement("span", { key: key }, formatPrice(discountedPrice));
186
+ return React.createElement("span", { key: key }, renderSeatPrice(val, discountedPrice));
179
187
  });
180
188
  }
181
189
  return sortedSeatTypes.map((val, key) => {
@@ -184,7 +192,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
184
192
  const { discountedPrice } = CommonService.calculateDiscountedPrice(val.price, serviceItem);
185
193
  return (React.createElement("span", { key: key, className: "flex items-center text-[13.33px] bold-text" }, typeof discountedPrice === "string" ||
186
194
  typeof discountedPrice === "number"
187
- ? formatPrice(discountedPrice)
195
+ ? renderSeatPrice(val, discountedPrice)
188
196
  : null));
189
197
  });
190
198
  };
package/dist/ui/mobileweb/DateTimeSectionMobile.d.ts CHANGED
@@ -26,6 +26,7 @@ interface DateTimeSectionMobileProps {
26
26
  discountSeatCrossPriceColor?: string;
27
27
  isShowSeatIcon?: boolean;
28
28
  showDesdeLabel?: boolean;
29
+ showSeatSoldOutLabel?: boolean;
29
30
  }
30
- 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, showDesdeLabel, }: DateTimeSectionMobileProps): React.ReactElement;
31
+ 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, showDesdeLabel, showSeatSoldOutLabel, }: DateTimeSectionMobileProps): React.ReactElement;
31
32
  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, isShowSeatIcon, showDesdeLabel, }) {
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, showDesdeLabel, showSeatSoldOutLabel, }) {
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, isShowSeatIcon: isShowSeatIcon, showDesdeLabel: showDesdeLabel })));
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, showDesdeLabel: showDesdeLabel, showSeatSoldOutLabel: showSeatSoldOutLabel })));
70
70
  }
71
71
  export default DateTimeSectionMobile;
package/dist/ui/mobileweb/SeatSectionMobile.d.ts CHANGED
@@ -21,6 +21,7 @@ interface SeatSectionMobileProps {
21
21
  discountSeatCrossPriceColor?: string;
22
22
  isShowSeatIcon?: boolean;
23
23
  showDesdeLabel?: boolean;
24
+ showSeatSoldOutLabel?: boolean;
24
25
  }
25
- declare function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel, }: SeatSectionMobileProps): React.ReactElement;
26
+ declare function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel, showSeatSoldOutLabel, }: SeatSectionMobileProps): React.ReactElement;
26
27
  export default SeatSectionMobile;
package/dist/ui/mobileweb/SeatSectionMobile.js CHANGED
@@ -64,7 +64,7 @@ const getUniqueSeats = (data, limit) => {
64
64
  .sort((a, b) => a.fare - b.fare)
65
65
  .slice(0, limit);
66
66
  };
67
- function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel = false, }) {
67
+ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel = false, showSeatSoldOutLabel = false, }) {
68
68
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
69
69
  const hasMultipleTypes = ((_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.length) !== null && _a !== void 0 ? _a : 0) > 2;
70
70
  const isMovilBus = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus" ||
@@ -85,6 +85,13 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
85
85
  const { discountedPrice } = commonService.calculateDiscountedPrice(fare, serviceItem);
86
86
  return commonService.currency(discountedPrice, currencySign);
87
87
  };
88
+ // sold_out is keyed by seat type key, e.g. { "140": false, "160": true }
89
+ const isSeatTypeSoldOut = (seat) => {
90
+ var _a, _b;
91
+ return showSeatSoldOutLabel &&
92
+ (((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.sold_out) === null || _a === void 0 ? void 0 : _a[seat === null || seat === void 0 ? void 0 : seat.key]) === true ||
93
+ ((_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.sold_out) === null || _b === void 0 ? void 0 : _b[seat === null || seat === void 0 ? void 0 : seat.label]) === true);
94
+ };
88
95
  const getLowestFare = () => {
89
96
  var _a;
90
97
  const filtered = (_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label))) === null || _a === void 0 ? void 0 : _a.filter((item) => !EXCEPTIONS.includes(item.label));
@@ -118,7 +125,9 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
118
125
  filter: isSoldOut ? "grayscale(1)" : "",
119
126
  } })),
120
127
  commonService.truncateSeatLabel(commonService.addSeatDegree(seat.label))),
121
- React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: priceColor } }, commonService.currency(showOriginalFare ? originalPrice : discountedPrice, currencySign))));
128
+ React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: priceColor } }, isSeatTypeSoldOut(seat)
129
+ ? "Agotado"
130
+ : commonService.currency(showOriginalFare ? originalPrice : discountedPrice, currencySign))));
122
131
  })));
123
132
  }
124
133
  const { originalPrice, discountedPrice } = commonService.calculateDiscountedPrice(lowestFare, serviceItem);
@@ -146,7 +155,11 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
146
155
  hasStrikeOff
147
156
  ? "Desde"
148
157
  : commonService.capitalize(addSeatDegree(seatLabel)) || "Desde"),
149
- React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: priceColor } }, commonService.currency(showOriginalFare ? originalPrice : discountedPrice, currencySign)))));
158
+ React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: {
159
+ color: priceColor,
160
+ } }, isSeatTypeSoldOut(uniqueSeats[0])
161
+ ? "Agotado"
162
+ : commonService.currency(showOriginalFare ? originalPrice : discountedPrice, currencySign)))));
150
163
  };
151
164
  const renderDpSeats = () => {
152
165
  var _a;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "10.4.66",
3
+ "version": "10.4.68",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -156,6 +156,7 @@ function ServiceItemPB({
156
156
  showDesdeLabel = false,
157
157
  showServiceTypeUnderLogo = false,
158
158
  showSeatsWithDiscount = false,
159
+ showSeatSoldOutLabel = false,
159
160
  }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
160
161
  const handleSeatSelect = (
161
162
  key: any,
@@ -723,6 +724,7 @@ function ServiceItemPB({
723
724
  isShowSeatIcon={isShowSeatIcon}
724
725
  showDesdeLabel={showDesdeLabel}
725
726
  showSeatsWithDiscount={showSeatsWithDiscount}
727
+ showSeatSoldOutLabel={showSeatSoldOutLabel}
726
728
  />
727
729
  </div>
728
730
 
package/src/components/ServiceItem/ServiceItemMobile.tsx CHANGED
@@ -69,6 +69,7 @@ function ServiceItemMobile({
69
69
  priority_stage_ids,
70
70
  isShowSeatIcon = false,
71
71
  showDesdeLabel = false,
72
+ showSeatSoldOutLabel = false,
72
73
  showServiceTypeUnderLogo = false,
73
74
  }: MobileServiceItemProps): React.ReactElement {
74
75
  const isItemExpanded = serviceItem.id === isExpanded;
@@ -411,6 +412,7 @@ function ServiceItemMobile({
411
412
  discountSeatCrossPriceColor={colors.discountSeatCrossPriceColor}
412
413
  isShowSeatIcon={isShowSeatIcon}
413
414
  showDesdeLabel={showDesdeLabel}
415
+ showSeatSoldOutLabel={showSeatSoldOutLabel}
414
416
  />
415
417
 
416
418
  {hasDiscount && (
package/src/components/ServiceItem/mobileTypes.ts CHANGED
@@ -269,5 +269,7 @@ export interface MobileServiceItemProps {
269
269
  isShowSeatIcon?: boolean;
270
270
  // shows a small "Desde" label above the price in the seat section
271
271
  showDesdeLabel?: boolean;
272
+ // shows "Agotado" in place of the price for sold-out seat types
273
+ showSeatSoldOutLabel?: boolean;
272
274
  showServiceTypeUnderLogo?: boolean;
273
275
  }
package/src/components/ServiceItem/types.ts CHANGED
@@ -292,5 +292,7 @@ export interface ServiceItemProps {
292
292
  showDesdeLabel?: boolean;
293
293
  // keeps listing the seat types next to the discounted price
294
294
  showSeatsWithDiscount?: boolean;
295
+ // shows "Agotado" in place of the price for sold-out seat types
296
+ showSeatSoldOutLabel?: boolean;
295
297
  showServiceTypeUnderLogo?: boolean;
296
298
  }
package/src/ui/PaymentCardMobile/PaymentCardMobile.tsx CHANGED
@@ -966,16 +966,13 @@ export const PaymentCardMobile: React.FC<PaymentSideBarProps> = (props) => {
966
966
  ? Math.round(
967
967
  Math.max(
968
968
  0,
969
- ((removeDiscountAtomValue
970
- ? 0
971
- : (netFare ?? 0)) -
972
- (walletMoney ?? 0)) *
969
+ (removeDiscountAtomValue ? 0 : (netFare ?? 0)) *
973
970
  100,
974
971
  ),
975
972
  ) / 100
976
973
  : removeDiscountAtomValue
977
974
  ? 0
978
- : Math.max(0, (netFare ?? 0) - (walletMoney ?? 0)),
975
+ : Math.max(0, netFare ?? 0),
979
976
  currencySign,
980
977
  )}
981
978
  </span>
package/src/ui/SeatSection/SeatSection.tsx CHANGED
@@ -22,6 +22,7 @@ interface SeatSectionProps {
22
22
  isPeru?: boolean;
23
23
  showDesdeLabel?: boolean;
24
24
  showSeatsWithDiscount?: boolean;
25
+ showSeatSoldOutLabel?: boolean;
25
26
  serviceItem?: any;
26
27
  renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
27
28
  discountSeatPriceColor?: string;
@@ -174,6 +175,7 @@ function SeatSection({
174
175
  isShowSeatIcon,
175
176
  showDesdeLabel = false,
176
177
  showSeatsWithDiscount = false,
178
+ showSeatSoldOutLabel = false,
177
179
  }: SeatSectionProps): React.ReactElement {
178
180
  const uniqueSeats = getUniqueSeats(seatTypes, isTrain);
179
181
  const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
@@ -193,6 +195,19 @@ function SeatSection({
193
195
  ? CommonService.currency(0, currencySign)
194
196
  : CommonService.currency(price, currencySign);
195
197
 
198
+ // sold_out is keyed by seat type key, e.g. { "140": false, "160": true }
199
+ const isSeatTypeSoldOut = (seat: any) =>
200
+ showSeatSoldOutLabel &&
201
+ (serviceItem?.sold_out?.[seat?.key] === true ||
202
+ serviceItem?.sold_out?.[seat?.label] === true);
203
+
204
+ const renderSeatPrice = (seat: any, price: number) =>
205
+ isSeatTypeSoldOut(seat) ? (
206
+ <span style={{ color: priceColor }}>Agotado</span>
207
+ ) : (
208
+ formatPrice(price)
209
+ );
210
+
196
211
  const renderSeatNames = () => {
197
212
  const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
198
213
 
@@ -287,7 +302,7 @@ function SeatSection({
287
302
  key={key}
288
303
  className="flex items-center text-[13.33px] bold-text"
289
304
  >
290
- {formatPrice(discountedPrice)}
305
+ {renderSeatPrice(val, discountedPrice)}
291
306
  </span>
292
307
  );
293
308
  });
@@ -304,7 +319,7 @@ function SeatSection({
304
319
  return (
305
320
  <>
306
321
  <span className="flex items-center text-[13.33px] bold-text">
307
- {formatPrice(discountedPrice)}
322
+ {renderSeatPrice(allSeats[0], discountedPrice)}
308
323
  </span>
309
324
  </>
310
325
  );
@@ -316,7 +331,7 @@ function SeatSection({
316
331
  val.price,
317
332
  serviceItem,
318
333
  );
319
- return <span key={key}>{formatPrice(discountedPrice)}</span>;
334
+ return <span key={key}>{renderSeatPrice(val, discountedPrice)}</span>;
320
335
  });
321
336
  }
322
337
 
@@ -332,7 +347,7 @@ function SeatSection({
332
347
  <span key={key} className="flex items-center text-[13.33px] bold-text">
333
348
  {typeof discountedPrice === "string" ||
334
349
  typeof discountedPrice === "number"
335
- ? formatPrice(discountedPrice)
350
+ ? renderSeatPrice(val, discountedPrice)
336
351
  : null}
337
352
  </span>
338
353
  );
package/src/ui/mobileweb/DateTimeSectionMobile.tsx CHANGED
@@ -29,6 +29,7 @@ interface DateTimeSectionMobileProps {
29
29
  discountSeatCrossPriceColor?: string;
30
30
  isShowSeatIcon?: boolean;
31
31
  showDesdeLabel?: boolean;
32
+ showSeatSoldOutLabel?: boolean;
32
33
  }
33
34
 
34
35
  const pad = (n: number) => (n < 10 ? "0" + n : String(n));
@@ -151,6 +152,7 @@ function DateTimeSectionMobile({
151
152
  discountSeatCrossPriceColor,
152
153
  isShowSeatIcon,
153
154
  showDesdeLabel,
155
+ showSeatSoldOutLabel,
154
156
  }: DateTimeSectionMobileProps): React.ReactElement {
155
157
  const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
156
158
 
@@ -234,6 +236,7 @@ function DateTimeSectionMobile({
234
236
  discountSeatCrossPriceColor={discountSeatCrossPriceColor}
235
237
  isShowSeatIcon={isShowSeatIcon}
236
238
  showDesdeLabel={showDesdeLabel}
239
+ showSeatSoldOutLabel={showSeatSoldOutLabel}
237
240
  />
238
241
  </div>
239
242
  );
package/src/ui/mobileweb/SeatSectionMobile.tsx CHANGED
@@ -37,6 +37,8 @@ interface SeatSectionMobileProps {
37
37
  isShowSeatIcon?: boolean;
38
38
  // shows "Desde" above the price on every service, not only inclination ones
39
39
  showDesdeLabel?: boolean;
40
+ // shows "Agotado" in place of the price for sold-out seat types
41
+ showSeatSoldOutLabel?: boolean;
40
42
  }
41
43
 
42
44
  interface SeatRowProps {
@@ -155,6 +157,7 @@ function SeatSectionMobile({
155
157
  discountSeatCrossPriceColor,
156
158
  isShowSeatIcon,
157
159
  showDesdeLabel = false,
160
+ showSeatSoldOutLabel = false,
158
161
  }: SeatSectionMobileProps): React.ReactElement {
159
162
  const hasMultipleTypes = (seatTypesData?.length ?? 0) > 2;
160
163
 
@@ -186,6 +189,12 @@ function SeatSectionMobile({
186
189
  return commonService.currency(discountedPrice, currencySign);
187
190
  };
188
191
 
192
+ // sold_out is keyed by seat type key, e.g. { "140": false, "160": true }
193
+ const isSeatTypeSoldOut = (seat: any) =>
194
+ showSeatSoldOutLabel &&
195
+ (serviceItem?.sold_out?.[seat?.key] === true ||
196
+ serviceItem?.sold_out?.[seat?.label] === true);
197
+
189
198
  const getLowestFare = (): number | null => {
190
199
  const filtered = seatTypesData
191
200
  ?.filter((item) => getFilteredSeats(item.label))
@@ -256,10 +265,12 @@ function SeatSectionMobile({
256
265
  className="min-[420]:text-[13px] text-[12px] bold-text"
257
266
  style={{ color: priceColor }}
258
267
  >
259
- {commonService.currency(
260
- showOriginalFare ? originalPrice : discountedPrice,
261
- currencySign,
262
- )}
268
+ {isSeatTypeSoldOut(seat)
269
+ ? "Agotado"
270
+ : commonService.currency(
271
+ showOriginalFare ? originalPrice : discountedPrice,
272
+ currencySign,
273
+ )}
263
274
  </span>
264
275
  </div>
265
276
  );
@@ -333,12 +344,16 @@ function SeatSectionMobile({
333
344
  </span>
334
345
  <span
335
346
  className="min-[420]:text-[13px] text-[12px] bold-text"
336
- style={{ color: priceColor }}
347
+ style={{
348
+ color: priceColor,
349
+ }}
337
350
  >
338
- {commonService.currency(
339
- showOriginalFare ? originalPrice : discountedPrice,
340
- currencySign,
341
- )}
351
+ {isSeatTypeSoldOut(uniqueSeats[0])
352
+ ? "Agotado"
353
+ : commonService.currency(
354
+ showOriginalFare ? originalPrice : discountedPrice,
355
+ currencySign,
356
+ )}
342
357
  </span>
343
358
  </div>
344
359
  </>