kupos-ui-components-lib 9.0.4 → 9.0.6

package/dist/ui/AmenitiesBlock.js

@@ -1,78 +1,72 @@
 import React from "react";
-import LottiePlayer from "../assets/LottiePlayer";
-const AmenitiesBlock = ({ serviceItem, metaData, isSoldOut, colors, isPeru, getAnimationIcon, getAmenityName, SvgAmenities, }) => {
-    var _a, _b;
-    if (!metaData ||
-        !((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details) === null || _a === void 0 ? void 0 : _a[4]) ||
-        !serviceItem.operator_details[4].length) {
-        return null;
-    }
-    const PRIORITY_IDS = ["2", "3", "13"];
-    const amenities = [...serviceItem.operator_details[4]];
-    const priorityAmenities = amenities.filter((id) => PRIORITY_IDS.includes(id));
-    const nonPriorityAmenities = amenities.filter((id) => !PRIORITY_IDS.includes(id));
-    const hasPriority = priorityAmenities.length > 0;
+const DEFAULT_PRIORITY_IDS = ["2", "3", "13"];
+const TOOLTIP_CLASS = "hidden group-hover:block absolute top-[30px] left-1/2 -translate-x-1/2 text-white rounded-[14px] whitespace-nowrap mt-2.5 text-center shadow-service text-[13.33px]";
+const getAmenityBaseName = (amenityStr) => { var _a; return (_a = amenityStr === null || amenityStr === void 0 ? void 0 : amenityStr.split(".")[0]) !== null && _a !== void 0 ? _a : ""; };
+const isWater = (amenityStr) => { var _a; return ((_a = getAmenityBaseName(amenityStr)) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === "WATER"; };
+const TooltipArrow = ({ color }) => (React.createElement("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: color } }));
+const getAmenitySplit = ({ isPeru, amenities, priorityIds }) => {
+    const priority = amenities.filter((id) => priorityIds.includes(id));
+    const nonPriority = amenities.filter((id) => !priorityIds.includes(id));
+    const hasPriority = priority.length > 0;
     /* ============================
          🇵🇪 PERU LOGIC
     ============================ */
-    let visibleAmenities = [];
-    let shouldShowPlus = false;
-    let plusAmenities = [];
     if (isPeru) {
-        if (hasPriority) {
-            visibleAmenities = priorityAmenities;
-            shouldShowPlus = nonPriorityAmenities.length > 0;
-            plusAmenities = nonPriorityAmenities;
-        }
-        else {
-            visibleAmenities = [];
-            shouldShowPlus = amenities.length > 0;
-            plusAmenities = amenities;
-        }
+        return hasPriority
+            ? { visible: priority, plus: nonPriority }
+            : { visible: [], plus: amenities };
     }
     /* ============================
          🌍 NON-PERU LOGIC
     ============================ */
-    if (!isPeru) {
-        const sortedAmenities = [...amenities].sort((a, b) => Number(PRIORITY_IDS.includes(b)) - Number(PRIORITY_IDS.includes(a)));
-        visibleAmenities = sortedAmenities.slice(0, 3);
-        shouldShowPlus = sortedAmenities.length > 3;
-        plusAmenities = sortedAmenities.slice(3);
+    const sorted = [...amenities].sort((a, b) => Number(priorityIds.includes(b)) - Number(priorityIds.includes(a)));
+    return {
+        visible: sorted.slice(0, 3),
+        plus: sorted.slice(3),
+    };
+};
+const AmenitiesBlock = ({ serviceItem, metaData, isSoldOut, colors, isPeru, getAnimationIcon, getAmenityName, SvgAmenities, }) => {
+    var _a, _b;
+    if (!metaData ||
+        !((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details) === null || _a === void 0 ? void 0 : _a[4]) ||
+        !serviceItem.operator_details[4].length) {
+        return null;
     }
-    return (React.createElement("div", { className: "flex items-center gap-[6px]" },
-        (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled) && (React.createElement("div", { className: isSoldOut ? "grayscale" : "" },
-            React.createElement(LottiePlayer, { animationData: getAnimationIcon("locationAnim"), width: "20px", height: "20px" }))),
-        visibleAmenities.map((val, key) => {
-            var _a, _b, _c, _d, _e, _f, _g;
-            return ((_b = (_a = metaData.amenities[val]) === null || _a === void 0 ? void 0 : _a.split(".")[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== "WATER" ? (React.createElement("div", { key: key, className: "relative group cursor-pointer" },
-                React.createElement("div", { className: `${isSoldOut ? "grayscale" : ""}` },
-                    React.createElement(SvgAmenities, { moreAnemities: false, name: (_d = (_c = metaData.amenities[val]) === null || _c === void 0 ? void 0 : _c.split(".")[0]) === null || _d === void 0 ? void 0 : _d.toLowerCase() })),
-                React.createElement("div", { className: "hidden group-hover:block absolute top-[30px] left-1/2 -translate-x-1/2 text-white rounded-[14px] whitespace-nowrap mt-2.5 text-center shadow-service text-[13.33px]", style: {
-                        backgroundColor: colors.tooltipColor,
-                        zIndex: 21,
-                        padding: "12px",
-                    } },
-                    React.createElement("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.tooltipColor,
-                        } }),
-                    getAmenityName((_g = (_f = (_e = metaData.amenities[val]) === null || _e === void 0 ? void 0 : _e.split(".")[0]) === null || _f === void 0 ? void 0 : _f.split("_")) === null || _g === void 0 ? void 0 : _g.join(" "))))) : null;
-        }),
-        shouldShowPlus && (React.createElement("div", { className: "relative ml-1 cursor-pointer" },
-            React.createElement("div", { className: "group" },
-                React.createElement("img", { src: ((_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.plus) ||
-                        "/images/icons/amenities/icon_plus.svg", className: "w-[16px] h-[16px]", alt: "plus" }),
-                React.createElement("div", { style: { zIndex: 100 }, className: "hidden group-hover:block absolute top-[30px] left-1/2 -translate-x-1/2 text-white rounded-[14px] whitespace-nowrap mt-2.5 text-center shadow-service text-[13.33px]" },
-                    React.createElement("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.tooltipColor,
-                        } }),
-                    React.createElement("div", { className: "flex flex-col gap-[10px] p-3 rounded-[8px] shadow-md", style: {
-                            backgroundColor: colors.tooltipColor,
-                        } }, plusAmenities.map((val, key) => {
-                        var _a, _b, _c, _d, _e, _f, _g;
-                        return ((_b = (_a = metaData.amenities[val]) === null || _a === void 0 ? void 0 : _a.split(".")[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !==
-                            "WATER" ? (React.createElement("div", { key: key, className: "flex items-center gap-[5px] text-xs whitespace-nowrap" },
-                            React.createElement(SvgAmenities, { moreAnemities: true, name: (_d = (_c = metaData.amenities[val]) === null || _c === void 0 ? void 0 : _c.split(".")[0]) === null || _d === void 0 ? void 0 : _d.toUpperCase(), color: "white" }),
-                            getAmenityName((_g = (_f = (_e = metaData.amenities[val]) === null || _e === void 0 ? void 0 : _e.split(".")[0]) === null || _f === void 0 ? void 0 : _f.split("_")) === null || _g === void 0 ? void 0 : _g.join(" ")))) : null;
-                    }))))))));
+    const operatorPriorityIds = (_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details) === null || _b === void 0 ? void 0 : _b[5];
+    const priorityIds = (operatorPriorityIds === null || operatorPriorityIds === void 0 ? void 0 : operatorPriorityIds.length) > 0
+        ? operatorPriorityIds
+        : DEFAULT_PRIORITY_IDS;
+    const amenities = [...serviceItem.operator_details[4]];
+    const { visible: visibleAmenities, plus: plusAmenities } = getAmenitySplit({
+        isPeru,
+        amenities,
+        priorityIds,
+    });
+    const shouldShowPlus = plusAmenities.length > 0;
+    const grayscaleClass = isSoldOut ? "grayscale" : "";
+    return (React.createElement("div", { className: "flex items-center gap-[6px]" }, visibleAmenities.map((val, key) => {
+        const raw = metaData.amenities[val];
+        if (isWater(raw))
+            return null;
+        const baseName = getAmenityBaseName(raw);
+        return (React.createElement("div", { key: key, className: "relative group cursor-pointer" },
+            React.createElement("div", { className: grayscaleClass },
+                React.createElement(SvgAmenities, { moreAnemities: false, name: baseName.toLowerCase() })),
+            React.createElement("div", { className: TOOLTIP_CLASS, style: {
+                    backgroundColor: colors.tooltipColor,
+                    zIndex: 21,
+                    padding: "12px",
+                } },
+                React.createElement(TooltipArrow, { color: colors.tooltipColor }),
+                React.createElement("div", { className: "flex flex-col gap-[10px]" }, amenities.map((id, i) => {
+                    const rawItem = metaData.amenities[id];
+                    if (isWater(rawItem))
+                        return null;
+                    const name = getAmenityBaseName(rawItem);
+                    return (React.createElement("div", { key: i, className: "flex items-center gap-[5px] text-xs whitespace-nowrap" },
+                        React.createElement(SvgAmenities, { moreAnemities: true, name: name.toUpperCase(), color: "white" }),
+                        getAmenityName(name.split("_").join(" "))));
+                })))));
+    })));
 };
 export default AmenitiesBlock;

package/dist/ui/BottomAmenities/BottomAmenities.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+interface ItemEntry {
+    key: string;
+    render: React.ReactNode;
+}
+interface BottomAmenitiesProps {
+    otherItems: ItemEntry[];
+    serviceItem: {
+        id: string;
+        is_tracking_enabled?: boolean;
+        is_change_ticket?: boolean;
+        pet_seat_info?: Record<string, any>;
+    };
+    grayscaleClass: string;
+    isSoldOut: boolean;
+    isItemExpanded: boolean;
+    colors: Record<string, any>;
+    translation?: {
+        [key: string]: string;
+    };
+    getAnimationIcon: (icon: string) => any;
+    downArrowIcon?: React.ReactNode;
+    onToggleExpand: () => void;
+}
+declare function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, isItemExpanded, colors, translation, getAnimationIcon, downArrowIcon, onToggleExpand, }: BottomAmenitiesProps): React.ReactElement;
+export default BottomAmenities;

package/dist/ui/BottomAmenities/BottomAmenities.js

@@ -0,0 +1,22 @@
+import React from "react";
+import LottiePlayer from "../../assets/LottiePlayer";
+import FlexibleBlock from "../FlexibleBlock";
+import PetBlock from "../PetBlock";
+function BottomAmenities({ otherItems, serviceItem, grayscaleClass, isSoldOut, isItemExpanded, colors, translation, getAnimationIcon, downArrowIcon, onToggleExpand, }) {
+    const hasPetInfo = serviceItem.pet_seat_info &&
+        Object.keys(serviceItem.pet_seat_info).length > 0;
+    const showDownArrow = ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_change_ticket) && serviceItem.pet_seat_info) ||
+        (serviceItem.pet_seat_info &&
+            Object.keys(serviceItem.pet_seat_info).length > 0);
+    return (React.createElement("div", { className: "flex items-center mt-[15px] border-t border-[#eee] pt-[6px]" },
+        React.createElement("div", { className: "grid items-center gap-[2%] flex-1 ", style: {
+                gridTemplateColumns: "18% 18% 23% 23%",
+            } }, otherItems.map((item) => (React.createElement("div", { key: item.key, className: "flex items-center" }, item.render)))),
+        React.createElement("div", { className: "flex items-center justify-end shrink-0 ml-[5px] w-[150px]" },
+            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled) && (React.createElement("div", { className: grayscaleClass + " mr-[10px]" },
+                React.createElement(LottiePlayer, { animationData: getAnimationIcon("locationAnim"), width: "20px", height: "20px" }))),
+            serviceItem.is_change_ticket && (React.createElement(FlexibleBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, serviceItem: serviceItem, isSoldOut: isSoldOut })),
+            hasPetInfo && (React.createElement(PetBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, isSoldOut: isSoldOut })),
+            showDownArrow ? (React.createElement("div", { className: "flex items-center cursor-pointer ml-[4px] transition-transform duration-300 w-[14px] h-[14px]", onClick: onToggleExpand }, downArrowIcon)) : null)));
+}
+export default BottomAmenities;

package/dist/ui/DurationBlock.js

@@ -1,7 +1,7 @@
 import React from "react";
-const DurationBlock = ({ serviceItem, translation, renderIcon, isSoldOut, colors, }) => (React.createElement("div", { className: "flex items-baseline relative whitespace-nowrap" },
+const DurationBlock = ({ serviceItem, translation, renderIcon, isSoldOut, colors, }) => (React.createElement("div", { className: "flex items-baseline relative whitespace-nowrap " },
     React.createElement("div", { className: `w-[18px] mr-[4px] ${isSoldOut ? "grayscale" : ""}` }, renderIcon("hours", "14px")),
-    React.createElement("div", { className: "group text-[13.33px]" },
+    React.createElement("div", { className: "group text-[13.33px] cursor-pointer" },
         serviceItem.duration,
         " ",
         translation.hours,

package/dist/ui/ExpendedDropDown/ExpandedDropdown.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+interface ExpandedDropdownProps {
+    serviceItem: {
+        pet_seat_info?: Record<string, any>;
+        is_change_ticket?: boolean;
+        is_tracking_enabled?: boolean;
+    };
+    showPromo: boolean;
+    colors: {
+        priceColor?: string;
+    };
+    grayscaleClass: string;
+    translation?: {
+        [key: string]: string;
+    };
+    getAnimationIcon: (icon: string) => any;
+}
+declare function ExpandedDropdown({ serviceItem, showPromo, colors, grayscaleClass, translation, getAnimationIcon, }: ExpandedDropdownProps): React.ReactElement;
+export default ExpandedDropdown;

package/dist/ui/ExpendedDropDown/ExpandedDropdown.js

@@ -0,0 +1,27 @@
+import React from "react";
+import LottiePlayer from "../../assets/LottiePlayer";
+function ExpandedDropdown({ serviceItem, showPromo, colors, grayscaleClass, translation, getAnimationIcon, }) {
+    const hasPetInfo = serviceItem.pet_seat_info &&
+        Object.keys(serviceItem.pet_seat_info).length > 0;
+    return (React.createElement("div", { className: "px-[15px] pt-[26px] pb-[14px] -mt-[16px] pt-[20px] relative -z-9", style: {
+            backgroundColor: "#f5f5f5",
+            borderRadius: "0 0 10px 10px",
+            // border: showPromo ? `1px solid ${colors.priceColor}` : "1px solid #ccc",
+            border: `1px solid ${colors.priceColor}`,
+            borderTop: "none",
+        } },
+        React.createElement("div", { className: "flex flex-col gap-[12px] text-[13px] text-[#464647]" },
+            hasPetInfo && (React.createElement("div", { className: "flex items-center gap-[10px]" },
+                React.createElement(LottiePlayer, { animationData: getAnimationIcon("petFriendlyAnim"), width: "20px", height: "20px" }),
+                React.createElement("div", { className: "h-auto mr-[4px] text-[13px] text-[#464647] bold-text" },
+                    React.createElement("span", null, translation === null || translation === void 0 ? void 0 : translation.petFriendly)))),
+            serviceItem.is_change_ticket && (React.createElement("div", { className: "flex items-center gap-[10px]" },
+                React.createElement(LottiePlayer, { animationData: getAnimationIcon("flexibleIcon"), width: "20px", height: "20px" }),
+                React.createElement("div", { className: "h-auto mr-[4px] text-[13px] text-[#464647] bold-text" },
+                    React.createElement("span", null, translation === null || translation === void 0 ? void 0 : translation.flexible)))),
+            (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled) && (React.createElement("div", { className: `${grayscaleClass} flex items-center gap-[10px]` },
+                React.createElement(LottiePlayer, { animationData: getAnimationIcon("locationAnim"), width: "20px", height: "20px" }),
+                React.createElement("div", { className: "h-auto mr-[4px] text-[13px] text-[#464647] bold-text" },
+                    React.createElement("span", null, "GPS Tracker")))))));
+}
+export default ExpandedDropdown;

package/dist/ui/FlexibleBlock.js

@@ -3,16 +3,14 @@ import LottiePlayer from "../assets/LottiePlayer";
 const FlexibleBlock = ({ translation, getAnimationIcon, colors, serviceItem, isSoldOut, }) => {
     var _a;
     return (React.createElement("div", { className: "flex items-center" },
-        React.createElement("div", { className: "relative group cursor-default" },
+        React.createElement("div", { className: "relative group cursor-pointer" },
             React.createElement("div", { className: "flex items-center" },
                 React.createElement("div", { className: `mr-[5px] ${isSoldOut ? "grayscale" : ""}` },
                     React.createElement(LottiePlayer
                     // animationData={serviceItem.icons.flexibleAnim}
                     , { 
                         // animationData={serviceItem.icons.flexibleAnim}
-                        animationData: getAnimationIcon("flexibleIcon"), width: "20px", height: "20px" })),
-                React.createElement("div", { className: "h-auto mr-[4px] text-[13px] text-[#464647]" },
-                    React.createElement("span", null, translation === null || translation === void 0 ? void 0 : translation.flexible))),
+                        animationData: getAnimationIcon("flexibleIcon"), width: "20px", height: "20px" }))),
             React.createElement("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 text-[12px]", style: {
                     backgroundColor: colors.tooltipColor,
                     lineHeight: "1.5",

package/dist/ui/KuposButton/KuposButton.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface KuposButtonProps {
+    isSoldOut: boolean;
+    isLoading: boolean;
+    buttonColor?: string;
+    buyLabel?: string;
+    soldOutLabel?: string;
+    soldOutIcon?: React.ReactNode;
+    onClick: () => void;
+}
+declare function KuposButton({ isSoldOut, isLoading, buttonColor, buyLabel, soldOutLabel, soldOutIcon, onClick, }: KuposButtonProps): React.ReactElement;
+export default KuposButton;

package/dist/ui/KuposButton/KuposButton.js

@@ -0,0 +1,12 @@
+import React from "react";
+function KuposButton({ isSoldOut, isLoading, buttonColor, buyLabel, soldOutLabel, soldOutIcon, onClick, }) {
+    const isDisabled = isLoading || isSoldOut;
+    return (React.createElement("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",
+        } },
+        React.createElement("span", { className: "min-w-[75px] flex justify-center items-center bold-text uppercase" },
+            isSoldOut ? soldOutIcon : null,
+            isLoading ? (React.createElement("span", { className: "loader-circle" })) : !isSoldOut ? (buyLabel) : (soldOutLabel))));
+}
+export default KuposButton;

package/dist/ui/PetBlock.js

@@ -8,9 +8,7 @@ const PetBlock = ({ translation, getAnimationIcon, colors, isSoldOut }) => (Reac
                 // animationData={serviceItem.icons.petFriendlyAnim}
                 , { 
                     // animationData={serviceItem.icons.petFriendlyAnim}
-                    animationData: getAnimationIcon("petFriendlyAnim"), width: "20px", height: "20px" })),
-            React.createElement("div", { className: "h-auto mr-[4px] text-[13px] text-[#464647]" },
-                React.createElement("span", null, translation === null || translation === void 0 ? void 0 : translation.petFriendly))),
+                    animationData: getAnimationIcon("petFriendlyAnim"), width: "20px", height: "20px" }))),
         React.createElement("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", style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } },
             React.createElement("div", { className: "tooltip-arrow absolute text-[13.33px] -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 === null || colors === void 0 ? void 0 : colors.tooltipColor } }),
             "Este servicio incluye asientos para mascotas."))));

