kupos-ui-components-lib 10.4.24 → 10.4.26

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 (15) hide show
  1. package/dist/components/ServiceItem/ServiceItemDesktop.js +1 -1
  2. package/dist/components/ServiceItem/ServiceItemMobile.js +19 -12
  3. package/dist/components/ServiceItem/mobileTypes.d.ts +1 -0
  4. package/dist/ui/OfferBanner.js +1 -1
  5. package/dist/ui/mobileweb/DateTimeSectionMobile.d.ts +2 -1
  6. package/dist/ui/mobileweb/DateTimeSectionMobile.js +2 -2
  7. package/dist/ui/mobileweb/SeatSectionMobile.d.ts +2 -1
  8. package/dist/ui/mobileweb/SeatSectionMobile.js +2 -2
  9. package/package.json +1 -1
  10. package/src/components/ServiceItem/ServiceItemDesktop.tsx +3 -2
  11. package/src/components/ServiceItem/ServiceItemMobile.tsx +107 -95
  12. package/src/components/ServiceItem/mobileTypes.ts +1 -0
  13. package/src/ui/OfferBanner.tsx +1 -1
  14. package/src/ui/mobileweb/DateTimeSectionMobile.tsx +3 -0
  15. package/src/ui/mobileweb/SeatSectionMobile.tsx +3 -2
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -139,7 +139,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
139
139
  const grayscaleClass = isSoldOut ? "grayscale" : "";
140
140
  const isDiscountBelow20 = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) > 0 &&
141
141
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) < 20;
142
- const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && !isDiscountBelow20;
142
+ const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text);
143
143
  const isNewUiEnabledPeru = ((_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;
144
144
  const isNewUiEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.new_ui_enabled) === true;
145
145
  const seats = removeDuplicateSeats
package/dist/components/ServiceItem/ServiceItemMobile.js CHANGED
@@ -32,11 +32,13 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
32
32
  const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
33
33
  const isLongOfferText = (((_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) === null || _d === void 0 ? void 0 : _d.length) || 0) > 35;
34
34
  const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true;
35
- const isDiscountBelow20 = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) > 0 && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) < 20;
36
- const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && !isDiscountBelow20;
35
+ const isDiscountBelow20 = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) > 0 &&
36
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) < 20;
37
+ const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text);
37
38
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
38
39
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
39
- 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))
40
+ const serviceCardStyle = (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
41
+ ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
40
42
  ? {
41
43
  borderColor: isSoldOut ? "#ccc" : "transparent",
42
44
  borderStyle: "solid",
@@ -126,7 +128,8 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
126
128
  ? "mt-[20px]"
127
129
  : "mt-[10px]"} `, style: { zIndex: 1 } },
128
130
  React.createElement("div", { className: `z-1 ${((isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
129
- ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))) &&
131
+ ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
132
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))) &&
130
133
  !isSoldOut
131
134
  ? "rounded-[18px]"
