kupos-ui-components-lib 9.7.5 → 9.7.7

package/dist/KuposUIComponent.d.ts

@@ -15,6 +15,9 @@ interface KuposUIComponentProps {
     orignLabel?: string;
     destinationLabel?: string;
     t?: (key: string) => string;
+    ticketQuantity?: number;
+    onIncreaseTicketQuantity?: (serviceItem: any) => void;
+    onDecreaseTicketQuantity?: (serviceItem: any) => void;
     id?: string;
     name?: string;
     description?: string;

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { ServiceItemProps } from "./types";
-declare function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, showLoginModal, isLoggedIn, showLoginOption, }: ServiceItemProps & {
+declare function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, }: ServiceItemProps & {
     currencySign?: string;
 }): React.ReactElement;
 export default ServiceItemPB;

package/dist/components/ServiceItem/ServiceItemDesktop.js

@@ -23,6 +23,7 @@ import bombAnimation from "../../assets/images/anims/service_list/bomb.json";
 import dotAnimation from "../../assets/images/anims/service_list/dot_animation.json";
 import starAnimation from "../../assets/images/anims/service_list/star_anim.json";
 import femaleAnimation from "../../assets/images/anims/service_list/female_anim.json";
+import usersAnimation from "../../assets/images/anims/service_list/users_anim.json";
 import RatingBlock from "../../ui/RatingBlock";
 import DurationBlock from "../../ui/DurationBlock";
 import PetBlock from "../../ui/PetBlock";
@@ -32,6 +33,8 @@ import KuposButton from "../../ui/KuposButton/KuposButton";
 import BottomAmenities from "../../ui/BottomAmenities/BottomAmenities";
 import SeatSection from "../../ui/SeatSection/SeatSection";
 import DateTimeSection from "../../ui/DateTimeSection/DateTimeSection";
+import FeatureServiceUi from "../../ui/FeatureServiceUI/FeatureServiceUi";
+import thunderAnimation from "../../assets/images/anims/service_list/thunder_icon.json";
 import ServiceBadges from "../../ui/ServiceBadges/ServiceBadges";
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
 const ANIMATION_MAP = {
@@ -64,6 +67,9 @@ const ANIMATION_MAP = {
     bombAnimation: {
         kupos: bombAnimation,
     },
+    thunderAnimation: {
+        kupos: thunderAnimation,
+    },
     dotAnimation: {
         kupos: dotAnimation,
     },
@@ -73,8 +79,11 @@ const ANIMATION_MAP = {
     femaaleAnimation: {
         kupos: femaleAnimation,
     },
+    usersAnimation: {
+        kupos: usersAnimation,
+    },
 };
-function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t = (key) => key, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, showLoginModal, isLoggedIn, showLoginOption, }) {
+function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t = (key) => key, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, }) {
     var _a;
     const getAnimationIcon = (icon) => {
         var _a;
@@ -243,7 +252,11 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
         },
     ];
     const otherItems = items.filter((i) => i.key !== "pet" && i.key !== "flexible" && !!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 })) : (React.createElement("div", { className: `relative hover:z-[150] ${hasOfferText || hasDpEnabled ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
+    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 })) : isNewUi ? (React.createElement(FeatureServiceUi, { serviceItem: serviceItem, showTopLabel: showTopLabel, isSoldOut: isSoldOut, 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
+                ? null
+                : serviceItem.id), selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle })) : (React.createElement("div", { className: `relative hover:z-[150] ${hasOfferText || hasDpEnabled ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
             showTopLabel
             ? "mt-[24px]"

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

@@ -1,4 +1,4 @@
 import React from "react";
 import { MobileServiceItemProps } from "./mobileTypes";
-declare function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, }: MobileServiceItemProps): React.ReactElement;
+declare function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, }: MobileServiceItemProps): React.ReactElement;
 export default ServiceItemMobile;

package/dist/components/ServiceItem/ServiceItemMobile.js

@@ -5,6 +5,7 @@ import BottomAmenitiesMobile from "../../ui/mobileweb/BottomAmenitiesMobile";
 import DateTimeSectionMobile from "../../ui/mobileweb/DateTimeSectionMobile";
 import ExpandedDropdownMobile from "../../ui/mobileweb/ExpandedDropdownMobile";
 import ServiceBadgesMobile from "../../ui/mobileweb/ServiceBadgesMobile";
