kupos-ui-components-lib 10.4.43 → 10.4.46

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -312,7 +312,10 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
             render: (React.createElement(FlexibleBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, serviceItem: serviceItem, isSoldOut: isSoldOut })),
         },
     ];
-    const otherItems = items.filter((i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition);
+    const otherItems = items.filter((i) => i.key !== "pet" &&
+        i.key !== "flexible" &&
+        i.key !== "servicetype" &&
+        !!i.condition);
     return (React.createElement(React.Fragment, null, isPeruSites ? (React.createElement(PeruServiceItemDesktop, { serviceItem: serviceItem, onBookButtonPress: onBookButtonPress, colors: colors, metaData: metaData, children: children, busStage: busStage, serviceDetailsLoading: serviceDetailsLoading, cityOrigin: cityOrigin, cityDestination: cityDestination, translation: translation, orignLabel: orignLabel, destinationLabel: destinationLabel, currencySign: currencySign, isCiva: isCiva, showRating: showRating, showLastSeats: showLastSeats, removeArrivalTime: removeArrivalTime, removeDuplicateSeats: removeDuplicateSeats, isPeruSites: isPeruSites, t: (key) => t(key), showAvailableSeats: showAvailableSeats, isSeatIcon: isSeatIcon, isPeru: isPeru, siteType: siteType, isAllinBus: isAllinBus, viewersConfig: viewersConfig, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, isExpand: isExpand, setIsExpand: setIsExpand, coachKey: coachKey, isFlores: isFlores, isNewUiEnabled: isNewUiEnabledPeru, showLoginOption: showLoginOption, priority_stage_ids: priority_stage_ids })) : isNewUi && !isTrain ? (React.createElement(FeatureServiceUi, { serviceItem: serviceItem, showTopLabel: showTopLabel, getAnimationIcon: getAnimationIcon, cityOrigin: cityOrigin, cityDestination: cityDestination, renderIcon: renderIcon, viewersConfig: viewersConfig, isFeatureDropDownExpand: isFeatureDropDownExpand, ticketQuantity: ticketQuantity, onIncreaseTicketQuantity: onIncreaseTicketQuantity, onDecreaseTicketQuantity: onDecreaseTicketQuantity, onBookButtonPress: onRemateUiButtonClick, onToggleExpand: () => setIsFeatureDropDownExpand &&
             setIsFeatureDropDownExpand(isFeatureDropDownExpand === serviceItem.id ||
                 isFeatureDropDownExpand === true
@@ -373,7 +376,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                                 color: colors.seatPriceColor,
                             } }, "\u00A1\u00DAltimos Asientos!")))) : null)),
                 React.createElement(BottomAmenities, { otherItems: otherItems, serviceItem: serviceItem, grayscaleClass: grayscaleClass, isSoldOut: isSoldOut, isItemExpanded: isItemExpanded, colors: colors, translation: translation, getAnimationIcon: getAnimationIcon, downArrowIcon: renderIcon("downArrow", "10px"), onToggleExpand: () => setIsExpand &&
-                        setIsExpand(isItemExpanded ? null : serviceItem.id), isPeru: isPeru, isTrain: isTrain, isDpEnabled: serviceItem.is_dp_enabled }))),
+                        setIsExpand(isItemExpanded ? null : serviceItem.id), isPeru: isPeru, isTrain: isTrain, isDpEnabled: serviceItem.is_dp_enabled, serviceType: serviceItem.service_type, renderIcon: renderIcon }))),
         isPeru ? null : (React.createElement("div", { style: {
                 display: "grid",
                 gridTemplateRows: isItemExpanded ? "1fr" : "0fr",

package/dist/styles.css

@@ -273,6 +273,9 @@
 .-mr-\[12px\] {
   margin-right: calc(12px * -1);
 }
+.mr-\[1px\] {
+  margin-right: 1px;
+}
 .mr-\[2px\] {
   margin-right: 2px;
 }
@@ -507,9 +510,6 @@
 .w-\[50\%\] {
   width: 50%;
 }
-.w-\[55\%\] {
-  width: 55%;
-}
 .w-\[60\%\] {
   width: 60%;
 }
@@ -744,6 +744,9 @@
 .gap-\[2px\] {
   gap: 2px;
 }
+.gap-\[3px\] {
+  gap: 3px;
+}
 .gap-\[3rem\] {
   gap: 3rem;
 }

package/dist/ui/BottomAmenities/BottomAmenities.d.ts

@@ -26,6 +26,8 @@ interface BottomAmenitiesProps {
     isPeru?: boolean;
     isTrain?: boolean;
     isDpEnabled?: boolean;
+    serviceType?: string;
+    renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
 }
-declare function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, isItemExpanded, colors, translation, getAnimationIcon, downArrowIcon, onToggleExpand, isPeru, isTrain, isDpEnabled, }: BottomAmenitiesProps): React.ReactElement;
+declare function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, isItemExpanded, colors, translation, getAnimationIcon, downArrowIcon, onToggleExpand, isPeru, isTrain, isDpEnabled, serviceType, renderIcon, }: BottomAmenitiesProps): React.ReactElement;
 export default BottomAmenities;

