kupos-ui-components-lib 10.4.42 → 10.4.43

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -297,6 +297,14 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
                 Object.keys(serviceItem.pet_seat_info).length > 0,
             render: (React.createElement(PetBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, isSoldOut: isSoldOut })),
         },
+        {
+            key: "servicetype",
+            width: "20%",
+            condition: serviceItem.service_type,
+            render: (React.createElement("div", { className: "mt-[4px]" },
+                renderIcon("serviceTypeIcon", "12px"),
+                React.createElement("span", { className: "group text-[13.33px] cursor-pointer ml-[3px] " }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.service_type))),
+        },
         {
             key: "flexible",
             width: "20%",

package/dist/components/ServiceItem/ServiceItemMobile.js

@@ -161,9 +161,9 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                         color: colors.tooltipBgColor,
                     } }, "\u00A1\u00DAltimos Asientos!")))) : null,
                 React.createElement("div", { className: "bg-[#E6E6E6]  mt-[10px] mb-[8px] h-[1px]" }),
-                React.createElement(BottomAmenitiesMobile, { isSoldOut: isSoldOut, amenitiesNodes: amenities(), hoursIcon: renderIcon("hours", "14px"), duration: (_j = serviceItem.duration) === null || _j === void 0 ? void 0 : _j.toString(), isDirectTrip: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip, directoColor: colors.directoColor, directoAnim: serviceItem.icons.directoAnim, isChangeTicket: serviceItem.is_change_ticket, isPetSeat: isPetSeat, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, flexibleAnim: serviceItem.icons.flexibleAnim, isTrackingEnabled: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled, locationAnim: serviceItem.icons.locationAnim, downArrowIcon: serviceItem.icons.downArrow, showDropdown: isItemExpanded, setShowDropdown: () => setIsExpanded(isItemExpanded ? null : serviceItem.id), onDropdownToggle: () => {
+                React.createElement(BottomAmenitiesMobile, { isSoldOut: isSoldOut, amenitiesNodes: amenities(), hoursIcon: renderIcon("hours", "14px"), duration: (_j = serviceItem.duration) === null || _j === void 0 ? void 0 : _j.toString(), isDirectTrip: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip, serviceType: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.service_type, directoColor: colors.directoColor, directoAnim: serviceItem.icons.directoAnim, isChangeTicket: serviceItem.is_change_ticket, isPetSeat: isPetSeat, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, flexibleAnim: serviceItem.icons.flexibleAnim, isTrackingEnabled: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled, locationAnim: serviceItem.icons.locationAnim, downArrowIcon: serviceItem.icons.downArrow, showDropdown: isItemExpanded, setShowDropdown: () => setIsExpanded(isItemExpanded ? null : serviceItem.id), onDropdownToggle: () => {
                         setIsExpanded(isItemExpanded ? null : serviceItem.id);
-                    }, isPeru: isPeru, femaleAnim: serviceItem.icons.femaleAnim, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, isTrain: isTrain })),
+                    }, isPeru: isPeru, femaleAnim: serviceItem.icons.femaleAnim, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, isTrain: isTrain, renderIcon: renderIcon })),
             React.createElement(ServiceBadgesMobile, { showTopLabel: showTopLabel || undefined, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, serviceItem: serviceItem, isConexion: isConexion, isAllinBus: isAllinBus, boardingName: boardingName })),
         hasOfferText &&
             isNewUiEnabled &&

package/dist/components/ServiceItem/mobileTypes.d.ts

