kupos-ui-components-lib 9.2.8 → 9.2.9

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 (9) hide show
  1. package/dist/components/ServiceItem/PeruServiceItemDesktop.d.ts +1 -1
  2. package/dist/components/ServiceItem/PeruServiceItemDesktop.js +243 -127
  3. package/dist/components/ServiceItem/ServiceItemDesktop.js +7 -11
  4. package/dist/styles.css +3 -0
  5. package/dist/ui/RatingBlock.js +3 -3
  6. package/package.json +1 -1
  7. package/src/components/ServiceItem/PeruServiceItemDesktop.tsx +404 -92
  8. package/src/components/ServiceItem/ServiceItemDesktop.tsx +9 -9
  9. package/src/ui/RatingBlock.tsx +3 -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, isAllinBus, 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, viewersConfig, isExpand, setIsExpand, coachKey, t, }: ServiceItemProps & {
4
4
  currencySign?: string;
5
5
  }): React.ReactElement;
6
6
  export default PeruServiceItemDesktop;
package/dist/components/ServiceItem/PeruServiceItemDesktop.js CHANGED
@@ -14,73 +14,78 @@ import pullmanFlexibleAnimation from "../../assets/images/anims/service_list/pul
14
14
  import pullmanPetFriendlyAnimation from "../../assets/images/anims/service_list/pullmanPetFriendly.json";
15
15
  import pullmanLocationAnimation from "../../assets/images/anims/service_list/pullmanLocation.json";
16
16
  import pullmanPriorityStageAnimation from "../../assets/images/anims/service_list/pullmanPriorityStage.json";
17
- import pullmanPromoAnimation from "../../assets/images/anims/service_list/promocion.json";
18
- import pullmanDirectoAnimation from "../../assets/images/anims/service_list/directo.json";
19
17
  import opsitesFlexibleAnimation from "../../assets/images/anims/service_list/opsitesFlexible.json";
20
18
  import opsitesPetFriendlyAnimation from "../../assets/images/anims/service_list/opsitesPetFriendly.json";
21
19
  import opsitesLocationAnimation from "../../assets/images/anims/service_list/opsitesLocation.json";
22
20
  import opsitesPriorityStageAnimation from "../../assets/images/anims/service_list/opsitesPriorityStage.json";
23
- import opsitesPromoAnimation from "../../assets/images/anims/service_list/promocion.json";
24
- import opsitesDirectoAnimation from "../../assets/images/anims/service_list/directo.json";
25
- import linatalFlexibleAnimation from "../../assets/images/anims/service_list/flexible.json";
26
- import linatalPromoAnimation from "../../assets/images/anims/service_list/promocion.json";
27
- import linatalDirectoAnimation from "../../assets/images/anims/service_list/directo.json";
28
- import linatalPriorityStageAnimation from "../../assets/images/anims/service_list/priority_stage.json";
29
- import linatalPetFriendlyAnimation from "../../assets/images/anims/service_list/pet_friendly.json";
30
- import linatalLocationAnimation from "../../assets/images/anims/service_list/location.json";
21
+ import bombAnimation from "../../assets/images/anims/service_list/bomb.json";
31
22
  import StageTooltip from "../../ui/StagesTooltip";
32
23
  import RatingBlock from "../../ui/RatingBlock";
33
24
  import DurationBlock from "../../ui/DurationBlock";
34
25
  import PetBlock from "../../ui/PetBlock";
35
26
  import FlexibleBlock from "../../ui/FlexibleBlock";
36
27
  import AmenitiesBlock from "../../ui/AmenitiesBlock";
