kupos-ui-components-lib 9.7.6 → 9.7.8

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 +188 -134
  3. package/dist/components/ServiceItem/ServiceItemDesktop.js +1 -1
  4. package/dist/styles.css +0 -15
  5. package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.d.ts +5 -1
  6. package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.js +40 -92
  7. package/dist/ui/FeatureServiceUI/FeatureServiceUi.d.ts +5 -1
  8. package/dist/ui/FeatureServiceUI/FeatureServiceUi.js +40 -5
  9. package/package.json +1 -1
  10. package/src/components/ServiceItem/PeruServiceItemDesktop.tsx +345 -254
  11. package/src/components/ServiceItem/ServiceItemDesktop.tsx +6 -0
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, isLoggedIn, showLoginModal, 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,65 @@ 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";
22
+ import dotAnimation from "../../assets/images/anims/service_list/dot_animation.json";
31
23
  import StageTooltip from "../../ui/StagesTooltip";
32
24
  import RatingBlock from "../../ui/RatingBlock";
33
25
  import DurationBlock from "../../ui/DurationBlock";
34
26
  import PetBlock from "../../ui/PetBlock";
35
27
  import FlexibleBlock from "../../ui/FlexibleBlock";
36
28
  import AmenitiesBlock from "../../ui/AmenitiesBlock";
