kupos-ui-components-lib 10.4.0 → 10.4.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 (11) hide show
  1. package/dist/components/ServiceItem/ServiceItemDesktop.js +13 -5
  2. package/dist/components/ServiceItem/ServiceItemMobile.js +8 -7
  3. package/dist/ui/OfferBanner.js +8 -6
  4. package/dist/ui/SeatSection/SeatSection.js +25 -15
  5. package/dist/ui/mobileweb/SeatSectionMobile.js +39 -31
  6. package/package.json +1 -1
  7. package/src/components/ServiceItem/ServiceItemDesktop.tsx +14 -5
  8. package/src/components/ServiceItem/ServiceItemMobile.tsx +8 -7
  9. package/src/ui/OfferBanner.tsx +9 -8
  10. package/src/ui/SeatSection/SeatSection.tsx +72 -55
  11. package/src/ui/mobileweb/SeatSectionMobile.tsx +63 -51
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -126,9 +126,11 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
126
126
  let isSoldOut = serviceItem.available_seats <= 0;
127
127
  const isItemExpanded = serviceItem.id === isExpand || isExpand === true;
128
128
  const grayscaleClass = isSoldOut ? "grayscale" : "";
129
- const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text);
129
+ const isDiscountBelow20 = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) > 0 &&
130
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) < 20;
131
+ const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && !isDiscountBelow20;
130
132
  // const isNewUiEnabled = serviceItem?.discounts?.[0]?.new_ui_enabled === true;
131
- const isNewUiEnabled = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.new_ui_enabled;
133
+ const isNewUiEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.new_ui_enabled) === true;
132
134
  const seats = removeDuplicateSeats
133
135
  ? ((_a = serviceItem.seat_types) === null || _a === void 0 ? void 0 : _a.filter((seat, index, self) => index === self.findIndex((s) => s.label === seat.label))) || []
134
136
  : serviceItem.seat_types || [];
@@ -296,12 +298,12 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
296
298
  setIsFeatureDropDownExpand(isFeatureDropDownExpand === serviceItem.id ||
297
299
  isFeatureDropDownExpand === true
298
300
  ? null
299
- : serviceItem.id), selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle, wowDealData: wowDealData })) : (React.createElement("div", { className: `relative hover:z-[150] ${(hasOfferText || (hasDpEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents)) || (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2)) && !isSoldOut ? "mb-[55px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
301
+ : serviceItem.id), selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle, wowDealData: wowDealData })) : (React.createElement("div", { className: `relative hover:z-[150] ${((isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 && hasOfferText) || (hasDpEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents)) || (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2)) && !isSoldOut ? "mb-[55px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
300
302
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
301
303
  showTopLabel
302
304
  ? "mt-[25px]"
303
305
  : "mt-[20px]"} ` },
304
- ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ||
306
+ ((isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 && hasOfferText) ||
305
307
  (hasDpEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents)) ||
306
308
  (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2)) &&
307
309
  !isSoldOut && (React.createElement(OfferBanner, { offerGradient: offerGradient, isSoldOut: isSoldOut, serviceItem: serviceItem, renderIcon: renderIcon, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon, showLoginOption: showLoginOption, isNewUiEnabled: isNewUiEnabled, colors: colors, isLinatal: isLinatal, coachKey: coachKey, isExpand: isItemExpanded })),
@@ -312,7 +314,13 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
312
314
  : "rounded-[10px] border border-[#ccc]"}`, style: Object.assign(Object.assign({}, serviceCardStyle), { zIndex: hasOfferText ? 1 : undefined }) },
313
315
  React.createElement("div", { className: " pt-[20px]", style: {
314
316
  padding: (hasDpEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents)) ||
315
- (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2 && !isSoldOut)
317
+ (isNewUiEnabled &&
318
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2 &&
319
+ !isSoldOut) ||
320
+ (isNewUiEnabled &&
321
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 &&
322
+ hasOfferText &&
323
+ !isSoldOut)
316
324
  ? "20px 15px 10px 15px"
317
325
  : coachKey
318
326
  ? "20px 15px 20px 15px"
package/dist/components/ServiceItem/ServiceItemMobile.js CHANGED
@@ -31,7 +31,8 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
31
31
  const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
32
32
  const isLongOfferText = (((_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) === null || _d === void 0 ? void 0 : _d.length) || 0) > 35;
33
33
  const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true;
34
- const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text);
34
+ const isDiscountBelow20 = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) > 0 && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) < 20;
35
+ const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && !isDiscountBelow20;
35
36
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
36
37
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
37
38
  const serviceCardStyle = (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) || ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
