kupos-ui-components-lib 9.9.2 → 9.9.4

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -9,7 +9,6 @@ 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"];
 
@@ -46,25 +45,11 @@ function ServiceItemMobile({
   removeDuplicateSeats,
   isLinatal,
   viewersConfig,
-  isFeatureDropDownExpand,
-  setIsFeatureDropDownExpand,
-  ticketQuantity,
-  onIncreaseTicketQuantity,
-  onDecreaseTicketQuantity,
-  cityOrigin,
-  cityDestination,
-  isNewUi,
-  onRemateUiButtonClick,
-  selectedTimeSlot,
-  onTimeSlotChange,
-  isTimeDropdownOpen,
-  onTimeDropdownToggle,
-  wowDealData,
-  isFlores,
+  operatorLabel,
+  isTrain,
 }: 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
@@ -89,7 +74,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 && isNewUiEnabled) || serviceItem?.is_dp_enabled
+    hasOfferText || serviceItem?.is_dp_enabled
       ? {
           borderColor: isSoldOut ? "#ccc" : "transparent",
           borderStyle: "solid",
@@ -170,400 +155,318 @@ function ServiceItemMobile({
   }
 
   return (
-    <>
-      {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
+      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>
                     </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
+                      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>
-                  ) : 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}
-              />
+              ) : null}
+            </div>
+          </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>
-                  ) : null}
-                </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}
+          />
 
-              {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>
+          {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>
+          )}
 
-              {/* <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}
-              />
+          {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}
 
-            <ServiceBadgesMobile
-              showTopLabel={showTopLabel}
-              isSoldOut={isSoldOut}
-              colors={colors}
-              renderIcon={renderIcon}
-              serviceItem={serviceItem}
-              isConexion={isConexion}
-            />
-          </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>
 
-          {/* 🔹 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>
-            )}
+          <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>
 
-          {/* 🔹 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"
-                        />
+        <ServiceBadgesMobile
+          showTopLabel={showTopLabel}
+          isSoldOut={isSoldOut}
+          colors={colors}
+          renderIcon={renderIcon}
+          serviceItem={serviceItem}
+          isConexion={isConexion}
+        />
+      </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>
-                    )}
+      {/* 🔹 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"
+                    />
+
+                    <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="flex flex-col items-end"
+                      className={`ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`}
                       style={{
                         color: "#fff",
+                        lineHeight: 1.4,
                       }}
                     >
-                      <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>
+                      <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">
+                        {/* {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>
   );
 }