kupos-ui-components-lib 9.7.1 → 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.
Files changed (21) hide show
  1. package/dist/assets/images/anims/service_list/users_anim.json +1 -0
  2. package/dist/components/ServiceItem/ServiceItemDesktop.js +5 -1
  3. package/dist/components/ServiceItem/ServiceItemMobile.d.ts +1 -1
  4. package/dist/components/ServiceItem/ServiceItemMobile.js +16 -7
  5. package/dist/components/ServiceItem/mobileTypes.d.ts +27 -0
  6. package/dist/components/ServiceItem/types.d.ts +5 -0
  7. package/dist/styles.css +18 -6
  8. package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.d.ts +18 -0
  9. package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.js +270 -0
  10. package/dist/ui/FeatureServiceUI/FeatureServiceUi.d.ts +1 -2
  11. package/dist/ui/FeatureServiceUI/FeatureServiceUi.js +55 -69
  12. package/dist/ui/SeatSection/SeatSection.js +1 -1
  13. package/package.json +1 -1
  14. package/src/assets/images/anims/service_list/users_anim.json +1 -0
  15. package/src/components/ServiceItem/ServiceItemDesktop.tsx +4 -1
  16. package/src/components/ServiceItem/ServiceItemMobile.tsx +331 -286
  17. package/src/components/ServiceItem/mobileTypes.ts +22 -0
  18. package/src/components/ServiceItem/types.ts +6 -1
  19. package/src/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.tsx +1042 -0
  20. package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx +56 -201
  21. package/src/ui/SeatSection/SeatSection.tsx +1 -1
package/src/components/ServiceItem/ServiceItemMobile.tsx CHANGED
@@ -9,6 +9,7 @@ import SeatSectionMobile from "../../ui/mobileweb/SeatSectionMobile";
9
9
  import DateTimeSectionMobile from "../../ui/mobileweb/DateTimeSectionMobile";
10
10
  import ExpandedDropdownMobile from "../../ui/mobileweb/ExpandedDropdownMobile";
11
11
  import ServiceBadgesMobile from "../../ui/mobileweb/ServiceBadgesMobile";
12
+ import FeatureServiceUiMobile from "../../ui/FeaturServiceUiMobile/FeatureServiceUiMobile";
12
13
 
13
14
  const SEAT_EXCEPTIONS = ["Asiento mascota"];
14
15
 
