kupos-ui-components-lib 9.0.6 → 9.0.7

package/src/ui/SeatSection/SeatSection.tsx

@@ -1,187 +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);
-
-  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);
-    }
-  });
-
-  return Array.from(seatMap.values());
-}
-
-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" }}>
-            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.5rem]"
-      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;

package/src/ui/TopAmenities/TopAmenities.tsx

@@ -1,82 +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;
-}
-
-function TopAmenities({
-  showPromo,
-  showTopLabel,
-  isSoldOut,
-  priceColor,
-  buttonColor,
-  boardingIcon,
-  getAnimationIcon,
-}: TopAmenitiesProps): React.ReactElement {
-  return (
-    <div
-      style={{
-        display: "flex",
-        justifyContent: "flex-end",
-        position: "relative",
-        zIndex: "-1",
-      }}
-    >
-      {/* {showPromo && ( */}
-      <div
-        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="14px"
-            height="14px"
-          />
-          <span
-            className="flex items-center  py-[10px] pl-[6px]  text-white text-[13.33px] z-20"
-            style={{ paddingRight: showTopLabel ? "18px" : "" }}
-          >
-            <span className="bold-text">kuponazo 20%&nbsp;</span> | Termina
-            en&nbsp;
-            <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,168 +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;
-}
-
-function BottomAmenitiesMobile({
-  isSoldOut,
-  amenitiesNodes,
-  hoursIcon,
-  duration,
-  isDirectTrip,
-  directoColor,
-  directoAnim,
-  isChangeTicket,
-  isPetSeat,
-  petSeatInfo,
-  petFriendlyAnim,
-  flexibleAnim,
-  isTrackingEnabled,
-  locationAnim,
-  downArrowIcon,
-  showDropdown,
-  setShowDropdown,
-  onDropdownToggle,
-}: 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>
-      {/* Rating */}
-      {/* <div>
-        <div className="flex items-center ">
-          <div
-            className="flex items-center cursor-pointer "
-            style={{ color: isSoldOut ? "#bbb" : "text-[#464647]" }}
-          >
-            <span className="ml-[3px]  min-[420]:text-[13px] text-[12px] bold-text">
-              {serviceItem.operator_details[2]}
-            </span>
-          </div>
-        </div>
-      </div> */}
-
-      {/* <div style={{ opacity: isSoldOut ? 0.5 : 1 }}>{amenitiesNodes}</div> */}
-
-      <div>
-        {(isChangeTicket || isPetSeat) && (
-          <div onClick={onDropdownToggle} 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>
-            )}
-
-            {(isChangeTicket || isPetSeat) && (
-              // <img src={serviceItem.icons.plus} alt="icon" width={11} />
-              <img src={downArrowIcon} alt="icon" width={14} height={14} />
-            )}
-          </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;