kupos-ui-components-lib 9.9.7 → 9.9.8

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -27,6 +27,8 @@ 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";
@@ -37,6 +39,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 +76,9 @@ const ANIMATION_MAP: Record<string, Record<string, any>> = {
   bombAnimation: {
     kupos: bombAnimation,
   },
+  thunderAnimation: {
+    kupos: thunderAnimation,
+  },
   dotAnimation: {
     kupos: dotAnimation,
   },
@@ -80,6 +88,12 @@ const ANIMATION_MAP: Record<string, Record<string, any>> = {
   femaaleAnimation: {
     kupos: femaleAnimation,
   },
+  usersAnimation: {
+    kupos: usersAnimation,
+  },
+  flameAnimation: {
+    kupos: flameAnimation,
+  },
 };
 
 function ServiceItemPB({
@@ -113,28 +127,23 @@ function ServiceItemPB({
   setIsExpand,
   coachKey,
   viewersConfig,
+  isNewUi,
   showLoginModal,
   isLoggedIn,
   showLoginOption,
-  isTrain,
-  selectedSeatKey,
-  onSeatSelect,
-  onTrainButtonClick,
-  showSeatSelectionError,
-  onShowSeatSelectionError,
-  onClearSeatSelectionError,
+  isFeatureDropDownExpand,
+  setIsFeatureDropDownExpand,
+  ticketQuantity,
+  onIncreaseTicketQuantity,
+  onDecreaseTicketQuantity,
+  onRemateUiButtonClick,
+  selectedTimeSlot,
+  onTimeSlotChange,
+  isTimeDropdownOpen,
+  onTimeDropdownToggle,
+  wowDealData,
   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;
@@ -196,6 +205,7 @@ 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(
@@ -222,7 +232,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 || hasDpEnabled
+    (hasOfferText && isNewUiEnabled) || hasDpEnabled
       ? {
           borderColor: "transparent",
           borderStyle: "solid",
@@ -331,17 +341,6 @@ function ServiceItemPB({
       return;
     }
 
-    if (isTrain) {
-      if (!selectedSeatKey) {
-        onShowSeatSelectionError?.(serviceItem.id);
-        return;
-      }
-      if (onTrainButtonClick) {
-        onTrainButtonClick();
-        return;
-      }
-    }
-
     onBookButtonPress();
   };
 
@@ -443,7 +442,45 @@ function ServiceItemPB({
           isPeru={isPeru}
           siteType={siteType}
           isAllinBus={isAllinBus}
+          viewersConfig={viewersConfig}
+          isLoggedIn={isLoggedIn}
+          showLoginModal={showLoginModal}
+          isExpand={isExpand}
+          setIsExpand={setIsExpand}
+          coachKey={coachKey}
           isFlores={isFlores}
+          isNewUiEnabled={isNewUiEnabled}
+          showLoginOption={showLoginOption}
+        />
+      ) : 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}
         />
       ) : (
         <div
@@ -466,12 +503,14 @@ 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 || hasDpEnabled) && !isSoldOut
+              (hasOfferText && isNewUiEnabled && !isSoldOut) || hasDpEnabled
                 ? "z-[3] rounded-[18px]"
                 : "rounded-[10px] border border-[#ccc]"
             }`}
@@ -555,10 +594,6 @@ function ServiceItemPB({
                     isPeru={isPeru}
                     renderIcon={renderIcon}
                     discountSeatPriceColor={colors.discountSeatPriceColor}
-                    isTrain={isTrain}
-                    selectedSeatKey={selectedSeatKey}
-                    onSeatSelect={handleSeatSelect}
-                    topLabelColor={colors.topLabelColor}
                   />
                 </div>
 
@@ -574,18 +609,6 @@ 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 &&
@@ -632,7 +655,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 ? "" : "-6px",
+                marginTop: isItemExpanded ? "" : "-10px",
               }}
             >
               <div
@@ -640,9 +663,7 @@ function ServiceItemPB({
                   overflow: "hidden",
                   minHeight: 0,
                   marginTop:
-                    isItemExpanded && !(hasDpEnabled || serviceItem?.offer_text)
-                      ? "-10px"
-                      : "",
+                    hasDpEnabled || serviceItem?.offer_text ? "" : "-10px",
                   ...(hasOfferText || hasDpEnabled
                     ? {
                         borderLeft: isSoldOut ? "" : "3px solid #ff5964",
@@ -663,7 +684,6 @@ function ServiceItemPB({
                   ladiesBookedSeats={serviceItem.ladies_booked_seats}
                   isDpEnabled={serviceItem.is_dp_enabled}
                   renderIcon={renderIcon}
-                  operatorLabel={operatorLabel}
                 />
               </div>
             </div>