package/dist/ui/RatingBlock.js

@@ -2,8 +2,12 @@ import React from "react";
 import RatingHover from "../components/ServiceItem/RatingHover";
 const RatingBlock = ({ showRating, serviceItem, isSoldOut, colors, t, translation, }) => (React.createElement("div", { className: "flex items-center whitespace-nowrap" },
     showRating && (React.createElement(RatingHover, { serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation })),
-    React.createElement("span", { className: "ml-[10px] text-[13.33px]", style: {
+    React.createElement("div", { className: "group relative ml-[10px] text-[13.33px]", style: {
             marginLeft: showRating ? "10px" : "0",
             color: isSoldOut ? "#c0c0c0" : "#464647",
-        } }, serviceItem.operator_details[2])));
+        } },
+        React.createElement("span", { className: "block max-w-[120px] overflow-hidden text-ellipsis whitespace-nowrap cursor-pointer" }, serviceItem.operator_details[2]),
+        React.createElement("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.tooltipColor } },
+            React.createElement("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.tooltipColor } }),
+            serviceItem.operator_details[2]))));
 export default RatingBlock;

package/dist/ui/SeatSection/SeatSection.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+interface SeatType {
+    label: string;
+    fare: number;
+    key: any;
+}
+interface SeatSectionProps {
+    seatTypes: SeatType[];
+    availableSeats: number;
+    isSoldOut: boolean;
+    priceColor?: string;
+    currencySign?: string;
+    removeDuplicateSeats?: boolean;
+    isPeru?: boolean;
+}
+declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, isPeru, }: SeatSectionProps): React.ReactElement;
+export default SeatSection;