29
+ import SeatSection from "../../ui/SeatSection/SeatSection";
30
+ import KuposButton from "../../ui/KuposButton/KuposButton";
31
+ import BottomAmenities from "../../ui/BottomAmenities/BottomAmenities";
37
32
  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, }) {
39
- 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
- },
77
- };
33
+ const ANIMATION_MAP = {
34
+ promoAnim: {
35
+ kupos: promoAnimation,
36
+ },
37
+ locationAnim: {
38
+ kupos: locationAnimation,
39
+ pullman: pullmanLocationAnimation,
40
+ opsites: opsitesLocationAnimation,
41
+ },
42
+ directoAnim: {
43
+ kupos: directoAnimation,
44
+ },
45
+ petFriendlyAnim: {
46
+ kupos: petFriendlyAnimation,
47
+ pullman: pullmanPetFriendlyAnimation,
48
+ opsites: opsitesPetFriendlyAnimation,
49
+ },
50
+ priorityStageAnim: {
51
+ kupos: priorityStageAnimation,
52
+ pullman: pullmanPriorityStageAnimation,
53
+ opsites: opsitesPriorityStageAnimation,
54
+ },
55
+ flexibleIcon: {
56
+ kupos: flexibleAnimation,
57
+ pullman: pullmanFlexibleAnimation,
58
+ opsites: opsitesFlexibleAnimation,
59
+ },
60
+ bombAnimation: {
61
+ kupos: bombAnimation,
62
+ },
63
+ dotAnimation: {
64
+ kupos: dotAnimation,
65
+ opsites: dotAnimation,
66
+ },
67
+ };
68
+ 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, isLoggedIn, showLoginModal, t = (key) => key, }) {
69
+ var _a, _b, _c, _d, _e;
78
70
  const getAnimationIcon = (icon) => {
79
- const animation = animationMap[icon];
71
+ var _a;
72
+ const animation = ANIMATION_MAP[icon];
80
73
  if (!animation)
81
74
  return null;
82
- const currentSiteType = siteType || "kupos";
83
- return animation[currentSiteType];
75
+ return (_a = animation[siteType]) !== null && _a !== void 0 ? _a : animation.kupos;
84
76
  };
85
77
  const SvgAmenities = ({ moreAnemities, name, color, }) => {
86
78
  var _a;
@@ -224,6 +216,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
224
216
  };
225
217
  const checkMidnight = () => {
226
218
  var _a, _b;
219
+ setIsExpand === null || setIsExpand === void 0 ? void 0 : setIsExpand(null);
227
220
  if ((cityOrigin === null || cityOrigin === void 0 ? void 0 : cityOrigin.label) &&
228
221
  (cityDestination === null || cityDestination === void 0 ? void 0 : cityDestination.label) &&
229
222
  ((cityOrigin.label.toLowerCase().includes("argentina") &&
@@ -312,18 +305,55 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
312
305
  const dropoffName = ((_b = serviceItem.stage_details_arr) === null || _b === void 0 ? void 0 : _b.length)
313
306
  ? extractStage(serviceItem.stage_details_arr, 1)
314
307
  : null;
308
+ const countdownSeconds = 599;
309
+ const startCountdown = (node) => {
310
+ if (!node)
311
+ return;
312
+ const prevId = node.dataset.countdownId;
313
+ if (prevId)
314
+ clearInterval(Number(prevId));
315
+ let remaining = countdownSeconds;
316
+ const formatTime = (totalSecs) => {
317
+ const m = Math.floor(totalSecs / 60);
318
+ const s = totalSecs % 60;
319
+ return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
320
+ };
321
+ node.textContent = formatTime(remaining);
322
+ const id = setInterval(() => {
323
+ remaining -= 1;
324
+ if (remaining <= 0) {
325
+ remaining = countdownSeconds;
326
+ }
327
+ node.textContent = formatTime(remaining);
328
+ }, 1000);
329
+ node.dataset.countdownId = String(id);
330
+ };
315
331
  const items = [
316
332
  {
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 })),
333
+ key: "amenities",
334
+ width: "20%",
335
+ condition: true,
336
+ render: (React.createElement(AmenitiesBlock, { serviceItem: serviceItem, metaData: metaData, isSoldOut: isSoldOut, colors: colors, getAnimationIcon: getAnimationIcon, getAmenityName: CommonService.getAmenityName, SvgAmenities: SvgAmenities, isPeru: isPeru })),
320
337
  },
321
338
  {
322
339
  key: "duration",
323
- width: "20%",
340
+ width: "12%",
324
341
  condition: serviceItem.duration,
325
342
  render: (React.createElement(DurationBlock, { serviceItem: serviceItem, translation: translation, renderIcon: renderIcon, isSoldOut: isSoldOut, colors: colors })),
326
343
  },
344
+ // {
345
+ // key: "directo",
346
+ // width: "12%",
347
+ // condition: serviceItem?.is_direct_trip === true,
348
+ // render: (
349
+ // <DirectoBlock
350
+ // translation={translation}
351
+ // getAnimationIcon={getAnimationIcon}
352
+ // colors={colors}
353
+ // isSoldOut={isSoldOut}
354
+ // />
355
+ // ),
356
+ // },
327
357
  {
328
358
  key: "pet",
329
359
  width: "20%",
@@ -334,48 +364,82 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
334
364
  {
335
365
  key: "flexible",
336
366
  width: "20%",
337
- condition: false,
367
+ condition: serviceItem.is_change_ticket === true,
338
368
  render: (React.createElement(FlexibleBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, serviceItem: serviceItem, isSoldOut: isSoldOut })),
339
369
  },
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
370
  ];
346
- const amenitiesItem = items.find((i) => i.key === "amenities");
347
- const otherItems = items.filter((i) => i.key !== "amenities" && i.condition !== false);
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) ||
371
+ const otherItems = items.filter((i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition);
372
+ const isItemExpanded = serviceItem.id === isExpand || isExpand === true;
373
+ const grayscaleClass = isSoldOut ? "grayscale" : "";
374
+ const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text);
375
+ const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
376
+ const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
377
+ const serviceCardStyle = hasOfferText
378
+ ? {
379
+ borderColor: "transparent",
380
+ borderStyle: "solid",
381
+ borderWidth: "3px 3px 0 3px",
382
+ borderRadius: isItemExpanded || coachKey ? "18px 18px 0 0" : "18px",
383
+ background: `linear-gradient(#fff, #fff) padding-box, ${isSoldOut ? offerGradientWithOpacity : offerGradient} border-box`,
384
+ // zIndex: 1,
385
+ }
386
+ : {};
387
+ const seats = removeDuplicateSeats
388
+ ? ((_c = serviceItem.seat_types) === null || _c === void 0 ? void 0 : _c.filter((seat, index, self) => index === self.findIndex((s) => s.label === seat.label))) || []
389
+ : serviceItem.seat_types || [];
390
+ const discountedSeats = seats.map((seat) => (Object.assign(Object.assign({}, seat), CommonService.calculateDiscountedPrice(seat.fare, serviceItem))));
391
+ const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
392
+ return (React.createElement("div", { className: `relative hover:z-[150] ${hasOfferText ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
349
393
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
350
394
  showTopLabel
351
395
  ? "mt-[24px]"
352
396
  : "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),
397
+ React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${hasOfferText && !isSoldOut
398
+ ? "z-[3] rounded-[18px]"
399
+ : "rounded-[10px] border border-[#ccc]"}`, style: serviceCardStyle },
400
+ React.createElement("div", { className: " pt-[20px]", style: {
401
+ padding: hasOfferText
402
+ ? "20px 15px 10px 15px"
403
+ : coachKey
404
+ ? "20px 15px 20px 15px"
405
+ : "20px 15px 10px 15px",
406
+ marginTop: hasDiscount || hasOfferText ? "14px" : "",
407
+ } },
408
+ React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:14%_40%_0.5%_24%_13.5%] gap-x-[2%] items-center",
409
+ // style={{ marginTop: showTopLabel ? "8px" : "" }}
410
+ style: {
411
+ marginTop: showTopLabel || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "8px" : "",
412
+ } },
413
+ React.createElement("div", { style: {
414
+ display: "flex",
415
+ flexDirection: "column",
416
+ // gap: "5px",
417
+ } },
418
+ React.createElement("div", {
419
+ // className="flex items-center justify-center m-[auto]"
420
+ className: "" },
421
+ React.createElement("img", { src: serviceItem.operator_details[0], alt: "service logo", className: `h-[30px] w-[auto] ${isSoldOut ? "grayscale" : ""}` }),
422
+ isCiva ? (React.createElement("div", { className: "text-[13.33px] black-text ml-2" }, serviceItem.operator_details[2])) : null),
423
+ React.createElement(RatingBlock, { showRating: showRating, serviceItem: serviceItem, isSoldOut: isSoldOut, colors: colors, t: t, translation: translation, isPeru: isPeru })),
360
424
  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
425
  gridTemplateRows: "1fr",
362
426
  } },
