kupos-ui-components-lib 9.1.1 → 9.1.2

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"

package/src/ui/RatingBlock.tsx

@@ -8,8 +8,8 @@ const RatingBlock = ({
   colors,
   t,
   translation,
-  isPeru = false,
-}: any) => (
+  isPeru,
+}) => (
   <div className="flex items-center whitespace-nowrap">
     {showRating && (
       <RatingHover
@@ -22,15 +22,27 @@ const RatingBlock = ({
       />
     )}
 
-    <span
-      className="ml-[10px] text-[13.33px]"
+    <div
+      className="group relative ml-[10px] text-[13.33px]"
       style={{
         marginLeft: showRating ? "10px" : "0",
         color: isSoldOut ? "#c0c0c0" : "#464647",
       }}
     >
-      {serviceItem.operator_details[2]}
-    </span>
+      <span className="block max-w-[120px] overflow-hidden text-ellipsis whitespace-nowrap cursor-pointer">
+        {serviceItem.operator_details[2]}
+      </span>
+      <div
+        className="hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-nowrap z-10 mt-2.5 w-max text-center shadow-service text-[12px]"
+        style={{ backgroundColor: colors.bottomStripColor, zIndex: "300" }}
+      >
+        <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>
+        {serviceItem.operator_details[2]}
+      </div>
+    </div>
   </div>
 );
 

package/src/ui/SeatSection/SeatSection.tsx

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

package/src/ui/TopAmenities/TopAmenities.tsx

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

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