kupos-ui-components-lib 10.4.67 → 10.4.68

package/dist/components/ServiceItem/ServiceItemDesktop.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { ServiceItemProps } from "./types";
-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 & {
+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 & {
     currencySign?: string;
 }): React.ReactElement;
 export default ServiceItemPB;

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -87,7 +87,7 @@ const ANIMATION_MAP = {
         kupos: flameAnimation,
     },
 };
-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, }) {
+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, }) {
     var _a, _b, _c;
     const handleSeatSelect = (key, price, seatKey, apiSeatType) => {
         onClearSeatSelectionError === null || onClearSeatSelectionError === void 0 ? void 0 : onClearSeatSelectionError();
@@ -366,7 +366,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                             backgroundColor: "#ccc",
                         } }),
                     React.createElement("div", { className: "content-center" },
-                        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 })),
+                        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 })),
                     React.createElement("div", { className: "relative" },
                         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 }),
                         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

@@ -1,4 +1,4 @@
 import React from "react";
 import { MobileServiceItemProps } from "./mobileTypes";
-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;
+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;
 export default ServiceItemMobile;

package/dist/components/ServiceItem/ServiceItemMobile.js

@@ -19,7 +19,7 @@ const exceptions = [
     "blanco",
     "asiento_mascota",
 ];
-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, }) {
+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, }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const isItemExpanded = serviceItem.id === isExpanded;
     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
                                         color: isSoldOut ? "#bbb" : "text-[#464647]",
                                     } },
                                     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)),
-                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 }),
+                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 }),
                 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)),
                 showLastSeats ? (React.createElement("div", { className: "flex justify-end  " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
                     (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

@@ -256,5 +256,6 @@ export interface MobileServiceItemProps {
     priority_stage_ids?: string[];
     isShowSeatIcon?: boolean;
     showDesdeLabel?: boolean;
+    showSeatSoldOutLabel?: boolean;
     showServiceTypeUnderLogo?: boolean;
 }

package/dist/components/ServiceItem/types.d.ts

@@ -278,5 +278,6 @@ export interface ServiceItemProps {
     isShowSeatIcon?: boolean;
     showDesdeLabel?: boolean;
     showSeatsWithDiscount?: boolean;
+    showSeatSoldOutLabel?: boolean;
     showServiceTypeUnderLogo?: boolean;
 }

package/dist/ui/SeatSection/SeatSection.d.ts

@@ -17,6 +17,7 @@ interface SeatSectionProps {
     isPeru?: boolean;
     showDesdeLabel?: boolean;
     showSeatsWithDiscount?: boolean;
+    showSeatSoldOutLabel?: boolean;
     serviceItem?: any;
     renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
     discountSeatPriceColor?: string;
@@ -29,5 +30,5 @@ interface SeatSectionProps {
     discountSeatCrossPriceColor?: string;
     isShowSeatIcon?: boolean;
 }
-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;
+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;
 export default SeatSection;

package/dist/ui/SeatSection/SeatSection.js

@@ -100,7 +100,7 @@ function addSeatDegree(label) {
         return label;
     return String(label).replace(/\b(120|140|160|180)\b(?!°)/g, "$1°");
 }
-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, }) {
+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, }) {
     var _a;
     const uniqueSeats = getUniqueSeats(seatTypes, isTrain);
     const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
@@ -115,6 +115,14 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
     const formatPrice = (price) => availableSeats <= 0
         ? CommonService.currency(0, currencySign)
         : CommonService.currency(price, currencySign);
+    // sold_out is keyed by seat type key, e.g. { "140": false, "160": true }
+    const isSeatTypeSoldOut = (seat) => {
+        var _a, _b;
+        return showSeatSoldOutLabel &&
+            (((_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 ||
+                ((_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);
+    };
+    const renderSeatPrice = (seat, price) => isSeatTypeSoldOut(seat) ? (React.createElement("span", { style: { color: priceColor } }, "Agotado")) : (formatPrice(price));
     const renderSeatNames = () => {
         const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
         return seats.map((val, key) => {
@@ -162,7 +170,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
                     .filter((s) => !SEAT_EXCEPTIONS.includes(s.label))
                     .map((val, key) => {
                     const { discountedPrice } = CommonService.calculateDiscountedPrice(val.price, serviceItem);
-                    return (React.createElement("span", { key: key, className: "flex items-center text-[13.33px] bold-text" }, formatPrice(discountedPrice)));
+                    return (React.createElement("span", { key: key, className: "flex items-center text-[13.33px] bold-text" }, renderSeatPrice(val, discountedPrice)));
                 });
             }
             // Single seat type → original behaviour (one lowest-fare price)
@@ -170,12 +178,12 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
             const lowestFare = allSeats.length > 0 ? allSeats[0].price : 0;
             const { discountedPrice } = CommonService.calculateDiscountedPrice(lowestFare, serviceItem);
             return (React.createElement(React.Fragment, null,
-                React.createElement("span", { className: "flex items-center text-[13.33px] bold-text" }, formatPrice(discountedPrice))));
+                React.createElement("span", { className: "flex items-center text-[13.33px] bold-text" }, renderSeatPrice(allSeats[0], discountedPrice))));
         }
         if (removeDuplicateSeats) {
             return uniqueSeats.map((val, key) => {
                 const { discountedPrice } = CommonService.calculateDiscountedPrice(val.price, serviceItem);
-                return React.createElement("span", { key: key }, formatPrice(discountedPrice));
+                return React.createElement("span", { key: key }, renderSeatPrice(val, discountedPrice));
             });
         }
         return sortedSeatTypes.map((val, key) => {
@@ -184,7 +192,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
             const { discountedPrice } = CommonService.calculateDiscountedPrice(val.price, serviceItem);
             return (React.createElement("span", { key: key, className: "flex items-center text-[13.33px] bold-text" }, typeof discountedPrice === "string" ||
                 typeof discountedPrice === "number"
-                ? formatPrice(discountedPrice)
+                ? renderSeatPrice(val, discountedPrice)
                 : null));
         });
     };

package/dist/ui/mobileweb/DateTimeSectionMobile.d.ts

@@ -26,6 +26,7 @@ interface DateTimeSectionMobileProps {
     discountSeatCrossPriceColor?: string;
     isShowSeatIcon?: boolean;
     showDesdeLabel?: boolean;
+    showSeatSoldOutLabel?: boolean;
 }
-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;
+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;
 export default DateTimeSectionMobile;

package/dist/ui/mobileweb/DateTimeSectionMobile.js

@@ -38,7 +38,7 @@ const TimeRow = ({ label, icon, alt, date, timeContent, isSoldOut, }) => {
                     React.createElement("div", null, "\u2022"),
                     React.createElement("div", { className: "font-[900] relative black-text", style: { fontVariantNumeric: "tabular-nums" } }, timeContent))))));
 };
