kupos-ui-components-lib 10.3.10 → 10.4.0

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 (16) hide show
  1. package/dist/components/ServiceItem/ServiceItemDesktop.js +17 -10
  2. package/dist/components/ServiceItem/ServiceItemMobile.js +9 -9
  3. package/dist/components/ServiceItem/mobileTypes.d.ts +1 -0
  4. package/dist/components/ServiceItem/types.d.ts +3 -0
  5. package/dist/ui/OfferBanner.d.ts +2 -1
  6. package/dist/ui/OfferBanner.js +23 -16
  7. package/dist/ui/SeatSection/SeatSection.js +4 -4
  8. package/dist/ui/mobileweb/SeatSectionMobile.js +4 -4
  9. package/package.json +1 -1
  10. package/src/components/ServiceItem/ServiceItemDesktop.tsx +15 -8
  11. package/src/components/ServiceItem/ServiceItemMobile.tsx +9 -9
  12. package/src/components/ServiceItem/mobileTypes.ts +1 -0
  13. package/src/components/ServiceItem/types.ts +3 -0
  14. package/src/ui/OfferBanner.tsx +46 -24
  15. package/src/ui/SeatSection/SeatSection.tsx +4 -2
  16. package/src/ui/mobileweb/SeatSectionMobile.tsx +4 -2
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -88,7 +88,7 @@ const ANIMATION_MAP = {
88
88
  },
89
89
  };
90
90
  function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t = (key) => key, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel, }) {
91
- var _a, _b, _c;
91
+ var _a;
92
92
  const handleSeatSelect = (key, price, seatKey, apiSeatType) => {
93
93
  onClearSeatSelectionError === null || onClearSeatSelectionError === void 0 ? void 0 : onClearSeatSelectionError();
94
94
  onSeatSelect === null || onSeatSelect === void 0 ? void 0 : onSeatSelect(key, price, seatKey, apiSeatType);
@@ -127,9 +127,10 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
127
127
  const isItemExpanded = serviceItem.id === isExpand || isExpand === true;
128
128
  const grayscaleClass = isSoldOut ? "grayscale" : "";
129
129
  const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text);
130
- const isNewUiEnabled = ((_b = (_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discounts) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.new_ui_enabled) === true;
130
+ // const isNewUiEnabled = serviceItem?.discounts?.[0]?.new_ui_enabled === true;
131
+ const isNewUiEnabled = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.new_ui_enabled;
131
132
  const seats = removeDuplicateSeats
132
- ? ((_c = serviceItem.seat_types) === null || _c === void 0 ? void 0 : _c.filter((seat, index, self) => index === self.findIndex((s) => s.label === seat.label))) || []
133
+ ? ((_a = serviceItem.seat_types) === null || _a === void 0 ? void 0 : _a.filter((seat, index, self) => index === self.findIndex((s) => s.label === seat.label))) || []
133
134
  : serviceItem.seat_types || [];
134
135
  const discountedSeats = seats.map((seat) => (Object.assign(Object.assign({}, seat), CommonService.calculateDiscountedPrice(seat.fare, serviceItem))));
135
136
  const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
@@ -156,7 +157,9 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
156
157
  const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true;
157
158
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
158
159
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
159
- const serviceCardStyle = (isNewUiEnabled || hasDpEnabled) && !isSoldOut
160
+ const serviceCardStyle = ((isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
161
+ (hasDpEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))) &&
162
+ !isSoldOut
160
163
  ? {
161
164
  borderColor: "transparent",
162
165
  borderStyle: "solid",
@@ -293,24 +296,28 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
293
296
  setIsFeatureDropDownExpand(isFeatureDropDownExpand === serviceItem.id ||
294
297
  isFeatureDropDownExpand === true
295
298
  ? null
296
- : serviceItem.id), selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle, wowDealData: wowDealData })) : (React.createElement("div", { className: `relative hover:z-[150] ${(hasOfferText || hasDpEnabled || isNewUiEnabled) && !isSoldOut ? "mb-[55px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
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) ||
297
300
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
298
301
  showTopLabel
299
302
  ? "mt-[25px]"
300
303
  : "mt-[20px]"} ` },
301
- ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDpEnabled || isNewUiEnabled) &&
304
+ ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ||
305
+ (hasDpEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents)) ||
306
+ (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2)) &&
302
307
  !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 })),
