kupos-ui-components-lib 9.9.1 → 9.9.2

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