package/dist/ui/BottomAmenities/BottomAmenities.js

@@ -3,7 +3,8 @@ import LottiePlayer from "../../assets/LottiePlayer";
 import FlexibleBlock from "../FlexibleBlock";
 import PetBlock from "../PetBlock";
 import FemaleBlock from "../FemaleBlock";
-function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, isItemExpanded, colors, translation, getAnimationIcon, downArrowIcon, onToggleExpand, isPeru, isTrain, isDpEnabled, }) {
+import CommonService from "../../utils/CommonService";
+function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, isItemExpanded, colors, translation, getAnimationIcon, downArrowIcon, onToggleExpand, isPeru, isTrain, isDpEnabled, serviceType, renderIcon, }) {
     const hasPetInfo = serviceItem.pet_seat_info &&
         Object.keys(serviceItem.pet_seat_info).length > 0;
     const showDownArrow = ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_change_ticket) && serviceItem.pet_seat_info) ||
@@ -11,11 +12,14 @@ function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, i
             Object.keys(serviceItem.pet_seat_info).length > 0);
     return (React.createElement("div", { className: "flex items-center mt-[15px] border-t border-[#eee] pt-[6px]" },
         React.createElement("div", { className: "grid items-center gap-[2%] flex-1 ", style: {
-                // gridTemplateColumns: " 28% 21% 23% 23%",
                 gridTemplateColumns: isTrain
                     ? "25.6% 17% 23% 23%"
                     : "25.3% 17% 23% 23%",
-            } }, otherItems.map((item) => (React.createElement("div", { key: item.key, className: "flex items-center" }, item.render)))),
+            } },
+            otherItems.map((item) => (React.createElement("div", { key: item.key, className: "flex items-center" }, item.render))),
+            serviceType && (React.createElement("div", { className: `flex items-center gap-[3px] text-[13.33px] whitespace-nowrap ${isSoldOut ? "text-[#c0c0c0]" : "text-[#464647]"}`, style: { gridColumn: 4 } }, renderIcon === null || renderIcon === void 0 ? void 0 :
+                renderIcon("serviceTypeIcon", "15px"),
+                React.createElement("span", { className: "bold-text" }, CommonService.capitalizeFirstLetter(serviceType))))),
         React.createElement("div", { className: "flex items-center justify-end shrink-0 ml-[5px] w-[150px]" },
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled) && (React.createElement("div", { className: grayscaleClass + " mr-[10px]" },
                 React.createElement(LottiePlayer, { animationData: getAnimationIcon("locationAnim"), width: "20px", height: "20px" }))),

package/dist/ui/mobileweb/BottomAmenitiesMobile.js

@@ -1,9 +1,10 @@
 import React from "react";
 import LottiePlayer from "../../assets/LottiePlayer";
 import DateService from "../../utils/DateService";