303
- React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${(isNewUiEnabled || hasDpEnabled) && !isSoldOut
308
+ React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${((isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
309
+ (hasDpEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))) &&
310
+ !isSoldOut
304
311
  ? "z-[3] rounded-[18px]"
305
312
  : "rounded-[10px] border border-[#ccc]"}`, style: Object.assign(Object.assign({}, serviceCardStyle), { zIndex: hasOfferText ? 1 : undefined }) },
306
313
  React.createElement("div", { className: " pt-[20px]", style: {
307
- padding: hasDpEnabled || (isNewUiEnabled && !isSoldOut)
314
+ 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)
308
316
  ? "20px 15px 10px 15px"
309
317
  : coachKey
310
318
  ? "20px 15px 20px 15px"
311
319
  : "20px 15px 10px 15px",
312
- marginTop: (hasDiscount || hasOfferText || dpDiscountPercent) &&
313
- !isMaxDiscountApplied
320
+ marginTop: hasDiscount || hasOfferText || dpDiscountPercent
314
321
  ? "14px"
315
322
  : "",
316
323
  } },
package/dist/components/ServiceItem/ServiceItemMobile.js CHANGED
@@ -34,7 +34,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
34
34
  const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text);
35
35
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
36
36
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
37
- const serviceCardStyle = isNewUiEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
37
+ 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))
38
38
  ? {
39
39
  borderColor: isSoldOut ? "#ccc" : "transparent",
40
40
  borderStyle: "solid",
@@ -112,8 +112,8 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
112
112
  boardingName
113
113
  ? "mt-[20px]"
114
114
  : "mt-[10px]"} `, style: { zIndex: 1 } },