@@ -3,6 +3,7 @@ export interface MobileServiceItemProps {
     amenitiesData?: any;
     serviceItem: {
         id: string;
+        service_type?: string;
         is_transpordo?: boolean;
         operator_details: [
             string,
@@ -102,6 +103,7 @@ export interface MobileServiceItemProps {
             airConditionIcon?: string;
             baggageIcon?: string;
             chargingIcon?: string;
+            serviceTypeIcon?: string;
             coffeeIcon?: string;
             foodIcon?: string;
             gamingIcon?: string;

package/dist/components/ServiceItem/types.d.ts

@@ -5,6 +5,7 @@ export interface ServiceItemProps {
     children?: React.ReactNode;
     serviceItem: {
         id: string;
+        service_type?: string;
         operator_details: [
             string,
             string | number,

package/dist/ui/ServiceType.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+declare const ServiceType: ({ serviceItem, translation, renderIcon, isSoldOut, colors, }: {
+    serviceItem: any;
+    translation: any;
+    renderIcon: any;
+    isSoldOut: any;
+    colors: any;
+}) => React.JSX.Element;
+export default ServiceType;

package/dist/ui/ServiceType.js

@@ -0,0 +1,9 @@
+import React from "react";
+const ServiceType = ({ serviceItem, translation, renderIcon, isSoldOut, colors, }) => (React.createElement("div", { className: "flex items-baseline relative whitespace-nowrap " },
+    React.createElement("div", { className: `w-[18px] mr-[4px] ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
+    React.createElement("div", { className: "group text-[13.33px] cursor-pointer" },
+        React.createElement("span", { style: { opacity: isSoldOut ? 0.5 : 1 } }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.service_type),
+        React.createElement("div", { className: "hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[188px] text-center break-normal shadow-service text-[12px]", style: { backgroundColor: colors.bottomStripColor } },
+            React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent", style: { borderBottomColor: colors.bottomStripColor } }),
+            "Duraci\u00F3n estimada del viaje"))));
+export default ServiceType;

package/dist/ui/mobileweb/BottomAmenitiesMobile.d.ts

@@ -25,6 +25,9 @@ interface BottomAmenitiesMobileProps {
     isDpEnabled?: boolean;
     isTrain?: boolean;
     seatCategoryText?: string;
+    serviceType?: string;
+    serviceTypeIcon?: string;
+    renderIcon?: any;
 }
-declare 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, }: BottomAmenitiesMobileProps): React.ReactElement;
+declare 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, }: BottomAmenitiesMobileProps): React.ReactElement;
 export default BottomAmenitiesMobile;

package/dist/ui/mobileweb/BottomAmenitiesMobile.js

@@ -1,7 +1,7 @@
 import React from "react";
 import LottiePlayer from "../../assets/LottiePlayer";
 import DateService from "../../utils/DateService";
-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, }) {
+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", { style: { opacity: isSoldOut ? 0.5 : 1 } }, amenitiesNodes),
@@ -10,7 +10,11 @@ function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration,
                 "\u00A0",
                 React.createElement("div", { className: `cursor-default group min-[420]:text-[13px] text-[12px] ${isSoldOut ? "text-[#c0c0c0]" : ""}`, style: { lineHeight: "normal" } },
                     DateService.formatDuration(duration),
-                    "hrs"))),
+                    "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")),
+                "\u00A0",
+                React.createElement("div", { className: `cursor-default group min-[420]:text-[13px] text-[12px] ${isSoldOut ? "text-[#c0c0c0]" : ""}`, style: { lineHeight: "normal" } }, 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/package.json

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

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -462,6 +462,20 @@ function ServiceItemPB({
       ),
     },
 
+    {
+      key: "servicetype",
+      width: "20%",
+      condition: serviceItem.service_type,
+      render: (
+        <div className="mt-[4px]">
+          {renderIcon("serviceTypeIcon", "12px")}
+          <span className="group text-[13.33px] cursor-pointer ml-[3px] ">
+            {serviceItem?.service_type}
+          </span>
+        </div>
+      ),
+    },
+
     {
       key: "flexible",
       width: "20%",

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -432,6 +432,7 @@ function ServiceItemMobile({
                 hoursIcon={renderIcon("hours", "14px")}
                 duration={serviceItem.duration?.toString()}
                 isDirectTrip={serviceItem?.is_direct_trip}
+                serviceType={serviceItem?.service_type}
                 directoColor={colors.directoColor}
                 directoAnim={serviceItem.icons.directoAnim}
                 isChangeTicket={serviceItem.is_change_ticket}
@@ -454,6 +455,7 @@ function ServiceItemMobile({
                 ladiesBookedSeats={serviceItem.ladies_booked_seats}
                 isDpEnabled={serviceItem.is_dp_enabled}
                 isTrain={isTrain}
+                renderIcon={renderIcon}
               />
             </div>
 

package/src/components/ServiceItem/mobileTypes.ts

@@ -6,6 +6,7 @@ export interface MobileServiceItemProps {
   amenitiesData?: any;
   serviceItem: {
     id: string;
+    service_type?: string;
     is_transpordo?: boolean;
     operator_details: [
       string,
@@ -105,6 +106,7 @@ export interface MobileServiceItemProps {
       airConditionIcon?: string;
       baggageIcon?: string;
       chargingIcon?: string;
+      serviceTypeIcon?: string;
       coffeeIcon?: string;
       foodIcon?: string;
       gamingIcon?: string;

package/src/components/ServiceItem/types.ts

@@ -7,6 +7,7 @@ export interface ServiceItemProps {
   children?: React.ReactNode;
   serviceItem: {
     id: string;
+    service_type?: string;
     operator_details: [
       string,
       string | number,

package/src/ui/mobileweb/BottomAmenitiesMobile.tsx

@@ -28,6 +28,9 @@ interface BottomAmenitiesMobileProps {
   isDpEnabled?: boolean;
   isTrain?: boolean;
   seatCategoryText?: string;
+  serviceType?: string;
+  serviceTypeIcon?: string;
+  renderIcon?: any;
 }
 
 function BottomAmenitiesMobile({
@@ -56,6 +59,9 @@ function BottomAmenitiesMobile({
   isDpEnabled,
   isTrain,
   seatCategoryText,
+  serviceType,
+  serviceTypeIcon,
+  renderIcon,
 }: BottomAmenitiesMobileProps): React.ReactElement {
   return (
     <div className={`${"flex justify-between items-center items-center "}`}>
@@ -84,6 +90,30 @@ function BottomAmenitiesMobile({
           </div>
         </div>
 
+        {serviceType && (
+          <div
+            className="flex  relative "
+            style={{ color: isSoldOut ? "#bbb" : "text-[#464647]" }}
+          >
+            <div
+              className={`w-[12px] h-auto mr-[2px] ${
+                isSoldOut ? "grayscale" : ""
+              }`}
+            >
+              {renderIcon("serviceTypeIcon", "12px")}
+            </div>
+            &nbsp;
+            <div
+              className={`cursor-default group min-[420]:text-[13px] text-[12px] ${
+                isSoldOut ? "text-[#c0c0c0]" : ""
+              }`}
+              style={{ lineHeight: "normal" }}
+            >
+              {serviceType}
+            </div>
+          </div>
+        )}
+
         {/* {isDirectTrip && (
           <div
             className={`flex items-center gap-[2px] text-white min-[420]:text-[12px] text-[10px] z-20  `}