kupos-ui-components-lib 9.11.4 → 9.11.6

package/dist/ui/mobileweb/SeatSectionMobile.js

@@ -11,7 +11,7 @@ const EXCEPTIONS = [
     "blanco",
     "asiento_mascota",
 ];
-const SeatRow = ({ type, index, displayLabel, fare, isSoldOut, seatPriceColor, hasMultipleTypes, textSize, isTrain, }) => {
+const SeatRow = ({ type, index, displayLabel, fare, isSoldOut, seatPriceColor, hasMultipleTypes, textSize, }) => {
     if (EXCEPTIONS.includes(type.label))
         return null;
     const rowClass = hasMultipleTypes
@@ -20,9 +20,7 @@ const SeatRow = ({ type, index, displayLabel, fare, isSoldOut, seatPriceColor, h
     const labelColor = isSoldOut ? "#bbb" : "#464647";
     const priceColor = isSoldOut ? "#bbb" : seatPriceColor;
     return (React.createElement("div", { className: rowClass, key: index },
-        React.createElement("span", { className: `min-[420]:text-[13px] ${textSize} `, style: { color: labelColor } }, isTrain
-            ? commonService.truncateSeatLabel(commonService.capitalize(displayLabel), 8)
-            : displayLabel),
+        React.createElement("span", { className: `min-[420]:text-[13px] ${textSize} `, style: { color: labelColor } }, displayLabel),
         React.createElement("span", { className: `min-[420]:text-[13px] ${textSize}  bold-text`, style: { color: priceColor } }, fare)));
 };
 const getFilteredSeats = (item) => {
@@ -44,8 +42,8 @@ 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, }) {
-    var _a, _b, _c, _d, _e, _f, _g;
+function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const hasMultipleTypes = ((_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.length) !== null && _a !== void 0 ? _a : 0) > 2;
     const getFare = (fare) => {
         if (removeDuplicateSeats && availableSeats <= 0 && !isPeru) {
@@ -66,7 +64,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
         if (lowestFare === null)
             return null;
         const priceColor = isSoldOut ? "#bbb" : seatPriceColor;
-        const isMovilBus = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus";
+        const isMovilBus = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus" || "Movil Bus";
         // Fetch ALL unique seats (no slice limit) for the multi-row MovilBus case
         const uniqueSeats = getUniqueSeats(seatTypesData !== null && seatTypesData !== void 0 ? seatTypesData : [], Infinity);
         // MovilBus + multiple unique seat types → render a row per seat
@@ -74,7 +72,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
             return (React.createElement(React.Fragment, null, uniqueSeats.map((seat, key) => {
                 const { discountedPrice } = commonService.calculateDiscountedPrice(Number(seat.fare), serviceItem);
                 return (React.createElement("div", { key: key, className: "w-[100%] flex flex-row justify-between items-center" },
-                    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", style: { color: isSoldOut ? "#bbb" : "#464647" } }, commonService.truncateSeatLabel(seat.label)),
                     React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: priceColor } }, commonService.currency(discountedPrice, currencySign))));
             })));
         }
@@ -119,24 +117,19 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
                 React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] text-[#464647]", style: { opacity: isSoldOut ? 0.5 : 1 } }, "Agotado"))) : null));
     };
     const renderSeats = () => {
-        var _a, _b;
+        var _a, _b, _c;
         if (isPeru) {
             return renderPeruSeats();
         }
         if (removeDuplicateSeats) {
             const uniqueSeats = getUniqueSeats(seatTypesData, 3);
-            return uniqueSeats.map((type, i) => (React.createElement(SeatRow, { key: i, type: type, index: i, displayLabel: commonService.truncateSeatLabel(type.label), fare: getFare(type.fare), isSoldOut: isSoldOut, seatPriceColor: seatPriceColor, hasMultipleTypes: hasMultipleTypes, textSize: "text-[11px]", isTrain: isTrain })));
+            return uniqueSeats.map((type, i) => (React.createElement(SeatRow, { key: i, type: type, index: i, displayLabel: commonService.truncateSeatLabel(type.label), fare: getFare(type.fare), isSoldOut: isSoldOut, seatPriceColor: seatPriceColor, hasMultipleTypes: hasMultipleTypes, textSize: "text-[11px]" })));
         }
-        const filteredSeats = (_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label))) === null || _a === void 0 ? void 0 : _a.sort((a, b) => a.fare - b.fare);
-        return (_b = (isTrain ? filteredSeats : filteredSeats === null || filteredSeats === void 0 ? void 0 : filteredSeats.slice(0, 2))) === null || _b === void 0 ? void 0 : _b.map((type, i) => (React.createElement(SeatRow, { key: i, type: type, index: i, displayLabel: type.label, fare: getFare(type.fare), isSoldOut: isSoldOut, seatPriceColor: seatPriceColor, hasMultipleTypes: hasMultipleTypes, textSize: "text-[12px]", isTrain: isTrain })));
+        return (_c = (_b = (_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label))) === null || _a === void 0 ? void 0 : _a.sort((a, b) => a.fare - b.fare)) === null || _b === void 0 ? void 0 : _b.slice(0, 2)) === null || _c === void 0 ? void 0 : _c.map((type, i) => (React.createElement(SeatRow, { key: i, type: type, index: i, displayLabel: type.label, fare: getFare(type.fare), isSoldOut: isSoldOut, seatPriceColor: seatPriceColor, hasMultipleTypes: hasMultipleTypes, textSize: "text-[12px]" })));
     };
     const seats = removeDuplicateSeats
         ? getUniqueSeats(seatTypesData, 3)
