kupos-ui-components-lib 9.8.0 → 9.8.2

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -27,8 +27,6 @@ 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 flameAnimation from "../../assets/images/anims/service_list/flame_anim.json";
 
 import RatingBlock from "../../ui/RatingBlock";
 import DurationBlock from "../../ui/DurationBlock";
@@ -39,9 +37,6 @@ 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"];
@@ -76,9 +71,6 @@ const ANIMATION_MAP: Record<string, Record<string, any>> = {
   bombAnimation: {
     kupos: bombAnimation,
   },
-  thunderAnimation: {
-    kupos: thunderAnimation,
-  },
   dotAnimation: {
     kupos: dotAnimation,
   },
@@ -88,12 +80,6 @@ const ANIMATION_MAP: Record<string, Record<string, any>> = {
   femaaleAnimation: {
     kupos: femaleAnimation,
   },
-  usersAnimation: {
-    kupos: usersAnimation,
-  },
-  flameAnimation: {
-    kupos: flameAnimation,
-  },
 };
 
 function ServiceItemPB({
@@ -127,21 +113,21 @@ function ServiceItemPB({
   setIsExpand,
   coachKey,
   viewersConfig,
-  isNewUi,
   showLoginModal,
   isLoggedIn,
   showLoginOption,
-  isFeatureDropDownExpand,
-  setIsFeatureDropDownExpand,
-  ticketQuantity,
-  onIncreaseTicketQuantity,
-  onDecreaseTicketQuantity,
-  onRemateUiButtonClick,
-  selectedTimeSlot,
-  onTimeSlotChange,
-  isTimeDropdownOpen,
-  onTimeDropdownToggle,
+  isTrain,
+  selectedSeatKey,
+  onSeatSelect,
+  onTrainButtonClick,
+  showSeatSelectionError,
+  onShowSeatSelectionError,
+  onClearSeatSelectionError,
 }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
+  const handleSeatSelect = (key: any, price: number) => {
+    onClearSeatSelectionError?.();
+    onSeatSelect?.(key, price);
+  };
   const getAnimationIcon = (icon: string) => {
     const animation = ANIMATION_MAP[icon];
     if (!animation) return null;
@@ -338,6 +324,17 @@ function ServiceItemPB({
       return;
     }
 
+    if (isTrain) {
+      if (!selectedSeatKey) {
+        onShowSeatSelectionError?.(serviceItem.id);
+        return;
+      }
+      if (onTrainButtonClick) {
+        onTrainButtonClick();
+        return;
+      }
+    }
+
     onBookButtonPress();
   };
 
@@ -440,35 +437,6 @@ function ServiceItemPB({
           siteType={siteType}
           isAllinBus={isAllinBus}
         />
-      ) : isNewUi ? (
-        <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}
-        />
       ) : (
         <div
           className={`relative hover:z-[150] ${hasOfferText || hasDpEnabled ? "mb-[55px]" : "mb-[10px]"} ${
@@ -579,6 +547,10 @@ function ServiceItemPB({
                     isPeru={isPeru}
                     renderIcon={renderIcon}
                     discountSeatPriceColor={colors.discountSeatPriceColor}
+                    isTrain={isTrain}
+                    selectedSeatKey={selectedSeatKey}
+                    onSeatSelect={handleSeatSelect}
+                    topLabelColor={colors.topLabelColor}
                   />
                 </div>
 
@@ -594,6 +566,18 @@ function ServiceItemPB({
                     soldOutIcon={renderIcon("soldOutIcon", "14px")}
                     onClick={checkMidnight}
                   />
+                  {showSeatSelectionError === serviceItem.id && isTrain && (
+                    <div className="flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]">
+                      <div
+                        className="text-[9px] text-center whitespace-nowrap"
+                        style={{
+                          color: colors.seatPriceColor,
+                        }}
+                      >
+                        Selecciona el tipo de servicio
+                      </div>
+                    </div>
+                  )}
                   {showLastSeats ? (
                     <div className="flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]">
                       {serviceItem?.available_seats < 10 &&
@@ -640,7 +624,6 @@ function ServiceItemPB({
                   "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
                 position: "relative",
                 zIndex: hasOfferText || hasDpEnabled ? 0 : -1,
-                marginTop: isItemExpanded ? "" : "-10px",
               }}
             >
               <div