+import FeatureServiceUiMobile from "../../ui/FeaturServiceUiMobile/FeatureServiceUiMobile";
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
 const exceptions = [
     "gy",
@@ -17,7 +18,7 @@ const exceptions = [
     "blanco",
     "asiento_mascota",
 ];
-function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, }) {
+function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, }) {
     var _a, _b, _c, _d, _e, _f, _g;
     const isItemExpanded = serviceItem.id === isExpanded;
     const isPetSeat = (Object.keys(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.pet_seat_info) || []).length > 0;
@@ -87,7 +88,11 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
     if (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) {
         isConexion = true;
     }
-    return (React.createElement("div", { className: `relative  ${!serviceItem.offer_text || !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? "mb-[14px]" : showTopLabel || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "mb-[20px]" : "mb-[12px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
+    return (React.createElement(React.Fragment, null, isNewUi ? (React.createElement(FeatureServiceUiMobile, { serviceItem: serviceItem, showTopLabel: showTopLabel, colors: colors, isSoldOut: isSoldOut, 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
+                ? null
+                : serviceItem.id), selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle })) : (React.createElement("div", { className: `relative  ${!serviceItem.offer_text || !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? "mb-[14px]" : showTopLabel || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "mb-[20px]" : "mb-[12px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
             isConexion ||
             (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
             showTopLabel
@@ -108,7 +113,9 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                                 React.createElement("div", { className: "flex items-center" },
                                     React.createElement("img", { src: serviceItem.icons.rating, alt: "origin", className: `w-[12px] h-[12px] mr-[4px] object-contain   ${isSoldOut ? "grayscale" : ""}` }),
                                     React.createElement("span", { style: { lineHeight: "normal" } }, getServiceStars(serviceItem))),
-                                React.createElement("div", { className: "flex items-center cursor-pointer ", style: { color: isSoldOut ? "#bbb" : "text-[#464647]" } },
+                                React.createElement("div", { className: "flex items-center cursor-pointer ", style: {
+                                        color: isSoldOut ? "#bbb" : "text-[#464647]",
+                                    } },
                                     React.createElement("span", { className: "ml-[3px]  min-[420]:text-[13px] text-[12px] text-ellipsis overflow-hidden whitespace-nowrap max-w-[120px]" }, serviceItem.operator_details[2]))))) : null)),
                 React.createElement(DateTimeSectionMobile, { onBookButtonPress: onBookButtonPress, isCiva: isCiva, isSoldOut: isSoldOut, isLinatal: isLinatal, isPeru: isPeru, orignLabel: orignLabel, destinationLabel: destinationLabel, originIcon: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.origin, destinationIcon: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.destination, travelDate: serviceItem.travel_date, arrivalDate: serviceItem.arrival_date, depTime: serviceItem.dep_time, arrTime: serviceItem.arr_time, seatTypes: serviceItem.seat_types, seatPriceColor: colors.seatPriceColor, tooltipBgColor: colors.tooltipBgColor, currencySign: currencySign, availableSeats: serviceItem.available_seats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, showLastSeats: showLastSeats, discountSeatPriceColor: colors.discountSeatPriceColor }),
                 hasDiscount && (React.createElement("div", { className: "flex justify-end" }, isSoldOut ? (React.createElement("span", { className: "col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]" }, "Agotado")) : null)),
@@ -123,7 +130,9 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
             React.createElement(ServiceBadgesMobile, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, serviceItem: serviceItem, isConexion: isConexion })),
         ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)) &&
             !isSoldOut && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
-                background: isSoldOut ? offerGradientWithOpacity : offerGradient,
+                background: isSoldOut
+                    ? offerGradientWithOpacity
+                    : offerGradient,
                 // opacity: isSoldOut ? 0.5 : 1,
                 borderRadius: "0 0 14px 14px",
                 zIndex: -1,