@@ -105,7 +106,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
105
106
  setIsFeatureDropDownExpand(isFeatureDropDownExpand === serviceItem.id ||
106
107
  isFeatureDropDownExpand === true
107
108
  ? null
108
- : serviceItem.id), selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle, wowDealData: wowDealData })) : (React.createElement("div", { className: `relative ${!serviceItem.offer_text || !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? "mb-[14px]" : showTopLabel || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "mb-[20px]" : "mb-[12px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
109
+ : serviceItem.id), selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle, wowDealData: wowDealData })) : (React.createElement("div", { className: `relative ${!hasOfferText || !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? "mb-[14px]" : showTopLabel || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ? "mb-[20px]" : "mb-[12px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
109
110
  isConexion ||
110
111
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
111
112
  showTopLabel ||
@@ -149,8 +150,8 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
149
150
  setIsExpanded(isItemExpanded ? null : serviceItem.id);
150
151
  }, isPeru: isPeru, femaleAnim: serviceItem.icons.femaleAnim, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, isTrain: isTrain })),
151
152
  React.createElement(ServiceBadgesMobile, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, serviceItem: serviceItem, isConexion: isConexion, isAllinBus: isAllinBus, boardingName: boardingName })),
152
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) &&
153
- (!isNewUiEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1) &&
153
+ hasOfferText &&
154
+ (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1) &&
154
155
  !isSoldOut &&
155
156
  !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
156
157
  background: colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
@@ -218,7 +219,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
218
219
  opacity: isItemExpanded ? 1 : 0,
219
220
  transition: "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
220
221
  position: "relative",
221
- zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ||
222
+ zIndex: hasOfferText ||
222
223
  ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents)) ||
223
224
  (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2)
224
225
  ? -2
@@ -227,7 +228,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
227
228
  React.createElement("div", { style: {
228
229
  overflow: "hidden",
229
230
  minHeight: 0,
230
- position: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ||
231
+ position: hasOfferText ||
231
232
  isNewUiEnabled ||
232
233
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
233
234
  ? "relative"
@@ -237,7 +238,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
237
238
  ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
238
239
  ? -3
239
240
  : undefined,
240
- marginTop: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "-15px" : "-10px",
241
+ marginTop: hasOfferText ? "-15px" : "-10px",
241
242
  } },
242
243
  React.createElement(ExpandedDropdownMobile, { serviceItem: serviceItem, isPeru: isPeru, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, isSoldOut: isSoldOut, isChangeTicket: serviceItem.is_change_ticket === true, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, femaleAnim: serviceItem.icons.femaleAnim, flexibleAnim: serviceItem.icons.flexibleAnim, renderIcon: renderIcon, operatorLabel: operatorLabel })))))));
243
244
  }
package/dist/ui/OfferBanner.js CHANGED
@@ -57,8 +57,11 @@ const ViewersCount = ({ serviceItem, viewersConfig, getAnimationIcon, }) => {
57
57
  };
58
58
  // ─── Main Component ───────────────────────────────────────────────────────────
59
59
  const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, showLoginModal, viewersConfig, getAnimationIcon, showLoginOption, isNewUiEnabled, colors, isLinatal, coachKey, isExpand, }) => {
60
- const isLegacyOffer = !!(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) &&
61
- (!isNewUiEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1) &&
60
+ const isDiscountBelow20 = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) > 0 && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) < 20;
61
+ const offerText = isDiscountBelow20 ? "" : (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "";
62
+ const isLegacyOffer = !!offerText &&
63
+ isNewUiEnabled &&
64
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 &&
62
65
  !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled);
63
66
  const isDpEnabledWithoutDiscounts = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && hasDpDiscounts(serviceItem);
64
67
  const showViewers = (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1) ||
@@ -69,12 +72,11 @@ const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, showLo
69
72
  return React.createElement(PopularServiceBanner, { getAnimationIcon: getAnimationIcon });
70
73
  }
71
74
  if (isLegacyOffer) {
72
- return (React.createElement(LegacyOfferBanner, { offerText: serviceItem.offer_text, getAnimationIcon: getAnimationIcon }));
75
+ return (React.createElement(LegacyOfferBanner, { offerText: offerText, getAnimationIcon: getAnimationIcon }));
73
76
  }
74
77
  const hasDp = hasDpDiscounts(serviceItem);
75
- if ((isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
76
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text)) {
77
- return (React.createElement(NewUiOfferBanner, { offerText: serviceItem.offer_text || "", isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, showLoginOption: showLoginOption, getAnimationIcon: getAnimationIcon, hideRegister: hasDp, isNewUiEnabled: isNewUiEnabled, showLoginButton: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.show_register_button, ui_type: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type }));
78
+ if (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) {
79
+ return (React.createElement(NewUiOfferBanner, { offerText: offerText, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, showLoginOption: showLoginOption, getAnimationIcon: getAnimationIcon, hideRegister: hasDp, isNewUiEnabled: isNewUiEnabled, showLoginButton: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.show_register_button, ui_type: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type }));
78
80
  }
79
81
  return null;
80
82
  };
package/dist/ui/SeatSection/SeatSection.js CHANGED
@@ -91,7 +91,6 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
91
91
  : CommonService.currency(price, currencySign);
92
92
  const renderSeatNames = () => {
93
93
  const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
94
- console.log("🚀 ~ renderSeatNames ~ removeDuplicateSeats:", seats);
95
94
  return seats.map((val, key) => {
96
95
  return SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("div", { className: "flex items-center", style: isTrain ? { cursor: "pointer" } : undefined, onClick: isTrain && !isSoldOut
97
96
  ? () => val.label === selectedSeatKey
@@ -277,7 +276,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
277
276
  top: "50%",
278
277
  width: "calc(100% + 4px)",
279
278
  height: "1px",
280
- backgroundColor: "#9f9f9f",
279
+ backgroundColor: discountSeatPriceColor,
281
280
  transform: "rotate(-10deg)",
282
281
  transformOrigin: "center",
283
282
  } }))),
