kupos-ui-components-lib 9.11.7 → 9.11.9

package/src/ui/mobileweb/DateTimeSectionMobile.tsx

@@ -25,6 +25,7 @@ interface DateTimeSectionMobileProps {
   tooltipBgColor?: string;
   showLastSeats?: boolean;
   discountSeatPriceColor?: string;
+  isTrain?: boolean;
 }
 
 const pad = (n: number) => (n < 10 ? "0" + n : String(n));
@@ -67,41 +68,47 @@ const TimeRow: React.FC<TimeRowProps> = ({
   isSoldOut,
 }) => {
   const formattedDate = DateService.getServiceItemDate(date);
-  const dotPositionClass = formattedDate.includes("dom") ? "max-[399px]:left-[53%]" : "";
-  return <div
-    className={`flex items-center min-[420]:text-[13px] text-[12px] justify-between ${
-      isSoldOut ? "text-[#c0c0c0]" : ""
-    }`}
-  >
-    <div className="flex items-center" style={{ flex: 1 }}>
-      <div>
-        {" "}
-        {label ? (
-          <div className="w-[60px]">{label}</div>
-        ) : (
-          <div className="w-[12px] h-auto mr-[5px]">
-            <img
-              src={icon}
-              alt={alt}
-              className={`w-[12px] h-auto mr-[5px] ${
-                isSoldOut ? "grayscale" : ""
-              }`}
-            />
+  const dotPositionClass = formattedDate.includes("dom")
+    ? "max-[399px]:left-[53%]"
+    : "";
+  return (
+    <div
+      className={`flex items-center min-[420]:text-[13px] text-[12px] justify-between ${
+        isSoldOut ? "text-[#c0c0c0]" : ""
+      }`}
+    >
+      <div className="flex items-center" style={{ flex: 1 }}>
+        <div>
+          {" "}
+          {label ? (
+            <div className="w-[60px]">{label}</div>
+          ) : (
+            <div className="w-[12px] h-auto mr-[5px]">
+              <img
+                src={icon}
+                alt={alt}
+                className={`w-[12px] h-auto mr-[5px] ${
+                  isSoldOut ? "grayscale" : ""
+                }`}
+              />
+            </div>
+          )}
+        </div>
+        <div
+          className="flex items-center relative capitalize justify-between"
+          style={{ flex: 1 }}
+        >
+          <span className="cursor-pointer black-text whitespace-nowrap">
+            {formattedDate}
+          </span>
+          <div className={`absolute left-[50%] ${dotPositionClass}`}>•</div>
+          <div className="font-[900] relative black-text whitespace-nowrap">
+            {timeContent}
           </div>
-        )}
-      </div>
-      <div
-        className="flex items-center relative capitalize justify-between"
-        style={{ flex: 1 }}
-      >
-        <span className="cursor-pointer black-text">
-          {formattedDate}
-        </span>
-        <div className={`absolute left-[50%] ${dotPositionClass}`}>•</div>
-        <div className="font-[900] relative black-text">{timeContent}</div>
+        </div>
       </div>
     </div>
-  </div>;
+  );
 };
 
 function DateTimeSectionMobile({
@@ -127,6 +134,7 @@ function DateTimeSectionMobile({
   tooltipBgColor,
   showLastSeats,
   discountSeatPriceColor,
+  isTrain,
 }: DateTimeSectionMobileProps): React.ReactElement {
   const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
 
@@ -153,8 +161,12 @@ function DateTimeSectionMobile({
     >
       {/* DATE AND TIME */}
       <div
-        className="min-h-[2.5rem] flex flex-col justify-between gap-[4px] w-[50%] "
-        style={{ justifyContent: isCiva && "center" }}
+        className={`flex flex-col gap-[4px] w-[50%] ${isTrain ? "justify-center" : "justify-between"}`}
+        style={{
+          justifyContent: isCiva && "center",
+          minHeight: isTrain ? undefined : "2.5rem",
+          alignSelf: isTrain ? "stretch" : undefined,
+        }}
       >
         <TimeRow
           label={orignLabel}
@@ -198,6 +210,7 @@ function DateTimeSectionMobile({
         tooltipBgColor={tooltipBgColor}
         showLastSeats={showLastSeats}
         discountSeatPriceColor={discountSeatPriceColor}
+        isTrain={isTrain}
       />
     </div>
   );

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;
 
@@ -171,7 +180,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)}
@@ -324,15 +333,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}
@@ -343,16 +354,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,
@@ -604,7 +619,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) =>