kupos-ui-components-lib 10.4.58 → 10.4.60

package/dist/components/FilterBar/FilterBarDesktop.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { FilterBarProps } from "./tyoes";
-declare const FilterBarDesktop: ({ t, serviceList, setServiceList, allSchedules, showReturnTripModal, filterArrData, isBlankTicket, operatorId, filtersArray, setFiltersArray, metaData, busTerminals, setTypes, colors, icons, translation, isTrain, isPeru, hideOperator, setCoachLoading, setCoachKey, isAllinBus, priority_stage_ids, }: FilterBarProps) => React.JSX.Element;
+declare const FilterBarDesktop: ({ t, serviceList, setServiceList, allSchedules, showReturnTripModal, filterArrData, isBlankTicket, operatorId, filtersArray, setFiltersArray, metaData, busTerminals, setTypes, colors, icons, translation, isTrain, isPeru, hideOperator, isShowSeatDegree, setCoachLoading, setCoachKey, isAllinBus, priority_stage_ids, }: FilterBarProps) => React.JSX.Element;
 export default FilterBarDesktop;

package/dist/components/FilterBar/FilterBarDesktop.js

@@ -2,7 +2,7 @@ import React from "react";
 import commonService from "../../utils/CommonService";
 import ServiceFilter from "./ServiceFilter";
 let cachedStageOptions = null;
-const FilterBarDesktop = ({ t, serviceList, setServiceList, allSchedules, showReturnTripModal, filterArrData, isBlankTicket, operatorId, filtersArray, setFiltersArray, metaData, busTerminals, setTypes, colors, icons, translation, isTrain, isPeru, hideOperator, setCoachLoading, setCoachKey, isAllinBus, priority_stage_ids, }) => {
+const FilterBarDesktop = ({ t, serviceList, setServiceList, allSchedules, showReturnTripModal, filterArrData, isBlankTicket, operatorId, filtersArray, setFiltersArray, metaData, busTerminals, setTypes, colors, icons, translation, isTrain, isPeru, hideOperator, isShowSeatDegree, setCoachLoading, setCoachKey, isAllinBus, priority_stage_ids, }) => {
     // Same rule as showTopLabel in ServiceItemDesktop: a visible bus terminal
     // label, restricted to priority_stage_ids when that list is non-empty.
     const getTopLabel = (labelId) => {
@@ -267,6 +267,6 @@ const FilterBarDesktop = ({ t, serviceList, setServiceList, allSchedules, showRe
     return (React.createElement(ServiceFilter, { filtersArray: enrichedFilters, onFilterSelected: onFilterSelected, onFilterClear: (val) => {
             setFiltersArray(val);
             filterBy(val);
-        }, showReturnTripModal: showReturnTripModal, initialOpenFilters: isBlankTicket ? ["operator"] : [], colors: colors, icons: icons, translation: translation, isTrain: isTrain, hideOperator: hideOperator, t: t }));
+        }, showReturnTripModal: showReturnTripModal, initialOpenFilters: isBlankTicket ? ["operator"] : [], colors: colors, icons: icons, translation: translation, isTrain: isTrain, hideOperator: hideOperator, isShowSeatDegree: isShowSeatDegree, t: t }));
 };
 export default FilterBarDesktop;

package/dist/components/FilterBar/ServiceFilter.js

@@ -225,6 +225,9 @@ class ServiceFilter extends React.Component {
                                 ? val.spText
                                 : val.label;
                     }
