kupos-ui-components-lib 10.3.10 → 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 (16) hide show
  1. package/dist/components/ServiceItem/ServiceItemDesktop.js +26 -11
  2. package/dist/components/ServiceItem/ServiceItemMobile.js +16 -15
  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 +26 -17
  7. package/dist/ui/SeatSection/SeatSection.js +8 -8
  8. package/dist/ui/mobileweb/SeatSectionMobile.js +6 -6
  9. package/package.json +1 -1
  10. package/src/components/ServiceItem/ServiceItemDesktop.tsx +25 -9
  11. package/src/components/ServiceItem/ServiceItemMobile.tsx +16 -15
  12. package/src/components/ServiceItem/mobileTypes.ts +1 -0
  13. package/src/components/ServiceItem/types.ts +3 -0
  14. package/src/ui/OfferBanner.tsx +48 -25
  15. package/src/ui/SeatSection/SeatSection.tsx +8 -6
  16. package/src/ui/mobileweb/SeatSectionMobile.tsx +6 -4
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);
@@ -126,10 +126,13 @@ 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);
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;
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;
132
+ // const isNewUiEnabled = serviceItem?.discounts?.[0]?.new_ui_enabled === true;
133
+ const isNewUiEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.new_ui_enabled) === true;
131
134
  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))) || []
135
+ ? ((_a = serviceItem.seat_types) === null || _a === void 0 ? void 0 : _a.filter((seat, index, self) => index === self.findIndex((s) => s.label === seat.label))) || []
133
136
  : serviceItem.seat_types || [];
134
137
  const discountedSeats = seats.map((seat) => (Object.assign(Object.assign({}, seat), CommonService.calculateDiscountedPrice(seat.fare, serviceItem))));
135
138
  const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
@@ -156,7 +159,9 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
156
159
  const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true;
157
160
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
158
161
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
159
- const serviceCardStyle = (isNewUiEnabled || hasDpEnabled) && !isSoldOut
162
+ const serviceCardStyle = ((isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
163
+ (hasDpEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))) &&
164
+ !isSoldOut
160
165
  ? {
161
166
  borderColor: "transparent",
162
167
  borderStyle: "solid",
@@ -293,24 +298,34 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
293
298
  setIsFeatureDropDownExpand(isFeatureDropDownExpand === serviceItem.id ||
294
299
  isFeatureDropDownExpand === true
295
300
  ? 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) ||
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) ||
297
302
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
298
303
  showTopLabel
299
304
  ? "mt-[25px]"
300
305
  : "mt-[20px]"} ` },
301
- ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDpEnabled || isNewUiEnabled) &&
306
+ ((isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 && hasOfferText) ||
307
+ (hasDpEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents)) ||
308
+ (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2)) &&
302
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 })),
303
- React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${(isNewUiEnabled || hasDpEnabled) && !isSoldOut
310
+ 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) ||
311
+ (hasDpEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))) &&
312
+ !isSoldOut
304
313
  ? "z-[3] rounded-[18px]"
305
314
  : "rounded-[10px] border border-[#ccc]"}`, style: Object.assign(Object.assign({}, serviceCardStyle), { zIndex: hasOfferText ? 1 : undefined }) },
306
315
  React.createElement("div", { className: " pt-[20px]", style: {
307
- padding: hasDpEnabled || (isNewUiEnabled && !isSoldOut)
316
+ padding: (hasDpEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents)) ||
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)
308
324
  ? "20px 15px 10px 15px"
309
325
  : coachKey
310
326
  ? "20px 15px 20px 15px"
311
327
  : "20px 15px 10px 15px",
312
- marginTop: (hasDiscount || hasOfferText || dpDiscountPercent) &&
313
- !isMaxDiscountApplied
328
+ marginTop: hasDiscount || hasOfferText || dpDiscountPercent
314
329
  ? "14px"
315
330
  : "",
316
331
  } },
