kupos-ui-components-lib 8.0.9 → 9.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/components/ServiceItem/PeruServiceItemDesktop.d.ts +1 -1
  2. package/dist/components/ServiceItem/PeruServiceItemDesktop.js +84 -361
  3. package/dist/components/ServiceItem/ServiceItemDesktop.d.ts +1 -1
  4. package/dist/components/ServiceItem/ServiceItemDesktop.js +8 -8
  5. package/dist/components/ServiceItem/types.d.ts +2 -0
  6. package/dist/styles.css +0 -17
  7. package/package.json +1 -1
  8. package/src/components/ServiceItem/PeruServiceItemDesktop.tsx +231 -671
  9. package/src/components/ServiceItem/ServiceItemDesktop.tsx +8 -6
  10. package/src/components/ServiceItem/ServiceItemMobile.tsx +5 -5
  11. package/src/components/ServiceItem/types.ts +5 -3
package/dist/components/ServiceItem/PeruServiceItemDesktop.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  import { ServiceItemProps } from "./types";
3
- declare function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isSeatIcon, showAvailableSeats, isPeru, siteType, t, }: ServiceItemProps & {
3
+ declare function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isSeatIcon, showAvailableSeats, isPeru, siteType, isAllinBus, t, }: ServiceItemProps & {
4
4
  currencySign?: string;
5
5
  }): React.ReactElement;
6
6
  export default PeruServiceItemDesktop;
package/dist/components/ServiceItem/PeruServiceItemDesktop.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import React from "react";
2
2
  import DateService from "../../utils/DateService";
3
3
  import CommonService from "../../utils/CommonService";
4
- import RatingHover from "./RatingHover";
5
4
  import ModalEventManager from "../../utils/ModalEventManager";
6
5
  import InternationalServicePopupBody from "../InternationalServicePopupBody";
7
6
  import LottiePlayer from "../../assets/LottiePlayer";
@@ -29,9 +28,15 @@ import linatalDirectoAnimation from "../../assets/images/anims/service_list/dire
29
28
  import linatalPriorityStageAnimation from "../../assets/images/anims/service_list/priority_stage.json";
30
29
  import linatalPetFriendlyAnimation from "../../assets/images/anims/service_list/pet_friendly.json";
31
30
  import linatalLocationAnimation from "../../assets/images/anims/service_list/location.json";
31
+ import StageTooltip from "../../ui/StagesTooltip";
32
+ import RatingBlock from "../../ui/RatingBlock";
33
+ import DurationBlock from "../../ui/DurationBlock";
34
+ import PetBlock from "../../ui/PetBlock";
35
+ import FlexibleBlock from "../../ui/FlexibleBlock";
36
+ import AmenitiesBlock from "../../ui/AmenitiesBlock";
32
37
  const SEAT_EXCEPTIONS = ["Asiento mascota"];
33
- function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isSeatIcon, showAvailableSeats, isPeru, siteType, t = (key) => key, }) {
34
- var _a, _b, _c;
38
+ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isSeatIcon, showAvailableSeats, isPeru, siteType, isAllinBus, t = (key) => key, }) {
39
+ var _a, _b, _c, _d;
35
40
  const animationMap = {
36
41
  promoAnim: {
37
42
  kupos: promoAnimation,
@@ -82,7 +87,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
82
87
  const amenityKey = (_a = name === null || name === void 0 ? void 0 : name.toLowerCase()) === null || _a === void 0 ? void 0 : _a.replace(/\s/g, "_");
83
88
  const getIconPath = () => {
84
89
  const amenityFileName = `${amenityKey}.png`;
85
- const imagePath = getAmenitiesImage(amenityFileName);
90
+ const imagePath = CommonService.getAmenitiesImage(amenityFileName, serviceItem);
86
91
  if (!imagePath) {
87
92
  return `/public/images/amenities/${amenityKey}.svg`;
88
93
  }
@@ -93,144 +98,6 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
93
98
  filter: color === "white" ? "brightness(0) invert(1)" : "",
94
99
  }, className: `object-contain ${moreAnemities ? "w-[16px] h-[16px]" : "w-[16px] h-[16px]"}` }));