132
135
  : "rounded-[10px] border border-[#ccc]"}`, style: Object.assign(Object.assign({}, serviceCardStyle), { backgroundColor: "#fff" }) },
@@ -151,7 +154,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
151
154
  color: isSoldOut ? "#bbb" : "text-[#464647]",
152
155
  } },
153
156
  React.createElement("span", { className: "ml-[3px] min-[420]:text-[13px] text-[12px] text-ellipsis overflow-hidden whitespace-nowrap max-w-[120px]" }, serviceItem.operator_details[2]))))) : null)),
154
- React.createElement(DateTimeSectionMobile, { onBookButtonPress: onBookButtonPress, isCiva: isCiva, isSoldOut: isSoldOut, isLinatal: isLinatal, isPeru: isPeru, orignLabel: orignLabel, destinationLabel: destinationLabel, originIcon: (_g = serviceItem.icons) === null || _g === void 0 ? void 0 : _g.origin, destinationIcon: (_h = serviceItem.icons) === null || _h === void 0 ? void 0 : _h.destination, travelDate: serviceItem.travel_date, arrivalDate: serviceItem.arrival_date, depTime: serviceItem.dep_time, arrTime: serviceItem.arr_time, seatTypes: serviceItem.seat_types, seatPriceColor: colors.seatPriceColor, tooltipBgColor: colors.tooltipBgColor, currencySign: currencySign, availableSeats: serviceItem.available_seats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, showLastSeats: showLastSeats, discountSeatPriceColor: colors.discountSeatPriceColor, isTrain: isTrain }),
157
+ React.createElement(DateTimeSectionMobile, { onBookButtonPress: onBookButtonPress, isCiva: isCiva, isSoldOut: isSoldOut, isLinatal: isLinatal, isPeru: isPeru, orignLabel: orignLabel, destinationLabel: destinationLabel, originIcon: (_g = serviceItem.icons) === null || _g === void 0 ? void 0 : _g.origin, destinationIcon: (_h = serviceItem.icons) === null || _h === void 0 ? void 0 : _h.destination, travelDate: serviceItem.travel_date, arrivalDate: serviceItem.arrival_date, depTime: serviceItem.dep_time, arrTime: serviceItem.arr_time, seatTypes: serviceItem.seat_types, seatPriceColor: colors.seatPriceColor, tooltipBgColor: colors.tooltipBgColor, currencySign: currencySign, availableSeats: serviceItem.available_seats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, showLastSeats: showLastSeats, discountSeatPriceColor: colors.discountSeatPriceColor, isTrain: isTrain, discountSeatCrossPriceColor: colors.discountSeatCrossPriceColor }),
155
158
  hasDiscount && (React.createElement("div", { className: "flex justify-end" }, isSoldOut ? (React.createElement("span", { className: "col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]" }, "Agotado")) : null)),
156
159
  showLastSeats ? (React.createElement("div", { className: "flex justify-end " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
157
160
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[10px] text-center", style: {
@@ -163,7 +166,8 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
163
166
  }, isPeru: isPeru, femaleAnim: serviceItem.icons.femaleAnim, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, isTrain: isTrain })),
164
167
  React.createElement(ServiceBadgesMobile, { showTopLabel: showTopLabel || undefined, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, serviceItem: serviceItem, isConexion: isConexion, isAllinBus: isAllinBus, boardingName: boardingName })),
165
168
  hasOfferText &&
166
- (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1) &&
169
+ isNewUiEnabled &&
170
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 &&
167
171
  !isSoldOut &&
168
172
  !(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: {
169
173
  background: colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
@@ -180,7 +184,10 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
180
184
  lineHeight: 1.4,
181
185
  } },
182
186
  React.createElement("span", { className: "whitespace-nowrap min-[380px]:text-[12px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))))))),
183
- ((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: {
187
+ ((isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
188
+ ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
189
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))) &&
190
+ !isSoldOut && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
184
191
  background: isSoldOut
185
192
  ? offerGradientWithOpacity
186
193
  : offerGradient,
@@ -232,7 +239,8 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
232
239
  transition: "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
233
240
  position: "relative",
234
241
  zIndex: hasOfferText ||
235
- ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents)) ||
242
+ ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
243
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents)) ||
236
244
  (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2)
237
245
  ? -2
238
246
  : -1,
@@ -240,14 +248,13 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
240
248
  React.createElement("div", { style: {
241
249
  overflow: "hidden",
242
250
  minHeight: 0,
243
- position: hasOfferText ||
244
- isNewUiEnabled ||
245
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
251
+ position: hasOfferText || isNewUiEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
246
252
  ? "relative"
247
253
  : undefined,
248
254
  zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ||
249
255
  (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
250
- ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
256
+ ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
257
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
251
258
  ? -3
252
259
  : undefined,
253
260
  marginTop: hasOfferText ? "-15px" : "-10px",
package/dist/components/ServiceItem/mobileTypes.d.ts CHANGED
@@ -197,6 +197,7 @@ export interface MobileServiceItemProps {
197
197
  tooltipBgColor?: string;
198
198
  lastSeatText?: string;
199
199
  lastSeatBg?: string;
200
+ discountSeatCrossPriceColor?: string;
200
201
  seatPriceColor?: string;
201
202
  rightGradiantColor?: string;
202
203
  leftGradiantColor?: string;
package/dist/ui/OfferBanner.js CHANGED
@@ -59,7 +59,7 @@ const ViewersCount = ({ serviceItem, viewersConfig, getAnimationIcon, }) => {
59
59
  const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, showLoginModal, viewersConfig, getAnimationIcon, showLoginOption, isNewUiEnabled, colors, isLinatal, coachKey, isExpand, }) => {
60
60
  const isDiscountBelow20 = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) > 0 &&
61
61
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) < 20;
62
- const offerText = isDiscountBelow20 ? "" : (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "";
62
+ const offerText = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "";
63
63
  const isLegacyOffer = !!offerText &&
64
64
  isNewUiEnabled &&
65
65
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 &&
package/dist/ui/mobileweb/DateTimeSectionMobile.d.ts CHANGED
@@ -23,6 +23,7 @@ interface DateTimeSectionMobileProps {
23
23
  showLastSeats?: boolean;
24
24
  discountSeatPriceColor?: string;
25
25
  isTrain?: boolean;
26
+ discountSeatCrossPriceColor?: string;
26
27
  }
27
- declare function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, }: DateTimeSectionMobileProps): React.ReactElement;
28
+ declare function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, }: DateTimeSectionMobileProps): React.ReactElement;
28
29
  export default DateTimeSectionMobile;
package/dist/ui/mobileweb/DateTimeSectionMobile.js CHANGED
@@ -37,7 +37,7 @@ const TimeRow = ({ label, icon, alt, date, timeContent, isSoldOut, }) => {
37
37
  React.createElement("div", { className: `absolute left-[50%] ${dotPositionClass}` }, "\u2022"),
38
38
  React.createElement("div", { className: "font-[900] relative black-text whitespace-nowrap" }, timeContent)))));
39
39
  };
40
- function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, }) {
40
+ function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, }) {
41
41
  const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
42
42
  const depTimeContent = isLinatal ? (React.createElement("div", null,
43
43
  React.createElement("span", null,
@@ -62,6 +62,6 @@ function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal
62
62
  backgroundColor: "#ccc",
63
63
  margin: "auto",
64
64
  } }),
65
- React.createElement(SeatSectionMobile, { seatTypes: seatTypes, isSoldOut: isSoldOut, isPeru: isPeru, seatPriceColor: seatPriceColor, currencySign: currencySign, availableSeats: availableSeats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, tooltipBgColor: tooltipBgColor, showLastSeats: showLastSeats, discountSeatPriceColor: discountSeatPriceColor, isTrain: isTrain })));
65
+ React.createElement(SeatSectionMobile, { seatTypes: seatTypes, isSoldOut: isSoldOut, isPeru: isPeru, seatPriceColor: seatPriceColor, currencySign: currencySign, availableSeats: availableSeats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, tooltipBgColor: tooltipBgColor, showLastSeats: showLastSeats, discountSeatPriceColor: discountSeatPriceColor, isTrain: isTrain, discountSeatCrossPriceColor: discountSeatCrossPriceColor })));
66
66
  }
67
67
  export default DateTimeSectionMobile;
package/dist/ui/mobileweb/SeatSectionMobile.d.ts CHANGED
@@ -18,6 +18,7 @@ interface SeatSectionMobileProps {
18
18
  showLastSeats?: boolean;
19
19
  discountSeatPriceColor?: string;
20
20
  isTrain?: boolean;
21
+ discountSeatCrossPriceColor?: string;
21
22
  }
22
- declare function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, }: SeatSectionMobileProps): React.ReactElement;
23
+ declare function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, }: SeatSectionMobileProps): React.ReactElement;
23
24
  export default SeatSectionMobile;
package/dist/ui/mobileweb/SeatSectionMobile.js CHANGED
@@ -47,7 +47,7 @@ const getUniqueSeats = (data, limit) => {
47
47
  .sort((a, b) => a.fare - b.fare)
48
48
  .slice(0, limit);
49
49
  };
50
- function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, }) {
50
+ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, }) {
51
51
  var _a, _b, _c, _d, _e, _f, _g;
52
52
  const hasMultipleTypes = ((_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.length) !== null && _a !== void 0 ? _a : 0) > 2;
53
53
  const getFare = (fare) => {
@@ -270,7 +270,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
270
270
  left: "50%",
271
271
  width: "80%",
272
272
  height: "1px",
273
- background: discountSeatPriceColor,
273
+ background: discountSeatCrossPriceColor,
274
274
  transform: "rotate(-12deg)",
275
275
  transformOrigin: "center",
276
276
  } })))),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "10.4.24",
3
+ "version": "10.4.26",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -233,8 +233,9 @@ function ServiceItemPB({
233
233
  const isDiscountBelow20 =
234
234
  (serviceItem as any)?.discount_value > 0 &&
235
235
  (serviceItem as any)?.discount_value < 20;
236
- const hasOfferText = Boolean(serviceItem?.offer_text) && !isDiscountBelow20;
237
- const isNewUiEnabledPeru = serviceItem?.discounts?.[0]?.new_ui_enabled === true;
236
+ const hasOfferText = Boolean(serviceItem?.offer_text);
237
+ const isNewUiEnabledPeru =
238
+ serviceItem?.discounts?.[0]?.new_ui_enabled === true;
238
239
  const isNewUiEnabled = serviceItem?.new_ui_enabled === true;
239
240
 
240
241
  const seats = removeDuplicateSeats
package/src/components/ServiceItem/ServiceItemMobile.tsx CHANGED
@@ -92,12 +92,15 @@ function ServiceItemMobile({
92
92
  const isLongOfferText = (serviceItem?.offer_text?.length || 0) > 35;
93
93
  const hasDpEnabled = serviceItem?.is_dp_enabled === true;
94
94
 
95
- const isDiscountBelow20 = (serviceItem as any)?.discount_value > 0 && (serviceItem as any)?.discount_value < 20;
96
- const hasOfferText = Boolean(serviceItem?.offer_text) && !isDiscountBelow20;
95
+ const isDiscountBelow20 =
96
+ (serviceItem as any)?.discount_value > 0 &&
97
+ (serviceItem as any)?.discount_value < 20;
98
+ const hasOfferText = Boolean(serviceItem?.offer_text);
97
99
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
98
100
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
99
101
  const serviceCardStyle: React.CSSProperties =
100
- (isNewUiEnabled && serviceItem?.ui_type === 2) || (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)
102
+ (isNewUiEnabled && serviceItem?.ui_type === 2) ||
103
+ (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)
101
104
  ? {
102
105
  borderColor: isSoldOut ? "#ccc" : "transparent",
103
106
  borderStyle: "solid",
@@ -294,7 +297,8 @@ function ServiceItemMobile({
294
297
  <div
295
298
  className={`z-1 ${
296
299
  ((isNewUiEnabled && serviceItem?.ui_type === 2) ||
297
- (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)) &&
300
+ (serviceItem?.is_dp_enabled &&
301
+ serviceItem?.dp_discount_percents)) &&
298
302
  !isSoldOut
