kupos-ui-components-lib
Version:
A reusable UI components package
249 lines (248 loc) • 19.7 kB
JavaScript
import React from "react";
import LottiePlayer from "../../assets/LottiePlayer";
import DateService from "../../utils/DateService";
const SEAT_EXCEPTIONS = ["Asiento mascota"];
const exceptions = [
"gy",
".gy",
"GY",
".GY",
"Gy",
".Gy",
"BLANCO",
"blanco",
"asiento_mascota",
];
function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, setAmenetiesAtomValue, }) {
var _a, _b;
const isPetSeat = (Object.keys(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.pet_seat_info) || []).length > 0;
let isSoldOut = serviceItem.available_seats <= 0;
const currency = (amount) => {
const formattedAmount = amount
.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
return "$" + formattedAmount;
};
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 getServiceStars = (serviceItem) => {
try {
return serviceItem.operator_details && serviceItem.operator_details[1]
? serviceItem.operator_details[1].toFixed(1)
: "0.0";
}
catch (e) {
return "";
}
};
const seatTypes = () => {
var _a, _b, _c, _d;
let seatTypes = (_d = (_c = (_b = (_a = serviceItem.seat_types) === null || _a === void 0 ? void 0 : _a.filter((item) => getFilteredSeats(item.label))) === null || _b === void 0 ? void 0 : _b.sort((a, b) => a.fare - b.fare) // Add this line to sort by fare
) === null || _c === void 0 ? void 0 : _c.slice(0, 2)) === null || _d === void 0 ? void 0 : _d.map((type, i) => {
var _a;
return exceptions.includes(type.label) ? null : (React.createElement("div", { className: ((_a = serviceItem.seat_types) === null || _a === void 0 ? void 0 : _a.length) > 2
? "w-[100%] flex flex-row justify-between "
: "w-[100%] flex flex-row justify-between items-center", key: i },
React.createElement("span", { className: "text-[13px] ", style: { marginLeft: "10px" } }, type.label),
React.createElement("span", { className: "text-[13px] bold-text", style: { color: isSoldOut ? "#c0c0c0" : colors.priceColor } }, currency(type.fare))));
});
return seatTypes;
};
const getFilteredSeats = (item) => {
return item;
};
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 amenities = () => {
var _a;
const raw = (_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details) === null || _a === void 0 ? void 0 : _a[3];
const list = Array.isArray(raw)
? raw
: typeof raw === "string"
? raw.split("|").filter(Boolean)
: [];
const nodes = list
.slice(0, 2)
.map((am, i) => {
var _a;
return (React.createElement("img", { key: i, className: "amenity", height: 15, src: getAmenitiesImage((_a = amenitiesData === null || amenitiesData === void 0 ? void 0 : amenitiesData[am]) === null || _a === void 0 ? void 0 : _a.toLowerCase()), alt: "icon" }));
});
return nodes;
};
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;
};
let isConexion = false;
if (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) {
isConexion = true;
}
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) ||
isConexion ||
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
showTopLabel
? "mt-[30px]"
: "mt-[20px]"} `, style: { backgroundColor: "#fff", zIndex: 1 } },
React.createElement("div", { className: "border border-[#E6E6E6] rounded-[20px]", style: { backgroundColor: "#fff", zIndex: 1 } },
React.createElement("div", { className: `p-[15px] ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
showTopLabel ||
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo)
? "mt-[10px]"
: ""}` },
React.createElement("div", { className: "flex justify-between mb-[8px]" },
React.createElement("div", { className: "flex items-center w-[50%] justify-between" },
React.createElement("div", { className: "w-[120px] overflow-y-hidden" },
React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `w-[100px] h-auto object-contain ${isSoldOut ? "grayscale" : ""}` })),
React.createElement("div", { className: "flex text-[13px] bold-text" },
React.createElement("img", { src: serviceItem.icons.rating, alt: "origin", className: `w-[10px] h-[10px] mr-[4px] object-contain mt-[2px] ${isSoldOut ? "grayscale" : ""}` }),
getServiceStars(serviceItem))),
React.createElement("div", { className: "flex justify-end -mt-[5px] -mb-[5px] items-center pt-[5px] pb-[5px] text-center " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("span", { className: "text-[12px] text-[red] mt-1 flex\n justify-end\n \n \n pt-[5px] pb-[5px] pl-[15px] pr-[15px]\n rounded-[8px] bg-[#DE051414]" }, "\u00A1 \u00DAltimos Asientos!")))),
React.createElement("div", { className: "flex justify-between gap-[5px] w-full", onClick: onBookButtonPress },
React.createElement("div", { className: "min-h-[2.5rem] flex flex-col justify-between gap-[4px] w-[50%]" },
React.createElement("div", { className: `flex items-center text-[13px] justify-between ${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-[14px] h-auto mr-[5px]" },
React.createElement("img", { src: (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a.origin, alt: "origin", className: `w-[14px] h-auto mr-[5px] ${isSoldOut ? "grayscale" : ""}` }))),
React.createElement("span", { className: "cursor-pointer black-text" }, DateService.getServiceItemDate(serviceItem.travel_date))),
React.createElement("div", { className: "mx-[8px]" }, "\u2022"),
React.createElement("div", { className: "font-[900] relative black-text" }, DateService.formatTime(serviceItem.dep_time))),
React.createElement("div", { className: `flex items-center text-[13px] justify-between ${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-[14px] h-auto mr-[5px]" },
React.createElement("img", { src: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.destination, className: `w-[14px] h-auto mr-[5px] ${isSoldOut ? "grayscale" : ""}` }))),
React.createElement("span", { className: "cursor-pointer black-text" }, DateService.getServiceItemDate(serviceItem.arrival_date))),
React.createElement("div", { className: "mx-[8px]" }, "\u2022"),
React.createElement("div", { className: "font-[900] black-text" }, DateService.formatTime(serviceItem.arr_time)))),
React.createElement("div", { className: "content-center w-[47%]" },
React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem] gap-[5px]" },
seatTypes(),
isSoldOut ? (React.createElement("div", null,
React.createElement("span", { className: "text-[13px]" }, "Agotado"))) : null))),
React.createElement("div", { className: "bg-[#E6E6E6] -ml-[12px] -mr-[12px] mt-[10px] mb-[10px] h-[1px]" }),
React.createElement("div", { className: `${"flex justify-between items-center mt-[15px] items-center "}` },
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("span", { className: "ml-[3px] text-[#464647] text-[13px] bold-text" }, serviceItem.operator_details[2])))),
React.createElement("div", { className: "flex relative text-[#464647]" },
React.createElement("div", { className: `w-[12px] h-auto mr-[2px] ${isSoldOut ? "grayscale" : ""}` }, renderIcon("hours", "12px")),
React.createElement("div", { className: `cursor-default group text-[13px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
serviceItem.duration,
"hrs")),
React.createElement("div", null, amenities()),
(serviceItem.is_change_ticket || isPetSeat) && (React.createElement("div", { onClick: () => {
setShowDropdown(!showDropdown);
setAmenetiesAtomValue({
service: serviceItem,
showTopLabel: showTopLabel,
});
}, className: "flex items-center" },
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" })))))) : 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" })))))),
(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" })))),
(serviceItem.is_change_ticket || isPetSeat) && (React.createElement("img", { src: serviceItem.icons.plus, alt: "icon", width: 11 })))))),
(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,
zIndex: -1,
color: "#fff",
} },
React.createElement(LottiePlayer, { animationData: serviceItem.icons.promoAnim, width: "18px", height: "18px" }),
React.createElement("span", { className: "ml-[10px] text-[#fff] text-[13px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))),
React.createElement("div", { className: "absolute -top-[14px] left-0 w-full flex items-center justify-end gap-[12px] pr-[20px] z-10 " },
showTopLabel && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] px-[10px] rounded-[38px] text-[12px] z-20 ${isSoldOut ? "bg-[#ddd]" : ``}`, style: {
backgroundColor: !isSoldOut && colors.ratingBottomColor,
} },
React.createElement("div", { className: isSoldOut ? "grayscale" : "" },
React.createElement(LottiePlayer, { animationData: serviceItem.icons.priorityStageAnim, width: "18px", height: "18px" })),
React.createElement("div", { className: isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]` }, showTopLabel))),
isConexion && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] text-[12px] z-20 ${isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]`}`, style: {
backgroundColor: !isSoldOut && colors.ratingBottomColor,
} },
renderIcon("airportIcon", "14px"),
React.createElement("div", null, "Conexi\u00F3n"))),
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] text-[12px] z-20 `, style: {
backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
} },
React.createElement(LottiePlayer, { animationData: serviceItem.icons.directoAnim, width: "20px", height: "20px" }),
React.createElement("div", null, "Directo"))),
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] text-[12px] 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 ServiceItemMobile;