363
- React.createElement("div", { className: "flex flex-col gap-[10px]" },
427
+ React.createElement("div", { className: "flex flex-col gap-[4px]" },
364
428
  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
- 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" : ""}` }))),
429
+ React.createElement("img", { src: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.origin, alt: "origin", className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}` }))),
366
430
  !isCiva &&
367
431
  (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
- 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]" },
432
+ React.createElement("img", { src: (_e = serviceItem.icons) === null || _e === void 0 ? void 0 : _e.destination, className: `w-[18px] h-auto mr-[8px] ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }))))),
433
+ React.createElement("div", { className: "flex flex-col gap-[4px]" },
370
434
  React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
371
435
  React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.travel_date))),
372
436
  !isCiva && (React.createElement(StageTooltip, { stageData: serviceItem.dropoff_stages, direction: 2, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
373
437
  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" },
438
+ React.createElement("div", { className: "flex flex-col gap-[4px] items-center" },
375
439
  React.createElement("div", { className: "h-[20px] flex items-center justify-center" },
376
440
  React.createElement("div", null, "\u2022")),
377
441
  !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]" },
442
+ React.createElement("div", { className: "flex flex-col gap-[4px]" },
379
443
  React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
380
444
  React.createElement("div", { className: "font-[900] bold-text" }, DateService.formatTime(serviceItem.dep_time))),
381
445
  !isCiva && (React.createElement(StageTooltip, { stageData: serviceItem.dropoff_stages, direction: 2, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
@@ -391,63 +455,53 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
391
455
  margin: "auto",
392
456
  } }),
393
457
  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
- gap: "5px",
406
- } },
407
- React.createElement("span", { style: {
408
- position: "absolute",
409
- top: getNumberOfSeats() > 1 ? -10 : -5,
410
- fontWeight: "initial",
411
- fontSize: "12px",
412
- left: 0,
413
- color: "#6a6a6a",
414
- } }, "Desde"),
415
- getSeatPrice()))),
416
- React.createElement("div", null,
417
- 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: {
418
- backgroundColor: serviceDetailsLoading || isSoldOut
419
- ? "lightgray"
420
- : colors.kuposButtonColor,
421
- cursor: serviceDetailsLoading || isSoldOut
422
- ? "not-allowed"
423
- : "pointer",
424
- } },
425
- React.createElement("span", { className: "min-w-[75px] flex justify-center items-center bold-text uppercase" },
426
- isSoldOut ? renderIcon("soldOutIcon", "14px") : null,
427
- 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))))),
428
- showLastSeats ? (React.createElement("div", { className: "flex justify-end mr-[11px]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
429
- (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,
430
- React.createElement("div", { className: "flex items-center mt-[15px] border-t border-[#eee] pt-[10px]" },
431
- React.createElement("div", { className: "grid items-center gap-[2%] flex-1", style: {
432
- gridTemplateColumns: "30% 18% 23% 23%",
433
- // otherItems
434
- // .map((i) => i.width)
435
- // .join(" "),
436
- } }, otherItems.map((item) => (React.createElement("div", { key: item.key, className: "flex items-center " }, item.render)))),
437
- React.createElement("div", { className: "flex items-center ml-[12px] shrink-0 w-[130px] justify-end" }, amenitiesItem === null || amenitiesItem === void 0 ? void 0 : amenitiesItem.render)))),
458
+ React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru, renderIcon: renderIcon, discountSeatPriceColor: colors.discountSeatPriceColor })),
459
+ React.createElement("div", { className: "relative" },
460
+ 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 }),
461
+ showLastSeats ? (React.createElement("div", { className: "flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
462
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[12px] mt-1 text-center", style: {
463
+ color: colors.seatPriceColor,
464
+ } }, "\u00A1\u00DAltimos Asientos!")))) : null)),
465
+ 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 }))),
438
466
  children,