95
100
  };
96
- const getAmenitiesImage = (name) => {
97
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
98
- switch (name) {
99
- case "air_condtion.png": {
100
- return (_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _a === void 0 ? void 0 : _a.airConditionIcon;
101
- }
102
- case "baggage.png": {
103
- return (_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _b === void 0 ? void 0 : _b.baggageIcon;
104
- }
105
- case "charging_plug.png": {
106
- return (_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _c === void 0 ? void 0 : _c.chargingIcon;
107
- }
108
- case "coffee.png": {
109
- return (_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _d === void 0 ? void 0 : _d.coffeeIcon;
110
- }
111
- case "food_new_icon.png": {
112
- return (_e = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _e === void 0 ? void 0 : _e.foodIcon;
113
- }
114
- case "gaming.png": {
115
- return (_f = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _f === void 0 ? void 0 : _f.gamingIcon;
116
- }
117
- case "handicap.png": {
118
- return (_g = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _g === void 0 ? void 0 : _g.handicapIcon;
119
- }
120
- case "mobile_ticket.png": {
121
- return (_h = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _h === void 0 ? void 0 : _h.mobileTicketIcon;
122
- }
123
- case "movie.png": {
124
- return (_j = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _j === void 0 ? void 0 : _j.movieIcon;
125
- }
126
- case "restrooms.png": {
127
- return (_k = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _k === void 0 ? void 0 : _k.restroomsIcon;
128
- }
129
- case "snacks_new.png": {
130
- return (_l = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _l === void 0 ? void 0 : _l.snackIcon;
131
- }
132
- case "wifi.png": {
133
- return (_m = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _m === void 0 ? void 0 : _m.wifiIcon;
134
- }
135
- case "cortina_divisoria.png": {
136
- return (_o = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _o === void 0 ? void 0 : _o.cortinaIcon;
137
- }
138
- case "frazada.png": {
139
- return (_p = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _p === void 0 ? void 0 : _p.frazaIcon;
140
- }
141
- case "blanket.png": {
142
- return (_q = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _q === void 0 ? void 0 : _q.blankketIcon;
143
- }
144
- case "cctv.png": {
145
- return (_r = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _r === void 0 ? void 0 : _r.cctvIcon;
146
- }
147
- case "cup_holder.png": {
148
- return (_s = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _s === void 0 ? void 0 : _s.cupHolderIcon;
149
- }
150
- case "emergency_contact.png": {
151
- return (_t = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _t === void 0 ? void 0 : _t.emergencyContactIcon;
152
- }
153
- case "emergency_exit.png": {
154
- return (_u = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _u === void 0 ? void 0 : _u.emergencyExitIcon;
155
- }
156
- case "fire_extinguisher.png": {
157
- return (_v = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _v === void 0 ? void 0 : _v.fireExtinguisherIcon;
158
- }
159
- case "reading_light.png": {
160
- return (_w = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _w === void 0 ? void 0 : _w.readingLIghtIcon;
161
- }
162
- case "seat_belt.png": {
163
- return (_x = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _x === void 0 ? void 0 : _x.sercurityBeltIcon;
164
- }
165
- case "service_on_board.png": {
166
- return (_y = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _y === void 0 ? void 0 : _y.serviceOnBoardIcon;
167
- }
168
- case "personal_tv.png": {
169
- return (_z = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _z === void 0 ? void 0 : _z.personalTVIcon;
170
- }
171
- case "pet_admission.png": {
172
- return (_0 = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _0 === void 0 ? void 0 : _0.petAdmissionIcon;
173
- }
174
- case "music.png": {
175
- return (_1 = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _1 === void 0 ? void 0 : _1.musicIcon;
176
- }
177
- default: {
178
- return "";
179
- }
180
- }
181
- };
182
- const getAmenityName = (rawAmenity) => {
183
- switch (rawAmenity) {
184
- case "mobile ticket":
185
- return "Ticket móvil";
186
- case "charging plug":
187
- return "Cargador";
188
- case "wifi":
189
- return "WiFi";
190
- case "movie":
191
- return "Entretenimiento";
192
- case "baggage":
193
- return "Equipaje";
194
- case "Restrooms":
195
- return "Baños";
196
- case "air condtion":
197
- return "Aire acondicionado";
198
- case "snacks new":
199
- return "Snacks";
200
- case "coffee":
201
- return "Café";
202
- case "cortina divisoria":
203
- return "Cortina Divisoria";
204
- case "frazada":
205
- return "Frazada";
206
- case "blanket":
207
- return "Mantas";
208
- case "cctv":
209
- return "Cámara de seguridad";
210
- case "cup holder":
211
- return "Portavasos";
212
- case "emergency contact":
213
- return "Contacto de emergencia";
214
- case "emergency exit":
215
- return "Salida de emergencia";
216
- case "fire extinguisher":
217
- return "Extintor de incendio";
218
- case "reading light":
219
- return "Luz de lectura";
220
- case "seat belt":
221
- return "Cinturón de seguridad";
222
- case "service on board":
223
- return "Servicio a bordo";
224
- case "personal tv":
225
- return "TV personal";
226
- case "pet admission":
227
- return "Admisión de mascotas";
228
- case "music":
229
- return "Música";
230
- default:
231
- return rawAmenity;
232
- }
233
- };
234
101
  const labelId = typeof serviceItem.boarding_stages === "string"
235
102
  ? serviceItem.boarding_stages.split("|")[0]
236
103
  : "";
@@ -238,51 +105,6 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
238
105
  busStage[labelId] &&
239
106
  busStage[labelId].split("|")[1] === "true" &&
240
107
  busStage[labelId].split("|")[0];
241
- const hideBoardingTime = (serviceItemApiType) => {
242
- var _a;
243
- let exceptions = (_a = metaData === null || metaData === void 0 ? void 0 : metaData.sibus_stage_api_types) !== null && _a !== void 0 ? _a : [];
244
- let found = false;
245
- if (exceptions && exceptions.length) {
246
- found = exceptions.includes(serviceItemApiType);
247
- }
248
- return found;
249
- };
250
- const renderStages = (stageData, direction = 1, terminals = null, hideTime = false) => {
251
- if (typeof stageData === "string") {
252
- const arr = direction === 1 ? stageData.split(",") : stageData.split(",");
253
- const formattedStages = [];
254
- for (let i = 0; i < arr.length; i++) {
255
- let terminal = arr[i].split("||")[1];
256
- let locationName = terminals[arr[i].split("||")[0].split("|")[0]] || "";
257
- let time = arr[i].split("||")[0].split("|")[1];
258
- if (direction !== 1 && i > 0) {
259
- }
260
- else {
261
- formattedStages.push(`${locationName} ${time}`);
262
- }
263
- }
264
- const extractTiming = (location) => {
265
- const timingIndex = location.lastIndexOf(" ") + 1;
266
- return location.substring(timingIndex);
267
- };
268
- const compareTimings = (locationA, locationB) => {
269
- const timingA = extractTiming(locationA);
270
- const timingB = extractTiming(locationB);
271
- return timingA.localeCompare(timingB);
272
- };
273
- const sortedStages = hideTime
274
- ? [...formattedStages].sort()
275
- : [...formattedStages].sort(compareTimings);
276
- return (React.createElement("div", { className: "flex flex-col space-y-3 text-justify gap-[4px]" }, sortedStages.map((item, key) => (React.createElement("div", { key: key, className: "font-normal", style: { fontWeight: 400 } }, hideTime
277
- ? item === null || item === void 0 ? void 0 : item.split("|")[0]
278
- : item
279
- .replace(/false/g, "")
280
- .replace("true", "")
281
- .replace("|", " |")
282
- .replace("||", " |"))))));
283
- }
284
- return null;
285
- };
286
108
  let isSoldOut = serviceItem.available_seats <= 0;
287
109
  const renderIcon = (iconKey, size = "14px") => {
288
110
  var _a;
@@ -337,19 +159,6 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
337
159
  const getNumberOfSeats = () => {
338
160
  return serviceItem.seat_types.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
339
161
  };
340
- // Helper function to truncate seat labels with more than 2 words
341
- const truncateSeatLabel = (label) => {
342
- if (typeof label !== "string")
343
- return String(label);
344
- // Don't truncate if label contains parentheses (e.g., "Cama (180°)")
345
- if (label.includes("("))
346
- return label;
347
- const words = label.trim().split(/\s+/);
348
- if (words.length <= 2)
349
- return label;
350
- // Take first 2 words + first letter of 3rd word + "..."
351
- return `${words[0]} ${words[1]} ${words[2].charAt(0)}...`;
352
- };
353
162
  // Seat type icon logic
354
163
  const getSeatTypeIcon = (seatLabel) => {
355
164
  var _a, _b, _c, _d;
@@ -375,7 +184,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
375
184
  marginBottom: "2px",
376
185
  } })),
377
186
  typeof val.label === "string" || typeof val.label === "number"
378
- ? truncateSeatLabel(val.label)
187
+ ? CommonService.truncateSeatLabel(val.label)
379
188
  : null)));
380
189
  }
381
190
  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]" : ""}` },
@@ -387,7 +196,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
387
196
  marginBottom: "2px",
388
197
  } })),
389
198
  typeof val.label === "string" || typeof val.label === "number"
390
- ? truncateSeatLabel(val.label)
199
+ ? CommonService.truncateSeatLabel(val.label)
391
200
  : null)));
392
201
  };
393
202
  const getSeatPrice = () => {
@@ -492,11 +301,55 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
492
301
  const onBookButtonPressHandler = () => {
493
302
  onBookButtonPress();
494
303
  };
304
+ const extractStage = (stageArr, index) => {
305
+ const stageObj = stageArr[index];
306
+ const key = Object.keys(stageObj)[0];
307
+ return stageObj[key][0].split(", ")[0];
308
+ };
309
+ const boardingName = ((_a = serviceItem.stage_details_arr) === null || _a === void 0 ? void 0 : _a.length)
310
+ ? extractStage(serviceItem.stage_details_arr, 0)
311
+ : null;
312
+ const dropoffName = ((_b = serviceItem.stage_details_arr) === null || _b === void 0 ? void 0 : _b.length)
313
+ ? extractStage(serviceItem.stage_details_arr, 1)
314
+ : null;
315
+ const items = [
316
+ {
317
+ key: "rating",
318
+ width: "30%",
319
+ render: (React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation })),
320
+ },
321
+ {
322
+ key: "duration",
323
+ width: "20%",
324
+ condition: serviceItem.duration,
325
+ render: (React.createElement(DurationBlock, { serviceItem: serviceItem, translation: translation, renderIcon: renderIcon, isSoldOut: isSoldOut, colors: colors })),
326
+ },
327
+ {
328
+ key: "pet",
329
+ width: "20%",
330
+ condition: serviceItem.pet_seat_info &&
331
+ Object.keys(serviceItem.pet_seat_info).length > 0,
332
+ render: (React.createElement(PetBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, isSoldOut: isSoldOut })),
333
+ },
334
+ {
335
+ key: "flexible",
336
+ width: "20%",
337
+ condition: false,
338
+ render: (React.createElement(FlexibleBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, serviceItem: serviceItem, isSoldOut: isSoldOut })),
339
+ },
340
+ {
341
+ key: "amenities",
342
+ width: "20%",
343
+ render: (React.createElement(AmenitiesBlock, { serviceItem: serviceItem, metaData: metaData, isSoldOut: isSoldOut, colors: colors, isPeru: isPeru, getAnimationIcon: getAnimationIcon, getAmenityName: CommonService.getAmenityName, SvgAmenities: SvgAmenities })),
344
+ },
345
+ ];
346
+ const amenitiesItem = items.find((i) => i.key === "amenities");
347
+ const otherItems = items.filter((i) => i.key !== "amenities" && i.condition !== false);
495
348
  return (React.createElement("div", { className: `relative ${serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
496
349
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
497
350
  showTopLabel
498
351
  ? "mt-[24px]"
499
- : "mt-[14px]"} ` },
352
+ : "mt-[20px]"} ` },
500
353
  React.createElement("div", { className: "bg-white rounded-[20px] shadow-service mx-auto relative" },
501
354
  React.createElement("div", { className: "p-[15px] pt-[20px]" },
502
355
  React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:14%_40%_0.5%_24%_13.5%] gap-x-[2%] items-center", style: { marginTop: showTopLabel ? "8px" : "" } },
@@ -505,50 +358,32 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
505
358
  React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: ` h-auto object-contain ${isSoldOut ? "grayscale" : ""}` })),
506
359
  isCiva ? (React.createElement("div", { className: "text-[13.33px] black-text ml-2" }, serviceItem.operator_details[2])) : null),
507
360
  React.createElement("div", { className: `min-h-[2.5rem] grid grid-cols-[0.8fr_auto_26%_1fr] gap-x-4 items-center text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}`, style: {
508
- // gridTemplateRows: isCiva ? "1fr" : "1fr 1fr",
509
361
  gridTemplateRows: "1fr",
510
- // gap: isCiva ? "0" : "10px 16px"
511
362
  } },
512
363
  React.createElement("div", { className: "flex flex-col gap-[10px]" },
513
364
  orignLabel ? (React.createElement("div", { className: "w-[60px] h-[20px] flex items-center bold-text" }, orignLabel)) : (React.createElement("div", { className: "h-[20px] flex items-center" },
514
- 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" : ""}` }))),
365
+ React.createElement("img", { src: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.origin, alt: "origin", className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}` }))),
515
366
  !isCiva &&
516
367
  (destinationLabel ? (React.createElement("div", { className: "w-[60px] h-[20px] flex items-center bold-text" }, destinationLabel)) : (React.createElement("div", { className: "h-[20px] flex items-center" },
517
- React.createElement("img", { src: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.destination, className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }))))),
368
+ React.createElement("img", { src: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.destination, className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }))))),
518
369
  React.createElement("div", { className: "flex flex-col gap-[10px]" },
519
- React.createElement("div", { className: "h-[20px] flex items-center group relative" },
520
- React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.travel_date)),
521
- serviceItem.boarding_stages && (React.createElement("div", { className: "hidden group-hover:block absolute -top-[8px] left-[210px] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service", style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } },
522
- React.createElement("div", { className: "tooltip-arrow absolute top-2 -left-[7px] w-0 h-0 \n border-t-8 border-b-8 border-r-8 \n border-t-transparent border-b-transparent", style: { borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } }),
523
- React.createElement("div", { className: "text-center text-[14px] font-normal", style: { fontWeight: 400 } }, 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))))))),
524
- !isCiva && (React.createElement("div", { className: "h-[20px] flex items-center group relative" },
525
- React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.arrival_date)),
526
- serviceItem.dropoff_stages && (React.createElement("div", { className: "hidden group-hover:block absolute -top-[8px] left-[210px] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service", style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } },
527
- React.createElement("div", { className: "tooltip-arrow absolute top-2 -left-[7px] w-0 h-0 \n border-t-8 border-b-8 border-r-8 \n border-t-transparent border-b-transparent", style: {
528
- borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor,
529
- } }),
530
- React.createElement("div", { className: "text-center text-[14px] font-normal", style: { fontWeight: 400 } }, 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))))))))),
370
+ React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
371
+ React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.travel_date))),
372
+ !isCiva && (React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
373
+ React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.arrival_date))))),
531
374
  React.createElement("div", { className: "flex flex-col gap-[10px] items-center" },
532
375
  React.createElement("div", { className: "h-[20px] flex items-center justify-center" },
533
376
  React.createElement("div", null, "\u2022")),
534
377
  !isCiva && (React.createElement("div", { className: "h-[20px] flex items-center justify-center" }, removeArrivalTime ? null : serviceItem.arr_time ? (React.createElement("div", null, "\u2022")) : null))),
535
378
  React.createElement("div", { className: "flex flex-col gap-[10px]" },
536
- React.createElement("div", { className: "h-[20px] flex items-center relative" },
537
- React.createElement("div", { className: "font-[900] bold-text" }, DateService.formatTime(serviceItem.dep_time)),
538
- serviceItem.boarding_stages && (React.createElement("div", { className: "hidden group-hover:block absolute -top-[8px] left-[210px] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service", style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } },
539
- React.createElement("div", { className: "tooltip-arrow absolute top-2 -left-[7px] w-0 h-0 \n border-t-8 border-b-8 border-r-8 \n border-t-transparent border-b-transparent", style: { borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } }),
540
- React.createElement("div", { className: "text-center text-[14px] font-normal", style: { fontWeight: 400 } }, 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))))))),
541
- !isCiva && (React.createElement("div", { className: "h-[20px] flex items-center relative" },
379
+ React.createElement(StageTooltip, { stageData: serviceItem.dropoff_stages, direction: 2, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
380
+ React.createElement("div", { className: "font-[900] bold-text" }, DateService.formatTime(serviceItem.dep_time))),
381
+ !isCiva && (React.createElement(StageTooltip, { stageData: serviceItem.dropoff_stages, direction: 2, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
542
382
  React.createElement("div", { className: "font-[900] bold-text" }, removeArrivalTime
543
383
  ? null
544
384
  : serviceItem.arr_time
545
385
  ? DateService.formatTime(serviceItem.arr_time)
546
- : null),
547
- serviceItem.dropoff_stages && (React.createElement("div", { className: "hidden group-hover:block absolute -top-[8px] left-[35%] ml-[25px] text-white px-3 py-2 rounded-[10px] whitespace-nowrap z-10 shadow-service", style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor } },
548
- React.createElement("div", { className: "tooltip-arrow absolute top-2 -left-[7px] w-0 h-0 \n border-t-8 border-b-8 border-r-8 \n border-t-transparent border-b-transparent", style: {
549
- borderRightColor: colors === null || colors === void 0 ? void 0 : colors.tooltipColor,
550
- } }),
551
- React.createElement("div", { className: "text-center text-[14px] font-normal", style: { fontWeight: 400 } }, 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)))))))))),
386
+ : null))))),
552
387
  React.createElement("div", { style: {
553
388
  width: "1px",
554
389
  height: "2.5rem",
@@ -591,136 +426,14 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
591
426
  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))))),
592
427
  showLastSeats ? (React.createElement("div", { className: "flex justify-end mr-[11px]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
593
428
  (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!")))) : null,
594
- React.createElement("div", { className: `${"flex justify-between items-center mt-[15px] items-center border-t border-[#eee] mt-[15px] pt-[10px]"}` },
595
- showAvailableSeats ? (React.createElement("div", { className: "text-[#464647] text-[13.33px]" }, serviceItem === null || serviceItem === void 0 ? void 0 :
596
- serviceItem.available_seats,
597
- " ",
598
- "Asientos restantes")) : (React.createElement("div", { className: "flex items-center " },
599
- React.createElement("div", { className: `flex items-center ${showRating ? "cursor-pointer" : ""}`, style: { color: isSoldOut ? "#c0c0c0" : "" } },
600
- showRating ? (React.createElement(RatingHover, { serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation })) : null,
601
- React.createElement("span", { className: "ml-[10px] text-[#464647] text-[13.33px]", style: { marginLeft: showRating ? "10px" : "0" } }, serviceItem.operator_details[2])))),
602
- serviceItem.duration && (React.createElement("div", { className: "flex items-baseline relative text-[#464647]" },
603
- React.createElement("div", { className: `w-[18px] h-auto mr-[4px] ${isSoldOut ? "grayscale" : ""}` }, renderIcon("hours", "14px")),
604
- React.createElement("div", { className: `cursor-default group text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
605
- serviceItem.duration,
606
- " ",
607
- translation.hours,
608
- 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 } },
609
- 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 } }),
610
- "Duraci\u00F3n estimada del viaje")))),
611
- serviceItem.pet_seat_info &&
612
- Object.keys(serviceItem.pet_seat_info).length > 0 ? (React.createElement("div", { className: "flex items-center text-[13.33px]" },
613
- React.createElement("div", { className: `relative group cursor-default ` },
614
- React.createElement("div", { className: "flex items-center" },
615
- React.createElement("div", { className: `mr-[5px] ${isSoldOut ? "grayscale" : ""}` },
616
- React.createElement(LottiePlayer
617
- // animationData={serviceItem.icons.petFriendlyAnim}
618
- , {
619
- // animationData={serviceItem.icons.petFriendlyAnim}
620
- animationData: getAnimationIcon("petFriendlyAnim"), width: "20px", height: "20px" })),
621
- React.createElement("div", { className: "h-auto mr-[4px] text-[13px] text-[#464647]" },
622
- React.createElement("span", null, translation === null || translation === void 0 ? void 0 : translation.petFriendly))),
623
- 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 } },
624
- 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 } }),
625
- "Este servicio incluye asientos para mascotas.")))) : null,
626
- serviceItem.is_change_ticket && (React.createElement("div", { className: "flex items-center" },
627
- React.createElement("div", { className: "relative group cursor-default" },
628
- React.createElement("div", { className: "flex items-center" },
629
- React.createElement("div", { className: `mr-[5px] ${isSoldOut ? "grayscale" : ""}` },
630
- React.createElement(LottiePlayer
631
- // animationData={serviceItem.icons.flexibleAnim}
632
- , {
633
- // animationData={serviceItem.icons.flexibleAnim}
634
- animationData: getAnimationIcon("flexibleIcon"), width: "20px", height: "20px" })),
635
- React.createElement("div", { className: "h-auto mr-[4px] text-[13px] text-[#464647]" },
636
- React.createElement("span", null, translation === null || translation === void 0 ? void 0 : translation.flexible))),
637
- 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: {
638
- backgroundColor: colors.tooltipColor,
639
- lineHeight: "1.5",
640
- } },
641
- 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 } }),
642
- "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,
643
- ") horas antes del viaje.")))),
644
- React.createElement("div", { className: "flex items-center" },
645
- React.createElement("div", null, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled) && (React.createElement("div", { className: "flex items-center mr-[10px]" },
646
- React.createElement("div", { className: `h-auto mr-[4px] text-[13px] text-[#464647] ${isSoldOut ? "grayscale" : ""}` },
647
- React.createElement(LottiePlayer
648
- // animationData={serviceItem.icons.locationAnim}
649
- , {
650
- // animationData={serviceItem.icons.locationAnim}
651
- animationData: getAnimationIcon("locationAnim"), width: "18px", height: "18px" }))))),
652
- React.createElement("div", null, metaData &&
653
- serviceItem.operator_details[4] &&
654
- (() => {
655
- var _a;
656
- const PRIORITY_IDS = ["2", "3", "13"];
657
- const amenities = [...serviceItem.operator_details[4]];
658
- const priorityAmenities = amenities.filter((id) => PRIORITY_IDS.includes(id));
659
- const nonPriorityAmenities = amenities.filter((id) => !PRIORITY_IDS.includes(id));
660
- const hasPriority = priorityAmenities.length > 0;
661
- /* ============================
662
- 🇵🇪 PERU LOGIC
663
- ============================ */
664
- let visibleAmenities = [];
665
- let shouldShowPlus = false;
666
- let plusAmenities = [];
667
- if (isPeru) {
668
- if (hasPriority) {
669
- visibleAmenities = priorityAmenities;
670
- shouldShowPlus = nonPriorityAmenities.length > 0;
671
- plusAmenities = nonPriorityAmenities;
672
- }
673
- else {
674
- visibleAmenities = [];
675
- shouldShowPlus = amenities.length > 0;
676
- plusAmenities = amenities;
677
- }
678
- }
679
- /* ============================
680
- 🌍 NON-PERU LOGIC
681
- ============================ */
682
- if (!isPeru) {
683
- const sortedAmenities = [...amenities].sort((a, b) => Number(PRIORITY_IDS.includes(b)) -
684
- Number(PRIORITY_IDS.includes(a)));
685
- visibleAmenities = sortedAmenities.slice(0, 3);
686
- shouldShowPlus = sortedAmenities.length > 3;
687
- plusAmenities = sortedAmenities.slice(3);
688
- }
689
- return (React.createElement("div", { className: "flex items-center gap-[6px]" },
690
- visibleAmenities.map((val, key) => {
691
- var _a, _b, _c, _d, _e, _f, _g;
692
- 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 mr-2 cursor-pointer" },
693
- React.createElement("div", { className: "group" },
694
- React.createElement("div", { className: `${isSoldOut ? "grayscale" : ""}` },
695
- 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() })),
696
- 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: {
697
- backgroundColor: colors.tooltipColor,
698
- zIndex: 21,
699
- padding: "12px",
700
- } },
701
- 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: {
702
- borderBottomColor: colors.tooltipColor,
703
- } }),
704
- 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;
705
- }),
706
- shouldShowPlus && (React.createElement("div", { className: "relative ml-1 cursor-pointer" },
707
- React.createElement("div", { className: "group" },
708
- React.createElement("img", { src: ((_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a.plus) ||
709
- "/images/icons/amenities/icon_plus.svg", className: "w-[16px] h-[16px]", alt: "plus" }),
710
- 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]" },
711
- 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: {
712
- borderBottomColor: colors.tooltipColor,
713
- } }),
714
- React.createElement("div", { className: "flex flex-col gap-[10px] p-3 rounded-[8px] shadow-md animate-fadeIn relative", style: {
715
- backgroundColor: colors.tooltipColor,
716
- padding: "1rem",
717
- } }, plusAmenities.map((val, key) => {
718
- var _a, _b, _c, _d, _e, _f, _g;
719
- 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" },
720
- 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" }),
721
- 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;
722
- }))))))));
723
- })()))))),
429
+ React.createElement("div", { className: "flex items-center mt-[15px] border-t border-[#eee] pt-[10px]" },
430
+ React.createElement("div", { className: "grid items-center gap-[2%] flex-1", style: {
431
+ gridTemplateColumns: "30% 18% 23% 23%",
432
+ // otherItems
433
+ // .map((i) => i.width)
434
+ // .join(" "),
435
+ } }, otherItems.map((item) => (React.createElement("div", { key: item.key, className: "flex items-center " }, item.render)))),
436
+ React.createElement("div", { className: "flex items-center ml-[12px] shrink-0 w-[130px] justify-end" }, amenitiesItem === null || amenitiesItem === void 0 ? void 0 : amenitiesItem.render)))),
724
437
  children,
