kupos-ui-components-lib 9.1.2 → 9.1.3

package/src/ui/TopAmenities/TopAmenities.tsx

@@ -1,127 +0,0 @@
-import React from "react";
-import LottiePlayer from "../../assets/LottiePlayer";
-
-interface TopAmenitiesProps {
-  showPromo: boolean;
-  showTopLabel: string | boolean;
-  isSoldOut: boolean;
-  priceColor?: string;
-  buttonColor?: string;
-  boardingIcon?: React.ReactNode;
-  getAnimationIcon: (icon: string) => any;
-  countdownSeconds?: number;
-  promoText?: string;
-  onCountdownEnd?: () => void;
-  offerText?: string;
-}
-
-function TopAmenities({
-  showPromo,
-  showTopLabel,
-  isSoldOut,
-  priceColor,
-  buttonColor,
-  boardingIcon,
-  getAnimationIcon,
-  countdownSeconds = 0,
-  onCountdownEnd,
-  offerText,
-}: TopAmenitiesProps): React.ReactElement {
-  const pad = (n: number) => String(n).padStart(2, "0");
-
-  const startCountdown = (el: HTMLSpanElement | null) => {
-    if (!el || el.dataset.timerStarted) return;
-    el.dataset.timerStarted = "true";
-    let remaining = countdownSeconds;
-
-    const update = () => {
-      const hrs = Math.floor(remaining / 3600);
-      const mins = Math.floor((remaining % 3600) / 60);
-      const secs = remaining % 60;
-      el.textContent = `${pad(hrs)}:${pad(mins)}:${pad(secs)}`;
-    };
-
-    update();
-    const timer = setInterval(() => {
-      if (remaining <= 0) {
-        clearInterval(timer);
-        const promoBar = el.closest("[data-promo-bar]") as HTMLElement;
-        if (promoBar) promoBar.style.display = "none";
-        if (onCountdownEnd) onCountdownEnd();
-        return;
-      }
-      remaining--;
-      update();
-    }, 1000);
-  };
-  return (
-    <div
-      style={{
-        display: "flex",
-        justifyContent: "flex-end",
-        position: "relative",
-        zIndex: "-1",
-      }}
-    >
-      {offerText && (
-        <div
-          data-promo-bar
-          style={{
-            backgroundColor: priceColor,
-            position: "relative",
-            right: showTopLabel ? "-21px" : "",
-            padding: "0 14px",
-            borderTopRightRadius: "10px",
-            borderTopLeftRadius: "10px",
-          }}
-        >
-          <div style={{ display: "flex", alignItems: "center" }}>
-            <LottiePlayer
-              animationData={getAnimationIcon("bombAnimation")}
-              width="20px"
-              height="20px"
-            />
-            <span
-              className="flex items-center  py-[10px] pl-[6px]  text-white text-[13.33px] z-20"
-              style={{ paddingRight: showTopLabel ? "18px" : "" }}
-            >
-              <span className="bold-text">{offerText}&nbsp;</span> | Termina
-              en&nbsp;
-              <span
-                className="bold-text"
-                ref={startCountdown}
-                style={{
-                  fontVariantNumeric: "tabular-nums",
-                  display: "inline-block",
-                  minWidth: "70px",
-                }}
-              />
-              {/* <span className="bold-text">02:10:30</span> */}
-            </span>
-          </div>
-        </div>
-      )}
-
-      {showTopLabel && (
-        <div
-          className="flex items-center py-[10px] px-[14px] text-[13.33px] z-20"
-          style={{
-            backgroundColor: isSoldOut ? "#ddd" : buttonColor,
-            borderTopRightRadius: "10px",
-            borderTopLeftRadius: "10px",
-          }}
-        >
-          <LottiePlayer
-            animationData={getAnimationIcon("priorityStageAnim")}
-            width="14px"
-            height="14px"
-          />
-          {/* {boardingIcon} */}
-          <div className="text-white pl-[6px]">{showTopLabel}</div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default TopAmenities;

package/src/ui/mobileweb/BottomAmenitiesMobile.tsx

@@ -1,169 +0,0 @@
-import React from "react";
-import LottiePlayer from "../../assets/LottiePlayer";
-
-interface BottomAmenitiesMobileProps {
-  isSoldOut: boolean;
-  amenitiesNodes: React.ReactNode;
-  hoursIcon: React.ReactNode;
-  duration: string;
-  isDirectTrip?: boolean;
-  directoColor?: string;
-  directoAnim?: any;
-  isChangeTicket?: boolean;
-  isPetSeat: boolean;
-  petSeatInfo?: Record<string, any>;
-  petFriendlyAnim?: any;
-  flexibleAnim?: any;
-  isTrackingEnabled?: boolean;
-  locationAnim?: any;
-  downArrowIcon?: string;
-  showDropdown: boolean;
-  setShowDropdown: (val: boolean) => void;
-  onDropdownToggle: () => void;
-  isItemExpanded?: boolean;
-}
-
-function BottomAmenitiesMobile({
-  isSoldOut,
-  amenitiesNodes,
-  hoursIcon,
-  duration,
-  isDirectTrip,
-  directoColor,
-  directoAnim,
-  isChangeTicket,
-  isPetSeat,
-  petSeatInfo,
-  petFriendlyAnim,
-  flexibleAnim,
-  isTrackingEnabled,
-  locationAnim,
-  downArrowIcon,
-  showDropdown,
-  setShowDropdown,
-  onDropdownToggle,
-  isItemExpanded,
-}: BottomAmenitiesMobileProps): React.ReactElement {
-  return (
-    <div className={`${"flex justify-between items-center items-center "}`}>
-      <div className="w-[55%] flex justify-between items-center">
-        <div style={{ opacity: isSoldOut ? 0.5 : 1 }}>{amenitiesNodes}</div>
-
-        <div
-          className="flex  relative "
-          style={{ color: isSoldOut ? "#bbb" : "text-[#464647]" }}
-        >
-          <div
-            className={`w-[12px] h-auto mr-[2px] ${
-              isSoldOut ? "grayscale" : ""
-            }`}
-          >
-            {hoursIcon}
-          </div>
-          &nbsp;
-          <div
-            className={`cursor-default group min-[420]:text-[13px] text-[12px] ${
-              isSoldOut ? "text-[#c0c0c0]" : ""
-            }`}
-            style={{ lineHeight: "normal" }}
-          >
-            {duration}hrs
-          </div>
-        </div>
-
-        {isDirectTrip && (
-          <div
-            className={`flex items-center gap-[2px] text-white min-[420]:text-[12px] text-[10px] z-20  `}
-            style={{
-              // backgroundColor: isSoldOut ? "#ddd" : colors.tooltipBgColor,
-              color: isSoldOut ? "#bbb" : directoColor,
-            }}
-          >
-            <LottiePlayer
-              animationData={directoAnim}
-              width="14px"
-              height="14px"
-            />
-            <div className="ml-[5px]">Directo</div>
-          </div>
-        )}
-      </div>
-
-      <div className="flex items-center">
-        <div>
-          {(isChangeTicket || isPetSeat) && (
-            <div className="flex items-center">
-              {petSeatInfo && Object.keys(petSeatInfo).length > 0 ? (
-                <div className="flex items-center">
-                  <div className={`relative group cursor-default `}>
-                    <div className="flex items-center">
-                      <div
-                        className={`mr-[5px] ${isSoldOut ? "grayscale" : ""}`}
-                      >
-                        <LottiePlayer
-                          animationData={petFriendlyAnim}
-                          width="16px"
-                          height="16px"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              ) : null}
-
-              {/* Flexible ticket */}
-              {isChangeTicket && (
-                <div className="flex items-center">
-                  <div className="relative group cursor-default">
-                    <div className="flex items-center">
-                      <div
-                        className={`mr-[5px] ${isSoldOut ? "grayscale" : ""}`}
-                      >
-                        <LottiePlayer
-                          animationData={flexibleAnim}
-                          width="16px"
-                          height="16px"
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              )}
-
-              {isTrackingEnabled && (
-                <div className="flex items-center mr-[10px]">
-                  <div
-                    className={`h-auto mr-[4px] min-[420]:text-[13px] text-[11px] text-[#464647] ${
-                      isSoldOut ? "grayscale" : ""
-                    }`}
-                  >
-                    <LottiePlayer
-                      animationData={locationAnim}
-                      width="16px"
-                      height="16px"
-                    />
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-        <div onClick={onDropdownToggle}>
-          {/* {(isChangeTicket || isPetSeat) && ( */}
-          <img
-            src={downArrowIcon}
-            alt="icon"
-            width={14}
-            height={14}
-            className={`${
-              showDropdown ? "rotate-180" : ""
-            } transition-transform duration-300`}
-          />
-          {/* )} */}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default BottomAmenitiesMobile;

package/src/ui/mobileweb/DateTimeSectionMobile.tsx

@@ -1,192 +0,0 @@
-import React from "react";
-import DateService from "../../utils/DateService";
-import SeatSectionMobile from "./SeatSectionMobile";
-
-interface DateTimeSectionMobileProps {
-  onBookButtonPress: () => void;
-  isCiva: boolean;
-  isSoldOut: boolean;
-  isLinatal: boolean;
-  isPeru: boolean;
-  orignLabel?: React.ReactNode;
-  destinationLabel?: React.ReactNode;
-  originIcon?: string;
-  destinationIcon?: string;
-  travelDate: string;
-  arrivalDate: string;
-  depTime: string;
-  arrTime: string;
-  seatTypes: any[];
-  seatPriceColor: string;
-  currencySign: string;
-  availableSeats: number;
-  removeDuplicateSeats?: boolean;
-}
-
-const pad = (n: number) => (n < 10 ? "0" + n : String(n));
-
-const getCleanedDepTime = (raw: string) => {
-  const depTimeStr = raw || "";
-  const hasAM = depTimeStr.includes("AM");
-  const hasPM = depTimeStr.includes("PM");
-  const [timePart] = depTimeStr.split(/AM|PM/).map((s) => s.trim());
-  const [hour, minute] = timePart.split(":").map(Number);
-
-  let cleaned: string;
-  if (hasAM) {
-    cleaned = hour === 12 ? `00:${pad(minute)}` : `${pad(hour)}:${pad(minute)}`;
-  } else if (hasPM) {
-    cleaned =
-      hour === 12 ? `${hour}:${pad(minute)}` : `${hour + 12}:${pad(minute)}`;
-  } else {
-    cleaned = timePart;
-  }
-
-  return { cleaned, hasAM, hasPM };
-};
-
-interface TimeRowProps {
-  label?: React.ReactNode;
-  icon?: string;
-  alt: string;
-  date: string;
-  timeContent: React.ReactNode;
-  isSoldOut: boolean;
-}
-
-const TimeRow: React.FC<TimeRowProps> = ({
-  label,
-  icon,
-  alt,
-  date,
-  timeContent,
-  isSoldOut,
-}) => (
-  <div
-    className={`flex items-center min-[420]:text-[13px] text-[12px] justify-between ${
-      isSoldOut ? "text-[#c0c0c0]" : ""
-    }`}
-  >
-    <div className="flex items-center" style={{ flex: 1 }}>
-      <div>
-        {" "}
-        {label ? (
-          <div className="w-[60px]">{label}</div>
-        ) : (
-          <div className="w-[12px] h-auto mr-[5px]">
-            <img
-              src={icon}
-              alt={alt}
-              className={`w-[12px] h-auto mr-[5px] ${
-                isSoldOut ? "grayscale" : ""
-              }`}
-            />
-          </div>
-        )}
-      </div>
-      <div
-        className="flex items-center relative capitalize justify-between"
-        style={{ flex: 1 }}
-      >
-        <span className="cursor-pointer black-text">
-          {DateService.getServiceItemDate(date)}
-        </span>
-        <div className="absolute left-[50%]">•</div>
-        <div className="font-[900] relative black-text">{timeContent}</div>
-      </div>
-    </div>
-  </div>
-);
-
-function DateTimeSectionMobile({
-  onBookButtonPress,
-  isCiva,
-  isSoldOut,
-  isLinatal,
-  isPeru,
-  orignLabel,
-  destinationLabel,
-  originIcon,
-  destinationIcon,
-  travelDate,
-  arrivalDate,
-  depTime,
-  arrTime,
-  seatTypes,
-  seatPriceColor,
-  currencySign,
-  availableSeats,
-  removeDuplicateSeats,
-}: DateTimeSectionMobileProps): React.ReactElement {
-  const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
-
-  const depTimeContent = isLinatal ? (
-    <div>
-      <span>
-        {" "}
-        {cleanedDepTime} <span>{hasPM ? "PM" : hasAM ? "AM" : ""}</span>
-      </span>
-      <span>
-        {depTime.includes("AM") || depTime.includes("PM")
-          ? null
-          : DateService.ampmOnly(depTime)}
-      </span>
-    </div>
-  ) : (
-    DateService.formatTime(depTime)
-  );
-
-  return (
-    <div
-      className="flex justify-between gap-[5px] w-full"
-      onClick={onBookButtonPress}
-    >
-      {/* DATE AND TIME */}
-      <div
-        className="min-h-[2.5rem] flex flex-col justify-between gap-[4px] w-[50%] "
-        style={{ justifyContent: isCiva && "center" }}
-      >
-        <TimeRow
-          label={orignLabel}
-          icon={originIcon}
-          alt="origin"
-          date={travelDate}
-          timeContent={depTimeContent}
-          isSoldOut={isSoldOut}
-        />
-        {isCiva ? null : (
-          <TimeRow
-            label={destinationLabel}
-            icon={destinationIcon}
-            alt="destination"
-            date={arrivalDate}
-            timeContent={DateService.formatTime(arrTime)}
-            isSoldOut={isSoldOut}
-          />
-        )}
-      </div>
-      {isPeru ? null : (
-        <div
-          style={{
-            width: "1px",
-            height: "2.5rem",
-            backgroundColor: "#ccc",
-            margin: "auto",
-          }}
-        ></div>
-      )}
-      {/* SEATS */}
-      <SeatSectionMobile
-        seatTypes={seatTypes}
-        isSoldOut={isSoldOut}
-        isPeru={isPeru}
-        seatPriceColor={seatPriceColor}
-        currencySign={currencySign}
-        availableSeats={availableSeats}
-        removeDuplicateSeats={removeDuplicateSeats}
-      />
-    </div>
-  );
-}
-
-export default DateTimeSectionMobile;

package/src/ui/mobileweb/ExpandedDropdownMobile.tsx

@@ -1,56 +0,0 @@
-import React from "react";
-
-interface ExpandedDropdownMobileProps {
-  serviceItem: {
-    change_ticket_hours?: number;
-    pet_seat_info?: Record<string, any>;
-    is_change_ticket?: boolean;
-    is_tracking_enabled?: boolean;
-  };
-}
-
-function ExpandedDropdownMobile({
-  serviceItem,
-}: ExpandedDropdownMobileProps): React.ReactElement {
-  return (
-    <div
-      className="px-[12px] pt-[22px] pb-[12px] relative -z-9"
-      style={{
-        backgroundColor: "#ffefef",
-        borderRadius: "0 0 14px 14px",
-      }}
-    >
-      <div
-        className="flex flex-col gap-[8px] text-[11px] min-[420px]:text-[12px] text-[#464647]"
-        style={{ lineHeight: 1.6 }}
-      >
-        <div className="flex gap-[6px]">
-          <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-[6px]">
-          <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 ExpandedDropdownMobile;