439
- (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: {
440
- backgroundColor: isSoldOut
441
- ? colors === null || colors === void 0 ? void 0 : colors.bottomStripColor
442
- : colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
467
+ (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] rounded-b-[14px] text-[14px]", style: {
468
+ background: offerGradient,
443
469
  opacity: isSoldOut ? 0.5 : 1,
444
470
  } },
445
- React.createElement(LottiePlayer
446
- // animationData={serviceItem.icons.promoAnim}
447
- , {
448
- // animationData={serviceItem.icons.promoAnim}
449
- animationData: getAnimationIcon("promoAnim"), width: "18px", height: "18px" }),
450
- React.createElement("span", { className: "ml-[10px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))),
471
+ React.createElement("div", { className: "flex justify-between items-center w-full" },
472
+ React.createElement("div", { className: "flex items-center " },
473
+ React.createElement("div", { className: "flex items-center" },
474
+ React.createElement(LottiePlayer, { animationData: getAnimationIcon("bombAnimation"), width: "18px", height: "18px" }),
475
+ React.createElement("div", { className: "flex items-center mt-[2px]" },
476
+ React.createElement("span", { className: "bold-text ml-[6px]" },
477
+ ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").length > 30
478
+ ? ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").slice(0, 30) + "..."
479
+ : (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "",
480
+ " ",
481
+ isLoggedIn ? null : (React.createElement("span", { onClick: showLoginModal, className: "cursor-pointer" }, "- registro")),
482
+ " ",
483
+ "\u00A0"),
484
+ " ",
485
+ "| Termina en\u00A0",
486
+ React.createElement("span", { className: "bold-text text-end", ref: (node) => CommonService.startCountdown(node, 599), style: {
487
+ fontVariantNumeric: "tabular-nums",
488
+ display: "inline-block",
489
+ } })))),
490
+ React.createElement("div", { className: "flex items-center" },
491
+ React.createElement(LottiePlayer, { animationData: getAnimationIcon("dotAnimation"), width: "12px", height: "12px" }),
492
+ React.createElement("span", { className: "ml-[6px]" },
493
+ React.createElement("span", { className: "bold-text", ref: (node) => CommonService.startViewerCount(node, viewersConfig), style: { fontVariantNumeric: "tabular-nums" } }),
494
+ " ",
495
+ React.createElement("span", null,
496
+ " ",
497
+ (viewersConfig === null || viewersConfig === void 0 ? void 0 : viewersConfig.label) || " viendo",
498
+ " |",
499
+ " ",
500
+ React.createElement("span", { className: "" },
501
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? null : "Quedan pocos • ",
502
+ React.createElement("span", { className: "bold-text", ref: (node) => CommonService.startComprandoCount(node, 4, 16), style: { fontVariantNumeric: "tabular-nums" } }),
503
+ " ",
504
+ "comprando"))))))),
451
505
  React.createElement("div", { className: "absolute -top-[11px] left-0 w-full flex items-center justify-end gap-[12px] pr-[15px] z-10 " },
452
506
  showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
453
507
  backgroundColor: isSoldOut ? "#ddd" : colors.ratingBottomColor,
@@ -472,7 +526,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
472
526
  (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: {
473
527
  backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
474
528
  } },
475
- React.createElement(LottiePlayer, { animationData: serviceItem.icons.connectingServiceIcon, width: "14px", height: "14px" }),
529
+ renderIcon("connectingServiceIcon", "12px"),
476
530
  React.createElement("div", null, "Conexión"))),
