kupos-ui-components-lib 10.4.61 → 10.4.62

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, }: 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, }: 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, }) {
+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, }) {
     var _a, _b, _c;
     const handleSeatSelect = (key, price, seatKey, apiSeatType) => {
         onClearSeatSelectionError === null || onClearSeatSelectionError === void 0 ? void 0 : onClearSeatSelectionError();
@@ -364,7 +364,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 })),
+                        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 })),
                     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 }),
                         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, }: 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, }: 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, }) {
+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, }) {
     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;
@@ -154,7 +154,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 }),
+                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 }),
                 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

@@ -253,4 +253,5 @@ export interface MobileServiceItemProps {
     isPeruSite?: boolean;
     priority_stage_ids?: string[];
     isShowSeatIcon?: boolean;
+    showDesdeLabel?: boolean;
 }

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

@@ -274,4 +274,5 @@ export interface ServiceItemProps {
     operatorLabel?: string;
     priority_stage_ids?: string[];
     isShowSeatIcon?: boolean;
+    showDesdeLabel?: boolean;
 }

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

@@ -15,6 +15,7 @@ interface SeatSectionProps {
     currencySign?: string;
     removeDuplicateSeats?: boolean;
     isPeru?: boolean;
+    showDesdeLabel?: boolean;
     serviceItem?: any;
     renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
     discountSeatPriceColor?: string;
@@ -27,5 +28,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 }: 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, }: SeatSectionProps): React.ReactElement;
 export default SeatSection;

package/dist/ui/SeatSection/SeatSection.js

@@ -96,7 +96,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 }) {
+function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isSeatIcon, isTrain, topLabelColor, tooltipColor, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel = false, }) {
     var _a;
     const uniqueSeats = getUniqueSeats(seatTypes, isTrain);
     const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
@@ -426,6 +426,10 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
                 right: 0,
                 justifyContent: isCentered ? "center" : "",
                 gap: "10px",
-            } }, renderSeatPrices())));
+            } }, showDesdeLabel ? (
+        // "Desde" sits just above the price without shifting it
+        React.createElement("div", { className: "relative flex flex-col", style: { gap: "10px" } },
+            React.createElement("span", { className: "text-[12px] font-normal text-[#6a6a6a] absolute whitespace-nowrap", style: { top: "-15px" } }, "Desde"),
+            renderSeatPrices())) : (renderSeatPrices()))));
 }
 export default SeatSection;

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

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

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

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

package/dist/ui/mobileweb/SeatSectionMobile.js