-        : (() => {
-            var _a;
-            const filtered = (_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label))) === null || _a === void 0 ? void 0 : _a.sort((a, b) => a.fare - b.fare);
-            return isTrain ? filtered : filtered === null || filtered === void 0 ? void 0 : filtered.slice(0, 2);
-        })();
+        : (_c = (_b = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label))) === null || _b === void 0 ? void 0 : _b.sort((a, b) => a.fare - b.fare)) === null || _c === void 0 ? void 0 : _c.slice(0, 2);
     const discountedSeats = seats === null || seats === void 0 ? void 0 : seats.map((seat) => (Object.assign(Object.assign({}, seat), commonService.calculateDiscountedPrice(seat.fare, serviceItem))));
     const peruLowestFare = isPeru ? getLowestFare() : null;
     const peruDiscountCalc = isPeru && peruLowestFare != null
@@ -147,7 +140,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
             peruDiscountCalc.originalPrice !== peruDiscountCalc.discountedPrice
         : discountedSeats === null || discountedSeats === void 0 ? void 0 : discountedSeats.some((s) => s.originalPrice !== s.discountedPrice);
     const discountSeat = isPeru && peruDiscountCalc
-        ? Object.assign({ label: "", fare: peruLowestFare }, peruDiscountCalc) : (_b = discountedSeats === null || discountedSeats === void 0 ? void 0 : discountedSeats.filter((seat) => !EXCEPTIONS.includes(seat.label))) === null || _b === void 0 ? void 0 : _b.sort((a, b) => a.discountedPrice - b.discountedPrice)[0];
+        ? Object.assign({ label: "", fare: peruLowestFare }, peruDiscountCalc) : (_d = discountedSeats === null || discountedSeats === void 0 ? void 0 : discountedSeats.filter((seat) => !EXCEPTIONS.includes(seat.label))) === null || _d === void 0 ? void 0 : _d.sort((a, b) => a.discountedPrice - b.discountedPrice)[0];
     const discountValue = (() => {
         if ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_type) === "percentage" &&
             typeof (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) === "number") {
@@ -183,14 +176,14 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
     };
     const originalDpPrice = getMinValue(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.original_dp_price);
     const dpDiscountPercent = getMinValue(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents);