+import commonService from "../../utils/CommonService";
 function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration, isDirectTrip, directoColor, directoAnim, isChangeTicket, isPetSeat, petSeatInfo, petFriendlyAnim, flexibleAnim, isTrackingEnabled, locationAnim, downArrowIcon, showDropdown, setShowDropdown, onDropdownToggle, isItemExpanded, isPeru, femaleAnim, ladiesBookedSeats, isDpEnabled, isTrain, seatCategoryText, serviceType, serviceTypeIcon, renderIcon, }) {
     return (React.createElement("div", { className: `${"flex justify-between items-center items-center "}` },
-        React.createElement("div", { className: "w-[55%] flex justify-between items-center" },
+        React.createElement("div", { className: " flex justify-between items-center", style: { width: isPeru && serviceType ? "100%" : "55%" } },
             React.createElement("div", { style: { opacity: isSoldOut ? 0.5 : 1 } }, amenitiesNodes),
             React.createElement("div", { className: "flex  relative ", style: { color: isSoldOut ? "#bbb" : "text-[#464647]" } },
                 React.createElement("div", { className: `w-[12px] h-auto mr-[2px] ${isSoldOut ? "grayscale" : ""}` }, hoursIcon),
@@ -11,10 +12,10 @@ function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration,
                 React.createElement("div", { className: `cursor-default group min-[420]:text-[13px] text-[12px] ${isSoldOut ? "text-[#c0c0c0]" : ""}`, style: { lineHeight: "normal" } },
                     DateService.formatDuration(duration),
                     "hrs")),
-            serviceType && (React.createElement("div", { className: "flex  relative ", style: { color: isSoldOut ? "#bbb" : "text-[#464647]" } },
-                React.createElement("div", { className: `w-[12px] h-auto mr-[2px] ${isSoldOut ? "grayscale" : ""}` }, renderIcon("serviceTypeIcon", "12px")),
+            serviceType && (React.createElement("div", { className: "flex  relative items-center", style: { color: isSoldOut ? "#bbb" : "text-[#464647]" } },
+                React.createElement("div", { className: `w-[12px] h-auto mr-[1px] mt-[3px] ${isSoldOut ? "grayscale" : ""}` }, renderIcon("serviceTypeIcon", "12px")),
                 "\u00A0",
-                React.createElement("div", { className: `cursor-default group min-[420]:text-[13px] text-[12px] ${isSoldOut ? "text-[#c0c0c0]" : ""}`, style: { lineHeight: "normal" } }, serviceType)))),
+                React.createElement("div", { className: `cursor-default group min-[420]:text-[13px] text-[12px] bold-text ${isSoldOut ? "text-[#c0c0c0]" : ""}`, style: { lineHeight: "normal" } }, commonService.capitalizeFirstLetter(serviceType))))),
         seatCategoryText && (React.createElement("div", { className: "flex-1 text-right whitespace-nowrap min-[420]:text-[13px] text-[12px]", style: { opacity: isSoldOut ? 0.5 : 1 } }, seatCategoryText)),
         React.createElement("div", { className: "flex items-center" },
             React.createElement("div", null, (isChangeTicket || isPetSeat) && (React.createElement("div", { className: "flex items-center" },

package/dist/ui/mobileweb/SeatSectionMobile.js

@@ -45,7 +45,7 @@ const getUniqueSeats = (data, limit) => {
     });
     return Array.from(seatMap.values())
         .sort((a, b) => a.fare - b.fare)
-        .slice(0, limit);
+        .slice(2, limit);
 };
 function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;

package/package.json

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

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -493,7 +493,11 @@ function ServiceItemPB({
   ];
 
   const otherItems = items.filter(
-    (i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition,
+    (i) =>
+      i.key !== "pet" &&
+      i.key !== "flexible" &&
+      i.key !== "servicetype" &&
+      !!i.condition,
   );
 
   return (
@@ -769,6 +773,8 @@ function ServiceItemPB({
                 isPeru={isPeru}
                 isTrain={isTrain}
                 isDpEnabled={serviceItem.is_dp_enabled}
+                serviceType={serviceItem.service_type}
+                renderIcon={renderIcon}
               />
             </div>
           </div>

package/src/ui/BottomAmenities/BottomAmenities.tsx

@@ -3,6 +3,7 @@ import LottiePlayer from "../../assets/LottiePlayer";
 import FlexibleBlock from "../FlexibleBlock";
 import PetBlock from "../PetBlock";
 import FemaleBlock from "../FemaleBlock";
+import CommonService from "../../utils/CommonService";
 
 interface ItemEntry {
   key: string;
@@ -30,6 +31,8 @@ interface BottomAmenitiesProps {
   isPeru?: boolean;
   isTrain?: boolean;
   isDpEnabled?: boolean;
+  serviceType?: string;
+  renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
 }
 
 function BottomAmenities({
@@ -46,6 +49,8 @@ function BottomAmenities({
   isPeru,
   isTrain,
   isDpEnabled,
+  serviceType,
+  renderIcon,
 }: BottomAmenitiesProps): React.ReactElement {
   const hasPetInfo =
     serviceItem.pet_seat_info &&
@@ -62,7 +67,6 @@ function BottomAmenities({
       <div
         className="grid items-center gap-[2%] flex-1 "
         style={{
-          // gridTemplateColumns: " 28% 21% 23% 23%",
           gridTemplateColumns: isTrain
             ? "25.6% 17% 23% 23%"
             : "25.3% 17% 23% 23%",
@@ -73,6 +77,19 @@ function BottomAmenities({
             {item.render}
           </div>
         ))}
+        {serviceType && (
+          <div
+            className={`flex items-center gap-[3px] text-[13.33px] whitespace-nowrap ${
+              isSoldOut ? "text-[#c0c0c0]" : "text-[#464647]"
+            }`}
+            style={{ gridColumn: 4 }}
+          >
+            {renderIcon?.("serviceTypeIcon", "15px")}
+            <span className="bold-text">
+              {CommonService.capitalizeFirstLetter(serviceType)}
+            </span>
+          </div>
+        )}
       </div>
 
       {/* PET + FLEXIBLE (always visible) */}

package/src/ui/mobileweb/BottomAmenitiesMobile.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import LottiePlayer from "../../assets/LottiePlayer";
 import DateService from "../../utils/DateService";
+import commonService from "../../utils/CommonService";
 
 interface BottomAmenitiesMobileProps {
   isSoldOut: boolean;
@@ -65,7 +66,10 @@ function BottomAmenitiesMobile({
 }: BottomAmenitiesMobileProps): React.ReactElement {
   return (
     <div className={`${"flex justify-between items-center items-center "}`}>
-      <div className="w-[55%] flex justify-between items-center">
+      <div
+        className=" flex justify-between items-center"
+        style={{ width: isPeru && serviceType ? "100%" : "55%" }}
+      >
         <div style={{ opacity: isSoldOut ? 0.5 : 1 }}>{amenitiesNodes}</div>
 
         <div
@@ -92,11 +96,11 @@ function BottomAmenitiesMobile({
 
         {serviceType && (
           <div
-            className="flex  relative "
+            className="flex  relative items-center"
             style={{ color: isSoldOut ? "#bbb" : "text-[#464647]" }}
           >
             <div
-              className={`w-[12px] h-auto mr-[2px] ${
+              className={`w-[12px] h-auto mr-[1px] mt-[3px] ${
                 isSoldOut ? "grayscale" : ""
               }`}
             >
@@ -104,12 +108,12 @@ function BottomAmenitiesMobile({
             </div>
             &nbsp;
             <div
-              className={`cursor-default group min-[420]:text-[13px] text-[12px] ${
+              className={`cursor-default group min-[420]:text-[13px] text-[12px] bold-text ${
                 isSoldOut ? "text-[#c0c0c0]" : ""
               }`}
               style={{ lineHeight: "normal" }}
             >
-              {serviceType}
+              {commonService.capitalizeFirstLetter(serviceType)}
             </div>
           </div>
         )}

package/src/ui/mobileweb/SeatSectionMobile.tsx

@@ -119,7 +119,7 @@ const getUniqueSeats = (data: SeatType[], limit: number): SeatType[] => {
 
   return Array.from(seatMap.values())
     .sort((a, b) => a.fare - b.fare)
-    .slice(0, limit);
+    .slice(2, limit);
 };
 
 function SeatSectionMobile({
@@ -144,7 +144,10 @@ function SeatSectionMobile({
     serviceItem?.operator_service_name === "Movil Bus";
   const hasInclination = hasInclinationSeatTypes(seatTypesData ?? []);
   // Fetch ALL unique seats (no slice limit) for the multi-row seat-type case
-  const allUniqueSeats = getUniqueSeats(seatTypesData ?? [], Infinity as number);
+  const allUniqueSeats = getUniqueSeats(
+    seatTypesData ?? [],
+    Infinity as number,
+  );
   // A service that exposes more than one seat type (e.g. "Bus Cama" + "160°")
   // lists every type with its own fare, under a shared "Desde" heading.
   const showSeatTypeRows =