kupos-ui-components-lib 9.11.7 → 9.11.9

package/dist/utils/CommonService.js

@@ -34,11 +34,15 @@ const commonService = {
                 return "";
         }
     },
-    truncateSeatLabel: (label) => {
+    truncateSeatLabel: (label, maxLength) => {
         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)

package/package.json

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

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -131,6 +131,13 @@ function ServiceItemPB({
   showLoginModal,
   isLoggedIn,
   showLoginOption,
+  isTrain,
+  selectedSeatKey,
+  onSeatSelect,
+  onTrainButtonClick,
+  showSeatSelectionError,
+  onShowSeatSelectionError,
+  onClearSeatSelectionError,
   isFeatureDropDownExpand,
   setIsFeatureDropDownExpand,
   ticketQuantity,
@@ -145,6 +152,15 @@ 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;
@@ -366,6 +382,17 @@ function ServiceItemPB({
       return;
     }
 
+    if (isTrain) {
+      if (!selectedSeatKey) {
+        onShowSeatSelectionError?.(serviceItem.id);
+        return;
+      }
+      if (onTrainButtonClick) {
+        onTrainButtonClick();
+        return;
+      }
+    }
+
     onBookButtonPress();
   };
 
@@ -530,6 +557,7 @@ function ServiceItemPB({
               showLoginOption={showLoginOption}
               isNewUiEnabled={isNewUiEnabled}
               colors={colors}
+              isLinatal={isLinatal}
             />
           )}
           <div
@@ -558,7 +586,9 @@ function ServiceItemPB({
                     : "",
               }}
             >
-              <div className="grid text-[#464647] w-full [grid-template-columns:20%_30%_2.5%_24%_15.5%] gap-x-[2%] items-center">
+              <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`}
+              >
                 {/* OPERATOR LOGO */}
                 <div className="flex flex-col gap-[5px]">
                   <div>
@@ -620,6 +650,10 @@ function ServiceItemPB({
                     isPeru={isPeru}
                     renderIcon={renderIcon}
                     discountSeatPriceColor={colors.discountSeatPriceColor}
+                    isTrain={isTrain}
+                    selectedSeatKey={selectedSeatKey}
+                    onSeatSelect={handleSeatSelect}
+                    topLabelColor={colors.topLabelColor}
                     tooltipColor={colors.tooltipColor}
                   />
                 </div>
@@ -636,6 +670,18 @@ 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 &&
@@ -668,6 +714,7 @@ function ServiceItemPB({
                   setIsExpand(isItemExpanded ? null : serviceItem.id)
                 }
                 isPeru={isPeru}
+                isTrain={isTrain}
               />
             </div>
           </div>
@@ -681,7 +728,7 @@ function ServiceItemPB({
                 transition:
                   "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
                 position: "relative",
-                zIndex: hasOfferText || hasDpEnabled ? 0 : -1,
+                zIndex: hasDiscount || hasDpEnabled ? 0 : -1,
                 marginTop: isItemExpanded ? "" : "-10px",
               }}
             >
@@ -689,9 +736,8 @@ function ServiceItemPB({
                 style={{
                   overflow: "hidden",
                   minHeight: 0,
-                  marginTop:
-                    hasDpEnabled || serviceItem?.offer_text ? "" : "-10px",
-                  ...(hasOfferText || hasDpEnabled
+                  marginTop: hasDpEnabled || hasDiscount ? "" : "-10px",
+                  ...(hasDpEnabled || hasDiscount
                     ? {
                         borderLeft: isSoldOut
                           ? ""

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -46,6 +46,8 @@ function ServiceItemMobile({
   removeDuplicateSeats,
   isLinatal,
   viewersConfig,
+  operatorLabel,
+  isTrain,
   isFeatureDropDownExpand,
   setIsFeatureDropDownExpand,
   ticketQuantity,
@@ -61,7 +63,6 @@ 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,23 +221,28 @@ 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
   };
-   isFeatureDropDownExpand?: any;
+  isTrain?: boolean;
+  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,6 +252,18 @@ 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,6 +28,7 @@ interface BottomAmenitiesProps {
   downArrowIcon?: React.ReactNode;
   onToggleExpand: () => void;
   isPeru?: boolean;
+  isTrain?: boolean;
 }
 
 function BottomAmenities({
@@ -42,6 +43,7 @@ function BottomAmenities({
   downArrowIcon,
   onToggleExpand,
   isPeru,
+  isTrain,
 }: BottomAmenitiesProps): React.ReactElement {
   const hasPetInfo =
     serviceItem.pet_seat_info &&
@@ -59,7 +61,9 @@ function BottomAmenities({
         className="grid items-center gap-[2%] flex-1 "
         style={{
           // gridTemplateColumns: " 28% 21% 23% 23%",
-          gridTemplateColumns: "25.3% 17% 23% 23%",
+          gridTemplateColumns: isTrain
+            ? "20.6% 17% 23% 23%"
+            : "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">
+          <span className="cursor-pointer bold-text capitalize whitespace-nowrap">
             {DateService.getServiceItemDate(serviceItem.travel_date)}
           </span>
         </StageTooltip>
@@ -134,7 +134,7 @@ function DateTimeSection({
             metaData={metaData}
             colors={colors}
           >
-            <span className="cursor-pointer bold-text capitalize">
+            <span className="cursor-pointer bold-text capitalize whitespace-nowrap">
               {DateService.getServiceItemDate(serviceItem.arrival_date)}
             </span>
           </StageTooltip>
@@ -169,7 +169,7 @@ function DateTimeSection({
           metaData={metaData}
           colors={colors}
         >
-          <div className="font-[900] bold-text">
+          <div className="font-[900] bold-text whitespace-nowrap">
             {isLinatal ? (
               <>
                 {cleanedDepTime} <span>{hasPM ? "PM" : hasAM ? "AM" : ""}</span>
@@ -193,7 +193,7 @@ function DateTimeSection({
             metaData={metaData}
             colors={colors}
           >
-            <div className="font-[900] bold-text">
+            <div className="font-[900] bold-text whitespace-nowrap">
               {removeArrivalTime
                 ? "\u00A0"
                 : serviceItem.arr_time

package/src/ui/OfferBanner.tsx

@@ -29,6 +29,7 @@ interface OfferBannerProps {
   showLoginOption?: boolean;
   isNewUiEnabled?: boolean;
   colors: OfferBannerColors;
+  isLinatal?: boolean;
 }
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
@@ -206,6 +207,7 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
   showLoginOption,
   isNewUiEnabled,
   colors,
+  isLinatal,
 }) => {
   const isLegacyOffer =
     !!serviceItem?.offer_text && !isNewUiEnabled && !serviceItem?.is_dp_enabled;
@@ -250,7 +252,11 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
   return (
     <div
       className="text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[44px] pt-[50px] rounded-b-[14px] text-[14px] mt-[10px]"
-      style={{ background, opacity: isSoldOut ? 0.5 : 1 }}
+      style={{
+        background,
+        opacity: isSoldOut ? 0.5 : 1,
+        zIndex: isLinatal ? "-1" : "",
+      }}
     >
       <div className="flex justify-between items-center w-full">
         <div className="flex items-center">{renderLeftContent()}</div>

package/src/ui/SeatSection/SeatSection.tsx

@@ -7,6 +7,8 @@ interface SeatType {
   label: string;
   fare: number;
   key: any;
+  apiSeatType?: string;
+  api_seat_type?: string;
 }
 
 interface SeatSectionProps {
@@ -21,6 +23,15 @@ interface SeatSectionProps {
   serviceItem?: any;
   renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
   discountSeatPriceColor?: string;
+  isTrain?: boolean;
+  selectedSeatKey?: any;
+  onSeatSelect?: (
+    key: any,
+    price: number,
+    seatKey: string,
+    apiSeatType?: string,
+  ) => void;
+  topLabelColor?: string;
   tooltipColor?: string;
 }
 
@@ -32,6 +43,8 @@ function getAllSeatTypes(seatTypes: SeatType[]) {
   let seatTypesWithPrices = seatTypes.filter(Boolean).map((val) => ({
     label: val?.label,
     price: val?.fare,
+    key: val?.key,
+    apiSeatType: val?.apiSeatType || val?.api_seat_type,
   }));
 
   seatTypesWithPrices.sort((a, b) => a.price - b.price);
@@ -39,7 +52,7 @@ function getAllSeatTypes(seatTypes: SeatType[]) {
   return seatTypesWithPrices;
 }
 
-function getSortedSeatTypes(seatTypes: SeatType[]) {
+function getSortedSeatTypes(seatTypes: SeatType[], isTrain: any) {
   if (!seatTypes?.length) {
     return [{ label: "Salon cama", price: 0 }];
   }
@@ -53,7 +66,9 @@ function getSortedSeatTypes(seatTypes: SeatType[]) {
     seatTypesWithPrices[2] = seatTypesWithPrices[premiumIndex];
   }
 
-  seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
+  if (!isTrain) {
+    seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
+  }
 
   const seenPrices = new Set<number>();
   seatTypesWithPrices = seatTypesWithPrices.filter((seat) => {
@@ -98,15 +113,19 @@ function SeatSection({
   priceColor,
   currencySign,
   removeDuplicateSeats,
+  selectedSeatKey,
+  onSeatSelect,
   isPeru,
   serviceItem,
   renderIcon,
   dpSeatColor,
   discountSeatPriceColor,
+  isTrain,
+  topLabelColor,
   tooltipColor,
 }: SeatSectionProps): React.ReactElement {
   const uniqueSeats = getUniqueSeats(seatTypes);
-  const sortedSeatTypes = getSortedSeatTypes(seatTypes);
+  const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
   const numberOfSeats = getNumberOfSeats(seatTypes);
   const isCentered = numberOfSeats < 2 || removeDuplicateSeats;
 
@@ -118,22 +137,68 @@ function SeatSection({
   const renderSeatNames = () => {
     const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
 
-    return seats.map((val, key: number) =>
-      SEAT_EXCEPTIONS.includes(val.label) ? null : (
-        <span
-          key={key}
-          className={`flex items-center justify-between text-[13.33px] ${
-            isSoldOut ? "text-[#c0c0c0]" : ""
-          }`}
+    return seats.map((val, key: number) => {
+      return SEAT_EXCEPTIONS.includes(val.label) ? null : (
+        <div
+          className="flex items-center"
+          style={isTrain ? { cursor: "pointer" } : undefined}
+          onClick={
+            isTrain && !isSoldOut
+              ? () =>
+                  val.label === selectedSeatKey
+                    ? onSeatSelect?.(null, 0, "", "")
+                    : onSeatSelect?.(
+                        val.label,
+                        val.price,
+                        val.key,
+                        (val as any).apiSeatType,
+                      )
+              : undefined
+          }
         >
-          {typeof val.label === "string" || typeof val.label === "number"
-            ? removeDuplicateSeats && isPeru
-              ? CommonService.truncateSeatLabel(val.label)
-              : val.label
-            : null}
-        </span>
-      ),
-    );
+          {isTrain && (
+            <div
+              style={{
+                border: `1px solid ${val.label === selectedSeatKey ? topLabelColor : "#ccc"}`,
+                borderRadius: "50%",
+                width: "14px",
+                height: "14px",
+                minWidth: "14px",
+                marginRight: "10px",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              {val.label === selectedSeatKey && (
+                <div
+                  style={{
+                    backgroundColor: topLabelColor,
+                    borderRadius: "50%",
+                    width: "7px",
+                    height: "7px",
+                  }}
+                />
+              )}
+            </div>
+          )}
+          <span
+            key={key}
+            className={`flex items-center justify-between text-[13.33px] whitespace-nowrap ${
+              isSoldOut ? "text-[#c0c0c0]" : ""
+            }`}
+          >
+            {typeof val.label === "string" || typeof val.label === "number"
+              ? removeDuplicateSeats && isPeru
+                ? CommonService.truncateSeatLabel(val.label)
+                : isTrain
+                  ? CommonService.capitalize(String(val.label))
+                  : val.label
+              : null}
+          </span>
+        </div>
+      );
+    });
   };
 
   const renderSeatPrices = () => {
@@ -310,7 +375,9 @@ function SeatSection({
 
           <span className="text-[13.33px] flex flex-col">
             {operatorServiceName ? (
-              <span className="text-[13.33px]">{seatLabel}</span>
+              <span className="text-[13.33px] whitespace-nowrap">
+                {seatLabel}
+              </span>
             ) : (
               <span className="text-[13.33px]">Desde</span>
             )}
@@ -533,7 +600,7 @@ function SeatSection({
           style={{ textAlign: "center" }}
         >
           <span
-            className="text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative"
+            className="text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative whitespace-nowrap"
             style={{
               position: "relative",
             }}
@@ -595,7 +662,9 @@ function SeatSection({
           color: isSoldOut ? "#c0c0c0" : priceColor,
           top: 0,
           bottom: 0,
-          left: "clamp(60%, 65% + (100vw - 1300px) * 0.1, 65%)",
+          left: isTrain
+            ? "73%"
+            : "clamp(60%, 65% + (100vw - 1300px) * 0.1, 65%)",
           right: 0,
           justifyContent: isCentered ? "center" : "",
           gap: "10px",