477
531
  (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: {
478
532
  backgroundColor: isSoldOut ? "#ddd" : colors.tooltipColor,
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -243,7 +243,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
243
243
  },
244
244
  ];
245
245
  const otherItems = items.filter((i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition);
246
- 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", { className: `relative hover:z-[150] ${hasOfferText || hasDpEnabled ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
246
+ 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, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, isExpand: isExpand, setIsExpand: setIsExpand, coachKey: coachKey })) : (React.createElement("div", { className: `relative hover:z-[150] ${hasOfferText || hasDpEnabled ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
247
247
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
248
248
  showTopLabel
249
249
  ? "mt-[24px]"
package/dist/styles.css CHANGED
@@ -285,9 +285,6 @@
285
285
  .ml-\[10px\] {
286
286
  margin-left: 10px;
287
287
  }
288
- .ml-\[12px\] {
289
- margin-left: 12px;
290
- }
291
288
  .ml-\[50px\] {
292
289
  margin-left: 50px;
293
290
  }
@@ -405,12 +402,6 @@
405
402
  .w-\[115px\] {
406
403
  width: 115px;
407
404
  }
408
- .w-\[120px\] {
409
- width: 120px;
410
- }
411
- .w-\[130px\] {
412
- width: 130px;
413
- }
414
405
  .w-\[150px\] {
415
406
  width: 150px;
416
407
  }
@@ -800,9 +791,6 @@
800
791
  .pt-\[6px\] {
801
792
  padding-top: 6px;
802
793
  }
803
- .pt-\[10px\] {
804
- padding-top: 10px;
805
- }
806
794
  .pt-\[20px\] {
807
795
  padding-top: 20px;
808
796
  }
@@ -962,9 +950,6 @@
962
950
  .text-\[\#fff\] {
963
951
  color: #fff;
964
952
  }
965
- .text-\[red\] {
966
- color: red;
967
- }
968
953
  .capitalize {
969
954
  text-transform: capitalize;
970
955
  }
package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- declare const FeatureServiceUiMobile: ({ serviceItem, showTopLabel, colors, isSoldOut, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, }: {
2
+ declare const FeatureServiceUiMobile: ({ serviceItem, showTopLabel, colors, isSoldOut, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, }: {
3
3
  serviceItem: any;
4
4
  showTopLabel: any;
5
5
  colors: any;
@@ -14,5 +14,9 @@ declare const FeatureServiceUiMobile: ({ serviceItem, showTopLabel, colors, isSo
14
14
  onIncreaseTicketQuantity: any;
15
15
  onDecreaseTicketQuantity: any;
16
16
  onBookButtonPress: any;
17
+ selectedTimeSlot?: string;
18
+ onTimeSlotChange: any;
19
+ isTimeDropdownOpen: any;
20
+ onTimeDropdownToggle: any;
17
21
  }) => React.JSX.Element;
18
22
  export default FeatureServiceUiMobile;