package/dist/ui/SeatSection/SeatSection.js

@@ -0,0 +1,92 @@
+import React from "react";
+import CommonService from "../../utils/CommonService";
+const SEAT_EXCEPTIONS = ["Asiento mascota"];
+function getAllSeatTypes(seatTypes) {
+    if (!(seatTypes === null || seatTypes === void 0 ? void 0 : seatTypes.length)) {
+        return [{ label: "Salon cama", price: 0 }];
+    }
+    let seatTypesWithPrices = seatTypes.filter(Boolean).map((val) => ({
+        label: val === null || val === void 0 ? void 0 : val.label,
+        price: val === null || val === void 0 ? void 0 : val.fare,
+    }));
+    seatTypesWithPrices.sort((a, b) => a.price - b.price);
+    return seatTypesWithPrices;
+}
+function getSortedSeatTypes(seatTypes) {
+    if (!(seatTypes === null || seatTypes === void 0 ? void 0 : 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) {
+    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) {
+    return seatTypes.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
+}
+function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, isPeru, }) {
+    const uniqueSeats = getUniqueSeats(seatTypes);
+    const sortedSeatTypes = getSortedSeatTypes(seatTypes);
+    const numberOfSeats = getNumberOfSeats(seatTypes);
+    const isCentered = numberOfSeats < 2 || removeDuplicateSeats;
+    const formatPrice = (price) => availableSeats <= 0
+        ? CommonService.currency(0, currencySign)
+        : CommonService.currency(price, currencySign);
+    const renderSeatNames = () => {
+        const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
+        return seats.map((val, key) => SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("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)));
+    };
+    const renderSeatPrices = () => {
+        if (removeDuplicateSeats) {
+            return uniqueSeats.map((val, key) => (React.createElement("span", { key: key }, formatPrice(val.price))));
+        }
+        return sortedSeatTypes.map((val, key) => SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("span", { key: key, className: "flex items-center text-[13.33px] bold-text" }, typeof val.price === "string" || typeof val.price === "number"
+            ? formatPrice(val.price)
+            : null)));
+    };
+    const renderLabels = () => {
+        if (isPeru) {
+            return (React.createElement(React.Fragment, null,
+                React.createElement("span", { className: "text-[13.33px]", style: { color: "#999" } }, "Antes"),
+                React.createElement("span", { className: "text-[13.33px]" }, "Desde")));
+        }
+        return renderSeatNames();
+    };
+    const strikethroughStyle = Object.assign({ color: "#ccc", display: "flex", textAlign: "end", textDecoration: "line-through" }, (isPeru
+        ? { position: "relative", top: 0 }
+        : { position: "absolute", top: isCentered ? "-10px" : "-18px" }));
+    return (React.createElement("div", { className: "relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.5rem]", style: isCentered ? { alignItems: "center" } : {} },
+        React.createElement("div", { className: "flex flex-col justify-between", style: { gap: "10px" } }, renderLabels()),
+        React.createElement("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",
+            } },
+            React.createElement("span", { className: "text-[13.33px]", style: strikethroughStyle }, "$1.000"),
+            renderSeatPrices())));
+}
+export default SeatSection;

