kupos-ui-components-lib 9.7.8 → 9.7.9

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -27,6 +27,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";
@@ -37,6 +38,9 @@ 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"];
@@ -71,6 +75,9 @@ const ANIMATION_MAP: Record<string, Record<string, any>> = {
   bombAnimation: {
     kupos: bombAnimation,
   },
+  thunderAnimation: {
+    kupos: thunderAnimation,
+  },
   dotAnimation: {
     kupos: dotAnimation,
   },
@@ -80,6 +87,9 @@ const ANIMATION_MAP: Record<string, Record<string, any>> = {
   femaaleAnimation: {
     kupos: femaleAnimation,
   },
+  usersAnimation: {
+    kupos: usersAnimation,
+  },
 };
 
 function ServiceItemPB({
@@ -113,9 +123,20 @@ function ServiceItemPB({
   setIsExpand,
   coachKey,
   viewersConfig,
+  isNewUi,
   showLoginModal,
   isLoggedIn,
   showLoginOption,
+  isFeatureDropDownExpand,
+  setIsFeatureDropDownExpand,
+  ticketQuantity,
+  onIncreaseTicketQuantity,
+  onDecreaseTicketQuantity,
+  onRemateUiButtonClick,
+  selectedTimeSlot,
+  onTimeSlotChange,
+  isTimeDropdownOpen,
+  onTimeDropdownToggle,
 }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
   const getAnimationIcon = (icon: string) => {
     const animation = ANIMATION_MAP[icon];
@@ -414,12 +435,35 @@ function ServiceItemPB({
           isPeru={isPeru}
           siteType={siteType}
           isAllinBus={isAllinBus}
+        />
+      ) : isNewUi ? (
+        <FeatureServiceUi
+          serviceItem={serviceItem}
+          showTopLabel={showTopLabel}
+          isSoldOut={isSoldOut}
+          getAnimationIcon={getAnimationIcon}
+          cityOrigin={cityOrigin}
+          cityDestination={cityDestination}
+          renderIcon={renderIcon}
           viewersConfig={viewersConfig}
-          isLoggedIn={isLoggedIn}
-          showLoginModal={showLoginModal}
-          isExpand={isExpand}
-          setIsExpand={setIsExpand}
-          coachKey={coachKey}
+          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}
         />
       ) : (
         <div