kupos-ui-components-lib 10.4.9 → 10.4.11

package/src/components/ServiceItem/PeruServiceItemMobile.tsx

@@ -0,0 +1,601 @@
+import React from "react";
+import LottiePlayer from "../../assets/LottiePlayer";
+import DateService from "../../utils/DateService";
+import { MobileServiceItemProps } from "./mobileTypes";
+import commonService from "../../utils/CommonService";
+import TopAmenitieMobile from "../../ui/mobileweb/TopAmenitieMobile";
+import BottomAmenitiesMobile from "../../ui/mobileweb/BottomAmenitiesMobile";
+import SeatSectionMobile from "../../ui/mobileweb/SeatSectionMobile";
+import DateTimeSectionMobile from "../../ui/mobileweb/DateTimeSectionMobile";
+import ExpandedDropdownMobile from "../../ui/mobileweb/ExpandedDropdownMobile";
+import ServiceBadgesMobile from "../../ui/mobileweb/ServiceBadgesMobile";
+import FeatureServiceUiMobile from "../../ui/FeaturServiceUiMobile/FeatureServiceUiMobile";
+
+const SEAT_EXCEPTIONS = ["Asiento mascota"];
+
+const exceptions = [
+  "gy",
+  ".gy",
+  "GY",
+  ".GY",
+  "Gy",
+  ".Gy",
+  "BLANCO",
+  "blanco",
+  "asiento_mascota",
+];
+
+interface PeruServiceItemMobileProps extends Omit<MobileServiceItemProps, 'isNewUi'> {
+  isNewUiEnabled?: boolean;
+}
+
+function PeruServiceItemMobile({
+  serviceItem,
+  onBookButtonPress,
+  colors,
+  busStage,
+  orignLabel,
+  destinationLabel,
+  amenitiesData,
+  setShowDropdown,
+  showDropdown,
+  isExpanded,
+  setIsExpanded,
+  setAmenetiesAtomValue,
+  isCiva,
+  currencySign,
+  isPeru,
+  showRating,
+  showLastSeats,
+  removeDuplicateSeats,
+  isLinatal,
+  viewersConfig,
+  operatorLabel,
+  isTrain,
+  isFeatureDropDownExpand,
+  setIsFeatureDropDownExpand,
+  ticketQuantity,
+  onIncreaseTicketQuantity,
+  onDecreaseTicketQuantity,
+  cityOrigin,
+  cityDestination,
+  isNewUiEnabled,
+  onRemateUiButtonClick,
+  selectedTimeSlot,
+  onTimeSlotChange,
+  isTimeDropdownOpen,
+  onTimeDropdownToggle,
+  wowDealData,
+  isFlores,
+  isAllinBus,
+}: PeruServiceItemMobileProps): React.ReactElement {
+  const isItemExpanded = serviceItem.id === isExpanded;
+  const isPetSeat = (Object.keys(serviceItem?.pet_seat_info ?? {}) || []).length > 0;
+  let isSoldOut = serviceItem.available_seats <= 0;
+
+  const seats = removeDuplicateSeats
+    ? serviceItem.seat_types?.filter(
+        (seat, index, self) =>
+          index === self.findIndex((s) => s.label === seat.label),
+      ) || []
+    : serviceItem.seat_types || [];
+
+  const discountedSeats = seats.map((seat) => ({
+    ...seat,
+    ...commonService.calculateDiscountedPrice(seat.fare, serviceItem as any),
+  }));
+
+  const hasDiscount = discountedSeats.some(
+    (seat) => seat.originalPrice !== seat.discountedPrice,
+  );
+
+  const isLongOfferText = (serviceItem?.offer_text?.length || 0) > 35;
+  const hasDpEnabled = serviceItem?.is_dp_enabled === true;
+
+  const isDiscountBelow20 = (serviceItem as any)?.discount_value > 0 && (serviceItem as any)?.discount_value < 20;
+  const hasOfferText = Boolean(serviceItem?.offer_text) && !isDiscountBelow20;
+  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 =
+    (isNewUiEnabled || (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents))
+      ? {
+          borderColor: isSoldOut ? "#ccc" : "transparent",
+          borderStyle: "solid",
+          borderWidth: isSoldOut ? "1px" : "3px 3px 0 3px",
+          borderRadius: "18px",
+          background: `linear-gradient(#fff, #fff) padding-box, ${isSoldOut ? offerGradientWithOpacity : offerGradient}  border-box`,
+        }
+      : {};
+
+  const labelId =
+    typeof serviceItem.boarding_stages === "string"
+      ? serviceItem.boarding_stages.split("|")[0]
+      : "";
+
+  const showTopLabel =
+    busStage &&
+    busStage[labelId] &&
+    busStage[labelId].split("|")[1] === "true" &&
+    busStage[labelId].split("|")[0];
+
+  const getServiceStars = (serviceItem: any) => {
+    try {
+      return serviceItem.operator_details && serviceItem.operator_details[1]
+        ? serviceItem.operator_details[1].toFixed(1)
+        : "0.0";
+    } catch (e) {
+      return "";
+    }
+  };
+
+  const amenities = () => {
+    const raw = serviceItem?.operator_details?.[3];
+    const list = Array.isArray(raw)
+      ? raw
+      : typeof raw === "string"
+        ? raw.split("|").filter(Boolean)
+        : [];
+
+    const nodes = list.slice(0, 2).map((am, i) => (
+      <img
+        key={i}
+        className="amenity"
+        height={12}
+        width={12}
+        src={commonService.getAmenitiesImage(
+          amenitiesData?.[am]?.toLowerCase(),
+          serviceItem,
+        )}
+        alt="icon"
+      />
+    ));
+
+    return nodes;
+  };
+
+  const renderIcon = (iconKey: string, size: string = "14px", styles?: any) => {
+    const iconValue = serviceItem.icons?.[iconKey];
+    if (iconValue) {
+      if (typeof iconValue === "string") {
+        return (
+          <img
+            src={iconValue}
+            alt={iconKey}
+            className={`${`w-[${size}] h-[${size}]`} mr-[5px]`}
+            style={{
+              filter: isSoldOut ? "grayscale" : "",
+              ...(styles || {}),
+            }}
+          />
+        );
+      }
+    }
+    return null;
+  };
+
+  let isConexion = false;
+
+  if (serviceItem?.is_transpordo) {
+    isConexion = true;
+  }
+
+  const extractStage = (
+    stageArr: Record<string, string[]>[],
+    index: number,
+  ) => {
+    const stageObj = stageArr[index];
+    const key = Object.keys(stageObj)[0];
+    return stageObj[key][0].split(", ")[0];
+  };
+
+  const boardingName = serviceItem.stage_details_arr?.length
+    ? extractStage(serviceItem.stage_details_arr, 0)
+    : null;
+
+  const dropoffName = serviceItem.stage_details_arr?.length
+    ? extractStage(serviceItem.stage_details_arr, 1)
+    : null;
+
+  return (
+    <div
+      className={`relative  ${!hasOfferText || !serviceItem?.is_dp_enabled ? "mb-[14px]" : showTopLabel || serviceItem?.is_direct_trip ? "mb-[20px]" : "mb-[12px]"} ${
+        serviceItem?.is_direct_trip ||
+        isConexion ||
+        serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
+        showTopLabel ||
+        boardingName
+          ? "mt-[20px]"
+          : "mt-[10px]"
+      }	`}
+      style={{ zIndex: 1 }}
+    >
+      <div
+        className={`z-1 ${
+          (isNewUiEnabled ||
+            (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)) &&
+          !isSoldOut
+            ? "rounded-[18px]"
+            : "rounded-[10px] border border-[#ccc]"
+        }`}
+        style={{ ...serviceCardStyle, backgroundColor: "#fff" }}
+      >
+        <div
+          style={{
+            padding: "12px 12px 8px 12px",
+            marginTop:
+              serviceItem?.is_direct_trip && (showTopLabel || isConexion)
+                ? " 10px"
+                : "",
+          }}
+        >
+          {/* Header with operator info and favorite */}
+          <div className="flex justify-between  items-center mb-[10px]">
+            <div
+              className="flex items-center justify-center gap-x-4"
+              style={{
+                marginBottom:
+                  serviceItem?.offer_text || hasDiscount ? "10px" : "",
+              }}
+            >
+              <div
+                className={`w-[115px]  ${isFlores ? "" : "overflow-y-hidden"} h-[30px]`}
+              >
+                <img
+                  src={serviceItem.operator_details[0]}
+                  alt="service logo"
+                  className={`w-[100px] h-auto object-contain  ${
+                    isSoldOut ? "grayscale" : ""
+                  }`}
+                />
+              </div>
+              {isCiva ? (
+                <div className="black-text min-[420]:text-[12px] text-[12px]">
+                  {serviceItem?.operator_details[2]}
+                </div>
+              ) : showRating ? (
+                <div className="flex min-[420]:text-[13px] text-[12px] h-[22px] items-center">
+                  <div className="flex items-center">
+                    <div className="flex items-center">
+                      <img
+                        src={serviceItem.icons.rating}
+                        alt="origin"
+                        className={`w-[12px] h-[12px] mr-[4px] object-contain   ${
+                          isSoldOut ? "grayscale" : ""
+                        }`}
+                      />
+                      <span style={{ lineHeight: "normal" }}>
+                        {getServiceStars(serviceItem)}
+                      </span>
+                    </div>
+
+                    <div
+                      className="flex items-center cursor-pointer "
+                      style={{
+                        color: isSoldOut ? "#bbb" : "text-[#464647]",
+                      }}
+                    >
+                      <span className="ml-[3px]  min-[420]:text-[13px] text-[12px] text-ellipsis overflow-hidden whitespace-nowrap max-w-[120px]">
+                        {serviceItem.operator_details[2]}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              ) : null}
+            </div>
+          </div>
+
+          <DateTimeSectionMobile
+            onBookButtonPress={onBookButtonPress}
+            isCiva={isCiva}
+            isSoldOut={isSoldOut}
+            isLinatal={isLinatal}
+            isPeru={isPeru}
+            orignLabel={orignLabel}
+            destinationLabel={destinationLabel}
+            originIcon={serviceItem.icons?.origin}
+            destinationIcon={serviceItem.icons?.destination}
+            travelDate={serviceItem.travel_date}
+            arrivalDate={serviceItem.arrival_date}
+            depTime={serviceItem.dep_time}
+            arrTime={serviceItem.arr_time}
+            seatTypes={serviceItem.seat_types}
+            seatPriceColor={colors.seatPriceColor}
+            tooltipBgColor={colors.tooltipBgColor}
+            currencySign={currencySign}
+            availableSeats={serviceItem.available_seats}
+            removeDuplicateSeats={removeDuplicateSeats}
+            serviceItem={serviceItem}
+            showLastSeats={showLastSeats}
+            discountSeatPriceColor={colors.discountSeatPriceColor}
+            isTrain={isTrain}
+          />
+
+          {hasDiscount && (
+            <div className="flex justify-end">
+              {isSoldOut ? (
+                <span className="col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]">
+                  Agotado
+                </span>
+              ) : null}
+            </div>
+          )}
+
+          {showLastSeats ? (
+            <div className="flex justify-end  ">
+              {serviceItem?.available_seats < 10 &&
+                serviceItem?.available_seats > 0 && (
+                  <div
+                    className="text-[10px] text-center"
+                    style={{
+                      color: colors.tooltipBgColor,
+                    }}
+                  >
+                    ¡Últimos Asientos!
+                  </div>
+                )}
+            </div>
+          ) : null}
+
+          <div className="bg-[#E6E6E6]  mt-[10px] mb-[8px] h-[1px]"></div>
+
+          <BottomAmenitiesMobile
+            isSoldOut={isSoldOut}
+            amenitiesNodes={amenities()}
+            hoursIcon={renderIcon("hours", "14px")}
+            duration={serviceItem.duration?.toString()}
+            isDirectTrip={serviceItem?.is_direct_trip}
+            directoColor={colors.directoColor}
+            directoAnim={serviceItem.icons?.directoAnim}
+            isChangeTicket={serviceItem.is_change_ticket}
+            isPetSeat={isPetSeat}
+            petSeatInfo={serviceItem.pet_seat_info}
+            petFriendlyAnim={serviceItem.icons?.petFriendlyAnim}
+            flexibleAnim={serviceItem.icons?.flexibleAnim}
+            isTrackingEnabled={serviceItem?.is_tracking_enabled}
+            locationAnim={serviceItem.icons?.locationAnim}
+            downArrowIcon={serviceItem.icons?.downArrow}
+            showDropdown={isItemExpanded}
+            setShowDropdown={() =>
+              setIsExpanded && setIsExpanded(isItemExpanded ? null : serviceItem.id)
+            }
+            onDropdownToggle={() => {
+              setIsExpanded && setIsExpanded(isItemExpanded ? null : serviceItem.id);
+            }}
+            isPeru={isPeru}
+            femaleAnim={serviceItem.icons?.femaleAnim}
+            ladiesBookedSeats={serviceItem.ladies_booked_seats}
+            isDpEnabled={serviceItem.is_dp_enabled}
+            isTrain={isTrain}
+            seatCategoryText={
+              serviceItem.api_type === 78 && serviceItem.number
+                ? serviceItem.number
+                : undefined
+            }
+          />
+        </div>
+
+        <ServiceBadgesMobile
+          showTopLabel={showTopLabel}
+          isSoldOut={isSoldOut}
+          colors={colors}
+          renderIcon={renderIcon}
+          serviceItem={serviceItem}
+          isConexion={isConexion}
+          isAllinBus={isAllinBus}
+          boardingName={boardingName ?? undefined}
+        />
+      </div>
+
+      {/* 🔹 EXPANDABLE DROPDOWN (below the card) - Simple offer text when new UI is disabled */}
+      {hasOfferText &&
+        !isNewUiEnabled &&
+        !isSoldOut &&
+        !serviceItem?.is_dp_enabled && (
+          <div
+            className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
+            style={{
+              background: colors?.bottomStripColor,
+              borderRadius: "0 0 14px 14px",
+              zIndex: -1,
+            }}
+          >
+            <div
+              className="flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]"
+              style={{ lineHeight: 1.6 }}
+            >
+              <div className="flex justify-between items-center">
+                <div
+                  className={`flex ${(serviceItem?.offer_text || "").length > 10 ? "items-start" : "items-center"}`}
+                >
+                  <div className={isLongOfferText ? "mt-[2px]" : ""}>
+                    <LottiePlayer
+                      animationData={serviceItem.icons?.promoAnim}
+                      width="14px"
+                      height="14px"
+                    />
+                  </div>
+                  <div
+                    className={`ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`}
+                    style={{
+                      color: "#fff",
+                      lineHeight: 1.4,
+                    }}
+                  >
+                    <span className="whitespace-nowrap min-[380px]:text-[12px]">
+                      {serviceItem?.offer_text}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+      {/* 🔹 EXPANDABLE DROPDOWN (below the card) - Countdown/registro when new UI is enabled */}
+      {(isNewUiEnabled || (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)) && !isSoldOut && (
+        <div
+          className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
+          style={{
+            background: isSoldOut
+              ? offerGradientWithOpacity
+              : offerGradient,
+            borderRadius: "0 0 14px 14px",
+            zIndex: -1,
+          }}
+        >
+          <div
+            className="flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]"
+            style={{ lineHeight: 1.6 }}
+          >
+            <div className="flex justify-between items-center">
+              {serviceItem?.is_dp_enabled &&
+              Object.keys(serviceItem?.dp_discount_percents ?? {})
+                .length === 0 &&
+              (serviceItem?.dp_discounted_seats ?? []).length === 0 ? (
+                <div className="flex items-center gap-[6px]">
+                  <LottiePlayer
+                    animationData={serviceItem.icons?.starAnimation}
+                    width="14px"
+                    height="14px"
+                  />
+
+                  <span className="text-[#fff]">Más elegido</span>
+                </div>
+              ) : (
+                <div
+                  className={`flex ${(serviceItem?.offer_text || "").length > 10 ? "items-start" : "items-center"}`}
+                >
+                  <div className={isLongOfferText ? "mt-[2px]" : ""}>
+                    {serviceItem.icons?.bombAnim && (
+                      <LottiePlayer
+                        animationData={serviceItem.icons.bombAnim}
+                        width="14px"
+                        height="14px"
+                      />
+                    )}
+                  </div>
+                  <div
+                    className={`ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`}
+                    style={{
+                      color: "#fff",
+                      lineHeight: 1.4,
+                    }}
+                  >
+                    {!isNewUiEnabled && serviceItem?.offer_text ? (
+                      <span className="whitespace-nowrap min-[380px]:text-[12px]">
+                        {serviceItem?.offer_text}
+                      </span>
+                    ) : (
+                      <span className="whitespace-nowrap min-[380px]:text-[12px]">
+                        Termina en&nbsp;
+                        <span
+                          className="bold-text"
+                          ref={(node) =>
+                            commonService.startCountdown(node, 599)
+                          }
+                          style={{
+                            fontVariantNumeric: "tabular-nums",
+                            display: "inline-block",
+                          }}
+                        />
+                      </span>
+                    )}
+                  </div>
+                </div>
+              )}
+              <div
+                className="flex flex-col items-end"
+                style={{
+                  color: "#fff",
+                }}
+              >
+                <div className="flex items-center">
+                  <div className="mr-[4px]">
+                    <LottiePlayer
+                      animationData={serviceItem.icons?.dotAnimation}
+                      width="12px"
+                      height="12px"
+                    />
+                  </div>
+                  <span className="flex-1" style={{ lineHeight: 1.4 }}>
+                    <span
+                      className="bold-text"
+                      ref={(node) =>
+                        commonService.startViewerCount(node, viewersConfig)
+                      }
+                      style={{ fontVariantNumeric: "tabular-nums" }}
+                    />{" "}
+                    <span> viendo</span> |{" "}
+                    <span className="whitespace-nowrap">
+                      <span
+                        className="bold-text"
+                        ref={(node) =>
+                          commonService.startComprandoCount(node, 4, 16)
+                        }
+                        style={{ fontVariantNumeric: "tabular-nums" }}
+                      />{" "}
+                      comprando
+                    </span>
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+      <div
+        style={{
+          display: "grid",
+          gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
+          opacity: isItemExpanded ? 1 : 0,
+          transition:
+            "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
+          position: "relative",
+          zIndex:
+            hasOfferText ||
+            (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents) ||
+            isNewUiEnabled
+              ? -2
+              : -1,
+        }}
+      >
+        <div
+          style={{
+            overflow: "hidden",
+            minHeight: 0,
+            position:
+              hasOfferText ||
+              isNewUiEnabled ||
+              serviceItem?.is_dp_enabled
+                ? "relative"
+                : undefined,
+            zIndex:
+              serviceItem?.offer_text ||
+              isNewUiEnabled ||
+              (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)
+                ? -3
+                : undefined,
+            marginTop: hasOfferText ? "-15px" : "-10px",
+          }}
+        >
+          <ExpandedDropdownMobile
+            serviceItem={serviceItem}
+            isPeru={isPeru}
+            petSeatInfo={serviceItem.pet_seat_info}
+            petFriendlyAnim={serviceItem.icons?.petFriendlyAnim}
+            isSoldOut={isSoldOut}
+            isChangeTicket={serviceItem.is_change_ticket === true}
+            ladiesBookedSeats={serviceItem.ladies_booked_seats}
+            isDpEnabled={serviceItem.is_dp_enabled}
+            femaleAnim={serviceItem.icons?.femaleAnim}
+            flexibleAnim={serviceItem.icons?.flexibleAnim}
+            renderIcon={renderIcon}
+            operatorLabel={operatorLabel}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default PeruServiceItemMobile;

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -225,7 +225,7 @@ function ServiceItemPB({
     (serviceItem as any)?.discount_value > 0 &&
     (serviceItem as any)?.discount_value < 20;
   const hasOfferText = Boolean(serviceItem?.offer_text) && !isDiscountBelow20;
-  // const isNewUiEnabled = serviceItem?.discounts?.[0]?.new_ui_enabled === true;
+  const isNewUiEnabledPeru = serviceItem?.discounts?.[0]?.new_ui_enabled === true;
   const isNewUiEnabled = serviceItem?.new_ui_enabled === true;
 
   const seats = removeDuplicateSeats
@@ -508,7 +508,7 @@ function ServiceItemPB({
           setIsExpand={setIsExpand}
           coachKey={coachKey}
           isFlores={isFlores}
-          isNewUiEnabled={isNewUiEnabled}
+          isNewUiEnabled={isNewUiEnabledPeru}
           showLoginOption={showLoginOption}
         />
       ) : isNewUi && !isTrain ? (

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -10,6 +10,7 @@ import DateTimeSectionMobile from "../../ui/mobileweb/DateTimeSectionMobile";
 import ExpandedDropdownMobile from "../../ui/mobileweb/ExpandedDropdownMobile";
 import ServiceBadgesMobile from "../../ui/mobileweb/ServiceBadgesMobile";
 import FeatureServiceUiMobile from "../../ui/FeaturServiceUiMobile/FeatureServiceUiMobile";
+import PeruServiceItemMobile from "./PeruServiceItemMobile";
 
 const SEAT_EXCEPTIONS = ["Asiento mascota"];
 
@@ -64,6 +65,7 @@ function ServiceItemMobile({
   wowDealData,
   isFlores,
   isAllinBus,
+  isPeruSite,
 }: MobileServiceItemProps): React.ReactElement {
   const isItemExpanded = serviceItem.id === isExpanded;
   const isPetSeat = (Object.keys(serviceItem?.pet_seat_info) || []).length > 0;
@@ -196,7 +198,48 @@ function ServiceItemMobile({
 
   return (
     <>
-      {isNewUi && !isTrain ? (
+      {isPeruSite ? (
+        <PeruServiceItemMobile
+          serviceItem={serviceItem}
+          onBookButtonPress={onBookButtonPress}
+          colors={colors}
+          busStage={busStage}
+          orignLabel={orignLabel}
+          destinationLabel={destinationLabel}
+          amenitiesData={amenitiesData}
+          setShowDropdown={setShowDropdown}
+          showDropdown={showDropdown}
+          isExpanded={isExpanded}
+          setIsExpanded={setIsExpanded}
+          setAmenetiesAtomValue={setAmenetiesAtomValue}
+          isCiva={isCiva}
+          currencySign={currencySign}
+          isPeru={isPeru}
+          showRating={showRating}
+          showLastSeats={showLastSeats}
+          removeDuplicateSeats={removeDuplicateSeats}
+          isLinatal={isLinatal}
+          viewersConfig={viewersConfig}
+          operatorLabel={operatorLabel}
+          isTrain={isTrain}
+          isFeatureDropDownExpand={isFeatureDropDownExpand}
+          setIsFeatureDropDownExpand={setIsFeatureDropDownExpand}
+          ticketQuantity={ticketQuantity}
+          onIncreaseTicketQuantity={onIncreaseTicketQuantity}
+          onDecreaseTicketQuantity={onDecreaseTicketQuantity}
+          cityOrigin={cityOrigin}
+          cityDestination={cityDestination}
+          isNewUiEnabled={isNewUiEnabled}
+          onRemateUiButtonClick={onRemateUiButtonClick}
+          selectedTimeSlot={selectedTimeSlot}
+          onTimeSlotChange={onTimeSlotChange}
+          isTimeDropdownOpen={isTimeDropdownOpen}
+          onTimeDropdownToggle={onTimeDropdownToggle}
+          wowDealData={wowDealData}
+          isFlores={isFlores}
+          isAllinBus={isAllinBus}
+        />
+      ) : isNewUi && !isTrain ? (
         <FeatureServiceUiMobile
           serviceItem={serviceItem}
           showTopLabel={showTopLabel}

package/src/components/ServiceItem/mobileTypes.ts

@@ -50,6 +50,8 @@ export interface MobileServiceItemProps {
     discount_value?: number;
     ui_type?: number;
     max_discount?: number;
+    api_type?: number;
+    number?: string;
     discounts?: Array<{
       id?: number;
       name?: string;
@@ -253,4 +255,5 @@ export interface MobileServiceItemProps {
   isFlores?: boolean;
   operatorLabel?: string;
   isAllinBus?: any;
+  isPeruSite?: boolean;
 }