@@ -326,20 +325,22 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
326
325
  }
327
326
  if (hasDiscount && discountSeat) {
328
327
  return (React.createElement("div", { className: "grid grid-cols-2 items-center text-[13.33px] relative", style: { opacity: isSoldOut ? 0.5 : 1 } },
329
- React.createElement("div", { className: "col-start-1 row-start-2 flex items-center" },
330
- React.createElement("span", { className: "text-[13.33px] font-normal leading-[22px] text-[#ccc]" }, "Antes")),
328
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 ? null : (React.createElement("div", { className: "col-start-1 row-start-2 flex items-center" },
329
+ React.createElement("span", { className: "text-[13.33px] font-normal leading-[22px] text-[#ccc]" }, "Antes"))),
331
330
  React.createElement("div", { className: "col-start-1 row-start-3 flex h-[20px] items-end" },
332
- React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#464647]" }, "Desde")),
333
- React.createElement("div", { className: "col-start-2 row-start-1 flex items-center justify-center absolute", style: { top: "-22px", left: "50%", transform: "translateX(-50%)" } }, (discountValue != null || isMaxDiscountApplied) && (React.createElement("span", { className: "rounded-[100px] bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white", style: {
331
+ React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#464647]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 ? discountSeat.label : "Desde")),
332
+ React.createElement("div", { className: "col-start-2 row-start-1 flex items-center justify-center absolute", style: { top: "-22px", left: "50%", transform: "translateX(-50%)" } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 &&
333
+ (discountValue != null || isMaxDiscountApplied) && (React.createElement("span", { className: "rounded-[100px] bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white", style: {
334
334
  animation: "pulse-zoom 2s ease-in-out infinite",
335
335
  whiteSpace: "nowrap",
336
336
  backgroundColor: discountSeatPriceColor,
337
337
  } }, isMaxDiscountApplied
338
- ? `${currencySign || "$"}${serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.max_discount}`
338
+ ? `${CommonService.currency(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.max_discount)} OFF`
339
339
  : `${discountValue}% OFF`))),
340
- React.createElement("div", { className: "col-start-2 row-start-2 flex items-center justify-center ", style: { textAlign: "center" } },
341
- React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative whitespace-nowrap", style: {
340
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 ? null : (React.createElement("div", { className: "col-start-2 row-start-2 flex items-center justify-center ", style: { textAlign: "center" } },
341
+ React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] relative whitespace-nowrap", style: {
342
342
  position: "relative",
343
+ color: discountSeatPriceColor,
343
344
  } },
344
345
  formatPrice(discountSeat.originalPrice),
345
346
  React.createElement("span", { style: {
@@ -348,19 +349,28 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
348
349
  top: "50%",
349
350
  width: "calc(100% + 4px)",
350
351
  height: "1px",
351
- backgroundColor: "#9f9f9f",
352
+ backgroundColor: discountSeatPriceColor,
352
353
  transform: "rotate(-10deg)",
353
354
  transformOrigin: "center",
354
- } }))),
355
+ } })))),
355
356
  React.createElement("div", { className: "col-start-2 row-start-3 flex h-[30px] items-end justify-center relative" },
356
- React.createElement("span", { className: "flex items-center gap-[6px] text-[22px] bold-text leading-[30px]", style: { color: isSoldOut ? "#c0c0c0" : discountSeatPriceColor } },
357
- React.createElement("div", { className: "absolute", style: {
357
+ React.createElement("span", { className: "flex items-center gap-[6px] bold-text leading-[30px]", style: {
358
+ color: isSoldOut
359
+ ? "#c0c0c0"
360
+ : (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1
361
+ ? "#464647"
362
+ : discountSeatPriceColor,
363
+ fontSize: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 ? "13.33px" : "22px",
364
+ } },
365
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 && (React.createElement("div", { className: "absolute", style: {
358
366
  left: isPeru ? "-16px" : "-18px",
359
367
  bottom: "1px",
360
- } }, renderIcon("fireIcon", "16px")),
368
+ } }, renderIcon("fireIcon", "16px"))),
361
369
  availableSeats <= 0
362
370
  ? CommonService.currency(0, currencySign)
363
- : CommonService.discountedCurrency(discountSeat.discountedPrice, currencySign)))));
371
+ : CommonService.discountedCurrency((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1
372
+ ? discountSeat.originalPrice
373
+ : discountSeat.discountedPrice, currencySign)))));
364
374
  }
