kupos-ui-components-lib 9.3.9 → 9.4.0

package/dist/ui/mobileweb/SeatSectionMobile.js

@@ -42,7 +42,7 @@ const getUniqueSeats = (data, limit) => {
         .sort((a, b) => a.fare - b.fare)
         .slice(0, limit);
 };
-function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, }) {
+function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, }) {
     var _a, _b, _c, _d, _e;
     const hasMultipleTypes = ((_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.length) !== null && _a !== void 0 ? _a : 0) > 2;
     const getFare = (fare) => {
@@ -73,6 +73,34 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
                 React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: isSoldOut ? "#bbb" : "#464647" } }, "Desde"),
                 React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: priceColor } }, commonService.currency(discountedPrice, currencySign)))));
     };
+    const renderDpSeats = () => {
+        var _a;
+        const lowestFare = getLowestFare();
+        if (lowestFare === null)
+            return null;
+        const { discountedPrice } = commonService.calculateDiscountedPrice(lowestFare, serviceItem);
+        const priceColor = isSoldOut ? "#bbb" : tooltipBgColor;
+        return (React.createElement("div", { className: "relative flex flex-col justify-center h-full" },
+            React.createElement("div", { className: "absolute right-[0px]", style: {
+                    animation: "pulse-zoom 2s ease-in-out infinite",
+                    top: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
+                        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0
+                        ? "-20px"
+                        : "-10px",
+                } },
+                React.createElement("span", { className: "rounded-[100px]  px-[8px] text-[11px] bold-text leading-[20px] text-[#fff]", style: {
+                        backgroundColor: tooltipBgColor,
+                    } }, "Mejor precio")),
+            React.createElement("div", { className: "w-[100%] flex flex-row justify-between items-center" },
+                React.createElement("span", { className: "min-[420]:text-[13px] text-[12px]", style: { color: isSoldOut ? "#bbb" : "#464647" } }, "Desde"),
+                React.createElement("span", { className: "flex items-center gap-[4px] min-[420]:text-[13px] text-[14px] bold-text", style: { color: priceColor } },
+                    ((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _a === void 0 ? void 0 : _a.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "dp", className: "h-[14px] w-[14px] object-contain", style: { filter: isSoldOut ? "grayscale(1)" : "" } })) : null,
+                    commonService.currency(discountedPrice, currencySign))),
+            showLastSeats ? (React.createElement("div", { className: "flex justify-end" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
+                (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[10px] text-[#464647] text-center mt-[3px]" }, "\u00A1\u00DAltimos Asientos!")))) : null,
+            isSoldOut ? (React.createElement("div", { className: "flex justify-end" },
+                React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] text-[#ccc]" }, "Agotado"))) : null));
+    };
     const renderSeats = () => {
         var _a, _b, _c;
         if (isPeru) {
@@ -102,7 +130,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
         typeof (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) === "number"
         ? Math.round(serviceItem.discount_value)
         : null;
-    return (React.createElement("div", { className: "content-center relative", style: { width: "40%" } }, hasDiscount && discountSeat ? (React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] " },
+    return (React.createElement("div", { className: "content-center relative", style: { width: "40%" } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? (React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem]", style: { gap: isSoldOut ? "0px" : "5px" } }, renderDpSeats())) : hasDiscount && discountSeat ? (React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] " },
         discountValue != null && (React.createElement("div", { className: "absolute -top-[18px] right-[0px]", style: {
                 animation: "pulse-zoom 2s ease-in-out infinite",
             } },
@@ -137,6 +165,8 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
             justifyContent: hasMultipleTypes ? "space-between" : "center",
         } },
         renderSeats(),
+        showLastSeats ? (React.createElement("div", { className: "flex justify-end  " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
+            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[10px] text-[#464647] text-center" }, "\u00A1 \u00DAltimos Asientos!")))) : null,
         isSoldOut ? (React.createElement("div", { className: "flex justify-end" },
             React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] text-[#ccc]" }, "Agotado"))) : null))));
 }

package/dist/ui/mobileweb/ServiceBadgesMobile.js

@@ -1,6 +1,6 @@
 import React from "react";
 const ServiceBadgesMobile = ({ showTopLabel, isSoldOut, colors, renderIcon, serviceItem, isConexion, }) => {
-    return (React.createElement("div", { className: "absolute -top-[9px] left-0 w-full flex items-center justify-end gap-[12px] pr-[17px] z-10" },
+    return (React.createElement("div", { className: "absolute -top-[10px] left-0 w-full flex items-center justify-end gap-[12px] pr-[17px] z-10" },
         showTopLabel && (React.createElement("div", { className: `flex items-center gap-[2px] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`, style: {
                 backgroundColor: "#fff",
                 border: `1px solid ${colors.topLabelColor}`,

package/package.json

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

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -105,6 +105,8 @@ function ServiceItemPB({
   setIsExpand,
   coachKey,
   viewersConfig,
+  showLoginModal,
+  isLoggedIn,
 }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
   const getAnimationIcon = (icon: string) => {
     const animation = ANIMATION_MAP[icon];
@@ -185,15 +187,17 @@ function ServiceItemPB({
   );
 
   const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
-  const serviceCardStyle: React.CSSProperties = hasOfferText
-    ? {
-        borderColor: "transparent",
-        borderStyle: "solid",
-        borderWidth: "6px 6px 0 6px",
-        borderRadius: isItemExpanded || coachKey ? "18px 18px 0 0" : "18px",
-        background: `linear-gradient(#fff, #fff) padding-box, ${offerGradient} border-box`,
-      }
-    : {};
+  const serviceCardStyle: React.CSSProperties =
+    hasOfferText || serviceItem?.is_dp_enabled
+      ? {
+          borderColor: "transparent",
+          borderStyle: "solid",
+          borderWidth: "3px 3px 0 3px",
+          borderRadius: isItemExpanded || coachKey ? "18px 18px 0 0" : "18px",
+          background: `linear-gradient(#fff, #fff) padding-box, ${offerGradient} border-box`,
+          zIndex: 2,
+        }
+      : {};
 
   const renderIcon = (iconKey: string, size: string = "14px") => {
     const iconValue = serviceItem.icons?.[iconKey];
@@ -397,7 +401,7 @@ function ServiceItemPB({
         />
       ) : (
         <div
-          className={`relative ${hasOfferText ? "mb-[55px]" : "mb-[10px]"} ${
+          className={`relative ${hasOfferText || serviceItem?.is_dp_enabled ? "mb-[55px]" : "mb-[10px]"} ${
             serviceItem?.is_direct_trip ||
             serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
             showTopLabel
@@ -408,7 +412,7 @@ function ServiceItemPB({
           <div
             id={`service-card-${serviceItem.id}`}
             className={`bg-white mx-auto relative ${
-              hasOfferText
+              hasOfferText || serviceItem?.is_dp_enabled
                 ? "rounded-[18px]"
                 : "rounded-[10px] border border-[#ccc]"
             }`}
@@ -485,6 +489,7 @@ function ServiceItemPB({
                     availableSeats={serviceItem.available_seats}
                     isSoldOut={isSoldOut}
                     priceColor={colors.priceColor}
+                    dpSeatColor={colors.seatPriceColor}
                     currencySign={currencySign}
                     removeDuplicateSeats={removeDuplicateSeats}
                     isPeru={isPeru}
@@ -521,14 +526,19 @@ function ServiceItemPB({
                   />
                   {showLastSeats ? (
                     <div
-                      className="flex justify-center mr-[11px] w-[100%] right-[0px]"
-                      style={{
-                        top: serviceDetailsLoading ? "-17px" : "-20px",
-                      }}
+                      className="flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]"
+                      // style={{
+                      //   top: serviceDetailsLoading ? "-17px" : "-20px",
+                      // }}
                     >
                       {serviceItem?.available_seats < 10 &&
                         serviceItem?.available_seats > 0 && (
-                          <div className="text-[12px] text-[#464647] mt-1 text-center">
+                          <div
+                            className="text-[12px]  mt-1 text-center"
+                            style={{
+                              color: colors.seatPriceColor,
+                            }}
+                          >
                             ¡Últimos Asientos!
                           </div>
                         )}
@@ -565,7 +575,7 @@ function ServiceItemPB({
                 transition:
                   "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
                 position: "relative",
-                zIndex: -1,
+                zIndex: 1,
               }}
             >
               <div
@@ -573,10 +583,10 @@ function ServiceItemPB({
                   overflow: "hidden",
                   minHeight: 0,
                   marginTop: "-10px",
-                  ...(hasOfferText
+                  ...(hasOfferText || serviceItem?.is_dp_enabled
                     ? {
-                        borderLeft: "6px solid #ff5964",
-                        borderRight: "6px solid #ff8842",
+                        borderLeft: "3px solid #ff5964",
+                        borderRight: "3px solid #ff8842",
                         borderRadius: "0 0 18px 18px",
                         boxSizing: "border-box",
                       }
@@ -596,9 +606,9 @@ function ServiceItemPB({
 
           {children}
           {/* Bottom discount banner */}
-          {serviceItem?.offer_text && (
+          {(serviceItem?.offer_text || serviceItem?.is_dp_enabled) && (
             <div
-              className="text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[36px] pt-[50px] -z-10 rounded-b-[14px] text-[14px]"
+              className="text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[36px] pt-[50px]  rounded-b-[14px] text-[14px]"
               style={{
                 background: offerGradient,
                 opacity: isSoldOut ? 0.5 : 1,
@@ -606,31 +616,48 @@ function ServiceItemPB({
             >
               <div className="flex  justify-between items-center w-full">
                 <div className="flex items-center ">
-                  <div className="flex items-center">
-                    <LottiePlayer
-                      animationData={getAnimationIcon("bombAnimation")}
-                      width="18px"
-                      height="18px"
-                    />
-                    <div className="flex items-center mt-[2px]">
-                      <span className="bold-text ml-[6px]">
-                        {(serviceItem?.offer_text || "").length > 30
-                          ? (serviceItem?.offer_text || "").slice(0, 30) + "..."
-                          : serviceItem?.offer_text || ""}
-                        &nbsp;
-                      </span>{" "}
-                      | Termina en&nbsp;
-                      <span
-                        className="bold-text text-end"
-                        ref={(node) => CommonService.startCountdown(node, 599)}
-                        style={{
-                          fontVariantNumeric: "tabular-nums",
-                          display: "inline-block",
-                          // minWidth: "70px",
-                        }}
+                  {serviceItem?.is_dp_enabled ? (
+                    <div className="flex items-center gap-[3px]">
+                      {renderIcon("whiteFireIcon", "14px")}
+                      <span>Servicio popular entre los usuarios</span>
+                    </div>
+                  ) : (
+                    <div className="flex items-center">
+                      <LottiePlayer
+                        animationData={getAnimationIcon("bombAnimation")}
+                        width="18px"
+                        height="18px"
                       />
+                      <div className="flex items-center mt-[2px]">
+                        <span className="bold-text ml-[6px]">
+                          {(serviceItem?.offer_text || "").length > 30
+                            ? (serviceItem?.offer_text || "").slice(0, 30) +
+                              "..."
+                            : serviceItem?.offer_text || ""}{" "}
+                          {isLoggedIn ? null : (
+                            <span
+                              onClick={showLoginModal}
+                              className="cursor-pointer"
+                            >
+                              registro
+                            </span>
+                          )}{" "}
+                          &nbsp;
+                        </span>{" "}
+                        | Termina en&nbsp;
+                        <span
+                          className="bold-text text-end"
+                          ref={(node) =>
+                            CommonService.startCountdown(node, 599)
+                          }
+                          style={{
+                            fontVariantNumeric: "tabular-nums",
+                            display: "inline-block",
+                          }}
+                        />
+                      </div>
                     </div>
-                  </div>
+                  )}
                 </div>
                 <div className="flex items-center">
                   {/* {renderIcon("personIcon", "16px")} */}
@@ -648,12 +675,12 @@ function ServiceItemPB({
                       }
                       style={{ fontVariantNumeric: "tabular-nums" }}
                     />{" "}
-                    <span className="bold-text">personas</span>{" "}
+                    {/* <span className="bold-text">personas</span>{" "} */}
                     <span>
                       {" "}
                       {viewersConfig?.label || " viendo"} |{" "}
                       <span className="">
-                        Quedan pocos •{" "}
+                        {serviceItem?.is_dp_enabled ? null : "Quedan pocos • "}
                         <span
                           className="bold-text"
                           ref={(node) =>

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -70,15 +70,16 @@ function ServiceItemMobile({
 
   const hasOfferText = Boolean(serviceItem?.offer_text);
   const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
-  const serviceCardStyle: React.CSSProperties = hasOfferText
-    ? {
-        borderColor: "transparent",
-        borderStyle: "solid",
-        borderWidth: "3px 3px 0 3px",
-        borderRadius: "18px",
-        background: `linear-gradient(#fff, #fff) padding-box, ${offerGradient} border-box`,
-      }
-    : {};
+  const serviceCardStyle: React.CSSProperties =
+    hasOfferText || serviceItem?.is_dp_enabled
+      ? {
+          borderColor: "transparent",
+          borderStyle: "solid",
+          borderWidth: "3px 3px 0 3px",
+          borderRadius: "18px",
+          background: `linear-gradient(#fff, #fff) padding-box, ${offerGradient} border-box`,
+        }
+      : {};
 
   const labelId =
     typeof serviceItem.boarding_stages === "string"
@@ -152,7 +153,7 @@ function ServiceItemMobile({
 
   return (
     <div
-      className={`relative  ${!serviceItem.offer_text ? "mb-[14px]" : showTopLabel || serviceItem?.is_direct_trip ? "mb-[20px]" : "mb-[12px]"} ${
+      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)" ||
@@ -164,7 +165,7 @@ function ServiceItemMobile({
     >
       <div
         className={`bg-white z-1 ${
-          hasOfferText
+          hasOfferText || serviceItem?.is_dp_enabled
             ? "rounded-[18px]"
             : "rounded-[10px] border border-[#ccc]"
         }`}
@@ -174,17 +175,17 @@ function ServiceItemMobile({
           {/* Header with operator info and favorite */}
           <div className="flex justify-between  items-center mb-[10px]">
             <div
-              className="flex items-center  justify-between"
+              className="flex items-center justify-center gap-x-4"
               style={{
                 marginBottom:
                   serviceItem?.offer_text || hasDiscount ? "10px" : "",
               }}
             >
-              <div className="w-[120px] overflow-y-hidden">
+              <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 ${
+                  className={`w-[100px] h-auto object-contain  ${
                     isSoldOut ? "grayscale" : ""
                   }`}
                 />
@@ -194,7 +195,7 @@ function ServiceItemMobile({
                   {serviceItem?.operator_details[2]}
                 </div>
               ) : showRating ? (
-                <div className="flex min-[420]:text-[13px] text-[12px]  items-center">
+                <div className="flex min-[420]:text-[13px] text-[12px] h-[22px] items-center">
                   <div className="flex items-center">
                     <div className="flex items-center">
                       <img
@@ -221,16 +222,6 @@ function ServiceItemMobile({
                 </div>
               ) : null}
             </div>
-            {showLastSeats ? (
-              <div className="flex justify-end  ">
-                {serviceItem?.available_seats < 10 &&
-                  serviceItem?.available_seats > 0 && (
-                    <div className="text-[10px] text-[#464647] text-center">
-                      ¡ Últimos Asientos!
-                    </div>
-                  )}
-              </div>
-            ) : null}
           </div>
 
           <DateTimeSectionMobile
@@ -254,7 +245,9 @@ function ServiceItemMobile({
             availableSeats={serviceItem.available_seats}
             removeDuplicateSeats={removeDuplicateSeats}
             serviceItem={serviceItem}
+            showLastSeats={showLastSeats}
           />
+
           {/* <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>
 
@@ -296,7 +289,7 @@ function ServiceItemMobile({
       </div>
 
       {/* 🔹 EXPANDABLE DROPDOWN (below the card) */}
-      {serviceItem?.offer_text && (
+      {(serviceItem?.offer_text || serviceItem?.is_dp_enabled) && (
         <div
           className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
           style={{
@@ -311,42 +304,43 @@ function ServiceItemMobile({
             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.bombAnim}
-                    width="14px"
-                    height="14px"
-                  />
+              {serviceItem?.is_dp_enabled ? (
+                <div className="flex items-center">
+                  {renderIcon("whiteFireIcon", "14px")}
+                  <span className="text-[#fff]">Más elegido</span>
                 </div>
+              ) : (
                 <div
-                  className={`ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`}
-                  style={{
-                    color: "#fff",
-                    lineHeight: 1.4,
-                  }}
+                  className={`flex ${(serviceItem?.offer_text || "").length > 10 ? "items-start" : "items-center"}`}
                 >
-                  {/* <span className="min-[380px]:text-[12px] bold-text">
-                    {(serviceItem?.offer_text || "").length > 30
-                      ? (serviceItem?.offer_text || "").slice(0, 30) + "..."
-                      : serviceItem?.offer_text || ""}
-                  </span>{" "}
-                  <span className="min-[380px]:text-[12px]">|</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",
-                      }}
+                  <div className={isLongOfferText ? "mt-[2px]" : ""}>
+                    <LottiePlayer
+                      animationData={serviceItem.icons.bombAnim}
+                      width="14px"
+                      height="14px"
                     />
-                  </span>
+                  </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>
+              )}
               <div
                 className="flex flex-col items-end"
                 style={{
@@ -370,17 +364,23 @@ function ServiceItemMobile({
                       }
                       style={{ fontVariantNumeric: "tabular-nums" }}
                     />{" "}
-                    <span className="bold-text">personas</span>{" "}
-                    <span>
-                      {" "}
-                      {/* {viewersConfig.label || " están viendo este viaje"} */}
-                      viendo
+                    <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 className="flex items-center">
+                {/* <div className="flex items-center">
                   <span className="whitespace-nowrap">
-                    Quedan pocos •{" "}
+                    {serviceItem?.is_dp_enabled ? null : "Quedan pocos • "}
                     <span
                       className="bold-text"
                       ref={(node) =>
@@ -390,7 +390,7 @@ function ServiceItemMobile({
                     />{" "}
                     comprando
                   </span>
-                </div>
+                </div> */}
               </div>
             </div>
             {/* <div className="flex flex-col gap-[4px]">
@@ -460,7 +460,8 @@ function ServiceItemMobile({
           transition:
             "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
           position: "relative",
-          zIndex: serviceItem?.offer_text ? -2 : -1,
+          zIndex:
+            serviceItem?.offer_text || serviceItem?.is_dp_enabled ? -2 : -1,
         }}
       >
         <div

package/src/components/ServiceItem/mobileTypes.ts

@@ -37,6 +37,7 @@ export interface MobileServiceItemProps {
     change_ticket_hours?: number;
     duration?: number;
     train_type_label?: string;
+    is_dp_enabled?: boolean;
     offer_text?: string;
     is_direct_trip?: boolean;
     is_train_type?: boolean;
@@ -120,6 +121,7 @@ export interface MobileServiceItemProps {
       specialDeparture?: string;
       fireIcon?: string;
       directoIcon?: string;
+      whiteFireIcon?: string
       [key: string]: string | Record<string, string | undefined> | undefined;
     };
     useLottieFor?: string[];

package/src/components/ServiceItem/types.ts

@@ -40,6 +40,7 @@ export interface ServiceItemProps {
     train_type_label?: string;
     offer_text?: string;
     is_direct_trip?: boolean;
+    is_dp_enabled?: boolean;
     is_transpordo?: boolean;
     is_train_type?: boolean;
     operator_service_name?: string;
@@ -121,6 +122,7 @@ export interface ServiceItemProps {
       bombJson?:string
       downArrow?:string
       personIcon?: string
+      whiteFireIcon?: string
 
       [key: string]: string | Record<string, string | undefined> | undefined;
     };
@@ -212,4 +214,7 @@ export interface ServiceItemProps {
     label?: string; // e.g. "personas están viendo este viaje"
     icon?: string; // optional icon URL
   };
+  showLoginModal?: any
+  isLoggedIn?: any
+  
 }

package/src/ui/KuposButton/KuposButton.tsx

@@ -37,9 +37,14 @@ function KuposButton({
         {isLoading ? (
           <span className="loader-circle"></span>
         ) : !isSoldOut ? (
-          buyLabel
+          <span className="normal-case">
+            {buyLabel.charAt(0).toUpperCase() + buyLabel.slice(1).toLowerCase()}
+          </span>
         ) : (
-          soldOutLabel
+          <span className="normal-case">
+            {soldOutLabel.charAt(0).toUpperCase() +
+              soldOutLabel.slice(1).toLowerCase()}
+          </span>
         )}
       </span>
     </button>