kupos-ui-components-lib 9.1.2 → 9.1.4

package/src/ui/mobileweb/SeatSectionMobile.tsx

@@ -1,256 +0,0 @@
-import React from "react";
-import commonService from "../../utils/CommonService";
-
-const EXCEPTIONS = [
-  "gy",
-  ".gy",
-  "GY",
-  ".GY",
-  "Gy",
-  ".Gy",
-  "BLANCO",
-  "blanco",
-  "asiento_mascota",
-];
-
-interface SeatType {
-  label: string;
-  key?: string;
-  fare: number;
-}
-
-interface SeatSectionMobileProps {
-  seatTypes: SeatType[];
-  isSoldOut: boolean;
-  isPeru: boolean;
-  seatPriceColor: string;
-  currencySign: string;
-  availableSeats: number;
-  removeDuplicateSeats?: boolean;
-}
-
-interface SeatRowProps {
-  type: SeatType;
-  index: number;
-  displayLabel: string;
-  fare: string;
-  isSoldOut: boolean;
-  seatPriceColor: string;
-  hasMultipleTypes: boolean;
-  textSize: string;
-}
-
-const SeatRow: React.FC<SeatRowProps> = ({
-  type,
-  index,
-  displayLabel,
-  fare,
-  isSoldOut,
-  seatPriceColor,
-  hasMultipleTypes,
-  textSize,
-}) => {
-  if (EXCEPTIONS.includes(type.label)) return null;
-
-  const rowClass = hasMultipleTypes
-    ? "w-[100%] flex flex-row justify-between "
-    : "w-[100%] flex flex-row justify-between items-center";
-
-  const labelColor = isSoldOut ? "#bbb" : "#464647";
-  const priceColor = isSoldOut ? "#bbb" : seatPriceColor;
-
-  return (
-    <div className={rowClass} key={index}>
-      <span
-        className={`min-[420]:text-[13px] ${textSize} `}
-        style={{ color: labelColor }}
-      >
-        {displayLabel}
-      </span>
-      <span
-        className={`min-[420]:text-[13px] ${textSize}  bold-text`}
-        style={{ color: priceColor }}
-      >
-        {fare}
-      </span>
-    </div>
-  );
-};
-
-const getFilteredSeats = (item: string) => {
-  return item;
-};
-
-const getUniqueSeats = (data: SeatType[], limit: number): SeatType[] => {
-  const seatMap = new Map<string, SeatType>();
-
-  data
-    ?.filter((item) => getFilteredSeats(item.label))
-    ?.forEach((item) => {
-      if (EXCEPTIONS.includes(item.key as any)) return;
-      const existing = seatMap.get(item.label);
-      if (
-        !existing ||
-        parseFloat(item.fare as any) < parseFloat(existing.fare as any)
-      ) {
-        seatMap.set(item.label, item);
-      }
-    });
-
-  return Array.from(seatMap.values())
-    .sort((a, b) => a.fare - b.fare)
-    .slice(0, limit);
-};
-
-function SeatSectionMobile({
-  seatTypes: seatTypesData,
-  isSoldOut,
-  isPeru,
-  seatPriceColor,
-  currencySign,
-  availableSeats,
-  removeDuplicateSeats,
-}: SeatSectionMobileProps): React.ReactElement {
-  const hasMultipleTypes = (seatTypesData?.length ?? 0) > 2;
-
-  const getFare = (fare: number) => {
-    if (removeDuplicateSeats && availableSeats <= 0 && !isPeru) {
-      return commonService.currency(0, currencySign);
-    }
-    return commonService.currency(fare, currencySign);
-  };
-
-  const getLowestFare = (): number | null => {
-    const filtered = seatTypesData
-      ?.filter((item) => getFilteredSeats(item.label))
-      ?.filter((item) => !EXCEPTIONS.includes(item.label));
-    if (!filtered || filtered.length === 0) return null;
-    return filtered.reduce(
-      (min, item) => (item.fare < min ? item.fare : min),
-      filtered[0].fare,
-    );
-  };
-
-  const getHighestFare = (): number => {
-    return (
-      seatTypesData
-        ?.filter((item) => !EXCEPTIONS.includes(item.label))
-        ?.reduce((max, item) => (item.fare > max ? item.fare : max), 0) || 0
-    );
-  };
-
-  const renderPeruSeats = () => {
-    const lowestFare = getLowestFare();
-    if (lowestFare === null) return null;
-
-    const priceColor = isSoldOut ? "#bbb" : seatPriceColor;
-
-    return (
-      <>
-        <div className="w-[100%] flex flex-row justify-between items-center">
-          <span
-            className="min-[420]:text-[13px] text-[12px]"
-            style={{ color: "#bbb" }}
-          >
-            Antes
-          </span>
-          <span
-            className="min-[420]:text-[13px] text-[12px] line-through"
-            style={{ color: "#bbb" }}
-          >
-            {commonService.currency(getHighestFare(), currencySign)}
-          </span>
-        </div>
-        <div className="w-[100%] flex flex-row justify-between items-center">
-          <span
-            className="min-[420]:text-[13px] text-[12px] bold-text"
-            style={{ color: isSoldOut ? "#bbb" : "#464647" }}
-          >
-            Desde
-          </span>
-          <span
-            className="min-[420]:text-[13px] text-[12px] bold-text"
-            style={{ color: priceColor }}
-          >
-            {commonService.currency(lowestFare, currencySign)}
-          </span>
-        </div>
-      </>
-    );
-  };
-
-  const renderSeats = () => {
-    if (isPeru) {
-      return renderPeruSeats();
-    }
-
-    if (removeDuplicateSeats) {
-      const uniqueSeats = getUniqueSeats(seatTypesData, 3);
-      return uniqueSeats.map((type, i) => (
-        <SeatRow
-          key={i}
-          type={type}
-          index={i}
-          displayLabel={commonService.truncateSeatLabel(type.label)}
-          fare={getFare(type.fare)}
-          isSoldOut={isSoldOut}
-          seatPriceColor={seatPriceColor}
-          hasMultipleTypes={hasMultipleTypes}
-          textSize="text-[11px]"
-        />
-      ));
-    }
-
-    return seatTypesData
-      ?.filter((item) => getFilteredSeats(item.label))
-      ?.sort((a, b) => a.fare - b.fare)
-      ?.slice(0, 2)
-      ?.map((type, i) => (
-        <SeatRow
-          key={i}
-          type={type}
-          index={i}
-          displayLabel={type.label}
-          fare={commonService.currency(type.fare, currencySign)}
-          isSoldOut={isSoldOut}
-          seatPriceColor={seatPriceColor}
-          hasMultipleTypes={hasMultipleTypes}
-          textSize="text-[12px]"
-        />
-      ));
-  };
-
-  return (
-    <div className="content-center relative" style={{ width: "40%" }}>
-      {!isPeru && (
-        <div className="absolute -top-[16px] right-[0] flex justify-end">
-          <span
-            className="min-[420]:text-[13px] text-[12px] line-through"
-            style={{ color: "#bbb" }}
-          >
-            $7.000
-          </span>
-        </div>
-      )}
-      <div
-        className="flex flex-col justify-between h-[2.5rem] "
-        style={{
-          gap: isSoldOut ? "0px" : "5px",
-          justifyContent: hasMultipleTypes ? "space-between" : "center",
-        }}
-      >
-        {renderSeats()}
-
-        {isSoldOut ? (
-          <div className="flex justify-end">
-            <span className="min-[420]:text-[13px] text-[12px] text-[#ccc]">
-              Agotado
-            </span>
-          </div>
-        ) : null}
-      </div>
-    </div>
-  );
-}
-
-export default SeatSectionMobile;