-    const firstSeatFare = (_d = (_c = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label) && !EXCEPTIONS.includes(item.label))) === null || _c === void 0 ? void 0 : _c.sort((a, b) => a.fare - b.fare)[0]) === null || _d === void 0 ? void 0 : _d.fare;
+    const firstSeatFare = (_f = (_e = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label) && !EXCEPTIONS.includes(item.label))) === null || _e === void 0 ? void 0 : _e.sort((a, b) => a.fare - b.fare)[0]) === null || _f === void 0 ? void 0 : _f.fare;
     const hasDpDiscount = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) &&
         (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) &&
         originalDpPrice != null &&
         dpDiscountPercent != null &&
         firstSeatFare != null;
     return (React.createElement("div", { className: "content-center relative", style: { width: "40%" } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
-        !((_e = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) === null || _e === void 0 ? void 0 : _e.length) &&
+        !((_g = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) === null || _g === void 0 ? void 0 : _g.length) &&
         !dpDiscountPercent ? (React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem]", style: { gap: isSoldOut ? "0px" : "5px" } }, renderDpSeats())) : hasDpDiscount ? (React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] " },
         !isNaN(Number(dpDiscountPercent)) &&
             Number(dpDiscountPercent) > 0 && (React.createElement("div", { className: "absolute -top-[18px] right-[0px]", style: {
@@ -222,7 +215,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
         React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: {
                 color: isSoldOut ? "#bbb" : discountSeatPriceColor || "#ff5964",
             } },
-            ((_f = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _f === void 0 ? void 0 : _f.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { filter: isSoldOut ? "grayscale" : "" } })) : null,
+            ((_h = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _h === void 0 ? void 0 : _h.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { filter: isSoldOut ? "grayscale" : "" } })) : null,
             commonService.discountedCurrency(Number(firstSeatFare), currencySign)),
         isSoldOut ? (React.createElement("span", { className: "col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]" }, "Agotado")) : null)) : hasDiscount && discountSeat ? (React.createElement("div", null,
         React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] " },
@@ -256,8 +249,8 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
             React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: {
                     color: isSoldOut ? "#bbb" : discountSeatPriceColor || "#ff5964",
                 } },
-                ((_g = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _g === void 0 ? void 0 : _g.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { opacity: isSoldOut ? 0.5 : 1 } })) : null,
-                commonService.discountedCurrency(discountSeat.discountedPrice, currencySign))))) : (React.createElement("div", { className: `flex flex-col justify-between ${isTrain ? "" : "h-[2.5rem]"} `, style: {
+                ((_j = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _j === void 0 ? void 0 : _j.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { opacity: isSoldOut ? 0.5 : 1 } })) : null,
+                commonService.discountedCurrency(discountSeat.discountedPrice, currencySign))))) : (React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem] ", style: {
             gap: isSoldOut ? "0px" : "5px",
             justifyContent: hasMultipleTypes ? "space-between" : "center",
         } },

package/dist/utils/CommonService.d.ts

@@ -3,7 +3,7 @@ declare const commonService: {
     discountedCurrency(amount: number, currencySign?: string): string;
     copyObject: (ob: any) => any;
     getServiceTypeLabelForFilters: (service_type: any) => "Tipo de servicio" | "Punto de embarque" | "Tipo de asiento" | "SERVICIOS" | "";
-    truncateSeatLabel: (label: string | number, maxLength?: number) => string;
+    truncateSeatLabel: (label: string | number) => string;
     getAmenitiesImage: (name: string, serviceItem: any) => string;
     getAmenityName: (rawAmenity: string) => string;
     getSeatNameForFilters: (rawSeat: any) => any;

package/dist/utils/CommonService.js

@@ -34,15 +34,11 @@ const commonService = {
                 return "";
         }
     },
