kupos-ui-components-lib 9.9.2 → 9.9.3

package/dist/utils/CommonService.d.ts

@@ -14,9 +14,6 @@ declare const commonService: {
         discount_type?: string;
         discount_value?: number;
         max_discount?: number;
-        discounts?: Array<{
-            new_ui_enabled?: boolean;
-        }>;
     }) => {
         originalPrice: number;
         discountedPrice: number;

package/dist/utils/CommonService.js

@@ -275,7 +275,6 @@ const commonService = {
         return label.toLowerCase();
     },
     calculateDiscountedPrice: (originalPrice, serviceItem) => {
-        var _a;
         const price = typeof originalPrice === "string"
             ? parseFloat(originalPrice)
             : originalPrice;
@@ -283,12 +282,6 @@ const commonService = {
             return { originalPrice: price, discountedPrice: price };
         }
         const { discount_type, discount_value, max_discount } = serviceItem;
-        // Check if there's a discount with new_ui_enabled = true
-        const newUiEnabled = (_a = serviceItem.discounts) === null || _a === void 0 ? void 0 : _a.some((d) => d.new_ui_enabled === true);
-        // Only apply discount if new_ui_enabled is true OR if regular discount exists
-        if (!newUiEnabled && (!discount_type || discount_value == null)) {
-            return { originalPrice: price, discountedPrice: price };
-        }
         const fixedDiscount = discount_type === "fixed" && discount_value != null ? discount_value : 0;
         const percentageDiscount = discount_type === "percentage" && discount_value != null
             ? (price * discount_value) / 100
@@ -303,14 +296,10 @@ const commonService = {
     startViewerCount: (node, viewersConfig) => {
         if (!node || !viewersConfig)
             return;
-        const { min, max, interval = 5000 } = viewersConfig;
-        const configKey = `${min}-${max}-${interval}`;
-        if (node.dataset.viewerId && node.dataset.viewerConfig === configKey) {
-            return;
-        }
         const prevId = node.dataset.viewerId;
         if (prevId)
             clearInterval(Number(prevId));
+        const { min, max, interval = 5000 } = viewersConfig;
         const clamp = (v) => Math.min(max, Math.max(min, v));
         const initialValue = Math.floor(Math.random() * (max - min + 1)) + min;
         node.textContent = String(initialValue);
@@ -321,7 +310,6 @@ const commonService = {
             node.textContent = String(clamp(Math.round(next)));
         }, interval);
         node.dataset.viewerId = String(id);
-        node.dataset.viewerConfig = configKey;
     },
     startCountdown: (node, countdownSeconds = 599) => {
         if (!node)
@@ -351,10 +339,6 @@ const commonService = {
     startComprandoCount: (node, min = 4, max = 16) => {
         if (!node)
             return;
-        const configKey = `${min}-${max}`;
-        if (node.dataset.comprandoId && node.dataset.comprandoConfig === configKey) {
-            return;
-        }
         const prevId = node.dataset.comprandoId;
         if (prevId)
             clearInterval(Number(prevId));
@@ -371,7 +355,6 @@ const commonService = {
             node.textContent = String(next);
         }, 5000); // Update every 5 seconds
         node.dataset.comprandoId = String(id);
-        node.dataset.comprandoConfig = configKey;
     },
 };
 export default commonService;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kupos-ui-components-lib",
-  "version": "9.9.2",
+  "version": "9.9.3",
   "description": "A reusable UI components package",
   "publishConfig": {
     "access": "public"

package/src/KuposUIComponent.tsx

@@ -32,9 +32,6 @@ interface KuposUIComponentProps {
   orignLabel?: string;
   destinationLabel?: string;
   t?: (key: string) => string;
-  ticketQuantity?: number;
-  onIncreaseTicketQuantity?: (serviceItem: any) => void;
-  onDecreaseTicketQuantity?: (serviceItem: any) => void;
 
   // New ServiceItem props
   id?: string;

package/src/components/ServiceItem/PeruServiceItemDesktop.tsx

@@ -67,7 +67,7 @@ function PeruServiceItemDesktop({
   isPeru,
   siteType,
   isAllinBus,
-  isNewUiEnabled,
+  isFlores,
   t = (key: string) => key,
 }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
   const animationMap: Record<string, Record<string, any>> = {
@@ -149,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]"
+          }`}
       />
     );
   };
@@ -262,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
@@ -289,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
@@ -539,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"}
@@ -588,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 ? (
@@ -602,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",
               }}
@@ -621,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>
                 )}
@@ -638,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>
@@ -745,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" }
@@ -793,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,21 +113,11 @@ function ServiceItemPB({
   setIsExpand,
   coachKey,
   viewersConfig,
-  isNewUi,
   showLoginModal,
   isLoggedIn,
   showLoginOption,
-  isFeatureDropDownExpand,
-  setIsFeatureDropDownExpand,
-  ticketQuantity,
-  onIncreaseTicketQuantity,
-  onDecreaseTicketQuantity,
-  onRemateUiButtonClick,
-  selectedTimeSlot,
-  onTimeSlotChange,
-  isTimeDropdownOpen,
-  onTimeDropdownToggle,
-  wowDealData,
+  isFlores,
+  operatorLabel,
 }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
   const getAnimationIcon = (icon: string) => {
     const animation = ANIMATION_MAP[icon];
@@ -204,7 +180,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 +206,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",
@@ -441,37 +416,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 +439,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]"
             }`}
@@ -647,7 +589,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 +597,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 +620,7 @@ function ServiceItemPB({
                   ladiesBookedSeats={serviceItem.ladies_booked_seats}
                   isDpEnabled={serviceItem.is_dp_enabled}
                   renderIcon={renderIcon}
+                  operatorLabel={operatorLabel}
                 />
               </div>
             </div>