kupos-ui-components-lib 9.9.1 → 9.9.2

package/src/components/ServiceItem/PeruServiceItemDesktop.tsx

@@ -67,7 +67,7 @@ function PeruServiceItemDesktop({
   isPeru,
   siteType,
   isAllinBus,
-  isFlores,
+  isNewUiEnabled,
   t = (key: string) => key,
 }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
   const animationMap: Record<string, Record<string, any>> = {
@@ -149,8 +149,9 @@ 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,8 +262,9 @@ 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
@@ -287,8 +289,9 @@ 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
@@ -536,13 +539,15 @@ 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"}
@@ -583,8 +588,9 @@ function PeruServiceItemDesktop({
                 <img
                   src={serviceItem.operator_details[0]}
                   alt="service logo"
-                  className={`h-auto object-contain ${isFlores ? "w-[80%]" : "w-full"
-                    } ${isSoldOut ? "grayscale" : ""}`}
+                  className={` h-auto object-contain ${
+                    isSoldOut ? "grayscale" : ""
+                  }`}
                 />
               </div>
               {isCiva ? (
@@ -596,8 +602,9 @@ 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",
               }}
@@ -614,8 +621,9 @@ 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>
                 )}
@@ -630,8 +638,9 @@ 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>
@@ -736,8 +745,9 @@ 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" }
@@ -783,8 +793,9 @@ 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,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,22 @@ function ServiceItemPB({
   setIsExpand,
   coachKey,
   viewersConfig,
+  isNewUi,
   showLoginModal,
   isLoggedIn,
   showLoginOption,
-  isTrain,
-  selectedSeatKey,
-  onSeatSelect,
-  onTrainButtonClick,
-  showSeatSelectionError,
-  onShowSeatSelectionError,
-  onClearSeatSelectionError,
-  isFlores,
-  operatorLabel,
+  isFeatureDropDownExpand,
+  setIsFeatureDropDownExpand,
+  ticketQuantity,
+  onIncreaseTicketQuantity,
+  onDecreaseTicketQuantity,
+  onRemateUiButtonClick,
+  selectedTimeSlot,
+  onTimeSlotChange,
+  isTimeDropdownOpen,
+  onTimeDropdownToggle,
+  wowDealData,
 }: 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 +204,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 +231,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 +340,6 @@ function ServiceItemPB({
       return;
     }
 
-    if (isTrain) {
-      if (!selectedSeatKey) {
-        onShowSeatSelectionError?.(serviceItem.id);
-        return;
-      }
-      if (onTrainButtonClick) {
-        onTrainButtonClick();
-        return;
-      }
-    }
-
     onBookButtonPress();
   };
 
@@ -443,7 +441,37 @@ function ServiceItemPB({
           isPeru={isPeru}
           siteType={siteType}
           isAllinBus={isAllinBus}
-          isFlores={isFlores}
+          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}
         />
       ) : (
         <div
@@ -466,12 +494,15 @@ 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 +586,6 @@ function ServiceItemPB({
                     isPeru={isPeru}
                     renderIcon={renderIcon}
                     discountSeatPriceColor={colors.discountSeatPriceColor}
-                    isTrain={isTrain}
-                    selectedSeatKey={selectedSeatKey}
-                    onSeatSelect={handleSeatSelect}
-                    topLabelColor={colors.topLabelColor}
                   />
                 </div>
 
@@ -574,18 +601,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 +647,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 +655,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 +676,6 @@ function ServiceItemPB({
                   ladiesBookedSeats={serviceItem.ladies_booked_seats}
                   isDpEnabled={serviceItem.is_dp_enabled}
                   renderIcon={renderIcon}
-                  operatorLabel={operatorLabel}
                 />
               </div>
             </div>