kupos-ui-components-lib 9.11.2 → 9.11.4

package/src/ui/mobileweb/SeatSectionMobile.tsx

@@ -31,6 +31,7 @@ interface SeatSectionMobileProps {
   tooltipBgColor?: string;
   showLastSeats?: boolean;
   discountSeatPriceColor?: string;
+  isTrain?: boolean;
 }
 
 interface SeatRowProps {
@@ -42,6 +43,7 @@ interface SeatRowProps {
   seatPriceColor: string;
   hasMultipleTypes: boolean;
   textSize: string;
+  isTrain?: boolean;
 }
 
 const SeatRow: React.FC<SeatRowProps> = ({
@@ -53,6 +55,7 @@ const SeatRow: React.FC<SeatRowProps> = ({
   seatPriceColor,
   hasMultipleTypes,
   textSize,
+  isTrain,
 }) => {
   if (EXCEPTIONS.includes(type.label)) return null;
 
@@ -69,7 +72,12 @@ const SeatRow: React.FC<SeatRowProps> = ({
         className={`min-[420]:text-[13px] ${textSize} `}
         style={{ color: labelColor }}
       >
-        {displayLabel}
+        {isTrain
+          ? commonService.truncateSeatLabel(
+              commonService.capitalize(displayLabel),
+              8,
+            )
+          : displayLabel}
       </span>
       <span
         className={`min-[420]:text-[13px] ${textSize}  bold-text`}
@@ -118,6 +126,7 @@ function SeatSectionMobile({
   tooltipBgColor,
   showLastSeats,
   discountSeatPriceColor,
+  isTrain,
 }: SeatSectionMobileProps): React.ReactElement {
   const hasMultipleTypes = (seatTypesData?.length ?? 0) > 2;
 
@@ -169,7 +178,7 @@ function SeatSectionMobile({
                 className="w-[100%] flex flex-row justify-between items-center"
               >
                 <span
-                  className="min-[420]:text-[13px] text-[12px] bold-text"
+                  className="min-[420]:text-[13px] text-[12px] bold-text whitespace-nowrap"
                   style={{ color: isSoldOut ? "#bbb" : "#464647" }}
                 >
                   {commonService.truncateSeatLabel(seat.label)}
@@ -322,15 +331,17 @@ function SeatSectionMobile({
           seatPriceColor={seatPriceColor}
           hasMultipleTypes={hasMultipleTypes}
           textSize="text-[11px]"
+          isTrain={isTrain}
         />
       ));
     }
 
-    return seatTypesData
+    const filteredSeats = seatTypesData
       ?.filter((item) => getFilteredSeats(item.label))
-      ?.sort((a, b) => a.fare - b.fare)
-      ?.slice(0, 2)
-      ?.map((type, i) => (
+      ?.sort((a, b) => a.fare - b.fare);
+
+    return (isTrain ? filteredSeats : filteredSeats?.slice(0, 2))?.map(
+      (type, i) => (
         <SeatRow
           key={i}
           type={type}
@@ -341,16 +352,20 @@ function SeatSectionMobile({
           seatPriceColor={seatPriceColor}
           hasMultipleTypes={hasMultipleTypes}
           textSize="text-[12px]"
+          isTrain={isTrain}
         />
-      ));
+      ),
+    );
   };
 
   const seats = removeDuplicateSeats
     ? getUniqueSeats(seatTypesData, 3)
-    : seatTypesData
-        ?.filter((item) => getFilteredSeats(item.label))
-        ?.sort((a, b) => a.fare - b.fare)
-        ?.slice(0, 2);
+    : (() => {
+        const filtered = seatTypesData
+          ?.filter((item) => getFilteredSeats(item.label))
+          ?.sort((a, b) => a.fare - b.fare);
+        return isTrain ? filtered : filtered?.slice(0, 2);
+      })();
 
   const discountedSeats = seats?.map((seat) => ({
     ...seat,
@@ -602,7 +617,7 @@ function SeatSectionMobile({
         </div>
       ) : (
         <div
-          className="flex flex-col justify-between h-[2.5rem] "
+          className={`flex flex-col justify-between ${isTrain ? "" : "h-[2.5rem]"} `}
           style={{
             gap: isSoldOut ? "0px" : "5px",
             justifyContent: hasMultipleTypes ? "space-between" : "center",

package/src/utils/CommonService.ts

@@ -39,9 +39,15 @@ const commonService = {
     }
   },
 
-  truncateSeatLabel: (label: string | number): string => {
+  truncateSeatLabel: (label: string | number, maxLength?: number): string => {
     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: string) =>