115
- React.createElement("div", { className: `z-1 ${((hasOfferText && isNewUiEnabled) ||
116
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)) &&
115
+ React.createElement("div", { className: `z-1 ${((isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
116
+ ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))) &&
117
117
  !isSoldOut
118
118
  ? "rounded-[18px]"
119
119
  : "rounded-[10px] border border-[#ccc]"}`, style: Object.assign(Object.assign({}, serviceCardStyle), { backgroundColor: "#fff" }) },
@@ -150,7 +150,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
150
150
  }, isPeru: isPeru, femaleAnim: serviceItem.icons.femaleAnim, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, isTrain: isTrain })),
151
151
  React.createElement(ServiceBadgesMobile, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, serviceItem: serviceItem, isConexion: isConexion, isAllinBus: isAllinBus, boardingName: boardingName })),
152
152
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) &&
153
- !isNewUiEnabled &&
153
+ (!isNewUiEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1) &&
154
154
  !isSoldOut &&
155
155
  !(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
156
  background: colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
@@ -167,7 +167,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
167
167
  lineHeight: 1.4,
168
168
  } },
169
169
  React.createElement("span", { className: "whitespace-nowrap min-[380px]:text-[12px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))))))),
170
- (isNewUiEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)) && !isSoldOut && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
170
+ ((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))) && !isSoldOut && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
171
171
  background: isSoldOut
172
172
  ? offerGradientWithOpacity
173
173
  : offerGradient,
@@ -219,8 +219,8 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
219
219
  transition: "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
220
220
  position: "relative",
221
221
  zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ||
222
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ||
223
- isNewUiEnabled
222
+ ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents)) ||
223
+ (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2)
224
224
  ? -2
225
225
  : -1,
226
226
  } },
@@ -233,8 +233,8 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
233
233
  ? "relative"
234
234
  : undefined,
235
235
  zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ||
236
- isNewUiEnabled ||
237
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
236
+ (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
237
+ ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
238
238
  ? -3
239
239
  : undefined,
240
240
  marginTop: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "-15px" : "-10px",
package/dist/components/ServiceItem/mobileTypes.d.ts CHANGED
@@ -45,6 +45,7 @@ export interface MobileServiceItemProps {
45
45
  dep_validation_text?: string;
46
46
  discount_type?: string;
47
47
  discount_value?: number;
48
+ ui_type?: number;
48
49
  max_discount?: number;
49
50
  discounts?: Array<{
50
51
  id?: number;
package/dist/components/ServiceItem/types.d.ts CHANGED
@@ -36,6 +36,7 @@ export interface ServiceItemProps {
36
36
  change_ticket_hours?: number;
37
37
  duration?: number;
38
38
  train_type_label?: string;
39
+ show_register_button?: boolean;
39
40
  offer_text?: string;
40
41
  is_direct_trip?: boolean;
41
42
  is_dp_enabled?: boolean;
@@ -45,6 +46,7 @@ export interface ServiceItemProps {
45
46
  discount_type?: string;
46
47
  discount_value?: number;
47
48
  max_discount?: number;
49
+ ui_type?: number;
48
50
  discounts?: Array<{
49
51
  new_ui_enabled?: boolean;
50
52
  }>;
@@ -53,6 +55,7 @@ export interface ServiceItemProps {
53
55
  operator_service_name?: string;
54
56
  ladies_booked_seats?: string;
55
57
  dep_validation_text?: string;
58
+ new_ui_enabled?: boolean;
56
59
  metaData?: {};
57
60
  is_tracking_enabled?: boolean;
58
61
  show_top_label?: boolean;
package/dist/ui/OfferBanner.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  import { ServiceItemProps } from "../components/ServiceItem/types";
3
- type ServiceItemSlice = Pick<ServiceItemProps["serviceItem"], "is_dp_enabled" | "offer_text" | "dp_discount_percents" | "dp_discounted_seats">;
3
+ type ServiceItemSlice = Pick<ServiceItemProps["serviceItem"], "is_dp_enabled" | "offer_text" | "dp_discount_percents" | "dp_discounted_seats" | "show_register_button" | "ui_type">;
4
4
  interface OfferBannerColors {
5
5
  bottomStripColor?: string;
6
6
  }
@@ -19,6 +19,7 @@ interface OfferBannerProps {
19
19
  isLinatal?: boolean;
20
20
  coachKey?: number;
21
21
  isExpand?: any;
22
+ ui_type?: number;
22
23
  }
23
24
  declare const OfferBanner: React.FC<OfferBannerProps>;
24
25
  export default OfferBanner;
package/dist/ui/OfferBanner.js CHANGED
@@ -18,20 +18,20 @@ const AnimationIcon = ({ getAnimationIcon, name, width = "18px", height = "18px"
18
18
  const PopularServiceBanner = ({ getAnimationIcon }) => (React.createElement("div", { className: "flex items-center gap-[5px]" },
19
19
  React.createElement(AnimationIcon, { getAnimationIcon: getAnimationIcon, name: "starAnimation" }),
20
20
  React.createElement("span", null, "Servicio popular entre los usuarios")));
21
- const NewUiOfferBanner = ({ offerText, isLoggedIn, showLoginModal, showLoginOption, getAnimationIcon, hideRegister, isNewUiEnabled, }) => (React.createElement("div", { className: "flex items-center" },
21
+ const NewUiOfferBanner = ({ offerText, isLoggedIn, showLoginModal, showLoginOption, getAnimationIcon, hideRegister, isNewUiEnabled, showLoginButton, ui_type, }) => (React.createElement("div", { className: "flex items-center" },
22
22
  React.createElement(AnimationIcon, { getAnimationIcon: getAnimationIcon, name: "bombAnimation" }),
23
23
  React.createElement("div", { className: "flex items-center mt-[2px]" },
24
24
  React.createElement("span", { className: "bold-text", style: { marginLeft: offerText ? "6px" : "3px" } },
25
- truncateOfferText(offerText),
25
+ ui_type === 2 ? null : offerText,
26
26
  " ",
27
- !hideRegister &&
28
- ((isLoggedIn && showLoginOption) || isNewUiEnabled
29
- ? null
30
- : showLoginOption && (React.createElement("span", { onClick: showLoginModal, className: "cursor-pointer" }, "- registro"))),
27
+ isLoggedIn && showLoginOption
28
+ ? null
29
+ : showLoginOption &&
30
+ showLoginButton && (React.createElement("span", { onClick: showLoginModal, className: "cursor-pointer" }, "- registro")),
31
31
  " ",
32
32
  "\u00A0"),
33
33
  " ",
34
- offerText ? "| " : "",
34
+ offerText && ui_type !== 2 ? "| " : ui_type === 2 ? "" : "",
35
35
  "Termina en\u00A0",
36
36
  React.createElement("span", { className: "bold-text text-end", ref: (node) => CommonService.startCountdown(node, 599), style: { fontVariantNumeric: "tabular-nums", display: "inline-block" } }))));
37
37
  const LegacyOfferBanner = ({ offerText, getAnimationIcon, }) => (React.createElement("div", { className: "flex items-center" },
@@ -57,25 +57,32 @@ 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) && !isNewUiEnabled && !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled);
61
- const isDpEnabledWithoutDiscounts = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && !hasDpDiscounts(serviceItem);
62
- const showViewers = isNewUiEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled);
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) &&
62
+ !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled);
63
+ const isDpEnabledWithoutDiscounts = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && hasDpDiscounts(serviceItem);
64
+ const showViewers = (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1) ||
65
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled);
63
66
  const background = isLegacyOffer ? colors === null || colors === void 0 ? void 0 : colors.bottomStripColor : offerGradient;
64
67
  const renderLeftContent = () => {
65
- if (isDpEnabledWithoutDiscounts) {
68
+ if (isDpEnabledWithoutDiscounts || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)) {
66
69
  return React.createElement(PopularServiceBanner, { getAnimationIcon: getAnimationIcon });
67
70
  }
68
- const hasDp = hasDpDiscounts(serviceItem);
69
- if (hasDp || isNewUiEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text)) {
70
- return (React.createElement(NewUiOfferBanner, { offerText: serviceItem.offer_text || "", isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, showLoginOption: showLoginOption, getAnimationIcon: getAnimationIcon, hideRegister: hasDp, isNewUiEnabled: isNewUiEnabled }));
71
- }
72
71
  if (isLegacyOffer) {
73
72
  return (React.createElement(LegacyOfferBanner, { offerText: serviceItem.offer_text, getAnimationIcon: getAnimationIcon }));
74
73
  }
74
+ 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
+ }
75
79
  return null;
76
80
  };
77
81
  return (React.createElement("div", { className: `text-white w-full absolute ${coachKey ? "-bottom-[32px]" : isExpand ? "-bottom-[32px]" : "-bottom-[40px]"} rounded-b-[14px] text-[14px] h-[58px] flex items-end pb-[7px]`, style: {
78
- background,
82
+ background: (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
83
+ ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
84
+ ? offerGradient
85
+ : background,
79
86
  opacity: isSoldOut ? 0.5 : 1,
80
87
  zIndex: isLinatal ? "-1" : "0",
81
88
  } },
package/dist/ui/SeatSection/SeatSection.js CHANGED
@@ -330,13 +330,13 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
330
330
  React.createElement("span", { className: "text-[13.33px] font-normal leading-[22px] text-[#ccc]" }, "Antes")),
331
331
  React.createElement("div", { className: "col-start-1 row-start-3 flex h-[20px] items-end" },
332
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: {
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: {
334
334
  animation: "pulse-zoom 2s ease-in-out infinite",
335
335
  whiteSpace: "nowrap",
336
336
  backgroundColor: discountSeatPriceColor,
337
- } },
338
- discountValue,
339
- "% OFF"))),
337
+ } }, isMaxDiscountApplied
338
+ ? `${currencySign || "$"}${serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.max_discount}`
339
+ : `${discountValue}% OFF`))),
340
340
  React.createElement("div", { className: "col-start-2 row-start-2 flex items-center justify-center ", style: { textAlign: "center" } },
341
341
  React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative whitespace-nowrap", style: {
342
342
  position: "relative",
package/dist/ui/mobileweb/SeatSectionMobile.js CHANGED
@@ -231,15 +231,15 @@ 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: {
234
+ (discountValue != null || isMaxDiscountApplied) && (React.createElement("div", { className: "absolute -top-[18px] right-[0px]", style: {
235
235
  animation: "pulse-zoom 2s ease-in-out infinite",
236
236
  opacity: isSoldOut ? 0.5 : 1,
237
237
  } },
238
238
  React.createElement("span", { className: "rounded-[100px] px-[8px] text-[12px] bold-text leading-[20px] text-[#fff]", style: {
239
239
  backgroundColor: tooltipBgColor,
240
- } },
241
- discountValue,
242
- "% OFF"))),
240
+ } }, isMaxDiscountApplied
241
+ ? `${currencySign || "$"}${serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.max_discount}`
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: {
245
245
  position: "relative",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "10.3.10",
3
+ "version": "10.4.0",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -222,7 +222,8 @@ function ServiceItemPB({
222
222
  const isItemExpanded = serviceItem.id === isExpand || isExpand === true;
223
223
  const grayscaleClass = isSoldOut ? "grayscale" : "";
224
224
  const hasOfferText = Boolean(serviceItem?.offer_text);
225
- const isNewUiEnabled = serviceItem?.discounts?.[0]?.new_ui_enabled === true;
225
+ // const isNewUiEnabled = serviceItem?.discounts?.[0]?.new_ui_enabled === true;
226
+ const isNewUiEnabled = serviceItem?.new_ui_enabled;
226
227
 
227
228
  const seats = removeDuplicateSeats
228
229
  ? serviceItem.seat_types?.filter(
@@ -271,7 +272,9 @@ function ServiceItemPB({
271
272
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
272
273
 
273
274
  const serviceCardStyle: React.CSSProperties =
274
- (isNewUiEnabled || hasDpEnabled) && !isSoldOut
275
+ ((isNewUiEnabled && serviceItem?.ui_type === 2) ||
276
+ (hasDpEnabled && serviceItem?.dp_discount_percents)) &&
277
+ !isSoldOut
275
278
  ? {
276
279
  borderColor: "transparent",
277
280
  borderStyle: "solid",
@@ -536,7 +539,7 @@ function ServiceItemPB({
536
539
  />
537
540
  ) : (
538
541
  <div
539
- className={`relative hover:z-[150] ${(hasOfferText || hasDpEnabled || isNewUiEnabled) && !isSoldOut ? "mb-[55px]" : "mb-[20px]"} ${
542
+ className={`relative hover:z-[150] ${(hasOfferText || (hasDpEnabled && serviceItem?.dp_discount_percents) || (isNewUiEnabled && serviceItem?.ui_type === 2)) && !isSoldOut ? "mb-[55px]" : "mb-[20px]"} ${
540
543
  serviceItem?.is_direct_trip ||
541
544
  serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
542
545
  showTopLabel
@@ -544,7 +547,9 @@ function ServiceItemPB({
544
547
  : "mt-[20px]"
545
548
  } `}
546
549
  >
547
- {(serviceItem?.offer_text || hasDpEnabled || isNewUiEnabled) &&
550
+ {(serviceItem?.offer_text ||
551
+ (hasDpEnabled && serviceItem?.dp_discount_percents) ||
552
+ (isNewUiEnabled && serviceItem?.ui_type === 2)) &&
548
553
  !isSoldOut && (
549
554
  <OfferBanner
550
555
  offerGradient={offerGradient}
@@ -566,7 +571,9 @@ function ServiceItemPB({
566
571
  <div
567
572
  id={`service-card-${serviceItem.id}`}
568
573
  className={`bg-white mx-auto relative ${
569
- (isNewUiEnabled || hasDpEnabled) && !isSoldOut
574
+ ((isNewUiEnabled && serviceItem?.ui_type === 2) ||
575
+ (hasDpEnabled && serviceItem?.dp_discount_percents)) &&
576
+ !isSoldOut
570
577
  ? "z-[3] rounded-[18px]"
571
578
  : "rounded-[10px] border border-[#ccc]"
572
579
  }`}
@@ -579,15 +586,15 @@ function ServiceItemPB({
579
586
  className=" pt-[20px]"
580
587
  style={{
581
588
  padding:
582
- hasDpEnabled || (isNewUiEnabled && !isSoldOut)
589
+ (hasDpEnabled && serviceItem?.dp_discount_percents) ||
590
+ (isNewUiEnabled && serviceItem?.ui_type === 2 && !isSoldOut)
583
591
  ? "20px 15px 10px 15px"
584
592
  : coachKey
585
593
  ? "20px 15px 20px 15px"
586
594
  : "20px 15px 10px 15px",
587
595
 
588
596
  marginTop:
589
- (hasDiscount || hasOfferText || dpDiscountPercent) &&
590
- !isMaxDiscountApplied
597
+ hasDiscount || hasOfferText || dpDiscountPercent
591
598
  ? "14px"
592
599
  : "",
593
600
  }}
package/src/components/ServiceItem/ServiceItemMobile.tsx CHANGED
@@ -93,7 +93,7 @@ function ServiceItemMobile({
93
93
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
94
94
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
95
95
  const serviceCardStyle: React.CSSProperties =
96
- isNewUiEnabled || serviceItem?.is_dp_enabled
96
+ (isNewUiEnabled && serviceItem?.ui_type === 2) || (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)
97
97
  ? {
98
98
  borderColor: isSoldOut ? "#ccc" : "transparent",
99
99
  borderStyle: "solid",
@@ -240,8 +240,8 @@ function ServiceItemMobile({
240
240
  >
241
241
  <div
242
242
  className={`z-1 ${
243
- ((hasOfferText && isNewUiEnabled) ||
244
- serviceItem?.is_dp_enabled) &&
243
+ ((isNewUiEnabled && serviceItem?.ui_type === 2) ||
244
+ (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)) &&
245
245
  !isSoldOut
246
246
  ? "rounded-[18px]"
247
247
  : "rounded-[10px] border border-[#ccc]"
@@ -413,7 +413,7 @@ function ServiceItemMobile({
413
413
 
414
414
  {/* 🔹 EXPANDABLE DROPDOWN (below the card) */}
415
415
  {serviceItem?.offer_text &&
416
- !isNewUiEnabled &&
416
+ (!isNewUiEnabled || serviceItem?.ui_type === 1) &&
417
417
  !isSoldOut &&
418
418
  !serviceItem?.is_dp_enabled && (
419
419
  <div
@@ -457,7 +457,7 @@ function ServiceItemMobile({
457
457
  )}
458
458
 
459
459
  {/* 🔹 EXPANDABLE DROPDOWN (below the card) */}
460
- {(isNewUiEnabled || serviceItem?.is_dp_enabled) && !isSoldOut && (
460
+ {((isNewUiEnabled && serviceItem?.ui_type === 2) || (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)) && !isSoldOut && (
461
461
  <div
462
462
  className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
463
463
  style={{
@@ -574,8 +574,8 @@ function ServiceItemMobile({
574
574
  position: "relative",
575
575
  zIndex:
576
576
  serviceItem?.offer_text ||
577
- serviceItem?.is_dp_enabled ||
578
- isNewUiEnabled
577
+ (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents) ||
578
+ (isNewUiEnabled && serviceItem?.ui_type === 2)
579
579
  ? -2
580
580
  : -1,
581
581
  }}
@@ -592,8 +592,8 @@ function ServiceItemMobile({
592
592
  : undefined,
593
593
  zIndex:
594
594
  serviceItem?.offer_text ||
595
- isNewUiEnabled ||
596
- serviceItem?.is_dp_enabled
595
+ (isNewUiEnabled && serviceItem?.ui_type === 2) ||
596
+ (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)
597
597
  ? -3
598
598
  : undefined,
599
599
  marginTop: serviceItem?.offer_text ? "-15px" : "-10px",
package/src/components/ServiceItem/mobileTypes.ts CHANGED
@@ -48,6 +48,7 @@ export interface MobileServiceItemProps {
48
48
  dep_validation_text?: string;
49
49
  discount_type?: string;
50
50
  discount_value?: number;
51
+ ui_type?: number;
51
52
  max_discount?: number;
52
53
  discounts?: Array<{
53
54
  id?: number;
package/src/components/ServiceItem/types.ts CHANGED
@@ -38,6 +38,7 @@ export interface ServiceItemProps {
38
38
  change_ticket_hours?: number;
39
39
  duration?: number;
40
40
  train_type_label?: string;
41
+ show_register_button?: boolean;
41
42
  offer_text?: string;
42
43
  is_direct_trip?: boolean;
43
44
  is_dp_enabled?: boolean;
@@ -47,6 +48,7 @@ export interface ServiceItemProps {
47
48
  discount_type?: string;
48
49
  discount_value?: number;
49
50
  max_discount?: number;
51
+ ui_type?: number;
50
52
  discounts?: Array<{
51
53
  new_ui_enabled?: boolean;
52
54
  }>;
@@ -55,6 +57,7 @@ export interface ServiceItemProps {
55
57
  operator_service_name?: string;
56
58
  ladies_booked_seats?: string;
57
59
  dep_validation_text?: string;
60
+ new_ui_enabled?: boolean;
58
61
  metaData?: {};
59
62
  is_tracking_enabled?: boolean;
60
63
  show_top_label?: boolean;
package/src/ui/OfferBanner.tsx CHANGED
@@ -11,6 +11,8 @@ type ServiceItemSlice = Pick<
11
11
  | "offer_text"
12
12
  | "dp_discount_percents"
13
13
  | "dp_discounted_seats"
14
+ | "show_register_button"
15
+ | "ui_type"
14
16
  >;
15
17
 
16
18
  interface OfferBannerColors {
@@ -32,6 +34,7 @@ interface OfferBannerProps {
32
34
  isLinatal?: boolean;
33
35
  coachKey?: number;
34
36
  isExpand?: any;
37
+ ui_type?: number;
35
38
  }
36
39
 
37
40
  // ─── Helpers ──────────────────────────────────────────────────────────────────
@@ -92,6 +95,8 @@ interface NewUiOfferBannerProps {
92
95
  getAnimationIcon: OfferBannerProps["getAnimationIcon"];
93
96
  hideRegister?: boolean;
94
97
  isNewUiEnabled?: any;
98
+ showLoginButton?: boolean;
99
+ ui_type?: number;
95
100
  }
96
101
 
97
102
  const NewUiOfferBanner: React.FC<NewUiOfferBannerProps> = ({
@@ -102,6 +107,8 @@ const NewUiOfferBanner: React.FC<NewUiOfferBannerProps> = ({
102
107
  getAnimationIcon,
103
108
  hideRegister,
104
109
  isNewUiEnabled,
110
+ showLoginButton,
111
+ ui_type,
105
112
  }) => (
106
113
  <div className="flex items-center">
107
114
  <AnimationIcon getAnimationIcon={getAnimationIcon} name="bombAnimation" />
@@ -110,18 +117,19 @@ const NewUiOfferBanner: React.FC<NewUiOfferBannerProps> = ({
110
117
  className="bold-text"
111
118
  style={{ marginLeft: offerText ? "6px" : "3px" }}
112
119
  >
113
- {truncateOfferText(offerText)}{" "}
114
- {!hideRegister &&
115
- ((isLoggedIn && showLoginOption) || isNewUiEnabled
116
- ? null
117
- : showLoginOption && (
118
- <span onClick={showLoginModal} className="cursor-pointer">
119
- - registro
120
- </span>
121
- ))}{" "}
120
+ {/* {truncateOfferText(offerText)}{" "} */}
121
+ {ui_type === 2 ? null : offerText}{" "}
122
+ {isLoggedIn && showLoginOption
123
+ ? null
124
+ : showLoginOption &&
125
+ showLoginButton && (
126
+ <span onClick={showLoginModal} className="cursor-pointer">
127
+ - registro
128
+ </span>
129
+ )}{" "}
122
130
  &nbsp;
123
131
  </span>{" "}
124
- {offerText ? "| " : ""}
132
+ {offerText && ui_type !== 2 ? "| " : ui_type === 2 ? "" : ""}
125
133
  Termina en&nbsp;
126
134
  <span
127
135
  className="bold-text text-end"
@@ -218,23 +226,39 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
218
226
  isExpand,
219
227
  }) => {
220
228
  const isLegacyOffer =
221
- !!serviceItem?.offer_text && !isNewUiEnabled && !serviceItem?.is_dp_enabled;
229
+ !!serviceItem?.offer_text &&
230
+ (!isNewUiEnabled || serviceItem?.ui_type === 1) &&
231
+ !serviceItem?.is_dp_enabled;
222
232
 
223
233
  const isDpEnabledWithoutDiscounts =
224
- serviceItem?.is_dp_enabled && !hasDpDiscounts(serviceItem);
234
+ serviceItem?.is_dp_enabled && hasDpDiscounts(serviceItem);
225
235
 
226
- const showViewers = isNewUiEnabled || serviceItem?.is_dp_enabled;
236
+ const showViewers =
237
+ (isNewUiEnabled && serviceItem?.ui_type !== 1) ||
238
+ serviceItem?.is_dp_enabled;
227
239
 
228
240
  const background = isLegacyOffer ? colors?.bottomStripColor : offerGradient;
229
241
 
230
242
  const renderLeftContent = () => {
231
- if (isDpEnabledWithoutDiscounts) {
243
+ if (isDpEnabledWithoutDiscounts || serviceItem?.is_dp_enabled) {
232
244
  return <PopularServiceBanner getAnimationIcon={getAnimationIcon} />;
233
245
  }
234
246
 
247
+ if (isLegacyOffer) {
248
+ return (
249
+ <LegacyOfferBanner
250
+ offerText={serviceItem.offer_text!}
251
+ getAnimationIcon={getAnimationIcon}
252
+ />
253
+ );
254
+ }
255
+
235
256
  const hasDp = hasDpDiscounts(serviceItem);
236
257
 
237
- if (hasDp || isNewUiEnabled || serviceItem?.offer_text) {
258
+ if (
259
+ (isNewUiEnabled && serviceItem?.ui_type === 2) ||
260
+ serviceItem?.offer_text
261
+ ) {
238
262
  return (
239
263
  <NewUiOfferBanner
240
264
  offerText={serviceItem.offer_text || ""}
@@ -244,14 +268,8 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
244
268
  getAnimationIcon={getAnimationIcon}
245
269
  hideRegister={hasDp}
246
270
  isNewUiEnabled={isNewUiEnabled}
247
- />
248
- );
249
- }
250
- if (isLegacyOffer) {
251
- return (
252
- <LegacyOfferBanner
253
- offerText={serviceItem.offer_text!}
254
- getAnimationIcon={getAnimationIcon}
271
+ showLoginButton={serviceItem?.show_register_button}
272
+ ui_type={serviceItem?.ui_type}
255
273
  />
256
274
  );
257
275
  }
@@ -262,7 +280,11 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
262
280
  <div
263
281
  className={`text-white w-full absolute ${coachKey ? "-bottom-[32px]" : isExpand ? "-bottom-[32px]" : "-bottom-[40px]"} rounded-b-[14px] text-[14px] h-[58px] flex items-end pb-[7px]`}
264
282
  style={{
265
- background,
283
+ background:
284
+ (isNewUiEnabled && serviceItem?.ui_type === 2) ||
285
+ (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)
286
+ ? offerGradient
287
+ : background,
266
288
  opacity: isSoldOut ? 0.5 : 1,
267
289
  zIndex: isLinatal ? "-1" : "0",
268
290
  }}
package/src/ui/SeatSection/SeatSection.tsx CHANGED
@@ -649,7 +649,7 @@ function SeatSection({
649
649
  className="col-start-2 row-start-1 flex items-center justify-center absolute"
650
650
  style={{ top: "-22px", left: "50%", transform: "translateX(-50%)" }}
651
651
  >
652
- {discountValue != null && !isMaxDiscountApplied && (
652
+ {(discountValue != null || isMaxDiscountApplied) && (
653
653
  <span
654
654
  className="rounded-[100px] bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white"
655
655
  style={{
@@ -658,7 +658,9 @@ function SeatSection({
658
658
  backgroundColor: discountSeatPriceColor,
659
659
  }}
660
660
  >
661
- {discountValue}% OFF
661
+ {isMaxDiscountApplied
662
+ ? `${currencySign || "$"}${serviceItem?.max_discount}`
663
+ : `${discountValue}% OFF`}
662
664
  </span>
663
665
  )}
664
666
  </div>
package/src/ui/mobileweb/SeatSectionMobile.tsx CHANGED
@@ -549,7 +549,7 @@ 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 && (
552
+ {(discountValue != null || isMaxDiscountApplied) && (
553
553
  <div
554
554
  className="absolute -top-[18px] right-[0px]"
555
555
  style={{
@@ -563,7 +563,9 @@ function SeatSectionMobile({
563
563
  backgroundColor: tooltipBgColor,
564
564
  }}
565
565
  >
566
- {discountValue}% OFF
566
+ {isMaxDiscountApplied
567
+ ? `${currencySign || "$"}${serviceItem?.max_discount}`
568
+ : `${discountValue}% OFF`}
567
569
  </span>
568
570
  </div>
569
571
  )}