365
375
  return isTrain && availableSeats <= 0 ? null : (React.createElement("div", { className: "relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.2rem]", style: isCentered ? { alignItems: "center" } : {} },
366
376
  React.createElement("div", { className: "flex flex-col justify-between", style: { gap: "10px" } }, renderLabels()),
package/dist/ui/mobileweb/SeatSectionMobile.js CHANGED
@@ -219,7 +219,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
219
219
  left: "50%",
220
220
  width: "80%",
221
221
  height: "1px",
222
- background: "#9f9f9f",
222
+ background: discountSeatPriceColor,
223
223
  transform: "rotate(-12deg)",
224
224
  transformOrigin: "center",
225
225
  } })),
@@ -231,38 +231,46 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
231
231
  commonService.discountedCurrency(Number(firstSeatFare), currencySign)),
232
232
  isSoldOut ? (React.createElement("span", { className: "col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]" }, "Agotado")) : null)) : hasDiscount && discountSeat ? (React.createElement("div", null,
233
233
  React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] " },
234
- (discountValue != null || isMaxDiscountApplied) && (React.createElement("div", { className: "absolute -top-[18px] right-[0px]", style: {
235
- animation: "pulse-zoom 2s ease-in-out infinite",
236
- opacity: isSoldOut ? 0.5 : 1,
237
- } },
238
- React.createElement("span", { className: "rounded-[100px] px-[8px] text-[12px] bold-text leading-[20px] text-[#fff]", style: {
239
- backgroundColor: tooltipBgColor,
240
- } }, isMaxDiscountApplied
241
- ? `${currencySign || "$"}${serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.max_discount}`
242
- : `${discountValue}% OFF`))),
243
- React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[20px] text-[#c2c2c2]" }, "Antes"),
244
- React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[20px] text-[#9f9f9f] text-right", style: {
245
- position: "relative",
246
- display: "inline-block",
247
- overflow: "hidden",
248
- } },
249
- commonService.currency(discountSeat.originalPrice, currencySign),
250
- React.createElement("span", { style: {
251
- position: "absolute",
252
- top: "35%",
253
- left: "50%",
254
- width: "80%",
255
- height: "1px",
256
- background: "#9f9f9f",
257
- transform: "rotate(-12deg)",
258
- transformOrigin: "center",
259
- } })),
260
- React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[24px]", style: { color: isSoldOut ? "#bbb" : "#464647" } }, "Desde"),
234
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 &&
235
+ (discountValue != null || isMaxDiscountApplied) && (React.createElement(React.Fragment, null,
236
+ React.createElement("div", { className: "absolute -top-[18px] right-[0px]", style: {
237
+ animation: "pulse-zoom 2s ease-in-out infinite",
238
+ opacity: isSoldOut ? 0.5 : 1,
239
+ } },
240
+ React.createElement("span", { className: "rounded-[100px] px-[8px] text-[12px] bold-text leading-[20px] text-[#fff]", style: {
241
+ backgroundColor: tooltipBgColor,
242
+ } }, isMaxDiscountApplied
243
+ ? `${commonService.currency(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.max_discount)} OFF`
244
+ : `${discountValue}% OFF`)),
245
+ React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[20px] text-[#c2c2c2]" }, "Antes"),
246
+ React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[20px] text-[#9f9f9f] text-right", style: {
247
+ position: "relative",
248
+ display: "inline-block",
249
+ overflow: "hidden",
250
+ } },
251
+ commonService.currency(discountSeat.originalPrice, currencySign),
252
+ React.createElement("span", { style: {
253
+ position: "absolute",
254
+ top: "35%",
255
+ left: "50%",
256
+ width: "80%",
257
+ height: "1px",
258
+ background: discountSeatPriceColor,
259
+ transform: "rotate(-12deg)",
260
+ transformOrigin: "center",
261
+ } })))),
262
+ React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[24px]", style: { color: isSoldOut ? "#bbb" : "#464647" } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 ? discountSeat.label : "Desde"),
261
263
  React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: {
262
- color: isSoldOut ? "#bbb" : discountSeatPriceColor || "#ff5964",
264
+ color: isSoldOut
265
+ ? "#bbb"
266
+ : (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1
267
+ ? "#464647"
268
+ : discountSeatPriceColor || "#ff5964",
263
269
  } },