package/dist/components/ServiceItem/ServiceItemMobile.js CHANGED
@@ -31,10 +31,11 @@ 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
- const serviceCardStyle = isNewUiEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
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))
38
39
  ? {
39
40
  borderColor: isSoldOut ? "#ccc" : "transparent",
40
41
  borderStyle: "solid",
@@ -105,15 +106,15 @@ 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 ||
112
113
  boardingName
113
114
  ? "mt-[20px]"
114
115
  : "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)) &&
116
+ React.createElement("div", { className: `z-1 ${((isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
117
+ ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))) &&
117
118
  !isSoldOut
118
119
  ? "rounded-[18px]"
119
120
  : "rounded-[10px] border border-[#ccc]"}`, style: Object.assign(Object.assign({}, serviceCardStyle), { backgroundColor: "#fff" }) },
@@ -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 &&
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,
@@ -167,7 +168,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
167
168
  lineHeight: 1.4,
168
169
  } },
169
170
  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: {
171
+ ((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
172
  background: isSoldOut
172
173
  ? offerGradientWithOpacity
173
174
  : offerGradient,
@@ -218,26 +219,26 @@ 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
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ||
223
- isNewUiEnabled
222
+ zIndex: hasOfferText ||
223
+ ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents)) ||
224
+ (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2)
224
225
  ? -2
225
226
  : -1,
226
227
  } },
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"
234
235
  : undefined,
235
236
  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)
237
+ (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
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/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,34 @@ 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 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 &&
65
+ !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled);
66
+ const isDpEnabledWithoutDiscounts = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && hasDpDiscounts(serviceItem);
67
+ const showViewers = (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1) ||
68
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled);
63
69
  const background = isLegacyOffer ? colors === null || colors === void 0 ? void 0 : colors.bottomStripColor : offerGradient;
64
70
  const renderLeftContent = () => {
65
- if (isDpEnabledWithoutDiscounts) {
71
+ if (isDpEnabledWithoutDiscounts || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)) {
66
72
  return React.createElement(PopularServiceBanner, { getAnimationIcon: getAnimationIcon });
67
73
  }
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
74
  if (isLegacyOffer) {
73
- return (React.createElement(LegacyOfferBanner, { offerText: serviceItem.offer_text, getAnimationIcon: getAnimationIcon }));
75
+ return (React.createElement(LegacyOfferBanner, { offerText: offerText, getAnimationIcon: getAnimationIcon }));
76
+ }
77
+ const hasDp = hasDpDiscounts(serviceItem);
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 }));
74
80
  }
75
81
  return null;
76
82
  };
77
83
  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,
84
+ background: (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
85
+ ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
86
+ ? offerGradient
87
+ : background,
79
88
  opacity: isSoldOut ? 0.5 : 1,
80
89
  zIndex: isLinatal ? "-1" : "0",
81
90
  } },
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
  } }))),
@@ -330,16 +329,17 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
330
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
331
  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: {
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%)" } }, (discountValue != null || isMaxDiscountApplied) && (React.createElement("span", { className: "rounded-[100px] bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white", style: {
334
333
  animation: "pulse-zoom 2s ease-in-out infinite",
335
334
  whiteSpace: "nowrap",
336
335
  backgroundColor: discountSeatPriceColor,
337
- } },
338
- discountValue,
339
- "% OFF"))),
336
+ } }, isMaxDiscountApplied
337
+ ? `${CommonService.currency(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.max_discount)} OFF`
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
  } })),
@@ -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
+ ? `${commonService.currency(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.max_discount)} OFF`
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",
@@ -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.3.10",
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,8 +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);
225
- const isNewUiEnabled = serviceItem?.discounts?.[0]?.new_ui_enabled === true;
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;
228
+ // const isNewUiEnabled = serviceItem?.discounts?.[0]?.new_ui_enabled === true;
229
+ const isNewUiEnabled = serviceItem?.new_ui_enabled === true;
226
230
 
227
231
  const seats = removeDuplicateSeats