@@ -63,7 +63,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, }) {
+function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel = 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" ||
@@ -134,7 +134,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
                 React.createElement("span", { className: "min-[420]:text-[13px] text-[12px]", style: { color: "#bbb" } }, "Antes"),
                 React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] line-through", style: { color: "#bbb" } }, commonService.currency(originalPrice, currencySign)))),
             React.createElement("div", { className: "relative w-[100%] flex flex-row justify-between items-center" },
-                hasInclination && !hasStrikeOff && (React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] absolute", style: { color: "#6a6a6a", top: -20, right: 0 } }, "Desde")),
+                (hasInclination || showDesdeLabel) && !hasStrikeOff && (React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] absolute", style: { color: "#6a6a6a", top: -20, right: 0 } }, "Desde")),
                 React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text flex items-center", style: { color: isSoldOut ? "#bbb" : "#464647" } },
                     seatLabelIcon && (React.createElement("img", { src: seatLabelIcon, alt: "seattype", style: {
                             width: "16px",

package/package.json

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

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -153,6 +153,7 @@ function ServiceItemPB({
   operatorLabel,
   priority_stage_ids,
   isShowSeatIcon = false,
+  showDesdeLabel = false,
 }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
   const handleSeatSelect = (
     key: any,
@@ -715,6 +716,7 @@ function ServiceItemPB({
                       colors.discountSeatCrossPriceColor
                     }
                     isShowSeatIcon={isShowSeatIcon}
+                    showDesdeLabel={showDesdeLabel}
                   />
                 </div>
 

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -68,6 +68,7 @@ function ServiceItemMobile({
   isPeruSite,
   priority_stage_ids,
   isShowSeatIcon = false,
+  showDesdeLabel = false,
 }: MobileServiceItemProps): React.ReactElement {
   const isItemExpanded = serviceItem.id === isExpanded;
   const isPetSeat = (Object.keys(serviceItem?.pet_seat_info) || []).length > 0;
@@ -397,6 +398,7 @@ function ServiceItemMobile({
                 isTrain={isTrain}
                 discountSeatCrossPriceColor={colors.discountSeatCrossPriceColor}
                 isShowSeatIcon={isShowSeatIcon}
+                showDesdeLabel={showDesdeLabel}
               />
 
               {hasDiscount && (

package/src/components/ServiceItem/mobileTypes.ts

@@ -265,4 +265,6 @@ export interface MobileServiceItemProps {
   isPeruSite?: boolean;
   priority_stage_ids?: string[];
   isShowSeatIcon?: boolean;
+  // shows a small "Desde" label above the price in the seat section
+  showDesdeLabel?: boolean;
 }

package/src/components/ServiceItem/types.ts

@@ -286,4 +286,6 @@ export interface ServiceItemProps {
   operatorLabel?: string;
   priority_stage_ids?: string[];
   isShowSeatIcon?: boolean;
+  // shows a small "Desde" label above the price in the seat section
+  showDesdeLabel?: boolean;
 }

package/src/ui/SeatSection/SeatSection.tsx

@@ -20,6 +20,7 @@ interface SeatSectionProps {
   currencySign?: string;
   removeDuplicateSeats?: boolean;
   isPeru?: boolean;
+  showDesdeLabel?: boolean;
   serviceItem?: any;
   renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
   discountSeatPriceColor?: string;
@@ -162,7 +163,8 @@ function SeatSection({
   topLabelColor,
   tooltipColor,
   discountSeatCrossPriceColor,
-  isShowSeatIcon
+  isShowSeatIcon,
+  showDesdeLabel = false,
 }: SeatSectionProps): React.ReactElement {
   const uniqueSeats = getUniqueSeats(seatTypes, isTrain);
   const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
@@ -824,7 +826,20 @@ function SeatSection({
           gap: "10px",
         }}
       >
-        {renderSeatPrices()}
+        {showDesdeLabel ? (
+          // "Desde" sits just above the price without shifting it
+          <div className="relative flex flex-col" style={{ gap: "10px" }}>
+            <span
+              className="text-[12px] font-normal text-[#6a6a6a] absolute whitespace-nowrap"
+              style={{ top: "-15px" }}
+            >
+              Desde
+            </span>
+            {renderSeatPrices()}
+          </div>
+        ) : (
+          renderSeatPrices()
+        )}
       </div>
     </div>
   );

package/src/ui/mobileweb/DateTimeSectionMobile.tsx

@@ -28,6 +28,7 @@ interface DateTimeSectionMobileProps {
   isTrain?: boolean;
   discountSeatCrossPriceColor?: string;
   isShowSeatIcon?: boolean;
+  showDesdeLabel?: boolean;
 }
 
 const pad = (n: number) => (n < 10 ? "0" + n : String(n));
@@ -149,6 +150,7 @@ function DateTimeSectionMobile({
   isTrain,
   discountSeatCrossPriceColor,
   isShowSeatIcon,
+  showDesdeLabel,
 }: DateTimeSectionMobileProps): React.ReactElement {
   const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
 
@@ -231,6 +233,7 @@ function DateTimeSectionMobile({
         isTrain={isTrain}
         discountSeatCrossPriceColor={discountSeatCrossPriceColor}
         isShowSeatIcon={isShowSeatIcon}
+        showDesdeLabel={showDesdeLabel}
       />
     </div>
   );

package/src/ui/mobileweb/SeatSectionMobile.tsx

@@ -35,6 +35,8 @@ interface SeatSectionMobileProps {
   isTrain?: boolean;
   discountSeatCrossPriceColor?: string;
   isShowSeatIcon?: boolean;
+  // shows "Desde" above the price on every service, not only inclination ones
+  showDesdeLabel?: boolean;
 }
 
 interface SeatRowProps {
@@ -151,6 +153,7 @@ function SeatSectionMobile({
   isTrain,
   discountSeatCrossPriceColor,
   isShowSeatIcon,
+  showDesdeLabel = false,
 }: SeatSectionMobileProps): React.ReactElement {
   const hasMultipleTypes = (seatTypesData?.length ?? 0) > 2;
 
@@ -297,7 +300,7 @@ function SeatSectionMobile({
         )}
         <div className="relative w-[100%] flex flex-row justify-between items-center">
           {/* Inclination fares sit under "Desde", same as the stacked rows above. */}
-          {hasInclination && !hasStrikeOff && (
+          {(hasInclination || showDesdeLabel) && !hasStrikeOff && (
             <span
               className="min-[420]:text-[13px] text-[12px] absolute"
               style={{ color: "#6a6a6a", top: -20, right: 0 }}