kupos-ui-components-lib 9.6.10 → 9.7.0

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -37,6 +37,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 +74,9 @@ const ANIMATION_MAP: Record<string, Record<string, any>> = {
   bombAnimation: {
     kupos: bombAnimation,
   },
+  thunderAnimation: {
+    kupos: thunderAnimation,
+  },
   dotAnimation: {
     kupos: dotAnimation,
   },
@@ -113,6 +119,7 @@ function ServiceItemPB({
   setIsExpand,
   coachKey,
   viewersConfig,
+  isNewUi,
   showLoginModal,
   isLoggedIn,
   showLoginOption,
@@ -414,12 +421,18 @@ function ServiceItemPB({
           isPeru={isPeru}
           siteType={siteType}
           isAllinBus={isAllinBus}
+        />
+      ) : isNewUi ? (
+        <FeatureServiceUi
+          serviceItem={serviceItem}
+          showTopLabel={showTopLabel}
+          colors={colors}
+          isSoldOut={isSoldOut}
+          getAnimationIcon={getAnimationIcon}
+          cityOrigin={cityOrigin}
+          cityDestination={cityDestination}
+          renderIcon={renderIcon}
           viewersConfig={viewersConfig}
-          isLoggedIn={isLoggedIn}
-          showLoginModal={showLoginModal}
-          isExpand={isExpand}
-          setIsExpand={setIsExpand}
-          coachKey={coachKey}
         />
       ) : (
         <div
@@ -619,6 +632,7 @@ function ServiceItemPB({
                   isSoldOut={isSoldOut}
                   ladiesBookedSeats={serviceItem.ladies_booked_seats}
                   isDpEnabled={serviceItem.is_dp_enabled}
+                  renderIcon={renderIcon}
                 />
               </div>
             </div>

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -458,6 +458,7 @@ function ServiceItemMobile({
             isDpEnabled={serviceItem.is_dp_enabled}
             femaleAnim={serviceItem.icons.femaleAnim}
             flexibleAnim={serviceItem.icons.flexibleAnim}
+            renderIcon={renderIcon}
           />
         </div>
       </div>

package/src/components/ServiceItem/mobileTypes.ts

@@ -127,6 +127,7 @@ export interface MobileServiceItemProps {
       directoIcon?: string;
       whiteFireIcon?: string
       femaleAnim?:string
+       cancelTicketIcon?: string;
       [key: string]: string | Record<string, string | undefined> | undefined;
     };
     useLottieFor?: string[];

package/src/components/ServiceItem/types.ts

@@ -132,6 +132,13 @@ export interface ServiceItemProps {
       whiteFireIcon?: string
       fireIcon?: string
 
+      whiteOrigin?: string,
+      whiteDestination?: string,
+      userIcon?: string,
+      sheildIcon?: string,
+      busIcon?: string,
+      whiteDownArrow?: string,
+
       [key: string]: string | Record<string, string | undefined> | undefined;
     };
     useLottieFor?: string[];
@@ -223,6 +230,7 @@ export interface ServiceItemProps {
     label?: string; // e.g. "personas están viendo este viaje"
     icon?: string; // optional icon URL
   };
+  isNewUi?: boolean
   showLoginModal?: any
   isLoggedIn?: any
   showLoginOption?: boolean

package/src/types.ts

@@ -115,6 +115,7 @@ export interface ServiceItemProps {
       frazaIcon?: string;
       specialDeparture?: string;
       fireIcon?: string;
+      cancelTicketIcon?: string;
       [key: string]: string | Record<string, string | undefined> | undefined;
     };
     useLottieFor?: string[];

package/src/ui/ExpendedDropDown/ExpandedDropdown.tsx

@@ -15,6 +15,7 @@ interface ExpandedDropdownProps {
   isSoldOut?: boolean;
   ladiesBookedSeats?: string;
   isDpEnabled?: boolean;
+  renderIcon?: any;
 }
 
 function ExpandedDropdown({
@@ -26,6 +27,7 @@ function ExpandedDropdown({
   isSoldOut,
   ladiesBookedSeats,
   isDpEnabled,
+  renderIcon,
 }: ExpandedDropdownProps): React.ReactElement {
   const hasPetInfo =
     serviceItem.pet_seat_info &&
@@ -65,7 +67,14 @@ function ExpandedDropdown({
           </div>
         ) : (
           <div className="flex gap-[8px] text-[13.33px]">
-            <span style={{ marginTop: "2px" }}>•</span>
+            <span style={{ marginTop: "2px" }}>
+              {" "}
+              <LottiePlayer
+                animationData={getAnimationIcon("flexibleIcon")}
+                width="20px"
+                height="20px"
+              />
+            </span>
             <span>
               <span>
                 <span className="bold-text">Pasaje flexible:</span> Esta empresa
@@ -90,7 +99,7 @@ function ExpandedDropdown({
         {ladiesBookedSeats &&
           String(ladiesBookedSeats).trim() !== "" &&
           isDpEnabled === true && (
-            <div className="flex gap-[6px]">
+            <div className="flex gap-[6px] items-center">
               <span style={{ marginTop: "2px" }}>
                 {" "}
                 <LottiePlayer
@@ -107,7 +116,7 @@ function ExpandedDropdown({
           )}
 
         <div className="flex gap-[8px] text-[13.33px]">
-          <span style={{ marginTop: "2px" }}>•</span>
+          <span>{renderIcon("cancelTicketIcon", "14px")}</span>
           <span>
             <span className="bold-text">Políticas de anulación:</span> Tu pasaje
             puede ser anulado de forma online