228
232
  ? serviceItem.seat_types?.filter(
@@ -271,7 +275,9 @@ function ServiceItemPB({
271
275
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
272
276
 
273
277
  const serviceCardStyle: React.CSSProperties =
274
- (isNewUiEnabled || hasDpEnabled) && !isSoldOut
278
+ ((isNewUiEnabled && serviceItem?.ui_type === 2) ||
279
+ (hasDpEnabled && serviceItem?.dp_discount_percents)) &&
280
+ !isSoldOut
275
281
  ? {
276
282
  borderColor: "transparent",
277
283
  borderStyle: "solid",
@@ -536,7 +542,7 @@ function ServiceItemPB({
536
542
  />
537
543
  ) : (
538
544
  <div
539
- className={`relative hover:z-[150] ${(hasOfferText || hasDpEnabled || isNewUiEnabled) && !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]"} ${
540
546
  serviceItem?.is_direct_trip ||
541
547
  serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
542
548
  showTopLabel
@@ -544,7 +550,9 @@ function ServiceItemPB({
544
550
  : "mt-[20px]"
545
551
  } `}
546
552
  >
547
- {(serviceItem?.offer_text || hasDpEnabled || isNewUiEnabled) &&
553
+ {((isNewUiEnabled && serviceItem?.ui_type === 1 && hasOfferText) ||
554
+ (hasDpEnabled && serviceItem?.dp_discount_percents) ||
555
+ (isNewUiEnabled && serviceItem?.ui_type === 2)) &&
548
556
  !isSoldOut && (
549
557
  <OfferBanner
550
558
  offerGradient={offerGradient}
@@ -566,7 +574,9 @@ function ServiceItemPB({
566
574
  <div
567
575
  id={`service-card-${serviceItem.id}`}
568
576
  className={`bg-white mx-auto relative ${
569
- (isNewUiEnabled || hasDpEnabled) && !isSoldOut
577
+ ((isNewUiEnabled && serviceItem?.ui_type === 2) ||
578
+ (hasDpEnabled && serviceItem?.dp_discount_percents)) &&
579
+ !isSoldOut
570
580
  ? "z-[3] rounded-[18px]"
571
581
  : "rounded-[10px] border border-[#ccc]"
572
582
  }`}
@@ -579,15 +589,21 @@ function ServiceItemPB({
579
589
  className=" pt-[20px]"
580
590
  style={{
581
591
  padding:
582
- hasDpEnabled || (isNewUiEnabled && !isSoldOut)
592
+ (hasDpEnabled && serviceItem?.dp_discount_percents) ||
593
+ (isNewUiEnabled &&
594
+ serviceItem?.ui_type === 2 &&
595
+ !isSoldOut) ||
596
+ (isNewUiEnabled &&
597
+ serviceItem?.ui_type === 1 &&
598
+ hasOfferText &&
599
+ !isSoldOut)
583
600
  ? "20px 15px 10px 15px"
584
601
  : coachKey
585
602
  ? "20px 15px 20px 15px"
586
603
  : "20px 15px 10px 15px",
587
604
 
588
605
  marginTop:
589
- (hasDiscount || hasOfferText || dpDiscountPercent) &&
590
- !isMaxDiscountApplied
606
+ hasDiscount || hasOfferText || dpDiscountPercent
591
607
  ? "14px"
592
608
  : "",
593
609
  }}
package/src/components/ServiceItem/ServiceItemMobile.tsx CHANGED
@@ -89,11 +89,12 @@ 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 =
96
- isNewUiEnabled || serviceItem?.is_dp_enabled
97
+ (isNewUiEnabled && serviceItem?.ui_type === 2) || (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)
97
98
  ? {
98
99
  borderColor: isSoldOut ? "#ccc" : "transparent",
99
100
  borderStyle: "solid",
@@ -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)" ||
@@ -240,8 +241,8 @@ function ServiceItemMobile({
240
241
  >
241
242
  <div
242
243
  className={`z-1 ${
243
- ((hasOfferText && isNewUiEnabled) ||
244
- serviceItem?.is_dp_enabled) &&
244
+ ((isNewUiEnabled && serviceItem?.ui_type === 2) ||
245
+ (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)) &&
245
246
  !isSoldOut
246
247
  ? "rounded-[18px]"
247
248
  : "rounded-[10px] border border-[#ccc]"
@@ -412,8 +413,8 @@ function ServiceItemMobile({
412
413
  </div>
413
414
 
414
415
  {/* 🔹 EXPANDABLE DROPDOWN (below the card) */}
415
- {serviceItem?.offer_text &&
416
- !isNewUiEnabled &&
416
+ {hasOfferText &&
417
+ (isNewUiEnabled && serviceItem?.ui_type === 1) &&
417
418
  !isSoldOut &&
418
419
  !serviceItem?.is_dp_enabled && (
419
420
  <div
@@ -457,7 +458,7 @@ function ServiceItemMobile({
457
458
  )}
458
459
 
459
460
  {/* 🔹 EXPANDABLE DROPDOWN (below the card) */}
460
- {(isNewUiEnabled || serviceItem?.is_dp_enabled) && !isSoldOut && (
461
+ {((isNewUiEnabled && serviceItem?.ui_type === 2) || (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)) && !isSoldOut && (
461
462
  <div
462
463
  className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
463
464
  style={{
@@ -573,9 +574,9 @@ 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
- serviceItem?.is_dp_enabled ||
578
- isNewUiEnabled
577
+ hasOfferText ||
578
+ (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents) ||
579
+ (isNewUiEnabled && serviceItem?.ui_type === 2)
579
580
  ? -2
580
581
  : -1,
581
582
  }}
@@ -585,18 +586,18 @@ 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"
592
593
  : undefined,
593
594
  zIndex:
594
595
  serviceItem?.offer_text ||
595
- isNewUiEnabled ||
596
- serviceItem?.is_dp_enabled
596
+ (isNewUiEnabled && serviceItem?.ui_type === 2) ||
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/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"
@@ -217,41 +225,52 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
217
225
  coachKey,
218
226
  isExpand,
219
227
  }) => {
228
+ const isDiscountBelow20 = (serviceItem as any)?.discount_value > 0 && (serviceItem as any)?.discount_value < 20;
229
+ const offerText = isDiscountBelow20 ? "" : serviceItem?.offer_text || "";
230
+
220
231
  const isLegacyOffer =
221
- !!serviceItem?.offer_text && !isNewUiEnabled && !serviceItem?.is_dp_enabled;
232
+ !!offerText &&
233
+ isNewUiEnabled &&
234
+ serviceItem?.ui_type === 1 &&
235
+ !serviceItem?.is_dp_enabled;
222
236
 
223
237
  const isDpEnabledWithoutDiscounts =
224
- serviceItem?.is_dp_enabled && !hasDpDiscounts(serviceItem);
238
+ serviceItem?.is_dp_enabled && hasDpDiscounts(serviceItem);
225
239
 
226
- const showViewers = isNewUiEnabled || serviceItem?.is_dp_enabled;
240
+ const showViewers =
241
+ (isNewUiEnabled && serviceItem?.ui_type !== 1) ||
242
+ serviceItem?.is_dp_enabled;
227
243
 
228
244
  const background = isLegacyOffer ? colors?.bottomStripColor : offerGradient;
229
245
 
230
246
  const renderLeftContent = () => {
231
- if (isDpEnabledWithoutDiscounts) {
247
+ if (isDpEnabledWithoutDiscounts || serviceItem?.is_dp_enabled) {
232
248
  return <PopularServiceBanner getAnimationIcon={getAnimationIcon} />;
233
249
  }
234
250
 
251
+ if (isLegacyOffer) {
252
+ return (
253
+ <LegacyOfferBanner
254
+ offerText={offerText}
255
+ getAnimationIcon={getAnimationIcon}
256
+ />
257
+ );
258
+ }
259
+
235
260
  const hasDp = hasDpDiscounts(serviceItem);
236
261
 
237
- if (hasDp || isNewUiEnabled || serviceItem?.offer_text) {
262
+ if (isNewUiEnabled && serviceItem?.ui_type === 2) {
238
263
  return (
239
264
  <NewUiOfferBanner
240
- offerText={serviceItem.offer_text || ""}
265
+ offerText={offerText}
241
266
  isLoggedIn={isLoggedIn}
242
267
  showLoginModal={showLoginModal}
243
268
  showLoginOption={showLoginOption}
244
269
  getAnimationIcon={getAnimationIcon}
245
270
  hideRegister={hasDp}
246
271
  isNewUiEnabled={isNewUiEnabled}
247
- />
248
- );
249
- }
250
- if (isLegacyOffer) {
251
- return (
252
- <LegacyOfferBanner
253
- offerText={serviceItem.offer_text!}
254
- getAnimationIcon={getAnimationIcon}
272
+ showLoginButton={serviceItem?.show_register_button}
273
+ ui_type={serviceItem?.ui_type}
255
274
  />
256
275
  );
257
276
  }
@@ -262,7 +281,11 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
262
281
  <div
263
282
  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
283
  style={{
265
- background,
284
+ background:
285
+ (isNewUiEnabled && serviceItem?.ui_type === 2) ||
286
+ (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)
287
+ ? offerGradient
288
+ : background,
266
289
  opacity: isSoldOut ? 0.5 : 1,
267
290
  zIndex: isLinatal ? "-1" : "0",
268
291
  }}
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
  }}
@@ -649,7 +648,7 @@ function SeatSection({
649
648
  className="col-start-2 row-start-1 flex items-center justify-center absolute"
650
649
  style={{ top: "-22px", left: "50%", transform: "translateX(-50%)" }}
651
650
  >
652
- {discountValue != null && !isMaxDiscountApplied && (
651
+ {(discountValue != null || isMaxDiscountApplied) && (
653
652
  <span
654
653
  className="rounded-[100px] bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white"
655
654
  style={{
@@ -658,7 +657,9 @@ function SeatSection({
658
657
  backgroundColor: discountSeatPriceColor,
659
658
  }}
660
659
  >
661
- {discountValue}% OFF
660
+ {isMaxDiscountApplied
661
+ ? `${CommonService.currency(serviceItem?.max_discount)} OFF`
662
+ : `${discountValue}% OFF`}
662
663
  </span>
663
664
  )}
664
665
  </div>
@@ -668,9 +669,10 @@ function SeatSection({
668
669
  style={{ textAlign: "center" }}
669
670
  >
670
671
  <span
671
- 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"
672
673
  style={{
673
674
  position: "relative",
675
+ color: discountSeatPriceColor,
674
676
  }}
675
677
  >
676
678
  {formatPrice(discountSeat.originalPrice)}
@@ -681,7 +683,7 @@ function SeatSection({
681
683
  top: "50%",
682
684
  width: "calc(100% + 4px)",
683
685
  height: "1px",
684
- backgroundColor: "#9f9f9f",
686
+ backgroundColor: discountSeatPriceColor,
685
687
  transform: "rotate(-10deg)",
686
688
  transformOrigin: "center",
687
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
  }}
@@ -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
+ ? `${commonService.currency(serviceItem?.max_discount)} OFF`
568
+ : `${discountValue}% OFF`}
567
569
  </span>
568
570
  </div>
569
571
  )}
@@ -587,7 +589,7 @@ function SeatSectionMobile({
587
589
  left: "50%",
588
590
  width: "80%",
589
591
  height: "1px",
590
- background: "#9f9f9f",
592
+ background: discountSeatPriceColor,
591
593
  transform: "rotate(-12deg)",
592
594
  transformOrigin: "center",
593
595
  }}