package/src/ui/mobileweb/TopAmenitieMobile.tsx

@@ -1,126 +0,0 @@
-import React from "react";
-import LottiePlayer from "../../assets/LottiePlayer";
-
-interface TopAmenitieMobileProps {
-  showTopLabel: string | boolean;
-  isSoldOut: boolean;
-  seatPriceColor?: string;
-  bombAnim?: any;
-  priorityStageAnim?: any;
-  countdownSeconds?: number;
-  promoText?: string;
-  onCountdownEnd?: () => void;
-  offerText?: string;
-}
-
-function TopAmenitieMobile({
-  showTopLabel,
-  isSoldOut,
-  seatPriceColor,
-  bombAnim,
-  priorityStageAnim,
-  countdownSeconds = 0,
-  onCountdownEnd,
-  offerText,
-}: TopAmenitieMobileProps): 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
-          style={{
-            backgroundColor: seatPriceColor,
-
-            position: "relative",
-            right: showTopLabel ? "-21px" : "",
-            padding: "0 14px",
-            borderTopRightRadius: "12px",
-            borderTopLeftRadius: "12px",
-          }}
-        >
-          <div style={{ display: "flex", alignItems: "center", color: "#fff" }}>
-            <LottiePlayer animationData={bombAnim} width="16px" height="16px" />
-            <span
-              className="flex items-center gap-[5px] py-[6px] pl-[6px]   text-[12px]  z-20"
-              style={{ paddingRight: showTopLabel ? "20px" : "0" }}
-            >
-              <span className="bold-text">{offerText}</span> |{" "}
-              <span
-                ref={startCountdown}
-                style={{
-                  fontVariantNumeric: "tabular-nums",
-                  display: "inline-block",
-                  minWidth: "50px",
-                }}
-              />
-            </span>
-          </div>
-        </div>
-      )}
-
-      {showTopLabel && (
-        <div
-          className={`flex items-center gap-[5px] py-[6px] px-[10px]  text-[12px]  z-20`}
-          style={{
-            backgroundColor: isSoldOut ? "#ddd" : "#ff8f45",
-            borderTopRightRadius: "12px",
-            borderTopLeftRadius: "12px",
-          }}
-        >
-          {/* {renderIcon("whiteBoardingIcon", "12px")} */}
-          <LottiePlayer
-            animationData={priorityStageAnim}
-            width="12px"
-            height="12px"
-          />
-          <div
-            className={
-              // isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]`
-              `text-white`
-            }
-            style={{
-              color: "#fff",
-            }}
-          >
-            {showTopLabel}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default TopAmenitieMobile;