kupos-ui-components-lib 9.7.2 → 9.7.3
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/styles.css
CHANGED
|
@@ -174,12 +174,18 @@
|
|
|
174
174
|
.m-\[auto\] {
|
|
175
175
|
margin: auto;
|
|
176
176
|
}
|
|
177
|
+
.mx-\[6px\] {
|
|
178
|
+
margin-inline: 6px;
|
|
179
|
+
}
|
|
177
180
|
.mx-\[10px\] {
|
|
178
181
|
margin-inline: 10px;
|
|
179
182
|
}
|
|
180
183
|
.mx-auto {
|
|
181
184
|
margin-inline: auto;
|
|
182
185
|
}
|
|
186
|
+
.my-\[8px\] {
|
|
187
|
+
margin-block: 8px;
|
|
188
|
+
}
|
|
183
189
|
.my-\[14px\] {
|
|
184
190
|
margin-block: 14px;
|
|
185
191
|
}
|
|
@@ -587,9 +593,6 @@
|
|
|
587
593
|
.gap-\[2px\] {
|
|
588
594
|
gap: 2px;
|
|
589
595
|
}
|
|
590
|
-
.gap-\[3px\] {
|
|
591
|
-
gap: 3px;
|
|
592
|
-
}
|
|
593
596
|
.gap-\[3rem\] {
|
|
594
597
|
gap: 3rem;
|
|
595
598
|
}
|
|
@@ -996,9 +999,6 @@
|
|
|
996
999
|
.text-\[15px\] {
|
|
997
1000
|
font-size: 15px;
|
|
998
1001
|
}
|
|
999
|
-
.text-\[16px\] {
|
|
1000
|
-
font-size: 16px;
|
|
1001
|
-
}
|
|
1002
1002
|
.text-\[17\.33px\] {
|
|
1003
1003
|
font-size: 17.33px;
|
|
1004
1004
|
}
|
|
@@ -101,95 +101,86 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
|
|
|
101
101
|
padding: "12px",
|
|
102
102
|
borderRadius: "14px",
|
|
103
103
|
} },
|
|
104
|
+
React.createElement("div", { className: "flex flex-col items-center px-[12px] pb-[8px] text-[13.33px] gap-[8px]" },
|
|
105
|
+
React.createElement("div", null,
|
|
106
|
+
React.createElement("span", null,
|
|
107
|
+
renderIcon("fireIcon", "14px"),
|
|
108
|
+
" ",
|
|
109
|
+
React.createElement("span", { className: "bold-text" }, "Remate"),
|
|
110
|
+
" t\u00E9rmina en",
|
|
111
|
+
" ",
|
|
112
|
+
React.createElement("span", { className: "bold-text text-end", ref: (node) => commonService.startCountdown(node, 599), style: {
|
|
113
|
+
fontVariantNumeric: "tabular-nums",
|
|
114
|
+
display: "inline-block",
|
|
115
|
+
color: "#FF5C60",
|
|
116
|
+
minWidth: "40px",
|
|
117
|
+
} }))),
|
|
118
|
+
React.createElement("div", { className: "flex items-center gap-[10px]" },
|
|
119
|
+
React.createElement("span", null, "Salida flexible"),
|
|
120
|
+
React.createElement("div", { className: "bold-text font-[9px]", style: {
|
|
121
|
+
backgroundColor: "#FF5C60",
|
|
122
|
+
padding: "1px 8px",
|
|
123
|
+
borderRadius: "4px",
|
|
124
|
+
color: "#fff",
|
|
125
|
+
animation: "pulse-zoom 2s ease-in-out infinite",
|
|
126
|
+
whiteSpace: "nowrap",
|
|
127
|
+
} },
|
|
128
|
+
React.createElement("span", null, "AHORRAS 60%")))),
|
|
104
129
|
React.createElement("div", { id: `service-card-${serviceItem.id}`, className: "bg-[#0C1421] text-white mx-auto relative rounded-[14px] p-[14px] text-[13.33px]" },
|
|
105
130
|
React.createElement("div", { className: "flex flex-col gap-[10px]" },
|
|
106
|
-
React.createElement("div", { className: "
|
|
107
|
-
React.createElement("div", { className: "flex flex-col gap-[
|
|
108
|
-
React.createElement("div", { className: "flex items-center gap-[
|
|
131
|
+
React.createElement("div", { className: " text-[white]" },
|
|
132
|
+
React.createElement("div", { className: "flex flex-col gap-[10px] relative" },
|
|
133
|
+
React.createElement("div", { className: "flex items-center gap-[6px]" },
|
|
109
134
|
React.createElement("img", { src: (_b = serviceItem.icons) === null || _b === void 0 ? void 0 : _b.whiteOrigin, alt: "origin", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}` }),
|
|
110
|
-
React.createElement("span", { className: "text-[13px] bold-text" }, cityOrigin === null || cityOrigin === void 0 ? void 0 :
|
|
111
|
-
|
|
135
|
+
React.createElement("span", { className: "text-[13px] bold-text" }, cityOrigin === null || cityOrigin === void 0 ? void 0 :
|
|
136
|
+
cityOrigin.label.split(",")[0],
|
|
137
|
+
React.createElement("span", { className: "mx-[6px]" }, "\u2192"), cityDestination === null || cityDestination === void 0 ? void 0 :
|
|
138
|
+
cityDestination.label.split(",")[0])),
|
|
139
|
+
React.createElement("div", { style: {
|
|
140
|
+
width: "1px",
|
|
141
|
+
flex: 1,
|
|
142
|
+
backgroundColor: "#fff",
|
|
143
|
+
margin: "3px 0",
|
|
144
|
+
minHeight: "8px",
|
|
145
|
+
position: "absolute",
|
|
146
|
+
top: "13px",
|
|
147
|
+
left: "7px",
|
|
148
|
+
} }),
|
|
149
|
+
React.createElement("div", { className: "flex items-center gap-[6px]" },
|
|
112
150
|
React.createElement("img", { src: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.whiteDestination, alt: "destination", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
|
|
113
|
-
React.createElement("span", { className: "text-[13px]
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
whiteSpace: "nowrap",
|
|
119
|
-
} }, "60% OFF"),
|
|
120
|
-
React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative", style: { position: "relative" } },
|
|
121
|
-
"$10.000",
|
|
122
|
-
React.createElement("span", { style: {
|
|
123
|
-
position: "absolute",
|
|
124
|
-
left: "-2px",
|
|
125
|
-
top: "50%",
|
|
126
|
-
width: "calc(100% + 4px)",
|
|
127
|
-
height: "1px",
|
|
128
|
-
backgroundColor: "#FF5C60",
|
|
129
|
-
transform: "rotate(-10deg)",
|
|
130
|
-
transformOrigin: "center",
|
|
131
|
-
} })),
|
|
132
|
-
React.createElement("span", { className: "text-white bold-text text-[22px] leading-none" }, `$${(4000 * ticketQuantity).toLocaleString()}`)))),
|
|
151
|
+
React.createElement("span", { className: "text-[13px]" },
|
|
152
|
+
"23 de mayo,",
|
|
153
|
+
" ",
|
|
154
|
+
React.createElement("span", { className: "bold-text" }, "Entre 07:00 AM y 10:00 AM"))))),
|
|
155
|
+
React.createElement("div", { className: "border-t border-[#363c48] my-[8px]" }),
|
|
133
156
|
React.createElement("div", null,
|
|
134
|
-
React.createElement("
|
|
135
|
-
|
|
136
|
-
React.createElement("span", { className: "h-[20px] flex items-center justify-center mx-[10px]" }, "\u2022"),
|
|
137
|
-
React.createElement("span", null, "07:00 AM - 10:00 AM")),
|
|
138
|
-
React.createElement("div", { style: {
|
|
157
|
+
React.createElement("span", { className: "text-[15px] bold-text text-[white] flex items-center justify-center mb-[10px]" }, "3 operadores compitiendo por tu compra"),
|
|
158
|
+
React.createElement("div", { className: "flex gap-[8px] text-[white]" }, operators.map((op, idx) => (React.createElement("div", { key: idx, className: "flex min-w-0 flex-col items-center justify-center gap-[8px] rounded-[8px]", style: {
|
|
139
159
|
// height: "80px",
|
|
140
160
|
border: "1px solid #363c48",
|
|
141
161
|
backgroundColor: "#1a202e",
|
|
142
162
|
padding: "14px 10px",
|
|
143
|
-
borderRadius: "14px",
|
|
144
|
-
marginTop: "14px",
|
|
145
163
|
} },
|
|
146
|
-
React.createElement("
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
React.createElement("
|
|
161
|
-
renderIcon("sheildIcon", "14px"),
|
|
162
|
-
React.createElement("span", { className: "text-[white]" }, "Tu asiento confirmado al instante.")))),
|
|
163
|
-
React.createElement("div", null,
|
|
164
|
-
React.createElement("div", { className: "mt-[4px] flex flex-col items-center gap-[8px]" },
|
|
165
|
-
React.createElement("span", { className: "text-[12px] text-[white]" }, "\u00BFCu\u00E1ntos pasajes quieres?"),
|
|
166
|
-
React.createElement("div", { className: "flex w-full items-center justify-between", style: {
|
|
167
|
-
border: "1px solid #363c48",
|
|
168
|
-
backgroundColor: "#1a202e",
|
|
169
|
-
padding: "6px 14px",
|
|
170
|
-
borderRadius: "14px",
|
|
171
|
-
} },
|
|
172
|
-
React.createElement("button", { type: "button", "aria-label": "Disminuir pasajes", disabled: !canDecreaseTicketQuantity, onClick: () => onDecreaseTicketQuantity === null || onDecreaseTicketQuantity === void 0 ? void 0 : onDecreaseTicketQuantity(serviceItem), className: `flex h-[34px] w-[34px] items-center justify-center rounded-full border-none text-[25px] leading-none text-[white] ${canDecreaseTicketQuantity
|
|
173
|
-
? "cursor-pointer bg-[#2d374d]"
|
|
174
|
-
: "cursor-not-allowed bg-[#222b3d] opacity-50"}` }, "-"),
|
|
175
|
-
React.createElement("span", { className: "bold-text text-[20px] text-[white]" }, ticketQuantity),
|
|
176
|
-
React.createElement("button", { type: "button", "aria-label": "Aumentar pasajes", onClick: () => onIncreaseTicketQuantity === null || onIncreaseTicketQuantity === void 0 ? void 0 : onIncreaseTicketQuantity(serviceItem), className: "flex h-[34px] w-[34px] cursor-pointer items-center justify-center rounded-full border-none bg-[#2d374d] text-[25px] leading-none text-[white]" }, "+")),
|
|
177
|
-
React.createElement("button", { type: "button", onClick: onBookButtonPress, className: "flex items-center gap-[6px] px-[20px] py-[10px] rounded-[16px] text-[white] bold-text text-[13px] mt-[4px] justify-center border-none cursor-pointer", style: {
|
|
178
|
-
backgroundColor: "#FF5C60",
|
|
179
|
-
animation: "pulse-zoom 2s ease-in-out infinite",
|
|
180
|
-
whiteSpace: "nowrap",
|
|
181
|
-
width: "100%",
|
|
182
|
-
} },
|
|
183
|
-
React.createElement(LottiePlayer, { animationData: serviceItem.icons.thunderAnim, width: "18px", height: "18px" }),
|
|
184
|
-
React.createElement("span", { className: "whitespace-nowrap" }, "\u00A1Lo quiero!")))),
|
|
185
|
-
React.createElement("div", { className: "flex justify-between items-center" },
|
|
186
|
-
React.createElement("div", { className: "flex items-center" },
|
|
187
|
-
React.createElement(LottiePlayer, { animationData: serviceItem.icons.dotAnimation, width: "12px", height: "12px" }),
|
|
188
|
-
React.createElement("span", { className: "ml-[5px]" },
|
|
164
|
+
React.createElement("img", { src: serviceItem.operator_details[0], alt: op.name, className: `h-[24px] max-w-full object-contain ${isSoldOut ? "grayscale" : ""}` }),
|
|
165
|
+
React.createElement("span", { className: "text-[11px] truncate max-w-full text-center" }, serviceItem.operator_details[2]),
|
|
166
|
+
React.createElement("div", { className: "bg-[#FF8F45] text-[12px] font-bold px-[10px] py-[4px] rounded-[4px] bold-text whitespace-nowrap" },
|
|
167
|
+
React.createElement("span", null, op === null || op === void 0 ? void 0 : op.time)),
|
|
168
|
+
React.createElement("span", { className: "text-[10px] mt-[6px]" }, op === null || op === void 0 ? void 0 : op.seatsAvailable))))),
|
|
169
|
+
React.createElement("div", { className: "flex w-full items-center justify-center gap-[6px] text-[12px] mt-[12px]", style: {
|
|
170
|
+
border: "1px solid #363c48",
|
|
171
|
+
backgroundColor: "#1a202e",
|
|
172
|
+
padding: "4px 14px",
|
|
173
|
+
borderRadius: "24px",
|
|
174
|
+
} },
|
|
175
|
+
React.createElement(LottiePlayer, { animationData: serviceItem.icons.personsAnim,
|
|
176
|
+
// animationData={getAnimationIcon("usersAnimation")}
|
|
177
|
+
width: "18px", height: "18px" }),
|
|
178
|
+
React.createElement("span", null,
|
|
189
179
|
React.createElement("span", { className: "bold-text text-[white]" },
|
|
190
180
|
" ",
|
|
191
181
|
React.createElement("span", { className: "bold-text", ref: (node) => commonService.startViewerCount(node, viewersConfig), style: {
|
|
192
182
|
fontVariantNumeric: "tabular-nums",
|
|
183
|
+
color: "#FF5C60",
|
|
193
184
|
} }),
|
|
194
185
|
" "),
|
|
195
186
|
" ",
|
|
@@ -198,7 +189,53 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
|
|
|
198
189
|
React.createElement("span", { className: "bold-text text-[white]", ref: (node) => commonService.startComprandoCount(node, 4, 16), style: { fontVariantNumeric: "tabular-nums" } }),
|
|
199
190
|
" ",
|
|
200
191
|
React.createElement("span", { className: "text-[white]" }, "han comprado"))),
|
|
201
|
-
React.createElement("div", { className:
|
|
192
|
+
React.createElement("div", { className: "mt-[10px] flex flex-col items-center gap-[8px]" },
|
|
193
|
+
React.createElement("span", { className: "text-[12px] text-[white]" }, "\u00BFCu\u00E1ntos pasajes quieres?"),
|
|
194
|
+
React.createElement("div", { className: "flex w-[50%] items-center justify-between", style: {
|
|
195
|
+
border: "1px solid #363c48",
|
|
196
|
+
backgroundColor: "#1a202e",
|
|
197
|
+
padding: "6px 14px",
|
|
198
|
+
borderRadius: "14px",
|
|
199
|
+
} },
|
|
200
|
+
React.createElement("button", { type: "button", "aria-label": "Disminuir pasajes", disabled: !canDecreaseTicketQuantity, onClick: () => onDecreaseTicketQuantity === null || onDecreaseTicketQuantity === void 0 ? void 0 : onDecreaseTicketQuantity(serviceItem), className: `flex h-[34px] w-[34px] items-center justify-center rounded-full border-none text-[25px] leading-none text-[white] ${canDecreaseTicketQuantity
|
|
201
|
+
? "cursor-pointer bg-[#2d374d]"
|
|
202
|
+
: "cursor-not-allowed bg-[#222b3d] opacity-50"}` }, "-"),
|
|
203
|
+
React.createElement("span", { className: "bold-text text-[20px] text-white" }, ticketQuantity),
|
|
204
|
+
React.createElement("button", { type: "button", "aria-label": "Aumentar pasajes", onClick: () => onIncreaseTicketQuantity === null || onIncreaseTicketQuantity === void 0 ? void 0 : onIncreaseTicketQuantity(serviceItem), className: "flex h-[34px] w-[34px] cursor-pointer items-center justify-center rounded-full border-none bg-[#2d374d] text-[25px] leading-none text-[white]" }, "+"))),
|
|
205
|
+
React.createElement("div", { className: "mt-[10px] flex justify-between items-center rounded-[14px]", style: {
|
|
206
|
+
// height: "80px",
|
|
207
|
+
border: "1px solid #363c48",
|
|
208
|
+
backgroundColor: "#1a202e",
|
|
209
|
+
padding: "14px 10px",
|
|
210
|
+
} },
|
|
211
|
+
React.createElement("div", { className: "flex flex-col" },
|
|
212
|
+
React.createElement("span", { className: "text-[20px] font-normal leading-[20px] text-[#9f9f9f] relative", style: { position: "relative" } },
|
|
213
|
+
"$10.000",
|
|
214
|
+
React.createElement("span", { style: {
|
|
215
|
+
position: "absolute",
|
|
216
|
+
left: "-2px",
|
|
217
|
+
top: "50%",
|
|
218
|
+
width: "calc(80% + 4px)",
|
|
219
|
+
height: "1px",
|
|
220
|
+
backgroundColor: "#FF5C60",
|
|
221
|
+
transform: "rotate(-10deg)",
|
|
222
|
+
transformOrigin: "center",
|
|
223
|
+
} })),
|
|
224
|
+
React.createElement("span", { className: "text-[white] bold-text text-[28px] leading-none mt-[4px]" }, `$${(4000 * ticketQuantity).toLocaleString()}`)),
|
|
225
|
+
React.createElement("div", null,
|
|
226
|
+
React.createElement("span", { className: "text-[#FF8F45] bold-text text-[26px] leading-tight", style: {
|
|
227
|
+
animation: "pulse-zoom 2s ease-in-out infinite",
|
|
228
|
+
whiteSpace: "nowrap",
|
|
229
|
+
} }, "60% OFF"))),
|
|
230
|
+
React.createElement("button", { type: "button", onClick: onBookButtonPress, className: "flex items-center gap-[6px] px-[20px] py-[10px] rounded-[16px] text-[white] bold-text text-[13px] mt-[10px] justify-center border-none cursor-pointer", style: {
|
|
231
|
+
backgroundColor: "#FF5C60",
|
|
232
|
+
animation: "pulse-zoom 2s ease-in-out infinite",
|
|
233
|
+
whiteSpace: "nowrap",
|
|
234
|
+
width: "100%",
|
|
235
|
+
} },
|
|
236
|
+
React.createElement(LottiePlayer, { animationData: serviceItem.icons.thunderAnim, width: "18px", height: "18px" }),
|
|
237
|
+
React.createElement("span", { className: "whitespace-nowrap" }, "\u00A1Lo quiero!")),
|
|
238
|
+
React.createElement("div", { className: `flex justify-end mt-[10px] transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`, onClick: onToggleExpand },
|
|
202
239
|
React.createElement("img", { src: (_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _d === void 0 ? void 0 : _d.downArrow, alt: "down arrow", style: {
|
|
203
240
|
width: "14px",
|
|
204
241
|
height: "8px",
|
package/package.json
CHANGED
|
@@ -132,14 +132,48 @@ const FeatureServiceUiMobile = ({
|
|
|
132
132
|
borderRadius: "14px",
|
|
133
133
|
}}
|
|
134
134
|
>
|
|
135
|
+
<div className="flex flex-col items-center px-[12px] pb-[8px] text-[13.33px] gap-[8px]">
|
|
136
|
+
<div>
|
|
137
|
+
<span>
|
|
138
|
+
{renderIcon("fireIcon", "14px")}{" "}
|
|
139
|
+
<span className="bold-text">Remate</span> términa en{" "}
|
|
140
|
+
<span
|
|
141
|
+
className="bold-text text-end"
|
|
142
|
+
ref={(node) => commonService.startCountdown(node, 599)}
|
|
143
|
+
style={{
|
|
144
|
+
fontVariantNumeric: "tabular-nums",
|
|
145
|
+
display: "inline-block",
|
|
146
|
+
color: "#FF5C60",
|
|
147
|
+
minWidth: "40px",
|
|
148
|
+
}}
|
|
149
|
+
/>
|
|
150
|
+
</span>
|
|
151
|
+
</div>
|
|
152
|
+
<div className="flex items-center gap-[10px]">
|
|
153
|
+
<span>Salida flexible</span>
|
|
154
|
+
<div
|
|
155
|
+
className="bold-text font-[9px]"
|
|
156
|
+
style={{
|
|
157
|
+
backgroundColor: "#FF5C60",
|
|
158
|
+
padding: "1px 8px",
|
|
159
|
+
borderRadius: "4px",
|
|
160
|
+
color: "#fff",
|
|
161
|
+
animation: "pulse-zoom 2s ease-in-out infinite",
|
|
162
|
+
whiteSpace: "nowrap",
|
|
163
|
+
}}
|
|
164
|
+
>
|
|
165
|
+
<span>AHORRAS 60%</span>
|
|
166
|
+
</div>
|
|
167
|
+
</div>
|
|
168
|
+
</div>
|
|
135
169
|
<div
|
|
136
170
|
id={`service-card-${serviceItem.id}`}
|
|
137
171
|
className="bg-[#0C1421] text-white mx-auto relative rounded-[14px] p-[14px] text-[13.33px]"
|
|
138
172
|
>
|
|
139
173
|
<div className="flex flex-col gap-[10px]">
|
|
140
|
-
<div className="
|
|
141
|
-
<div className="flex flex-col gap-[
|
|
142
|
-
<div className="flex items-center gap-[
|
|
174
|
+
<div className=" text-[white]">
|
|
175
|
+
<div className="flex flex-col gap-[10px] relative">
|
|
176
|
+
<div className="flex items-center gap-[6px]">
|
|
143
177
|
<img
|
|
144
178
|
src={serviceItem.icons?.whiteOrigin}
|
|
145
179
|
alt="origin"
|
|
@@ -149,9 +183,55 @@ const FeatureServiceUiMobile = ({
|
|
|
149
183
|
/>
|
|
150
184
|
<span className="text-[13px] bold-text">
|
|
151
185
|
{cityOrigin?.label.split(",")[0]}
|
|
186
|
+
<span className="mx-[6px]">→</span>
|
|
187
|
+
{cityDestination?.label.split(",")[0]}
|
|
152
188
|
</span>
|
|
153
189
|
</div>
|
|
154
|
-
<div
|
|
190
|
+
<div
|
|
191
|
+
style={{
|
|
192
|
+
width: "1px",
|
|
193
|
+
flex: 1,
|
|
194
|
+
backgroundColor: "#fff",
|
|
195
|
+
margin: "3px 0",
|
|
196
|
+
minHeight: "8px",
|
|
197
|
+
position: "absolute",
|
|
198
|
+
top: "13px",
|
|
199
|
+
left: "7px",
|
|
200
|
+
}}
|
|
201
|
+
/>
|
|
202
|
+
<div className="flex items-center gap-[6px]">
|
|
203
|
+
<img
|
|
204
|
+
src={serviceItem.icons?.whiteDestination}
|
|
205
|
+
alt="destination"
|
|
206
|
+
className={`w-[14px] h-[14px] shrink-0 ${
|
|
207
|
+
isSoldOut ? "grayscale" : ""
|
|
208
|
+
}`}
|
|
209
|
+
style={{ opacity: isSoldOut ? 0.5 : 1 }}
|
|
210
|
+
/>
|
|
211
|
+
<span className="text-[13px]">
|
|
212
|
+
23 de mayo,{" "}
|
|
213
|
+
<span className="bold-text">Entre 07:00 AM y 10:00 AM</span>
|
|
214
|
+
</span>
|
|
215
|
+
</div>
|
|
216
|
+
</div>
|
|
217
|
+
{/* <div className="flex gap-[8px]">
|
|
218
|
+
<div className="flex flex-col items-center">
|
|
219
|
+
<img
|
|
220
|
+
src={serviceItem.icons?.whiteOrigin}
|
|
221
|
+
alt="origin"
|
|
222
|
+
className={`w-[14px] h-[14px] shrink-0 ${
|
|
223
|
+
isSoldOut ? "grayscale" : ""
|
|
224
|
+
}`}
|
|
225
|
+
/>
|
|
226
|
+
<div
|
|
227
|
+
style={{
|
|
228
|
+
width: "1px",
|
|
229
|
+
flex: 1,
|
|
230
|
+
backgroundColor: "#fff",
|
|
231
|
+
margin: "3px 0",
|
|
232
|
+
minHeight: "8px",
|
|
233
|
+
}}
|
|
234
|
+
/>
|
|
155
235
|
<img
|
|
156
236
|
src={serviceItem.icons?.whiteDestination}
|
|
157
237
|
alt="destination"
|
|
@@ -160,25 +240,152 @@ const FeatureServiceUiMobile = ({
|
|
|
160
240
|
}`}
|
|
161
241
|
style={{ opacity: isSoldOut ? 0.5 : 1 }}
|
|
162
242
|
/>
|
|
243
|
+
</div>
|
|
244
|
+
<div className="flex flex-col gap-[8px]">
|
|
163
245
|
<span className="text-[13px] bold-text">
|
|
246
|
+
{cityOrigin?.label.split(",")[0]}
|
|
247
|
+
<span className="mx-[6px]">→</span>
|
|
164
248
|
{cityDestination?.label.split(",")[0]}
|
|
165
249
|
</span>
|
|
250
|
+
<span className="text-[13px]">
|
|
251
|
+
23 de mayo,{" "}
|
|
252
|
+
<span className="bold-text">Entre 07:00 AM y 10:00 AM</span>
|
|
253
|
+
</span>
|
|
166
254
|
</div>
|
|
167
|
-
</div>
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
255
|
+
</div> */}
|
|
256
|
+
</div>
|
|
257
|
+
|
|
258
|
+
<div className="border-t border-[#363c48] my-[8px]" />
|
|
259
|
+
|
|
260
|
+
<div>
|
|
261
|
+
<span className="text-[15px] bold-text text-[white] flex items-center justify-center mb-[10px]">
|
|
262
|
+
3 operadores compitiendo por tu compra
|
|
263
|
+
</span>
|
|
264
|
+
<div className="flex gap-[8px] text-[white]">
|
|
265
|
+
{operators.map((op, idx) => (
|
|
266
|
+
<div
|
|
267
|
+
key={idx}
|
|
268
|
+
className="flex min-w-0 flex-col items-center justify-center gap-[8px] rounded-[8px]"
|
|
172
269
|
style={{
|
|
173
|
-
|
|
174
|
-
|
|
270
|
+
// height: "80px",
|
|
271
|
+
border: "1px solid #363c48",
|
|
272
|
+
backgroundColor: "#1a202e",
|
|
273
|
+
padding: "14px 10px",
|
|
175
274
|
}}
|
|
176
275
|
>
|
|
177
|
-
|
|
276
|
+
<img
|
|
277
|
+
src={serviceItem.operator_details[0]}
|
|
278
|
+
alt={op.name}
|
|
279
|
+
className={`h-[24px] max-w-full object-contain ${
|
|
280
|
+
isSoldOut ? "grayscale" : ""
|
|
281
|
+
}`}
|
|
282
|
+
/>
|
|
283
|
+
<span className="text-[11px] truncate max-w-full text-center">
|
|
284
|
+
{serviceItem.operator_details[2]}
|
|
285
|
+
</span>
|
|
286
|
+
<div className="bg-[#FF8F45] text-[12px] font-bold px-[10px] py-[4px] rounded-[4px] bold-text whitespace-nowrap">
|
|
287
|
+
<span>{op?.time}</span>
|
|
288
|
+
</div>
|
|
289
|
+
<span className="text-[10px] mt-[6px]">
|
|
290
|
+
{op?.seatsAvailable}
|
|
291
|
+
</span>
|
|
292
|
+
</div>
|
|
293
|
+
))}
|
|
294
|
+
</div>
|
|
295
|
+
|
|
296
|
+
<div
|
|
297
|
+
className="flex w-full items-center justify-center gap-[6px] text-[12px] mt-[12px]"
|
|
298
|
+
style={{
|
|
299
|
+
border: "1px solid #363c48",
|
|
300
|
+
backgroundColor: "#1a202e",
|
|
301
|
+
padding: "4px 14px",
|
|
302
|
+
borderRadius: "24px",
|
|
303
|
+
}}
|
|
304
|
+
>
|
|
305
|
+
<LottiePlayer
|
|
306
|
+
animationData={serviceItem.icons.personsAnim}
|
|
307
|
+
// animationData={getAnimationIcon("usersAnimation")}
|
|
308
|
+
width="18px"
|
|
309
|
+
height="18px"
|
|
310
|
+
/>
|
|
311
|
+
<span>
|
|
312
|
+
<span className="bold-text text-[white]">
|
|
313
|
+
{" "}
|
|
314
|
+
<span
|
|
315
|
+
className="bold-text"
|
|
316
|
+
ref={(node) =>
|
|
317
|
+
commonService.startViewerCount(node, viewersConfig)
|
|
318
|
+
}
|
|
319
|
+
style={{
|
|
320
|
+
fontVariantNumeric: "tabular-nums",
|
|
321
|
+
color: "#FF5C60",
|
|
322
|
+
}}
|
|
323
|
+
/>{" "}
|
|
324
|
+
</span>{" "}
|
|
325
|
+
<span className="text-[white]">viendo |</span>{" "}
|
|
326
|
+
<span
|
|
327
|
+
className="bold-text text-[white]"
|
|
328
|
+
ref={(node) =>
|
|
329
|
+
commonService.startComprandoCount(node, 4, 16)
|
|
330
|
+
}
|
|
331
|
+
style={{ fontVariantNumeric: "tabular-nums" }}
|
|
332
|
+
/>{" "}
|
|
333
|
+
<span className="text-[white]">han comprado</span>
|
|
334
|
+
</span>
|
|
335
|
+
</div>
|
|
336
|
+
|
|
337
|
+
<div className="mt-[10px] flex flex-col items-center gap-[8px]">
|
|
338
|
+
<span className="text-[12px] text-[white]">
|
|
339
|
+
¿Cuántos pasajes quieres?
|
|
340
|
+
</span>
|
|
341
|
+
<div
|
|
342
|
+
className="flex w-[50%] items-center justify-between"
|
|
343
|
+
style={{
|
|
344
|
+
border: "1px solid #363c48",
|
|
345
|
+
backgroundColor: "#1a202e",
|
|
346
|
+
padding: "6px 14px",
|
|
347
|
+
borderRadius: "14px",
|
|
348
|
+
}}
|
|
349
|
+
>
|
|
350
|
+
<button
|
|
351
|
+
type="button"
|
|
352
|
+
aria-label="Disminuir pasajes"
|
|
353
|
+
disabled={!canDecreaseTicketQuantity}
|
|
354
|
+
onClick={() => onDecreaseTicketQuantity?.(serviceItem)}
|
|
355
|
+
className={`flex h-[34px] w-[34px] items-center justify-center rounded-full border-none text-[25px] leading-none text-[white] ${
|
|
356
|
+
canDecreaseTicketQuantity
|
|
357
|
+
? "cursor-pointer bg-[#2d374d]"
|
|
358
|
+
: "cursor-not-allowed bg-[#222b3d] opacity-50"
|
|
359
|
+
}`}
|
|
360
|
+
>
|
|
361
|
+
-
|
|
362
|
+
</button>
|
|
363
|
+
<span className="bold-text text-[20px] text-white">
|
|
364
|
+
{ticketQuantity}
|
|
178
365
|
</span>
|
|
366
|
+
<button
|
|
367
|
+
type="button"
|
|
368
|
+
aria-label="Aumentar pasajes"
|
|
369
|
+
onClick={() => onIncreaseTicketQuantity?.(serviceItem)}
|
|
370
|
+
className="flex h-[34px] w-[34px] cursor-pointer items-center justify-center rounded-full border-none bg-[#2d374d] text-[25px] leading-none text-[white]"
|
|
371
|
+
>
|
|
372
|
+
+
|
|
373
|
+
</button>
|
|
374
|
+
</div>
|
|
375
|
+
</div>
|
|
179
376
|
|
|
377
|
+
<div
|
|
378
|
+
className="mt-[10px] flex justify-between items-center rounded-[14px]"
|
|
379
|
+
style={{
|
|
380
|
+
// height: "80px",
|
|
381
|
+
border: "1px solid #363c48",
|
|
382
|
+
backgroundColor: "#1a202e",
|
|
383
|
+
padding: "14px 10px",
|
|
384
|
+
}}
|
|
385
|
+
>
|
|
386
|
+
<div className="flex flex-col">
|
|
180
387
|
<span
|
|
181
|
-
className="text-[
|
|
388
|
+
className="text-[20px] font-normal leading-[20px] text-[#9f9f9f] relative"
|
|
182
389
|
style={{ position: "relative" }}
|
|
183
390
|
>
|
|
184
391
|
$10.000
|
|
@@ -187,7 +394,7 @@ const FeatureServiceUiMobile = ({
|
|
|
187
394
|
position: "absolute",
|
|
188
395
|
left: "-2px",
|
|
189
396
|
top: "50%",
|
|
190
|
-
width: "calc(
|
|
397
|
+
width: "calc(80% + 4px)",
|
|
191
398
|
height: "1px",
|
|
192
399
|
|
|
193
400
|
backgroundColor: "#FF5C60",
|
|
@@ -197,14 +404,59 @@ const FeatureServiceUiMobile = ({
|
|
|
197
404
|
}}
|
|
198
405
|
/>
|
|
199
406
|
</span>
|
|
200
|
-
<span className="text-white bold-text text-[
|
|
407
|
+
<span className="text-[white] bold-text text-[28px] leading-none mt-[4px]">
|
|
201
408
|
{`$${(4000 * ticketQuantity).toLocaleString()}`}
|
|
202
409
|
</span>
|
|
203
410
|
</div>
|
|
411
|
+
<div>
|
|
412
|
+
<span
|
|
413
|
+
className="text-[#FF8F45] bold-text text-[26px] leading-tight"
|
|
414
|
+
style={{
|
|
415
|
+
animation: "pulse-zoom 2s ease-in-out infinite",
|
|
416
|
+
whiteSpace: "nowrap",
|
|
417
|
+
}}
|
|
418
|
+
>
|
|
419
|
+
60% OFF
|
|
420
|
+
</span>
|
|
421
|
+
</div>
|
|
422
|
+
</div>
|
|
423
|
+
|
|
424
|
+
<button
|
|
425
|
+
type="button"
|
|
426
|
+
onClick={onBookButtonPress}
|
|
427
|
+
className="flex items-center gap-[6px] px-[20px] py-[10px] rounded-[16px] text-[white] bold-text text-[13px] mt-[10px] justify-center border-none cursor-pointer"
|
|
428
|
+
style={{
|
|
429
|
+
backgroundColor: "#FF5C60",
|
|
430
|
+
animation: "pulse-zoom 2s ease-in-out infinite",
|
|
431
|
+
whiteSpace: "nowrap",
|
|
432
|
+
width: "100%",
|
|
433
|
+
}}
|
|
434
|
+
>
|
|
435
|
+
<LottiePlayer
|
|
436
|
+
animationData={serviceItem.icons.thunderAnim}
|
|
437
|
+
width="18px"
|
|
438
|
+
height="18px"
|
|
439
|
+
/>
|
|
440
|
+
<span className="whitespace-nowrap">¡Lo quiero!</span>
|
|
441
|
+
</button>
|
|
442
|
+
|
|
443
|
+
<div
|
|
444
|
+
className={`flex justify-end mt-[10px] transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`}
|
|
445
|
+
onClick={onToggleExpand}
|
|
446
|
+
>
|
|
447
|
+
<img
|
|
448
|
+
src={serviceItem?.icons?.downArrow}
|
|
449
|
+
alt="down arrow"
|
|
450
|
+
style={{
|
|
451
|
+
width: "14px",
|
|
452
|
+
height: "8px",
|
|
453
|
+
filter: "brightness(0) invert(1)",
|
|
454
|
+
}}
|
|
455
|
+
/>
|
|
204
456
|
</div>
|
|
205
457
|
</div>
|
|
206
458
|
|
|
207
|
-
<div>
|
|
459
|
+
{/* <div>
|
|
208
460
|
<div className="flex items-center text-[white]">
|
|
209
461
|
<span>Vie, 04/11</span>
|
|
210
462
|
<span className="h-[20px] flex items-center justify-center mx-[10px]">
|
|
@@ -374,7 +626,7 @@ const FeatureServiceUiMobile = ({
|
|
|
374
626
|
}}
|
|
375
627
|
/>
|
|
376
628
|
</div>
|
|
377
|
-
</div>
|
|
629
|
+
</div> */}
|
|
378
630
|
</div>
|
|
379
631
|
</div>
|
|
380
632
|
|