264
- ((_g = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _g === void 0 ? void 0 : _g.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { opacity: isSoldOut ? 0.5 : 1 } })) : null,
265
- commonService.discountedCurrency(discountSeat.discountedPrice, currencySign))))) : (React.createElement("div", { className: `flex flex-col justify-between ${isTrain ? "" : "h-[2.5rem]"} `, style: {
270
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 && ((_g = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _g === void 0 ? void 0 : _g.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { opacity: isSoldOut ? 0.5 : 1 } })) : null,
271
+ commonService.discountedCurrency((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1
272
+ ? discountSeat.originalPrice
273
+ : discountSeat.discountedPrice, currencySign))))) : (React.createElement("div", { className: `flex flex-col justify-between ${isTrain ? "" : "h-[2.5rem]"} `, style: {
266
274
  gap: isSoldOut ? "0px" : "5px",
267
275
  justifyContent: hasMultipleTypes ? "space-between" : "center",
268
276
  } },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "10.4.0",
3
+ "version": "10.4.2",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -221,9 +221,12 @@ function ServiceItemPB({
221
221
 
222
222
  const isItemExpanded = serviceItem.id === isExpand || isExpand === true;
223
223
  const grayscaleClass = isSoldOut ? "grayscale" : "";
224
- const hasOfferText = Boolean(serviceItem?.offer_text);
224
+ const isDiscountBelow20 =
225
+ (serviceItem as any)?.discount_value > 0 &&
226
+ (serviceItem as any)?.discount_value < 20;
227
+ const hasOfferText = Boolean(serviceItem?.offer_text) && !isDiscountBelow20;
225
228
  // const isNewUiEnabled = serviceItem?.discounts?.[0]?.new_ui_enabled === true;
226
- const isNewUiEnabled = serviceItem?.new_ui_enabled;
229
+ const isNewUiEnabled = serviceItem?.new_ui_enabled === true;
227
230
 
228
231
  const seats = removeDuplicateSeats
229
232
  ? serviceItem.seat_types?.filter(
@@ -539,7 +542,7 @@ function ServiceItemPB({
539
542
  />
540
543
  ) : (
541
544
  <div
542
- className={`relative hover:z-[150] ${(hasOfferText || (hasDpEnabled && serviceItem?.dp_discount_percents) || (isNewUiEnabled && serviceItem?.ui_type === 2)) && !isSoldOut ? "mb-[55px]" : "mb-[20px]"} ${
545
+ className={`relative hover:z-[150] ${((isNewUiEnabled && serviceItem?.ui_type === 1 && hasOfferText) || (hasDpEnabled && serviceItem?.dp_discount_percents) || (isNewUiEnabled && serviceItem?.ui_type === 2)) && !isSoldOut ? "mb-[55px]" : "mb-[20px]"} ${
543
546
  serviceItem?.is_direct_trip ||
544
547
  serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
545
548
  showTopLabel
@@ -547,7 +550,7 @@ function ServiceItemPB({
547
550
  : "mt-[20px]"
548
551
  } `}
549
552
  >
550
- {(serviceItem?.offer_text ||
553
+ {((isNewUiEnabled && serviceItem?.ui_type === 1 && hasOfferText) ||
551
554
  (hasDpEnabled && serviceItem?.dp_discount_percents) ||
552
555
  (isNewUiEnabled && serviceItem?.ui_type === 2)) &&
553
556
  !isSoldOut && (
@@ -587,7 +590,13 @@ function ServiceItemPB({
587
590
  style={{
588
591
  padding:
589
592
  (hasDpEnabled && serviceItem?.dp_discount_percents) ||
590
- (isNewUiEnabled && serviceItem?.ui_type === 2 && !isSoldOut)
593
+ (isNewUiEnabled &&
594
+ serviceItem?.ui_type === 2 &&
595
+ !isSoldOut) ||
596
+ (isNewUiEnabled &&
597
+ serviceItem?.ui_type === 1 &&
598
+ hasOfferText &&
599
+ !isSoldOut)
591
600
  ? "20px 15px 10px 15px"
592
601
  : coachKey
593
602
  ? "20px 15px 20px 15px"
package/src/components/ServiceItem/ServiceItemMobile.tsx CHANGED
@@ -89,7 +89,8 @@ function ServiceItemMobile({
89
89
  const isLongOfferText = (serviceItem?.offer_text?.length || 0) > 35;
90
90
  const hasDpEnabled = serviceItem?.is_dp_enabled === true;
91
91
 
92
- const hasOfferText = Boolean(serviceItem?.offer_text);
92
+ const isDiscountBelow20 = (serviceItem as any)?.discount_value > 0 && (serviceItem as any)?.discount_value < 20;
93
+ const hasOfferText = Boolean(serviceItem?.offer_text) && !isDiscountBelow20;
93
94
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
94
95
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
95
96
  const serviceCardStyle: React.CSSProperties =
@@ -227,7 +228,7 @@ function ServiceItemMobile({
227
228
  />
228
229
  ) : (
229
230
  <div
230
- className={`relative ${!serviceItem.offer_text || !serviceItem?.is_dp_enabled ? "mb-[14px]" : showTopLabel || serviceItem?.is_direct_trip ? "mb-[20px]" : "mb-[12px]"} ${
231
+ className={`relative ${!hasOfferText || !serviceItem?.is_dp_enabled ? "mb-[14px]" : showTopLabel || serviceItem?.is_direct_trip ? "mb-[20px]" : "mb-[12px]"} ${
231
232
  serviceItem?.is_direct_trip ||
232
233
  isConexion ||
233
234
  serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
@@ -412,8 +413,8 @@ function ServiceItemMobile({
412
413
  </div>
413
414
 
414
415
  {/* 🔹 EXPANDABLE DROPDOWN (below the card) */}
415
- {serviceItem?.offer_text &&
416
- (!isNewUiEnabled || serviceItem?.ui_type === 1) &&
416
+ {hasOfferText &&
417
+ (isNewUiEnabled && serviceItem?.ui_type === 1) &&
417
418
  !isSoldOut &&
418
419
  !serviceItem?.is_dp_enabled && (
419
420
  <div
@@ -573,7 +574,7 @@ function ServiceItemMobile({
573
574
  "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
574
575
  position: "relative",
575
576
  zIndex:
576
- serviceItem?.offer_text ||
577
+ hasOfferText ||
577
578
  (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents) ||
578
579
  (isNewUiEnabled && serviceItem?.ui_type === 2)
579
580
  ? -2
@@ -585,7 +586,7 @@ function ServiceItemMobile({
585
586
  overflow: "hidden",
586
587
  minHeight: 0,
587
588
  position:
588
- serviceItem?.offer_text ||
589
+ hasOfferText ||
589
590
  isNewUiEnabled ||
590
591
  serviceItem?.is_dp_enabled
591
592
  ? "relative"
@@ -596,7 +597,7 @@ function ServiceItemMobile({
596
597
  (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)
597
598
  ? -3
598
599
  : undefined,
599
- marginTop: serviceItem?.offer_text ? "-15px" : "-10px",
600
+ marginTop: hasOfferText ? "-15px" : "-10px",
600
601
  }}
601
602
  >
602
603
  <ExpandedDropdownMobile
package/src/ui/OfferBanner.tsx CHANGED
@@ -225,9 +225,13 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
225
225
  coachKey,
226
226
  isExpand,
227
227
  }) => {
228
+ const isDiscountBelow20 = (serviceItem as any)?.discount_value > 0 && (serviceItem as any)?.discount_value < 20;
229
+ const offerText = isDiscountBelow20 ? "" : serviceItem?.offer_text || "";
230
+
228
231
  const isLegacyOffer =
229
- !!serviceItem?.offer_text &&
230
- (!isNewUiEnabled || serviceItem?.ui_type === 1) &&
232
+ !!offerText &&
233
+ isNewUiEnabled &&
234
+ serviceItem?.ui_type === 1 &&
231
235
  !serviceItem?.is_dp_enabled;
232
236
 
233
237
  const isDpEnabledWithoutDiscounts =
@@ -247,7 +251,7 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
247
251
  if (isLegacyOffer) {
248
252
  return (
249
253
  <LegacyOfferBanner
250
- offerText={serviceItem.offer_text!}
254
+ offerText={offerText}
251
255
  getAnimationIcon={getAnimationIcon}
252
256
  />
253
257
  );
@@ -255,13 +259,10 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
255
259
 
256
260
  const hasDp = hasDpDiscounts(serviceItem);
257
261
 
258
- if (
259
- (isNewUiEnabled && serviceItem?.ui_type === 2) ||
260
- serviceItem?.offer_text
261
- ) {
262
+ if (isNewUiEnabled && serviceItem?.ui_type === 2) {
262
263
  return (
263
264
  <NewUiOfferBanner
264
- offerText={serviceItem.offer_text || ""}
265
+ offerText={offerText}
265
266
  isLoggedIn={isLoggedIn}
266
267
  showLoginModal={showLoginModal}
267
268
  showLoginOption={showLoginOption}
package/src/ui/SeatSection/SeatSection.tsx CHANGED
@@ -159,7 +159,6 @@ function SeatSection({
159
159
 
160
160
  const renderSeatNames = () => {
161
161
  const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
162
- console.log("🚀 ~ renderSeatNames ~ removeDuplicateSeats:", seats);
163
162
 
164
163
  return seats.map((val, key: number) => {
165
164
  return SEAT_EXCEPTIONS.includes(val.label) ? null : (
@@ -525,7 +524,7 @@ function SeatSection({
525
524
  top: "50%",
526
525
  width: "calc(100% + 4px)",
527
526
  height: "1px",
528
- backgroundColor: "#9f9f9f",
527
+ backgroundColor: discountSeatPriceColor,
529
528
  transform: "rotate(-10deg)",
530
529
  transformOrigin: "center",
531
530
  }}
@@ -633,15 +632,17 @@ function SeatSection({
633
632
  className="grid grid-cols-2 items-center text-[13.33px] relative"
634
633
  style={{ opacity: isSoldOut ? 0.5 : 1 }}
635
634
  >
636
- <div className="col-start-1 row-start-2 flex items-center">
637
- <span className="text-[13.33px] font-normal leading-[22px] text-[#ccc]">
638
- Antes
639
- </span>
640
- </div>
635
+ {serviceItem?.ui_type === 1 ? null : (
636
+ <div className="col-start-1 row-start-2 flex items-center">
637
+ <span className="text-[13.33px] font-normal leading-[22px] text-[#ccc]">
638
+ Antes
639
+ </span>
640
+ </div>
641
+ )}
641
642
 
642
643
  <div className="col-start-1 row-start-3 flex h-[20px] items-end">
643
644
  <span className="text-[13.33px] font-normal leading-[20px] text-[#464647]">
644
- Desde
645
+ {serviceItem?.ui_type === 1 ? discountSeat.label : "Desde"}
645
646
  </span>
646
647
  </div>
647
648
 
@@ -649,67 +650,83 @@ function SeatSection({
649
650
  className="col-start-2 row-start-1 flex items-center justify-center absolute"
650
651
  style={{ top: "-22px", left: "50%", transform: "translateX(-50%)" }}
651
652
  >
652
- {(discountValue != null || isMaxDiscountApplied) && (
653
- <span
654
- className="rounded-[100px] bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white"
655
- style={{
656
- animation: "pulse-zoom 2s ease-in-out infinite",
657
- whiteSpace: "nowrap",
658
- backgroundColor: discountSeatPriceColor,
659
- }}
660
- >
661
- {isMaxDiscountApplied
662
- ? `${currencySign || "$"}${serviceItem?.max_discount}`
663
- : `${discountValue}% OFF`}
664
- </span>
665
- )}
653
+ {serviceItem?.ui_type !== 1 &&
654
+ (discountValue != null || isMaxDiscountApplied) && (
655
+ <span
656
+ className="rounded-[100px] bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white"
657
+ style={{
658
+ animation: "pulse-zoom 2s ease-in-out infinite",
659
+ whiteSpace: "nowrap",
660
+ backgroundColor: discountSeatPriceColor,
661
+ }}
662
+ >
663
+ {isMaxDiscountApplied
664
+ ? `${CommonService.currency(serviceItem?.max_discount)} OFF`
665
+ : `${discountValue}% OFF`}
666
+ </span>
667
+ )}
666
668
  </div>
667
669
 
668
- <div
669
- className="col-start-2 row-start-2 flex items-center justify-center "
670
- style={{ textAlign: "center" }}
671
- >
672
- <span
673
- className="text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative whitespace-nowrap"
674
- style={{
675
- position: "relative",
676
- }}
670
+ {serviceItem?.ui_type === 1 ? null : (
671
+ <div
672
+ className="col-start-2 row-start-2 flex items-center justify-center "
673
+ style={{ textAlign: "center" }}
677
674
  >
678
- {formatPrice(discountSeat.originalPrice)}
679
675
  <span
676
+ className="text-[13.33px] font-normal leading-[20px] relative whitespace-nowrap"
680
677
  style={{
681
- position: "absolute",
682
- left: "-2px",
683
- top: "50%",
684
- width: "calc(100% + 4px)",
685
- height: "1px",
686
- backgroundColor: "#9f9f9f",
687
- transform: "rotate(-10deg)",
688
- transformOrigin: "center",
678
+ position: "relative",
679
+ color: discountSeatPriceColor,
689
680
  }}
690
- />
691
- </span>
692
- </div>
681
+ >
682
+ {formatPrice(discountSeat.originalPrice)}
683
+ <span
684
+ style={{
685
+ position: "absolute",
686
+ left: "-2px",
687
+ top: "50%",
688
+ width: "calc(100% + 4px)",
689
+ height: "1px",
690
+ backgroundColor: discountSeatPriceColor,
691
+ transform: "rotate(-10deg)",
692
+ transformOrigin: "center",
693
+ }}
694
+ />
695
+ </span>
696
+ </div>
697
+ )}
693
698
 
694
699
  <div className="col-start-2 row-start-3 flex h-[30px] items-end justify-center relative">
695
700
  <span
696
- className="flex items-center gap-[6px] text-[22px] bold-text leading-[30px]"
697
- style={{ color: isSoldOut ? "#c0c0c0" : discountSeatPriceColor }}
701
+ className="flex items-center gap-[6px] bold-text leading-[30px]"
702
+ style={{
703
+ color: isSoldOut
704
+ ? "#c0c0c0"
705
+ : serviceItem?.ui_type === 1
706
+ ? "#464647"
707
+ : discountSeatPriceColor,
708
+
709
+ fontSize: serviceItem?.ui_type === 1 ? "13.33px" : "22px",
710
+ }}
698
711
  >
699
712
  {/* <span className="text-[18px] leading-[24px]">🔥</span> */}
700
- <div
701
- className="absolute"
702
- style={{
703
- left: isPeru ? "-16px" : "-18px",
704
- bottom: "1px",
705
- }}
706
- >
707
- {renderIcon("fireIcon", "16px")}
708
- </div>
713
+ {serviceItem?.ui_type !== 1 && (
714
+ <div
715
+ className="absolute"
716
+ style={{
717
+ left: isPeru ? "-16px" : "-18px",
718
+ bottom: "1px",
719
+ }}
720
+ >
721
+ {renderIcon("fireIcon", "16px")}
722
+ </div>
723
+ )}
709
724
  {availableSeats <= 0
710
725
  ? CommonService.currency(0, currencySign)
711
726
  : CommonService.discountedCurrency(
712
- discountSeat.discountedPrice,
727
+ serviceItem?.ui_type === 1
728
+ ? discountSeat.originalPrice
729
+ : discountSeat.discountedPrice,
713
730
  currencySign,
714
731
  )}
715
732
  </span>
package/src/ui/mobileweb/SeatSectionMobile.tsx CHANGED
@@ -507,7 +507,7 @@ function SeatSectionMobile({
507
507
  left: "50%",
508
508
  width: "80%",
509
509
  height: "1px",
510
- background: "#9f9f9f",
510
+ background: discountSeatPriceColor,
511
511
  transform: "rotate(-12deg)",
512
512
  transformOrigin: "center",
513
513
  }}
@@ -549,66 +549,76 @@ function SeatSectionMobile({
549
549
  ) : hasDiscount && discountSeat ? (
550
550
  <div>
551
551
  <div className="relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] ">
552
- {(discountValue != null || isMaxDiscountApplied) && (
553
- <div
554
- className="absolute -top-[18px] right-[0px]"
555
- style={{
556
- animation: "pulse-zoom 2s ease-in-out infinite",
557
- opacity: isSoldOut ? 0.5 : 1,
558
- }}
559
- >
560
- <span
561
- className="rounded-[100px] px-[8px] text-[12px] bold-text leading-[20px] text-[#fff]"
562
- style={{
563
- backgroundColor: tooltipBgColor,
564
- }}
565
- >
566
- {isMaxDiscountApplied
567
- ? `${currencySign || "$"}${serviceItem?.max_discount}`
568
- : `${discountValue}% OFF`}
569
- </span>
570
- </div>
571
- )}
572
-
573
- <span className="min-[420]:text-[13px] text-[12px] leading-[20px] text-[#c2c2c2]">
574
- Antes
575
- </span>
576
- <span
577
- className="min-[420]:text-[13px] text-[12px] leading-[20px] text-[#9f9f9f] text-right"
578
- style={{
579
- position: "relative",
580
- display: "inline-block",
581
- overflow: "hidden",
582
- }}
583
- >
584
- {commonService.currency(discountSeat.originalPrice, currencySign)}
585
- <span
586
- style={{
587
- position: "absolute",
588
- top: "35%",
589
- left: "50%",
590
- width: "80%",
591
- height: "1px",
592
- background: "#9f9f9f",
593
- transform: "rotate(-12deg)",
594
- transformOrigin: "center",
595
- }}
596
- />
597
- </span>
552
+ {serviceItem?.ui_type !== 1 &&
553
+ (discountValue != null || isMaxDiscountApplied) && (
554
+ <>
555
+ <div
556
+ className="absolute -top-[18px] right-[0px]"
557
+ style={{
558
+ animation: "pulse-zoom 2s ease-in-out infinite",
559
+ opacity: isSoldOut ? 0.5 : 1,
560
+ }}
561
+ >
562
+ <span
563
+ className="rounded-[100px] px-[8px] text-[12px] bold-text leading-[20px] text-[#fff]"
564
+ style={{
565
+ backgroundColor: tooltipBgColor,
566
+ }}
567
+ >
568
+ {isMaxDiscountApplied
569
+ ? `${commonService.currency(serviceItem?.max_discount)} OFF`
570
+ : `${discountValue}% OFF`}
571
+ </span>
572
+ </div>
573
+
574
+ <span className="min-[420]:text-[13px] text-[12px] leading-[20px] text-[#c2c2c2]">
575
+ Antes
576
+ </span>
577
+ <span
578
+ className="min-[420]:text-[13px] text-[12px] leading-[20px] text-[#9f9f9f] text-right"
579
+ style={{
580
+ position: "relative",
581
+ display: "inline-block",
582
+ overflow: "hidden",
583
+ }}
584
+ >
585
+ {commonService.currency(
586
+ discountSeat.originalPrice,
587
+ currencySign,
588
+ )}
589
+ <span
590
+ style={{
591
+ position: "absolute",
592
+ top: "35%",
593
+ left: "50%",
594
+ width: "80%",
595
+ height: "1px",
596
+ background: discountSeatPriceColor,
597
+ transform: "rotate(-12deg)",
598
+ transformOrigin: "center",
599
+ }}
600
+ />
601
+ </span>
602
+ </>
603
+ )}
598
604
 
599
605
  <span
600
606
  className="min-[420]:text-[13px] text-[12px] leading-[24px]"
601
607
  style={{ color: isSoldOut ? "#bbb" : "#464647" }}
602
608
  >
603
- Desde
609
+ {serviceItem?.ui_type === 1 ? discountSeat.label : "Desde"}
604
610
  </span>
605
611
  <span
606
612
  className="flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]"
607
613
  style={{
608
- color: isSoldOut ? "#bbb" : discountSeatPriceColor || "#ff5964",
614
+ color: isSoldOut
615
+ ? "#bbb"
616
+ : serviceItem?.ui_type === 1
617
+ ? "#464647"
618
+ : discountSeatPriceColor || "#ff5964",
609
619
  }}
610
620
  >
611
- {serviceItem?.icons?.fireIcon ? (
621
+ {serviceItem?.ui_type !== 1 && serviceItem?.icons?.fireIcon ? (
612
622
  <img
613
623
  src={serviceItem.icons.fireIcon}
614
624
  alt="discount"
@@ -618,7 +628,9 @@ function SeatSectionMobile({
618
628
  ) : null}
619
629
  {/* {commonService.currency(discountSeat.discountedPrice, currencySign)} */}
620
630
  {commonService.discountedCurrency(
621
- discountSeat.discountedPrice,
631
+ serviceItem?.ui_type === 1
632
+ ? discountSeat.originalPrice
633
+ : discountSeat.discountedPrice,
622
634
  currencySign,
623
635
  )}
624
636
  </span>