-    truncateSeatLabel: (label, maxLength) => {
+    truncateSeatLabel: (label) => {
         if (typeof label !== "string")
             return String(label);
         if (label.includes("("))
             return label;
-        // If maxLength provided, hard-truncate regardless of word count
-        if (maxLength != null && label.length > maxLength) {
-            return label.slice(0, maxLength) + "...";
-        }
         const words = label.trim().split(/\s+/);
         const truncateWord = (word) => word.length > 5 ? word.slice(0, 3) + "..." : word;
         if (words.length === 1)
@@ -364,7 +360,7 @@ const commonService = {
         let remaining = Math.max(0, Math.floor(countdownSeconds));
         const formatTime = (totalSeconds) => {
             if (totalSeconds <= 0)
-                return "Expirado";
+                return "00:00";
             const h = Math.floor(totalSeconds / 3600);
             const m = Math.floor((totalSeconds % 3600) / 60);
             const s = totalSeconds % 60;

package/package.json

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

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -131,13 +131,6 @@ function ServiceItemPB({
   showLoginModal,
   isLoggedIn,
   showLoginOption,
-  isTrain,
-  selectedSeatKey,
-  onSeatSelect,
-  onTrainButtonClick,
-  showSeatSelectionError,
-  onShowSeatSelectionError,
-  onClearSeatSelectionError,
   isFeatureDropDownExpand,
   setIsFeatureDropDownExpand,
   ticketQuantity,
@@ -152,15 +145,6 @@ function ServiceItemPB({
   isFlores,
   operatorLabel,
 }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
-  const handleSeatSelect = (
-    key: any,
-    price: number,
-    seatKey: string,
-    apiSeatType?: string,
-  ) => {
-    onClearSeatSelectionError?.();
-    onSeatSelect?.(key, price, seatKey, apiSeatType);
-  };
   const getAnimationIcon = (icon: string) => {
     const animation = ANIMATION_MAP[icon];
     if (!animation) return null;
@@ -382,17 +366,6 @@ function ServiceItemPB({
       return;
     }
 
-    if (isTrain) {
-      if (!selectedSeatKey) {
-        onShowSeatSelectionError?.(serviceItem.id);
-        return;
-      }
-      if (onTrainButtonClick) {
-        onTrainButtonClick();
-        return;
-      }
-    }
-
     onBookButtonPress();
   };
 
@@ -585,9 +558,7 @@ function ServiceItemPB({
                     : "",
               }}
             >
-              <div
-                className={`grid text-[#464647] w-full ${isTrain ? "[grid-template-columns:16%_30%_2.5%_28%_15.5%]" : "[grid-template-columns:20%_30%_2.5%_24%_15.5%]"} gap-x-[2%] items-center`}
-              >
+              <div className="grid text-[#464647] w-full [grid-template-columns:20%_30%_2.5%_24%_15.5%] gap-x-[2%] items-center">
                 {/* OPERATOR LOGO */}
                 <div className="flex flex-col gap-[5px]">
                   <div>
@@ -649,10 +620,6 @@ function ServiceItemPB({
                     isPeru={isPeru}
                     renderIcon={renderIcon}
                     discountSeatPriceColor={colors.discountSeatPriceColor}
-                    isTrain={isTrain}
-                    selectedSeatKey={selectedSeatKey}
-                    onSeatSelect={handleSeatSelect}
-                    topLabelColor={colors.topLabelColor}
                     tooltipColor={colors.tooltipColor}
                   />
                 </div>
@@ -669,18 +636,6 @@ function ServiceItemPB({
                     soldOutIcon={renderIcon("soldOutIcon", "14px")}
                     onClick={checkMidnight}
                   />
-                  {showSeatSelectionError === serviceItem.id && isTrain && (
-                    <div className="flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]">
-                      <div
-                        className="text-[9px] text-center whitespace-nowrap"
-                        style={{
-                          color: colors.seatPriceColor,
-                        }}
-                      >
-                        Selecciona el tipo de servicio
-                      </div>
-                    </div>
-                  )}
                   {showLastSeats ? (
                     <div className="flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]">
                       {serviceItem?.available_seats < 10 &&
@@ -713,7 +668,6 @@ function ServiceItemPB({
                   setIsExpand(isItemExpanded ? null : serviceItem.id)
                 }
                 isPeru={isPeru}
-                isTrain={isTrain}
               />
             </div>
           </div>
@@ -741,10 +695,10 @@ function ServiceItemPB({
                     ? {
                         borderLeft: isSoldOut
                           ? ""
-                          : `3px solid ${colors.leftGradiantColor || "#ff8842"}`,
+                          : `3px solid ${colors.rightGradiantColor || "#ff8842"}`,
                         borderRight: isSoldOut
                           ? ""
-                          : `3px solid ${colors.rightGradiantColor || "#ff8842"}`,
+                          : `3px solid ${colors.leftGradiantColor || "#ff8842"}`,
                         borderRadius: "0 0 18px 18px",
                         boxSizing: "border-box",
                       }

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -46,8 +46,6 @@ function ServiceItemMobile({
   removeDuplicateSeats,
   isLinatal,
   viewersConfig,
-  operatorLabel,
-  isTrain,
   isFeatureDropDownExpand,
   setIsFeatureDropDownExpand,
   ticketQuantity,
@@ -63,6 +61,7 @@ function ServiceItemMobile({
   onTimeDropdownToggle,
   wowDealData,
   isFlores,
+  operatorLabel
 }: MobileServiceItemProps): React.ReactElement {
   const isItemExpanded = serviceItem.id === isExpanded;
   const isPetSeat = (Object.keys(serviceItem?.pet_seat_info) || []).length > 0;

package/src/components/ServiceItem/mobileTypes.ts

@@ -135,36 +135,36 @@ export interface MobileServiceItemProps {
       bombAnim?: string;
       whiteBoardingIcon?: string;
       downArrow?: string;
-      personIcon?: string;
+      personIcon?: string
       specialDeparture?: string;
       fireIcon?: string;
       directoIcon?: string;
-      whiteFireIcon?: string;
-      femaleAnim?: string;
-      thunderAnim?: string;
-      personsAnim?: string;
-      whiteOrigin?: string;
-      whiteDestination?: string;
-      userIcon?: string;
-
-      sheildIcon?: string;
-      busIcon?: string;
-      whiteDownArrow?: string;
-      empressaIcon?: string;
-      flexibleIcon?: string;
-      listoIcon?: string;
-      precioIcon?: string;
-      confirmarIcon?: string;
+      whiteFireIcon?: string
+      femaleAnim?:string
+       thunderAnim?: string
+       personsAnim?: string
+        whiteOrigin?: string,
+      whiteDestination?: string,
+      userIcon?: string,
+      
+      sheildIcon?: string,
+      busIcon?: string,
+      whiteDownArrow?: string,
+      empressaIcon?: string,
+      flexibleIcon?: string,
+      listoIcon?: string,
+      precioIcon?: string,
+      confirmarIcon?: string
       cancelTicketIcon?: string;
       changeTicketIcon?: string;
       petFriendlyIcon?: string;
-      womenSeatIcon?: string;
+      womenSeatIcon?: string
       [key: string]: string | Record<string, string | undefined> | undefined;
     };
     useLottieFor?: string[];
   };
   onBookButtonPress?: () => void;
-  onRemateUiButtonClick?: () => void;
+  onRemateUiButtonClick?: ()=> void;
   terminals?: any[];
   showDropdown?: boolean;
   setShowDropdown?: (value: boolean) => void;
@@ -208,7 +208,7 @@ export interface MobileServiceItemProps {
     seatPriceColor?: string;
     rightGradiantColor?: string;
     leftGradiantColor?: string;
-    discountSeatPriceColor?: string;
+    discountSeatPriceColor?: string
   };
   isCiva?: boolean;
   currencySign?: string;
@@ -221,28 +221,23 @@ export interface MobileServiceItemProps {
   showLastSeats?: boolean;
   removeDuplicateSeats?: boolean;
   isLinatal?: boolean;
-  viewersConfig?: {
+    viewersConfig?: {
     min: number;
     max: number;
     interval?: number; // ms, default 5000
     label?: string; // e.g. "personas están viendo este viaje"
     icon?: string; // optional icon URL
   };
-  isTrain?: boolean;
-  isFeatureDropDownExpand?: any;
+   isFeatureDropDownExpand?: any;
   setIsFeatureDropDownExpand?: (value: any) => void;
   ticketQuantity?: number;
-  onIncreaseTicketQuantity?: (
-    serviceItem: MobileServiceItemProps["serviceItem"],
-  ) => void;
-  onDecreaseTicketQuantity?: (
-    serviceItem: MobileServiceItemProps["serviceItem"],
-  ) => void;
+  onIncreaseTicketQuantity?: (serviceItem: MobileServiceItemProps["serviceItem"]) => void;
+  onDecreaseTicketQuantity?: (serviceItem: MobileServiceItemProps["serviceItem"]) => void;
   cityOrigin?: { value: number; label: string };
   cityDestination?: { value: number; label: string };
-  isNewUi?: boolean;
+    isNewUi?: boolean
 
-  selectedTimeSlot?: string;
+    selectedTimeSlot?: string;
   onTimeSlotChange?: (slot: string) => void;
   isTimeDropdownOpen?: string | number | null;
   onTimeDropdownToggle?: (id?: string | number | null) => void;

package/src/components/ServiceItem/types.ts

@@ -252,18 +252,6 @@ export interface ServiceItemProps {
   showLoginModal?: any;
   isLoggedIn?: any;
   showLoginOption?: boolean;
-  isTrain?: boolean;
-  selectedSeatKey?: any;
-  onSeatSelect?: (
-    key: any,
-    price: number,
-    seatKey: string,
-    apiSeatType?: string,
-  ) => void;
-  onTrainButtonClick?: any;
-  showSeatSelectionError?: string | null;
-  onShowSeatSelectionError?: (serviceId: string) => void;
-  onClearSeatSelectionError?: () => void;
   selectedTimeSlot?: string;
   onTimeSlotChange?: (slot: string) => void;
   isTimeDropdownOpen?: string | number | null;

package/src/ui/BottomAmenities/BottomAmenities.tsx

@@ -28,7 +28,6 @@ interface BottomAmenitiesProps {
   downArrowIcon?: React.ReactNode;
   onToggleExpand: () => void;
   isPeru?: boolean;
-  isTrain?: boolean;
 }
 
 function BottomAmenities({
@@ -43,7 +42,6 @@ function BottomAmenities({
   downArrowIcon,
   onToggleExpand,
   isPeru,
-  isTrain,
 }: BottomAmenitiesProps): React.ReactElement {
   const hasPetInfo =
     serviceItem.pet_seat_info &&
@@ -61,9 +59,7 @@ function BottomAmenities({
         className="grid items-center gap-[2%] flex-1 "
         style={{
           // gridTemplateColumns: " 28% 21% 23% 23%",
-          gridTemplateColumns: isTrain
-            ? "20.6% 17% 23% 23%"
-            : "25.3% 17% 23% 23%",
+          gridTemplateColumns: "25.3% 17% 23% 23%",
         }}
       >
         {otherItems.map((item) => (

package/src/ui/DateTimeSection/DateTimeSection.tsx

@@ -119,7 +119,7 @@ function DateTimeSection({
           metaData={metaData}
           colors={colors}
         >
-          <span className="cursor-pointer bold-text capitalize whitespace-nowrap">
+          <span className="cursor-pointer bold-text capitalize">
             {DateService.getServiceItemDate(serviceItem.travel_date)}
           </span>
         </StageTooltip>
@@ -134,7 +134,7 @@ function DateTimeSection({
             metaData={metaData}
             colors={colors}
           >
-            <span className="cursor-pointer bold-text capitalize whitespace-nowrap">
+            <span className="cursor-pointer bold-text capitalize">
               {DateService.getServiceItemDate(serviceItem.arrival_date)}
             </span>
           </StageTooltip>
@@ -169,7 +169,7 @@ function DateTimeSection({
           metaData={metaData}
           colors={colors}
         >
-          <div className="font-[900] bold-text whitespace-nowrap">
+          <div className="font-[900] bold-text">
             {isLinatal ? (
               <>
                 {cleanedDepTime} <span>{hasPM ? "PM" : hasAM ? "AM" : ""}</span>
@@ -193,7 +193,7 @@ function DateTimeSection({
             metaData={metaData}
             colors={colors}
           >
-            <div className="font-[900] bold-text whitespace-nowrap">
+            <div className="font-[900] bold-text">
               {removeArrivalTime
                 ? "\u00A0"
                 : serviceItem.arr_time

package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx

@@ -423,7 +423,7 @@ const FeatureServiceUi = ({
             </div>
 
             {/* MIDDLE: competing operators + viewers */}
-            <div className="min-w-0 px-[22px] flex flex-col items-center justify-between gap-[16px] py-[2px] border-r border-[#363c48] border-l border-[#363c48]">
+            <div className="min-w-0 overflow-x-auto px-[22px] flex flex-col items-center justify-between gap-[16px] py-[2px] border-r border-[#363c48] border-l border-[#363c48]">
               <div className="text-center">
                 <div className="bold-text text-[13px]">
                   {servicesInActiveSlot.length > 0
@@ -434,12 +434,12 @@ const FeatureServiceUi = ({
               </div>
 
               <div
-                className="grid w-full items-stretch gap-[14px]"
+                className="grid items-stretch gap-[14px]"
                 style={{
                   gridTemplateColumns: `repeat(${Math.min(
                     servicesInActiveSlot.length || operators.length,
                     3,
-                  )}, 1fr)`,
+                  )}, minmax(80px, 1fr))`,
                 }}
               >
                 {(servicesInActiveSlot.length > 0
@@ -470,11 +470,14 @@ const FeatureServiceUi = ({
                           serviceItem?.operator_details?.[0] ||
                           "/images/service-list/bus-icon.svg";
                       }}
-                      className={`h-[24px] max-w-full object-contain ${
+                      className={`h-[24px] max-w-full object-contain  ${
                         isSoldOut ? "grayscale" : ""
                       }`}
+                      // className={`h-[24px] max-w-full object-contain brightness-0 invert ${
+                      //   isSoldOut ? "grayscale" : ""
+                      // }`}
                     />
-                    <span className="text-[11px] truncate max-w-full text-center text-[white] whitespace-nowrap ">
+                    <span className="text-[11px] truncate w-full text-center text-[white] overflow-hidden">
                       {op.name}
                     </span>
                     <div className="bg-[#FF8F45] text-white text-[12px] font-bold px-[10px] py-[4px] rounded-[4px] bold-text whitespace-nowrap">