299
303
  ? "rounded-[18px]"
300
304
  : "rounded-[10px] border border-[#ccc]"
@@ -390,6 +394,7 @@ function ServiceItemMobile({
390
394
  showLastSeats={showLastSeats}
391
395
  discountSeatPriceColor={colors.discountSeatPriceColor}
392
396
  isTrain={isTrain}
397
+ discountSeatCrossPriceColor={colors.discountSeatCrossPriceColor}
393
398
  />
394
399
 
395
400
  {hasDiscount && (
@@ -466,7 +471,8 @@ function ServiceItemMobile({
466
471
 
467
472
  {/* 🔹 EXPANDABLE DROPDOWN (below the card) */}
468
473
  {hasOfferText &&
469
- (isNewUiEnabled && serviceItem?.ui_type === 1) &&
474
+ isNewUiEnabled &&
475
+ serviceItem?.ui_type === 1 &&
470
476
  !isSoldOut &&
471
477
  !serviceItem?.is_dp_enabled && (
472
478
  <div
@@ -510,113 +516,119 @@ function ServiceItemMobile({
510
516
  )}
511
517
 
512
518
  {/* 🔹 EXPANDABLE DROPDOWN (below the card) */}
513
- {((isNewUiEnabled && serviceItem?.ui_type === 2) || (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)) && !isSoldOut && (
514
- <div
515
- className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
516
- style={{
517
- background: isSoldOut
518
- ? offerGradientWithOpacity
519
- : offerGradient,
520
- // opacity: isSoldOut ? 0.5 : 1,
521
- borderRadius: "0 0 14px 14px",
522
- zIndex: -1,
523
- }}
524
- >
519
+ {((isNewUiEnabled && serviceItem?.ui_type === 2) ||
520
+ (serviceItem?.is_dp_enabled &&
521
+ serviceItem?.dp_discount_percents)) &&
522
+ !isSoldOut && (
525
523
  <div
526
- className="flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]"
527
- style={{ lineHeight: 1.6 }}
524
+ className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
525
+ style={{
526
+ background: isSoldOut
527
+ ? offerGradientWithOpacity
528
+ : offerGradient,
529
+ // opacity: isSoldOut ? 0.5 : 1,
530
+ borderRadius: "0 0 14px 14px",
531
+ zIndex: -1,
532
+ }}
528
533
  >
529
- <div className="flex justify-between items-center">
530
- {serviceItem?.is_dp_enabled &&
531
- Object.keys(serviceItem?.dp_discount_percents ?? {})
532
- .length === 0 &&
533
- (serviceItem?.dp_discounted_seats ?? []).length === 0 ? (
534
- <div className="flex items-center gap-[6px]">
535
- {/* {renderIcon("whiteFireIcon", "14px")} */}
536
- <LottiePlayer
537
- animationData={serviceItem.icons.starAnimation}
538
- width="14px"
539
- height="14px"
540
- />
541
-
542
- <span className="text-[#fff]">Más elegido</span>
543
- </div>
544
- ) : (
545
- <div
546
- className={`flex ${(serviceItem?.offer_text || "").length > 10 ? "items-start" : "items-center"}`}
547
- >
548
- <div className={isLongOfferText ? "mt-[2px]" : ""}>
534
+ <div
535
+ className="flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]"
536
+ style={{ lineHeight: 1.6 }}
537
+ >
538
+ <div className="flex justify-between items-center">
539
+ {serviceItem?.is_dp_enabled &&
540
+ Object.keys(serviceItem?.dp_discount_percents ?? {})
541
+ .length === 0 &&
542
+ (serviceItem?.dp_discounted_seats ?? []).length === 0 ? (
543
+ <div className="flex items-center gap-[6px]">
544
+ {/* {renderIcon("whiteFireIcon", "14px")} */}
549
545
  <LottiePlayer
550
- animationData={serviceItem.icons.bombAnim}
546
+ animationData={serviceItem.icons.starAnimation}
551
547
  width="14px"
552
548
  height="14px"
553
549
  />
550
+
551
+ <span className="text-[#fff]">Más elegido</span>
554
552
  </div>
553
+ ) : (
555
554
  <div
556
- className={`ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`}
557
- style={{
558
- color: "#fff",
559
- lineHeight: 1.4,
560
- }}
555
+ className={`flex ${(serviceItem?.offer_text || "").length > 10 ? "items-start" : "items-center"}`}
561
556
  >
562
- <span className="whitespace-nowrap min-[380px]:text-[12px]">
563
- Termina en&nbsp;
564
- <span
565
- className="bold-text"
566
- ref={(node) =>
567
- commonService.startCountdown(node, 599)
568
- }
569
- style={{
570
- fontVariantNumeric: "tabular-nums",
571
- display: "inline-block",
572
- }}
557
+ <div className={isLongOfferText ? "mt-[2px]" : ""}>
558
+ <LottiePlayer
559
+ animationData={serviceItem.icons.bombAnim}
560
+ width="14px"
561
+ height="14px"
573
562
  />
574
- </span>
575
- </div>
576
- </div>
577
- )}
578
- <div
579
- className="flex flex-col items-end"
580
- style={{
581
- color: "#fff",
582
- }}
583
- >
584
- <div className="flex items-center">
585
- <div className="mr-[4px]">
586
- {" "}
587
- <LottiePlayer
588
- animationData={serviceItem.icons.dotAnimation}
589
- width="12px"
590
- height="12px"
591
- />
563
+ </div>
564
+ <div
565
+ className={`ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`}
566
+ style={{
567
+ color: "#fff",
568
+ lineHeight: 1.4,
569
+ }}
570
+ >
571
+ <span className="whitespace-nowrap min-[380px]:text-[12px]">
572
+ Termina en&nbsp;
573
+ <span
574
+ className="bold-text"
575
+ ref={(node) =>
576
+ commonService.startCountdown(node, 599)
577
+ }
578
+ style={{
579
+ fontVariantNumeric: "tabular-nums",
580
+ display: "inline-block",
581
+ }}
582
+ />
583
+ </span>
584
+ </div>
592
585
  </div>
593
- <span className="flex-1" style={{ lineHeight: 1.4 }}>
594
- <span
595
- className="bold-text"
596
- ref={(node) =>
597
- commonService.startViewerCount(node, viewersConfig)
598
- }
599
- style={{ fontVariantNumeric: "tabular-nums" }}
600
- />{" "}
601
- <span> viendo</span> |{" "}
602
- <span className="whitespace-nowrap">
603
- {/* {serviceItem?.is_dp_enabled ? null : "Quedan pocos • "} */}
586
+ )}
587
+ <div
588
+ className="flex flex-col items-end"
589
+ style={{
590
+ color: "#fff",
591
+ }}
592
+ >
593
+ <div className="flex items-center">
594
+ <div className="mr-[4px]">
595
+ {" "}
596
+ <LottiePlayer
597
+ animationData={serviceItem.icons.dotAnimation}
598
+ width="12px"
599
+ height="12px"
600
+ />
601
+ </div>
602
+ <span className="flex-1" style={{ lineHeight: 1.4 }}>
604
603
  <span
605
604
  className="bold-text"
606
605
  ref={(node) =>
607
- commonService.startComprandoCount(node, 4, 16)
606
+ commonService.startViewerCount(
607
+ node,
608
+ viewersConfig,
609
+ )
608
610
  }
609
611
  style={{ fontVariantNumeric: "tabular-nums" }}
610
612
  />{" "}
611
- comprando
613
+ <span> viendo</span> |{" "}
614
+ <span className="whitespace-nowrap">
615
+ {/* {serviceItem?.is_dp_enabled ? null : "Quedan pocos • "} */}
616
+ <span
617
+ className="bold-text"
618
+ ref={(node) =>
619
+ commonService.startComprandoCount(node, 4, 16)
620
+ }
621
+ style={{ fontVariantNumeric: "tabular-nums" }}
622
+ />{" "}
623
+ comprando
624
+ </span>
612
625
  </span>
613
- </span>
626
+ </div>
614
627
  </div>
615
628
  </div>
616
629
  </div>
617
630
  </div>
618
- </div>
619
- )}
631
+ )}
620
632
  <div
621
633
  style={{
622
634
  display: "grid",
@@ -627,7 +639,8 @@ function ServiceItemMobile({
627
639
  position: "relative",
628
640
  zIndex:
629
641
  hasOfferText ||
630
- (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents) ||
642
+ (serviceItem?.is_dp_enabled &&
643
+ serviceItem?.dp_discount_percents) ||
631
644
  (isNewUiEnabled && serviceItem?.ui_type === 2)
632
645
  ? -2
633
646
  : -1,
@@ -638,15 +651,14 @@ function ServiceItemMobile({
638
651
  overflow: "hidden",
639
652
  minHeight: 0,
640
653
  position:
641
- hasOfferText ||
642
- isNewUiEnabled ||
643
- serviceItem?.is_dp_enabled
654
+ hasOfferText || isNewUiEnabled || serviceItem?.is_dp_enabled
644
655
  ? "relative"
645
656
  : undefined,
646
657
  zIndex:
647
658
  serviceItem?.offer_text ||
648
659
  (isNewUiEnabled && serviceItem?.ui_type === 2) ||
649
- (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)
660
+ (serviceItem?.is_dp_enabled &&
661
+ serviceItem?.dp_discount_percents)
650
662
  ? -3
651
663
  : undefined,
652
664
  marginTop: hasOfferText ? "-15px" : "-10px",
package/src/components/ServiceItem/mobileTypes.ts CHANGED
@@ -208,6 +208,7 @@ export interface MobileServiceItemProps {
208
208
  tooltipBgColor?: string;
209
209
  lastSeatText?: string;
210
210
  lastSeatBg?: string;
211
+ discountSeatCrossPriceColor?: string;
211
212
 
212
213
  seatPriceColor?: string;
213
214
  rightGradiantColor?: string;
package/src/ui/OfferBanner.tsx CHANGED
@@ -228,7 +228,7 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
228
228
  const isDiscountBelow20 =
229
229
  (serviceItem as any)?.discount_value > 0 &&
230
230
  (serviceItem as any)?.discount_value < 20;
231
- const offerText = isDiscountBelow20 ? "" : serviceItem?.offer_text || "";
231
+ const offerText = serviceItem?.offer_text || "";
232
232
 
233
233
  const isLegacyOffer =
234
234
  !!offerText &&
package/src/ui/mobileweb/DateTimeSectionMobile.tsx CHANGED
@@ -26,6 +26,7 @@ interface DateTimeSectionMobileProps {
26
26
  showLastSeats?: boolean;
27
27
  discountSeatPriceColor?: string;
28
28
  isTrain?: boolean;
29
+ discountSeatCrossPriceColor?: string;
29
30
  }
30
31
 
31
32
  const pad = (n: number) => (n < 10 ? "0" + n : String(n));
@@ -135,6 +136,7 @@ function DateTimeSectionMobile({
135
136
  showLastSeats,
136
137
  discountSeatPriceColor,
137
138
  isTrain,
139
+ discountSeatCrossPriceColor,
138
140
  }: DateTimeSectionMobileProps): React.ReactElement {
139
141
  const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
140
142
 
@@ -211,6 +213,7 @@ function DateTimeSectionMobile({
211
213
  showLastSeats={showLastSeats}
212
214
  discountSeatPriceColor={discountSeatPriceColor}
213
215
  isTrain={isTrain}
216
+ discountSeatCrossPriceColor={discountSeatCrossPriceColor}
214
217
  />
215
218
  </div>
216
219
  );
package/src/ui/mobileweb/SeatSectionMobile.tsx CHANGED
@@ -33,6 +33,7 @@ interface SeatSectionMobileProps {
33
33
  showLastSeats?: boolean;
34
34
  discountSeatPriceColor?: string;
35
35
  isTrain?: boolean;
36
+ discountSeatCrossPriceColor?: string;
36
37
  }
37
38
 
38
39
  interface SeatRowProps {
@@ -132,6 +133,7 @@ function SeatSectionMobile({
132
133
  showLastSeats,
133
134
  discountSeatPriceColor,
134
135
  isTrain,
136
+ discountSeatCrossPriceColor,
135
137
  }: SeatSectionMobileProps): React.ReactElement {
136
138
  const hasMultipleTypes = (seatTypesData?.length ?? 0) > 2;
137
139
 
@@ -244,7 +246,6 @@ function SeatSectionMobile({
244
246
  );
245
247
  }
246
248
 
247
-
248
249
  const { originalPrice, discountedPrice } =
249
250
  commonService.calculateDiscountedPrice(lowestFare, serviceItem);
250
251
 
@@ -639,7 +640,7 @@ function SeatSectionMobile({
639
640
  left: "50%",
640
641
  width: "80%",
641
642
  height: "1px",
642
- background: discountSeatPriceColor,
643
+ background: discountSeatCrossPriceColor,
643
644
  transform: "rotate(-12deg)",
644
645
  transformOrigin: "center",
645
646
  }}