@@ -45,6 +46,14 @@ function ServiceItemMobile({
45
46
  removeDuplicateSeats,
46
47
  isLinatal,
47
48
  viewersConfig,
49
+ isFeatureDropDownExpand,
50
+ setIsFeatureDropDownExpand,
51
+ ticketQuantity,
52
+ onIncreaseTicketQuantity,
53
+ onDecreaseTicketQuantity,
54
+ cityOrigin,
55
+ cityDestination,
56
+ isNewUi,
48
57
  }: MobileServiceItemProps): React.ReactElement {
49
58
  const isItemExpanded = serviceItem.id === isExpanded;
50
59
  const isPetSeat = (Object.keys(serviceItem?.pet_seat_info) || []).length > 0;
@@ -153,316 +162,352 @@ function ServiceItemMobile({
153
162
  }
154
163
 
155
164
  return (
156
- <div
157
- className={`relative ${!serviceItem.offer_text || !serviceItem?.is_dp_enabled ? "mb-[14px]" : showTopLabel || serviceItem?.is_direct_trip ? "mb-[20px]" : "mb-[12px]"} ${
158
- serviceItem?.is_direct_trip ||
159
- isConexion ||
160
- serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
161
- showTopLabel
162
- ? "mt-[20px]"
163
- : "mt-[10px]"
164
- } `}
165
- style={{ zIndex: 1 }}
166
- >
167
- <div
168
- className={`z-1 ${
169
- (hasOfferText || serviceItem?.is_dp_enabled) && !isSoldOut
170
- ? "rounded-[18px]"
171
- : "rounded-[10px] border border-[#ccc]"
172
- }`}
173
- style={{ ...serviceCardStyle, backgroundColor: "#fff" }}
174
- >
175
- <div style={{ padding: "12px 12px 8px 12px" }}>
176
- {/* Header with operator info and favorite */}
177
- <div className="flex justify-between items-center mb-[10px]">
178
- <div
179
- className="flex items-center justify-center gap-x-4"
180
- style={{
181
- marginBottom:
182
- serviceItem?.offer_text || hasDiscount ? "10px" : "",
183
- }}
184
- >
185
- <div className="w-[115px] overflow-y-hidden h-[22px]">
186
- <img
187
- src={serviceItem.operator_details[0]}
188
- alt="service logo"
189
- className={`w-[100px] h-auto object-contain ${
190
- isSoldOut ? "grayscale" : ""
191
- }`}
192
- />
193
- </div>
194
- {isCiva ? (
195
- <div className="black-text min-[420]:text-[12px] text-[12px]">
196
- {serviceItem?.operator_details[2]}
197
- </div>
198
- ) : showRating ? (
199
- <div className="flex min-[420]:text-[13px] text-[12px] h-[22px] items-center">
200
- <div className="flex items-center">
201
- <div className="flex items-center">
202
- <img
203
- src={serviceItem.icons.rating}
204
- alt="origin"
205
- className={`w-[12px] h-[12px] mr-[4px] object-contain ${
206
- isSoldOut ? "grayscale" : ""
207
- }`}
208
- />
209
- <span style={{ lineHeight: "normal" }}>
210
- {getServiceStars(serviceItem)}
211
- </span>
165
+ <>
166
+ {isNewUi ? (
167
+ <FeatureServiceUiMobile
168
+ serviceItem={serviceItem}
169
+ showTopLabel={showTopLabel}
170
+ colors={colors}
171
+ isSoldOut={isSoldOut}
172
+ cityOrigin={cityOrigin}
173
+ cityDestination={cityDestination}
174
+ renderIcon={renderIcon}
175
+ viewersConfig={viewersConfig}
176
+ isFeatureDropDownExpand={isFeatureDropDownExpand}
177
+ ticketQuantity={ticketQuantity}
178
+ onIncreaseTicketQuantity={onIncreaseTicketQuantity}
179
+ onDecreaseTicketQuantity={onDecreaseTicketQuantity}
180
+ onBookButtonPress={onBookButtonPress}
181
+ onToggleExpand={() =>
182
+ setIsFeatureDropDownExpand &&
183
+ setIsFeatureDropDownExpand(
184
+ isFeatureDropDownExpand === serviceItem.id ||
185
+ isFeatureDropDownExpand === true
186
+ ? null
187
+ : serviceItem.id,
188
+ )
189
+ }
190
+ />
191
+ ) : (
192
+ <div
193
+ className={`relative ${!serviceItem.offer_text || !serviceItem?.is_dp_enabled ? "mb-[14px]" : showTopLabel || serviceItem?.is_direct_trip ? "mb-[20px]" : "mb-[12px]"} ${
194
+ serviceItem?.is_direct_trip ||
195
+ isConexion ||
196
+ serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
197
+ showTopLabel
198
+ ? "mt-[20px]"
199
+ : "mt-[10px]"
200
+ } `}
201
+ style={{ zIndex: 1 }}
202
+ >
203
+ <div
204
+ className={`z-1 ${
205
+ (hasOfferText || serviceItem?.is_dp_enabled) && !isSoldOut
206
+ ? "rounded-[18px]"
207
+ : "rounded-[10px] border border-[#ccc]"
208
+ }`}
209
+ style={{ ...serviceCardStyle, backgroundColor: "#fff" }}
210
+ >
211
+ <div style={{ padding: "12px 12px 8px 12px" }}>
212
+ {/* Header with operator info and favorite */}
213
+ <div className="flex justify-between items-center mb-[10px]">
214
+ <div
215
+ className="flex items-center justify-center gap-x-4"
216
+ style={{
217
+ marginBottom:
218
+ serviceItem?.offer_text || hasDiscount ? "10px" : "",
219
+ }}
220
+ >
221
+ <div className="w-[115px] overflow-y-hidden h-[22px]">
222
+ <img
223
+ src={serviceItem.operator_details[0]}
224
+ alt="service logo"
225
+ className={`w-[100px] h-auto object-contain ${
226
+ isSoldOut ? "grayscale" : ""
227
+ }`}
228
+ />
229
+ </div>
230
+ {isCiva ? (
231
+ <div className="black-text min-[420]:text-[12px] text-[12px]">
232
+ {serviceItem?.operator_details[2]}
212
233
  </div>
234
+ ) : showRating ? (
235
+ <div className="flex min-[420]:text-[13px] text-[12px] h-[22px] items-center">
236
+ <div className="flex items-center">
237
+ <div className="flex items-center">
238
+ <img
239
+ src={serviceItem.icons.rating}
240
+ alt="origin"
241
+ className={`w-[12px] h-[12px] mr-[4px] object-contain ${
242
+ isSoldOut ? "grayscale" : ""
243
+ }`}
244
+ />
245
+ <span style={{ lineHeight: "normal" }}>
246
+ {getServiceStars(serviceItem)}
247
+ </span>
248
+ </div>
213
249
 
214
- <div
215
- className="flex items-center cursor-pointer "
216
- style={{ color: isSoldOut ? "#bbb" : "text-[#464647]" }}
217
- >
218
- <span className="ml-[3px] min-[420]:text-[13px] text-[12px] text-ellipsis overflow-hidden whitespace-nowrap max-w-[120px]">
219
- {serviceItem.operator_details[2]}
220
- </span>
250
+ <div
251
+ className="flex items-center cursor-pointer "
252
+ style={{
253
+ color: isSoldOut ? "#bbb" : "text-[#464647]",
254
+ }}
255
+ >
256
+ <span className="ml-[3px] min-[420]:text-[13px] text-[12px] text-ellipsis overflow-hidden whitespace-nowrap max-w-[120px]">
257
+ {serviceItem.operator_details[2]}
258
+ </span>
259
+ </div>
260
+ </div>
221
261
  </div>
222
- </div>
262
+ ) : null}
223
263
  </div>
224
- ) : null}
225
- </div>
226
- </div>
264
+ </div>
227
265
 
228
- <DateTimeSectionMobile
229
- onBookButtonPress={onBookButtonPress}
230
- isCiva={isCiva}
231
- isSoldOut={isSoldOut}
232
- isLinatal={isLinatal}
233
- isPeru={isPeru}
234
- orignLabel={orignLabel}
235
- destinationLabel={destinationLabel}
236
- originIcon={serviceItem.icons?.origin}
237
- destinationIcon={serviceItem.icons?.destination}
238
- travelDate={serviceItem.travel_date}
239
- arrivalDate={serviceItem.arrival_date}
240
- depTime={serviceItem.dep_time}
241
- arrTime={serviceItem.arr_time}
242
- seatTypes={serviceItem.seat_types}
243
- seatPriceColor={colors.seatPriceColor}
244
- tooltipBgColor={colors.tooltipBgColor}
245
- currencySign={currencySign}
246
- availableSeats={serviceItem.available_seats}
247
- removeDuplicateSeats={removeDuplicateSeats}
248
- serviceItem={serviceItem}
249
- showLastSeats={showLastSeats}
250
- discountSeatPriceColor={colors.discountSeatPriceColor}
251
- />
266
+ <DateTimeSectionMobile
267
+ onBookButtonPress={onBookButtonPress}
268
+ isCiva={isCiva}
269
+ isSoldOut={isSoldOut}
270
+ isLinatal={isLinatal}
271
+ isPeru={isPeru}
272
+ orignLabel={orignLabel}
273
+ destinationLabel={destinationLabel}
274
+ originIcon={serviceItem.icons?.origin}
275
+ destinationIcon={serviceItem.icons?.destination}
276
+ travelDate={serviceItem.travel_date}
277
+ arrivalDate={serviceItem.arrival_date}
278
+ depTime={serviceItem.dep_time}
279
+ arrTime={serviceItem.arr_time}
280
+ seatTypes={serviceItem.seat_types}
281
+ seatPriceColor={colors.seatPriceColor}
282
+ tooltipBgColor={colors.tooltipBgColor}
283
+ currencySign={currencySign}
284
+ availableSeats={serviceItem.available_seats}
285
+ removeDuplicateSeats={removeDuplicateSeats}
286
+ serviceItem={serviceItem}
287
+ showLastSeats={showLastSeats}
288
+ discountSeatPriceColor={colors.discountSeatPriceColor}
289
+ />
252
290
 
253
- {hasDiscount && (
254
- <div className="flex justify-end">
255
- {isSoldOut ? (
256
- <span className="col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]">
257
- Agotado
258
- </span>
259
- ) : null}
260
- </div>
261
- )}
291
+ {hasDiscount && (
292
+ <div className="flex justify-end">
293
+ {isSoldOut ? (
294
+ <span className="col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]">
295
+ Agotado
296
+ </span>
297
+ ) : null}
298
+ </div>
299
+ )}
262
300
 
263
- {showLastSeats ? (
264
- <div className="flex justify-end ">
265
- {serviceItem?.available_seats < 10 &&
266
- serviceItem?.available_seats > 0 && (
267
- <div
268
- className="text-[10px] text-center"
269
- style={{
270
- color: colors.tooltipBgColor,
271
- }}
272
- >
273
- ¡Últimos Asientos!
274
- </div>
275
- )}
276
- </div>
277
- ) : null}
301
+ {showLastSeats ? (
302
+ <div className="flex justify-end ">
303
+ {serviceItem?.available_seats < 10 &&
304
+ serviceItem?.available_seats > 0 && (
305
+ <div
306
+ className="text-[10px] text-center"
307
+ style={{
308
+ color: colors.tooltipBgColor,
309
+ }}
310
+ >
311
+ ¡Últimos Asientos!
312
+ </div>
313
+ )}
314
+ </div>
315
+ ) : null}
278
316
 
279
- {/* <div className="bg-[#E6E6E6] -ml-[12px] -mr-[12px] mt-[10px] mb-[10px] h-[1px]"></div> */}
280
- <div className="bg-[#E6E6E6] mt-[10px] mb-[8px] h-[1px]"></div>
317
+ {/* <div className="bg-[#E6E6E6] -ml-[12px] -mr-[12px] mt-[10px] mb-[10px] h-[1px]"></div> */}
318
+ <div className="bg-[#E6E6E6] mt-[10px] mb-[8px] h-[1px]"></div>
281
319
 
282
- <BottomAmenitiesMobile
283
- isSoldOut={isSoldOut}
284
- amenitiesNodes={amenities()}
285
- hoursIcon={renderIcon("hours", "14px")}
286
- duration={serviceItem.duration?.toString()}
287
- isDirectTrip={serviceItem?.is_direct_trip}
288
- directoColor={colors.directoColor}
289
- directoAnim={serviceItem.icons.directoAnim}
290
- isChangeTicket={serviceItem.is_change_ticket}
291
- isPetSeat={isPetSeat}
292
- petSeatInfo={serviceItem.pet_seat_info}
293
- petFriendlyAnim={serviceItem.icons.petFriendlyAnim}
294
- flexibleAnim={serviceItem.icons.flexibleAnim}
295
- isTrackingEnabled={serviceItem?.is_tracking_enabled}
296
- locationAnim={serviceItem.icons.locationAnim}
297
- downArrowIcon={serviceItem.icons.downArrow}
298
- showDropdown={isItemExpanded}
299
- setShowDropdown={() =>
300
- setIsExpanded(isItemExpanded ? null : serviceItem.id)
301
- }
302
- onDropdownToggle={() => {
303
- setIsExpanded(isItemExpanded ? null : serviceItem.id);
304
- }}
305
- isPeru={isPeru}
306
- femaleAnim={serviceItem.icons.femaleAnim}
307
- ladiesBookedSeats={serviceItem.ladies_booked_seats}
308
- isDpEnabled={serviceItem.is_dp_enabled}
309
- />
310
- </div>
320
+ <BottomAmenitiesMobile
321
+ isSoldOut={isSoldOut}
322
+ amenitiesNodes={amenities()}
323
+ hoursIcon={renderIcon("hours", "14px")}
324
+ duration={serviceItem.duration?.toString()}
325
+ isDirectTrip={serviceItem?.is_direct_trip}
326
+ directoColor={colors.directoColor}
327
+ directoAnim={serviceItem.icons.directoAnim}
328
+ isChangeTicket={serviceItem.is_change_ticket}
329
+ isPetSeat={isPetSeat}
330
+ petSeatInfo={serviceItem.pet_seat_info}
331
+ petFriendlyAnim={serviceItem.icons.petFriendlyAnim}
332
+ flexibleAnim={serviceItem.icons.flexibleAnim}
333
+ isTrackingEnabled={serviceItem?.is_tracking_enabled}
334
+ locationAnim={serviceItem.icons.locationAnim}
335
+ downArrowIcon={serviceItem.icons.downArrow}
336
+ showDropdown={isItemExpanded}
337
+ setShowDropdown={() =>
338
+ setIsExpanded(isItemExpanded ? null : serviceItem.id)
339
+ }
340
+ onDropdownToggle={() => {
341
+ setIsExpanded(isItemExpanded ? null : serviceItem.id);
342
+ }}
343
+ isPeru={isPeru}
344
+ femaleAnim={serviceItem.icons.femaleAnim}
345
+ ladiesBookedSeats={serviceItem.ladies_booked_seats}
346
+ isDpEnabled={serviceItem.is_dp_enabled}
347
+ />
348
+ </div>
311
349
 
312
- <ServiceBadgesMobile
313
- showTopLabel={showTopLabel}
314
- isSoldOut={isSoldOut}
315
- colors={colors}
316
- renderIcon={renderIcon}
317
- serviceItem={serviceItem}
318
- isConexion={isConexion}
319
- />
320
- </div>
350
+ <ServiceBadgesMobile
351
+ showTopLabel={showTopLabel}
352
+ isSoldOut={isSoldOut}
353
+ colors={colors}
354
+ renderIcon={renderIcon}
355
+ serviceItem={serviceItem}
356
+ isConexion={isConexion}
357
+ />
358
+ </div>
321
359
 
322
- {/* 🔹 EXPANDABLE DROPDOWN (below the card) */}
323
- {(serviceItem?.offer_text || serviceItem?.is_dp_enabled) &&
324
- !isSoldOut && (
325
- <div
326
- className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
327
- style={{
328
- background: isSoldOut ? offerGradientWithOpacity : offerGradient,
329
- // opacity: isSoldOut ? 0.5 : 1,
330
- borderRadius: "0 0 14px 14px",
331
- zIndex: -1,
332
- }}
333
- >
334
- <div
335
- className="flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]"
336
- style={{ lineHeight: 1.6 }}
337
- >
338
- <div className="flex justify-between items-center">
339
- {serviceItem?.is_dp_enabled &&
340
- Object.keys(serviceItem?.dp_discount_percents ?? {}).length ===
341
- 0 &&
342
- (serviceItem?.dp_discounted_seats ?? []).length === 0 ? (
343
- <div className="flex items-center gap-[6px]">
344
- {/* {renderIcon("whiteFireIcon", "14px")} */}
345
- <LottiePlayer
346
- animationData={serviceItem.icons.starAnimation}
347
- width="14px"
348
- height="14px"
349
- />
360
+ {/* 🔹 EXPANDABLE DROPDOWN (below the card) */}
361
+ {(serviceItem?.offer_text || serviceItem?.is_dp_enabled) &&
362
+ !isSoldOut && (
363
+ <div
364
+ className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
365
+ style={{
366
+ background: isSoldOut
367
+ ? offerGradientWithOpacity
368
+ : offerGradient,
369
+ // opacity: isSoldOut ? 0.5 : 1,
370
+ borderRadius: "0 0 14px 14px",
371
+ zIndex: -1,
372
+ }}
373
+ >
374
+ <div
375
+ className="flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]"
376
+ style={{ lineHeight: 1.6 }}
377
+ >
378
+ <div className="flex justify-between items-center">
379
+ {serviceItem?.is_dp_enabled &&
380
+ Object.keys(serviceItem?.dp_discount_percents ?? {})
381
+ .length === 0 &&
382
+ (serviceItem?.dp_discounted_seats ?? []).length === 0 ? (
383
+ <div className="flex items-center gap-[6px]">
384
+ {/* {renderIcon("whiteFireIcon", "14px")} */}
385
+ <LottiePlayer
386
+ animationData={serviceItem.icons.starAnimation}
387
+ width="14px"
388
+ height="14px"
389
+ />
350
390
 
351
- <span className="text-[#fff]">Más elegido</span>
352
- </div>
353
- ) : (
354
- <div
355
- className={`flex ${(serviceItem?.offer_text || "").length > 10 ? "items-start" : "items-center"}`}
356
- >
357
- <div className={isLongOfferText ? "mt-[2px]" : ""}>
358
- <LottiePlayer
359
- animationData={serviceItem.icons.bombAnim}
360
- width="14px"
361
- height="14px"
362
- />
363
- </div>
391
+ <span className="text-[#fff]">Más elegido</span>
392
+ </div>
393
+ ) : (
394
+ <div
395
+ className={`flex ${(serviceItem?.offer_text || "").length > 10 ? "items-start" : "items-center"}`}
396
+ >
397
+ <div className={isLongOfferText ? "mt-[2px]" : ""}>
398
+ <LottiePlayer
399
+ animationData={serviceItem.icons.bombAnim}
400
+ width="14px"
401
+ height="14px"
402
+ />
403
+ </div>
404
+ <div
405
+ className={`ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`}
406
+ style={{
407
+ color: "#fff",
408
+ lineHeight: 1.4,
409
+ }}
410
+ >
411
+ <span className="whitespace-nowrap min-[380px]:text-[12px]">
412
+ Termina en&nbsp;
413
+ <span
414
+ className="bold-text"
415
+ ref={(node) =>
416
+ commonService.startCountdown(node, 599)
417
+ }
418
+ style={{
419
+ fontVariantNumeric: "tabular-nums",
420
+ display: "inline-block",
421
+ }}
422
+ />
423
+ </span>
424
+ </div>
425
+ </div>
426
+ )}
364
427
  <div
365
- className={`ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`}
428
+ className="flex flex-col items-end"
366
429
  style={{
367
430
  color: "#fff",
368
- lineHeight: 1.4,
369
431
  }}
370
432
  >
371
- <span className="whitespace-nowrap min-[380px]:text-[12px]">
372
- Termina en&nbsp;
373
- <span
374
- className="bold-text"
375
- ref={(node) =>
376
- commonService.startCountdown(node, 599)
377
- }
378
- style={{
379
- fontVariantNumeric: "tabular-nums",
380
- display: "inline-block",
381
- }}
382
- />
383
- </span>
433
+ <div className="flex items-center">
434
+ <div className="mr-[4px]">
435
+ {" "}
436
+ <LottiePlayer
437
+ animationData={serviceItem.icons.dotAnimation}
438
+ width="12px"
439
+ height="12px"
440
+ />
441
+ </div>
442
+ <span className="flex-1" style={{ lineHeight: 1.4 }}>
443
+ <span
444
+ className="bold-text"
445
+ ref={(node) =>
446
+ commonService.startViewerCount(
447
+ node,
448
+ viewersConfig,
449
+ )
450
+ }
451
+ style={{ fontVariantNumeric: "tabular-nums" }}
452
+ />{" "}
453
+ <span> viendo</span> |{" "}
454
+ <span className="whitespace-nowrap">
455
+ {/* {serviceItem?.is_dp_enabled ? null : "Quedan pocos • "} */}
456
+ <span
457
+ className="bold-text"
458
+ ref={(node) =>
459
+ commonService.startComprandoCount(node, 4, 16)
460
+ }
461
+ style={{ fontVariantNumeric: "tabular-nums" }}
462
+ />{" "}
463
+ comprando
464
+ </span>
465
+ </span>
466
+ </div>
384
467
  </div>
385
468
  </div>
386
- )}
387
- <div
388
- className="flex flex-col items-end"
389
- style={{
390
- color: "#fff",
391
- }}
392
- >
393
- <div className="flex items-center">
394
- <div className="mr-[4px]">
395
- {" "}
396
- <LottiePlayer
397
- animationData={serviceItem.icons.dotAnimation}
398
- width="12px"
399
- height="12px"
400
- />
401
- </div>
402
- <span className="flex-1" style={{ lineHeight: 1.4 }}>
403
- <span
404
- className="bold-text"
405
- ref={(node) =>
406
- commonService.startViewerCount(node, viewersConfig)
407
- }
408
- style={{ fontVariantNumeric: "tabular-nums" }}
409
- />{" "}
410
- <span> viendo</span> |{" "}
411
- <span className="whitespace-nowrap">
412
- {/* {serviceItem?.is_dp_enabled ? null : "Quedan pocos • "} */}
413
- <span
414
- className="bold-text"
415
- ref={(node) =>
416
- commonService.startComprandoCount(node, 4, 16)
417
- }
418
- style={{ fontVariantNumeric: "tabular-nums" }}
419
- />{" "}
420
- comprando
421
- </span>
422
- </span>
423
- </div>
424
469
  </div>
425
470
  </div>
471
+ )}
472
+ <div
473
+ style={{
474
+ display: "grid",
475
+ gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
476
+ opacity: isItemExpanded ? 1 : 0,
477
+ transition:
478
+ "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
479
+ position: "relative",
480
+ zIndex:
481
+ serviceItem?.offer_text || serviceItem?.is_dp_enabled ? -2 : -1,
482
+ }}
483
+ >
484
+ <div
485
+ style={{
486
+ overflow: "hidden",
487
+ minHeight: 0,
488
+ position: serviceItem?.offer_text ? "relative" : undefined,
489
+ zIndex: serviceItem?.offer_text ? -3 : undefined,
490
+ marginTop: serviceItem?.offer_text ? "-15px" : "-10px",
491
+ }}
492
+ >
493
+ <ExpandedDropdownMobile
494
+ serviceItem={serviceItem}
495
+ isPeru={isPeru}
496
+ petSeatInfo={serviceItem.pet_seat_info}
497
+ petFriendlyAnim={serviceItem.icons.petFriendlyAnim}
498
+ isSoldOut={isSoldOut}
499
+ isChangeTicket={serviceItem.is_change_ticket === true}
500
+ ladiesBookedSeats={serviceItem.ladies_booked_seats}
501
+ isDpEnabled={serviceItem.is_dp_enabled}
502
+ femaleAnim={serviceItem.icons.femaleAnim}
503
+ flexibleAnim={serviceItem.icons.flexibleAnim}
504
+ renderIcon={renderIcon}
505
+ />
426
506
  </div>
427
507
  </div>
428
- )}
429
- <div
430
- style={{
431
- display: "grid",
432
- gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
433
- opacity: isItemExpanded ? 1 : 0,
434
- transition:
435
- "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
436
- position: "relative",
437
- zIndex:
438
- serviceItem?.offer_text || serviceItem?.is_dp_enabled ? -2 : -1,
439
- }}
440
- >
441
- <div
442
- style={{
443
- overflow: "hidden",
444
- minHeight: 0,
445
- position: serviceItem?.offer_text ? "relative" : undefined,
446
- zIndex: serviceItem?.offer_text ? -3 : undefined,
447
- marginTop: serviceItem?.offer_text ? "-15px" : "-10px",
448
- }}
449
- >
450
- <ExpandedDropdownMobile
451
- serviceItem={serviceItem}
452
- isPeru={isPeru}
453
- petSeatInfo={serviceItem.pet_seat_info}
454
- petFriendlyAnim={serviceItem.icons.petFriendlyAnim}
455
- isSoldOut={isSoldOut}
456
- isChangeTicket={serviceItem.is_change_ticket === true}
457
- ladiesBookedSeats={serviceItem.ladies_booked_seats}
458
- isDpEnabled={serviceItem.is_dp_enabled}
459
- femaleAnim={serviceItem.icons.femaleAnim}
460
- flexibleAnim={serviceItem.icons.flexibleAnim}
461
- renderIcon={renderIcon}
462
- />
463
508
  </div>
464
- </div>
465
- </div>
509
+ )}
510
+ </>
466
511
  );
467
512
  }
468
513