28
+ import SeatSection from "../../ui/SeatSection/SeatSection";
29
+ import KuposButton from "../../ui/KuposButton/KuposButton";
30
+ import BottomAmenities from "../../ui/BottomAmenities/BottomAmenities";
37
31
  const SEAT_EXCEPTIONS = ["Asiento mascota"];
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, }) {
32
+ const ANIMATION_MAP = {
33
+ promoAnim: {
34
+ kupos: promoAnimation,
35
+ },
36
+ locationAnim: {
37
+ kupos: locationAnimation,
38
+ pullman: pullmanLocationAnimation,
39
+ opsites: opsitesLocationAnimation,
40
+ },
41
+ directoAnim: {
42
+ kupos: directoAnimation,
43
+ },
44
+ petFriendlyAnim: {
45
+ kupos: petFriendlyAnimation,
46
+ pullman: pullmanPetFriendlyAnimation,
47
+ opsites: opsitesPetFriendlyAnimation,
48
+ },
49
+ priorityStageAnim: {
50
+ kupos: priorityStageAnimation,
51
+ pullman: pullmanPriorityStageAnimation,
52
+ opsites: opsitesPriorityStageAnimation,
53
+ },
54
+ flexibleIcon: {
55
+ kupos: flexibleAnimation,
56
+ pullman: pullmanFlexibleAnimation,
57
+ opsites: opsitesFlexibleAnimation,
58
+ },
59
+ bombAnimation: {
60
+ kupos: bombAnimation,
61
+ },
62
+ };
63
+ 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, viewersConfig, isExpand, setIsExpand, coachKey, t = (key) => key, }) {
39
64
  var _a, _b, _c, _d;
40
- const animationMap = {
41
- promoAnim: {
42
- kupos: promoAnimation,
43
- pullman: pullmanPromoAnimation,
44
- opsites: opsitesPromoAnimation,
45
- linatal: linatalPromoAnimation,
46
- },
47
- locationAnim: {
48
- kupos: locationAnimation,
49
- pullman: pullmanLocationAnimation,
50
- opsites: opsitesLocationAnimation,
51
- linatal: linatalLocationAnimation,
52
- },
53
- directoAnim: {
54
- kupos: directoAnimation,
55
- pullman: pullmanDirectoAnimation,
56
- opsites: opsitesDirectoAnimation,
57
- linatal: linatalDirectoAnimation,
58
- },
59
- petFriendlyAnim: {
60
- kupos: petFriendlyAnimation,
61
- pullman: pullmanPetFriendlyAnimation,
62
- opsites: opsitesPetFriendlyAnimation,
63
- linatal: linatalPetFriendlyAnimation,
64
- },
65
- priorityStageAnim: {
66
- kupos: priorityStageAnimation,
67
- pullman: pullmanPriorityStageAnimation,
68
- opsites: opsitesPriorityStageAnimation,
69
- linatal: linatalPriorityStageAnimation,
70
- },
71
- flexibleIcon: {
72
- kupos: flexibleAnimation,
73
- pullman: pullmanFlexibleAnimation,
74
- opsites: opsitesFlexibleAnimation,
75
- linatal: linatalFlexibleAnimation,
76
- },
65
+ const startViewerCount = (node) => {
66
+ if (!node || !viewersConfig)
67
+ return;
68
+ const prevId = node.dataset.viewerId;
69
+ if (prevId)
70
+ clearInterval(Number(prevId));
71
+ const { min, max, interval = 5000 } = viewersConfig;
72
+ const clamp = (v) => Math.min(max, Math.max(min, v));
73
+ const initialValue = Math.floor(Math.random() * (max - min + 1)) + min;
74
+ node.textContent = String(initialValue);
75
+ const id = setInterval(() => {
76
+ const current = Number(node.textContent) || initialValue;
77
+ const delta = Math.ceil(current * 0.2);
78
+ const next = current + Math.floor(Math.random() * (2 * delta + 1)) - delta;
79
+ node.textContent = String(clamp(Math.round(next)));
80
+ }, interval);
81
+ node.dataset.viewerId = String(id);
77
82
  };
78
83
  const getAnimationIcon = (icon) => {
79
- const animation = animationMap[icon];
84
+ var _a;
85
+ const animation = ANIMATION_MAP[icon];
80
86
  if (!animation)
81
87
  return null;
82
- const currentSiteType = siteType || "kupos";
83
- return animation[currentSiteType];
88
+ return (_a = animation[siteType]) !== null && _a !== void 0 ? _a : animation.kupos;
84
89
  };
85
90
  const SvgAmenities = ({ moreAnemities, name, color, }) => {
86
91
  var _a;
@@ -312,18 +317,55 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
312
317
  const dropoffName = ((_b = serviceItem.stage_details_arr) === null || _b === void 0 ? void 0 : _b.length)
313
318
  ? extractStage(serviceItem.stage_details_arr, 1)
314
319
  : null;
320
+ const countdownSeconds = 599;
321
+ const startCountdown = (node) => {
322
+ if (!node)
323
+ return;
324
+ const prevId = node.dataset.countdownId;
325
+ if (prevId)
326
+ clearInterval(Number(prevId));
327
+ let remaining = countdownSeconds;
328
+ const formatTime = (totalSecs) => {
329
+ const m = Math.floor(totalSecs / 60);
330
+ const s = totalSecs % 60;
331
+ return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
332
+ };
333
+ node.textContent = formatTime(remaining);
334
+ const id = setInterval(() => {
335
+ remaining -= 1;
336
+ if (remaining <= 0) {
337
+ remaining = countdownSeconds;
338
+ }
339
+ node.textContent = formatTime(remaining);
340
+ }, 1000);
341
+ node.dataset.countdownId = String(id);
342
+ };
315
343
  const items = [
316
344
  {
317
- key: "rating",
318
- width: "30%",
319
- render: (React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru })),
345
+ key: "amenities",
346
+ width: "20%",
347
+ condition: true,
348
+ render: (React.createElement(AmenitiesBlock, { serviceItem: serviceItem, metaData: metaData, isSoldOut: isSoldOut, colors: colors, getAnimationIcon: getAnimationIcon, getAmenityName: CommonService.getAmenityName, SvgAmenities: SvgAmenities, isPeru: isPeru })),
320
349
  },
321
350
  {
322
351
  key: "duration",
323
- width: "20%",
352
+ width: "12%",
324
353
  condition: serviceItem.duration,
325
354
  render: (React.createElement(DurationBlock, { serviceItem: serviceItem, translation: translation, renderIcon: renderIcon, isSoldOut: isSoldOut, colors: colors })),
326
355
  },
356
+ // {
357
+ // key: "directo",
358
+ // width: "12%",
359
+ // condition: serviceItem?.is_direct_trip === true,
360
+ // render: (
361
+ // <DirectoBlock
362
+ // translation={translation}
363
+ // getAnimationIcon={getAnimationIcon}
364
+ // colors={colors}
365
+ // isSoldOut={isSoldOut}
366
+ // />
367
+ // ),
368
+ // },
327
369
  {
328
370
  key: "pet",
329
371
  width: "20%",
@@ -334,48 +376,137 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
334
376
  {
335
377
  key: "flexible",
336
378
  width: "20%",
337
- condition: false,
379
+ condition: serviceItem.is_change_ticket === true,
338
380
  render: (React.createElement(FlexibleBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, serviceItem: serviceItem, isSoldOut: isSoldOut })),
339
381
  },
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
382
  ];
346
- const amenitiesItem = items.find((i) => i.key === "amenities");
347
- const otherItems = items.filter((i) => i.key !== "amenities" && i.condition !== false);
383
+ const otherItems = items.filter((i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition);
384
+ const isItemExpanded = serviceItem.id === isExpand || isExpand === true;
385
+ const grayscaleClass = isSoldOut ? "grayscale" : "";
386
+ // const items = [
387
+ // {
388
+ // key: "rating",
389
+ // width: "30%",
390
+ // render: (
391
+ // <RatingBlock
392
+ // showRating={showRating}
393
+ // serviceItem={serviceItem}
394
+ // isSoldOut={isSoldOut}
395
+ // colors={colors}
396
+ // t={t}
397
+ // translation={translation}
398
+ // isPeru={isPeru}
399
+ // />
400
+ // ),
401
+ // },
402
+ // {
403
+ // key: "duration",
404
+ // width: "20%",
405
+ // condition: serviceItem.duration,
406
+ // render: (
407
+ // <DurationBlock
408
+ // serviceItem={serviceItem}
409
+ // translation={translation}
410
+ // renderIcon={renderIcon}
411
+ // isSoldOut={isSoldOut}
412
+ // colors={colors}
413
+ // />
414
+ // ),
415
+ // },
416
+ // {
417
+ // key: "pet",
418
+ // width: "20%",
419
+ // condition:
420
+ // serviceItem.pet_seat_info &&
421
+ // Object.keys(serviceItem.pet_seat_info).length > 0,
422
+ // render: (
423
+ // <PetBlock
424
+ // translation={translation}
425
+ // getAnimationIcon={getAnimationIcon}
426
+ // colors={colors}
427
+ // isSoldOut={isSoldOut}
428
+ // />
429
+ // ),
430
+ // },
431
+ // {
432
+ // key: "flexible",
433
+ // width: "20%",
434
+ // condition: false,
435
+ // render: (
436
+ // <FlexibleBlock
437
+ // translation={translation}
438
+ // getAnimationIcon={getAnimationIcon}
439
+ // colors={colors}
440
+ // serviceItem={serviceItem}
441
+ // isSoldOut={isSoldOut}
442
+ // />
443
+ // ),
444
+ // },
445
+ // {
446
+ // key: "amenities",
447
+ // width: "20%",
448
+ // render: (
449
+ // <AmenitiesBlock
450
+ // serviceItem={serviceItem}
451
+ // metaData={metaData}
452
+ // isSoldOut={isSoldOut}
453
+ // colors={colors}
454
+ // isPeru={isPeru}
455
+ // getAnimationIcon={getAnimationIcon}
456
+ // getAmenityName={CommonService.getAmenityName}
457
+ // SvgAmenities={SvgAmenities}
458
+ // />
459
+ // ),
460
+ // },
461
+ // ];
462
+ // const amenitiesItem = items.find((i) => i.key === "amenities");
463
+ // const otherItems = items.filter(
464
+ // (i) => i.key !== "amenities" && i.condition !== false,
465
+ // );
348
466
  return (React.createElement("div", { className: `relative ${serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
349
467
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
350
468
  showTopLabel
351
469
  ? "mt-[24px]"
352
470
  : "mt-[20px]"} ` },
353
- React.createElement("div", { className: "bg-white rounded-[20px] shadow-service mx-auto relative" },
354
- React.createElement("div", { className: "p-[15px] pt-[20px]" },
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" : "" } },
356
- React.createElement("div", { className: "flex items-center justify-center m-[auto]" },
357
- React.createElement("div", { className: " " },
358
- React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: ` h-auto object-contain ${isSoldOut ? "grayscale" : ""}` })),
359
- isCiva ? (React.createElement("div", { className: "text-[13.33px] black-text ml-2" }, serviceItem.operator_details[2])) : null),
471
+ React.createElement("div", { id: `service-card-${serviceItem.id}`, className: "bg-white mx-auto relative rounded-[10px] border border-[#ccc]" },
472
+ React.createElement("div", { className: " pt-[20px]", style: {
473
+ padding: coachKey ? "15px 15px 20px 15px" : "20px 15px 11px 15px",
474
+ } },
475
+ React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:14%_40%_0.5%_24%_13.5%] gap-x-[2%] items-center",
476
+ // style={{ marginTop: showTopLabel ? "8px" : "" }}
477
+ style: {
478
+ marginTop: showTopLabel || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "8px" : "",
479
+ } },
480
+ React.createElement("div", { style: {
481
+ display: "flex",
482
+ flexDirection: "column",
483
+ // gap: "5px",
484
+ } },
485
+ React.createElement("div", {
486
+ // className="flex items-center justify-center m-[auto]"
487
+ className: "" },
488
+ React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `h-[30px] w-[auto] ${isSoldOut ? "grayscale" : ""}` }),
489
+ isCiva ? (React.createElement("div", { className: "text-[13.33px] black-text ml-2" }, serviceItem.operator_details[2])) : null),
490
+ React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru })),
360
491
  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: {
361
492
  gridTemplateRows: "1fr",
362
493
  } },
