kupos-ui-components-lib 9.6.7 → 9.6.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.
- package/dist/components/ServiceItem/ServiceItemDesktop.d.ts +1 -1
- package/dist/components/ServiceItem/ServiceItemDesktop.js +4 -9
- package/dist/components/ServiceItem/ServiceItemMobile.js +1 -1
- package/dist/components/ServiceItem/types.d.ts +0 -7
- package/dist/styles.css +0 -114
- package/dist/ui/ExpendedDropDown/ExpandedDropdown.js +6 -2
- package/dist/ui/FeatureServiceUI/FeatureServiceUi.js +6 -1
- package/dist/ui/mobileweb/ExpandedDropdownMobile.d.ts +3 -1
- package/dist/ui/mobileweb/ExpandedDropdownMobile.js +9 -3
- package/package.json +1 -1
- package/src/components/ServiceItem/ServiceItemDesktop.tsx +2 -21
- package/src/components/ServiceItem/ServiceItemMobile.tsx +2 -0
- package/src/components/ServiceItem/types.ts +0 -8
- package/src/ui/ExpendedDropDown/ExpandedDropdown.tsx +17 -3
- package/src/ui/mobileweb/ExpandedDropdownMobile.tsx +24 -2
- package/src/assets/images/anims/service_list/thunder_icon.json +0 -1
- package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx +0 -547
|
@@ -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, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig,
|
|
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, isExpand, setIsExpand, coachKey, viewersConfig, showLoginModal, isLoggedIn, showLoginOption, }: ServiceItemProps & {
|
|
4
4
|
currencySign?: string;
|
|
5
5
|
}): React.ReactElement;
|
|
6
6
|
export default ServiceItemPB;
|
|
@@ -32,8 +32,6 @@ import KuposButton from "../../ui/KuposButton/KuposButton";
|
|
|
32
32
|
import BottomAmenities from "../../ui/BottomAmenities/BottomAmenities";
|
|
33
33
|
import SeatSection from "../../ui/SeatSection/SeatSection";
|
|
34
34
|
import DateTimeSection from "../../ui/DateTimeSection/DateTimeSection";
|
|
35
|
-
import FeatureServiceUi from "../../ui/FeatureServiceUI/FeatureServiceUi";
|
|
36
|
-
import thunderAnimation from "../../assets/images/anims/service_list/thunder_icon.json";
|
|
37
35
|
import ServiceBadges from "../../ui/ServiceBadges/ServiceBadges";
|
|
38
36
|
const SEAT_EXCEPTIONS = ["Asiento mascota"];
|
|
39
37
|
const ANIMATION_MAP = {
|
|
@@ -66,9 +64,6 @@ const ANIMATION_MAP = {
|
|
|
66
64
|
bombAnimation: {
|
|
67
65
|
kupos: bombAnimation,
|
|
68
66
|
},
|
|
69
|
-
thunderAnimation: {
|
|
70
|
-
kupos: thunderAnimation,
|
|
71
|
-
},
|
|
72
67
|
dotAnimation: {
|
|
73
68
|
kupos: dotAnimation,
|
|
74
69
|
},
|
|
@@ -79,7 +74,7 @@ const ANIMATION_MAP = {
|
|
|
79
74
|
kupos: femaleAnimation,
|
|
80
75
|
},
|
|
81
76
|
};
|
|
82
|
-
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 = (key) => key, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig,
|
|
77
|
+
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 = (key) => key, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, showLoginModal, isLoggedIn, showLoginOption, }) {
|
|
83
78
|
var _a;
|
|
84
79
|
const getAnimationIcon = (icon) => {
|
|
85
80
|
var _a;
|
|
@@ -248,7 +243,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
248
243
|
},
|
|
249
244
|
];
|
|
250
245
|
const otherItems = items.filter((i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition);
|
|
251
|
-
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 })) :
|
|
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) ||
|
|
252
247
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
|
|
253
248
|
showTopLabel
|
|
254
249
|
? "mt-[24px]"
|
|
@@ -298,8 +293,8 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
298
293
|
} },
|
|
299
294
|
React.createElement("div", { style: Object.assign({ overflow: "hidden", minHeight: 0, marginTop: hasDpEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "" : "-10px" }, (hasOfferText || hasDpEnabled
|
|
300
295
|
? {
|
|
301
|
-
borderLeft:
|
|
302
|
-
borderRight:
|
|
296
|
+
borderLeft: isSoldOut ? "" : "3px solid #ff5964",
|
|
297
|
+
borderRight: isSoldOut ? "" : "3px solid #ff8842",
|
|
303
298
|
borderRadius: "0 0 18px 18px",
|
|
304
299
|
boxSizing: "border-box",
|
|
305
300
|
}
|
|
@@ -180,6 +180,6 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
180
180
|
zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? -3 : undefined,
|
|
181
181
|
marginTop: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "-15px" : "-10px",
|
|
182
182
|
} },
|
|
183
|
-
React.createElement(ExpandedDropdownMobile, { serviceItem: serviceItem, isPeru: isPeru, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, isSoldOut: isSoldOut, isChangeTicket: serviceItem.is_change_ticket === true, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled })))));
|
|
183
|
+
React.createElement(ExpandedDropdownMobile, { serviceItem: serviceItem, isPeru: isPeru, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, isSoldOut: isSoldOut, isChangeTicket: serviceItem.is_change_ticket === true, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, femaleAnim: serviceItem.icons.femaleAnim, flexibleAnim: serviceItem.icons.flexibleAnim })))));
|
|
184
184
|
}
|
|
185
185
|
export default ServiceItemMobile;
|
|
@@ -129,12 +129,6 @@ export interface ServiceItemProps {
|
|
|
129
129
|
personIcon?: string;
|
|
130
130
|
whiteFireIcon?: string;
|
|
131
131
|
fireIcon?: string;
|
|
132
|
-
whiteOrigin?: string;
|
|
133
|
-
whiteDestination?: string;
|
|
134
|
-
userIcon?: string;
|
|
135
|
-
sheildIcon?: string;
|
|
136
|
-
busIcon?: string;
|
|
137
|
-
whiteDownArrow?: string;
|
|
138
132
|
[key: string]: string | Record<string, string | undefined> | undefined;
|
|
139
133
|
};
|
|
140
134
|
useLottieFor?: string[];
|
|
@@ -227,7 +221,6 @@ export interface ServiceItemProps {
|
|
|
227
221
|
label?: string;
|
|
228
222
|
icon?: string;
|
|
229
223
|
};
|
|
230
|
-
isNewUi?: boolean;
|
|
231
224
|
showLoginModal?: any;
|
|
232
225
|
isLoggedIn?: any;
|
|
233
226
|
showLoginOption?: boolean;
|
package/dist/styles.css
CHANGED
|
@@ -63,9 +63,6 @@
|
|
|
63
63
|
.right-\[0px\] {
|
|
64
64
|
right: 0px;
|
|
65
65
|
}
|
|
66
|
-
.right-\[18px\] {
|
|
67
|
-
right: 18px;
|
|
68
|
-
}
|
|
69
66
|
.-bottom-\[9\%\] {
|
|
70
67
|
bottom: calc(9% * -1);
|
|
71
68
|
}
|
|
@@ -78,9 +75,6 @@
|
|
|
78
75
|
.-bottom-\[36px\] {
|
|
79
76
|
bottom: calc(36px * -1);
|
|
80
77
|
}
|
|
81
|
-
.bottom-\[11px\] {
|
|
82
|
-
bottom: 11px;
|
|
83
|
-
}
|
|
84
78
|
.bottom-\[35px\] {
|
|
85
79
|
bottom: 35px;
|
|
86
80
|
}
|
|
@@ -195,21 +189,12 @@
|
|
|
195
189
|
.mt-\[5px\] {
|
|
196
190
|
margin-top: 5px;
|
|
197
191
|
}
|
|
198
|
-
.mt-\[6px\] {
|
|
199
|
-
margin-top: 6px;
|
|
200
|
-
}
|
|
201
|
-
.mt-\[8px\] {
|
|
202
|
-
margin-top: 8px;
|
|
203
|
-
}
|
|
204
192
|
.mt-\[10px\] {
|
|
205
193
|
margin-top: 10px;
|
|
206
194
|
}
|
|
207
195
|
.mt-\[13px\] {
|
|
208
196
|
margin-top: 13px;
|
|
209
197
|
}
|
|
210
|
-
.mt-\[14px\] {
|
|
211
|
-
margin-top: 14px;
|
|
212
|
-
}
|
|
213
198
|
.mt-\[15px\] {
|
|
214
199
|
margin-top: 15px;
|
|
215
200
|
}
|
|
@@ -249,9 +234,6 @@
|
|
|
249
234
|
.mb-\[5px\] {
|
|
250
235
|
margin-bottom: 5px;
|
|
251
236
|
}
|
|
252
|
-
.mb-\[6px\] {
|
|
253
|
-
margin-bottom: 6px;
|
|
254
|
-
}
|
|
255
237
|
.mb-\[8px\] {
|
|
256
238
|
margin-bottom: 8px;
|
|
257
239
|
}
|
|
@@ -393,9 +375,6 @@
|
|
|
393
375
|
.w-\[20px\] {
|
|
394
376
|
width: 20px;
|
|
395
377
|
}
|
|
396
|
-
.w-\[30px\] {
|
|
397
|
-
width: 30px;
|
|
398
|
-
}
|
|
399
378
|
.w-\[50\%\] {
|
|
400
379
|
width: 50%;
|
|
401
380
|
}
|
|
@@ -464,12 +443,6 @@
|
|
|
464
443
|
.max-w-\[165px\] {
|
|
465
444
|
max-width: 165px;
|
|
466
445
|
}
|
|
467
|
-
.max-w-\[220px\] {
|
|
468
|
-
max-width: 220px;
|
|
469
|
-
}
|
|
470
|
-
.max-w-full {
|
|
471
|
-
max-width: 100%;
|
|
472
|
-
}
|
|
473
446
|
.min-w-\[75px\] {
|
|
474
447
|
min-width: 75px;
|
|
475
448
|
}
|
|
@@ -512,15 +485,9 @@
|
|
|
512
485
|
.grid-cols-2 {
|
|
513
486
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
514
487
|
}
|
|
515
|
-
.grid-cols-4 {
|
|
516
|
-
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
517
|
-
}
|
|
518
488
|
.grid-cols-\[0\.8fr_auto_26\%_1fr\] {
|
|
519
489
|
grid-template-columns: 0.8fr auto 26% 1fr;
|
|
520
490
|
}
|
|
521
|
-
.grid-cols-\[1\.3fr_2fr_1\.2fr\] {
|
|
522
|
-
grid-template-columns: 1.3fr 2fr 1.2fr;
|
|
523
|
-
}
|
|
524
491
|
.grid-cols-\[1\.5fr_1fr_auto\] {
|
|
525
492
|
grid-template-columns: 1.5fr 1fr auto;
|
|
526
493
|
}
|
|
@@ -551,9 +518,6 @@
|
|
|
551
518
|
.items-start {
|
|
552
519
|
align-items: flex-start;
|
|
553
520
|
}
|
|
554
|
-
.items-stretch {
|
|
555
|
-
align-items: stretch;
|
|
556
|
-
}
|
|
557
521
|
.justify-between {
|
|
558
522
|
justify-content: space-between;
|
|
559
523
|
}
|
|
@@ -596,12 +560,6 @@
|
|
|
596
560
|
.gap-\[14px\] {
|
|
597
561
|
gap: 14px;
|
|
598
562
|
}
|
|
599
|
-
.gap-\[16px\] {
|
|
600
|
-
gap: 16px;
|
|
601
|
-
}
|
|
602
|
-
.gap-\[20px\] {
|
|
603
|
-
gap: 20px;
|
|
604
|
-
}
|
|
605
563
|
.gap-x-\[2\%\] {
|
|
606
564
|
-moz-column-gap: 2%;
|
|
607
565
|
column-gap: 2%;
|
|
@@ -610,29 +568,18 @@
|
|
|
610
568
|
-moz-column-gap: 8px;
|
|
611
569
|
column-gap: 8px;
|
|
612
570
|
}
|
|
613
|
-
.truncate {
|
|
614
|
-
overflow: hidden;
|
|
615
|
-
text-overflow: ellipsis;
|
|
616
|
-
white-space: nowrap;
|
|
617
|
-
}
|
|
618
571
|
.overflow-hidden {
|
|
619
572
|
overflow: hidden;
|
|
620
573
|
}
|
|
621
574
|
.overflow-y-hidden {
|
|
622
575
|
overflow-y: hidden;
|
|
623
576
|
}
|
|
624
|
-
.rounded-\[4px\] {
|
|
625
|
-
border-radius: 4px;
|
|
626
|
-
}
|
|
627
577
|
.rounded-\[8px\] {
|
|
628
578
|
border-radius: 8px;
|
|
629
579
|
}
|
|
630
580
|
.rounded-\[10px\] {
|
|
631
581
|
border-radius: 10px;
|
|
632
582
|
}
|
|
633
|
-
.rounded-\[12px\] {
|
|
634
|
-
border-radius: 12px;
|
|
635
|
-
}
|
|
636
583
|
.rounded-\[14px\] {
|
|
637
584
|
border-radius: 14px;
|
|
638
585
|
}
|
|
@@ -682,10 +629,6 @@
|
|
|
682
629
|
border-top-style: var(--tw-border-style);
|
|
683
630
|
border-top-width: 8px;
|
|
684
631
|
}
|
|
685
|
-
.border-r {
|
|
686
|
-
border-right-style: var(--tw-border-style);
|
|
687
|
-
border-right-width: 1px;
|
|
688
|
-
}
|
|
689
632
|
.border-r-8 {
|
|
690
633
|
border-right-style: var(--tw-border-style);
|
|
691
634
|
border-right-width: 8px;
|
|
@@ -714,10 +657,6 @@
|
|
|
714
657
|
border-bottom-style: var(--tw-border-style);
|
|
715
658
|
border-bottom-width: 8px;
|
|
716
659
|
}
|
|
717
|
-
.border-l {
|
|
718
|
-
border-left-style: var(--tw-border-style);
|
|
719
|
-
border-left-width: 1px;
|
|
720
|
-
}
|
|
721
660
|
.border-l-8 {
|
|
722
661
|
border-left-style: var(--tw-border-style);
|
|
723
662
|
border-left-width: 8px;
|
|
@@ -734,9 +673,6 @@
|
|
|
734
673
|
--tw-border-style: none;
|
|
735
674
|
border-style: none;
|
|
736
675
|
}
|
|
737
|
-
.border-\[\#363c48\] {
|
|
738
|
-
border-color: #363c48;
|
|
739
|
-
}
|
|
740
676
|
.border-\[\#ccc\] {
|
|
741
677
|
border-color: #ccc;
|
|
742
678
|
}
|
|
@@ -755,15 +691,9 @@
|
|
|
755
691
|
.border-l-transparent {
|
|
756
692
|
border-left-color: transparent;
|
|
757
693
|
}
|
|
758
|
-
.bg-\[\#0C1421\] {
|
|
759
|
-
background-color: #0C1421;
|
|
760
|
-
}
|
|
761
694
|
.bg-\[\#E6E6E6\] {
|
|
762
695
|
background-color: #E6E6E6;
|
|
763
696
|
}
|
|
764
|
-
.bg-\[\#FF8F45\] {
|
|
765
|
-
background-color: #FF8F45;
|
|
766
|
-
}
|
|
767
697
|
.bg-\[\#FFF2F2\] {
|
|
768
698
|
background-color: #FFF2F2;
|
|
769
699
|
}
|
|
@@ -804,9 +734,6 @@
|
|
|
804
734
|
.p-\[10px_15px\] {
|
|
805
735
|
padding: 10px 15px;
|
|
806
736
|
}
|
|
807
|
-
.p-\[14px\] {
|
|
808
|
-
padding: 14px;
|
|
809
|
-
}
|
|
810
737
|
.p-\[15px\] {
|
|
811
738
|
padding: 15px;
|
|
812
739
|
}
|
|
@@ -840,15 +767,9 @@
|
|
|
840
767
|
.px-\[15px\] {
|
|
841
768
|
padding-inline: 15px;
|
|
842
769
|
}
|
|
843
|
-
.px-\[16px\] {
|
|
844
|
-
padding-inline: 16px;
|
|
845
|
-
}
|
|
846
770
|
.px-\[20px\] {
|
|
847
771
|
padding-inline: 20px;
|
|
848
772
|
}
|
|
849
|
-
.py-\[2px\] {
|
|
850
|
-
padding-block: 2px;
|
|
851
|
-
}
|
|
852
773
|
.py-\[4px\] {
|
|
853
774
|
padding-block: 4px;
|
|
854
775
|
}
|
|
@@ -876,9 +797,6 @@
|
|
|
876
797
|
.pt-\[10px\] {
|
|
877
798
|
padding-top: 10px;
|
|
878
799
|
}
|
|
879
|
-
.pt-\[14px\] {
|
|
880
|
-
padding-top: 14px;
|
|
881
|
-
}
|
|
882
800
|
.pt-\[20px\] {
|
|
883
801
|
padding-top: 20px;
|
|
884
802
|
}
|
|
@@ -903,9 +821,6 @@
|
|
|
903
821
|
.pr-\[22px\] {
|
|
904
822
|
padding-right: 22px;
|
|
905
823
|
}
|
|
906
|
-
.pb-\[6px\] {
|
|
907
|
-
padding-bottom: 6px;
|
|
908
|
-
}
|
|
909
824
|
.pb-\[7px\] {
|
|
910
825
|
padding-bottom: 7px;
|
|
911
826
|
}
|
|
@@ -972,12 +887,6 @@
|
|
|
972
887
|
.text-\[22px\] {
|
|
973
888
|
font-size: 22px;
|
|
974
889
|
}
|
|
975
|
-
.text-\[26px\] {
|
|
976
|
-
font-size: 26px;
|
|
977
|
-
}
|
|
978
|
-
.text-\[28px\] {
|
|
979
|
-
font-size: 28px;
|
|
980
|
-
}
|
|
981
890
|
.text-\[42px\] {
|
|
982
891
|
font-size: 42px;
|
|
983
892
|
}
|
|
@@ -985,10 +894,6 @@
|
|
|
985
894
|
--tw-leading: 1.3;
|
|
986
895
|
line-height: 1.3;
|
|
987
896
|
}
|
|
988
|
-
.leading-\[14px\] {
|
|
989
|
-
--tw-leading: 14px;
|
|
990
|
-
line-height: 14px;
|
|
991
|
-
}
|
|
992
897
|
.leading-\[20px\] {
|
|
993
898
|
--tw-leading: 20px;
|
|
994
899
|
line-height: 20px;
|
|
@@ -1009,10 +914,6 @@
|
|
|
1009
914
|
--tw-leading: 1;
|
|
1010
915
|
line-height: 1;
|
|
1011
916
|
}
|
|
1012
|
-
.font-\[9px\] {
|
|
1013
|
-
--tw-font-weight: 9px;
|
|
1014
|
-
font-weight: 9px;
|
|
1015
|
-
}
|
|
1016
917
|
.font-\[14px\] {
|
|
1017
918
|
--tw-font-weight: 14px;
|
|
1018
919
|
font-weight: 14px;
|
|
@@ -1034,27 +935,12 @@
|
|
|
1034
935
|
.whitespace-nowrap {
|
|
1035
936
|
white-space: nowrap;
|
|
1036
937
|
}
|
|
1037
|
-
.text-\[\#4a4a4a\] {
|
|
1038
|
-
color: #4a4a4a;
|
|
1039
|
-
}
|
|
1040
938
|
.text-\[\#9f9f9f\] {
|
|
1041
939
|
color: #9f9f9f;
|
|
1042
940
|
}
|
|
1043
|
-
.text-\[\#666\] {
|
|
1044
|
-
color: #666;
|
|
1045
|
-
}
|
|
1046
|
-
.text-\[\#171717\] {
|
|
1047
|
-
color: #171717;
|
|
1048
|
-
}
|
|
1049
|
-
.text-\[\#272727\] {
|
|
1050
|
-
color: #272727;
|
|
1051
|
-
}
|
|
1052
941
|
.text-\[\#464647\] {
|
|
1053
942
|
color: #464647;
|
|
1054
943
|
}
|
|
1055
|
-
.text-\[\#FF8F45\] {
|
|
1056
|
-
color: #FF8F45;
|
|
1057
|
-
}
|
|
1058
944
|
.text-\[\#c0c0c0\] {
|
|
1059
945
|
color: #c0c0c0;
|
|
1060
946
|
}
|
|
@@ -9,7 +9,9 @@ function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAn
|
|
|
9
9
|
} },
|
|
10
10
|
React.createElement("div", { className: "flex flex-col gap-[6px] text-[13px] text-[#464647]", style: { lineHeight: 1.5, opacity: isSoldOut ? 0.5 : 1 } },
|
|
11
11
|
isPeru ? null : isChangeTicket ? (React.createElement("div", { className: "flex gap-[8px]", style: { lineHeight: 1.5 } },
|
|
12
|
-
React.createElement("span", { style: { marginTop: "2px" } },
|
|
12
|
+
React.createElement("span", { style: { marginTop: "2px" } },
|
|
13
|
+
" ",
|
|
14
|
+
React.createElement(LottiePlayer, { animationData: getAnimationIcon("flexibleIcon"), width: "20px", height: "20px" })),
|
|
13
15
|
React.createElement("span", null,
|
|
14
16
|
React.createElement("span", { className: "bold-text" }, "Pasaje flexible:"),
|
|
15
17
|
" Tu pasaje puede ser cambiado de manera online",
|
|
@@ -32,7 +34,9 @@ function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAn
|
|
|
32
34
|
ladiesBookedSeats &&
|
|
33
35
|
String(ladiesBookedSeats).trim() !== "" &&
|
|
34
36
|
isDpEnabled === true && (React.createElement("div", { className: "flex gap-[6px]" },
|
|
35
|
-
React.createElement("span", { style: { marginTop: "2px" } },
|
|
37
|
+
React.createElement("span", { style: { marginTop: "2px" } },
|
|
38
|
+
" ",
|
|
39
|
+
React.createElement(LottiePlayer, { animationData: getAnimationIcon("femaaleAnimation"), width: "20px", height: "20px" })),
|
|
36
40
|
React.createElement("span", null,
|
|
37
41
|
React.createElement("span", { className: "bold-text" }, "Asientos para damas:"),
|
|
38
42
|
" Esta empresa cuenta con asientos recomendados para mujeres."))),
|
|
@@ -82,7 +82,12 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, colors, isSoldOut, getAni
|
|
|
82
82
|
const operators = ((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operators) === null || _a === void 0 ? void 0 : _a.length) > 0
|
|
83
83
|
? serviceItem.operators
|
|
84
84
|
: HARDCODED_OPERATORS;
|
|
85
|
-
return (React.createElement("div", {
|
|
85
|
+
return (React.createElement("div", {
|
|
86
|
+
// ${
|
|
87
|
+
// serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"
|
|
88
|
+
// }
|
|
89
|
+
className: `relative mb-[10px]
|
|
90
|
+
${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
|
|
86
91
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
|
|
87
92
|
showTopLabel
|
|
88
93
|
? "mt-[24px]"
|
|
@@ -13,6 +13,8 @@ interface ExpandedDropdownMobileProps {
|
|
|
13
13
|
isChangeTicket?: boolean;
|
|
14
14
|
ladiesBookedSeats?: string;
|
|
15
15
|
isDpEnabled?: boolean;
|
|
16
|
+
femaleAnim?: any;
|
|
17
|
+
flexibleAnim?: any;
|
|
16
18
|
}
|
|
17
|
-
declare function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyAnim, isSoldOut, isChangeTicket, ladiesBookedSeats, isDpEnabled, }: ExpandedDropdownMobileProps): React.ReactElement;
|
|
19
|
+
declare function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyAnim, isSoldOut, isChangeTicket, ladiesBookedSeats, isDpEnabled, femaleAnim, flexibleAnim, }: ExpandedDropdownMobileProps): React.ReactElement;
|
|
18
20
|
export default ExpandedDropdownMobile;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import LottiePlayer from "../../assets/LottiePlayer";
|
|
3
|
-
function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyAnim, isSoldOut, isChangeTicket = false, ladiesBookedSeats, isDpEnabled, }) {
|
|
3
|
+
function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyAnim, isSoldOut, isChangeTicket = false, ladiesBookedSeats, isDpEnabled, femaleAnim, flexibleAnim, }) {
|
|
4
4
|
return (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[12px] relative -z-9", style: {
|
|
5
5
|
backgroundColor: "#ffefef",
|
|
6
6
|
borderRadius: "0 0 14px 14px",
|
|
@@ -19,7 +19,10 @@ function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyA
|
|
|
19
19
|
" horas antes"),
|
|
20
20
|
" ",
|
|
21
21
|
"de la salida del bus. El monto ser\u00E1 reembolsado a tu billetera kupospay."))) : (React.createElement("div", { className: "flex gap-[8px] " },
|
|
22
|
-
React.createElement("span", { style: { marginTop: "2px" } },
|
|
22
|
+
React.createElement("span", { style: { marginTop: "2px" } },
|
|
23
|
+
" ",
|
|
24
|
+
React.createElement("div", null,
|
|
25
|
+
React.createElement(LottiePlayer, { animationData: flexibleAnim, width: "16px", height: "16px" }))),
|
|
23
26
|
React.createElement("span", null,
|
|
24
27
|
React.createElement("span", null,
|
|
25
28
|
React.createElement("span", { className: "bold-text" }, "Pasaje flexible:"),
|
|
@@ -27,7 +30,10 @@ function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyA
|
|
|
27
30
|
ladiesBookedSeats &&
|
|
28
31
|
String(ladiesBookedSeats).trim() !== "" &&
|
|
29
32
|
isDpEnabled === true && (React.createElement("div", { className: "flex gap-[6px]" },
|
|
30
|
-
React.createElement("span", { style: { marginTop: "2px" } },
|
|
33
|
+
React.createElement("span", { style: { marginTop: "2px" } },
|
|
34
|
+
" ",
|
|
35
|
+
React.createElement("div", null,
|
|
36
|
+
React.createElement(LottiePlayer, { animationData: femaleAnim, width: "16px", height: "16px" }))),
|
|
31
37
|
React.createElement("span", null,
|
|
32
38
|
React.createElement("span", { className: "bold-text" }, "Asientos para damas:"),
|
|
33
39
|
" Esta empresa cuenta con asientos recomendados para mujeres."))),
|
package/package.json
CHANGED
|
@@ -37,9 +37,6 @@ import KuposButton from "../../ui/KuposButton/KuposButton";
|
|
|
37
37
|
import BottomAmenities from "../../ui/BottomAmenities/BottomAmenities";
|
|
38
38
|
import SeatSection from "../../ui/SeatSection/SeatSection";
|
|
39
39
|
import DateTimeSection from "../../ui/DateTimeSection/DateTimeSection";
|
|
40
|
-
import FeatureServiceUi from "../../ui/FeatureServiceUI/FeatureServiceUi";
|
|
41
|
-
|
|
42
|
-
import thunderAnimation from "../../assets/images/anims/service_list/thunder_icon.json";
|
|
43
40
|
import ServiceBadges from "../../ui/ServiceBadges/ServiceBadges";
|
|
44
41
|
|
|
45
42
|
const SEAT_EXCEPTIONS = ["Asiento mascota"];
|
|
@@ -74,9 +71,6 @@ const ANIMATION_MAP: Record<string, Record<string, any>> = {
|
|
|
74
71
|
bombAnimation: {
|
|
75
72
|
kupos: bombAnimation,
|
|
76
73
|
},
|
|
77
|
-
thunderAnimation: {
|
|
78
|
-
kupos: thunderAnimation,
|
|
79
|
-
},
|
|
80
74
|
dotAnimation: {
|
|
81
75
|
kupos: dotAnimation,
|
|
82
76
|
},
|
|
@@ -119,7 +113,6 @@ function ServiceItemPB({
|
|
|
119
113
|
setIsExpand,
|
|
120
114
|
coachKey,
|
|
121
115
|
viewersConfig,
|
|
122
|
-
isNewUi,
|
|
123
116
|
showLoginModal,
|
|
124
117
|
isLoggedIn,
|
|
125
118
|
showLoginOption,
|
|
@@ -422,18 +415,6 @@ function ServiceItemPB({
|
|
|
422
415
|
siteType={siteType}
|
|
423
416
|
isAllinBus={isAllinBus}
|
|
424
417
|
/>
|
|
425
|
-
) : isNewUi ? (
|
|
426
|
-
<FeatureServiceUi
|
|
427
|
-
serviceItem={serviceItem}
|
|
428
|
-
showTopLabel={showTopLabel}
|
|
429
|
-
colors={colors}
|
|
430
|
-
isSoldOut={isSoldOut}
|
|
431
|
-
getAnimationIcon={getAnimationIcon}
|
|
432
|
-
cityOrigin={cityOrigin}
|
|
433
|
-
cityDestination={cityDestination}
|
|
434
|
-
renderIcon={renderIcon}
|
|
435
|
-
viewersConfig={viewersConfig}
|
|
436
|
-
/>
|
|
437
418
|
) : (
|
|
438
419
|
<div
|
|
439
420
|
className={`relative hover:z-[150] ${hasOfferText || hasDpEnabled ? "mb-[55px]" : "mb-[10px]"} ${
|
|
@@ -615,8 +596,8 @@ function ServiceItemPB({
|
|
|
615
596
|
hasDpEnabled || serviceItem?.offer_text ? "" : "-10px",
|
|
616
597
|
...(hasOfferText || hasDpEnabled
|
|
617
598
|
? {
|
|
618
|
-
borderLeft:
|
|
619
|
-
borderRight:
|
|
599
|
+
borderLeft: isSoldOut ? "" : "3px solid #ff5964",
|
|
600
|
+
borderRight: isSoldOut ? "" : "3px solid #ff8842",
|
|
620
601
|
borderRadius: "0 0 18px 18px",
|
|
621
602
|
boxSizing: "border-box",
|
|
622
603
|
}
|
|
@@ -456,6 +456,8 @@ function ServiceItemMobile({
|
|
|
456
456
|
isChangeTicket={serviceItem.is_change_ticket === true}
|
|
457
457
|
ladiesBookedSeats={serviceItem.ladies_booked_seats}
|
|
458
458
|
isDpEnabled={serviceItem.is_dp_enabled}
|
|
459
|
+
femaleAnim={serviceItem.icons.femaleAnim}
|
|
460
|
+
flexibleAnim={serviceItem.icons.flexibleAnim}
|
|
459
461
|
/>
|
|
460
462
|
</div>
|
|
461
463
|
</div>
|
|
@@ -132,13 +132,6 @@ export interface ServiceItemProps {
|
|
|
132
132
|
whiteFireIcon?: string
|
|
133
133
|
fireIcon?: string
|
|
134
134
|
|
|
135
|
-
whiteOrigin?: string,
|
|
136
|
-
whiteDestination?: string,
|
|
137
|
-
userIcon?: string,
|
|
138
|
-
sheildIcon?: string,
|
|
139
|
-
busIcon?: string,
|
|
140
|
-
whiteDownArrow?: string,
|
|
141
|
-
|
|
142
135
|
[key: string]: string | Record<string, string | undefined> | undefined;
|
|
143
136
|
};
|
|
144
137
|
useLottieFor?: string[];
|
|
@@ -230,7 +223,6 @@ export interface ServiceItemProps {
|
|
|
230
223
|
label?: string; // e.g. "personas están viendo este viaje"
|
|
231
224
|
icon?: string; // optional icon URL
|
|
232
225
|
};
|
|
233
|
-
isNewUi?: boolean
|
|
234
226
|
showLoginModal?: any
|
|
235
227
|
isLoggedIn?: any
|
|
236
228
|
showLoginOption?: boolean
|
|
@@ -45,7 +45,14 @@ function ExpandedDropdown({
|
|
|
45
45
|
>
|
|
46
46
|
{isPeru ? null : isChangeTicket ? (
|
|
47
47
|
<div className="flex gap-[8px]" style={{ lineHeight: 1.5 }}>
|
|
48
|
-
<span style={{ marginTop: "2px" }}
|
|
48
|
+
<span style={{ marginTop: "2px" }}>
|
|
49
|
+
{" "}
|
|
50
|
+
<LottiePlayer
|
|
51
|
+
animationData={getAnimationIcon("flexibleIcon")}
|
|
52
|
+
width="20px"
|
|
53
|
+
height="20px"
|
|
54
|
+
/>
|
|
55
|
+
</span>
|
|
49
56
|
<span>
|
|
50
57
|
<span className="bold-text">Pasaje flexible:</span> Tu pasaje
|
|
51
58
|
puede ser cambiado de manera online{" "}
|
|
@@ -80,11 +87,18 @@ function ExpandedDropdown({
|
|
|
80
87
|
</div>
|
|
81
88
|
)}
|
|
82
89
|
|
|
83
|
-
|
|
90
|
+
{ladiesBookedSeats &&
|
|
84
91
|
String(ladiesBookedSeats).trim() !== "" &&
|
|
85
92
|
isDpEnabled === true && (
|
|
86
93
|
<div className="flex gap-[6px]">
|
|
87
|
-
<span style={{ marginTop: "2px" }}
|
|
94
|
+
<span style={{ marginTop: "2px" }}>
|
|
95
|
+
{" "}
|
|
96
|
+
<LottiePlayer
|
|
97
|
+
animationData={getAnimationIcon("femaaleAnimation")}
|
|
98
|
+
width="20px"
|
|
99
|
+
height="20px"
|
|
100
|
+
/>
|
|
101
|
+
</span>
|
|
88
102
|
<span>
|
|
89
103
|
<span className="bold-text">Asientos para damas:</span> Esta
|
|
90
104
|
empresa cuenta con asientos recomendados para mujeres.
|
|
@@ -15,6 +15,8 @@ interface ExpandedDropdownMobileProps {
|
|
|
15
15
|
isChangeTicket?: boolean;
|
|
16
16
|
ladiesBookedSeats?: string;
|
|
17
17
|
isDpEnabled?: boolean;
|
|
18
|
+
femaleAnim?: any;
|
|
19
|
+
flexibleAnim?: any;
|
|
18
20
|
}
|
|
19
21
|
|
|
20
22
|
function ExpandedDropdownMobile({
|
|
@@ -26,6 +28,8 @@ function ExpandedDropdownMobile({
|
|
|
26
28
|
isChangeTicket = false,
|
|
27
29
|
ladiesBookedSeats,
|
|
28
30
|
isDpEnabled,
|
|
31
|
+
femaleAnim,
|
|
32
|
+
flexibleAnim,
|
|
29
33
|
}: ExpandedDropdownMobileProps): React.ReactElement {
|
|
30
34
|
return (
|
|
31
35
|
<div
|
|
@@ -55,7 +59,16 @@ function ExpandedDropdownMobile({
|
|
|
55
59
|
</div>
|
|
56
60
|
) : (
|
|
57
61
|
<div className="flex gap-[8px] ">
|
|
58
|
-
<span style={{ marginTop: "2px" }}
|
|
62
|
+
<span style={{ marginTop: "2px" }}>
|
|
63
|
+
{" "}
|
|
64
|
+
<div>
|
|
65
|
+
<LottiePlayer
|
|
66
|
+
animationData={flexibleAnim}
|
|
67
|
+
width="16px"
|
|
68
|
+
height="16px"
|
|
69
|
+
/>
|
|
70
|
+
</div>
|
|
71
|
+
</span>
|
|
59
72
|
<span>
|
|
60
73
|
<span>
|
|
61
74
|
<span className="bold-text">Pasaje flexible:</span> Esta empresa
|
|
@@ -68,7 +81,16 @@ function ExpandedDropdownMobile({
|
|
|
68
81
|
String(ladiesBookedSeats).trim() !== "" &&
|
|
69
82
|
isDpEnabled === true && (
|
|
70
83
|
<div className="flex gap-[6px]">
|
|
71
|
-
<span style={{ marginTop: "2px" }}
|
|
84
|
+
<span style={{ marginTop: "2px" }}>
|
|
85
|
+
{" "}
|
|
86
|
+
<div>
|
|
87
|
+
<LottiePlayer
|
|
88
|
+
animationData={femaleAnim}
|
|
89
|
+
width="16px"
|
|
90
|
+
height="16px"
|
|
91
|
+
/>
|
|
92
|
+
</div>
|
|
93
|
+
</span>
|
|
72
94
|
<span>
|
|
73
95
|
<span className="bold-text">Asientos para damas:</span> Esta
|
|
74
96
|
empresa cuenta con asientos recomendados para mujeres.
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"nm":"t","ddd":0,"h":500,"w":500,"meta":{"g":"@lottiefiles/toolkit-js 0.33.2"},"layers":[{"ty":4,"nm":"t","sr":1,"st":60,"op":90,"ip":60,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[256.655,268,0]},"s":{"a":0,"k":[100,100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[256.655,268,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":89},{"s":[0],"t":90}]}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"0","it":[{"ty":"sh","bm":0,"hd":false,"nm":"ã","d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-35.799,-108.024],[135.03,-108.024],[135.015,-107.976],[-35.905,-107.905]]}],"t":60},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-35.799,-108.024],[135.03,-108.024],[-48.36,108.024],[-135.03,96.72]]}],"t":66}]}},{"ty":"fl","bm":0,"hd":false,"nm":"å¡","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":60},{"s":[100],"t":61}]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[245.351,170.024]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"0","it":[{"ty":"sh","bm":0,"hd":false,"nm":"ã","d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-146.335,21.917],[-146.203,22.157],[-111.091,-49.844],[-111.165,-49.681]]}],"t":66},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-146.335,21.917],[66.749,49.681],[146.335,-25.815],[-111.165,-49.681]]}],"t":72}]}},{"ty":"fl","bm":0,"hd":false,"nm":"å¡","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":66},{"s":[100],"t":67}]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[256.655,244.827]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"0","it":[{"ty":"sh","bm":0,"hd":false,"nm":"ã","d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[85.348,-127.61],[40.195,-131.89],[134.402,-123.098]]}],"t":66},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[54.848,-47.61],[40.195,-131.89],[134.402,-123.098]]}],"t":72},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-134.402,131.89],[40.195,-131.89],[134.402,-123.098]]}],"t":78}]}},{"ty":"fl","bm":0,"hd":false,"nm":"å¡","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":72},{"s":[100],"t":73}]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[268.588,342.11]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":1},{"ty":4,"nm":"t","sr":1,"st":30,"op":60,"ip":30,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[256.655,268,0]},"s":{"a":0,"k":[100,100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[256.655,268,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":59},{"s":[0],"t":60}]}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"0","it":[{"ty":"sh","bm":0,"hd":false,"nm":"ã","d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-35.799,-108.024],[135.03,-108.024],[135.015,-107.976],[-35.905,-107.905]]}],"t":30},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-35.799,-108.024],[135.03,-108.024],[-48.36,108.024],[-135.03,96.72]]}],"t":36}]}},{"ty":"fl","bm":0,"hd":false,"nm":"å¡","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":30},{"s":[100],"t":31}]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[245.351,170.024]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"0","it":[{"ty":"sh","bm":0,"hd":false,"nm":"ã","d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-146.335,21.917],[-146.203,22.157],[-111.091,-49.844],[-111.165,-49.681]]}],"t":36},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-146.335,21.917],[66.749,49.681],[146.335,-25.815],[-111.165,-49.681]]}],"t":42}]}},{"ty":"fl","bm":0,"hd":false,"nm":"å¡","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":36},{"s":[100],"t":37}]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[256.655,244.827]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"0","it":[{"ty":"sh","bm":0,"hd":false,"nm":"ã","d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[85.348,-127.61],[40.195,-131.89],[134.402,-123.098]]}],"t":36},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[54.848,-47.61],[40.195,-131.89],[134.402,-123.098]]}],"t":42},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-134.402,131.89],[40.195,-131.89],[134.402,-123.098]]}],"t":48}]}},{"ty":"fl","bm":0,"hd":false,"nm":"å¡","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":42},{"s":[100],"t":43}]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[268.588,342.11]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":2},{"ty":4,"nm":"t","sr":1,"st":0,"op":30,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[256.655,268,0]},"s":{"a":0,"k":[100,100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[256.655,268,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":29},{"s":[0],"t":30}]}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"0","it":[{"ty":"sh","bm":0,"hd":false,"nm":"ã","d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-35.799,-108.024],[135.03,-108.024],[135.015,-107.976],[-35.905,-107.905]]}],"t":0},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-35.799,-108.024],[135.03,-108.024],[-48.36,108.024],[-135.03,96.72]]}],"t":6}]}},{"ty":"fl","bm":0,"hd":false,"nm":"å¡","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":0},{"s":[100],"t":1}]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[245.351,170.024]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"0","it":[{"ty":"sh","bm":0,"hd":false,"nm":"ã","d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-146.335,21.917],[-146.203,22.157],[-111.091,-49.844],[-111.165,-49.681]]}],"t":6},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-146.335,21.917],[66.749,49.681],[146.335,-25.815],[-111.165,-49.681]]}],"t":12}]}},{"ty":"fl","bm":0,"hd":false,"nm":"å¡","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":6},{"s":[100],"t":7}]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[256.655,244.827]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"0","it":[{"ty":"sh","bm":0,"hd":false,"nm":"ã","d":1,"ks":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[85.348,-127.61],[40.195,-131.89],[134.402,-123.098]]}],"t":6},{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[54.848,-47.61],[40.195,-131.89],[134.402,-123.098]]}],"t":12},{"s":[{"c":true,"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-134.402,131.89],[40.195,-131.89],[134.402,-123.098]]}],"t":18}]}},{"ty":"fl","bm":0,"hd":false,"nm":"å¡","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":12},{"s":[100],"t":13}]}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[268.588,342.11]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":3}],"v":"5.9.0","fr":30,"op":90,"ip":0,"assets":[]}
|
|
@@ -1,547 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import LottiePlayer from "../../assets/LottiePlayer";
|
|
3
|
-
import commonService from "../../utils/CommonService";
|
|
4
|
-
|
|
5
|
-
const HARDCODED_OPERATORS = [
|
|
6
|
-
{
|
|
7
|
-
logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Turbus_logo.svg/320px-Turbus_logo.svg.png",
|
|
8
|
-
name: "Turbus",
|
|
9
|
-
time: "7:00 am",
|
|
10
|
-
seatsAvailable: "3 disponibles",
|
|
11
|
-
},
|
|
12
|
-
{
|
|
13
|
-
logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Pullman_Bus_logo.svg/320px-Pullman_Bus_logo.svg.png",
|
|
14
|
-
name: "Pullmanbus",
|
|
15
|
-
time: "8:00 am",
|
|
16
|
-
seatsAvailable: "5 disponibles",
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Turbus_logo.svg/320px-Turbus_logo.svg.png",
|
|
20
|
-
name: "Expreso Santa C...",
|
|
21
|
-
time: "9:00 am",
|
|
22
|
-
seatsAvailable: "3 disponibles",
|
|
23
|
-
},
|
|
24
|
-
];
|
|
25
|
-
|
|
26
|
-
const HARDCODED_COUNTDOWN = "09:55";
|
|
27
|
-
|
|
28
|
-
const HOW_IT_WORKS_STEPS = [
|
|
29
|
-
{
|
|
30
|
-
icon: "flexible",
|
|
31
|
-
name: "1. Salida flexible",
|
|
32
|
-
text: "Viajas en un horario entre las 07:00 y las 10:00 AM del día elegido.",
|
|
33
|
-
},
|
|
34
|
-
{
|
|
35
|
-
icon: "bus",
|
|
36
|
-
name: "2. Empresa asignada",
|
|
37
|
-
text: "Una de las empresas disponibles confirma tu viaje una vez pagado.",
|
|
38
|
-
},
|
|
39
|
-
{
|
|
40
|
-
icon: "price",
|
|
41
|
-
name: "3. Precio garantizado",
|
|
42
|
-
text: "Al seleccionar este servicio aseguras el precio reducido.",
|
|
43
|
-
},
|
|
44
|
-
{
|
|
45
|
-
icon: "ticket",
|
|
46
|
-
name: "4. ¡Listo!",
|
|
47
|
-
text: "Recibe todos los detalles de tu viaje al instante tras la compra.",
|
|
48
|
-
},
|
|
49
|
-
];
|
|
50
|
-
|
|
51
|
-
const FeatureStepIcon = ({ icon }) => {
|
|
52
|
-
const iconClassName = "h-[30px] w-[30px] text-[#171717]";
|
|
53
|
-
|
|
54
|
-
switch (icon) {
|
|
55
|
-
case "flexible":
|
|
56
|
-
return (
|
|
57
|
-
<svg
|
|
58
|
-
className={iconClassName}
|
|
59
|
-
viewBox="0 0 40 40"
|
|
60
|
-
fill="none"
|
|
61
|
-
aria-hidden="true"
|
|
62
|
-
>
|
|
63
|
-
<path
|
|
64
|
-
d="M31.5 13.4A13 13 0 0 0 8 12.3"
|
|
65
|
-
stroke="currentColor"
|
|
66
|
-
strokeWidth="2.2"
|
|
67
|
-
strokeLinecap="round"
|
|
68
|
-
/>
|
|
69
|
-
<path
|
|
70
|
-
d="m7.4 7.7.2 5.2 5.1-1.2M8.5 26.6A13 13 0 0 0 32 27.7"
|
|
71
|
-
stroke="currentColor"
|
|
72
|
-
strokeWidth="2.2"
|
|
73
|
-
strokeLinecap="round"
|
|
74
|
-
strokeLinejoin="round"
|
|
75
|
-
/>
|
|
76
|
-
<path
|
|
77
|
-
d="m32.6 32.3-.2-5.2-5.1 1.2"
|
|
78
|
-
stroke="currentColor"
|
|
79
|
-
strokeWidth="2.2"
|
|
80
|
-
strokeLinecap="round"
|
|
81
|
-
strokeLinejoin="round"
|
|
82
|
-
/>
|
|
83
|
-
</svg>
|
|
84
|
-
);
|
|
85
|
-
case "bus":
|
|
86
|
-
return (
|
|
87
|
-
<svg
|
|
88
|
-
className={iconClassName}
|
|
89
|
-
viewBox="0 0 40 40"
|
|
90
|
-
fill="none"
|
|
91
|
-
aria-hidden="true"
|
|
92
|
-
>
|
|
93
|
-
<rect
|
|
94
|
-
x="8"
|
|
95
|
-
y="4.5"
|
|
96
|
-
width="24"
|
|
97
|
-
height="27"
|
|
98
|
-
rx="2.5"
|
|
99
|
-
stroke="currentColor"
|
|
100
|
-
strokeWidth="2.2"
|
|
101
|
-
/>
|
|
102
|
-
<path
|
|
103
|
-
d="M8 18.5h24M12 9h16M12 26h4m8 0h4M11 31.5v3h5v-3m8 0v3h5v-3M5.5 10v7m29-7v7"
|
|
104
|
-
stroke="currentColor"
|
|
105
|
-
strokeWidth="2.2"
|
|
106
|
-
strokeLinecap="round"
|
|
107
|
-
/>
|
|
108
|
-
</svg>
|
|
109
|
-
);
|
|
110
|
-
case "price":
|
|
111
|
-
return (
|
|
112
|
-
<svg
|
|
113
|
-
className={iconClassName}
|
|
114
|
-
viewBox="0 0 40 40"
|
|
115
|
-
fill="none"
|
|
116
|
-
aria-hidden="true"
|
|
117
|
-
>
|
|
118
|
-
<circle
|
|
119
|
-
cx="20"
|
|
120
|
-
cy="20"
|
|
121
|
-
r="14"
|
|
122
|
-
stroke="currentColor"
|
|
123
|
-
strokeWidth="2.2"
|
|
124
|
-
/>
|
|
125
|
-
<path
|
|
126
|
-
d="M23.7 15.4c-1-.7-2.2-1-3.6-1-2.2 0-3.8 1.1-3.8 2.8 0 4.2 7.4 1.8 7.4 5.8 0 1.8-1.6 2.8-4 2.8-1.5 0-2.9-.4-4-1.2M20 11.7v2.5m0 11.8v2.4"
|
|
127
|
-
stroke="currentColor"
|
|
128
|
-
strokeWidth="2.2"
|
|
129
|
-
strokeLinecap="round"
|
|
130
|
-
/>
|
|
131
|
-
</svg>
|
|
132
|
-
);
|
|
133
|
-
default:
|
|
134
|
-
return (
|
|
135
|
-
<svg
|
|
136
|
-
className={iconClassName}
|
|
137
|
-
viewBox="0 0 40 40"
|
|
138
|
-
fill="none"
|
|
139
|
-
aria-hidden="true"
|
|
140
|
-
>
|
|
141
|
-
<path
|
|
142
|
-
d="M7 11h26v6a3.5 3.5 0 0 0 0 7v6H7v-6a3.5 3.5 0 0 0 0-7v-6Z"
|
|
143
|
-
stroke="currentColor"
|
|
144
|
-
strokeWidth="2.2"
|
|
145
|
-
strokeLinejoin="round"
|
|
146
|
-
/>
|
|
147
|
-
<path
|
|
148
|
-
d="M22 12.5v3m0 3v3m0 3v4"
|
|
149
|
-
stroke="currentColor"
|
|
150
|
-
strokeWidth="2.2"
|
|
151
|
-
strokeLinecap="round"
|
|
152
|
-
/>
|
|
153
|
-
</svg>
|
|
154
|
-
);
|
|
155
|
-
}
|
|
156
|
-
};
|
|
157
|
-
|
|
158
|
-
const AssuranceIcon = ({ type }) => {
|
|
159
|
-
const iconClassName = "h-[18px] w-[18px] shrink-0 text-white";
|
|
160
|
-
|
|
161
|
-
if (type === "pending") {
|
|
162
|
-
return (
|
|
163
|
-
<svg
|
|
164
|
-
className={iconClassName}
|
|
165
|
-
viewBox="0 0 20 20"
|
|
166
|
-
fill="none"
|
|
167
|
-
aria-hidden="true"
|
|
168
|
-
>
|
|
169
|
-
<path
|
|
170
|
-
d="M4.2 8.2a6.2 6.2 0 1 1 .5 5.1"
|
|
171
|
-
stroke="currentColor"
|
|
172
|
-
strokeWidth="1.8"
|
|
173
|
-
strokeLinecap="round"
|
|
174
|
-
/>
|
|
175
|
-
<path
|
|
176
|
-
d="M4.2 4.8v3.4h3.4"
|
|
177
|
-
stroke="currentColor"
|
|
178
|
-
strokeWidth="1.8"
|
|
179
|
-
strokeLinecap="round"
|
|
180
|
-
strokeLinejoin="round"
|
|
181
|
-
/>
|
|
182
|
-
</svg>
|
|
183
|
-
);
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
return (
|
|
187
|
-
<svg
|
|
188
|
-
className={iconClassName}
|
|
189
|
-
viewBox="0 0 20 20"
|
|
190
|
-
fill="none"
|
|
191
|
-
aria-hidden="true"
|
|
192
|
-
>
|
|
193
|
-
<path
|
|
194
|
-
d="M10 2.2 16.3 4v5c0 4-2.4 6.8-6.3 8.7C6.1 15.8 3.7 13 3.7 9V4L10 2.2Z"
|
|
195
|
-
stroke="currentColor"
|
|
196
|
-
strokeWidth="1.6"
|
|
197
|
-
strokeLinejoin="round"
|
|
198
|
-
/>
|
|
199
|
-
<path
|
|
200
|
-
d="m6.9 9.7 2.1 2.1 4.3-4.4"
|
|
201
|
-
stroke="currentColor"
|
|
202
|
-
strokeWidth="1.7"
|
|
203
|
-
strokeLinecap="round"
|
|
204
|
-
strokeLinejoin="round"
|
|
205
|
-
/>
|
|
206
|
-
</svg>
|
|
207
|
-
);
|
|
208
|
-
};
|
|
209
|
-
|
|
210
|
-
const FeatureServiceUi = ({
|
|
211
|
-
serviceItem,
|
|
212
|
-
showTopLabel,
|
|
213
|
-
colors,
|
|
214
|
-
isSoldOut,
|
|
215
|
-
getAnimationIcon,
|
|
216
|
-
cityOrigin,
|
|
217
|
-
cityDestination,
|
|
218
|
-
renderIcon,
|
|
219
|
-
viewersConfig,
|
|
220
|
-
}) => {
|
|
221
|
-
const operators =
|
|
222
|
-
serviceItem?.operators?.length > 0
|
|
223
|
-
? serviceItem.operators
|
|
224
|
-
: HARDCODED_OPERATORS;
|
|
225
|
-
|
|
226
|
-
return (
|
|
227
|
-
<div
|
|
228
|
-
className={`relative ${
|
|
229
|
-
serviceItem.offer_text ? "mb-[55px]" : "mb-[10px]"
|
|
230
|
-
} ${
|
|
231
|
-
serviceItem?.is_direct_trip ||
|
|
232
|
-
serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
|
|
233
|
-
showTopLabel
|
|
234
|
-
? "mt-[24px]"
|
|
235
|
-
: "mt-[20px]"
|
|
236
|
-
}`}
|
|
237
|
-
>
|
|
238
|
-
<div
|
|
239
|
-
className=""
|
|
240
|
-
style={{
|
|
241
|
-
border: "1px solid #c0c0c0",
|
|
242
|
-
padding: "14px",
|
|
243
|
-
borderRadius: "14px",
|
|
244
|
-
}}
|
|
245
|
-
>
|
|
246
|
-
<div className="flex justify-between items-center px-[14px] pb-[10px] text-[13.33px]">
|
|
247
|
-
<div className="flex items-center gap-[10px]">
|
|
248
|
-
<span>Salida flexible</span>
|
|
249
|
-
<div
|
|
250
|
-
className="bold-text font-[9px]"
|
|
251
|
-
style={{
|
|
252
|
-
backgroundColor: "#FF5C60",
|
|
253
|
-
padding: "1px 8px",
|
|
254
|
-
borderRadius: "4px",
|
|
255
|
-
color: "#fff",
|
|
256
|
-
}}
|
|
257
|
-
>
|
|
258
|
-
<span>AHORRAS 60%</span>
|
|
259
|
-
</div>
|
|
260
|
-
</div>
|
|
261
|
-
<div>
|
|
262
|
-
<span>
|
|
263
|
-
{renderIcon("fireIcon", "14px")}{" "}
|
|
264
|
-
<span className="bold-text">Remate</span> términa en{" "}
|
|
265
|
-
<span
|
|
266
|
-
className="bold-text text-end"
|
|
267
|
-
ref={(node) => commonService.startCountdown(node, 599)}
|
|
268
|
-
style={{
|
|
269
|
-
fontVariantNumeric: "tabular-nums",
|
|
270
|
-
display: "inline-block",
|
|
271
|
-
color: "#FF5C60",
|
|
272
|
-
}}
|
|
273
|
-
/>
|
|
274
|
-
</span>
|
|
275
|
-
</div>
|
|
276
|
-
</div>
|
|
277
|
-
<div
|
|
278
|
-
id={`service-card-${serviceItem.id}`}
|
|
279
|
-
className="bg-[#0C1421] text-white mx-auto relative rounded-[14px] p-[14px] text-[13.33px]"
|
|
280
|
-
>
|
|
281
|
-
<div className="grid grid-cols-[1.3fr_2fr_1.2fr] gap-[16px] items-stretch">
|
|
282
|
-
{/* LEFT: origin, destination, flexible, time, confirmed seat */}
|
|
283
|
-
<div className="flex flex-col justify-between gap-[20px] py-[2px] ">
|
|
284
|
-
<div className="flex flex-col gap-[8px]">
|
|
285
|
-
<div className="flex items-center gap-[8px]">
|
|
286
|
-
<img
|
|
287
|
-
src={serviceItem.icons?.whiteOrigin}
|
|
288
|
-
alt="origin"
|
|
289
|
-
className={`w-[14px] h-[14px] shrink-0 ${
|
|
290
|
-
isSoldOut ? "grayscale" : ""
|
|
291
|
-
}`}
|
|
292
|
-
/>
|
|
293
|
-
<span className="text-[13px] bold-text">
|
|
294
|
-
{cityOrigin?.label.split(",")[0]}
|
|
295
|
-
</span>
|
|
296
|
-
</div>
|
|
297
|
-
<div className="flex items-center gap-[8px]">
|
|
298
|
-
<img
|
|
299
|
-
src={serviceItem.icons?.whiteDestination}
|
|
300
|
-
alt="destination"
|
|
301
|
-
className={`w-[16px] h-[16px] shrink-0 ${
|
|
302
|
-
isSoldOut ? "grayscale" : ""
|
|
303
|
-
}`}
|
|
304
|
-
style={{ opacity: isSoldOut ? 0.5 : 1 }}
|
|
305
|
-
/>
|
|
306
|
-
<span className="text-[13px] bold-text">
|
|
307
|
-
{cityDestination?.label.split(",")[0]}
|
|
308
|
-
</span>
|
|
309
|
-
</div>
|
|
310
|
-
</div>
|
|
311
|
-
|
|
312
|
-
<div className="flex flex-col gap-[8px]">
|
|
313
|
-
{/* Salida flexible badge — uses flexibleIcon */}
|
|
314
|
-
{/* <div
|
|
315
|
-
className="flex items-center gap-[6px] rounded-[8px] px-[8px] py-[4px] w-fit mb-[6px]"
|
|
316
|
-
style={{
|
|
317
|
-
border: "1px solid #363c48",
|
|
318
|
-
backgroundColor: "#1a202e",
|
|
319
|
-
}}
|
|
320
|
-
>
|
|
321
|
-
<img
|
|
322
|
-
src={serviceItem.icons?.busIcon}
|
|
323
|
-
alt="bus"
|
|
324
|
-
style={{ width: "20px", height: "20px" }}
|
|
325
|
-
/>
|
|
326
|
-
<span className="text-[12px] whitespace-nowrap">
|
|
327
|
-
Salida flexible
|
|
328
|
-
</span>
|
|
329
|
-
</div> */}
|
|
330
|
-
<div className="text-[12px] bold-text whitespace-nowrap">
|
|
331
|
-
Entre 07:00 AM y 10:00 AM
|
|
332
|
-
</div>
|
|
333
|
-
<div className="text-[11px] bold-text">Viernes 23 de mayo</div>
|
|
334
|
-
</div>
|
|
335
|
-
|
|
336
|
-
<div className="flex flex-col items-start gap-[10px] text-[12px] ">
|
|
337
|
-
<div className="flex items-center gap-[8px]">
|
|
338
|
-
<AssuranceIcon type="pending" />
|
|
339
|
-
|
|
340
|
-
<span
|
|
341
|
-
className="text-[10px]"
|
|
342
|
-
style={{
|
|
343
|
-
lineHeight: 1.3,
|
|
344
|
-
}}
|
|
345
|
-
>
|
|
346
|
-
Empresa y hora a confirmar luego del pago.
|
|
347
|
-
</span>
|
|
348
|
-
</div>
|
|
349
|
-
<div className="flex items-center gap-[8px]">
|
|
350
|
-
<AssuranceIcon type="secured" />
|
|
351
|
-
|
|
352
|
-
<span
|
|
353
|
-
className="text-[10px]"
|
|
354
|
-
style={{
|
|
355
|
-
lineHeight: 1.3,
|
|
356
|
-
}}
|
|
357
|
-
>
|
|
358
|
-
Tu compra está 100% asegurada.
|
|
359
|
-
</span>
|
|
360
|
-
</div>
|
|
361
|
-
</div>
|
|
362
|
-
</div>
|
|
363
|
-
|
|
364
|
-
{/* MIDDLE: competing operators + viewers */}
|
|
365
|
-
<div className="px-[16px] flex flex-col items-center justify-between gap-[12px] py-[2px] border-r border-[#363c48] border-l border-[#363c48]">
|
|
366
|
-
<div className="text-center">
|
|
367
|
-
<div className="bold-text text-[14px]">
|
|
368
|
-
3 operadores compitiendo por tu compra
|
|
369
|
-
</div>
|
|
370
|
-
{/* <div className="text-[12px] mt-[8px]">
|
|
371
|
-
Empresa a confirmar después de tu pago
|
|
372
|
-
</div> */}
|
|
373
|
-
</div>
|
|
374
|
-
|
|
375
|
-
<div className="flex items-stretch justify-center gap-[8px] w-full mb-[16px]">
|
|
376
|
-
{operators.map((op, idx) => (
|
|
377
|
-
<div
|
|
378
|
-
key={idx}
|
|
379
|
-
className="flex flex-col items-center justify-center gap-[8px] rounded-[8px]"
|
|
380
|
-
style={{
|
|
381
|
-
width: "140px",
|
|
382
|
-
// height: "80px",
|
|
383
|
-
border: "1px solid #363c48",
|
|
384
|
-
backgroundColor: "#1a202e",
|
|
385
|
-
padding: "14px",
|
|
386
|
-
}}
|
|
387
|
-
>
|
|
388
|
-
<img
|
|
389
|
-
src={serviceItem.operator_details[0]}
|
|
390
|
-
alt={op.name}
|
|
391
|
-
className={`h-[24px] w-auto object-contain ${
|
|
392
|
-
isSoldOut ? "grayscale" : ""
|
|
393
|
-
}`}
|
|
394
|
-
/>
|
|
395
|
-
<span className="text-[11px] truncate max-w-full text-center">
|
|
396
|
-
{serviceItem.operator_details[2]}
|
|
397
|
-
</span>
|
|
398
|
-
<div className="bg-[#FF8F45] text-white text-[12px] font-bold px-[16px] py-[4px] rounded-[4px] bold-text">
|
|
399
|
-
<span>{op?.time}</span>
|
|
400
|
-
</div>
|
|
401
|
-
<span className="text-[10px] mt-[6px]">
|
|
402
|
-
{op?.seatsAvailable}
|
|
403
|
-
</span>
|
|
404
|
-
</div>
|
|
405
|
-
))}
|
|
406
|
-
</div>
|
|
407
|
-
|
|
408
|
-
<div
|
|
409
|
-
className="flex items-center justify-center gap-[6px] text-[12px]"
|
|
410
|
-
style={{
|
|
411
|
-
border: "1px solid #363c48",
|
|
412
|
-
backgroundColor: "#1a202e",
|
|
413
|
-
padding: "8px 14px",
|
|
414
|
-
borderRadius: "24px",
|
|
415
|
-
width: "430px",
|
|
416
|
-
}}
|
|
417
|
-
>
|
|
418
|
-
<img
|
|
419
|
-
src={serviceItem.icons?.userIcon}
|
|
420
|
-
alt="eye"
|
|
421
|
-
style={{ width: "16px", height: "16px" }}
|
|
422
|
-
/>
|
|
423
|
-
<span>
|
|
424
|
-
<span className="bold-text text-white">
|
|
425
|
-
{" "}
|
|
426
|
-
<span
|
|
427
|
-
className="bold-text"
|
|
428
|
-
ref={(node) =>
|
|
429
|
-
commonService.startViewerCount(node, viewersConfig)
|
|
430
|
-
}
|
|
431
|
-
style={{
|
|
432
|
-
fontVariantNumeric: "tabular-nums",
|
|
433
|
-
color: "#FF5C60",
|
|
434
|
-
}}
|
|
435
|
-
/>{" "}
|
|
436
|
-
<span
|
|
437
|
-
style={{
|
|
438
|
-
color: "#FF5C60",
|
|
439
|
-
}}
|
|
440
|
-
>
|
|
441
|
-
personas
|
|
442
|
-
</span>
|
|
443
|
-
</span>{" "}
|
|
444
|
-
viendo este viaje |{" "}
|
|
445
|
-
<span
|
|
446
|
-
className="bold-text"
|
|
447
|
-
ref={(node) =>
|
|
448
|
-
commonService.startComprandoCount(node, 4, 16)
|
|
449
|
-
}
|
|
450
|
-
style={{ fontVariantNumeric: "tabular-nums" }}
|
|
451
|
-
/>{" "}
|
|
452
|
-
han comprado
|
|
453
|
-
</span>
|
|
454
|
-
</div>
|
|
455
|
-
</div>
|
|
456
|
-
|
|
457
|
-
{/* RIGHT: price + button */}
|
|
458
|
-
<div className="flex flex-col justify-center gap-[12px] py-[2px] relative mb-[16px]">
|
|
459
|
-
<div
|
|
460
|
-
className="flex flex-col gap-[6px] "
|
|
461
|
-
style={{
|
|
462
|
-
alignItems: "center",
|
|
463
|
-
}}
|
|
464
|
-
>
|
|
465
|
-
<span className="text-[#FF8F45] bold-text text-[26px] leading-tight">
|
|
466
|
-
60% OFF
|
|
467
|
-
</span>
|
|
468
|
-
<span className="text-[#666] text-[14px] line-through">
|
|
469
|
-
$10.000
|
|
470
|
-
</span>
|
|
471
|
-
<span className="text-white bold-text text-[28px] leading-none">
|
|
472
|
-
$4.000
|
|
473
|
-
</span>
|
|
474
|
-
</div>
|
|
475
|
-
|
|
476
|
-
<button
|
|
477
|
-
className="flex items-center gap-[6px] px-[20px] py-[10px] rounded-[12px] text-white bold-text text-[13px] mt-[4px] justify-center border-none cursor-pointer"
|
|
478
|
-
style={{
|
|
479
|
-
backgroundColor: "#FF5C60",
|
|
480
|
-
}}
|
|
481
|
-
>
|
|
482
|
-
<LottiePlayer
|
|
483
|
-
// animationData={serviceItem.icons.flexibleAnim}
|
|
484
|
-
animationData={getAnimationIcon("thunderAnimation")}
|
|
485
|
-
width="18px"
|
|
486
|
-
height="18px"
|
|
487
|
-
/>
|
|
488
|
-
<span className="whitespace-nowrap">¡Lo quiero!</span>
|
|
489
|
-
</button>
|
|
490
|
-
</div>
|
|
491
|
-
|
|
492
|
-
<div className="absolute bottom-[11px] right-[18px]">
|
|
493
|
-
<img
|
|
494
|
-
src={serviceItem.icons?.downArrow}
|
|
495
|
-
alt="down arrow"
|
|
496
|
-
style={{
|
|
497
|
-
width: "14px",
|
|
498
|
-
height: "8px",
|
|
499
|
-
filter: "brightness(0) invert(1)",
|
|
500
|
-
}}
|
|
501
|
-
/>
|
|
502
|
-
</div>
|
|
503
|
-
</div>
|
|
504
|
-
</div>
|
|
505
|
-
<div className="px-[16px] pt-[14px] pb-[6px] text-[13.33px]">
|
|
506
|
-
<span className="bold-text">¿Cómo funciona?</span>
|
|
507
|
-
|
|
508
|
-
<div className="mt-[14px] grid grid-cols-4 gap-[20px] px-[16px] ">
|
|
509
|
-
{HOW_IT_WORKS_STEPS.map((step) => (
|
|
510
|
-
<div
|
|
511
|
-
key={step.name}
|
|
512
|
-
className="flex flex-col items-center text-center text-[#272727]"
|
|
513
|
-
>
|
|
514
|
-
<FeatureStepIcon icon={step.icon} />
|
|
515
|
-
<span className="bold-text mt-[10px] text-[12px] leading-[14px]">
|
|
516
|
-
{step.name}
|
|
517
|
-
</span>
|
|
518
|
-
<span className="mt-[2px] max-w-[220px] text-[12px] leading-[14px] text-[#4a4a4a]">
|
|
519
|
-
{step.text}
|
|
520
|
-
</span>
|
|
521
|
-
</div>
|
|
522
|
-
))}
|
|
523
|
-
</div>
|
|
524
|
-
</div>
|
|
525
|
-
</div>
|
|
526
|
-
|
|
527
|
-
{/* TOP BADGE — "Remate | Termina en 09:55 min" hardcoded, no countdown hook */}
|
|
528
|
-
{/* {showTopLabel && (
|
|
529
|
-
<div className="absolute -top-[11px] left-0 w-full flex items-center justify-end gap-[12px] pr-[15px] z-10 ">
|
|
530
|
-
<div className="flex items-center gap-[6px] py-[5px] px-[14px] rounded-[38px] text-[12.5px] bg-[#FF8F45] text-white whitespace-nowrap">
|
|
531
|
-
<LottiePlayer
|
|
532
|
-
animationData={getAnimationIcon("bombAnimation")}
|
|
533
|
-
width="14px"
|
|
534
|
-
height="14px"
|
|
535
|
-
/>
|
|
536
|
-
<span>
|
|
537
|
-
<strong>Remate</strong> | Termina en{" "}
|
|
538
|
-
<strong>{HARDCODED_COUNTDOWN}</strong> min
|
|
539
|
-
</span>
|
|
540
|
-
</div>
|
|
541
|
-
</div>
|
|
542
|
-
)} */}
|
|
543
|
-
</div>
|
|
544
|
-
);
|
|
545
|
-
};
|
|
546
|
-
|
|
547
|
-
export default FeatureServiceUi;
|