725
438
  (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: {
726
439
  backgroundColor: isSoldOut
@@ -745,6 +458,16 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
745
458
  // animationData={serviceItem.icons.priorityStageAnim}
746
459
  animationData: getAnimationIcon("priorityStageAnim"), width: "14px", height: "14px" })),
747
460
  React.createElement("div", { className: isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]` }, showTopLabel))),
461
+ boardingName && isAllinBus && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
462
+ backgroundColor: isSoldOut ? "#ddd" : colors.ratingBottomColor,
463
+ } },
464
+ React.createElement("div", { className: isSoldOut ? "grayscale" : "" },
465
+ React.createElement(LottiePlayer
466
+ // animationData={serviceItem.icons.priorityStageAnim}
467
+ , {
468
+ // animationData={serviceItem.icons.priorityStageAnim}
469
+ animationData: getAnimationIcon("priorityStageAnim"), width: "14px", height: "14px" })),
470
+ React.createElement("div", { className: isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]` }, boardingName))),
748
471
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] text-white px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
749
472
  backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
750
473
  } },
package/dist/components/ServiceItem/ServiceItemDesktop.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  import { ServiceItemProps } from "./types";
3
- declare function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t, siteType, }: ServiceItemProps & {
3
+ declare function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t, siteType, isAllinBus, }: ServiceItemProps & {
4
4
  currencySign?: string;
5
5
  }): React.ReactElement;
6
6
  export default ServiceItemPB;