kupos-ui-components-lib 9.0.7 → 9.0.8

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[];

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

@@ -82,17 +82,6 @@ const AmenitiesBlock = ({
 
   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>
-      )}
-
       {/* AMENITIES */}
       {visibleAmenities.map((val, key) => {
         const raw = metaData.amenities[val];
@@ -108,7 +97,7 @@ const AmenitiesBlock = ({
               />
             </div>
 
-            {/* Tooltip */}
+            {/* Tooltip – show ALL amenities */}
             <div
               className={TOOLTIP_CLASS}
               style={{
@@ -118,14 +107,33 @@ const AmenitiesBlock = ({
               }}
             >
               <TooltipArrow color={colors.tooltipColor} />
-              {getAmenityName(baseName.split("_").join(" "))}
+              <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>
           </div>
         );
       })}
 
       {/* PLUS ICON */}
-      {shouldShowPlus && (
+      {/* {shouldShowPlus && (
         <div className="relative ml-1 cursor-pointer">
           <div className="group">
             <img
@@ -167,7 +175,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-[6px]">
+        {/* 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-[6px]">
+        {/* 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-[6px] 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-[6px]">
+        {/* 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
+                ? null
+                : serviceItem.arr_time
+                  ? DateService.formatTime(serviceItem.arr_time)
+                  : null}
+            </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.tooltipColor }}
+      >
+        {/* 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 }}
+        ></div>
+        {translation?.directServiceText}
+      </div>
+    </div>
+  </div>
+);
+
+export default DirectoBlock;

package/src/ui/DurationBlock.tsx

@@ -7,12 +7,12 @@ 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]"

package/src/ui/ExpendedDropDown/ExpandedDropdown.tsx

@@ -0,0 +1,115 @@
+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;
+  };
+  showPromo: boolean;
+  colors: {
+    priceColor?: string;
+  };
+  grayscaleClass: string;
+  translation?: { [key: string]: string };
+  getAnimationIcon: (icon: string) => any;
+}
+
+function ExpandedDropdown({
+  serviceItem,
+  showPromo,
+  colors,
+  grayscaleClass,
+  translation,
+  getAnimationIcon,
+}: 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,9 +19,9 @@ 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]"

package/src/ui/KuposButton/KuposButton.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+interface KuposButtonProps {
+  isSoldOut: boolean;
+  isLoading: boolean;
+  buttonColor?: string;
+  buyLabel?: string;
+  soldOutLabel?: string;
+  soldOutIcon?: React.ReactNode;
+  onClick: () => void;
+}
+
+function KuposButton({
+  isSoldOut,
+  isLoading,
+  buttonColor,
+  buyLabel,
+  soldOutLabel,
+  soldOutIcon,
+  onClick,
+}: KuposButtonProps): React.ReactElement {
+  const isDisabled = isLoading || isSoldOut;
+
+  return (
+    <button
+      onClick={() => (!isSoldOut ? onClick() : null)}
+      disabled={isLoading}
+      className="w-full py-[12px] text-[12px] font-bold text-white rounded-[14px] border-none px-[20px] flex items-center justify-center"
+      style={{
+        backgroundColor: isDisabled ? "lightgray" : buttonColor,
+        cursor: isDisabled ? "not-allowed" : "pointer",
+      }}
+    >
+      <span className="min-w-[75px] flex justify-center items-center bold-text uppercase">
+        {isSoldOut ? soldOutIcon : null}
+        {isLoading ? (
+          <span className="loader-circle"></span>
+        ) : !isSoldOut ? (
+          buyLabel
+        ) : (
+          soldOutLabel
+        )}
+      </span>
+    </button>
+  );
+}
+
+export default KuposButton;

package/src/ui/PetBlock.tsx

@@ -13,9 +13,9 @@ const PetBlock = ({ translation, getAnimationIcon, colors, isSoldOut }) => (
             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?.petFriendly}</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"