kupos-ui-components-lib 9.1.2 → 9.1.3

package/src/ui/DateTimeSection/DateTimeSection.tsx

@@ -1,207 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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/ExpendedDropDown/ExpandedDropdown.tsx

@@ -1,103 +0,0 @@
-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/KuposButton/KuposButton.tsx

@@ -1,48 +0,0 @@
-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/SeatSection/SeatSection.tsx

@@ -1,207 +0,0 @@
-import React from "react";
-import CommonService from "../../utils/CommonService";
-
-const SEAT_EXCEPTIONS = ["Asiento mascota"];
-
-interface SeatType {
-  label: string;
-  fare: number;
-  key: any;
-}
-
-interface SeatSectionProps {
-  seatTypes: SeatType[];
-  availableSeats: number;
-  isSoldOut: boolean;
-  priceColor?: string;
-  currencySign?: string;
-  removeDuplicateSeats?: boolean;
-  isPeru?: boolean;
-}
-
-function getAllSeatTypes(seatTypes: SeatType[]) {
-  if (!seatTypes?.length) {
-    return [{ label: "Salon cama", price: 0 }];
-  }
-
-  let seatTypesWithPrices = seatTypes.filter(Boolean).map((val) => ({
-    label: val?.label,
-    price: val?.fare,
-  }));
-
-  seatTypesWithPrices.sort((a, b) => a.price - b.price);
-
-  return seatTypesWithPrices;
-}
-
-function getSortedSeatTypes(seatTypes: SeatType[]) {
-  if (!seatTypes?.length) {
-    return [{ label: "Salon cama", price: 0 }];
-  }
-
-  let seatTypesWithPrices = getAllSeatTypes(seatTypes);
-  const premiumIndex = seatTypesWithPrices.findIndex(
-    (item) => item.label === "Premium",
-  );
-
-  if (premiumIndex >= 3) {
-    seatTypesWithPrices[2] = seatTypesWithPrices[premiumIndex];
-  }
-
-  seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
-
-  const seenPrices = new Set<number>();
-  seatTypesWithPrices = seatTypesWithPrices.filter((seat) => {
-    if (seenPrices.has(seat.price)) return false;
-    seenPrices.add(seat.price);
-    return true;
-  });
-
-  return seatTypesWithPrices;
-}
-
-function getUniqueSeats(seatTypes: SeatType[]) {
-  const allSeatTypes = getAllSeatTypes(seatTypes);
-  const seatMap = new Map();
-
-  allSeatTypes.forEach((seat) => {
-    if (SEAT_EXCEPTIONS.includes(seat.label)) return;
-
-    // Only check if the label already exists in the map, don't compare prices
-    if (!seatMap.has(seat.label)) {
-      seatMap.set(seat.label, seat);
-    }
-  });
-
-  const uniqueByLabel = Array.from(seatMap.values());
-  const seenPrices = new Set<number>();
-  return uniqueByLabel.filter((seat) => {
-    if (seenPrices.has(seat.price)) return false;
-    seenPrices.add(seat.price);
-    return true;
-  });
-}
-
-function getNumberOfSeats(seatTypes: SeatType[]) {
-  return seatTypes.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
-}
-
-function SeatSection({
-  seatTypes,
-  availableSeats,
-  isSoldOut,
-  priceColor,
-  currencySign,
-  removeDuplicateSeats,
-  isPeru,
-}: SeatSectionProps): React.ReactElement {
-  const uniqueSeats = getUniqueSeats(seatTypes);
-  const sortedSeatTypes = getSortedSeatTypes(seatTypes);
-  const numberOfSeats = getNumberOfSeats(seatTypes);
-  const isCentered = numberOfSeats < 2 || removeDuplicateSeats;
-
-  const formatPrice = (price: number) =>
-    availableSeats <= 0
-      ? CommonService.currency(0, currencySign)
-      : CommonService.currency(price, currencySign);
-
-  const renderSeatNames = () => {
-    const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
-
-    return seats.map((val, key: number) =>
-      SEAT_EXCEPTIONS.includes(val.label) ? null : (
-        <span
-          key={key}
-          className={`flex items-center justify-between text-[13.33px] ${
-            isSoldOut ? "text-[#c0c0c0]" : ""
-          }`}
-        >
-          {typeof val.label === "string" || typeof val.label === "number"
-            ? removeDuplicateSeats && isPeru
-              ? CommonService.truncateSeatLabel(val.label)
-              : val.label
-            : null}
-        </span>
-      ),
-    );
-  };
-
-  const renderSeatPrices = () => {
-    if (removeDuplicateSeats) {
-      return uniqueSeats.map((val, key) => (
-        <span key={key}>{formatPrice(val.price)}</span>
-      ));
-    }
-
-    return sortedSeatTypes.map((val, key: number) =>
-      SEAT_EXCEPTIONS.includes(val.label) ? null : (
-        <span key={key} className="flex items-center text-[13.33px] bold-text">
-          {typeof val.price === "string" || typeof val.price === "number"
-            ? formatPrice(val.price)
-            : null}
-        </span>
-      ),
-    );
-  };
-
-  const renderLabels = () => {
-    if (isPeru) {
-      return (
-        <>
-          <span
-            className="text-[13.33px]"
-            style={{
-              color: "#999",
-              // position: "relative",
-              // bottom: numberOfSeats ? "10px" : "",
-            }}
-          >
-            Antes
-          </span>
-          <span className="text-[13.33px]">Desde</span>
-        </>
-      );
-    }
-    return renderSeatNames();
-  };
-
-  const strikethroughStyle: React.CSSProperties = {
-    color: "#ccc",
-    display: "flex",
-    textAlign: "end",
-    textDecoration: "line-through",
-    ...(isPeru
-      ? { position: "relative", top: 0 }
-      : { position: "absolute", top: isCentered ? "-10px" : "-18px" }),
-  };
-
-  return (
-    <div
-      className="relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.2rem]"
-      style={isCentered ? { alignItems: "center" } : {}}
-    >
-      <div className="flex flex-col justify-between" style={{ gap: "10px" }}>
-        {renderLabels()}
-      </div>
-      <div
-        className="flex flex-col justify-between absolute inset-y-0 right-0 left-1/2 h-full"
-        style={{
-          color: isSoldOut ? "#c0c0c0" : priceColor,
-          top: 0,
-          bottom: 0,
-          left: "clamp(60%, 65% + (100vw - 1300px) * 0.1, 65%)",
-          right: 0,
-          justifyContent: isCentered ? "center" : "",
-          gap: "10px",
-        }}
-      >
-        <span className="text-[13.33px]" style={strikethroughStyle}>
-          $1.000
-        </span>
-        {renderSeatPrices()}
-      </div>
-    </div>
-  );
-}
-
-export default SeatSection;