kupos-ui-components-lib 9.9.2 → 9.9.4

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,28 @@ 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,
+  operatorLabel,
 }: 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;
@@ -204,7 +196,6 @@ function ServiceItemPB({
   const isItemExpanded = serviceItem.id === isExpand || isExpand === true;
   const grayscaleClass = isSoldOut ? "grayscale" : "";
   const hasOfferText = Boolean(serviceItem?.offer_text);
-  const isNewUiEnabled = serviceItem?.discounts?.[0]?.new_ui_enabled === true;
 
   const seats = removeDuplicateSeats
     ? serviceItem.seat_types?.filter(
@@ -231,7 +222,7 @@ function ServiceItemPB({
   const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
   const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
   const serviceCardStyle: React.CSSProperties =
-    (hasOfferText && isNewUiEnabled) || hasDpEnabled
+    hasOfferText || hasDpEnabled
       ? {
           borderColor: "transparent",
           borderStyle: "solid",
@@ -340,6 +331,17 @@ function ServiceItemPB({
       return;
     }
 
+    if (isTrain) {
+      if (!selectedSeatKey) {
+        onShowSeatSelectionError?.(serviceItem.id);
+        return;
+      }
+      if (onTrainButtonClick) {
+        onTrainButtonClick();
+        return;
+      }
+    }
+
     onBookButtonPress();
   };
 
@@ -441,37 +443,7 @@ function ServiceItemPB({
           isPeru={isPeru}
           siteType={siteType}
           isAllinBus={isAllinBus}
-          isNewUiEnabled={isNewUiEnabled}
-        />
-      ) : 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
@@ -494,15 +466,12 @@ function ServiceItemPB({
               viewersConfig={viewersConfig}
               getAnimationIcon={getAnimationIcon}
               showLoginOption={showLoginOption}
-              isNewUiEnabled={isNewUiEnabled}
-              colors={colors}
             />
           )}
           <div
             id={`service-card-${serviceItem.id}`}
             className={`bg-white mx-auto relative ${
-              (hasOfferText && isNewUiEnabled) && !isSoldOut  ||
-              hasDpEnabled
+              (hasOfferText || hasDpEnabled) && !isSoldOut
                 ? "z-[3] rounded-[18px]"
                 : "rounded-[10px] border border-[#ccc]"
             }`}
@@ -586,6 +555,10 @@ function ServiceItemPB({
                     isPeru={isPeru}
                     renderIcon={renderIcon}
                     discountSeatPriceColor={colors.discountSeatPriceColor}
+                    isTrain={isTrain}
+                    selectedSeatKey={selectedSeatKey}
+                    onSeatSelect={handleSeatSelect}
+                    topLabelColor={colors.topLabelColor}
                   />
                 </div>
 
@@ -601,6 +574,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 &&
@@ -647,7 +632,7 @@ 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",
+                // marginTop: isItemExpanded ? "" : "-6px",
               }}
             >
               <div
@@ -655,7 +640,9 @@ function ServiceItemPB({
                   overflow: "hidden",
                   minHeight: 0,
                   marginTop:
-                    hasDpEnabled || serviceItem?.offer_text ? "" : "-10px",
+                    isItemExpanded && !(hasDpEnabled || serviceItem?.offer_text)
+                      ? "-10px"
+                      : "",
                   ...(hasOfferText || hasDpEnabled
                     ? {
                         borderLeft: isSoldOut ? "" : "3px solid #ff5964",
@@ -676,6 +663,7 @@ function ServiceItemPB({
                   ladiesBookedSeats={serviceItem.ladies_booked_seats}
                   isDpEnabled={serviceItem.is_dp_enabled}
                   renderIcon={renderIcon}
+                  operatorLabel={operatorLabel}
                 />
               </div>
             </div>