kupos-ui-components-lib 9.3.1 → 9.3.2

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -24,6 +24,7 @@ import opsitesLocationAnimation from "../../assets/images/anims/service_list/ops
 import opsitesPriorityStageAnimation from "../../assets/images/anims/service_list/opsitesPriorityStage.json";
 
 import bombAnimation from "../../assets/images/anims/service_list/bomb.json";
+import dotAnimation from "../../assets/images/anims/service_list/dot_animation.json";
 
 import RatingBlock from "../../ui/RatingBlock";
 import DurationBlock from "../../ui/DurationBlock";
@@ -69,6 +70,9 @@ const ANIMATION_MAP: Record<string, Record<string, any>> = {
   bombAnimation: {
     kupos: bombAnimation,
   },
+  dotAnimation: {
+    kupos: dotAnimation,
+  },
 };
 
 function ServiceItemPB({
@@ -187,6 +191,17 @@ function ServiceItemPB({
 
   const isItemExpanded = serviceItem.id === isExpand || isExpand === true;
   const grayscaleClass = isSoldOut ? "grayscale" : "";
+  const hasOfferText = Boolean(serviceItem?.offer_text);
+  const offerGradient = "linear-gradient(90deg, #ff5964 0%, #ff8842 100%)";
+  const serviceCardStyle: React.CSSProperties = hasOfferText
+    ? {
+        borderColor: "transparent",
+        borderStyle: "solid",
+        borderWidth: "6px 6px 0 6px",
+        borderRadius: isItemExpanded ? "18px 18px 0 0" : "18px",
+        background: `linear-gradient(#fff, #fff) padding-box, ${offerGradient} border-box`,
+      }
+    : {};
 
   const renderIcon = (iconKey: string, size: string = "14px") => {
     const iconValue = serviceItem.icons?.[iconKey];
@@ -350,20 +365,6 @@ function ServiceItemPB({
       ),
     },
 
-    // {
-    //   key: "directo",
-    //   width: "12%",
-    //   condition: serviceItem?.is_direct_trip === true,
-    //   render: (
-    //     <DirectoBlock
-    //       translation={translation}
-    //       getAnimationIcon={getAnimationIcon}
-    //       colors={colors}
-    //       isSoldOut={isSoldOut}
-    //     />
-    //   ),
-    // },
-
     {
       key: "pet",
       width: "20%",
@@ -432,13 +433,7 @@ function ServiceItemPB({
         />
       ) : (
         <div
-          // className={`relative ${
-          //   serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"
-          // } mt-[14px]`}
-
-          className={`relative ${
-            serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"
-          } ${
+          className={`relative ${hasOfferText ? "mb-[55px]" : "mb-[10px]"} ${
             serviceItem?.is_direct_trip ||
             serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
             showTopLabel
@@ -446,41 +441,14 @@ function ServiceItemPB({
               : "mt-[20px]"
           }	`}
         >
-          {/* <TopAmenities
-            showPromo={showPromo}
-            showTopLabel={showTopLabel}
-            isSoldOut={isSoldOut}
-            priceColor={colors.priceColor}
-            buttonColor={colors.kuposButtonColor}
-            boardingIcon={renderIcon("whiteBoardingIcon", "14px")}
-            getAnimationIcon={getAnimationIcon}
-            countdownSeconds={countdownSeconds}
-            onCountdownEnd={() => {
-              const cardEl = document.getElementById(
-                `service-card-${serviceItem.id}`,
-              );
-              if (!cardEl) return;
-              cardEl.style.border = "1px solid #ccc";
-              if (!showTopLabel) {
-                cardEl.style.borderRadius = "10px";
-              }
-            }}
-            offerText={serviceItem?.offer_text}
-          /> */}
           <div
             id={`service-card-${serviceItem.id}`}
-            className="bg-white mx-auto relative rounded-[10px] border border-[#ccc]"
-            // style={{
-            //   border:
-            //     countdownSeconds > 0 && serviceItem?.offer_text
-            //       ? `1px solid ${colors.priceColor}`
-            //       : "1px solid #ccc",
-            //   borderRadius: showTopLabel
-            //     ? "10px 0 10px 10px"
-            //     : countdownSeconds > 0 && serviceItem?.offer_text
-            //       ? "10px 0 10px 10px"
-            //       : "10px",
-            // }}
+            className={`bg-white mx-auto relative ${
+              hasOfferText
+                ? "rounded-[18px]"
+                : "rounded-[10px] border border-[#ccc]"
+            }`}
+            style={serviceCardStyle}
           >
             <div
               className=" pt-[20px]"
@@ -491,7 +459,6 @@ function ServiceItemPB({
               }}
             >
               <div
-                // className="grid text-[#464647] w-full [rid-template-columns:18%_28%_2.5%_28%_15.5%] gap-x-[2%] items-center"
                 className="grid text-[#464647] w-full [grid-template-columns:22%_28%_2.5%_24%_15.5%] gap-x-[2%] items-center"
                 style={{
                   marginTop:
@@ -499,17 +466,8 @@ function ServiceItemPB({
                 }}
               >
                 {/* OPERATOR LOGO */}
-                <div
-                  style={{
-                    display: "flex",
-                    flexDirection: "column",
-                    gap: "5px",
-                  }}
-                >
-                  <div
-                    // className="flex items-center justify-center m-[auto]"
-                    className=""
-                  >
+                <div className="flex flex-col gap-[5px]">
+                  <div>
                     <img
                       src={serviceItem.operator_details[0]}
                       alt="service logo"
@@ -565,6 +523,7 @@ function ServiceItemPB({
                     currencySign={currencySign}
                     removeDuplicateSeats={removeDuplicateSeats}
                     isPeru={isPeru}
+                    renderIcon={renderIcon}
                   />
                 </div>
 
@@ -595,6 +554,21 @@ function ServiceItemPB({
                     soldOutIcon={renderIcon("soldOutIcon", "14px")}
                     onClick={checkMidnight}
                   />
+                  {showLastSeats ? (
+                    <div
+                      className="flex justify-end mr-[11px] w-[100%] right-[0px]"
+                      style={{
+                        top: serviceDetailsLoading ? "-17px" : "-20px",
+                      }}
+                    >
+                      {serviceItem?.available_seats < 10 &&
+                        serviceItem?.available_seats > 0 && (
+                          <div className="text-[12px] text-[#464647] mt-1 text-center">
+                            ¡Últimos Asientos!
+                          </div>
+                        )}
+                    </div>
+                  ) : null}
                 </div>
               </div>
               <BottomAmenities
@@ -630,7 +604,19 @@ function ServiceItemPB({
               }}
             >
               <div
-                style={{ overflow: "hidden", minHeight: 0, marginTop: "-10px" }}
+                style={{
+                  overflow: "hidden",
+                  minHeight: 0,
+                  marginTop: "-10px",
+                  ...(hasOfferText
+                    ? {
+                        borderLeft: "6px solid #ff5964",
+                        borderRight: "6px solid #ff8842",
+                        borderRadius: "0 0 18px 18px",
+                        boxSizing: "border-box",
+                      }
+                    : {}),
+                }}
               >
                 <ExpandedDropdown
                   serviceItem={serviceItem}
@@ -649,35 +635,10 @@ function ServiceItemPB({
             <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]"
               style={{
-                backgroundColor: colors?.bottomStripColor,
+                background: offerGradient,
                 opacity: isSoldOut ? 0.5 : 1,
               }}
             >
-              {/* <div className="flex justify-between items-center w-full">
-                <div className="flex items-center">
-                  <LottiePlayer
-                    animationData={getAnimationIcon("bombAnimation")}
-                    width="18px"
-                    height="18px"
-                  />
-                  <span className="bold-text ml-[8px]">
-                    {" "}
-                    {serviceItem?.offer_text || ""}
-                  </span>
-                </div>
-                <div>
-                  Termina en&nbsp;
-                  <span
-                    className="bold-text text-end"
-                    ref={startCountdown}
-                    style={{
-                      fontVariantNumeric: "tabular-nums",
-                      display: "inline-block",
-                      // minWidth: "70px",
-                    }}
-                  />
-                </div>
-              </div> */}
               <div className="flex  justify-between items-center w-full">
                 <div className="flex items-center ">
                   <div className="flex items-center">
@@ -704,8 +665,13 @@ function ServiceItemPB({
                   </div>
                 </div>
                 <div className="flex items-center">
-                  {renderIcon("personIcon", "16px")}
-                  &nbsp;
+                  {/* {renderIcon("personIcon", "16px")} */}
+                  <LottiePlayer
+                    animationData={getAnimationIcon("dotAnimation")}
+                    width="12px"
+                    height="12px"
+                  />
+
                   <span className="ml-[6px]">
                     <span
                       className="bold-text"
@@ -722,23 +688,18 @@ function ServiceItemPB({
               </div>
             </div>
           )}
-          <div className="absolute -top-[11px] left-0  w-full flex items-center justify-end gap-[12px] pr-[15px] z-10 ">
+          <div className="absolute -top-[11px] left-0  w-full flex items-center justify-end gap-[12px] pr-[22px] z-10 ">
             {showTopLabel && (
               <div
                 className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px]  z-10`}
                 style={{
-                  backgroundColor: isSoldOut
-                    ? "#ddd"
-                    : colors.ratingBottomColor,
+                  backgroundColor: "#fff",
+                  border: `1px solid ${colors.topLabelColor}`,
+                  color: colors.topLabelColor,
                 }}
               >
                 <div className={isSoldOut ? "grayscale" : ""}>
-                  <LottiePlayer
-                    // animationData={serviceItem.icons.priorityStageAnim}
-                    animationData={getAnimationIcon("priorityStageAnim")}
-                    width="14px"
-                    height="14px"
-                  />
+                  {renderIcon("specialDeparture", "12px")}
                 </div>
                 <div
                   className={
@@ -751,50 +712,43 @@ function ServiceItemPB({
             )}
             {serviceItem?.is_transpordo && (
               <div
-                className={`flex items-center gap-[10px] py-[4px] text-white px-[14px] rounded-[38px] text-[12.5px] z-20`}
+                className={`flex items-center gap-[10px] py-[4px]  px-[14px] rounded-[38px] text-[12.5px] z-20`}
                 style={{
-                  backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
+                  backgroundColor: "#fff",
+                  border: `1px solid ${colors.topLabelColor}`,
+                  color: colors.topLabelColor,
                 }}
               >
                 {renderIcon("connectingServiceIcon", "12px")}
-                {/* <LottiePlayer
-                  animationData={serviceItem.icons.connectingServiceIcon}
-                  // animationData={getAnimationIcon(connectingServiceIcon)}
-                  width="14px"
-                  height="14px"
-                /> */}
+
                 <div>{"Conexión"}</div>
               </div>
             )}
             {serviceItem?.is_direct_trip && (
               <div
-                className={`flex items-center gap-[10px] py-[4px] text-white px-[14px] rounded-[38px] text-[12.5px] z-20 `}
+                className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20 `}
                 style={{
-                  backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
+                  backgroundColor: "#fff",
+                  border: `1px solid ${colors.topLabelColor}`,
+                  color: colors.topLabelColor,
                 }}
               >
-                <LottiePlayer
-                  // animationData={serviceItem.icons.directoAnim}
-                  animationData={getAnimationIcon("directoAnim")}
-                  width="14px"
-                  height="14px"
-                />
+                {renderIcon("directo", "12px")}
+
                 <div>{translation?.directService}</div>
               </div>
             )}
             {serviceItem?.train_type_label === "Tren Express (Nuevo)" && (
               <div
-                className={`flex items-center gap-[10px] py-[4px] text-white px-[14px] rounded-[38px] text-[12.5px] z-20 `}
+                className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20 `}
                 style={{
-                  backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
+                  backgroundColor: "#fff",
+                  border: `1px solid ${colors.topLabelColor}`,
+                  color: colors.topLabelColor,
                 }}
               >
-                <LottiePlayer
-                  // animationData={serviceItem.icons.directoAnim}
-                  animationData={getAnimationIcon("directoAnim")}
-                  width="14px"
-                  height="14px"
-                />
+                {renderIcon("directo", "12px")}
+
                 <div>{"Tren Express"}</div>
               </div>
             )}

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -50,6 +50,18 @@ function ServiceItemMobile({
   let isSoldOut = serviceItem.available_seats <= 0;
   const isLongOfferText = (serviceItem?.offer_text?.length || 0) > 35;
 
+  const hasOfferText = Boolean(serviceItem?.offer_text);
+  const offerGradient = "linear-gradient(90deg, #ff5964 0%, #ff8842 100%)";
+  const serviceCardStyle: React.CSSProperties = hasOfferText
+    ? {
+        borderColor: "transparent",
+        borderStyle: "solid",
+        borderWidth: "6px 6px 0 6px",
+        borderRadius: "18px",
+        background: `linear-gradient(#fff, #fff) padding-box, ${offerGradient} border-box`,
+      }
+    : {};
+
   const startViewerCount = (node: HTMLSpanElement | null) => {
     if (!node || !viewersConfig) return;
 
@@ -174,9 +186,6 @@ function ServiceItemMobile({
 
   return (
     <div
-      // className={`relative  ${
-      //     serviceItem.offer_text ? "mb-[55px]" : "mb-[14px]"
-      //   }
       className={`relative  ${!serviceItem.offer_text ? "mb-[14px]" : showTopLabel || serviceItem?.is_direct_trip ? "mb-[20px]" : "mb-[12px]"} ${
         serviceItem?.is_direct_trip ||
         isConexion ||
@@ -187,34 +196,13 @@ function ServiceItemMobile({
       }	`}
       style={{ backgroundColor: "#fff", zIndex: 1 }}
     >
-      {/* <TopAmenitieMobile
-        showTopLabel={showTopLabel}
-        isSoldOut={isSoldOut}
-        seatPriceColor={colors.seatPriceColor}
-        bombAnim={serviceItem.icons.bombAnim}
-        priorityStageAnim={serviceItem.icons.priorityStageAnim}
-        countdownSeconds={countdownSeconds}
-        onCountdownEnd={() => {
-          const cardEl = document.getElementById(
-            `service-card-${serviceItem.id}`,
-          );
-          if (!cardEl) return;
-          cardEl.style.border = "1px solid #ccc";
-          if (!showTopLabel) {
-            cardEl.style.borderRadius = "10px";
-          }
-        }}
-        offerText={serviceItem?.offer_text}
-      /> */}
       <div
-        className={" rounded-[20px]"}
-        style={{
-          backgroundColor: "#fff",
-          zIndex: 1,
-          // borderRadius: showTopLabel ? "10px 0 10px 10px" : "10px",
-          borderRadius: "12px",
-          border: "1px solid #ccc",
-        }}
+        className={`bg-white z-1 ${
+          hasOfferText
+            ? "rounded-[18px]"
+            : "rounded-[10px] border border-[#ccc]"
+        }`}
+        style={serviceCardStyle}
       >
         <div style={{ padding: "12px 12px 8px 12px" }}>
           {/* Header with operator info and favorite */}
@@ -331,53 +319,58 @@ function ServiceItemMobile({
           />
         </div>
 
-        <div className="absolute -top-[14px] left-0  w-full flex items-center justify-end gap-[12px] pr-[13px] z-10 ">
+        <div className="absolute -top-[9px] left-0  w-full flex items-center justify-end gap-[12px] pr-[20px] z-10 ">
           {showTopLabel && (
             <div
               className={`flex items-center gap-[2px] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px]  z-20 `}
               style={{
-                backgroundColor: isSoldOut ? "#ccc" : colors.ratingBottomColor,
+                backgroundColor: "#fff",
+                border: `1px solid ${colors.topLabelColor}`,
+                color: colors.topLabelColor,
               }}
             >
               <div className={isSoldOut ? "grayscale" : ""}>
-                <LottiePlayer
+                {renderIcon("specialDeparture", "12px")}
+                {/* <LottiePlayer
                   animationData={serviceItem.icons.priorityStageAnim}
                   width="18px"
                   height="18px"
-                />
+                /> */}
               </div>
               <div
-                className={
-                  isSoldOut ? "text-[#bbb]" : `text-[${colors.topLabelColor}]`
-                }
+                style={{
+                  color: colors.topLabelColor,
+                }}
               >
                 {showTopLabel}
               </div>
             </div>
           )}
-          {serviceItem?.is_direct_trip === true && (
+          {serviceItem?.is_direct_trip && (
             <div
-              className={`flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20  `}
+              className={`flex items-center gap-[2px] py-[5px]  px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20  `}
               style={{
-                backgroundColor: isSoldOut ? "#ddd" : colors.tooltipBgColor,
-                color: isSoldOut ? "#bbb" : colors.directoColor,
+                backgroundColor: "#fff",
+                border: `1px solid ${colors.topLabelColor}`,
+                color: colors.topLabelColor,
               }}
             >
-              <LottiePlayer
+              {renderIcon("directo", "12px")}
+              {/* <LottiePlayer
                 animationData={serviceItem.icons.directoAnim}
                 width="16px"
                 height="16px"
-              />
+              /> */}
               <div className="ml-[5px]">Directo</div>
             </div>
           )}
           {isConexion && (
             <div
-              className={`flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[11px] z-20 ${
-                isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]`
-              }`}
+              className={`flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[11px] z-20 `}
               style={{
-                backgroundColor: !isSoldOut && colors.ratingBottomColor,
+                backgroundColor: "#fff",
+                border: `1px solid ${colors.topLabelColor}`,
+                color: colors.topLabelColor,
               }}
             >
               {renderIcon("airportIcon", "14px")}
@@ -390,14 +383,17 @@ function ServiceItemMobile({
             <div
               className={`flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20 `}
               style={{
-                backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
+                backgroundColor: "#fff",
+                border: `1px solid ${colors.topLabelColor}`,
+                color: colors.topLabelColor,
               }}
             >
-              <LottiePlayer
+              {renderIcon("directo", "12px")}
+              {/* <LottiePlayer
                 animationData={serviceItem.icons.directoAnim}
                 width="20px"
                 height="20px"
-              />
+              /> */}
               <div>{"Tren Express"}</div>
             </div>
           )}
@@ -409,7 +405,7 @@ function ServiceItemMobile({
         <div
           className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
           style={{
-            backgroundColor: isSoldOut ? "#ccc" : colors?.bottomStripColor,
+            background: isSoldOut ? "#ccc" : offerGradient,
             opacity: isSoldOut ? 0.5 : 1,
             borderRadius: "0 0 14px 14px",
             zIndex: -1,
@@ -419,15 +415,79 @@ function ServiceItemMobile({
             className="flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]"
             style={{ lineHeight: 1.6 }}
           >
-            <div className="flex flex-col gap-[4px]">
+            <div className="flex justify-between items-center">
+              <div
+                className={`flex ${isLongOfferText ? "items-start" : "items-center"}`}
+              >
+                <div className={isLongOfferText ? "mt-[2px]" : ""}>
+                  <LottiePlayer
+                    animationData={serviceItem.icons.bombAnim}
+                    width="12px"
+                    height="12px"
+                  />
+                </div>
+                <div
+                  className={`ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`}
+                  style={{
+                    color: "#fff",
+                    lineHeight: 1.4,
+                  }}
+                >
+                  {/* <span className="min-[380px]:text-[12px] bold-text">
+                    {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={startCountdown}
+                      style={{
+                        fontVariantNumeric: "tabular-nums",
+                        display: "inline-block",
+                      }}
+                    />
+                  </span>
+                </div>
+              </div>
+              <div
+                className="flex items-center"
+                style={{
+                  color: "#fff",
+                }}
+              >
+                <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={startViewerCount}
+                    style={{ fontVariantNumeric: "tabular-nums" }}
+                  />{" "}
+                  <span className="bold-text">personas</span>{" "}
+                  <span>
+                    {" "}
+                    {/* {viewersConfig.label || " están viendo este viaje"} */}
+                    viendo
+                  </span>
+                </span>
+              </div>
+            </div>
+            {/* <div className="flex flex-col gap-[4px]">
               <div
                 className={`flex ${isLongOfferText ? "items-start" : "items-center"}`}
               >
                 <div className={isLongOfferText ? "mt-[2px]" : ""}>
                   <LottiePlayer
                     animationData={serviceItem.icons.bombAnim}
-                    width="18px"
-                    height="18px"
+                    width="12px"
+                    height="12px"
                   />
                 </div>
                 <div
@@ -474,7 +534,7 @@ function ServiceItemMobile({
                   </span>
                 </span>
               </div>
-            </div>
+            </div> */}
           </div>
         </div>
       )}

package/src/components/ServiceItem/mobileTypes.ts

@@ -117,6 +117,9 @@ export interface MobileServiceItemProps {
       whiteBoardingIcon?: string;
       downArrow?: string;
       personIcon?: string
+      specialDeparture?: string;
+      fireIcon?: string;
+      directoIcon?: string;
       [key: string]: string | Record<string, string | undefined> | undefined;
     };
     useLottieFor?: string[];

package/src/types.ts

@@ -112,6 +112,8 @@ export interface ServiceItemProps {
       wifiIcon?: string;
       cortinaIcon?: string;
       frazaIcon?: string;
+      specialDeparture?: string;
+      fireIcon?: string;
       [key: string]: string | Record<string, string | undefined> | undefined;
     };
     useLottieFor?: string[];