kupos-ui-components-lib 9.8.4 → 9.8.6

package/src/components/ServiceItem/PeruServiceItemDesktop.tsx

@@ -67,6 +67,7 @@ function PeruServiceItemDesktop({
   isPeru,
   siteType,
   isAllinBus,
+  isFlores,
   t = (key: string) => key,
 }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
   const animationMap: Record<string, Record<string, any>> = {
@@ -148,9 +149,8 @@ function PeruServiceItemDesktop({
         style={{
           filter: color === "white" ? "brightness(0) invert(1)" : "",
         }}
-        className={`object-contain ${
-          moreAnemities ? "w-[16px] h-[16px]" : "w-[16px] h-[16px]"
-        }`}
+        className={`object-contain ${moreAnemities ? "w-[16px] h-[16px]" : "w-[16px] h-[16px]"
+          }`}
       />
     );
   };
@@ -261,9 +261,8 @@ function PeruServiceItemDesktop({
         SEAT_EXCEPTIONS.includes(val.label) ? null : (
           <span
             key={key}
-            className={`flex items-center justify-between  text-[13.33px] ${
-              isSoldOut ? "text-[#c0c0c0]" : ""
-            }`}
+            className={`flex items-center justify-between  text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""
+              }`}
           >
             <div>
               <img
@@ -288,9 +287,8 @@ function PeruServiceItemDesktop({
       SEAT_EXCEPTIONS.includes(val.label) ? null : (
         <span
           key={key}
-          className={`flex items-center justify-between  text-[13.33px] ${
-            isSoldOut ? "text-[#c0c0c0]" : ""
-          }`}
+          className={`flex items-center justify-between  text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""
+            }`}
         >
           <div>
             <img
@@ -538,15 +536,13 @@ function PeruServiceItemDesktop({
 
   return (
     <div
-      className={`relative ${
-        serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"
-      } ${
-        serviceItem?.is_direct_trip ||
-        serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
-        showTopLabel
+      className={`relative ${serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"
+        } ${serviceItem?.is_direct_trip ||
+          serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
+          showTopLabel
           ? "mt-[24px]"
           : "mt-[20px]"
-      }	`}
+        }	`}
     >
       <div
         className={"bg-white rounded-[20px] shadow-service mx-auto relative"}
@@ -587,9 +583,8 @@ function PeruServiceItemDesktop({
                 <img
                   src={serviceItem.operator_details[0]}
                   alt="service logo"
-                  className={` h-auto object-contain ${
-                    isSoldOut ? "grayscale" : ""
-                  }`}
+                  className={`h-auto object-contain ${isFlores ? "w-[80%]" : "w-full"
+                    } ${isSoldOut ? "grayscale" : ""}`}
                 />
               </div>
               {isCiva ? (
@@ -601,9 +596,8 @@ function PeruServiceItemDesktop({
 
             {/* DATE AND TIME - Grid Layout */}
             <div
-              className={`min-h-[2.5rem] grid grid-cols-[0.8fr_auto_26%_1fr] gap-x-4 items-center text-[13.33px] ${
-                isSoldOut ? "text-[#c0c0c0]" : ""
-              }`}
+              className={`min-h-[2.5rem] grid grid-cols-[0.8fr_auto_26%_1fr] gap-x-4 items-center text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""
+                }`}
               style={{
                 gridTemplateRows: "1fr",
               }}
@@ -620,9 +614,8 @@ function PeruServiceItemDesktop({
                     <img
                       src={serviceItem.icons?.origin}
                       alt="origin"
-                      className={`w-[18px] h-auto mr-[8px] ${
-                        isSoldOut ? "grayscale" : ""
-                      }`}
+                      className={`w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""
+                        }`}
                     />
                   </div>
                 )}
@@ -637,9 +630,8 @@ function PeruServiceItemDesktop({
                     <div className="h-[20px] flex items-center">
                       <img
                         src={serviceItem.icons?.destination}
-                        className={`w-[18px] h-auto mr-[8px] ${
-                          isSoldOut ? "grayscale" : ""
-                        }`}
+                        className={`w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""
+                          }`}
                         style={{ opacity: isSoldOut ? 0.5 : 1 }}
                       />
                     </div>
@@ -744,9 +736,8 @@ function PeruServiceItemDesktop({
             {/* SEATS */}
             <div className="content-center">
               <div
-                className={`relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.5rem] ${
-                  getNumberOfSeats() < 3 ? "" : ""
-                }`}
+                className={`relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.5rem] ${getNumberOfSeats() < 3 ? "" : ""
+                  }`}
                 style={
                   getNumberOfSeats() < 2
                     ? { alignItems: "center" }
@@ -792,9 +783,8 @@ function PeruServiceItemDesktop({
               <button
                 onClick={() => (!isSoldOut ? checkMidnight() : null)}
                 disabled={serviceDetailsLoading}
-                className={`w-full  ${
-                  serviceDetailsLoading || isSoldOut ? "py-[12px]" : "py-[12px]"
-                } text-[13.33px] font-bold text-white rounded-[10px] border-none px-[20px] flex items-center justify-center`}
+                className={`w-full  ${serviceDetailsLoading || isSoldOut ? "py-[12px]" : "py-[12px]"
+                  } text-[13.33px] font-bold text-white rounded-[10px] border-none px-[20px] flex items-center justify-center`}
                 style={{
                   backgroundColor:
                     serviceDetailsLoading || isSoldOut

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,22 +113,27 @@ function ServiceItemPB({
   setIsExpand,
   coachKey,
   viewersConfig,
-  isNewUi,
   showLoginModal,
   isLoggedIn,
   showLoginOption,
-  isFeatureDropDownExpand,
-  setIsFeatureDropDownExpand,
-  ticketQuantity,
-  onIncreaseTicketQuantity,
-  onDecreaseTicketQuantity,
-  onRemateUiButtonClick,
-  selectedTimeSlot,
-  onTimeSlotChange,
-  isTimeDropdownOpen,
-  onTimeDropdownToggle,
-  wowDealData,
+  isTrain,
+  selectedSeatKey,
+  onSeatSelect,
+  onTrainButtonClick,
+  showSeatSelectionError,
+  onShowSeatSelectionError,
+  onClearSeatSelectionError,
+  isFlores,
 }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
+  const handleSeatSelect = (
+    key: any,
+    price: number,
+    seatKey: string,
+    apiSeatType?: string,
+  ) => {
+    onClearSeatSelectionError?.();
+    onSeatSelect?.(key, price, seatKey, apiSeatType);
+  };
   const getAnimationIcon = (icon: string) => {
     const animation = ANIMATION_MAP[icon];
     if (!animation) return null;
@@ -339,6 +330,17 @@ function ServiceItemPB({
       return;
     }
 
+    if (isTrain) {
+      if (!selectedSeatKey) {
+        onShowSeatSelectionError?.(serviceItem.id);
+        return;
+      }
+      if (onTrainButtonClick) {
+        onTrainButtonClick();
+        return;
+      }
+    }
+
     onBookButtonPress();
   };
 
@@ -440,36 +442,7 @@ 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}
-          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}
-          wowDealData={wowDealData}
+          isFlores={isFlores}
         />
       ) : (
         <div
@@ -581,6 +554,10 @@ function ServiceItemPB({
                     isPeru={isPeru}
                     renderIcon={renderIcon}
                     discountSeatPriceColor={colors.discountSeatPriceColor}
+                    isTrain={isTrain}
+                    selectedSeatKey={selectedSeatKey}
+                    onSeatSelect={handleSeatSelect}
+                    topLabelColor={colors.topLabelColor}
                   />
                 </div>
 
@@ -596,6 +573,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 &&
@@ -642,7 +631,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