kupos-ui-components-lib 9.7.3 → 9.7.4
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 +2 -2
- package/dist/components/ServiceItem/ServiceItemMobile.d.ts +1 -1
- package/dist/components/ServiceItem/ServiceItemMobile.js +2 -2
- package/dist/components/ServiceItem/mobileTypes.d.ts +1 -0
- package/dist/components/ServiceItem/types.d.ts +1 -0
- package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.js +10 -34
- package/dist/ui/FeatureServiceUI/FeatureServiceUi.js +22 -24
- package/package.json +1 -1
- package/src/components/ServiceItem/ServiceItemDesktop.tsx +2 -1
- package/src/components/ServiceItem/ServiceItemMobile.tsx +2 -1
- package/src/components/ServiceItem/mobileTypes.ts +1 -0
- package/src/components/ServiceItem/types.ts +1 -0
- package/src/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.tsx +10 -31
- package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx +26 -23
|
@@ -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, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, }: ServiceItemProps & {
|
|
3
|
+
declare function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, }: ServiceItemProps & {
|
|
4
4
|
currencySign?: string;
|
|
5
5
|
}): React.ReactElement;
|
|
6
6
|
export default ServiceItemPB;
|
|
@@ -83,7 +83,7 @@ const ANIMATION_MAP = {
|
|
|
83
83
|
kupos: usersAnimation,
|
|
84
84
|
},
|
|
85
85
|
};
|
|
86
|
-
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, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, }) {
|
|
86
|
+
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, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, }) {
|
|
87
87
|
var _a;
|
|
88
88
|
const getAnimationIcon = (icon) => {
|
|
89
89
|
var _a;
|
|
@@ -252,7 +252,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
252
252
|
},
|
|
253
253
|
];
|
|
254
254
|
const otherItems = items.filter((i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition);
|
|
255
|
-
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 })) : isNewUi ? (React.createElement(FeatureServiceUi, { serviceItem: serviceItem, showTopLabel: showTopLabel, isSoldOut: isSoldOut, getAnimationIcon: getAnimationIcon, cityOrigin: cityOrigin, cityDestination: cityDestination, renderIcon: renderIcon, viewersConfig: viewersConfig, isFeatureDropDownExpand: isFeatureDropDownExpand, ticketQuantity: ticketQuantity, onIncreaseTicketQuantity: onIncreaseTicketQuantity, onDecreaseTicketQuantity: onDecreaseTicketQuantity, onBookButtonPress:
|
|
255
|
+
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 })) : isNewUi ? (React.createElement(FeatureServiceUi, { serviceItem: serviceItem, showTopLabel: showTopLabel, isSoldOut: isSoldOut, getAnimationIcon: getAnimationIcon, cityOrigin: cityOrigin, cityDestination: cityDestination, renderIcon: renderIcon, viewersConfig: viewersConfig, isFeatureDropDownExpand: isFeatureDropDownExpand, ticketQuantity: ticketQuantity, onIncreaseTicketQuantity: onIncreaseTicketQuantity, onDecreaseTicketQuantity: onDecreaseTicketQuantity, onBookButtonPress: onRemateUiButtonClick, onToggleExpand: () => setIsFeatureDropDownExpand &&
|
|
256
256
|
setIsFeatureDropDownExpand(isFeatureDropDownExpand === serviceItem.id ||
|
|
257
257
|
isFeatureDropDownExpand === true
|
|
258
258
|
? null
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { MobileServiceItemProps } from "./mobileTypes";
|
|
3
|
-
declare function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, }: MobileServiceItemProps): React.ReactElement;
|
|
3
|
+
declare function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, }: MobileServiceItemProps): React.ReactElement;
|
|
4
4
|
export default ServiceItemMobile;
|
|
@@ -18,7 +18,7 @@ const exceptions = [
|
|
|
18
18
|
"blanco",
|
|
19
19
|
"asiento_mascota",
|
|
20
20
|
];
|
|
21
|
-
function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, }) {
|
|
21
|
+
function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, }) {
|
|
22
22
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
23
23
|
const isItemExpanded = serviceItem.id === isExpanded;
|
|
24
24
|
const isPetSeat = (Object.keys(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.pet_seat_info) || []).length > 0;
|
|
@@ -88,7 +88,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
|
|
|
88
88
|
if (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) {
|
|
89
89
|
isConexion = true;
|
|
90
90
|
}
|
|
91
|
-
return (React.createElement(React.Fragment, null, isNewUi ? (React.createElement(FeatureServiceUiMobile, { serviceItem: serviceItem, showTopLabel: showTopLabel, colors: colors, isSoldOut: isSoldOut, cityOrigin: cityOrigin, cityDestination: cityDestination, renderIcon: renderIcon, viewersConfig: viewersConfig, isFeatureDropDownExpand: isFeatureDropDownExpand, ticketQuantity: ticketQuantity, onIncreaseTicketQuantity: onIncreaseTicketQuantity, onDecreaseTicketQuantity: onDecreaseTicketQuantity, onBookButtonPress:
|
|
91
|
+
return (React.createElement(React.Fragment, null, isNewUi ? (React.createElement(FeatureServiceUiMobile, { serviceItem: serviceItem, showTopLabel: showTopLabel, colors: colors, isSoldOut: isSoldOut, cityOrigin: cityOrigin, cityDestination: cityDestination, renderIcon: renderIcon, viewersConfig: viewersConfig, isFeatureDropDownExpand: isFeatureDropDownExpand, ticketQuantity: ticketQuantity, onIncreaseTicketQuantity: onIncreaseTicketQuantity, onDecreaseTicketQuantity: onDecreaseTicketQuantity, onBookButtonPress: onRemateUiButtonClick, onToggleExpand: () => setIsFeatureDropDownExpand &&
|
|
92
92
|
setIsFeatureDropDownExpand(isFeatureDropDownExpand === serviceItem.id ||
|
|
93
93
|
isFeatureDropDownExpand === true
|
|
94
94
|
? null
|
|
@@ -21,31 +21,8 @@ const HARDCODED_OPERATORS = [
|
|
|
21
21
|
seatsAvailable: "3 disponibles",
|
|
22
22
|
},
|
|
23
23
|
];
|
|
24
|
-
const HARDCODED_COUNTDOWN = "09:55";
|
|
25
|
-
const HOW_IT_WORKS_STEPS = [
|
|
26
|
-
{
|
|
27
|
-
icon: "flexible",
|
|
28
|
-
name: "1. Salida flexible",
|
|
29
|
-
text: "Viajas en un horario entre las 07:00 y las 10:00 AM del día elegido.",
|
|
30
|
-
},
|
|
31
|
-
{
|
|
32
|
-
icon: "bus",
|
|
33
|
-
name: "2. Empresa asignada",
|
|
34
|
-
text: "Una de las empresas disponibles confirma tu viaje una vez pagado.",
|
|
35
|
-
},
|
|
36
|
-
{
|
|
37
|
-
icon: "price",
|
|
38
|
-
name: "3. Precio garantizado",
|
|
39
|
-
text: "Al seleccionar este servicio aseguras el precio reducido.",
|
|
40
|
-
},
|
|
41
|
-
{
|
|
42
|
-
icon: "ticket",
|
|
43
|
-
name: "4. ¡Listo!",
|
|
44
|
-
text: "Recibe todos los detalles de tu viaje al instante tras la compra.",
|
|
45
|
-
},
|
|
46
|
-
];
|
|
47
24
|
const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity = 1, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, }) => {
|
|
48
|
-
var _a, _b, _c, _d;
|
|
25
|
+
var _a, _b, _c, _d, _e;
|
|
49
26
|
const operators = ((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operators) === null || _a === void 0 ? void 0 : _a.length) > 0
|
|
50
27
|
? serviceItem.operators
|
|
51
28
|
: HARDCODED_OPERATORS;
|
|
@@ -61,12 +38,12 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
|
|
|
61
38
|
{
|
|
62
39
|
icon: "bus",
|
|
63
40
|
name: "2. Empresa asignada",
|
|
64
|
-
text: "Una de las empresas
|
|
41
|
+
text: "Una de las empresas confirmará tu viaje al instante tras el pago.",
|
|
65
42
|
},
|
|
66
43
|
{
|
|
67
44
|
icon: "price",
|
|
68
45
|
name: "3. Precio garantizado",
|
|
69
|
-
text: "
|
|
46
|
+
text: "Mejor precio garantizado. Sin cambios ni cancelación.",
|
|
70
47
|
},
|
|
71
48
|
{
|
|
72
49
|
icon: "ticket",
|
|
@@ -96,16 +73,15 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
|
|
|
96
73
|
showTopLabel
|
|
97
74
|
? "mt-[24px]"
|
|
98
75
|
: "mt-[20px]"}` },
|
|
99
|
-
React.createElement("div", { className: "", style: {
|
|
100
|
-
border: "1px solid #c0c0c0",
|
|
76
|
+
React.createElement("div", { className: "shadow-service", style: {
|
|
77
|
+
// border: "1px solid #c0c0c0",
|
|
101
78
|
padding: "12px",
|
|
102
79
|
borderRadius: "14px",
|
|
103
80
|
} },
|
|
104
81
|
React.createElement("div", { className: "flex flex-col items-center px-[12px] pb-[8px] text-[13.33px] gap-[8px]" },
|
|
105
82
|
React.createElement("div", null,
|
|
106
|
-
React.createElement("span",
|
|
107
|
-
|
|
108
|
-
" ",
|
|
83
|
+
React.createElement("span", { className: "flex items-center" },
|
|
84
|
+
React.createElement("img", { src: (_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _b === void 0 ? void 0 : _b.fireIcon, alt: "fire", className: "h-[14px] w-[14px] mr-[4px]" }),
|
|
109
85
|
React.createElement("span", { className: "bold-text" }, "Remate"),
|
|
110
86
|
" t\u00E9rmina en",
|
|
111
87
|
" ",
|
|
@@ -131,7 +107,7 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
|
|
|
131
107
|
React.createElement("div", { className: " text-[white]" },
|
|
132
108
|
React.createElement("div", { className: "flex flex-col gap-[10px] relative" },
|
|
133
109
|
React.createElement("div", { className: "flex items-center gap-[6px]" },
|
|
134
|
-
React.createElement("img", { src: (
|
|
110
|
+
React.createElement("img", { src: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.whiteOrigin, alt: "origin", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}` }),
|
|
135
111
|
React.createElement("span", { className: "text-[13px] bold-text" }, cityOrigin === null || cityOrigin === void 0 ? void 0 :
|
|
136
112
|
cityOrigin.label.split(",")[0],
|
|
137
113
|
React.createElement("span", { className: "mx-[6px]" }, "\u2192"), cityDestination === null || cityDestination === void 0 ? void 0 :
|
|
@@ -147,7 +123,7 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
|
|
|
147
123
|
left: "7px",
|
|
148
124
|
} }),
|
|
149
125
|
React.createElement("div", { className: "flex items-center gap-[6px]" },
|
|
150
|
-
React.createElement("img", { src: (
|
|
126
|
+
React.createElement("img", { src: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.whiteDestination, alt: "destination", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
|
|
151
127
|
React.createElement("span", { className: "text-[13px]" },
|
|
152
128
|
"23 de mayo,",
|
|
153
129
|
" ",
|
|
@@ -236,7 +212,7 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
|
|
|
236
212
|
React.createElement(LottiePlayer, { animationData: serviceItem.icons.thunderAnim, width: "18px", height: "18px" }),
|
|
237
213
|
React.createElement("span", { className: "whitespace-nowrap" }, "\u00A1Lo quiero!")),
|
|
238
214
|
React.createElement("div", { className: `flex justify-end mt-[10px] transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`, onClick: onToggleExpand },
|
|
239
|
-
React.createElement("img", { src: (
|
|
215
|
+
React.createElement("img", { src: (_e = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _e === void 0 ? void 0 : _e.downArrow, alt: "down arrow", style: {
|
|
240
216
|
width: "14px",
|
|
241
217
|
height: "8px",
|
|
242
218
|
filter: "brightness(0) invert(1)",
|
|
@@ -22,7 +22,7 @@ const HARDCODED_OPERATORS = [
|
|
|
22
22
|
},
|
|
23
23
|
];
|
|
24
24
|
const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIcon, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity = 1, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, }) => {
|
|
25
|
-
var _a, _b, _c, _d;
|
|
25
|
+
var _a, _b, _c, _d, _e;
|
|
26
26
|
const operators = ((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operators) === null || _a === void 0 ? void 0 : _a.length) > 0
|
|
27
27
|
? serviceItem.operators
|
|
28
28
|
: HARDCODED_OPERATORS;
|
|
@@ -38,12 +38,12 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
|
|
|
38
38
|
{
|
|
39
39
|
icon: "bus",
|
|
40
40
|
name: "2. Empresa asignada",
|
|
41
|
-
text: "Una de las empresas
|
|
41
|
+
text: "Una de las empresas confirmará tu viaje al instante tras el pago.",
|
|
42
42
|
},
|
|
43
43
|
{
|
|
44
44
|
icon: "price",
|
|
45
45
|
name: "3. Precio garantizado",
|
|
46
|
-
text: "
|
|
46
|
+
text: "Mejor precio garantizado. Sin cambios ni cancelación.",
|
|
47
47
|
},
|
|
48
48
|
{
|
|
49
49
|
icon: "ticket",
|
|
@@ -73,8 +73,8 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
|
|
|
73
73
|
showTopLabel
|
|
74
74
|
? "mt-[24px]"
|
|
75
75
|
: "mt-[20px]"}` },
|
|
76
|
-
React.createElement("div", { className: "", style: {
|
|
77
|
-
border: "1px solid #c0c0c0",
|
|
76
|
+
React.createElement("div", { className: "shadow-service", style: {
|
|
77
|
+
// border: "1px solid #c0c0c0",
|
|
78
78
|
padding: "14px",
|
|
79
79
|
borderRadius: "14px",
|
|
80
80
|
} },
|
|
@@ -90,28 +90,26 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
|
|
|
90
90
|
whiteSpace: "nowrap",
|
|
91
91
|
} },
|
|
92
92
|
React.createElement("span", null, "AHORRAS 60%"))),
|
|
93
|
-
React.createElement("
|
|
94
|
-
React.createElement("
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
minWidth: "40px",
|
|
105
|
-
} })))),
|
|
93
|
+
React.createElement("span", null,
|
|
94
|
+
React.createElement("img", { src: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.fireIcon, alt: "fire", className: "w-[14px] h-[14px] mb-[4px] mr-[4px]" }),
|
|
95
|
+
React.createElement("span", { className: "bold-text" }, "Remate"),
|
|
96
|
+
" t\u00E9rmina en",
|
|
97
|
+
" ",
|
|
98
|
+
React.createElement("span", { className: "bold-text text-end", ref: (node) => commonService.startCountdown(node, 599), style: {
|
|
99
|
+
fontVariantNumeric: "tabular-nums",
|
|
100
|
+
display: "inline-block",
|
|
101
|
+
color: "#FF5C60",
|
|
102
|
+
minWidth: "40px",
|
|
103
|
+
} }))),
|
|
106
104
|
React.createElement("div", { id: `service-card-${serviceItem.id}`, className: "bg-[#0C1421] text-white mx-auto relative rounded-[14px] p-[14px] text-[13.33px]" },
|
|
107
105
|
React.createElement("div", { className: "grid grid-cols-[23%_50%_27%] items-stretch" },
|
|
108
106
|
React.createElement("div", { className: "flex flex-col justify-between gap-[20px] my-[14px] pr-[22px]" },
|
|
109
107
|
React.createElement("div", { className: "flex flex-col gap-[8px]" },
|
|
110
108
|
React.createElement("div", { className: "flex items-center gap-[8px]" },
|
|
111
|
-
React.createElement("img", { src: (
|
|
109
|
+
React.createElement("img", { src: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.whiteOrigin, alt: "origin", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}` }),
|
|
112
110
|
React.createElement("span", { className: "text-[13px] bold-text" }, cityOrigin === null || cityOrigin === void 0 ? void 0 : cityOrigin.label.split(",")[0])),
|
|
113
111
|
React.createElement("div", { className: "flex items-center gap-[8px]" },
|
|
114
|
-
React.createElement("img", { src: (
|
|
112
|
+
React.createElement("img", { src: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.whiteDestination, alt: "destination", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
|
|
115
113
|
React.createElement("span", { className: "text-[13px] bold-text" }, cityDestination === null || cityDestination === void 0 ? void 0 : cityDestination.label.split(",")[0]))),
|
|
116
114
|
React.createElement("div", { className: "flex flex-col gap-[8px]" },
|
|
117
115
|
React.createElement("div", { className: "text-[12px] bold-text whitespace-nowrap" }, "Entre 07:00 AM y 10:00 AM"),
|
|
@@ -119,12 +117,12 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
|
|
|
119
117
|
React.createElement("div", { className: "flex flex-col items-start gap-[10px] text-[12px] " },
|
|
120
118
|
React.createElement("div", { className: "flex items-justify gap-[8px]" },
|
|
121
119
|
renderIcon("sheildIcon", "16px"),
|
|
122
|
-
React.createElement("span", { className: "text-[
|
|
120
|
+
React.createElement("span", { className: "text-[11px]", style: {
|
|
123
121
|
lineHeight: 1.3,
|
|
124
122
|
} }, "Empresa y hora a confirmar luego del pago.")),
|
|
125
123
|
React.createElement("div", { className: "flex items-justify gap-[8px]" },
|
|
126
124
|
renderIcon("confirmarIcon", "16px"),
|
|
127
|
-
React.createElement("span", { className: "text-[
|
|
125
|
+
React.createElement("span", { className: "text-[11px]", style: {
|
|
128
126
|
lineHeight: 1.3,
|
|
129
127
|
} }, "Tu compra est\u00E1 100% asegurada.")))),
|
|
130
128
|
React.createElement("div", { className: "min-w-0 px-[22px] flex flex-col items-center justify-between gap-[16px] py-[2px] border-r border-[#363c48] border-l border-[#363c48]" },
|
|
@@ -152,7 +150,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
|
|
|
152
150
|
, {
|
|
153
151
|
// animationData={serviceItem.icons.flexibleAnim}
|
|
154
152
|
animationData: getAnimationIcon("usersAnimation"), width: "18px", height: "18px" }),
|
|
155
|
-
React.createElement("span",
|
|
153
|
+
React.createElement("span", { className: "text-[13px]" },
|
|
156
154
|
React.createElement("span", { className: "bold-text text-white" },
|
|
157
155
|
" ",
|
|
158
156
|
React.createElement("span", { className: "bold-text", ref: (node) => commonService.startViewerCount(node, viewersConfig), style: {
|
|
@@ -212,7 +210,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
|
|
|
212
210
|
animationData: getAnimationIcon("thunderAnimation"), width: "18px", height: "18px" }),
|
|
213
211
|
React.createElement("span", { className: "whitespace-nowrap" }, "\u00A1Lo quiero!"))),
|
|
214
212
|
React.createElement("div", { className: `absolute bottom-[11px] right-[18px] cursor-pointer transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`, onClick: onToggleExpand },
|
|
215
|
-
React.createElement("img", { src: (
|
|
213
|
+
React.createElement("img", { src: (_e = serviceItem.icons) === null || _e === void 0 ? void 0 : _e.downArrow, alt: "down arrow", style: {
|
|
216
214
|
width: "14px",
|
|
217
215
|
height: "8px",
|
|
218
216
|
filter: "brightness(0) invert(1)",
|
package/package.json
CHANGED
|
@@ -132,6 +132,7 @@ function ServiceItemPB({
|
|
|
132
132
|
ticketQuantity,
|
|
133
133
|
onIncreaseTicketQuantity,
|
|
134
134
|
onDecreaseTicketQuantity,
|
|
135
|
+
onRemateUiButtonClick,
|
|
135
136
|
}: ServiceItemProps & { currencySign?: string }): React.ReactElement {
|
|
136
137
|
const getAnimationIcon = (icon: string) => {
|
|
137
138
|
const animation = ANIMATION_MAP[icon];
|
|
@@ -445,7 +446,7 @@ function ServiceItemPB({
|
|
|
445
446
|
ticketQuantity={ticketQuantity}
|
|
446
447
|
onIncreaseTicketQuantity={onIncreaseTicketQuantity}
|
|
447
448
|
onDecreaseTicketQuantity={onDecreaseTicketQuantity}
|
|
448
|
-
onBookButtonPress={
|
|
449
|
+
onBookButtonPress={onRemateUiButtonClick}
|
|
449
450
|
onToggleExpand={() =>
|
|
450
451
|
setIsFeatureDropDownExpand &&
|
|
451
452
|
setIsFeatureDropDownExpand(
|
|
@@ -54,6 +54,7 @@ function ServiceItemMobile({
|
|
|
54
54
|
cityOrigin,
|
|
55
55
|
cityDestination,
|
|
56
56
|
isNewUi,
|
|
57
|
+
onRemateUiButtonClick,
|
|
57
58
|
}: MobileServiceItemProps): React.ReactElement {
|
|
58
59
|
const isItemExpanded = serviceItem.id === isExpanded;
|
|
59
60
|
const isPetSeat = (Object.keys(serviceItem?.pet_seat_info) || []).length > 0;
|
|
@@ -177,7 +178,7 @@ function ServiceItemMobile({
|
|
|
177
178
|
ticketQuantity={ticketQuantity}
|
|
178
179
|
onIncreaseTicketQuantity={onIncreaseTicketQuantity}
|
|
179
180
|
onDecreaseTicketQuantity={onDecreaseTicketQuantity}
|
|
180
|
-
onBookButtonPress={
|
|
181
|
+
onBookButtonPress={onRemateUiButtonClick}
|
|
181
182
|
onToggleExpand={() =>
|
|
182
183
|
setIsFeatureDropDownExpand &&
|
|
183
184
|
setIsFeatureDropDownExpand(
|
|
@@ -23,31 +23,6 @@ const HARDCODED_OPERATORS = [
|
|
|
23
23
|
},
|
|
24
24
|
];
|
|
25
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
26
|
const FeatureServiceUiMobile = ({
|
|
52
27
|
serviceItem,
|
|
53
28
|
showTopLabel,
|
|
@@ -83,12 +58,12 @@ const FeatureServiceUiMobile = ({
|
|
|
83
58
|
{
|
|
84
59
|
icon: "bus",
|
|
85
60
|
name: "2. Empresa asignada",
|
|
86
|
-
text: "Una de las empresas
|
|
61
|
+
text: "Una de las empresas confirmará tu viaje al instante tras el pago.",
|
|
87
62
|
},
|
|
88
63
|
{
|
|
89
64
|
icon: "price",
|
|
90
65
|
name: "3. Precio garantizado",
|
|
91
|
-
text: "
|
|
66
|
+
text: "Mejor precio garantizado. Sin cambios ni cancelación.",
|
|
92
67
|
},
|
|
93
68
|
{
|
|
94
69
|
icon: "ticket",
|
|
@@ -125,17 +100,21 @@ const FeatureServiceUiMobile = ({
|
|
|
125
100
|
}`}
|
|
126
101
|
>
|
|
127
102
|
<div
|
|
128
|
-
className=""
|
|
103
|
+
className="shadow-service"
|
|
129
104
|
style={{
|
|
130
|
-
border: "1px solid #c0c0c0",
|
|
105
|
+
// border: "1px solid #c0c0c0",
|
|
131
106
|
padding: "12px",
|
|
132
107
|
borderRadius: "14px",
|
|
133
108
|
}}
|
|
134
109
|
>
|
|
135
110
|
<div className="flex flex-col items-center px-[12px] pb-[8px] text-[13.33px] gap-[8px]">
|
|
136
111
|
<div>
|
|
137
|
-
<span>
|
|
138
|
-
|
|
112
|
+
<span className="flex items-center">
|
|
113
|
+
<img
|
|
114
|
+
src={serviceItem?.icons?.fireIcon}
|
|
115
|
+
alt="fire"
|
|
116
|
+
className="h-[14px] w-[14px] mr-[4px]"
|
|
117
|
+
/>
|
|
139
118
|
<span className="bold-text">Remate</span> términa en{" "}
|
|
140
119
|
<span
|
|
141
120
|
className="bold-text text-end"
|
|
@@ -58,12 +58,12 @@ const FeatureServiceUi = ({
|
|
|
58
58
|
{
|
|
59
59
|
icon: "bus",
|
|
60
60
|
name: "2. Empresa asignada",
|
|
61
|
-
text: "Una de las empresas
|
|
61
|
+
text: "Una de las empresas confirmará tu viaje al instante tras el pago.",
|
|
62
62
|
},
|
|
63
63
|
{
|
|
64
64
|
icon: "price",
|
|
65
65
|
name: "3. Precio garantizado",
|
|
66
|
-
text: "
|
|
66
|
+
text: "Mejor precio garantizado. Sin cambios ni cancelación.",
|
|
67
67
|
},
|
|
68
68
|
{
|
|
69
69
|
icon: "ticket",
|
|
@@ -100,9 +100,9 @@ const FeatureServiceUi = ({
|
|
|
100
100
|
}`}
|
|
101
101
|
>
|
|
102
102
|
<div
|
|
103
|
-
className=""
|
|
103
|
+
className="shadow-service"
|
|
104
104
|
style={{
|
|
105
|
-
border: "1px solid #c0c0c0",
|
|
105
|
+
// border: "1px solid #c0c0c0",
|
|
106
106
|
padding: "14px",
|
|
107
107
|
borderRadius: "14px",
|
|
108
108
|
}}
|
|
@@ -124,22 +124,25 @@ const FeatureServiceUi = ({
|
|
|
124
124
|
<span>AHORRAS 60%</span>
|
|
125
125
|
</div>
|
|
126
126
|
</div>
|
|
127
|
-
<
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
127
|
+
<span>
|
|
128
|
+
{/* {renderIcon("fireIcon", "14px")}{" "} */}
|
|
129
|
+
<img
|
|
130
|
+
src={serviceItem.icons?.fireIcon}
|
|
131
|
+
alt="fire"
|
|
132
|
+
className="w-[14px] h-[14px] mb-[4px] mr-[4px]"
|
|
133
|
+
/>
|
|
134
|
+
<span className="bold-text">Remate</span> términa en{" "}
|
|
135
|
+
<span
|
|
136
|
+
className="bold-text text-end"
|
|
137
|
+
ref={(node) => commonService.startCountdown(node, 599)}
|
|
138
|
+
style={{
|
|
139
|
+
fontVariantNumeric: "tabular-nums",
|
|
140
|
+
display: "inline-block",
|
|
141
|
+
color: "#FF5C60",
|
|
142
|
+
minWidth: "40px",
|
|
143
|
+
}}
|
|
144
|
+
/>
|
|
145
|
+
</span>
|
|
143
146
|
</div>
|
|
144
147
|
<div
|
|
145
148
|
id={`service-card-${serviceItem.id}`}
|
|
@@ -188,7 +191,7 @@ const FeatureServiceUi = ({
|
|
|
188
191
|
{renderIcon("sheildIcon", "16px")}
|
|
189
192
|
|
|
190
193
|
<span
|
|
191
|
-
className="text-[
|
|
194
|
+
className="text-[11px]"
|
|
192
195
|
style={{
|
|
193
196
|
lineHeight: 1.3,
|
|
194
197
|
}}
|
|
@@ -200,7 +203,7 @@ const FeatureServiceUi = ({
|
|
|
200
203
|
{renderIcon("confirmarIcon", "16px")}
|
|
201
204
|
|
|
202
205
|
<span
|
|
203
|
-
className="text-[
|
|
206
|
+
className="text-[11px]"
|
|
204
207
|
style={{
|
|
205
208
|
lineHeight: 1.3,
|
|
206
209
|
}}
|
|
@@ -269,7 +272,7 @@ const FeatureServiceUi = ({
|
|
|
269
272
|
width="18px"
|
|
270
273
|
height="18px"
|
|
271
274
|
/>
|
|
272
|
-
<span>
|
|
275
|
+
<span className="text-[13px]">
|
|
273
276
|
<span className="bold-text text-white">
|
|
274
277
|
{" "}
|
|
275
278
|
<span
|