kupos-ui-components-lib 10.4.0 → 10.4.1

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 +5 -5
  5. package/dist/ui/mobileweb/SeatSectionMobile.js +3 -3
  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 +5 -5
  11. package/src/ui/mobileweb/SeatSectionMobile.tsx +3 -3
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
  } }))),
@@ -335,11 +334,12 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
335
334
  whiteSpace: "nowrap",
336
335
  backgroundColor: discountSeatPriceColor,
337
336
  } }, isMaxDiscountApplied
338
- ? `${currencySign || "$"}${serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.max_discount}`
337
+ ? `${CommonService.currency(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.max_discount)} OFF`
339
338
  : `${discountValue}% OFF`))),
340
339
  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
+ React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] relative whitespace-nowrap", style: {
342
341
  position: "relative",
342
+ color: discountSeatPriceColor,
343
343
  } },
344
344
  formatPrice(discountSeat.originalPrice),
345
345
  React.createElement("span", { style: {
@@ -348,7 +348,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
348
348
  top: "50%",
349
349
  width: "calc(100% + 4px)",
350
350
  height: "1px",
351
- backgroundColor: "#9f9f9f",
351
+ backgroundColor: discountSeatPriceColor,
352
352
  transform: "rotate(-10deg)",
353
353
  transformOrigin: "center",
354
354
  } }))),
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
  } })),
@@ -238,7 +238,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
238
238
  React.createElement("span", { className: "rounded-[100px] px-[8px] text-[12px] bold-text leading-[20px] text-[#fff]", style: {
239
239
  backgroundColor: tooltipBgColor,
240
240
  } }, isMaxDiscountApplied
241
- ? `${currencySign || "$"}${serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.max_discount}`
241
+ ? `${commonService.currency(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.max_discount)} OFF`
242
242
  : `${discountValue}% OFF`))),
243
243
  React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[20px] text-[#c2c2c2]" }, "Antes"),
244
244
  React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[20px] text-[#9f9f9f] text-right", style: {
@@ -253,7 +253,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
253
253
  left: "50%",
254
254
  width: "80%",
255
255
  height: "1px",
256
- background: "#9f9f9f",
256
+ background: discountSeatPriceColor,
257
257
  transform: "rotate(-12deg)",
258
258
  transformOrigin: "center",
259
259
  } })),
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.1",
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
  }}
@@ -659,7 +658,7 @@ function SeatSection({
659
658
  }}
660
659
  >
661
660
  {isMaxDiscountApplied
662
- ? `${currencySign || "$"}${serviceItem?.max_discount}`
661
+ ? `${CommonService.currency(serviceItem?.max_discount)} OFF`
663
662
  : `${discountValue}% OFF`}
664
663
  </span>
665
664
  )}
@@ -670,9 +669,10 @@ function SeatSection({
670
669
  style={{ textAlign: "center" }}
671
670
  >
672
671
  <span
673
- className="text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative whitespace-nowrap"
672
+ className="text-[13.33px] font-normal leading-[20px] relative whitespace-nowrap"
674
673
  style={{
675
674
  position: "relative",
675
+ color: discountSeatPriceColor,
676
676
  }}
677
677
  >
678
678
  {formatPrice(discountSeat.originalPrice)}
@@ -683,7 +683,7 @@ function SeatSection({
683
683
  top: "50%",
684
684
  width: "calc(100% + 4px)",
685
685
  height: "1px",
686
- backgroundColor: "#9f9f9f",
686
+ backgroundColor: discountSeatPriceColor,
687
687
  transform: "rotate(-10deg)",
688
688
  transformOrigin: "center",
689
689
  }}
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
  }}
@@ -564,7 +564,7 @@ function SeatSectionMobile({
564
564
  }}
565
565
  >
566
566
  {isMaxDiscountApplied
567
- ? `${currencySign || "$"}${serviceItem?.max_discount}`
567
+ ? `${commonService.currency(serviceItem?.max_discount)} OFF`
568
568
  : `${discountValue}% OFF`}
569
569
  </span>
570
570
  </div>
@@ -589,7 +589,7 @@ function SeatSectionMobile({
589
589
  left: "50%",
590
590
  width: "80%",
591
591
  height: "1px",
592
- background: "#9f9f9f",
592
+ background: discountSeatPriceColor,
593
593
  transform: "rotate(-12deg)",
594
594
  transformOrigin: "center",
595
595
  }}