kupos-ui-components-lib 9.1.1 → 9.1.2

package/src/components/ServiceItem/mobileTypes.ts

@@ -113,6 +113,9 @@ export interface MobileServiceItemProps {
       seatFallBackIcon: string;
       headPhoneIcon?: string;
       allowCancellationIcon?: string;
+      bombAnim?: string;
+      whiteBoardingIcon?: string;
+      downArrow?: string;
       [key: string]: string | Record<string, string | undefined> | undefined;
     };
     useLottieFor?: string[];
@@ -121,6 +124,8 @@ export interface MobileServiceItemProps {
   terminals?: any[];
   showDropdown?: boolean;
   setShowDropdown?: (value: boolean) => void;
+  isExpanded?: string | null;
+  setIsExpanded?: (value: string | null) => void;
   setAmenetiesAtomValue?: (
     value:
       | {

package/src/components/ServiceItem/types.ts

@@ -117,6 +117,9 @@ export interface ServiceItemProps {
       seatFallBackIcon: string;
       headPhoneIcon?: string;
       allowCancellationIcon?: string;
+      whiteBoardingIcon?: string
+      bombJson?:string
+      downArrow?:string
 
       [key: string]: string | Record<string, string | undefined> | undefined;
     };
@@ -192,7 +195,11 @@ export interface ServiceItemProps {
   petFriendlyAnim?: string;
   priorityStageAnim?: string;
   promoAnim?: string;
+  bombAnimation?: string;
   isPeru?: boolean;
   siteType?: "kupos" | "pullman" | "opsites" | "linatal";
   isAllinBus?: boolean;
+  isExpand?: any;
+  setIsExpand?: (value: any) => void;
+  coachKey?: number
 }

package/src/ui/AmenitiesBlock.tsx

@@ -6,7 +6,9 @@ const DEFAULT_PRIORITY_IDS = ["2", "3", "13"];
 const TOOLTIP_CLASS =
   "hidden group-hover:block absolute top-[30px] left-1/2 -translate-x-1/2 text-white rounded-[14px] whitespace-nowrap mt-2.5 text-center shadow-service text-[13.33px]";
 
-const getAmenityBaseName = (amenityStr) => amenityStr?.split(".")[0] ?? "";
+const getAmenityBaseName = (amenityStr) => {
+  return amenityStr?.split(".")[0] ?? "";
+};
 
 const isWater = (amenityStr) =>
   getAmenityBaseName(amenityStr)?.toUpperCase() === "WATER";
@@ -81,18 +83,7 @@ const AmenitiesBlock = ({
   const grayscaleClass = isSoldOut ? "grayscale" : "";
 
   return (
-    <div className="flex items-center gap-[6px]">
-      {/* GPS */}
-      {serviceItem?.is_tracking_enabled && (
-        <div className={grayscaleClass}>
-          <LottiePlayer
-            animationData={getAnimationIcon("locationAnim")}
-            width="20px"
-            height="20px"
-          />
-        </div>
-      )}
-
+    <div className="relative flex items-center gap-[6px] group cursor-pointer">
       {/* AMENITIES */}
       {visibleAmenities.map((val, key) => {
         const raw = metaData.amenities[val];
@@ -100,32 +91,51 @@ const AmenitiesBlock = ({
         const baseName = getAmenityBaseName(raw);
 
         return (
-          <div key={key} className="relative group cursor-pointer">
+          <div key={key}>
             <div className={grayscaleClass}>
               <SvgAmenities
                 moreAnemities={false}
                 name={baseName.toLowerCase()}
               />
             </div>
-
-            {/* Tooltip */}
-            <div
-              className={TOOLTIP_CLASS}
-              style={{
-                backgroundColor: colors.tooltipColor,
-                zIndex: 21,
-                padding: "12px",
-              }}
-            >
-              <TooltipArrow color={colors.tooltipColor} />
-              {getAmenityName(baseName.split("_").join(" "))}
-            </div>
           </div>
         );
       })}
 
+      {/* Tooltip – show ALL amenities on container hover */}
+      <div
+        className={TOOLTIP_CLASS}
+        style={{
+          backgroundColor: colors.bottomStripColor,
+          zIndex: 21,
+          padding: "12px",
+        }}
+      >
+        <TooltipArrow color={colors.tooltipColor} />
+        <div className="flex flex-col gap-[10px]">
+          {amenities.map((id, i) => {
+            const rawItem = metaData.amenities[id];
+            if (isWater(rawItem)) return null;
+            const name = getAmenityBaseName(rawItem);
+            return (
+              <div
+                key={i}
+                className="flex items-center gap-[5px] text-xs whitespace-nowrap"
+              >
+                <SvgAmenities
+                  moreAnemities={true}
+                  name={name.toUpperCase()}
+                  color="white"
+                />
+                {getAmenityName(name.split("_").join(" "))}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
       {/* PLUS ICON */}
-      {shouldShowPlus && (
+      {/* {shouldShowPlus && (
         <div className="relative ml-1 cursor-pointer">
           <div className="group">
             <img
@@ -167,7 +177,18 @@ const AmenitiesBlock = ({
             </div>
           </div>
         </div>
-      )}
+      )} */}
+
+      {/* GPS */}
+      {/* {serviceItem?.is_tracking_enabled && (
+        <div className={grayscaleClass}>
+          <LottiePlayer
+            animationData={getAnimationIcon("locationAnim")}
+            width="20px"
+            height="20px"
+          />
+        </div>
+      )} */}
     </div>
   );
 };

package/src/ui/BottomAmenities/BottomAmenities.tsx

@@ -0,0 +1,110 @@
+import React from "react";
+import LottiePlayer from "../../assets/LottiePlayer";
+import FlexibleBlock from "../FlexibleBlock";
+import PetBlock from "../PetBlock";
+
+interface ItemEntry {
+  key: string;
+  render: React.ReactNode;
+}
+
+interface BottomAmenitiesProps {
+  otherItems: ItemEntry[];
+  serviceItem: {
+    id: string;
+    is_tracking_enabled?: boolean;
+    is_change_ticket?: boolean;
+    pet_seat_info?: Record<string, any>;
+  };
+  grayscaleClass: string;
+  isSoldOut: boolean;
+  isItemExpanded: boolean;
+  colors: Record<string, any>;
+  translation?: { [key: string]: string };
+  getAnimationIcon: (icon: string) => any;
+  downArrowIcon?: React.ReactNode;
+  onToggleExpand: () => void;
+}
+
+function BottomAmenities({
+  otherItems,
+  serviceItem,
+  grayscaleClass,
+  isSoldOut,
+  isItemExpanded,
+  colors,
+  translation,
+  getAnimationIcon,
+  downArrowIcon,
+  onToggleExpand,
+}: BottomAmenitiesProps): React.ReactElement {
+  const hasPetInfo =
+    serviceItem.pet_seat_info &&
+    Object.keys(serviceItem.pet_seat_info).length > 0;
+
+  const showDownArrow =
+    (serviceItem?.is_change_ticket && serviceItem.pet_seat_info) ||
+    (serviceItem.pet_seat_info &&
+      Object.keys(serviceItem.pet_seat_info).length > 0);
+
+  return (
+    <div className="flex items-center mt-[15px] border-t border-[#eee] pt-[6px]">
+      {/* OTHER ITEMS (GRID) */}
+      <div
+        className="grid items-center gap-[2%] flex-1 "
+        style={{
+          // gridTemplateColumns: " 28% 21% 23% 23%",
+          gridTemplateColumns: "28% 17% 23% 23%",
+        }}
+      >
+        {otherItems.map((item) => (
+          <div key={item.key} className="flex items-center">
+            {item.render}
+          </div>
+        ))}
+      </div>
+
+      {/* PET + FLEXIBLE (always visible) */}
+      <div className="flex items-center justify-end shrink-0 ml-[5px] w-[150px]">
+        {serviceItem?.is_tracking_enabled && (
+          <div className={grayscaleClass + " mr-[10px]"}>
+            <LottiePlayer
+              animationData={getAnimationIcon("locationAnim")}
+              width="20px"
+              height="20px"
+            />
+          </div>
+        )}
+        {serviceItem.is_change_ticket && (
+          <FlexibleBlock
+            translation={translation}
+            getAnimationIcon={getAnimationIcon}
+            colors={colors}
+            serviceItem={serviceItem}
+            isSoldOut={isSoldOut}
+          />
+        )}
+        {hasPetInfo && (
+          <PetBlock
+            translation={translation}
+            getAnimationIcon={getAnimationIcon}
+            colors={colors}
+            isSoldOut={isSoldOut}
+          />
+        )}
+
+        {/* DOWN ARROW ICON */}
+        {/* {showDownArrow ? ( */}
+        <div
+          className={`flex items-center cursor-pointer ml-[4px] transition-transform duration-300 w-[14px] h-[14px] ${isItemExpanded ? "rotate-180" : ""}`}
+          onClick={onToggleExpand}
+        >
+          {downArrowIcon}
+        </div>
+        {/* ) : null} */}
+      </div>
+    </div>
+  );
+}
+
+export default BottomAmenities;

package/src/ui/DateTimeSection/DateTimeSection.tsx

@@ -0,0 +1,207 @@
+import React from "react";
+import DateService from "../../utils/DateService";
+import StageTooltip from "../StagesTooltip";
+
+interface DateTimeSectionProps {
+  serviceItem: {
+    icons?: { origin?: string; destination?: string; [key: string]: any };
+    boarding_stages?: string;
+    dropoff_stages?: string;
+    travel_date: string;
+    arrival_date: string;
+    dep_time: string;
+    arr_time: string;
+    [key: string]: any;
+  };
+  isSoldOut: boolean;
+  isCiva?: boolean;
+  isLinatal?: boolean;
+  removeArrivalTime?: boolean;
+  orignLabel?: string;
+  destinationLabel?: string;
+  busStage?: Record<string, string>;
+  metaData?: any;
+  colors: Record<string, any>;
+}
+
+function DateTimeSection({
+  serviceItem,
+  isSoldOut,
+  isCiva,
+  isLinatal,
+  removeArrivalTime,
+  orignLabel,
+  destinationLabel,
+  busStage,
+  metaData,
+  colors,
+}: DateTimeSectionProps): React.ReactElement {
+  const depTime = serviceItem.dep_time || "";
+  const hasAM = depTime.includes("AM");
+  const hasPM = depTime.includes("PM");
+
+  const convertTo24Hour = (depTime: string): string => {
+    const hasAM = depTime.includes("AM");
+    const hasPM = depTime.includes("PM");
+    const [timePart] = depTime.split(/AM|PM/).map((part) => part.trim());
+    const [hour, minute] = timePart.split(":").map(Number);
+    const pad = (n: number) => (n < 10 ? "0" + n : String(n));
+
+    if (hasAM) {
+      return `${pad(hour === 12 ? 0 : hour)}:${pad(minute)}`;
+    }
+    if (hasPM) {
+      return `${hour === 12 ? hour : hour + 12}:${pad(minute)}`;
+    }
+    return timePart;
+  };
+
+  const cleanedDepTime = convertTo24Hour(depTime);
+
+  return (
+    <div
+      className={`min-h-[2.2rem] grid grid-cols-[26px_auto_26%_1fr] gap-x-4 items-center text-[13.33px] ${
+        isSoldOut ? "text-[#c0c0c0]" : ""
+      }`}
+      style={{
+        gridTemplateRows: "1fr",
+      }}
+    >
+      {/* ICONS COLUMN */}
+      <div className="flex flex-col gap-[4px]">
+        {/* Origin Icon */}
+        {orignLabel ? (
+          <div className="w-[60px] h-[20px] flex items-center">
+            {orignLabel}
+          </div>
+        ) : (
+          <div className="h-[20px] flex items-center">
+            <img
+              src={serviceItem.icons?.origin}
+              alt="origin"
+              className={`w-[16px] h-auto mr-[8px] ${
+                isSoldOut ? "grayscale" : ""
+              }`}
+            />
+          </div>
+        )}
+
+        {/* Destination Icon */}
+        {!isCiva &&
+          (destinationLabel ? (
+            <div className="w-[60px] h-[20px] flex items-center">
+              {destinationLabel}
+            </div>
+          ) : (
+            <div className="h-[20px] flex items-center">
+              <img
+                src={serviceItem.icons?.destination}
+                className={`w-[16px] h-auto mr-[8px] ${
+                  isSoldOut ? "grayscale" : ""
+                }`}
+                style={{ opacity: isSoldOut ? 0.5 : 1 }}
+              />
+            </div>
+          ))}
+      </div>
+
+      {/* DATES COLUMN */}
+      <div className="flex flex-col gap-[4px]">
+        {/* Departure Date */}
+        <StageTooltip
+          stageData={serviceItem.boarding_stages}
+          direction={1}
+          terminals={busStage}
+          serviceItem={serviceItem}
+          metaData={metaData}
+          colors={colors}
+        >
+          <span className="cursor-pointer bold-text capitalize">
+            {DateService.getServiceItemDate(serviceItem.travel_date)}
+          </span>
+        </StageTooltip>
+
+        {/* Arrival Date */}
+        {!isCiva && (
+          <StageTooltip
+            stageData={serviceItem.boarding_stages}
+            direction={1}
+            terminals={busStage}
+            serviceItem={serviceItem}
+            metaData={metaData}
+            colors={colors}
+          >
+            <span className="cursor-pointer bold-text capitalize">
+              {DateService.getServiceItemDate(serviceItem.arrival_date)}
+            </span>
+          </StageTooltip>
+        )}
+      </div>
+
+      {/* DOTS COLUMN */}
+      <div className="flex flex-col gap-[4px] items-center">
+        {/* Departure Dot */}
+        <div className="h-[20px] flex items-center justify-center">
+          <div>•</div>
+        </div>
+
+        {/* Arrival Dot */}
+        {!isCiva && (
+          <div className="h-[20px] flex items-center justify-center">
+            {removeArrivalTime ? null : serviceItem.arr_time ? (
+              <div>•</div>
+            ) : null}
+          </div>
+        )}
+      </div>
+
+      {/* TIMES COLUMN */}
+      <div className="flex flex-col gap-[4px]">
+        {/* Departure Time */}
+        <StageTooltip
+          stageData={serviceItem.dropoff_stages}
+          direction={2}
+          terminals={busStage}
+          serviceItem={serviceItem}
+          metaData={metaData}
+          colors={colors}
+        >
+          <div className="font-[900] bold-text">
+            {isLinatal ? (
+              <>
+                {cleanedDepTime} <span>{hasPM ? "PM" : hasAM ? "AM" : ""}</span>
+                {!serviceItem?.dep_time.includes("AM") &&
+                  !serviceItem?.dep_time.includes("PM") &&
+                  DateService.ampmOnly(serviceItem.dep_time)}
+              </>
+            ) : (
+              DateService.formatTime(serviceItem.dep_time)
+            )}
+          </div>
+        </StageTooltip>
+
+        {/* Arrival Time */}
+        {!isCiva && (
+          <StageTooltip
+            stageData={serviceItem.dropoff_stages}
+            direction={2}
+            terminals={busStage}
+            serviceItem={serviceItem}
+            metaData={metaData}
+            colors={colors}
+          >
+            <div className="font-[900] bold-text">
+              {removeArrivalTime
+                ? "\u00A0"
+                : serviceItem.arr_time
+                  ? DateService.formatTime(serviceItem.arr_time)
+                  : "\u00A0"}
+            </div>
+          </StageTooltip>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default DateTimeSection;

package/src/ui/DirectoBlock.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import LottiePlayer from "../assets/LottiePlayer";
+
+const DirectoBlock = ({ translation, isSoldOut, colors, getAnimationIcon }) => (
+  <div className="flex items-center relative whitespace-nowrap mt-[3px]">
+    <div className={`w-[18px] mr-[4px] ${isSoldOut ? "grayscale" : ""}`}>
+      <LottiePlayer
+        animationData={getAnimationIcon("directoAnim")}
+        width="14px"
+        height="14px"
+      />
+    </div>
+
+    <div className="group text-[13.33px] cursor-pointer">
+      {translation?.directService}
+      <div
+        className="hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-nowrap w-fit z-10 mt-2.5 text-center shadow-service text-[12px]"
+        style={{ backgroundColor: colors.bottomStripColor }}
+      >
+        {/* Tooltip arrow */}
+        <div
+          className="tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent"
+          style={{ borderBottomColor: colors.bottomStripColor }}
+        ></div>
+        {translation?.directServiceText}
+      </div>
+    </div>
+  </div>
+);
+
+export default DirectoBlock;

package/src/ui/DurationBlock.tsx

@@ -7,21 +7,21 @@ const DurationBlock = ({
   isSoldOut,
   colors,
 }) => (
-  <div className="flex items-baseline relative whitespace-nowrap">
+  <div className="flex items-baseline relative whitespace-nowrap ">
     <div className={`w-[18px] mr-[4px] ${isSoldOut ? "grayscale" : ""}`}>
       {renderIcon("hours", "14px")}
     </div>
 
-    <div className="group text-[13.33px]">
+    <div className="group text-[13.33px] cursor-pointer">
       {serviceItem.duration} {translation.hours}
       <div
         className="hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[188px] text-center break-normal shadow-service text-[12px]"
-        style={{ backgroundColor: colors.tooltipColor }}
+        style={{ backgroundColor: colors.bottomStripColor }}
       >
         {/* Tooltip arrow */}
         <div
           className="tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent"
-          style={{ borderBottomColor: colors.tooltipColor }}
+          style={{ borderBottomColor: colors.bottomStripColor }}
         ></div>
         Duración estimada del viaje
       </div>

package/src/ui/ExpendedDropDown/ExpandedDropdown.tsx

@@ -0,0 +1,103 @@
+import React from "react";
+import LottiePlayer from "../../assets/LottiePlayer";
+
+interface ExpandedDropdownProps {
+  serviceItem: {
+    change_ticket_hours?: number;
+    pet_seat_info?: Record<string, any>;
+    is_change_ticket?: boolean;
+    is_tracking_enabled?: boolean;
+  };
+}
+
+function ExpandedDropdown({
+  serviceItem,
+}: ExpandedDropdownProps): React.ReactElement {
+  const hasPetInfo =
+    serviceItem.pet_seat_info &&
+    Object.keys(serviceItem.pet_seat_info).length > 0;
+
+  return (
+    <div
+      className="px-[15px] pt-[26px] pb-[14px] -mt-[16px] pt-[35px] relative -z-9"
+      style={{
+        backgroundColor: "#ffefef",
+        borderRadius: "0 0 10px 10px",
+        // border: showPromo ? `1px solid ${colors.priceColor}` : "1px solid #ccc",
+        // border: `1px solid ${colors.priceColor}`,
+
+        // borderTop: "none",
+      }}
+    >
+      {/* <div className="flex flex-col gap-[12px] text-[13px] text-[#464647]">
+        {hasPetInfo && (
+          <div className="flex items-center gap-[10px]">
+            <LottiePlayer
+              animationData={getAnimationIcon("petFriendlyAnim")}
+              width="20px"
+              height="20px"
+            />
+            <div className="h-auto mr-[4px] text-[13px] text-[#464647] bold-text">
+              <span>{translation?.petFriendly}</span>
+            </div>
+          </div>
+        )}
+        {serviceItem.is_change_ticket && (
+          <div className="flex items-center gap-[10px]">
+            <LottiePlayer
+              animationData={getAnimationIcon("flexibleIcon")}
+              width="20px"
+              height="20px"
+            />
+            <div className="h-auto mr-[4px] text-[13px] text-[#464647] bold-text">
+              <span>{translation?.flexible}</span>
+            </div>
+          </div>
+        )}
+        {serviceItem?.is_tracking_enabled && (
+          <div className={`${grayscaleClass} flex items-center gap-[10px]`}>
+            <LottiePlayer
+              animationData={getAnimationIcon("locationAnim")}
+              width="20px"
+              height="20px"
+            />
+            <div className="h-auto mr-[4px] text-[13px] text-[#464647] bold-text">
+              <span>{"GPS Tracker"}</span>
+            </div>
+          </div>
+        )}
+      </div> */}
+      <div
+        className="flex flex-col gap-[10px] text-[13px] text-[#464647]"
+        style={{ lineHeight: 1.6 }}
+      >
+        <div className="flex gap-[8px] text-[13.33px]">
+          <span style={{ marginTop: "2px" }}>•</span>
+          <span>
+            <span className="bold-text">Políticas de anulación:</span> Tu pasaje
+            puede ser anulado de forma online{" "}
+            <span className="bold-text">
+              hasta {serviceItem?.change_ticket_hours ?? 6} horas antes
+            </span>{" "}
+            de la salida del bus. Al anular tu pasaje recibirás una devolución
+            del 85% del monto de tu compra.
+          </span>
+        </div>
+        <div className="flex gap-[8px]">
+          <span style={{ marginTop: "2px" }}>•</span>
+          <span>
+            <span className="bold-text">Políticas de cambios:</span> Tu pasaje
+            puede ser cambiado de manera online{" "}
+            <span className="bold-text">
+              hasta {serviceItem?.change_ticket_hours ?? 6} horas antes
+            </span>{" "}
+            de la salida del bus. El monto será reembolsado a tu billetera
+            kupospay.
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ExpandedDropdown;

package/src/ui/FlexibleBlock.tsx

@@ -9,7 +9,7 @@ const FlexibleBlock = ({
   isSoldOut,
 }) => (
   <div className="flex items-center">
-    <div className="relative group cursor-default">
+    <div className="relative group cursor-pointer">
       <div className="flex items-center">
         <div className={`mr-[5px] ${isSoldOut ? "grayscale" : ""}`}>
           <LottiePlayer
@@ -19,21 +19,22 @@ const FlexibleBlock = ({
             height="20px"
           />
         </div>
-        <div className="h-auto mr-[4px] text-[13px] text-[#464647]">
+        {/* <div className="h-auto mr-[4px] text-[13px] text-[#464647]">
           <span>{translation?.flexible}</span>
-        </div>
+        </div> */}
       </div>
       <div
         className="hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[230px] text-center break-normal shadow-service text-[12px]"
         style={{
-          backgroundColor: colors.tooltipColor,
+          backgroundColor: colors.bottomStripColor,
           lineHeight: "1.5",
+          zIndex: "1000",
         }}
       >
         {/* Tooltip arrow */}
         <div
           className="tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent "
-          style={{ borderBottomColor: colors.tooltipColor }}
+          style={{ borderBottomColor: colors.bottomStripColor }}
         ></div>
         Esta empresa permite cambios sin costo hasta (
         {serviceItem?.change_ticket_hours ?? 6}) horas antes del viaje.