kupos-ui-components-lib 9.4.8 → 9.4.10
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/assets/images/anims/service_list/star_anim.json +1 -0
- package/dist/components/ServiceItem/ServiceItemDesktop.js +15 -50
- package/dist/components/ServiceItem/ServiceItemMobile.js +2 -2
- package/dist/components/ServiceItem/mobileTypes.d.ts +1 -0
- package/dist/styles.css +15 -5
- package/dist/ui/OfferBanner.d.ts +14 -0
- package/dist/ui/OfferBanner.js +46 -0
- package/dist/ui/SeatSection/SeatSection.js +3 -32
- package/dist/ui/mobileweb/SeatSectionMobile.js +1 -1
- package/package.json +1 -1
- package/src/assets/images/anims/service_list/star_anim.json +1 -0
- package/src/components/ServiceItem/ServiceItemDesktop.tsx +30 -130
- package/src/components/ServiceItem/ServiceItemMobile.tsx +8 -2
- package/src/components/ServiceItem/mobileTypes.ts +1 -0
- package/src/ui/OfferBanner.tsx +121 -0
- package/src/ui/SeatSection/SeatSection.tsx +2 -55
- package/src/ui/mobileweb/SeatSectionMobile.tsx +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"nm":"Popular service","h":99.01,"w":100,"meta":{"g":"@lottiefiles/creator@1.89.0"},"layers":[{"ty":4,"nm":"Vector","sr":1,"st":0,"op":61,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[2.92,2.59]},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[600,600],"t":0},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[800,800],"t":22},{"s":[600,600],"t":45}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[50,45.351]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"sh","nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.07,0.07],[0,0],[0.04,0.04],[0.08,0.11],[0.07,0.11],[0.05,0.16],[0,0.16],[-0.29,0.29],[-0.5,0],[-0.15,-0.05],[-0.12,-0.08],[-0.09,-0.07],[-0.04,-0.04],[-0.04,0.04],[-0.12,0.08],[-0.14,0.05],[-0.14,0],[-0.29,-0.29],[0,-0.5],[0.5,-0.51],[0,0],[0.1,0],[0,0]],"o":[[-0.1,0],[0,0],[-0.01,-0.01],[-0.04,-0.04],[-0.08,-0.1],[-0.07,-0.12],[-0.05,-0.16],[0,-0.5],[0.29,-0.29],[0.14,0],[0.15,0.05],[0.12,0.08],[0.04,0.04],[0.04,-0.04],[0.09,-0.07],[0.12,-0.08],[0.15,-0.05],[0.5,0],[0.29,0.29],[0,0.5],[0,0],[-0.07,0.07],[0,0],[0,0]],"v":[[2.92,5.18],[2.67,5.07],[0.75,3.17],[0.66,3.09],[0.48,2.87],[0.26,2.54],[0.08,2.13],[0,1.64],[0.44,0.44],[1.63,0],[2.07,0.08],[2.48,0.28],[2.79,0.5],[2.92,0.62],[3.05,0.5],[3.36,0.28],[3.76,0.08],[4.2,0],[5.4,0.44],[5.84,1.64],[5.09,3.17],[3.17,5.07],[2.92,5.18],[2.92,5.18]]}}},{"ty":"fl","nm":"Fill","c":{"a":0,"k":[1,0.361,0.377]},"r":1,"o":{"a":0,"k":100}}],"ind":1},{"ty":4,"nm":"Vector","sr":1,"st":0,"op":61,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[7.5,7.43]},"s":{"a":0,"k":[580.918,580.918]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[50,49.534]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"sh","nm":"Path 2","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,-1.16],[0,0],[-1.16,0],[0,0],[0,0],[0,0],[0,0],[0,1.16],[0,0],[1.16,0],[0,0]],"o":[[0,0],[-1.16,0],[0,0],[0,1.16],[0,0],[0,0],[0,0],[0,0],[1.16,0],[0,0],[0,-1.16],[0,0],[0,0]],"v":[[12.87,0],[2.18,0],[0,2.12],[0,10.61],[2.18,12.66],[5.63,12.66],[7.6,14.85],[9.44,12.66],[12.87,12.66],[15,10.61],[15,2.12],[12.87,0],[12.87,0]]}}},{"ty":"fl","nm":"Fill","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":0,"k":100}}],"ind":2}],"v":"5.7.0","fr":30,"op":60,"ip":0,"assets":[]}
|
|
@@ -2,9 +2,9 @@ import React from "react";
|
|
|
2
2
|
import CommonService from "../../utils/CommonService";
|
|
3
3
|
import ModalEventManager from "../../utils/ModalEventManager";
|
|
4
4
|
import InternationalServicePopupBody from "../InternationalServicePopupBody";
|
|
5
|
-
import LottiePlayer from "../../assets/LottiePlayer";
|
|
6
5
|
import PeruServiceItemDesktop from "./PeruServiceItemDesktop";
|
|
7
6
|
import ExpandedDropdown from "../../ui/ExpendedDropDown/ExpandedDropdown";
|
|
7
|
+
import OfferBanner from "../../ui/OfferBanner";
|
|
8
8
|
import promoAnimation from "../../assets/images/anims/service_list/promocion.json";
|
|
9
9
|
import flexibleAnimation from "../../assets/images/anims/service_list/flexible.json";
|
|
10
10
|
import locationAnimation from "../../assets/images/anims/service_list/location.json";
|
|
@@ -21,6 +21,7 @@ import opsitesLocationAnimation from "../../assets/images/anims/service_list/ops
|
|
|
21
21
|
import opsitesPriorityStageAnimation from "../../assets/images/anims/service_list/opsitesPriorityStage.json";
|
|
22
22
|
import bombAnimation from "../../assets/images/anims/service_list/bomb.json";
|
|
23
23
|
import dotAnimation from "../../assets/images/anims/service_list/dot_animation.json";
|
|
24
|
+
import starAnimation from "../../assets/images/anims/service_list/star_anim.json";
|
|
24
25
|
import RatingBlock from "../../ui/RatingBlock";
|
|
25
26
|
import DurationBlock from "../../ui/DurationBlock";
|
|
26
27
|
import PetBlock from "../../ui/PetBlock";
|
|
@@ -65,6 +66,9 @@ const ANIMATION_MAP = {
|
|
|
65
66
|
dotAnimation: {
|
|
66
67
|
kupos: dotAnimation,
|
|
67
68
|
},
|
|
69
|
+
starAnimation: {
|
|
70
|
+
kupos: starAnimation,
|
|
71
|
+
},
|
|
68
72
|
};
|
|
69
73
|
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, }) {
|
|
70
74
|
var _a;
|
|
@@ -231,19 +235,22 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
231
235
|
},
|
|
232
236
|
];
|
|
233
237
|
const otherItems = items.filter((i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition);
|
|
234
|
-
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 ${hasOfferText || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
|
|
238
|
+
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-[10] ${hasOfferText || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
|
|
235
239
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
|
|
236
240
|
showTopLabel
|
|
237
241
|
? "mt-[24px]"
|
|
238
242
|
: "mt-[20px]"} ` },
|
|
243
|
+
((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)) && (React.createElement(OfferBanner, { offerGradient: offerGradient, isSoldOut: isSoldOut, serviceItem: serviceItem, renderIcon: renderIcon, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon })),
|
|
239
244
|
React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${hasOfferText || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
|
|
240
|
-
? "rounded-[18px]"
|
|
245
|
+
? "z-[3] rounded-[18px]"
|
|
241
246
|
: "rounded-[10px] border border-[#ccc]"}`, style: serviceCardStyle },
|
|
242
247
|
React.createElement("div", { className: " pt-[20px]", style: {
|
|
243
|
-
padding:
|
|
244
|
-
?
|
|
245
|
-
|
|
246
|
-
|
|
248
|
+
padding: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ||
|
|
249
|
+
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ||
|
|
250
|
+
hasDiscount
|
|
251
|
+
? "20px 15px 10px 15px"
|
|
252
|
+
: "20px 15px 10px 15px",
|
|
253
|
+
marginTop: hasDiscount || hasOfferText ? "14px" : "",
|
|
247
254
|
} },
|
|
248
255
|
React.createElement("div", { className: "grid text-[#464647] w-full [grid-template-columns:22%_28%_2.5%_24%_15.5%] gap-x-[2%] items-center" },
|
|
249
256
|
React.createElement("div", { className: "flex flex-col gap-[5px]" },
|
|
@@ -273,7 +280,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
273
280
|
opacity: isItemExpanded ? 1 : 0,
|
|
274
281
|
transition: "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
|
|
275
282
|
position: "relative",
|
|
276
|
-
zIndex: hasOfferText ?
|
|
283
|
+
zIndex: hasOfferText || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? 0 : -1,
|
|
277
284
|
} },
|
|
278
285
|
React.createElement("div", { style: Object.assign({ overflow: "hidden", minHeight: 0, marginTop: "-10px" }, (hasOfferText || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
|
|
279
286
|
? {
|
|
@@ -285,48 +292,6 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
285
292
|
: {})) },
|
|
286
293
|
React.createElement(ExpandedDropdown, { serviceItem: serviceItem, isPeru: isPeru, translation: translation, getAnimationIcon: getAnimationIcon, isChangeTicket: serviceItem.is_change_ticket === true })))),
|
|
287
294
|
children,
|
|
288
|
-
((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)) && (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: {
|
|
289
|
-
background: offerGradient,
|
|
290
|
-
opacity: isSoldOut ? 0.5 : 1,
|
|
291
|
-
zIndex: isPeru ? -1 : -2,
|
|
292
|
-
// zIndex: hasOfferText ? 2 : isPeru ? 1 : -2,
|
|
293
|
-
} },
|
|
294
|
-
React.createElement("div", { className: "flex justify-between items-center w-full" },
|
|
295
|
-
React.createElement("div", { className: "flex items-center " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? (React.createElement("div", { className: "flex items-center gap-[3px]" },
|
|
296
|
-
renderIcon("whiteFireIcon", "14px"),
|
|
297
|
-
React.createElement("span", null, "Servicio popular entre los usuarios"))) : (React.createElement("div", { className: "flex items-center" },
|
|
298
|
-
React.createElement(LottiePlayer, { animationData: getAnimationIcon("bombAnimation"), width: "18px", height: "18px" }),
|
|
299
|
-
React.createElement("div", { className: "flex items-center mt-[2px]" },
|
|
300
|
-
React.createElement("span", { className: "bold-text ml-[6px]" },
|
|
301
|
-
((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").length > 30
|
|
302
|
-
? ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").slice(0, 30) +
|
|
303
|
-
"..."
|
|
304
|
-
: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "",
|
|
305
|
-
" ",
|
|
306
|
-
isLoggedIn ? null : (React.createElement("span", { onClick: showLoginModal, className: "cursor-pointer" }, "registro")),
|
|
307
|
-
" ",
|
|
308
|
-
"\u00A0"),
|
|
309
|
-
" ",
|
|
310
|
-
"| Termina en\u00A0",
|
|
311
|
-
React.createElement("span", { className: "bold-text text-end", ref: (node) => CommonService.startCountdown(node, 599), style: {
|
|
312
|
-
fontVariantNumeric: "tabular-nums",
|
|
313
|
-
display: "inline-block",
|
|
314
|
-
} }))))),
|
|
315
|
-
React.createElement("div", { className: "flex items-center" },
|
|
316
|
-
React.createElement(LottiePlayer, { animationData: getAnimationIcon("dotAnimation"), width: "12px", height: "12px" }),
|
|
317
|
-
React.createElement("span", { className: "ml-[6px]" },
|
|
318
|
-
React.createElement("span", { className: "bold-text", ref: (node) => CommonService.startViewerCount(node, viewersConfig), style: { fontVariantNumeric: "tabular-nums" } }),
|
|
319
|
-
" ",
|
|
320
|
-
React.createElement("span", null,
|
|
321
|
-
" ",
|
|
322
|
-
(viewersConfig === null || viewersConfig === void 0 ? void 0 : viewersConfig.label) || " viendo",
|
|
323
|
-
" |",
|
|
324
|
-
" ",
|
|
325
|
-
React.createElement("span", { className: "" },
|
|
326
|
-
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? null : "Quedan pocos • ",
|
|
327
|
-
React.createElement("span", { className: "bold-text", ref: (node) => CommonService.startComprandoCount(node, 4, 16), style: { fontVariantNumeric: "tabular-nums" } }),
|
|
328
|
-
" ",
|
|
329
|
-
"comprando"))))))),
|
|
330
295
|
React.createElement(ServiceBadges, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, translation: translation, serviceItem: serviceItem })))));
|
|
331
296
|
}
|
|
332
297
|
export default ServiceItemPB;
|
|
@@ -123,8 +123,8 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
123
123
|
} },
|
|
124
124
|
React.createElement("div", { className: "flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]", style: { lineHeight: 1.6 } },
|
|
125
125
|
React.createElement("div", { className: "flex justify-between items-center" },
|
|
126
|
-
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? (React.createElement("div", { className: "flex items-center" },
|
|
127
|
-
|
|
126
|
+
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? (React.createElement("div", { className: "flex items-center gap-[6px]" },
|
|
127
|
+
React.createElement(LottiePlayer, { animationData: serviceItem.icons.starAnimation, width: "14px", height: "14px" }),
|
|
128
128
|
React.createElement("span", { className: "text-[#fff]" }, "M\u00E1s elegido"))) : (React.createElement("div", { className: `flex ${((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").length > 10 ? "items-start" : "items-center"}` },
|
|
129
129
|
React.createElement("div", { className: isLongOfferText ? "mt-[2px]" : "" },
|
|
130
130
|
React.createElement(LottiePlayer, { animationData: serviceItem.icons.bombAnim, width: "14px", height: "14px" })),
|
package/dist/styles.css
CHANGED
|
@@ -75,8 +75,8 @@
|
|
|
75
75
|
.-bottom-\[36px\] {
|
|
76
76
|
bottom: calc(36px * -1);
|
|
77
77
|
}
|
|
78
|
-
.bottom-\[
|
|
79
|
-
bottom:
|
|
78
|
+
.bottom-\[35px\] {
|
|
79
|
+
bottom: 35px;
|
|
80
80
|
}
|
|
81
81
|
.-left-\[7px\] {
|
|
82
82
|
left: calc(7px * -1);
|
|
@@ -135,6 +135,9 @@
|
|
|
135
135
|
.z-\[1\] {
|
|
136
136
|
z-index: 1;
|
|
137
137
|
}
|
|
138
|
+
.z-\[3\] {
|
|
139
|
+
z-index: 3;
|
|
140
|
+
}
|
|
138
141
|
.z-\[100\] {
|
|
139
142
|
z-index: 100;
|
|
140
143
|
}
|
|
@@ -536,9 +539,6 @@
|
|
|
536
539
|
.gap-\[2px\] {
|
|
537
540
|
gap: 2px;
|
|
538
541
|
}
|
|
539
|
-
.gap-\[3px\] {
|
|
540
|
-
gap: 3px;
|
|
541
|
-
}
|
|
542
542
|
.gap-\[3rem\] {
|
|
543
543
|
gap: 3rem;
|
|
544
544
|
}
|
|
@@ -749,6 +749,9 @@
|
|
|
749
749
|
.p-\[30px_20px\] {
|
|
750
750
|
padding: 30px 20px;
|
|
751
751
|
}
|
|
752
|
+
.px-\[2px\] {
|
|
753
|
+
padding-inline: 2px;
|
|
754
|
+
}
|
|
752
755
|
.px-\[6px\] {
|
|
753
756
|
padding-inline: 6px;
|
|
754
757
|
}
|
|
@@ -1033,6 +1036,13 @@
|
|
|
1033
1036
|
}
|
|
1034
1037
|
}
|
|
1035
1038
|
}
|
|
1039
|
+
.hover\:z-\[10\] {
|
|
1040
|
+
&:hover {
|
|
1041
|
+
@media (hover: hover) {
|
|
1042
|
+
z-index: 10;
|
|
1043
|
+
}
|
|
1044
|
+
}
|
|
1045
|
+
}
|
|
1036
1046
|
.hover\:z-\[500\] {
|
|
1037
1047
|
&:hover {
|
|
1038
1048
|
@media (hover: hover) {
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { ServiceItemProps } from "../components/ServiceItem/types";
|
|
3
|
+
interface OfferBannerProps {
|
|
4
|
+
offerGradient: string;
|
|
5
|
+
isSoldOut: boolean;
|
|
6
|
+
serviceItem: Pick<ServiceItemProps["serviceItem"], "is_dp_enabled" | "offer_text">;
|
|
7
|
+
renderIcon: (name: string, size: string) => React.ReactNode;
|
|
8
|
+
isLoggedIn: any;
|
|
9
|
+
showLoginModal: any;
|
|
10
|
+
viewersConfig: ServiceItemProps["viewersConfig"];
|
|
11
|
+
getAnimationIcon: (name: string) => any;
|
|
12
|
+
}
|
|
13
|
+
declare const OfferBanner: React.FC<OfferBannerProps>;
|
|
14
|
+
export default OfferBanner;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import LottiePlayer from "../assets/LottiePlayer";
|
|
3
|
+
import CommonService from "../utils/CommonService";
|
|
4
|
+
const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, renderIcon, isLoggedIn, showLoginModal, viewersConfig, getAnimationIcon, }) => {
|
|
5
|
+
return (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: {
|
|
6
|
+
background: offerGradient,
|
|
7
|
+
opacity: isSoldOut ? 0.5 : 1,
|
|
8
|
+
zIndex: 0,
|
|
9
|
+
} },
|
|
10
|
+
React.createElement("div", { className: "flex justify-between items-center w-full" },
|
|
11
|
+
React.createElement("div", { className: "flex items-center " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? (React.createElement("div", { className: "flex items-center gap-[5px]" },
|
|
12
|
+
React.createElement(LottiePlayer, { animationData: getAnimationIcon("starAnimation"), width: "18px", height: "18px" }),
|
|
13
|
+
React.createElement("span", null, "Servicio popular entre los usuarios"))) : (React.createElement("div", { className: "flex items-center" },
|
|
14
|
+
React.createElement(LottiePlayer, { animationData: getAnimationIcon("bombAnimation"), width: "18px", height: "18px" }),
|
|
15
|
+
React.createElement("div", { className: "flex items-center mt-[2px]" },
|
|
16
|
+
React.createElement("span", { className: "bold-text ml-[6px]" },
|
|
17
|
+
((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").length > 30
|
|
18
|
+
? ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").slice(0, 30) + "..."
|
|
19
|
+
: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "",
|
|
20
|
+
" ",
|
|
21
|
+
isLoggedIn ? null : (React.createElement("span", { onClick: showLoginModal, className: "cursor-pointer" }, "- registro")),
|
|
22
|
+
" ",
|
|
23
|
+
"\u00A0"),
|
|
24
|
+
" ",
|
|
25
|
+
"| Termina en\u00A0",
|
|
26
|
+
React.createElement("span", { className: "bold-text text-end", ref: (node) => CommonService.startCountdown(node, 599), style: {
|
|
27
|
+
fontVariantNumeric: "tabular-nums",
|
|
28
|
+
display: "inline-block",
|
|
29
|
+
} }))))),
|
|
30
|
+
React.createElement("div", { className: "flex items-center" },
|
|
31
|
+
React.createElement(LottiePlayer, { animationData: getAnimationIcon("dotAnimation"), width: "12px", height: "12px" }),
|
|
32
|
+
React.createElement("span", { className: "ml-[6px]" },
|
|
33
|
+
React.createElement("span", { className: "bold-text", ref: (node) => CommonService.startViewerCount(node, viewersConfig), style: { fontVariantNumeric: "tabular-nums" } }),
|
|
34
|
+
" ",
|
|
35
|
+
React.createElement("span", null,
|
|
36
|
+
" ",
|
|
37
|
+
(viewersConfig === null || viewersConfig === void 0 ? void 0 : viewersConfig.label) || " viendo",
|
|
38
|
+
" |",
|
|
39
|
+
" ",
|
|
40
|
+
React.createElement("span", { className: "" },
|
|
41
|
+
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? null : "Quedan pocos • ",
|
|
42
|
+
React.createElement("span", { className: "bold-text", ref: (node) => CommonService.startComprandoCount(node, 4, 16), style: { fontVariantNumeric: "tabular-nums" } }),
|
|
43
|
+
" ",
|
|
44
|
+
"comprando")))))));
|
|
45
|
+
};
|
|
46
|
+
export default OfferBanner;
|
|
@@ -125,47 +125,18 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
|
|
|
125
125
|
React.createElement("div", null,
|
|
126
126
|
React.createElement("div", { className: "relative" },
|
|
127
127
|
React.createElement("div", { className: "absolute -left-[20px] top-1/2 transform -translate-y-1/2" }, renderIcon("fireIcon", "16px")),
|
|
128
|
-
React.createElement("div", { className: "absolute bottom-[
|
|
128
|
+
React.createElement("div", { className: "absolute bottom-[35px] left-1/2 -translate-x-1/2 ", style: {
|
|
129
129
|
animation: "pulse-zoom 2s ease-in-out infinite",
|
|
130
130
|
whiteSpace: "nowrap",
|
|
131
131
|
} },
|
|
132
|
-
React.createElement("span", { className: "rounded-[100px] bg-[#ff5964] px-[6px] w-fit text-[12px] bold-text leading-[20px] text-white", style: {
|
|
132
|
+
React.createElement("span", { className: "rounded-[100px] bg-[#ff5964] px-[6px] px-[2px] w-fit text-[12px] bold-text leading-[20px] text-white", style: {
|
|
133
133
|
animation: "pulse-zoom 2s ease-in-out infinite",
|
|
134
134
|
whiteSpace: "nowrap",
|
|
135
135
|
color: dpSeatColor,
|
|
136
136
|
} }, "Mejor precio")),
|
|
137
137
|
React.createElement("div", { className: "text-[22px] bold-text leading-[30px] text-center", style: { color: isSoldOut ? "#c0c0c0" : dpSeatColor } }, availableSeats <= 0
|
|
138
138
|
? CommonService.currency(0, currencySign)
|
|
139
|
-
: CommonService.discountedCurrency(lowestFare, currencySign)))))
|
|
140
|
-
// <div className="flex items-center justify-between text-[13.33px]">
|
|
141
|
-
// <span className="text-[13.33px] font-normal leading-[24px] text-[#464647]">
|
|
142
|
-
// Desde
|
|
143
|
-
// </span>
|
|
144
|
-
// <div className="flex flex-col items-center gap-[2px]">
|
|
145
|
-
// <span
|
|
146
|
-
// className="rounded-[100px] bg-[#ff5964] px-[6px] w-fit text-[12px] bold-text leading-[20px] text-white"
|
|
147
|
-
// style={{
|
|
148
|
-
// animation: "pulse-zoom 2s ease-in-out infinite",
|
|
149
|
-
// whiteSpace: "nowrap",
|
|
150
|
-
// color: dpSeatColor,
|
|
151
|
-
// }}
|
|
152
|
-
// >
|
|
153
|
-
// Mejor precio
|
|
154
|
-
// </span>
|
|
155
|
-
// <span
|
|
156
|
-
// className="flex items-center gap-[6px] text-[22px] bold-text leading-[30px] relative"
|
|
157
|
-
// style={{ color: isSoldOut ? "#c0c0c0" : dpSeatColor }}
|
|
158
|
-
// >
|
|
159
|
-
// <div className="absolute -left-[20px]">
|
|
160
|
-
// {renderIcon("fireIcon", "16px")}
|
|
161
|
-
// </div>
|
|
162
|
-
// {availableSeats <= 0
|
|
163
|
-
// ? CommonService.currency(0, currencySign)
|
|
164
|
-
// : CommonService.discountedCurrency(lowestFare, currencySign)}
|
|
165
|
-
// </span>
|
|
166
|
-
// </div>
|
|
167
|
-
// </div>
|
|
168
|
-
);
|
|
139
|
+
: CommonService.discountedCurrency(lowestFare, currencySign))))));
|
|
169
140
|
}
|
|
170
141
|
if (hasDiscount && discountSeat) {
|
|
171
142
|
return (React.createElement("div", { className: "grid grid-cols-2 items-center text-[13.33px] relative" },
|
|
@@ -86,7 +86,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
|
|
|
86
86
|
top: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
|
|
87
87
|
(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0
|
|
88
88
|
? "-20px"
|
|
89
|
-
: "-
|
|
89
|
+
: "-15px",
|
|
90
90
|
} },
|
|
91
91
|
React.createElement("span", { className: "rounded-[100px] px-[8px] text-[11px] bold-text leading-[20px] text-[#fff]", style: {
|
|
92
92
|
backgroundColor: tooltipBgColor,
|
package/package.json
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"nm":"Popular service","h":99.01,"w":100,"meta":{"g":"@lottiefiles/creator@1.89.0"},"layers":[{"ty":4,"nm":"Vector","sr":1,"st":0,"op":61,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[2.92,2.59]},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[600,600],"t":0},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[800,800],"t":22},{"s":[600,600],"t":45}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[50,45.351]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"sh","nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0.07,0.07],[0,0],[0.04,0.04],[0.08,0.11],[0.07,0.11],[0.05,0.16],[0,0.16],[-0.29,0.29],[-0.5,0],[-0.15,-0.05],[-0.12,-0.08],[-0.09,-0.07],[-0.04,-0.04],[-0.04,0.04],[-0.12,0.08],[-0.14,0.05],[-0.14,0],[-0.29,-0.29],[0,-0.5],[0.5,-0.51],[0,0],[0.1,0],[0,0]],"o":[[-0.1,0],[0,0],[-0.01,-0.01],[-0.04,-0.04],[-0.08,-0.1],[-0.07,-0.12],[-0.05,-0.16],[0,-0.5],[0.29,-0.29],[0.14,0],[0.15,0.05],[0.12,0.08],[0.04,0.04],[0.04,-0.04],[0.09,-0.07],[0.12,-0.08],[0.15,-0.05],[0.5,0],[0.29,0.29],[0,0.5],[0,0],[-0.07,0.07],[0,0],[0,0]],"v":[[2.92,5.18],[2.67,5.07],[0.75,3.17],[0.66,3.09],[0.48,2.87],[0.26,2.54],[0.08,2.13],[0,1.64],[0.44,0.44],[1.63,0],[2.07,0.08],[2.48,0.28],[2.79,0.5],[2.92,0.62],[3.05,0.5],[3.36,0.28],[3.76,0.08],[4.2,0],[5.4,0.44],[5.84,1.64],[5.09,3.17],[3.17,5.07],[2.92,5.18],[2.92,5.18]]}}},{"ty":"fl","nm":"Fill","c":{"a":0,"k":[1,0.361,0.377]},"r":1,"o":{"a":0,"k":100}}],"ind":1},{"ty":4,"nm":"Vector","sr":1,"st":0,"op":61,"ip":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[7.5,7.43]},"s":{"a":0,"k":[580.918,580.918]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[50,49.534]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"sh","nm":"Path 2","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,-1.16],[0,0],[-1.16,0],[0,0],[0,0],[0,0],[0,0],[0,1.16],[0,0],[1.16,0],[0,0]],"o":[[0,0],[-1.16,0],[0,0],[0,1.16],[0,0],[0,0],[0,0],[0,0],[1.16,0],[0,0],[0,-1.16],[0,0],[0,0]],"v":[[12.87,0],[2.18,0],[0,2.12],[0,10.61],[2.18,12.66],[5.63,12.66],[7.6,14.85],[9.44,12.66],[12.87,12.66],[15,10.61],[15,2.12],[12.87,0],[12.87,0]]}}},{"ty":"fl","nm":"Fill","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":0,"k":100}}],"ind":2}],"v":"5.7.0","fr":30,"op":60,"ip":0,"assets":[]}
|
|
@@ -3,9 +3,9 @@ import { ServiceItemProps } from "./types";
|
|
|
3
3
|
import CommonService from "../../utils/CommonService";
|
|
4
4
|
import ModalEventManager from "../../utils/ModalEventManager";
|
|
5
5
|
import InternationalServicePopupBody from "../InternationalServicePopupBody";
|
|
6
|
-
import LottiePlayer from "../../assets/LottiePlayer";
|
|
7
6
|
import PeruServiceItemDesktop from "./PeruServiceItemDesktop";
|
|
8
7
|
import ExpandedDropdown from "../../ui/ExpendedDropDown/ExpandedDropdown";
|
|
8
|
+
import OfferBanner from "../../ui/OfferBanner";
|
|
9
9
|
import promoAnimation from "../../assets/images/anims/service_list/promocion.json";
|
|
10
10
|
import flexibleAnimation from "../../assets/images/anims/service_list/flexible.json";
|
|
11
11
|
import locationAnimation from "../../assets/images/anims/service_list/location.json";
|
|
@@ -25,6 +25,7 @@ import opsitesPriorityStageAnimation from "../../assets/images/anims/service_lis
|
|
|
25
25
|
|
|
26
26
|
import bombAnimation from "../../assets/images/anims/service_list/bomb.json";
|
|
27
27
|
import dotAnimation from "../../assets/images/anims/service_list/dot_animation.json";
|
|
28
|
+
import starAnimation from "../../assets/images/anims/service_list/star_anim.json";
|
|
28
29
|
|
|
29
30
|
import RatingBlock from "../../ui/RatingBlock";
|
|
30
31
|
import DurationBlock from "../../ui/DurationBlock";
|
|
@@ -72,6 +73,9 @@ const ANIMATION_MAP: Record<string, Record<string, any>> = {
|
|
|
72
73
|
dotAnimation: {
|
|
73
74
|
kupos: dotAnimation,
|
|
74
75
|
},
|
|
76
|
+
starAnimation: {
|
|
77
|
+
kupos: starAnimation,
|
|
78
|
+
},
|
|
75
79
|
};
|
|
76
80
|
|
|
77
81
|
function ServiceItemPB({
|
|
@@ -401,7 +405,7 @@ function ServiceItemPB({
|
|
|
401
405
|
/>
|
|
402
406
|
) : (
|
|
403
407
|
<div
|
|
404
|
-
className={`relative ${hasOfferText || serviceItem?.is_dp_enabled ? "mb-[55px]" : "mb-[10px]"} ${
|
|
408
|
+
className={`relative hover:z-[10] ${hasOfferText || serviceItem?.is_dp_enabled ? "mb-[55px]" : "mb-[10px]"} ${
|
|
405
409
|
serviceItem?.is_direct_trip ||
|
|
406
410
|
serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
|
|
407
411
|
showTopLabel
|
|
@@ -409,11 +413,23 @@ function ServiceItemPB({
|
|
|
409
413
|
: "mt-[20px]"
|
|
410
414
|
} `}
|
|
411
415
|
>
|
|
416
|
+
{(serviceItem?.offer_text || serviceItem?.is_dp_enabled) && (
|
|
417
|
+
<OfferBanner
|
|
418
|
+
offerGradient={offerGradient}
|
|
419
|
+
isSoldOut={isSoldOut}
|
|
420
|
+
serviceItem={serviceItem}
|
|
421
|
+
renderIcon={renderIcon}
|
|
422
|
+
isLoggedIn={isLoggedIn}
|
|
423
|
+
showLoginModal={showLoginModal}
|
|
424
|
+
viewersConfig={viewersConfig}
|
|
425
|
+
getAnimationIcon={getAnimationIcon}
|
|
426
|
+
/>
|
|
427
|
+
)}
|
|
412
428
|
<div
|
|
413
429
|
id={`service-card-${serviceItem.id}`}
|
|
414
430
|
className={`bg-white mx-auto relative ${
|
|
415
431
|
hasOfferText || serviceItem?.is_dp_enabled
|
|
416
|
-
? "rounded-[18px]"
|
|
432
|
+
? "z-[3] rounded-[18px]"
|
|
417
433
|
: "rounded-[10px] border border-[#ccc]"
|
|
418
434
|
}`}
|
|
419
435
|
style={serviceCardStyle}
|
|
@@ -421,20 +437,17 @@ function ServiceItemPB({
|
|
|
421
437
|
<div
|
|
422
438
|
className=" pt-[20px]"
|
|
423
439
|
style={{
|
|
424
|
-
padding:
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
440
|
+
padding:
|
|
441
|
+
serviceItem?.is_dp_enabled ||
|
|
442
|
+
serviceItem?.offer_text ||
|
|
443
|
+
hasDiscount
|
|
444
|
+
? "20px 15px 10px 15px"
|
|
445
|
+
: "20px 15px 10px 15px",
|
|
446
|
+
|
|
447
|
+
marginTop: hasDiscount || hasOfferText ? "14px" : "",
|
|
429
448
|
}}
|
|
430
449
|
>
|
|
431
|
-
<div
|
|
432
|
-
className="grid text-[#464647] w-full [grid-template-columns:22%_28%_2.5%_24%_15.5%] gap-x-[2%] items-center"
|
|
433
|
-
// style={{
|
|
434
|
-
// marginTop:
|
|
435
|
-
// showTopLabel || serviceItem?.is_direct_trip ? "8px" : "",
|
|
436
|
-
// }}
|
|
437
|
-
>
|
|
450
|
+
<div className="grid text-[#464647] w-full [grid-template-columns:22%_28%_2.5%_24%_15.5%] gap-x-[2%] items-center">
|
|
438
451
|
{/* OPERATOR LOGO */}
|
|
439
452
|
<div className="flex flex-col gap-[5px]">
|
|
440
453
|
<div>
|
|
@@ -501,21 +514,6 @@ function ServiceItemPB({
|
|
|
501
514
|
{/* BUTTON */}
|
|
502
515
|
|
|
503
516
|
<div className="relative">
|
|
504
|
-
{/* {showLastSeats ? (
|
|
505
|
-
<div
|
|
506
|
-
className="flex justify-end mr-[11px] w-[100%] right-[0px] absolute"
|
|
507
|
-
style={{
|
|
508
|
-
top: serviceDetailsLoading ? "-17px" : "-20px",
|
|
509
|
-
}}
|
|
510
|
-
>
|
|
511
|
-
{serviceItem?.available_seats < 10 &&
|
|
512
|
-
serviceItem?.available_seats > 0 && (
|
|
513
|
-
<div className="text-[12px] text-[#464647] mt-1 text-center">
|
|
514
|
-
¡Últimos Asientos!
|
|
515
|
-
</div>
|
|
516
|
-
)}
|
|
517
|
-
</div>
|
|
518
|
-
) : null} */}
|
|
519
517
|
<KuposButton
|
|
520
518
|
isSoldOut={isSoldOut}
|
|
521
519
|
isLoading={serviceDetailsLoading}
|
|
@@ -526,12 +524,7 @@ function ServiceItemPB({
|
|
|
526
524
|
onClick={checkMidnight}
|
|
527
525
|
/>
|
|
528
526
|
{showLastSeats ? (
|
|
529
|
-
<div
|
|
530
|
-
className="flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]"
|
|
531
|
-
// style={{
|
|
532
|
-
// top: serviceDetailsLoading ? "-17px" : "-20px",
|
|
533
|
-
// }}
|
|
534
|
-
>
|
|
527
|
+
<div className="flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]">
|
|
535
528
|
{serviceItem?.available_seats < 10 &&
|
|
536
529
|
serviceItem?.available_seats > 0 && (
|
|
537
530
|
<div
|
|
@@ -576,7 +569,7 @@ function ServiceItemPB({
|
|
|
576
569
|
transition:
|
|
577
570
|
"grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
|
|
578
571
|
position: "relative",
|
|
579
|
-
zIndex: hasOfferText ?
|
|
572
|
+
zIndex: hasOfferText || serviceItem?.is_dp_enabled ? 0 : -1,
|
|
580
573
|
}}
|
|
581
574
|
>
|
|
582
575
|
<div
|
|
@@ -606,99 +599,6 @@ function ServiceItemPB({
|
|
|
606
599
|
)}
|
|
607
600
|
|
|
608
601
|
{children}
|
|
609
|
-
{/* Bottom discount banner */}
|
|
610
|
-
{(serviceItem?.offer_text || serviceItem?.is_dp_enabled) && (
|
|
611
|
-
<div
|
|
612
|
-
className="text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[36px] pt-[50px] rounded-b-[14px] text-[14px]"
|
|
613
|
-
style={{
|
|
614
|
-
background: offerGradient,
|
|
615
|
-
opacity: isSoldOut ? 0.5 : 1,
|
|
616
|
-
zIndex: isPeru ? -1 : -2,
|
|
617
|
-
// zIndex: hasOfferText ? 2 : isPeru ? 1 : -2,
|
|
618
|
-
}}
|
|
619
|
-
>
|
|
620
|
-
<div className="flex justify-between items-center w-full">
|
|
621
|
-
<div className="flex items-center ">
|
|
622
|
-
{serviceItem?.is_dp_enabled ? (
|
|
623
|
-
<div className="flex items-center gap-[3px]">
|
|
624
|
-
{renderIcon("whiteFireIcon", "14px")}
|
|
625
|
-
<span>Servicio popular entre los usuarios</span>
|
|
626
|
-
</div>
|
|
627
|
-
) : (
|
|
628
|
-
<div className="flex items-center">
|
|
629
|
-
<LottiePlayer
|
|
630
|
-
animationData={getAnimationIcon("bombAnimation")}
|
|
631
|
-
width="18px"
|
|
632
|
-
height="18px"
|
|
633
|
-
/>
|
|
634
|
-
<div className="flex items-center mt-[2px]">
|
|
635
|
-
<span className="bold-text ml-[6px]">
|
|
636
|
-
{(serviceItem?.offer_text || "").length > 30
|
|
637
|
-
? (serviceItem?.offer_text || "").slice(0, 30) +
|
|
638
|
-
"..."
|
|
639
|
-
: serviceItem?.offer_text || ""}{" "}
|
|
640
|
-
{isLoggedIn ? null : (
|
|
641
|
-
<span
|
|
642
|
-
onClick={showLoginModal}
|
|
643
|
-
className="cursor-pointer"
|
|
644
|
-
>
|
|
645
|
-
registro
|
|
646
|
-
</span>
|
|
647
|
-
)}{" "}
|
|
648
|
-
|
|
649
|
-
</span>{" "}
|
|
650
|
-
| Termina en
|
|
651
|
-
<span
|
|
652
|
-
className="bold-text text-end"
|
|
653
|
-
ref={(node) =>
|
|
654
|
-
CommonService.startCountdown(node, 599)
|
|
655
|
-
}
|
|
656
|
-
style={{
|
|
657
|
-
fontVariantNumeric: "tabular-nums",
|
|
658
|
-
display: "inline-block",
|
|
659
|
-
}}
|
|
660
|
-
/>
|
|
661
|
-
</div>
|
|
662
|
-
</div>
|
|
663
|
-
)}
|
|
664
|
-
</div>
|
|
665
|
-
<div className="flex items-center">
|
|
666
|
-
{/* {renderIcon("personIcon", "16px")} */}
|
|
667
|
-
<LottiePlayer
|
|
668
|
-
animationData={getAnimationIcon("dotAnimation")}
|
|
669
|
-
width="12px"
|
|
670
|
-
height="12px"
|
|
671
|
-
/>
|
|
672
|
-
|
|
673
|
-
<span className="ml-[6px]">
|
|
674
|
-
<span
|
|
675
|
-
className="bold-text"
|
|
676
|
-
ref={(node) =>
|
|
677
|
-
CommonService.startViewerCount(node, viewersConfig)
|
|
678
|
-
}
|
|
679
|
-
style={{ fontVariantNumeric: "tabular-nums" }}
|
|
680
|
-
/>{" "}
|
|
681
|
-
{/* <span className="bold-text">personas</span>{" "} */}
|
|
682
|
-
<span>
|
|
683
|
-
{" "}
|
|
684
|
-
{viewersConfig?.label || " viendo"} |{" "}
|
|
685
|
-
<span className="">
|
|
686
|
-
{serviceItem?.is_dp_enabled ? null : "Quedan pocos • "}
|
|
687
|
-
<span
|
|
688
|
-
className="bold-text"
|
|
689
|
-
ref={(node) =>
|
|
690
|
-
CommonService.startComprandoCount(node, 4, 16)
|
|
691
|
-
}
|
|
692
|
-
style={{ fontVariantNumeric: "tabular-nums" }}
|
|
693
|
-
/>{" "}
|
|
694
|
-
comprando
|
|
695
|
-
</span>
|
|
696
|
-
</span>
|
|
697
|
-
</span>
|
|
698
|
-
</div>
|
|
699
|
-
</div>
|
|
700
|
-
</div>
|
|
701
|
-
)}
|
|
702
602
|
<ServiceBadges
|
|
703
603
|
showTopLabel={showTopLabel}
|
|
704
604
|
isSoldOut={isSoldOut}
|
|
@@ -305,8 +305,14 @@ function ServiceItemMobile({
|
|
|
305
305
|
>
|
|
306
306
|
<div className="flex justify-between items-center">
|
|
307
307
|
{serviceItem?.is_dp_enabled ? (
|
|
308
|
-
<div className="flex items-center">
|
|
309
|
-
{renderIcon("whiteFireIcon", "14px")}
|
|
308
|
+
<div className="flex items-center gap-[6px]">
|
|
309
|
+
{/* {renderIcon("whiteFireIcon", "14px")} */}
|
|
310
|
+
<LottiePlayer
|
|
311
|
+
animationData={serviceItem.icons.starAnimation}
|
|
312
|
+
width="14px"
|
|
313
|
+
height="14px"
|
|
314
|
+
/>
|
|
315
|
+
|
|
310
316
|
<span className="text-[#fff]">Más elegido</span>
|
|
311
317
|
</div>
|
|
312
318
|
) : (
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import LottiePlayer from "../assets/LottiePlayer";
|
|
3
|
+
import CommonService from "../utils/CommonService";
|
|
4
|
+
import { ServiceItemProps } from "../components/ServiceItem/types";
|
|
5
|
+
|
|
6
|
+
interface OfferBannerProps {
|
|
7
|
+
offerGradient: string;
|
|
8
|
+
isSoldOut: boolean;
|
|
9
|
+
serviceItem: Pick<
|
|
10
|
+
ServiceItemProps["serviceItem"],
|
|
11
|
+
"is_dp_enabled" | "offer_text"
|
|
12
|
+
>;
|
|
13
|
+
renderIcon: (name: string, size: string) => React.ReactNode;
|
|
14
|
+
isLoggedIn: any;
|
|
15
|
+
showLoginModal: any;
|
|
16
|
+
viewersConfig: ServiceItemProps["viewersConfig"];
|
|
17
|
+
getAnimationIcon: (name: string) => any;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
const OfferBanner: React.FC<OfferBannerProps> = ({
|
|
21
|
+
offerGradient,
|
|
22
|
+
isSoldOut,
|
|
23
|
+
serviceItem,
|
|
24
|
+
renderIcon,
|
|
25
|
+
isLoggedIn,
|
|
26
|
+
showLoginModal,
|
|
27
|
+
viewersConfig,
|
|
28
|
+
getAnimationIcon,
|
|
29
|
+
}) => {
|
|
30
|
+
return (
|
|
31
|
+
<div
|
|
32
|
+
className="text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[36px] pt-[50px] rounded-b-[14px] text-[14px]"
|
|
33
|
+
style={{
|
|
34
|
+
background: offerGradient,
|
|
35
|
+
opacity: isSoldOut ? 0.5 : 1,
|
|
36
|
+
zIndex: 0,
|
|
37
|
+
}}
|
|
38
|
+
>
|
|
39
|
+
<div className="flex justify-between items-center w-full">
|
|
40
|
+
<div className="flex items-center ">
|
|
41
|
+
{serviceItem?.is_dp_enabled ? (
|
|
42
|
+
<div className="flex items-center gap-[5px]">
|
|
43
|
+
{/* {renderIcon("whiteFireIcon", "14px")} */}
|
|
44
|
+
<LottiePlayer
|
|
45
|
+
animationData={getAnimationIcon("starAnimation")}
|
|
46
|
+
width="18px"
|
|
47
|
+
height="18px"
|
|
48
|
+
/>
|
|
49
|
+
{/* starAnimation */}
|
|
50
|
+
<span>Servicio popular entre los usuarios</span>
|
|
51
|
+
</div>
|
|
52
|
+
) : (
|
|
53
|
+
<div className="flex items-center">
|
|
54
|
+
<LottiePlayer
|
|
55
|
+
animationData={getAnimationIcon("bombAnimation")}
|
|
56
|
+
width="18px"
|
|
57
|
+
height="18px"
|
|
58
|
+
/>
|
|
59
|
+
<div className="flex items-center mt-[2px]">
|
|
60
|
+
<span className="bold-text ml-[6px]">
|
|
61
|
+
{(serviceItem?.offer_text || "").length > 30
|
|
62
|
+
? (serviceItem?.offer_text || "").slice(0, 30) + "..."
|
|
63
|
+
: serviceItem?.offer_text || ""}{" "}
|
|
64
|
+
{isLoggedIn ? null : (
|
|
65
|
+
<span onClick={showLoginModal} className="cursor-pointer">
|
|
66
|
+
- registro
|
|
67
|
+
</span>
|
|
68
|
+
)}{" "}
|
|
69
|
+
|
|
70
|
+
</span>{" "}
|
|
71
|
+
| Termina en
|
|
72
|
+
<span
|
|
73
|
+
className="bold-text text-end"
|
|
74
|
+
ref={(node) => CommonService.startCountdown(node, 599)}
|
|
75
|
+
style={{
|
|
76
|
+
fontVariantNumeric: "tabular-nums",
|
|
77
|
+
display: "inline-block",
|
|
78
|
+
}}
|
|
79
|
+
/>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
)}
|
|
83
|
+
</div>
|
|
84
|
+
<div className="flex items-center">
|
|
85
|
+
{/* {renderIcon("personIcon", "16px")} */}
|
|
86
|
+
<LottiePlayer
|
|
87
|
+
animationData={getAnimationIcon("dotAnimation")}
|
|
88
|
+
width="12px"
|
|
89
|
+
height="12px"
|
|
90
|
+
/>
|
|
91
|
+
|
|
92
|
+
<span className="ml-[6px]">
|
|
93
|
+
<span
|
|
94
|
+
className="bold-text"
|
|
95
|
+
ref={(node) =>
|
|
96
|
+
CommonService.startViewerCount(node, viewersConfig)
|
|
97
|
+
}
|
|
98
|
+
style={{ fontVariantNumeric: "tabular-nums" }}
|
|
99
|
+
/>{" "}
|
|
100
|
+
{/* <span className="bold-text">personas</span>{" "} */}
|
|
101
|
+
<span>
|
|
102
|
+
{" "}
|
|
103
|
+
{viewersConfig?.label || " viendo"} |{" "}
|
|
104
|
+
<span className="">
|
|
105
|
+
{serviceItem?.is_dp_enabled ? null : "Quedan pocos • "}
|
|
106
|
+
<span
|
|
107
|
+
className="bold-text"
|
|
108
|
+
ref={(node) => CommonService.startComprandoCount(node, 4, 16)}
|
|
109
|
+
style={{ fontVariantNumeric: "tabular-nums" }}
|
|
110
|
+
/>{" "}
|
|
111
|
+
comprando
|
|
112
|
+
</span>
|
|
113
|
+
</span>
|
|
114
|
+
</span>
|
|
115
|
+
</div>
|
|
116
|
+
</div>
|
|
117
|
+
</div>
|
|
118
|
+
);
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
export default OfferBanner;
|
|
@@ -242,14 +242,14 @@ function SeatSection({
|
|
|
242
242
|
{renderIcon("fireIcon", "16px")}
|
|
243
243
|
</div>
|
|
244
244
|
<div
|
|
245
|
-
className="absolute bottom-[
|
|
245
|
+
className="absolute bottom-[35px] left-1/2 -translate-x-1/2 "
|
|
246
246
|
style={{
|
|
247
247
|
animation: "pulse-zoom 2s ease-in-out infinite",
|
|
248
248
|
whiteSpace: "nowrap",
|
|
249
249
|
}}
|
|
250
250
|
>
|
|
251
251
|
<span
|
|
252
|
-
className="rounded-[100px] bg-[#ff5964] px-[6px] w-fit text-[12px] bold-text leading-[20px] text-white"
|
|
252
|
+
className="rounded-[100px] bg-[#ff5964] px-[6px] px-[2px] w-fit text-[12px] bold-text leading-[20px] text-white"
|
|
253
253
|
style={{
|
|
254
254
|
animation: "pulse-zoom 2s ease-in-out infinite",
|
|
255
255
|
whiteSpace: "nowrap",
|
|
@@ -269,60 +269,7 @@ function SeatSection({
|
|
|
269
269
|
</div>
|
|
270
270
|
</div>
|
|
271
271
|
</div>
|
|
272
|
-
{/* <div>
|
|
273
|
-
<span
|
|
274
|
-
className="flex items-center gap-[6px] text-[22px] bold-text leading-[30px] relative"
|
|
275
|
-
style={{ color: isSoldOut ? "#c0c0c0" : dpSeatColor }}
|
|
276
|
-
>
|
|
277
|
-
<div className="absolute bottom-[85%]">
|
|
278
|
-
<span
|
|
279
|
-
className="rounded-[100px] bg-[#ff5964] px-[6px] w-fit text-[12px] bold-text leading-[20px] text-white"
|
|
280
|
-
style={{
|
|
281
|
-
animation: "pulse-zoom 2s ease-in-out infinite",
|
|
282
|
-
whiteSpace: "nowrap",
|
|
283
|
-
color: dpSeatColor,
|
|
284
|
-
}}
|
|
285
|
-
>
|
|
286
|
-
Mejor precio
|
|
287
|
-
</span>
|
|
288
|
-
</div>
|
|
289
|
-
<div className="absolute -left-[20px]">
|
|
290
|
-
{renderIcon("fireIcon", "16px")}
|
|
291
|
-
</div>
|
|
292
|
-
{availableSeats <= 0
|
|
293
|
-
? CommonService.currency(0, currencySign)
|
|
294
|
-
: CommonService.discountedCurrency(lowestFare, currencySign)}
|
|
295
|
-
</span>
|
|
296
|
-
</div> */}
|
|
297
272
|
</div>
|
|
298
|
-
// <div className="flex items-center justify-between text-[13.33px]">
|
|
299
|
-
// <span className="text-[13.33px] font-normal leading-[24px] text-[#464647]">
|
|
300
|
-
// Desde
|
|
301
|
-
// </span>
|
|
302
|
-
// <div className="flex flex-col items-center gap-[2px]">
|
|
303
|
-
// <span
|
|
304
|
-
// className="rounded-[100px] bg-[#ff5964] px-[6px] w-fit text-[12px] bold-text leading-[20px] text-white"
|
|
305
|
-
// style={{
|
|
306
|
-
// animation: "pulse-zoom 2s ease-in-out infinite",
|
|
307
|
-
// whiteSpace: "nowrap",
|
|
308
|
-
// color: dpSeatColor,
|
|
309
|
-
// }}
|
|
310
|
-
// >
|
|
311
|
-
// Mejor precio
|
|
312
|
-
// </span>
|
|
313
|
-
// <span
|
|
314
|
-
// className="flex items-center gap-[6px] text-[22px] bold-text leading-[30px] relative"
|
|
315
|
-
// style={{ color: isSoldOut ? "#c0c0c0" : dpSeatColor }}
|
|
316
|
-
// >
|
|
317
|
-
// <div className="absolute -left-[20px]">
|
|
318
|
-
// {renderIcon("fireIcon", "16px")}
|
|
319
|
-
// </div>
|
|
320
|
-
// {availableSeats <= 0
|
|
321
|
-
// ? CommonService.currency(0, currencySign)
|
|
322
|
-
// : CommonService.discountedCurrency(lowestFare, currencySign)}
|
|
323
|
-
// </span>
|
|
324
|
-
// </div>
|
|
325
|
-
// </div>
|
|
326
273
|
);
|
|
327
274
|
}
|
|
328
275
|
|