-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, }) {
+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, }) {
     const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
     const depTimeContent = isLinatal ? (React.createElement("div", null,
         React.createElement("span", null,
@@ -66,6 +66,6 @@ function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal
                 margin: "auto 6px",
                 flexShrink: 0,
             } }),
-        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 })));
+        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 })));
 }
 export default DateTimeSectionMobile;

package/dist/ui/mobileweb/SeatSectionMobile.d.ts

@@ -21,6 +21,7 @@ interface SeatSectionMobileProps {
     discountSeatCrossPriceColor?: string;
     isShowSeatIcon?: boolean;
     showDesdeLabel?: boolean;
+    showSeatSoldOutLabel?: boolean;
 }
-declare function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel, }: SeatSectionMobileProps): React.ReactElement;
+declare function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel, showSeatSoldOutLabel, }: SeatSectionMobileProps): React.ReactElement;
 export default SeatSectionMobile;

package/dist/ui/mobileweb/SeatSectionMobile.js

@@ -64,7 +64,7 @@ const getUniqueSeats = (data, limit) => {
         .sort((a, b) => a.fare - b.fare)
         .slice(0, limit);
 };
-function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel = false, }) {
+function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel = false, showSeatSoldOutLabel = false, }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const hasMultipleTypes = ((_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.length) !== null && _a !== void 0 ? _a : 0) > 2;
     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
         const { discountedPrice } = commonService.calculateDiscountedPrice(fare, serviceItem);
         return commonService.currency(discountedPrice, currencySign);
     };
+    // sold_out is keyed by seat type key, e.g. { "140": false, "160": true }
+    const isSeatTypeSoldOut = (seat) => {
+        var _a, _b;
+        return showSeatSoldOutLabel &&
+            (((_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 ||
+                ((_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);
+    };
     const getLowestFare = () => {
         var _a;
         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
                                     filter: isSoldOut ? "grayscale(1)" : "",
                                 } })),
                             commonService.truncateSeatLabel(commonService.addSeatDegree(seat.label))),
-                        React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: priceColor } }, commonService.currency(showOriginalFare ? originalPrice : discountedPrice, currencySign))));
+                        React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: priceColor } }, isSeatTypeSoldOut(seat)
+                            ? "Agotado"
+                            : commonService.currency(showOriginalFare ? originalPrice : discountedPrice, currencySign))));
                 })));
         }
         const { originalPrice, discountedPrice } = commonService.calculateDiscountedPrice(lowestFare, serviceItem);
