kupos-ui-components-lib 9.9.4 → 9.9.6

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -9,6 +9,7 @@ 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"];
 
@@ -45,11 +46,25 @@ function ServiceItemMobile({
   removeDuplicateSeats,
   isLinatal,
   viewersConfig,
-  operatorLabel,
-  isTrain,
+  isFeatureDropDownExpand,
+  setIsFeatureDropDownExpand,
+  ticketQuantity,
+  onIncreaseTicketQuantity,
+  onDecreaseTicketQuantity,
+  cityOrigin,
+  cityDestination,
+  isNewUi,
+  onRemateUiButtonClick,
+  selectedTimeSlot,
+  onTimeSlotChange,
+  isTimeDropdownOpen,
+  onTimeDropdownToggle,
+  wowDealData,
+  isFlores,
 }: MobileServiceItemProps): React.ReactElement {
   const isItemExpanded = serviceItem.id === isExpanded;
   const isPetSeat = (Object.keys(serviceItem?.pet_seat_info) || []).length > 0;
+  const isNewUiEnabled = serviceItem?.discounts?.[0]?.new_ui_enabled === true;
   let isSoldOut = serviceItem.available_seats <= 0;
 
   const seats = removeDuplicateSeats
@@ -74,7 +89,7 @@ function ServiceItemMobile({
   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 || serviceItem?.is_dp_enabled
+    (hasOfferText && isNewUiEnabled) || serviceItem?.is_dp_enabled
       ? {
           borderColor: isSoldOut ? "#ccc" : "transparent",
           borderStyle: "solid",
@@ -155,318 +170,400 @@ function ServiceItemMobile({
   }
 
   return (
-    <div
-      className={`relative  ${!serviceItem.offer_text || !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
-          ? "mt-[20px]"
-          : "mt-[10px]"
-      }	`}
-      style={{ zIndex: 1 }}
-    >
-      <div
-        className={`z-1 ${
-          (hasOfferText || serviceItem?.is_dp_enabled) && !isSoldOut
-            ? "rounded-[18px]"
-            : "rounded-[10px] border border-[#ccc]"
-        }`}
-        style={{ ...serviceCardStyle, backgroundColor: "#fff" }}
-      >
-        <div style={{ padding: "12px 12px 8px 12px" }}>
-          {/* 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] overflow-y-hidden h-[22px]">
-                <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>
+    <>
+      {isNewUi ? (
+        <FeatureServiceUiMobile
+          serviceItem={serviceItem}
+          showTopLabel={showTopLabel}
+          colors={colors}
+          isSoldOut={isSoldOut}
+          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
+          className={`relative  ${!serviceItem.offer_text || !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
+              ? "mt-[20px]"
+              : "mt-[10px]"
+          }	`}
+          style={{ zIndex: 1 }}
+        >
+          <div
+            className={`z-1 ${
+              ((hasOfferText && isNewUiEnabled) || serviceItem?.is_dp_enabled) && !isSoldOut
+                ? "rounded-[18px]"
+                : "rounded-[10px] border border-[#ccc]"
+            }`}
+            style={{ ...serviceCardStyle, backgroundColor: "#fff" }}
+          >
+            <div style={{ padding: "12px 12px 8px 12px" }}>
+              {/* 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-[22px]`}>
+                    <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
+                          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>
-                  </div>
+                  ) : null}
                 </div>
-              ) : null}
-            </div>
-          </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}
-          />
+              <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}
+              />
+
+              {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>
+              )}
 
-          {hasDiscount && (
-            <div className="flex justify-end">
-              {isSoldOut ? (
-                <span className="col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]">
-                  Agotado
-                </span>
+              {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>
-          )}
 
-          {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] -ml-[12px] -mr-[12px] mt-[10px] mb-[10px] h-[1px]"></div> */}
+              <div className="bg-[#E6E6E6]  mt-[10px] mb-[8px] h-[1px]"></div>
 
-          {/* <div className="bg-[#E6E6E6] -ml-[12px] -mr-[12px] mt-[10px] mb-[10px] h-[1px]"></div> */}
-          <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(isItemExpanded ? null : serviceItem.id)
+                }
+                onDropdownToggle={() => {
+                  setIsExpanded(isItemExpanded ? null : serviceItem.id);
+                }}
+                isPeru={isPeru}
+                femaleAnim={serviceItem.icons.femaleAnim}
+                ladiesBookedSeats={serviceItem.ladies_booked_seats}
+                isDpEnabled={serviceItem.is_dp_enabled}
+              />
+            </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(isItemExpanded ? null : serviceItem.id)
-            }
-            onDropdownToggle={() => {
-              setIsExpanded(isItemExpanded ? null : serviceItem.id);
-            }}
-            isPeru={isPeru}
-            femaleAnim={serviceItem.icons.femaleAnim}
-            ladiesBookedSeats={serviceItem.ladies_booked_seats}
-            isDpEnabled={serviceItem.is_dp_enabled}
-          />
-        </div>
+            <ServiceBadgesMobile
+              showTopLabel={showTopLabel}
+              isSoldOut={isSoldOut}
+              colors={colors}
+              renderIcon={renderIcon}
+              serviceItem={serviceItem}
+              isConexion={isConexion}
+            />
+          </div>
 
-        <ServiceBadgesMobile
-          showTopLabel={showTopLabel}
-          isSoldOut={isSoldOut}
-          colors={colors}
-          renderIcon={renderIcon}
-          serviceItem={serviceItem}
-          isConexion={isConexion}
-        />
-      </div>
+          {/* 🔹 EXPANDABLE DROPDOWN (below the card) */}
+          {((serviceItem?.offer_text && !isNewUiEnabled)) &&
+            !isSoldOut && (
+              <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) */}
-      {(serviceItem?.offer_text || serviceItem?.is_dp_enabled) &&
-        !isSoldOut && (
-          <div
-            className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
-            style={{
-              background: isSoldOut ? offerGradientWithOpacity : offerGradient,
-              // opacity: isSoldOut ? 0.5 : 1,
-              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]">
-                    {/* {renderIcon("whiteFireIcon", "14px")} */}
-                    <LottiePlayer
-                      animationData={serviceItem.icons.starAnimation}
-                      width="14px"
-                      height="14px"
-                    />
+          {/* 🔹 EXPANDABLE DROPDOWN (below the card) */}
+          {((serviceItem?.offer_text && isNewUiEnabled) || serviceItem?.is_dp_enabled) &&
+            !isSoldOut && (
+              <div
+                className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
+                style={{
+                  background: isSoldOut
+                    ? offerGradientWithOpacity
+                    : offerGradient,
+                  // opacity: isSoldOut ? 0.5 : 1,
+                  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]">
+                        {/* {renderIcon("whiteFireIcon", "14px")} */}
+                        <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]" : ""}>
-                      <LottiePlayer
-                        animationData={serviceItem.icons.bombAnim}
-                        width="14px"
-                        height="14px"
-                      />
-                    </div>
+                        <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]" : ""}>
+                          <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,
+                          }}
+                        >
+                          <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={`ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`}
+                      className="flex flex-col items-end"
                       style={{
                         color: "#fff",
-                        lineHeight: 1.4,
                       }}
                     >
-                      <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 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">
+                            {/* {serviceItem?.is_dp_enabled ? null : "Quedan pocos • "} */}
+                            <span
+                              className="bold-text"
+                              ref={(node) =>
+                                commonService.startComprandoCount(node, 4, 16)
+                              }
+                              style={{ fontVariantNumeric: "tabular-nums" }}
+                            />{" "}
+                            comprando
+                          </span>
+                        </span>
+                      </div>
                     </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">
-                        {/* {serviceItem?.is_dp_enabled ? null : "Quedan pocos • "} */}
-                        <span
-                          className="bold-text"
-                          ref={(node) =>
-                            commonService.startComprandoCount(node, 4, 16)
-                          }
-                          style={{ fontVariantNumeric: "tabular-nums" }}
-                        />{" "}
-                        comprando
-                      </span>
-                    </span>
                   </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:
+                serviceItem?.offer_text || serviceItem?.is_dp_enabled ? -2 : -1,
+            }}
+          >
+            <div
+              style={{
+                overflow: "hidden",
+                minHeight: 0,
+                position: serviceItem?.offer_text ? "relative" : undefined,
+                zIndex: serviceItem?.offer_text ? -3 : undefined,
+                marginTop: serviceItem?.offer_text ? "-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}
+              />
             </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:
-            serviceItem?.offer_text || serviceItem?.is_dp_enabled ? -2 : -1,
-        }}
-      >
-        <div
-          style={{
-            overflow: "hidden",
-            minHeight: 0,
-            position: serviceItem?.offer_text ? "relative" : undefined,
-            zIndex: serviceItem?.offer_text ? -3 : undefined,
-            marginTop: serviceItem?.offer_text ? "-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>
+      )}
+    </>
   );
 }