kupos-ui-components-lib
Version:
A reusable UI components package
526 lines (525 loc) • 46.1 kB
JavaScript
import React from "react";
import LottiePlayer from "../../assets/LottiePlayer";
import DateService from "../../utils/DateService";
import ModalEventManager from "../../utils/ModalEventManager";
import InternationalServicePopupBody from "../InternationalServicePopupBody";
import CommonService from "../../utils/CommonService";
const SEAT_EXCEPTIONS = ["Asiento mascota"];
function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, t = (key) => key, }) {
var _a, _b, _c, _d, _e, _f, _g;
const SvgAmenities = ({ moreAnemities, name, color, }) => {
const amenityKey = name.toLowerCase().replace(/\s/g, "_");
const getIconPath = () => {
const amenityFileName = `${amenityKey}.png`;
const imagePath = getAmenitiesImage(amenityFileName);
if (!imagePath) {
return `/public/images/amenities/${amenityKey}.svg`;
}
return imagePath;
};
const iconPath = getIconPath();
return (React.createElement("img", { src: iconPath, alt: name, style: {
filter: color === "white" ? "brightness(0) invert(1)" : "",
}, className: `object-contain ${moreAnemities ? "w-[20px] h-[20px]" : "w-[16px] h-[16px]"}` }));
};
const getAmenitiesImage = (name) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
switch (name) {
case "air_condtion.png": {
return (_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _a === void 0 ? void 0 : _a.airConditionIcon;
}
case "baggage.png": {
return (_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _b === void 0 ? void 0 : _b.baggageIcon;
}
case "charging_plug.png": {
return (_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _c === void 0 ? void 0 : _c.chargingIcon;
}
case "coffee.png": {
return (_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _d === void 0 ? void 0 : _d.coffeeIcon;
}
case "food_new_icon.png": {
return (_e = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _e === void 0 ? void 0 : _e.foodIcon;
}
case "gaming.png": {
return (_f = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _f === void 0 ? void 0 : _f.gamingIcon;
}
case "handicap.png": {
return (_g = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _g === void 0 ? void 0 : _g.handicapIcon;
}
case "mobile_ticket.png": {
return (_h = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _h === void 0 ? void 0 : _h.mobileTicketIcon;
}
case "movie.png": {
return (_j = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _j === void 0 ? void 0 : _j.movieIcon;
}
case "restrooms.png": {
return (_k = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _k === void 0 ? void 0 : _k.restroomsIcon;
}
case "snacks_new.png": {
return (_l = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _l === void 0 ? void 0 : _l.snackIcon;
}
case "wifi.png": {
return (_m = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _m === void 0 ? void 0 : _m.wifiIcon;
}
case "cortina_divisoria.png": {
return (_o = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _o === void 0 ? void 0 : _o.cortinaIcon;
}
case "frazada.png": {
return (_p = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _p === void 0 ? void 0 : _p.frazaIcon;
}
default: {
return "";
}
}
};
const getAmenityName = (rawAmenity) => {
switch (rawAmenity) {
case "mobile ticket":
return "Ticket móvil";
case "charging plug":
return "Cargador";
case "wifi":
return "WiFi";
case "movie":
return "Entretenimiento";
case "baggage":
return "Equipaje";
case "Restrooms":
return "Baños";
case "air condtion":
return "Aire acondicionado";
case "snacks new":
return "Snacks";
case "coffee":
return "Café";
case "cortina divisoria":
return "Cortina Divisoria";
case "frazada":
return "";
default:
return rawAmenity;
}
};
const labelId = typeof serviceItem.boarding_stages === "string"
? serviceItem.boarding_stages.split("|")[0]
: "";
const showTopLabel = busStage &&
busStage[labelId] &&
busStage[labelId].split("|")[1] === "true" &&
busStage[labelId].split("|")[0];
const hideBoardingTime = (serviceItemApiType) => {
var _a;
let exceptions = (_a = metaData === null || metaData === void 0 ? void 0 : metaData.sibus_stage_api_types) !== null && _a !== void 0 ? _a : [];
let found = false;
if (exceptions && exceptions.length) {
found = exceptions.includes(serviceItemApiType);
}
return found;
};
const renderStages = (stageData, direction = 1, terminals = null, hideTime = false) => {
if (typeof stageData === "string") {
const arr = direction === 1 ? stageData.split(",") : stageData.split(",");
const formattedStages = [];
for (let i = 0; i < arr.length; i++) {
let terminal = arr[i].split("||")[1];
let locationName = terminals[arr[i].split("||")[0].split("|")[0]] || "";
let time = arr[i].split("||")[0].split("|")[1];
if (direction !== 1 && i > 0) {
}
else {
formattedStages.push(`${locationName} ${time}`);
}
}
const extractTiming = (location) => {
const timingIndex = location.lastIndexOf(" ") + 1;
return location.substring(timingIndex);
};
const compareTimings = (locationA, locationB) => {
const timingA = extractTiming(locationA);
const timingB = extractTiming(locationB);
return timingA.localeCompare(timingB);
};
const sortedStages = hideTime
? [...formattedStages].sort()
: [...formattedStages].sort(compareTimings);
return (React.createElement("div", { className: "flex flex-col space-y-1 text-justify gap-[4px]" }, sortedStages.map((item, key) => (React.createElement("div", { key: key, className: "" }, hideTime
? item === null || item === void 0 ? void 0 : item.split("|")[0]
: item
.replace(/false/g, "")
.replace("true", "")
.replace("|", " |")
.replace("||", " |"))))));
}
return null;
};
let isSoldOut = serviceItem.available_seats <= 0;
const renderIcon = (iconKey, size = "14px") => {
var _a;
const iconValue = (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a[iconKey];
if (iconValue) {
if (typeof iconValue === "string") {
return (React.createElement("img", { src: iconValue, alt: iconKey, className: `${`w-[${size}] h-[${size}]`} mr-[5px]` }));
}
}
return null;
};
const getSortedSeatTypes = () => {
var _a;
if (!((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.seat_types) === null || _a === void 0 ? void 0 : _a.length)) {
return [{ label: "Salon cama", price: 0 }];
}
let seatTypesWithPrices = serviceItem.seat_types
.filter((item) => getFilteredSeats(item))
.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);
const premiumIndex = seatTypesWithPrices.findIndex((item) => item.label === "Premium");
if (premiumIndex >= 3) {
seatTypesWithPrices[2] = seatTypesWithPrices[premiumIndex];
}
seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
return seatTypesWithPrices;
};
const getNumberOfSeats = () => {
return serviceItem.seat_types.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
};
const getSeatNames = () => {
const sortedSeatTypes = getSortedSeatTypes();
return sortedSeatTypes.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"
? val.label
: null)));
};
const getSeatPrice = () => {
const sortedSeatTypes = getSortedSeatTypes();
return sortedSeatTypes.map((val, key) => SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("span", { key: key, className: "flex items-center justify-between text-[13.33px]" }, typeof val.price === "string"
? CommonService.currency(val.price, currencySign)
: typeof val.price === "number"
? CommonService.currency(val.price, currencySign)
: null)));
};
const getFilteredSeats = (item) => {
return item;
};
const checkMidnight = () => {
var _a, _b;
if ((cityOrigin === null || cityOrigin === void 0 ? void 0 : cityOrigin.label) &&
(cityDestination === null || cityDestination === void 0 ? void 0 : cityDestination.label) &&
((cityOrigin.label.toLowerCase().includes("argentina") &&
!cityDestination.label.toLowerCase().includes("argentina")) ||
(!cityOrigin.label.toLowerCase().includes("argentina") &&
cityDestination.label.toLowerCase().includes("argentina")))) {
ModalEventManager.showPopup({
modalIcon: (_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _a === void 0 ? void 0 : _a.warningIcon,
title: translation === null || translation === void 0 ? void 0 : translation.title,
showPrimaryButton: false,
primaryButtonText: translation === null || translation === void 0 ? void 0 : translation.continueButton,
onSecondaryButtonClick: () => {
onBookButtonPress && onBookButtonPress();
},
secondaryButtonText: translation === null || translation === void 0 ? void 0 : translation.okContinueButton,
primaryButtonBgColor: colors === null || colors === void 0 ? void 0 : colors.kuposButtonColor,
primaryButtonTextColor: colors === null || colors === void 0 ? void 0 : colors.primaryButtonTextColor,
secondaryButtonBgColor: colors === null || colors === void 0 ? void 0 : colors.secondaryBgColor,
secondaryButtonTextColor: colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor,
children: React.createElement(InternationalServicePopupBody, null),
});
return;
}
if (serviceItem.dep_validation_text) {
ModalEventManager.showPopup({
body: serviceItem.dep_validation_text,
primaryButtonText: translation === null || translation === void 0 ? void 0 : translation.continueButton,
secondaryButtonText: translation === null || translation === void 0 ? void 0 : translation.chooseAnotherTripButton,
onPrimaryButtonClick: () => {
onBookButtonPress && onBookButtonPress();
},
primaryButtonBgColor: colors === null || colors === void 0 ? void 0 : colors.kuposButtonColor,
primaryButtonTextColor: colors === null || colors === void 0 ? void 0 : colors.primaryButtonTextColor,
secondaryButtonBgColor: colors === null || colors === void 0 ? void 0 : colors.secondaryBgColor,
secondaryButtonTextColor: colors === null || colors === void 0 ? void 0 : colors.secondaryTextColor,
});
return;
}
if (serviceItem.operator_service_name === "Classe Reale " &&
cityOrigin.label.toLowerCase() === "santiago,chile" &&
cityDestination.label.toLowerCase() === "portillo,chile") {
ModalEventManager.showPopup({
modalIcon: (_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _b === void 0 ? void 0 : _b.warningIcon,
title: translation === null || translation === void 0 ? void 0 : translation.title,
primaryButtonText: translation === null || translation === void 0 ? void 0 : translation.okContinueButton,
secondaryButtonText: translation === null || translation === void 0 ? void 0 : translation.chooseAnotherTripButton,
onPrimaryButtonClick: () => {
onBookButtonPress && onBookButtonPress();
},
showSecondaryButton: false,
primaryButtonBgColor: colors === null || colors === void 0 ? void 0 : colors.kuposButtonColor,
primaryButtonTextColor: colors === null || colors === void 0 ? void 0 : colors.primaryButtonTextColor,
children: (React.createElement(React.Fragment, null,
React.createElement("p", { className: "mt-[5px] text-justify" },
translation.classeNormalText,
React.createElement("span", { className: "bold-text" },
"\u00A0",
translation.classeBoldText),
translation.classeNormalText1),
React.createElement("p", { className: "mt-[10px] text-justify" },
translation.classeNormalText2,
"\u00A0",
React.createElement("span", { className: "bold-text" },
"\u00A0",
translation.classeBoldText1),
" ",
translation.classeNormalText3))),
});
return;
}
else {
onBookButtonPressHandler();
}
};
const onBookButtonPressHandler = () => {
onBookButtonPress();
};
return (React.createElement("div", { className: `relative ${serviceItem.offer_text || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip)
? "mb-[60px]"
: "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
showTopLabel
? "mt-[30px]"
: "mt-[20px]"} ` },
React.createElement("div", { className: "bg-white rounded-[20px] shadow-service mb-[10px] mx-auto relative" },
React.createElement("div", { className: "p-[15px]" },
React.createElement("div", { className: "flex justify-between items-center mb-[15px]" },
React.createElement("div", { className: "w-[120px] overflow-y-hidden" },
React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `w-[120px] h-auto object-contain ${isSoldOut ? "grayscale" : ""}` }))),
React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:minmax(0,1.4fr)_minmax(0,0.2fr)_minmax(0,1fr)_auto] gap-x-[7rem] min-[640px]:gap-x-[5\n rem] min-[768px]:gap-x-[4rem] min-[1024px]:gap-x-[4rem] min-[1280px]:gap-x-[4rem] min-[1380px]:gap-x-[5rem]" },
React.createElement("div", { className: "min-h-[2.5rem] flex flex-col justify-between gap-[10px]" },
React.createElement("div", { className: `flex items-center text-[13.33px] justify-between relative ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
React.createElement("div", { className: "flex items-center bold-text capitalize group " },
orignLabel ? (React.createElement("div", { className: "w-[60px]" }, orignLabel)) : (React.createElement("div", { className: "w-[18px] h-auto mr-[8px]" },
React.createElement("img", { src: (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a.origin, alt: "origin", className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}` }))),
React.createElement("span", { className: "cursor-pointer bold-text" }, DateService.getServiceItemDate(serviceItem.travel_date)),
serviceItem.boarding_stages && (React.createElement("div", { className: "hidden group-hover:block absolute top-[29%] left-[35%] ml-2 text-white px-3 py-2 rounded-[10px] whitespace-normal z-10 shadow-service ", style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } },
React.createElement("div", { className: "tooltip-arrow absolute top-2 -left-[7px] w-0 h-0 border-t-8 border-b-8 border-r-8 border-t-transparent border-b-transparent", style: { borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } }),
React.createElement("div", { className: "text-center text-[14px]" }, renderStages(serviceItem.boarding_stages, 1, busStage, hideBoardingTime((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.api_type) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.apiType))))))),
React.createElement("div", { className: "absolute left-[58%]" }, "\u2022"),
React.createElement("div", { className: "font-[900] relative" }, DateService.formatTime(serviceItem.dep_time))),
React.createElement("div", { className: `flex items-center text-[13.33px] justify-between relative ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
React.createElement("div", { className: "flex items-center bold-text capitalize group " },
destinationLabel ? (React.createElement("div", { className: "w-[60px]" }, destinationLabel)) : (React.createElement("div", { className: "w-[18px] h-auto mr-[8px]" },
React.createElement("img", { src: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.destination, className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}` }))),
React.createElement("span", { className: "cursor-pointer bold-text" }, DateService.getServiceItemDate(serviceItem.arrival_date)),
serviceItem.dropoff_stages && (React.createElement("div", { className: `hidden group-hover:block absolute top-[46%] left-[35%] ml-2 text-white px-3 py-2 rounded-[10px] whitespace-normal z-10 shadow-service`, style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } },
React.createElement("div", { className: "tooltip-arrow absolute top-2 -left-[7px] w-0 h-0 border-t-8 border-b-8 border-r-8 border-t-transparent border-b-transparent", style: { borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } }),
React.createElement("div", { className: "text-center text-[14px]" }, renderStages(serviceItem.dropoff_stages, 2, busStage, hideBoardingTime((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.api_type) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.apiType))))))),
React.createElement("div", { className: "absolute left-[58%]" }, "\u2022"),
React.createElement("div", { className: "font-[900]" }, DateService.formatTime(serviceItem.arr_time)))),
React.createElement("div", { style: {
width: "1px",
height: "2.5rem",
backgroundColor: "#ccc",
margin: "auto",
} }),
React.createElement("div", { className: "content-center" },
React.createElement("div", { className: `flex gap-[10px] text-[13.33px] justify-between min-h-[2.5rem] ${getNumberOfSeats() < 3 ? "" : ""}`, style: getNumberOfSeats() < 2 ? { alignItems: "center" } : {} },
React.createElement("div", { className: "flex flex-col justify-between" }, getSeatNames()),
React.createElement("div", { className: "flex flex-col justify-between",
// className={`flex flex-col ${
// getNumberOfSeats() < 3 ? "justify-between" : ""
// }`}
style: { color: isSoldOut ? "#c0c0c0" : colors.priceColor } }, getSeatPrice()))),
React.createElement("div", null,
React.createElement("button", { onClick: () => (!isSoldOut ? checkMidnight() : null), disabled: serviceDetailsLoading, className: `w-full ${serviceDetailsLoading || isSoldOut ? "py-[12px]" : "py-[12px]"} text-[13.33px] font-bold text-white rounded-[10px] border-none px-[20px] flex items-center justify-center`, style: {
backgroundColor: serviceDetailsLoading || isSoldOut
? "lightgray"
: colors.kuposButtonColor,
cursor: serviceDetailsLoading || isSoldOut
? "not-allowed"
: "pointer",
} },
React.createElement("span", { className: "min-w-[75px] flex justify-center items-center bold-text" },
isSoldOut ? renderIcon("soldOutIcon", "14px") : null,
serviceDetailsLoading ? (React.createElement("span", { className: "loader-circle" })) : !isSoldOut ? (translation === null || translation === void 0 ? void 0 : translation.buyButton) : (translation === null || translation === void 0 ? void 0 : translation.soldOutButton))))),
React.createElement("div", { className: "flex justify-end mr-[11px]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[12px] text-[red] mt-1 text-center" }, "\u00A1 \u00DAltimos Asientos!"))),
React.createElement("div", {
// className={`${
// serviceItem.is_change_ticket &&
// serviceItem.pet_seat_info &&
// serviceItem?.is_tracking_enabled &&
// Object.keys(serviceItem.pet_seat_info || {}).length > 0
// ? "grid grid-cols-[1.4fr_4.8fr] gap-[3.4rem] mt-[15px] text-[13px] items-center border-t border-[#eee] mt-[15px] pt-[12px]"
// : "grid grid-cols-[3.17fr_4.8fr] gap-[3rem] mt-[15px] text-[13px] items-center border-t border-[#eee] mt-[15px] pt-[12px]"
// }`}
className: `${"flex justify-between items-center mt-[15px] items-center border-t border-[#eee] mt-[15px] pt-[12px]"}` },
React.createElement("div", null,
React.createElement("div", { className: "flex items-center " },
React.createElement("div", { className: "flex items-center cursor-pointer ", style: { color: isSoldOut ? "#c0c0c0" : "" } },
React.createElement("div", { className: "flex items-center" },
React.createElement("div", { className: "w-[18px] h-auto mr-[4px] relative" },
React.createElement("img", { src: serviceItem.icons.rating, alt: "origin", className: `w-[16px] h-[16px] mr-[4px] object-contain mb-[4px] ${isSoldOut ? "grayscale" : ""}`, onMouseEnter: (e) => {
const tooltip = e.currentTarget
.nextElementSibling;
if (tooltip)
tooltip.style.display = "block";
}, onMouseLeave: (e) => {
const tooltip = e.currentTarget
.nextElementSibling;
if (tooltip)
tooltip.style.display = "none";
} }),
React.createElement("div", { className: "hidden group-hover:block absolute left-[80px] -bottom-[160px] z-20 mt-2 w-[280px] rounded-lg shadow-service-2 bg-white overflow-hidden rounded-[14px] border-[2px]", style: {
borderColor: colors.ratingBorderColor,
color: isSoldOut ? "#c0c0c0" : "",
} },
React.createElement("div", { className: "pt-[20px] text-center" },
React.createElement("div", { className: "text-[12px] bold-text text-[#464647]" }, "PUNTUACI\u00D3N"),
React.createElement("div", { className: "text-[12px] font-light text-[#464647]" }, serviceItem.operator_service_name)),
React.createElement("div", { className: "px-3 py-2 flex flex-col gap-[10px]" }, [
{ key: "1", label: "Calidad del bus" },
{ key: "2", label: "Puntualidad" },
{
key: "3",
label: "Calidad del servicio",
},
{
key: "4",
label: "Recomendación del servicio",
},
].map((rating, index, array) => {
const isLast = index === array.length - 1;
// Use operator_details[6] for rating values
const ratingData = serviceItem.operator_details[6] || {};
const value = (ratingData === null || ratingData === void 0 ? void 0 : ratingData[rating.key]) || 0;
return (React.createElement("div", { key: rating.key, className: `flex items-center ${isLast ? "mb-2" : ""}` },
React.createElement("div", { className: "relative w-[3rem] h-[3rem]" },
React.createElement("div", { className: "absolute inset-0 w-full h-full rounded-full" },
React.createElement("div", { className: "w-full h-full rounded-full border-[2px] border-[lightgray]" })),
React.createElement("div", { className: "absolute inset-0 w-full h-full" },
React.createElement("svg", { className: "w-full h-full", viewBox: "0 0 100 100" },
React.createElement("circle", { cx: "50", cy: "50", r: "48", fill: "none", strokeWidth: "4", stroke: value >= 4
? "#00A650"
: colors.ratingBorderColor, strokeDasharray: value > 0
? `${value * 75.4} 301.6`
: "150.8 301.6", strokeDashoffset: "75.4", transform: "rotate(-90, 50, 50)" }))),
React.createElement("div", { className: "absolute inset-0 flex items-center justify-center top-[40%] left-[36%]" },
React.createElement("span", { className: "text-[#464647] font-medium text-[12px] " }, value.toFixed(1)))),
React.createElement("span", { className: "text-[#464647] text-[13.33px] ml-[10px]" }, rating.label)));
})),
React.createElement("div", { className: "px-1 py-2 text-center text-[12px] text-[#ff8f45]", style: { backgroundColor: colors.ratingBottomColor } },
"Esta puntuaci\u00F3n se obtuvo de las opiniones de",
" ",
serviceItem.operator_details[5] || 0,
" usuarios."))),
React.createElement("span", { className: "text-[#464647] bold-text text-[13.33px]" }, typeof serviceItem.operator_details[1] === "number"
? serviceItem.operator_details[1].toFixed(1)
: serviceItem.operator_details[1])),
React.createElement("span", { className: "ml-[10px] text-[#464647] text-[13.33px]" }, serviceItem.operator_details[2])))),
serviceItem.duration && (React.createElement("div", { className: "flex items-baseline relative text-[#464647]" },
React.createElement("div", { className: `w-[18px] h-auto mr-[4px] ${isSoldOut ? "grayscale" : ""}` }, renderIcon("hours", "14px")),
React.createElement("div", { className: `cursor-default group text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
serviceItem.duration,
" ",
translation.hours,
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-[188px] text-center break-normal 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 } }),
"Duraci\u00F3n estimada del viaje")))),
serviceItem.pet_seat_info &&
Object.keys(serviceItem.pet_seat_info).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: serviceItem.icons.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))),
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.")))) : null,
serviceItem.is_change_ticket && (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: serviceItem.icons.flexibleAnim, 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))),
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 } },
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 } }),
"Esta empresa permite cambios sin costo hasta (", (_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.change_ticket_hours) !== null && _c !== void 0 ? _c : 6,
") horas antes del viaje.")))),
React.createElement("div", { className: "flex items-center" },
React.createElement("div", null, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled) && (React.createElement("div", { className: "flex items-center mr-[10px]" },
React.createElement("div", { className: `h-auto mr-[4px] text-[13px] text-[#464647] ${isSoldOut ? "grayscale" : ""}` },
React.createElement(LottiePlayer, { animationData: serviceItem.icons.locationAnim, width: "20px", height: "20px" }))))),
React.createElement("div", null, metaData && serviceItem.operator_details[4] && (React.createElement("div", { className: "flex items-center gap-[6px]" },
(((_d = serviceItem.operator_details[3]) === null || _d === void 0 ? void 0 : _d.includes("18"))
? [...serviceItem.operator_details[4], "18"]
: serviceItem.operator_details[4]).map((val, key) => {
var _a, _b, _c, _d;
return (key < 3 &&
((_b = (_a = metaData === null || metaData === void 0 ? void 0 : metaData.amenities[val]) === null || _a === void 0 ? void 0 : _a.split(".")[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== "WATER") ||
val === "18" ? (React.createElement("div", { key: key, className: "relative mr-2 cursor-pointer" },
React.createElement("div", { className: "group" },
React.createElement("div", { className: `${isSoldOut ? "grayscale" : ""}` },
React.createElement(SvgAmenities, { moreAnemities: false, name: (_c = metaData.amenities[val]) === null || _c === void 0 ? void 0 : _c.split(".")[0].toLowerCase() })),
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 mt-2.5 text-center shadow-service text-[13.33px]", style: {
backgroundColor: colors.tooltipColor,
zIndex: 21,
} },
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((_d = metaData.amenities[val]) === null || _d === void 0 ? void 0 : _d.split(".")[0].split("_").join(" ")))))) : null;
}),
((_e = serviceItem.operator_details[4]) === null || _e === void 0 ? void 0 : _e.length) > 3 && (React.createElement("div", { className: "relative ml-1 cursor-pointer" },
React.createElement("div", { className: "w-[16px] h-[16px] bg-gray-200 rounded-full flex items-center justify-center text-sm font-bold ml-[5px] group" },
React.createElement("img", { src: ((_f = serviceItem.icons) === null || _f === void 0 ? void 0 : _f.plus) ||
"/images/icons/amenities/icon_plus.svg", className: "w-[16px] h-[16px]", alt: "plus" }),
React.createElement("div", { className: "hidden group-hover:block absolute -top-[13px] left-[40px] z-20 pl-[10px]" },
React.createElement("div", { className: "flex flex-col gap-[10px] p-3 rounded-[8px] shadow-md animate-fadeIn relative", style: { backgroundColor: colors.tooltipColor } },
metaData &&
((_g = serviceItem.operator_details[4]) === null || _g === void 0 ? void 0 : _g.map((val, key) => {
var _a, _b, _c, _d, _e, _f, _g;
const exceptions = [
1, 2, 5, 7, 8, 9, 12, 13, 14, 15,
];
return exceptions.includes(key) ? null : key >= 3 &&
((_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] whitespace-nowrap text-[13.33px]" },
React.createElement("div", { className: `${isSoldOut ? "grayscale" : ""}` },
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" })),
React.createElement("span", { className: "text-white text-xs" }, 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;
})),
React.createElement("div", { className: "tooltip-arrow absolute -left-[6px] top-[15px] w-0 h-0 border-t-8 border-b-8 border-r-8 border-t-transparent border-b-transparent ", style: {
borderRightColor: colors.tooltipColor,
} }))))))))))))),
children,
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && (React.createElement("div", { className: ` text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[36px] pt-[50px] -z-10 rounded-b-[14px] text-[14px]`, style: {
backgroundColor: isSoldOut
? colors === null || colors === void 0 ? void 0 : colors.bottomStripColor
: colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
opacity: isSoldOut ? 0.5 : 1,
} },
React.createElement(LottiePlayer, { animationData: serviceItem.icons.promoAnim, width: "18px", height: "18px" }),
React.createElement("span", { className: "ml-[10px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))),
React.createElement("div", { className: "absolute -top-[17px] left-0 w-full flex items-center justify-end gap-[12px] pr-[20px] z-10 " },
showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[8px] px-[14px] rounded-[38px] text-[13.33px] z-20`, style: { backgroundColor: !isSoldOut && colors.ratingBottomColor } },
React.createElement("div", { className: isSoldOut ? "grayscale" : "" },
React.createElement(LottiePlayer, { animationData: serviceItem.icons.priorityStageAnim, width: "20px", height: "20px" })),
React.createElement("div", { className: isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]` }, showTopLabel))),
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[8px] text-white px-[14px] rounded-[38px] text-[13.33px] z-20`, style: {
backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
} },
React.createElement(LottiePlayer, { animationData: serviceItem.icons.connectingServiceIcon, width: "20px", height: "20px" }),
React.createElement("div", null, "Conexión"))),
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[8px] text-white px-[14px] rounded-[38px] text-[13.33px] z-20 `, style: {
backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
} },
React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "20px", height: "20px" }),
React.createElement("div", null, translation === null || translation === void 0 ? void 0 : translation.directService))),
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" && (React.createElement("div", { className: `flex items-center gap-[10px] py-[8px] text-white px-[14px] rounded-[38px] text-[13.33px] z-20 `, style: {
backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
} },
React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "20px", height: "20px" }),
React.createElement("div", null, "Tren Express"))))));
}
export default ServiceItemPB;