@@ -146,7 +155,11 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
                     hasStrikeOff
                         ? "Desde"
                         : commonService.capitalize(addSeatDegree(seatLabel)) || "Desde"),
-                React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: priceColor } }, commonService.currency(showOriginalFare ? originalPrice : discountedPrice, currencySign)))));
+                React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: {
+                        color: priceColor,
+                    } }, isSeatTypeSoldOut(uniqueSeats[0])
+                    ? "Agotado"
+                    : commonService.currency(showOriginalFare ? originalPrice : discountedPrice, currencySign)))));
     };
     const renderDpSeats = () => {
         var _a;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kupos-ui-components-lib",
-  "version": "10.4.67",
+  "version": "10.4.68",
   "description": "A reusable UI components package",
   "publishConfig": {
     "access": "public"

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -156,6 +156,7 @@ function ServiceItemPB({
   showDesdeLabel = false,
   showServiceTypeUnderLogo = false,
   showSeatsWithDiscount = false,
+  showSeatSoldOutLabel = false,
 }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
   const handleSeatSelect = (
     key: any,
@@ -723,6 +724,7 @@ function ServiceItemPB({
                     isShowSeatIcon={isShowSeatIcon}
                     showDesdeLabel={showDesdeLabel}
                     showSeatsWithDiscount={showSeatsWithDiscount}
+                    showSeatSoldOutLabel={showSeatSoldOutLabel}
                   />
                 </div>
 

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -69,6 +69,7 @@ function ServiceItemMobile({
   priority_stage_ids,
   isShowSeatIcon = false,
   showDesdeLabel = false,
+  showSeatSoldOutLabel = false,
   showServiceTypeUnderLogo = false,
 }: MobileServiceItemProps): React.ReactElement {
   const isItemExpanded = serviceItem.id === isExpanded;
@@ -411,6 +412,7 @@ function ServiceItemMobile({
                 discountSeatCrossPriceColor={colors.discountSeatCrossPriceColor}
                 isShowSeatIcon={isShowSeatIcon}
                 showDesdeLabel={showDesdeLabel}
+                showSeatSoldOutLabel={showSeatSoldOutLabel}
               />
 
               {hasDiscount && (

package/src/components/ServiceItem/mobileTypes.ts

@@ -269,5 +269,7 @@ export interface MobileServiceItemProps {
   isShowSeatIcon?: boolean;
   // shows a small "Desde" label above the price in the seat section
   showDesdeLabel?: boolean;
+  // shows "Agotado" in place of the price for sold-out seat types
+  showSeatSoldOutLabel?: boolean;
   showServiceTypeUnderLogo?: boolean;
 }

package/src/components/ServiceItem/types.ts

@@ -292,5 +292,7 @@ export interface ServiceItemProps {
   showDesdeLabel?: boolean;
   // keeps listing the seat types next to the discounted price
   showSeatsWithDiscount?: boolean;
+  // shows "Agotado" in place of the price for sold-out seat types
+  showSeatSoldOutLabel?: boolean;
   showServiceTypeUnderLogo?: boolean;
 }

package/src/ui/SeatSection/SeatSection.tsx

@@ -22,6 +22,7 @@ interface SeatSectionProps {
   isPeru?: boolean;
   showDesdeLabel?: boolean;
   showSeatsWithDiscount?: boolean;
+  showSeatSoldOutLabel?: boolean;
   serviceItem?: any;
   renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
   discountSeatPriceColor?: string;
@@ -174,6 +175,7 @@ function SeatSection({
   isShowSeatIcon,
   showDesdeLabel = false,
   showSeatsWithDiscount = false,
+  showSeatSoldOutLabel = false,
 }: SeatSectionProps): React.ReactElement {
   const uniqueSeats = getUniqueSeats(seatTypes, isTrain);
   const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
@@ -193,6 +195,19 @@ function SeatSection({
       ? CommonService.currency(0, currencySign)
       : CommonService.currency(price, currencySign);
 
+  // sold_out is keyed by seat type key, e.g. { "140": false, "160": true }
+  const isSeatTypeSoldOut = (seat: any) =>
+    showSeatSoldOutLabel &&
+    (serviceItem?.sold_out?.[seat?.key] === true ||
+      serviceItem?.sold_out?.[seat?.label] === true);
+
+  const renderSeatPrice = (seat: any, price: number) =>
+    isSeatTypeSoldOut(seat) ? (
+      <span style={{ color: priceColor }}>Agotado</span>
+    ) : (
+      formatPrice(price)
+    );
+
   const renderSeatNames = () => {
     const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
 
@@ -287,7 +302,7 @@ function SeatSection({
                 key={key}
                 className="flex items-center text-[13.33px] bold-text"
               >
-                {formatPrice(discountedPrice)}
+                {renderSeatPrice(val, discountedPrice)}
               </span>
             );
           });
@@ -304,7 +319,7 @@ function SeatSection({
       return (
         <>
           <span className="flex items-center text-[13.33px] bold-text">
-            {formatPrice(discountedPrice)}
+            {renderSeatPrice(allSeats[0], discountedPrice)}
           </span>
         </>
       );
@@ -316,7 +331,7 @@ function SeatSection({
           val.price,
           serviceItem,
         );
-        return <span key={key}>{formatPrice(discountedPrice)}</span>;
+        return <span key={key}>{renderSeatPrice(val, discountedPrice)}</span>;
       });
     }
 
@@ -332,7 +347,7 @@ function SeatSection({
         <span key={key} className="flex items-center text-[13.33px] bold-text">
           {typeof discountedPrice === "string" ||
           typeof discountedPrice === "number"
-            ? formatPrice(discountedPrice)
+            ? renderSeatPrice(val, discountedPrice)
             : null}
         </span>
       );

package/src/ui/mobileweb/DateTimeSectionMobile.tsx

@@ -29,6 +29,7 @@ interface DateTimeSectionMobileProps {
   discountSeatCrossPriceColor?: string;
   isShowSeatIcon?: boolean;
   showDesdeLabel?: boolean;
+  showSeatSoldOutLabel?: boolean;
 }
 
 const pad = (n: number) => (n < 10 ? "0" + n : String(n));
@@ -151,6 +152,7 @@ function DateTimeSectionMobile({
   discountSeatCrossPriceColor,
   isShowSeatIcon,
   showDesdeLabel,
+  showSeatSoldOutLabel,
 }: DateTimeSectionMobileProps): React.ReactElement {
   const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
 
@@ -234,6 +236,7 @@ function DateTimeSectionMobile({
         discountSeatCrossPriceColor={discountSeatCrossPriceColor}
         isShowSeatIcon={isShowSeatIcon}
         showDesdeLabel={showDesdeLabel}
+        showSeatSoldOutLabel={showSeatSoldOutLabel}
       />
     </div>
   );

package/src/ui/mobileweb/SeatSectionMobile.tsx

@@ -37,6 +37,8 @@ interface SeatSectionMobileProps {
   isShowSeatIcon?: boolean;
   // shows "Desde" above the price on every service, not only inclination ones
   showDesdeLabel?: boolean;
+  // shows "Agotado" in place of the price for sold-out seat types
+  showSeatSoldOutLabel?: boolean;
 }
 
 interface SeatRowProps {
@@ -155,6 +157,7 @@ function SeatSectionMobile({
   discountSeatCrossPriceColor,
   isShowSeatIcon,
   showDesdeLabel = false,
+  showSeatSoldOutLabel = false,
 }: SeatSectionMobileProps): React.ReactElement {
   const hasMultipleTypes = (seatTypesData?.length ?? 0) > 2;
 
@@ -186,6 +189,12 @@ function SeatSectionMobile({
     return commonService.currency(discountedPrice, currencySign);
   };
 
+  // sold_out is keyed by seat type key, e.g. { "140": false, "160": true }
+  const isSeatTypeSoldOut = (seat: any) =>
+    showSeatSoldOutLabel &&
+    (serviceItem?.sold_out?.[seat?.key] === true ||
+      serviceItem?.sold_out?.[seat?.label] === true);
+
   const getLowestFare = (): number | null => {
     const filtered = seatTypesData
       ?.filter((item) => getFilteredSeats(item.label))
@@ -256,10 +265,12 @@ function SeatSectionMobile({
                   className="min-[420]:text-[13px] text-[12px] bold-text"
                   style={{ color: priceColor }}
                 >
-                  {commonService.currency(
-                    showOriginalFare ? originalPrice : discountedPrice,
-                    currencySign,
-                  )}
+                  {isSeatTypeSoldOut(seat)
+                    ? "Agotado"
+                    : commonService.currency(
+                        showOriginalFare ? originalPrice : discountedPrice,
+                        currencySign,
+                      )}
                 </span>
               </div>
             );
@@ -333,12 +344,16 @@ function SeatSectionMobile({
           </span>
           <span
             className="min-[420]:text-[13px] text-[12px] bold-text"
-            style={{ color: priceColor }}
+            style={{
+              color: priceColor,
+            }}
           >
-            {commonService.currency(
-              showOriginalFare ? originalPrice : discountedPrice,
-              currencySign,
-            )}
+            {isSeatTypeSoldOut(uniqueSeats[0])
+              ? "Agotado"
+              : commonService.currency(
+                  showOriginalFare ? originalPrice : discountedPrice,
+                  currencySign,
+                )}
           </span>
         </div>
       </>