kupos-ui-components-lib 9.7.4 → 9.7.5

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