363
- React.createElement("div", { className: "flex flex-col gap-[10px]" },
494
+ React.createElement("div", { className: "flex flex-col gap-[4px]" },
364
495
  orignLabel ? (React.createElement("div", { className: "w-[60px] h-[20px] flex items-center bold-text" }, orignLabel)) : (React.createElement("div", { className: "h-[20px] flex items-center" },
365
496
  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" : ""}` }))),
366
497
  !isCiva &&
367
498
  (destinationLabel ? (React.createElement("div", { className: "w-[60px] h-[20px] flex items-center bold-text" }, destinationLabel)) : (React.createElement("div", { className: "h-[20px] flex items-center" },
368
499
  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 } }))))),
369
- React.createElement("div", { className: "flex flex-col gap-[10px]" },
500
+ React.createElement("div", { className: "flex flex-col gap-[4px]" },
370
501
  React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
371
502
  React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.travel_date))),
372
503
  !isCiva && (React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
373
504
  React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.arrival_date))))),
374
- React.createElement("div", { className: "flex flex-col gap-[10px] items-center" },
505
+ React.createElement("div", { className: "flex flex-col gap-[4px] items-center" },
375
506
  React.createElement("div", { className: "h-[20px] flex items-center justify-center" },
376
507
  React.createElement("div", null, "\u2022")),
377
508
  !isCiva && (React.createElement("div", { className: "h-[20px] flex items-center justify-center" }, removeArrivalTime ? null : serviceItem.arr_time ? (React.createElement("div", null, "\u2022")) : null))),
378
- React.createElement("div", { className: "flex flex-col gap-[10px]" },
509
+ React.createElement("div", { className: "flex flex-col gap-[4px]" },
379
510
  React.createElement(StageTooltip, { stageData: serviceItem.dropoff_stages, direction: 2, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
380
511
  React.createElement("div", { className: "font-[900] bold-text" }, DateService.formatTime(serviceItem.dep_time))),
381
512
  !isCiva && (React.createElement(StageTooltip, { stageData: serviceItem.dropoff_stages, direction: 2, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
@@ -391,62 +522,47 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
391
522
  margin: "auto",
392
523
  } }),
393
524
  React.createElement("div", { className: "content-center" },
394
- React.createElement("div", { className: `relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.5rem] ${getNumberOfSeats() < 3 ? "" : ""}`, style: getNumberOfSeats() < 2
395
- ? { alignItems: "center" }
396
- : { alignItems: "center" } },
397
- React.createElement("div", { className: "flex flex-col justify-between" }, getSeatNames()),
398
- React.createElement("div", { className: "flex flex-col justify-between absolute inset-y-0 right-0 left-1/2 h-full", style: {
399
- color: isSoldOut ? "#c0c0c0" : colors.priceColor,
400
- top: 0,
401
- bottom: 0,
402
- left: "68%",
403
- right: 0,
404
- justifyContent: getNumberOfSeats() < 2 ? "center" : "center",
405
- } },
406
- React.createElement("span", { style: {
407
- position: "absolute",
408
- top: -5,
409
- fontWeight: "initial",
410
- fontSize: "12px",
411
- left: 0,
412
- color: "#6a6a6a",
413
- } }, "Desde"),
414
- getSeatPrice()))),
525
+ React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru })),
415
526
  React.createElement("div", null,
416
- 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: {
417
- backgroundColor: serviceDetailsLoading || isSoldOut
418
- ? "lightgray"
419
- : colors.kuposButtonColor,
420
- cursor: serviceDetailsLoading || isSoldOut
421
- ? "not-allowed"
422
- : "pointer",
423
- } },
424
- React.createElement("span", { className: "min-w-[75px] flex justify-center items-center bold-text uppercase" },
425
- isSoldOut ? renderIcon("soldOutIcon", "14px") : null,
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))))),
427
- showLastSeats ? (React.createElement("div", { className: "flex justify-end mr-[11px]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
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,
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)))),
527
+ showLastSeats ? (React.createElement("div", { className: "flex justify-end mr-[11px] ", style: {
528
+ position: "absolute",
529
+ top: serviceDetailsLoading ? "7px" : "5px",
530
+ right: "16px",
531
+ } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
532
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[12px] text-[#464647] mt-1 text-center" }, "\u00A1\u00DAltimos Asientos!")))) : null,
533
+ React.createElement(KuposButton, { isSoldOut: isSoldOut, isLoading: serviceDetailsLoading, buttonColor: colors.kuposButtonColor, buyLabel: translation === null || translation === void 0 ? void 0 : translation.buyButton, soldOutLabel: translation === null || translation === void 0 ? void 0 : translation.soldOutButton, soldOutIcon: renderIcon("soldOutIcon", "14px"), onClick: checkMidnight }))),
534
+ React.createElement(BottomAmenities, { otherItems: otherItems, serviceItem: serviceItem, grayscaleClass: grayscaleClass, isSoldOut: isSoldOut, isItemExpanded: isItemExpanded, colors: colors, translation: translation, getAnimationIcon: getAnimationIcon, downArrowIcon: renderIcon("downArrow", "10px"), onToggleExpand: () => setIsExpand && setIsExpand(isItemExpanded ? null : serviceItem.id), isPeru: isPeru }))),
437
535
  children,
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: {
439
- backgroundColor: isSoldOut
440
- ? colors === null || colors === void 0 ? void 0 : colors.bottomStripColor
441
- : colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
536
+ (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: {
537
+ backgroundColor: colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
442
538
  opacity: isSoldOut ? 0.5 : 1,
443
539
  } },
444
- React.createElement(LottiePlayer
445
- // animationData={serviceItem.icons.promoAnim}
446
- , {
447
- // animationData={serviceItem.icons.promoAnim}
448
- animationData: getAnimationIcon("promoAnim"), width: "18px", height: "18px" }),
449
- React.createElement("span", { className: "ml-[10px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))),
540
+ React.createElement("div", { className: "flex justify-between items-center w-full" },
541
+ React.createElement("div", { className: "flex items-center " },
542
+ React.createElement("div", { className: "flex items-center" },
543
+ React.createElement(LottiePlayer, { animationData: getAnimationIcon("bombAnimation"), width: "18px", height: "18px" }),
544
+ React.createElement("div", { className: "flex items-center mt-[2px]" },
545
+ React.createElement("span", { className: "bold-text ml-[6px]" },
546
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "",
547
+ "\u00A0"),
548
+ " ",
549
+ "| Termina en\u00A0",
550
+ React.createElement("span", { className: "bold-text text-end", ref: startCountdown, style: {
551
+ fontVariantNumeric: "tabular-nums",
552
+ display: "inline-block",
553
+ // minWidth: "70px",
554
+ } })))),
555
+ React.createElement("div", { className: "flex items-center" },
556
+ renderIcon("personIcon", "16px"),
557
+ "\u00A0",
558
+ React.createElement("span", { className: "ml-[6px]" },
559
+ React.createElement("span", { className: "bold-text", ref: startViewerCount, style: { fontVariantNumeric: "tabular-nums" } }),
560
+ " ",
561
+ React.createElement("span", { className: "bold-text" }, "personas"),
562
+ " ",
563
+ React.createElement("span", null,
564
+ " ",
565
+ (viewersConfig === null || viewersConfig === void 0 ? void 0 : viewersConfig.label) || " están viendo este viaje")))))),
450
566
  React.createElement("div", { className: "absolute -top-[11px] left-0 w-full flex items-center justify-end gap-[12px] pr-[15px] z-10 " },
451
567
  showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
452
568
  backgroundColor: isSoldOut ? "#ddd" : colors.ratingBottomColor,
@@ -471,7 +587,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
471
587
  (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: {
472
588
  backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
473
589
  } },
474
- React.createElement(LottiePlayer, { animationData: serviceItem.icons.connectingServiceIcon, width: "14px", height: "14px" }),
590
+ renderIcon("connectingServiceIcon", "12px"),
475
591
  React.createElement("div", null, "Conexión"))),