package/dist/ui/TopAmenities/TopAmenities.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface TopAmenitiesProps {
+    showPromo: boolean;
+    showTopLabel: string | boolean;
+    isSoldOut: boolean;
+    priceColor?: string;
+    buttonColor?: string;
+    boardingIcon?: React.ReactNode;
+    getAnimationIcon: (icon: string) => any;
+}
+declare function TopAmenities({ showPromo, showTopLabel, isSoldOut, priceColor, buttonColor, boardingIcon, getAnimationIcon, }: TopAmenitiesProps): React.ReactElement;
+export default TopAmenities;

package/dist/ui/TopAmenities/TopAmenities.js

@@ -0,0 +1,32 @@
+import React from "react";
+import LottiePlayer from "../../assets/LottiePlayer";
+function TopAmenities({ showPromo, showTopLabel, isSoldOut, priceColor, buttonColor, boardingIcon, getAnimationIcon, }) {
+    return (React.createElement("div", { style: {
+            display: "flex",
+            justifyContent: "flex-end",
+            position: "relative",
+            zIndex: "-1",
+        } },
+        React.createElement("div", { style: {
+                backgroundColor: priceColor,
+                position: "relative",
+                right: showTopLabel ? "-21px" : "",
+                padding: "0 14px",
+                borderTopRightRadius: "10px",
+                borderTopLeftRadius: "10px",
+            } },
+            React.createElement("div", { style: { display: "flex", alignItems: "center" } },
+                React.createElement(LottiePlayer, { animationData: getAnimationIcon("bombAnimation"), width: "14px", height: "14px" }),
+                React.createElement("span", { className: "flex items-center  py-[10px] pl-[6px]  text-white text-[13.33px] z-20", style: { paddingRight: showTopLabel ? "18px" : "" } },
+                    React.createElement("span", { className: "bold-text" }, "kuponazo 20%\u00A0"),
+                    " | Termina en\u00A0",
+                    React.createElement("span", { className: "bold-text" }, "02:10:30")))),
+        showTopLabel && (React.createElement("div", { className: "flex items-center py-[10px] px-[14px] text-[13.33px] z-20", style: {
+                backgroundColor: isSoldOut ? "#ddd" : buttonColor,
+                borderTopRightRadius: "10px",
+                borderTopLeftRadius: "10px",
+            } },
+            React.createElement(LottiePlayer, { animationData: getAnimationIcon("priorityStageAnim"), width: "14px", height: "14px" }),
+            React.createElement("div", { className: "text-white pl-[6px]" }, showTopLabel)))));
+}
+export default TopAmenities;