+                    const seatDegreeIcon = option.type === "seat_types" && this.props.isShowSeatDegree
+                        ? commonService.getSeatDegreeIcon(label, this.props.icons)
+                        : null;
                     return (React.createElement("div", { key: i, onClick: () => onClick(val.originalOptionIndex !== undefined
                             ? val.originalOptionIndex
                             : i), style: {
@@ -240,11 +243,15 @@ class ServiceFilter extends React.Component {
                             ? `text-[${this.props.colors.selectedTextColor}]`
                             : ""} ${val.active ? "bold-text" : ""}` },
                         val.icon && this.props.icons && (React.createElement("img", { src: iconKey, alt: val.icon, className: "w-[20px] h-[20px] mr-[10px] " })),
+                        seatDegreeIcon && (React.createElement("img", { src: seatDegreeIcon, alt: "seattype", className: "w-[20px] h-[20px] mr-[10px]" })),
                         React.createElement("span", { style: {
                                 textTransform: option.type !== "time" ? "capitalize" : "none",
                             } }, option.type === "time"
                             ? commonService.formatTimeLabel(label)
-                            : commonService.formatDefaultLabel(label))));
+                            : option.type === "seat_types" &&
+                                this.props.isShowSeatDegree
+                                ? commonService.addSeatDegree(commonService.formatDefaultLabel(label))
+                                : commonService.formatDefaultLabel(label))));
                 }))));
     }
     render() {

package/dist/components/FilterBar/ServiceFilterProps.d.ts

@@ -9,5 +9,6 @@ export interface ServiceFilterProps {
     translation: any;
     isTrain?: boolean;
     hideOperator?: boolean;
+    isShowSeatDegree?: boolean;
     t?: (key: string) => string;
 }

package/dist/components/FilterBar/tyoes.d.ts

@@ -14,6 +14,7 @@ export interface FilterBarProps {
     busTerminals?: any;
     setTypes?: any;
     hideOperator?: boolean;
+    isShowSeatDegree?: boolean;
     colors: {
         selectedColor?: string;
         selectedTextColor?: string;
@@ -27,6 +28,11 @@ export interface FilterBarProps {
         iconSunsetOrange?: string;
         iconNight?: string;
         iconNightOrange?: string;
+        seat120?: string;
+        seat140?: string;
+        seat160?: string;
+        seat180?: string;
+        fallBackSeatIcon?: string;
     };
     translation?: {
         [key: string]: string;

package/dist/components/FilterSortBar/FilterSortBarMobile.d.ts

@@ -6,5 +6,5 @@ import { FilterSortBarMobileProps } from "./types";
  * consumer's list — sees a change until Aplicar commits the draft via
  * onApply. Closing the sheet without applying discards it.
  */
-declare const FilterSortBarMobile: ({ categories, onApply, onClearFilter, sortOptions, onSortChange, currencySign, colors, icons, }: FilterSortBarMobileProps) => React.JSX.Element;
+declare const FilterSortBarMobile: ({ categories, onApply, onClearFilter, sortOptions, onSortChange, currencySign, colors, icons, isShowSeatDegree, }: FilterSortBarMobileProps) => React.JSX.Element;
 export default FilterSortBarMobile;

package/dist/components/FilterSortBar/FilterSortBarMobile.js

@@ -45,7 +45,7 @@ const isCategoryActive = (category) => getCategoryActiveCount(category) > 0;
  * consumer's list — sees a change until Aplicar commits the draft via
  * onApply. Closing the sheet without applying discards it.
  */
-const FilterSortBarMobile = ({ categories, onApply, onClearFilter, sortOptions, onSortChange, currencySign = "$", colors, icons, }) => {
+const FilterSortBarMobile = ({ categories, onApply, onClearFilter, sortOptions, onSortChange, currencySign = "$", colors, icons, isShowSeatDegree = false, }) => {
     const [openSheet, setOpenSheet] = useState(null);
     const [isScrolled, setIsScrolled] = useState(false);
     const [draftCategories, setDraftCategories] = useState(categories);
@@ -164,6 +164,6 @@ const FilterSortBarMobile = ({ categories, onApply, onClearFilter, sortOptions,
                     var _a;
                     return (React.createElement(FilterChip, { key: `${category.key}:${option.id}`, label: option.label, active: option.selected, isOpen: false, onClick: () => handleInlineOptionToggle(category.key, option.id), iconSrc: option.icon ? (_a = resolvedIcons.timeOfDayIcons) === null || _a === void 0 ? void 0 : _a[option.icon] : undefined, colors: resolvedColors, icons: resolvedIcons }));
                 })))),
-        React.createElement(FiltersMasterSheet, { isOpen: isMasterOpen, initialCategoryKey: initialCategoryKey, categories: draftCategories, onClose: closeSheet, onToggleOption: handleDraftToggleOption, onPriceRangeChange: handleDraftPriceRangeChange, onClearAll: handleClearAll, onApplyAll: handleApplyAll, currencySign: currencySign, colors: resolvedColors, icons: resolvedIcons })));
+        React.createElement(FiltersMasterSheet, { isOpen: isMasterOpen, initialCategoryKey: initialCategoryKey, categories: draftCategories, onClose: closeSheet, onToggleOption: handleDraftToggleOption, onPriceRangeChange: handleDraftPriceRangeChange, onClearAll: handleClearAll, onApplyAll: handleApplyAll, currencySign: currencySign, colors: resolvedColors, icons: resolvedIcons, isShowSeatDegree: isShowSeatDegree })));
 };
 export default FilterSortBarMobile;

package/dist/components/FilterSortBar/FiltersMasterSheet.d.ts

@@ -13,6 +13,7 @@ interface FiltersMasterSheetProps {
     currencySign: string;
     colors: Required<FilterSortBarColors>;
     icons?: FilterSortBarIcons;
+    isShowSeatDegree?: boolean;
 }
-declare const FiltersMasterSheet: ({ isOpen, initialCategoryKey, categories, onClose, onToggleOption, onPriceRangeChange, onClearAll, onApplyAll, currencySign, colors, icons, }: FiltersMasterSheetProps) => React.JSX.Element;
+declare const FiltersMasterSheet: ({ isOpen, initialCategoryKey, categories, onClose, onToggleOption, onPriceRangeChange, onClearAll, onApplyAll, currencySign, colors, icons, isShowSeatDegree, }: FiltersMasterSheetProps) => React.JSX.Element;
 export default FiltersMasterSheet;

package/dist/components/FilterSortBar/FiltersMasterSheet.js

@@ -4,7 +4,7 @@ import { CloseIcon } from "./icons";
 import OptionCheckboxList from "./OptionCheckboxList";
 import PriceRangeSlider from "./PriceRangeSlider";
 import SheetFooter from "./SheetFooter";
-const FiltersMasterSheet = ({ isOpen, initialCategoryKey, categories, onClose, onToggleOption, onPriceRangeChange, onClearAll, onApplyAll, currencySign, colors, icons, }) => {
+const FiltersMasterSheet = ({ isOpen, initialCategoryKey, categories, onClose, onToggleOption, onPriceRangeChange, onClearAll, onApplyAll, currencySign, colors, icons, isShowSeatDegree, }) => {
     var _a, _b;
     const [activeKey, setActiveKey] = useState((_b = initialCategoryKey !== null && initialCategoryKey !== void 0 ? initialCategoryKey : (_a = categories[0]) === null || _a === void 0 ? void 0 : _a.key) !== null && _b !== void 0 ? _b : "time");
     // Reset the pre-selected tab every time the sheet is (re)opened, whether
@@ -35,7 +35,7 @@ const FiltersMasterSheet = ({ isOpen, initialCategoryKey, categories, onClose, o
                 })),
                 React.createElement("div", { className: "flex-1 overflow-y-auto pl-[16px] pr-[20px] relative z-[1] bg-white" },
                     activeCategory && (React.createElement("div", { className: "text-[11px] font-bold text-[#9B9B9B] uppercase tracking-[0.4px] mb-[5px] mt-[15px]" }, activeCategory.sectionLabel || activeCategory.label)),
-                    (activeCategory === null || activeCategory === void 0 ? void 0 : activeCategory.kind) === "price" && activeCategory.priceRange ? (React.createElement(PriceRangeSlider, { value: activeCategory.priceRange, onChange: (min, max) => onPriceRangeChange(activeCategory.key, min, max), currencySign: currencySign, primaryColor: colors.primaryColor, minLabel: "M\u00EDnimo", maxLabel: "M\u00E1ximo" })) : (React.createElement(OptionCheckboxList, { options: (activeCategory === null || activeCategory === void 0 ? void 0 : activeCategory.options) || [], kind: (activeCategory === null || activeCategory === void 0 ? void 0 : activeCategory.kind) || "checkbox", onToggle: (optionId) => onToggleOption(activeCategory.key, optionId), primaryColor: colors.primaryColor, starColor: colors.buttonColor || colors.primaryColor, icons: icons })))),
+                    (activeCategory === null || activeCategory === void 0 ? void 0 : activeCategory.kind) === "price" && activeCategory.priceRange ? (React.createElement(PriceRangeSlider, { value: activeCategory.priceRange, onChange: (min, max) => onPriceRangeChange(activeCategory.key, min, max), currencySign: currencySign, primaryColor: colors.primaryColor, minLabel: "M\u00EDnimo", maxLabel: "M\u00E1ximo" })) : (React.createElement(OptionCheckboxList, { options: (activeCategory === null || activeCategory === void 0 ? void 0 : activeCategory.options) || [], kind: (activeCategory === null || activeCategory === void 0 ? void 0 : activeCategory.kind) || "checkbox", onToggle: (optionId) => onToggleOption(activeCategory.key, optionId), primaryColor: colors.primaryColor, starColor: colors.buttonColor || colors.primaryColor, icons: icons, showSeatDegree: !!isShowSeatDegree && (activeCategory === null || activeCategory === void 0 ? void 0 : activeCategory.key) === "seatType" })))),
             React.createElement("div", { className: "px-[20px]" },
                 React.createElement(SheetFooter, { onClear: onClearAll, onApply: onApplyAll, colors: colors })))));
 };

package/dist/components/FilterSortBar/OptionCheckboxList.d.ts

@@ -8,6 +8,8 @@ interface OptionCheckboxListProps {
     /** Filled-star color for rating options — the app's button/CTA color, not the chip accent. */
     starColor: string;
     icons?: FilterSortBarIcons;
+    /** For options whose label contains 120/140/160/180: add "°" and show icons.seat120/140/160/180. */
+    showSeatDegree?: boolean;
 }
-declare const OptionCheckboxList: ({ options, kind, onToggle, primaryColor, starColor, icons }: OptionCheckboxListProps) => React.JSX.Element;
+declare const OptionCheckboxList: ({ options, kind, onToggle, primaryColor, starColor, icons, showSeatDegree, }: OptionCheckboxListProps) => React.JSX.Element;
 export default OptionCheckboxList;

package/dist/components/FilterSortBar/OptionCheckboxList.js

@@ -4,16 +4,20 @@ import CommonService from "../../utils/CommonService";
 const RatingLabel = ({ stars, label, starColor, icons, }) => (React.createElement("div", { className: "flex items-center gap-[1px] whitespace-nowrap" },
     Array.from({ length: 5 }, (_, i) => (React.createElement(StarIcon, { key: i, size: 10, filled: stars != null && i < stars, color: starColor, filledSrc: icons === null || icons === void 0 ? void 0 : icons.starFilledIcon, emptySrc: icons === null || icons === void 0 ? void 0 : icons.starEmptyIcon }))),
     React.createElement("span", { className: "ml-[6px]" }, label)));
-const OptionCheckboxList = ({ options, kind, onToggle, primaryColor, starColor, icons }) => {
+const OptionCheckboxList = ({ options, kind, onToggle, primaryColor, starColor, icons, showSeatDegree, }) => {
     if (!(options === null || options === void 0 ? void 0 : options.length)) {
         return (React.createElement("div", { className: "py-[24px] text-center text-[#9B9B9B] text-[13px]" }, "No hay opciones disponibles"));
     }
     return (React.createElement("div", null, options.map((option) => {
         var _a;
+        const seatIcon = showSeatDegree ? CommonService.getSeatDegreeIcon(option.label, icons) : null;
+        const label = CommonService.capitalizeFirstLetter(showSeatDegree ? CommonService.addSeatDegree(option.label) : option.label);
         return (React.createElement("div", { key: option.id, onClick: () => onToggle(option.id), className: "flex items-center justify-between py-[12px] px-[2px] cursor-pointer text-[13px] text-[#464647] select-none [-webkit-tap-highlight-color:transparent]" },
             kind === "rating" ? (React.createElement(RatingLabel, { stars: option.stars, label: option.label, starColor: starColor, icons: icons })) : option.icon ? (React.createElement("div", { className: "flex items-center gap-[10px]" },
                 React.createElement(TimeOfDayIcon, { variant: option.icon, size: 16, src: (_a = icons === null || icons === void 0 ? void 0 : icons.timeOfDayIcons) === null || _a === void 0 ? void 0 : _a[option.icon] }),
-                React.createElement("span", null, option.label))) : (React.createElement("span", null, CommonService.capitalizeFirstLetter(option.label))),
+                React.createElement("span", null, option.label))) : seatIcon ? (React.createElement("div", { className: "flex items-center gap-[10px]" },
+                React.createElement("img", { src: seatIcon, alt: "seattype", className: "w-[16px] h-[16px]" }),
+                React.createElement("span", null, label))) : (React.createElement("span", null, label)),
             React.createElement(CheckboxIcon, { checked: option.selected, color: primaryColor, spriteSrc: icons === null || icons === void 0 ? void 0 : icons.checkBoxIcon })));
     })));
 };

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

@@ -77,6 +77,11 @@ export interface FilterSortBarIcons {
     timeOfDayIcons?: Partial<Record<TimeOfDayVariant, string>>;
     /** Icons for sort chips whose key doesn't already map to a category/time-of-day icon (e.g. "duration" for a Rápido chip). Keyed by SortOption.key. */
     sortIcons?: Partial<Record<string, string>>;
+    /** Seat-type icons shown next to "Tipo de asiento" options whose label contains 120/140/160/180, only when isShowSeatDegree is true. */
+    seat120?: string;
+    seat140?: string;
+    seat160?: string;
+    seat180?: string;
 }
 export interface FilterSortBarMobileProps {
     categories: FilterCategory[];
@@ -88,4 +93,6 @@ export interface FilterSortBarMobileProps {
     currencySign?: string;
     colors?: FilterSortBarColors;
     icons?: FilterSortBarIcons;
+    /** In the Filtros sheet's seat-type tab, adds "°" to 120/140/160/180 labels and shows icons.seat120/140/160/180 next to them. */
+    isShowSeatDegree?: boolean;
 }

package/dist/ui/SeatSection/PeruSeatSection.js

@@ -86,7 +86,7 @@ function getSeatLabelIcon(label, serviceItem) {
 function addSeatDegree(label) {
     if (!label)
         return label;
-    return String(label).replace(/\b(140|160|180)\b(?!°)/g, "$1°");
+    return String(label).replace(/\b(120|140|160|180)\b(?!°)/g, "$1°");
 }
 function PeruSeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, serviceItem, renderIcon, discountSeatPriceColor, isSeatIcon, isShowSeatIcon, }) {
     var _a;

package/dist/ui/SeatSection/SeatSection.js

@@ -94,7 +94,7 @@ function getSeatLabelIcon(label, serviceItem) {
 function addSeatDegree(label) {
     if (!label)
         return label;
-    return String(label).replace(/\b(140|160|180)\b(?!°)/g, "$1°");
+    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 }) {
     var _a;

package/dist/ui/mobileweb/SeatSectionMobile.js

@@ -42,7 +42,7 @@ function getSeatLabelIcon(label, serviceItem) {
 function addSeatDegree(label) {
     if (!label)
         return label;
-    return String(label).replace(/\b(140|160|180)\b(?!°)/g, "$1°");
+    return String(label).replace(/\b(120|140|160|180)\b(?!°)/g, "$1°");
 }
 function hasInclinationSeatTypes(seatTypes) {
     return (seatTypes !== null && seatTypes !== void 0 ? seatTypes : []).some((seat) => { var _a; return String((_a = seat === null || seat === void 0 ? void 0 : seat.label) !== null && _a !== void 0 ? _a : "").includes("°"); });

package/dist/utils/CommonService.d.ts

@@ -14,6 +14,8 @@ declare const commonService: {
     capitalizeFirstLetter: (str: any) => string;
     formatTimeLabel: (label: string) => string;
     formatDefaultLabel: (label: string) => string;
+    addSeatDegree: (label: string) => string;
+    getSeatDegreeIcon: (label: string, icons: any) => string | null;
     calculateDiscountedPrice: (originalPrice: number | string, serviceItem?: {
         discount_type?: string;
         discount_value?: number;

package/dist/utils/CommonService.js

@@ -323,6 +323,15 @@ const commonService = {
             return "";
         return label.toLowerCase();
     },
+    addSeatDegree: (label) => {
+        if (!label)
+            return label;
+        return String(label).replace(/\b(120|140|160|180)\b(?!°)/g, "$1°");
+    },
+    getSeatDegreeIcon: (label, icons) => {
+        const match = String(label !== null && label !== void 0 ? label : "").match(/\b(120|140|160|180)\b/);
+        return match ? (icons === null || icons === void 0 ? void 0 : icons[`seat${match[1]}`]) || null : null;
+    },
     calculateDiscountedPrice: (originalPrice, serviceItem) => {
         var _a;
         const price = typeof originalPrice === "string"

package/package.json

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

package/src/components/FilterBar/FilterBarDesktop.tsx

@@ -25,6 +25,7 @@ const FilterBarDesktop = ({
   isTrain,
   isPeru,
   hideOperator,
+  isShowSeatDegree,
   setCoachLoading,
   setCoachKey,
   isAllinBus,
@@ -329,6 +330,7 @@ const FilterBarDesktop = ({
       translation={translation}
       isTrain={isTrain}
       hideOperator={hideOperator}
+      isShowSeatDegree={isShowSeatDegree}
       t={t}
     />
   );

package/src/components/FilterBar/ServiceFilter.tsx

@@ -302,6 +302,11 @@ class ServiceFilter extends React.Component<
                     : val.label;
               }
 
+              const seatDegreeIcon =
+                option.type === "seat_types" && this.props.isShowSeatDegree
+                  ? commonService.getSeatDegreeIcon(label, this.props.icons)
+                  : null;
+
               return (
                 <div
                   key={i}
@@ -337,6 +342,13 @@ class ServiceFilter extends React.Component<
                       className="w-[20px] h-[20px] mr-[10px] "
                     />
                   )}
+                  {seatDegreeIcon && (
+                    <img
+                      src={seatDegreeIcon}
+                      alt="seattype"
+                      className="w-[20px] h-[20px] mr-[10px]"
+                    />
+                  )}
                   <span
                     style={{
                       textTransform:
@@ -345,7 +357,12 @@ class ServiceFilter extends React.Component<
                   >
                     {option.type === "time"
                       ? commonService.formatTimeLabel(label)
-                      : commonService.formatDefaultLabel(label)}
+                      : option.type === "seat_types" &&
+                          this.props.isShowSeatDegree
+                        ? commonService.addSeatDegree(
+                            commonService.formatDefaultLabel(label),
+                          )
+                        : commonService.formatDefaultLabel(label)}
                   </span>
                 </div>
               );

package/src/components/FilterBar/ServiceFilterProps.ts

@@ -9,5 +9,6 @@ export interface ServiceFilterProps {
     translation: any;
     isTrain?: boolean;
     hideOperator?: boolean;
+    isShowSeatDegree?: boolean;
     t?: (key: string) => string;
 }

package/src/components/FilterBar/tyoes.ts

@@ -14,6 +14,7 @@ export interface FilterBarProps {
     busTerminals?: any;
     setTypes?: any;
     hideOperator?: boolean;
+    isShowSeatDegree?: boolean;
     colors: {
         selectedColor?: string;
         selectedTextColor?: string;
@@ -28,6 +29,11 @@ export interface FilterBarProps {
         iconSunsetOrange?: string;
         iconNight?: string;
         iconNightOrange?: string;
+        seat120?: string;
+        seat140?: string;
+        seat160?: string;
+        seat180?: string;
+        fallBackSeatIcon?: string;
       };
       translation?: { [key: string]: string };
       isTrain?: boolean;

package/src/components/FilterSortBar/FilterSortBarMobile.tsx

@@ -59,6 +59,7 @@ const FilterSortBarMobile = ({
   currencySign = "$",
   colors,
   icons,
+  isShowSeatDegree = false,
 }: FilterSortBarMobileProps) => {
   const [openSheet, setOpenSheet] = useState<FilterCategoryKey | "all" | null>(null);
   const [isScrolled, setIsScrolled] = useState(false);
@@ -284,6 +285,7 @@ const FilterSortBarMobile = ({
         currencySign={currencySign}
         colors={resolvedColors}
         icons={resolvedIcons}
+        isShowSeatDegree={isShowSeatDegree}
       />
     </div>
   );

package/src/components/FilterSortBar/FiltersMasterSheet.tsx

@@ -19,6 +19,7 @@ interface FiltersMasterSheetProps {
   currencySign: string;
   colors: Required<FilterSortBarColors>;
   icons?: FilterSortBarIcons;
+  isShowSeatDegree?: boolean;
 }
 
 const FiltersMasterSheet = ({
@@ -33,6 +34,7 @@ const FiltersMasterSheet = ({
   currencySign,
   colors,
   icons,
+  isShowSeatDegree,
 }: FiltersMasterSheetProps) => {
   const [activeKey, setActiveKey] = useState<FilterCategoryKey>(initialCategoryKey ?? categories[0]?.key ?? "time");
 
@@ -108,6 +110,7 @@ const FiltersMasterSheet = ({
                 primaryColor={colors.primaryColor}
                 starColor={colors.buttonColor || colors.primaryColor}
                 icons={icons}
+                showSeatDegree={!!isShowSeatDegree && activeCategory?.key === "seatType"}
               />
             )}
           </div>

package/src/components/FilterSortBar/OptionCheckboxList.tsx

@@ -11,6 +11,8 @@ interface OptionCheckboxListProps {
   /** Filled-star color for rating options — the app's button/CTA color, not the chip accent. */
   starColor: string;
   icons?: FilterSortBarIcons;
+  /** For options whose label contains 120/140/160/180: add "°" and show icons.seat120/140/160/180. */
+  showSeatDegree?: boolean;
 }
 
 const RatingLabel = ({
@@ -39,7 +41,15 @@ const RatingLabel = ({
   </div>
 );
 
-const OptionCheckboxList = ({ options, kind, onToggle, primaryColor, starColor, icons }: OptionCheckboxListProps) => {
+const OptionCheckboxList = ({
+  options,
+  kind,
+  onToggle,
+  primaryColor,
+  starColor,
+  icons,
+  showSeatDegree,
+}: OptionCheckboxListProps) => {
   if (!options?.length) {
     return (
       <div className="py-[24px] text-center text-[#9B9B9B] text-[13px]">
@@ -50,25 +60,37 @@ const OptionCheckboxList = ({ options, kind, onToggle, primaryColor, starColor,
 
   return (
     <div>
-      {options.map((option) => (
-        <div
-          key={option.id}
-          onClick={() => onToggle(option.id)}
-          className="flex items-center justify-between py-[12px] px-[2px] cursor-pointer text-[13px] text-[#464647] select-none [-webkit-tap-highlight-color:transparent]"
-        >
-          {kind === "rating" ? (
-            <RatingLabel stars={option.stars} label={option.label} starColor={starColor} icons={icons} />
-          ) : option.icon ? (
-            <div className="flex items-center gap-[10px]">
-              <TimeOfDayIcon variant={option.icon} size={16} src={icons?.timeOfDayIcons?.[option.icon]} />
-              <span>{option.label}</span>
-            </div>
-          ) : (
-            <span>{CommonService.capitalizeFirstLetter(option.label)}</span>
-          )}
-          <CheckboxIcon checked={option.selected} color={primaryColor} spriteSrc={icons?.checkBoxIcon} />
-        </div>
-      ))}
+      {options.map((option) => {
+        const seatIcon = showSeatDegree ? CommonService.getSeatDegreeIcon(option.label, icons) : null;
+        const label = CommonService.capitalizeFirstLetter(
+          showSeatDegree ? CommonService.addSeatDegree(option.label) : option.label,
+        );
+
+        return (
+          <div
+            key={option.id}
+            onClick={() => onToggle(option.id)}
+            className="flex items-center justify-between py-[12px] px-[2px] cursor-pointer text-[13px] text-[#464647] select-none [-webkit-tap-highlight-color:transparent]"
+          >
+            {kind === "rating" ? (
+              <RatingLabel stars={option.stars} label={option.label} starColor={starColor} icons={icons} />
+            ) : option.icon ? (
+              <div className="flex items-center gap-[10px]">
+                <TimeOfDayIcon variant={option.icon} size={16} src={icons?.timeOfDayIcons?.[option.icon]} />
+                <span>{option.label}</span>
+              </div>
+            ) : seatIcon ? (
+              <div className="flex items-center gap-[10px]">
+                <img src={seatIcon} alt="seattype" className="w-[16px] h-[16px]" />
+                <span>{label}</span>
+              </div>
+            ) : (
+              <span>{label}</span>
+            )}
+            <CheckboxIcon checked={option.selected} color={primaryColor} spriteSrc={icons?.checkBoxIcon} />
+          </div>
+        );
+      })}
     </div>
   );
 };

package/src/components/FilterSortBar/types.ts

@@ -100,6 +100,11 @@ export interface FilterSortBarIcons {
   timeOfDayIcons?: Partial<Record<TimeOfDayVariant, string>>;
   /** Icons for sort chips whose key doesn't already map to a category/time-of-day icon (e.g. "duration" for a Rápido chip). Keyed by SortOption.key. */
   sortIcons?: Partial<Record<string, string>>;
+  /** Seat-type icons shown next to "Tipo de asiento" options whose label contains 120/140/160/180, only when isShowSeatDegree is true. */
+  seat120?: string;
+  seat140?: string;
+  seat160?: string;
+  seat180?: string;
 }
 
 export interface FilterSortBarMobileProps {
@@ -112,4 +117,6 @@ export interface FilterSortBarMobileProps {
   currencySign?: string;
   colors?: FilterSortBarColors;
   icons?: FilterSortBarIcons;
+  /** In the Filtros sheet's seat-type tab, adds "°" to 120/140/160/180 labels and shows icons.seat120/140/160/180 next to them. */
+  isShowSeatDegree?: boolean;
 }

package/src/ui/SeatSection/PeruSeatSection.tsx

@@ -120,7 +120,7 @@ function getSeatLabelIcon(label: string, serviceItem: any) {
 
 function addSeatDegree(label: string) {
   if (!label) return label;
-  return String(label).replace(/\b(140|160|180)\b(?!°)/g, "$1°");
+  return String(label).replace(/\b(120|140|160|180)\b(?!°)/g, "$1°");
 }
 
 function PeruSeatSection({

package/src/ui/SeatSection/SeatSection.tsx

@@ -140,7 +140,7 @@ function getSeatLabelIcon(label: string, serviceItem: any) {
 
 function addSeatDegree(label: string) {
   if (!label) return label;
-  return String(label).replace(/\b(140|160|180)\b(?!°)/g, "$1°");
+  return String(label).replace(/\b(120|140|160|180)\b(?!°)/g, "$1°");
 }
 
 function SeatSection({

package/src/ui/mobileweb/SeatSectionMobile.tsx

@@ -106,7 +106,7 @@ function getSeatLabelIcon(label: string, serviceItem: any) {
 
 function addSeatDegree(label: string | null) {
   if (!label) return label;
-  return String(label).replace(/\b(140|160|180)\b(?!°)/g, "$1°");
+  return String(label).replace(/\b(120|140|160|180)\b(?!°)/g, "$1°");
 }
 
 function hasInclinationSeatTypes(seatTypes: SeatType[]): boolean {

package/src/utils/CommonService.ts

@@ -339,6 +339,16 @@ const commonService = {
     return label.toLowerCase();
   },
 
+  addSeatDegree: (label: string) => {
+    if (!label) return label;
+    return String(label).replace(/\b(120|140|160|180)\b(?!°)/g, "$1°");
+  },
+
+  getSeatDegreeIcon: (label: string, icons: any): string | null => {
+    const match = String(label ?? "").match(/\b(120|140|160|180)\b/);
+    return match ? icons?.[`seat${match[1]}`] || null : null;
+  },
+
   calculateDiscountedPrice: (
     originalPrice: number | string,
     serviceItem?: {