476
592
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] text-white px-[14px] rounded-[38px] text-[12.5px] z-20 `, style: {
477
593
  backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -263,7 +263,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
263
263
  },
264
264
  ];
265
265
  const otherItems = items.filter((i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition);
266
- return (React.createElement(React.Fragment, null, isPeruSites ? (React.createElement(PeruServiceItemDesktop, { serviceItem: serviceItem, onBookButtonPress: onBookButtonPress, colors: colors, metaData: metaData, children: children, busStage: busStage, serviceDetailsLoading: serviceDetailsLoading, cityOrigin: cityOrigin, cityDestination: cityDestination, translation: translation, orignLabel: orignLabel, destinationLabel: destinationLabel, currencySign: currencySign, isCiva: isCiva, showRating: showRating, showLastSeats: showLastSeats, removeArrivalTime: removeArrivalTime, removeDuplicateSeats: removeDuplicateSeats, isPeruSites: isPeruSites, t: (key) => t(key), showAvailableSeats: showAvailableSeats, isSeatIcon: isSeatIcon, isPeru: isPeru, siteType: siteType, isAllinBus: isAllinBus })) : (React.createElement("div", {
266
+ return (React.createElement(React.Fragment, null, isPeruSites ? (React.createElement(PeruServiceItemDesktop, { serviceItem: serviceItem, onBookButtonPress: onBookButtonPress, colors: colors, metaData: metaData, children: children, busStage: busStage, serviceDetailsLoading: serviceDetailsLoading, cityOrigin: cityOrigin, cityDestination: cityDestination, translation: translation, orignLabel: orignLabel, destinationLabel: destinationLabel, currencySign: currencySign, isCiva: isCiva, showRating: showRating, showLastSeats: showLastSeats, removeArrivalTime: removeArrivalTime, removeDuplicateSeats: removeDuplicateSeats, isPeruSites: isPeruSites, t: (key) => t(key), showAvailableSeats: showAvailableSeats, isSeatIcon: isSeatIcon, isPeru: isPeru, siteType: siteType, isAllinBus: isAllinBus, viewersConfig: viewersConfig })) : (React.createElement("div", {
267
267
  // className={`relative ${
268
268
  // serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"
269
269
  // } mt-[14px]`}
@@ -286,7 +286,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
286
286
  React.createElement("div", { style: {
287
287
  display: "flex",
288
288
  flexDirection: "column",
289
- // gap: "5px",
289
+ gap: "5px",
290
290
  } },
291
291
  React.createElement("div", {
292
292
  // className="flex items-center justify-center m-[auto]"
@@ -302,11 +302,9 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
302
302
  } }),
303
303
  React.createElement("div", { className: "content-center" },
304
304
  React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru })),
