npm - kupos-ui-components-lib - Versions diffs - 10.4.59 → 10.4.61 - Mend

kupos-ui-components-lib 10.4.59 → 10.4.61

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/dist/components/FilterBar/ServiceFilter.js CHANGED Viewed

@@ -10,11 +10,6 @@ let SEAT_ORDER = [
     "Premium",
     "Premium (I)",
 ];
-function addSeatDegree(label) {
-    if (!label)
-        return label;
-    return String(label).replace(/\b(120|140|160|180)\b(?!°)/g, "$1°");
-}
 class ServiceFilter extends React.Component {
     constructor(props) {
         var _a, _b, _c, _d, _e, _f, _g;
@@ -230,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: {
@@ -245,13 +243,14 @@ 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)
                             : option.type === "seat_types" &&
                                 this.props.isShowSeatDegree
-                                ? addSeatDegree(commonService.formatDefaultLabel(label))
+                                ? commonService.addSeatDegree(commonService.formatDefaultLabel(label))
                                 : commonService.formatDefaultLabel(label))));
                 }))));
     }

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

@@ -28,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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/SeatSection.js CHANGED Viewed

@@ -349,11 +349,20 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
         }
     }
     if (hasDiscount && discountSeat) {
+        const discountSeatIcon = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 && isShowSeatIcon
+            ? getSeatLabelIcon(discountSeat.label, serviceItem)
+            : null;
         return (React.createElement("div", { className: "grid grid-cols-2 items-center text-[13.33px] relative", style: { opacity: isSoldOut ? 0.5 : 1 } },
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 ? null : (React.createElement("div", { className: "col-start-1 row-start-2 flex items-center" },
                 React.createElement("span", { className: "text-[13.33px] font-normal leading-[22px] text-[#ccc]" }, "Antes"))),
             React.createElement("div", { className: "col-start-1 row-start-3 flex h-[20px] items-end" },
-                React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#464647] whitespace-nowrap" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 ? discountSeat.label : "Desde")),
+                React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#464647] whitespace-nowrap flex items-center" },
+                    discountSeatIcon && (React.createElement("img", { src: discountSeatIcon, alt: "seattype", style: {
+                            width: "20px",
+                            height: "20px",
+                            marginRight: "5px",
+                        } })),
+                    (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 ? discountSeat.label : "Desde")),
             React.createElement("div", { className: "col-start-2 row-start-1 flex items-center justify-center absolute", style: { top: "-22px", left: "50%", transform: "translateX(-50%)" } },
                 (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 &&
                     !isPeru &&

package/dist/ui/mobileweb/SeatSectionMobile.js CHANGED Viewed

@@ -104,8 +104,19 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
                 React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] absolute", style: { color: "#6a6a6a", top: -20, right: 0 } }, "Desde"),
                 uniqueSeats.map((seat, key) => {
                     const { originalPrice, discountedPrice } = commonService.calculateDiscountedPrice(Number(seat.fare), serviceItem);
+                    // Picked from the full label, since truncation can cut off the angle
+                    const rowSeatIcon = isShowSeatIcon
+                        ? getSeatLabelIcon(seat.label, serviceItem)
+                        : null;
                     return (React.createElement("div", { key: key, className: "w-[100%] flex flex-row justify-between items-center", style: { marginTop: key > 0 ? "8px" : "0" } },
-                        React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text whitespace-nowrap", style: { color: isSoldOut ? "#bbb" : "#464647" } }, commonService.truncateSeatLabel(seat.label)),
+                        React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text whitespace-nowrap flex items-center", style: { color: isSoldOut ? "#bbb" : "#464647" } },
+                            rowSeatIcon && (React.createElement("img", { src: rowSeatIcon, alt: "seattype", style: {
+                                    width: "16px",
+                                    height: "16px",
+                                    marginRight: "4px",
+                                    filter: isSoldOut ? "grayscale(1)" : "",
+                                } })),
+                            commonService.truncateSeatLabel(seat.label)),
                         React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: priceColor } }, commonService.currency(showOriginalFare ? originalPrice : discountedPrice, currencySign))));
                 })));
         }