package/dist/ui/mobileweb/BottomAmenitiesMobile.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+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;
+}
+declare function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration, isDirectTrip, directoColor, directoAnim, isChangeTicket, isPetSeat, petSeatInfo, petFriendlyAnim, flexibleAnim, isTrackingEnabled, locationAnim, downArrowIcon, showDropdown, setShowDropdown, onDropdownToggle, }: BottomAmenitiesMobileProps): React.ReactElement;
+export default BottomAmenitiesMobile;

package/dist/ui/mobileweb/BottomAmenitiesMobile.js

@@ -0,0 +1,37 @@
+import React from "react";
+import LottiePlayer from "../../assets/LottiePlayer";
+function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration, isDirectTrip, directoColor, directoAnim, isChangeTicket, isPetSeat, petSeatInfo, petFriendlyAnim, flexibleAnim, isTrackingEnabled, locationAnim, downArrowIcon, showDropdown, setShowDropdown, onDropdownToggle, }) {
+    return (React.createElement("div", { className: `${"flex justify-between items-center items-center "}` },
+        React.createElement("div", { className: "w-[55%] flex justify-between items-center" },
+            React.createElement("div", { style: { opacity: isSoldOut ? 0.5 : 1 } }, amenitiesNodes),
+            React.createElement("div", { className: "flex  relative ", style: { color: isSoldOut ? "#bbb" : "text-[#464647]" } },
+                React.createElement("div", { className: `w-[12px] h-auto mr-[2px] ${isSoldOut ? "grayscale" : ""}` }, hoursIcon),
+                "\u00A0",
+                React.createElement("div", { className: `cursor-default group min-[420]:text-[13px] text-[12px] ${isSoldOut ? "text-[#c0c0c0]" : ""}`, style: { lineHeight: "normal" } },
+                    duration,
+                    "hrs")),
+            isDirectTrip && (React.createElement("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,
+                } },
+                React.createElement(LottiePlayer, { animationData: directoAnim, width: "14px", height: "14px" }),
+                React.createElement("div", { className: "ml-[5px]" }, "Directo")))),
+        React.createElement("div", null, (isChangeTicket || isPetSeat) && (React.createElement("div", { onClick: onDropdownToggle, className: "flex items-center" },
+            petSeatInfo && Object.keys(petSeatInfo).length > 0 ? (React.createElement("div", { className: "flex items-center" },
+                React.createElement("div", { className: `relative group cursor-default ` },
+                    React.createElement("div", { className: "flex items-center" },
+                        React.createElement("div", { className: `mr-[5px] ${isSoldOut ? "grayscale" : ""}` },
+                            React.createElement(LottiePlayer, { animationData: petFriendlyAnim, width: "16px", height: "16px" })))))) : null,
+            isChangeTicket && (React.createElement("div", { className: "flex items-center" },
+                React.createElement("div", { className: "relative group cursor-default" },
+                    React.createElement("div", { className: "flex items-center" },
+                        React.createElement("div", { className: `mr-[5px] ${isSoldOut ? "grayscale" : ""}` },
+                            React.createElement(LottiePlayer, { animationData: flexibleAnim, width: "16px", height: "16px" })))))),
+            isTrackingEnabled && (React.createElement("div", { className: "flex items-center mr-[10px]" },
+                React.createElement("div", { className: `h-auto mr-[4px] min-[420]:text-[13px] text-[11px] text-[#464647] ${isSoldOut ? "grayscale" : ""}` },
+                    React.createElement(LottiePlayer, { animationData: locationAnim, width: "16px", height: "16px" })))),
+            (isChangeTicket || isPetSeat) && (
+            // <img src={serviceItem.icons.plus} alt="icon" width={11} />
+            React.createElement("img", { src: downArrowIcon, alt: "icon", width: 14, height: 14 })))))));
+}
+export default BottomAmenitiesMobile;

package/dist/ui/mobileweb/DateTimeSectionMobile.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+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;
+}
+declare function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, }: DateTimeSectionMobileProps): React.ReactElement;
+export default DateTimeSectionMobile;