305
- React.createElement("div", null,
306
- showLastSeats ? (React.createElement("div", { className: "flex justify-end mr-[11px] ", style: {
307
- position: "absolute",
308
- top: serviceDetailsLoading ? "7px" : "5px",
309
- right: "16px",
305
+ React.createElement("div", { className: "relative" },
306
+ showLastSeats ? (React.createElement("div", { className: "flex justify-end mr-[11px] w-[100%] right-[0px] absolute", style: {
307
+ top: serviceDetailsLoading ? "-17px" : "-20px",
310
308
  } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
311
309
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[12px] text-[#464647] mt-1 text-center" }, "\u00A1\u00DAltimos Asientos!")))) : null,
312
310
  React.createElement(KuposButton, { isSoldOut: isSoldOut, isLoading: serviceDetailsLoading, buttonColor: colors.kuposButtonColor, buyLabel: translation === null || translation === void 0 ? void 0 : translation.buyButton, soldOutLabel: translation === null || translation === void 0 ? void 0 : translation.soldOutButton, soldOutIcon: renderIcon("soldOutIcon", "14px"), onClick: checkMidnight }))),
@@ -366,12 +364,10 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
366
364
  // animationData={serviceItem.icons.priorityStageAnim}
367
365
  animationData: getAnimationIcon("priorityStageAnim"), width: "14px", height: "14px" })),
368
366
  React.createElement("div", { className: isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]` }, showTopLabel))),
369
- (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: {
367
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) && (React.createElement("div", { className: `flex items-center gap-[6px] py-[4px] text-white px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
370
368
  backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
371
369
  } },
372
- React.createElement(LottiePlayer, { animationData: serviceItem.icons.connectingServiceIcon,
373
- // animationData={getAnimationIcon(connectingServiceIcon)}
374
- width: "14px", height: "14px" }),
370
+ renderIcon("connectingServiceIcon", "12px"),
375
371
  React.createElement("div", null, "Conexión"))),
376
372
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] text-white px-[14px] rounded-[38px] text-[12.5px] z-20 `, style: {
377
373
  backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
package/dist/styles.css CHANGED
@@ -57,6 +57,9 @@
57
57
  .right-\[0\] {
58
58
  right: 0;
59
59
  }
60
+ .right-\[0px\] {
61
+ right: 0px;
62
+ }
60
63
  .-bottom-\[9\%\] {
61
64
  bottom: calc(9% * -1);
62
65
  }
package/dist/ui/RatingBlock.js CHANGED
@@ -2,11 +2,11 @@ import React from "react";
2
2
  import RatingHover from "../components/ServiceItem/RatingHover";
3
3
  const RatingBlock = ({ showRating, serviceItem, isSoldOut, colors, t, translation, isPeru = false, }) => (React.createElement("div", { className: "flex items-center whitespace-nowrap" },
4
4
  showRating && (React.createElement(RatingHover, { serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru })),
5
- React.createElement("div", { className: "group relative ml-[10px] text-[13.33px]", style: {
6
- marginLeft: showRating ? "10px" : "0",
5
+ React.createElement("div", { className: "group relative ml-[10px] text-[12px]", style: {
6
+ marginLeft: showRating ? "6px" : "0",
7
7
  color: isSoldOut ? "#c0c0c0" : "#464647",
8
8
  } },
9
- React.createElement("span", { className: "block max-w-[120px] overflow-hidden text-ellipsis whitespace-nowrap cursor-pointer" }, serviceItem.operator_details[2]),
9
+ React.createElement("span", { className: "block max-w-[120px] overflow-hidden text-ellipsis whitespace-nowrap cursor-pointer text-[12px]" }, serviceItem.operator_details[2]),
10
10
  React.createElement("div", { className: "hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-nowrap z-10 mt-2.5 w-max text-center shadow-service text-[12px]", style: { backgroundColor: colors.bottomStripColor, zIndex: "300" } },
11
11
  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.bottomStripColor } }),
12
12
  serviceItem.operator_details[2]))));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "9.2.8",
3
+ "version": "9.2.9",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"