package/dist/utils/CommonService.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/src/components/FilterBar/ServiceFilter.tsx CHANGED Viewed

@@ -14,11 +14,6 @@ let SEAT_ORDER = [
   "Premium (I)",
 ];
-function addSeatDegree(label: string) {
-  if (!label) return label;
-  return String(label).replace(/\b(120|140|160|180)\b(?!°)/g, "$1°");
-}
 interface ServiceFilterBarDesktopState {
   showOperators: boolean;
   showTimeOptions: boolean;
@@ -307,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}
@@ -342,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:
@@ -352,7 +359,9 @@ class ServiceFilter extends React.Component<
                       ? commonService.formatTimeLabel(label)
                       : option.type === "seat_types" &&
                           this.props.isShowSeatDegree
-                        ? addSeatDegree(commonService.formatDefaultLabel(label))
+                        ? commonService.addSeatDegree(
+                            commonService.formatDefaultLabel(label),
+                          )
                         : commonService.formatDefaultLabel(label)}
                   </span>
                 </div>

package/src/components/FilterBar/tyoes.ts CHANGED Viewed

@@ -29,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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/SeatSection.tsx CHANGED Viewed

@@ -661,6 +661,11 @@ function SeatSection({
   }
   if (hasDiscount && discountSeat) {
+    const discountSeatIcon =
+      serviceItem?.ui_type === 1 && isShowSeatIcon
+        ? getSeatLabelIcon(discountSeat.label, serviceItem)
+        : null;
     return (
       <div
         className="grid grid-cols-2 items-center text-[13.33px] relative"
@@ -675,7 +680,18 @@ function SeatSection({
         )}
         <div className="col-start-1 row-start-3 flex h-[20px] items-end">
-          <span className="text-[13.33px] font-normal leading-[20px] text-[#464647] whitespace-nowrap">
+          <span className="text-[13.33px] font-normal leading-[20px] text-[#464647] whitespace-nowrap flex items-center">
+            {discountSeatIcon && (
+              <img
+                src={discountSeatIcon}
+                alt="seattype"
+                style={{
+                  width: "20px",
+                  height: "20px",
+                  marginRight: "5px",
+                }}
+              />
+            )}
             {serviceItem?.ui_type === 1 ? discountSeat.label : "Desde"}
           </span>
         </div>

package/src/ui/mobileweb/SeatSectionMobile.tsx CHANGED Viewed

@@ -218,6 +218,10 @@ function SeatSectionMobile({
                 Number(seat.fare),
                 serviceItem,
               );
+            // Picked from the full label, since truncation can cut off the angle
+            const rowSeatIcon = isShowSeatIcon
+              ? getSeatLabelIcon(seat.label, serviceItem)
+              : null;
             return (
               <div
                 key={key}
@@ -225,9 +229,21 @@ function SeatSectionMobile({
                 style={{ marginTop: key > 0 ? "8px" : "0" }}
               >
                 <span
-                  className="min-[420]:text-[13px] text-[12px] bold-text whitespace-nowrap"
+                  className="min-[420]:text-[13px] text-[12px] bold-text whitespace-nowrap flex items-center"
                   style={{ color: isSoldOut ? "#bbb" : "#464647" }}
                 >
+                  {rowSeatIcon && (
+                    <img
+                      src={rowSeatIcon}
+                      alt="seattype"
+                      style={{
+                        width: "16px",
+                        height: "16px",
+                        marginRight: "4px",
+                        filter: isSoldOut ? "grayscale(1)" : "",
+                      }}
+                    />
+                  )}
                   {commonService.truncateSeatLabel(seat.label)}
                 </span>
                 <span

package/src/utils/CommonService.ts CHANGED Viewed

@@ -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?: {