@@ -131,8 +140,8 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
             React.createElement("div", { className: "flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]", style: { lineHeight: 1.6 } },
                 React.createElement("div", { className: "flex justify-between items-center" },
                     (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
-                        Object.keys((_f = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _f !== void 0 ? _f : {}).length ===
-                            0 &&
+                        Object.keys((_f = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _f !== void 0 ? _f : {})
+                            .length === 0 &&
                         ((_g = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _g !== void 0 ? _g : []).length === 0 ? (React.createElement("div", { className: "flex items-center gap-[6px]" },
                         React.createElement(LottiePlayer, { animationData: serviceItem.icons.starAnimation, width: "14px", height: "14px" }),
                         React.createElement("span", { className: "text-[#fff]" }, "M\u00E1s elegido"))) : (React.createElement("div", { className: `flex ${((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").length > 10 ? "items-start" : "items-center"}` },
@@ -180,6 +189,6 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
                     zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? -3 : undefined,
                     marginTop: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "-15px" : "-10px",
                 } },
-                React.createElement(ExpandedDropdownMobile, { serviceItem: serviceItem, isPeru: isPeru, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, isSoldOut: isSoldOut, isChangeTicket: serviceItem.is_change_ticket === true, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, femaleAnim: serviceItem.icons.femaleAnim, flexibleAnim: serviceItem.icons.flexibleAnim, renderIcon: renderIcon })))));
+                React.createElement(ExpandedDropdownMobile, { serviceItem: serviceItem, isPeru: isPeru, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, isSoldOut: isSoldOut, isChangeTicket: serviceItem.is_change_ticket === true, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, femaleAnim: serviceItem.icons.femaleAnim, flexibleAnim: serviceItem.icons.flexibleAnim, renderIcon: renderIcon })))))));
 }
 export default ServiceItemMobile;

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

@@ -124,6 +124,19 @@ export interface MobileServiceItemProps {
             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;
             cancelTicketIcon?: string;
             changeTicketIcon?: string;
             petFriendlyIcon?: string;
@@ -133,6 +146,7 @@ export interface MobileServiceItemProps {
         useLottieFor?: string[];
     };
     onBookButtonPress?: () => void;
+    onRemateUiButtonClick?: () => void;
     terminals?: any[];
     showDropdown?: boolean;
     setShowDropdown?: (value: boolean) => void;
@@ -187,4 +201,22 @@ export interface MobileServiceItemProps {
         label?: string;
         icon?: string;
     };
+    isFeatureDropDownExpand?: any;
+    setIsFeatureDropDownExpand?: (value: any) => void;
+    ticketQuantity?: number;
+    onIncreaseTicketQuantity?: (serviceItem: MobileServiceItemProps["serviceItem"]) => void;
+    onDecreaseTicketQuantity?: (serviceItem: MobileServiceItemProps["serviceItem"]) => void;
+    cityOrigin?: {
+        value: number;
+        label: string;
+    };
+    cityDestination?: {
+        value: number;
+        label: string;
+    };
+    isNewUi?: boolean;
+    selectedTimeSlot?: string;
+    onTimeSlotChange?: (slot: string) => void;
+    isTimeDropdownOpen?: string | number | null;
+    onTimeDropdownToggle?: (id?: string | number | null) => void;
 }

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

@@ -129,11 +129,23 @@ export interface ServiceItemProps {
             personIcon?: string;
             whiteFireIcon?: string;
             fireIcon?: string;
+            whiteOrigin?: string;
+            whiteDestination?: string;
+            userIcon?: string;
+            sheildIcon?: string;
+            busIcon?: string;
+            whiteDownArrow?: string;
+            empressaIcon?: string;
+            flexibleIcon?: string;
+            listoIcon?: string;
+            precioIcon?: string;
+            confirmarIcon?: string;
             [key: string]: string | Record<string, string | undefined> | undefined;
         };
         useLottieFor?: string[];
     };
     onBookButtonPress?: () => void;
+    onRemateUiButtonClick?: () => void;
     terminals?: any[];
     t?: (key: string) => string;
     serviceDetailsLoading?: boolean;
@@ -213,6 +225,11 @@ export interface ServiceItemProps {
     isAllinBus?: boolean;
     isExpand?: any;
     setIsExpand?: (value: any) => void;
+    isFeatureDropDownExpand?: any;
+    setIsFeatureDropDownExpand?: (value: any) => void;
+    ticketQuantity?: number;
+    onIncreaseTicketQuantity?: (serviceItem: ServiceItemProps["serviceItem"]) => void;
+    onDecreaseTicketQuantity?: (serviceItem: ServiceItemProps["serviceItem"]) => void;
     coachKey?: number;
     viewersConfig?: {
         min: number;
@@ -221,7 +238,12 @@ export interface ServiceItemProps {
         label?: string;
         icon?: string;
     };
+    isNewUi?: boolean;
     showLoginModal?: any;
     isLoggedIn?: any;
     showLoginOption?: boolean;
+    selectedTimeSlot?: string;
+    onTimeSlotChange?: (slot: string) => void;
+    isTimeDropdownOpen?: string | number | null;
+    onTimeDropdownToggle?: (id?: string | number | null) => void;
 }