kupos-ui-components-lib 10.4.25 → 10.4.27

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 (23) hide show
  1. package/dist/components/ServiceItem/PeruServiceItemMobile.d.ts +1 -1
  2. package/dist/components/ServiceItem/PeruServiceItemMobile.js +21 -16
  3. package/dist/components/ServiceItem/ServiceItemDesktop.js +1 -1
  4. package/dist/components/ServiceItem/ServiceItemMobile.js +1 -1
  5. package/dist/components/ServiceItem/mobileTypes.d.ts +1 -0
  6. package/dist/components/ServiceItem/types.d.ts +1 -0
  7. package/dist/ui/PeruOfferBanner.js +1 -1
  8. package/dist/ui/SeatSection/SeatSection.d.ts +2 -1
  9. package/dist/ui/SeatSection/SeatSection.js +2 -2
  10. package/dist/ui/mobileweb/DateTimeSectionMobile.d.ts +2 -1
  11. package/dist/ui/mobileweb/DateTimeSectionMobile.js +2 -2
  12. package/dist/ui/mobileweb/SeatSectionMobile.d.ts +2 -1
  13. package/dist/ui/mobileweb/SeatSectionMobile.js +2 -2
  14. package/package.json +1 -1
  15. package/src/components/ServiceItem/PeruServiceItemMobile.tsx +127 -117
  16. package/src/components/ServiceItem/ServiceItemDesktop.tsx +3 -0
  17. package/src/components/ServiceItem/ServiceItemMobile.tsx +1 -0
  18. package/src/components/ServiceItem/mobileTypes.ts +1 -0
  19. package/src/components/ServiceItem/types.ts +1 -0
  20. package/src/ui/PeruOfferBanner.tsx +1 -1
  21. package/src/ui/SeatSection/SeatSection.tsx +3 -1
  22. package/src/ui/mobileweb/DateTimeSectionMobile.tsx +3 -0
  23. package/src/ui/mobileweb/SeatSectionMobile.tsx +3 -2
package/dist/components/ServiceItem/PeruServiceItemMobile.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  import { MobileServiceItemProps } from "./mobileTypes";
3
- interface PeruServiceItemMobileProps extends Omit<MobileServiceItemProps, 'isNewUi'> {
3
+ interface PeruServiceItemMobileProps extends Omit<MobileServiceItemProps, "isNewUi"> {
4
4
  isNewUiEnabled?: boolean;
5
5
  }
6
6
  declare function PeruServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, operatorLabel, isTrain, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUiEnabled, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, isAllinBus, }: PeruServiceItemMobileProps): React.ReactElement;
package/dist/components/ServiceItem/PeruServiceItemMobile.js CHANGED
@@ -29,11 +29,13 @@ function PeruServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStag
29
29
  const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
30
30
  const isLongOfferText = (((_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) === null || _c === void 0 ? void 0 : _c.length) || 0) > 35;
31
31
  const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true;
32
- const isDiscountBelow20 = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) > 0 && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) < 20;
33
- const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && !isDiscountBelow20;
32
+ const isDiscountBelow20 = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) > 0 &&
33
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) < 20;
34
+ const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text);
34
35
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
35
36
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
36
- const serviceCardStyle = (isNewUiEnabled || ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents)))
37
+ const serviceCardStyle = isNewUiEnabled ||
38
+ ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
37
39
  ? {
38
40
  borderColor: isSoldOut ? "#ccc" : "transparent",
39
41
  borderStyle: "solid",
@@ -67,7 +69,9 @@ function PeruServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStag
67
69
  : typeof raw === "string"
68
70
  ? raw.split("|").filter(Boolean)
69
71
  : [];
70
- const nodes = list.slice(0, 2).map((am, i) => {
72
+ const nodes = list
73
+ .slice(0, 2)
74
+ .map((am, i) => {
71
75
  var _a;
72
76
  return (React.createElement("img", { key: i, className: "amenity", height: 12, width: 12, src: commonService.getAmenitiesImage((_a = amenitiesData === null || amenitiesData === void 0 ? void 0 : amenitiesData[am]) === null || _a === void 0 ? void 0 : _a.toLowerCase(), serviceItem), alt: "icon" }));
73
77
  });
@@ -106,7 +110,8 @@ function PeruServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStag
106
110
  ? "mt-[20px]"
107
111
  : "mt-[10px]"} `, style: { zIndex: 1 } },
108
112
  React.createElement("div", { className: `z-1 ${(isNewUiEnabled ||
109
- ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))) &&
113
+ ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
114
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))) &&
110
115
  !isSoldOut
111
116
  ? "rounded-[18px]"
112
117
  : "rounded-[10px] border border-[#ccc]"}`, style: Object.assign(Object.assign({}, serviceCardStyle), { backgroundColor: "#fff" }) },
@@ -138,8 +143,10 @@ function PeruServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStag
138
143
  color: colors.tooltipBgColor,
139
144
  } }, "\u00A1\u00DAltimos Asientos!")))) : null,
140
145
  React.createElement("div", { className: "bg-[#E6E6E6] mt-[10px] mb-[8px] h-[1px]" }),
141
- React.createElement(BottomAmenitiesMobile, { isSoldOut: isSoldOut, amenitiesNodes: amenities(), hoursIcon: renderIcon("hours", "14px"), duration: (_h = serviceItem.duration) === null || _h === void 0 ? void 0 : _h.toString(), isDirectTrip: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip, directoColor: colors.directoColor, directoAnim: (_j = serviceItem.icons) === null || _j === void 0 ? void 0 : _j.directoAnim, isChangeTicket: serviceItem.is_change_ticket, isPetSeat: isPetSeat, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: (_k = serviceItem.icons) === null || _k === void 0 ? void 0 : _k.petFriendlyAnim, flexibleAnim: (_l = serviceItem.icons) === null || _l === void 0 ? void 0 : _l.flexibleAnim, isTrackingEnabled: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled, locationAnim: (_m = serviceItem.icons) === null || _m === void 0 ? void 0 : _m.locationAnim, downArrowIcon: (_o = serviceItem.icons) === null || _o === void 0 ? void 0 : _o.downArrow, showDropdown: isItemExpanded, setShowDropdown: () => setIsExpanded && setIsExpanded(isItemExpanded ? null : serviceItem.id), onDropdownToggle: () => {
142
- setIsExpanded && setIsExpanded(isItemExpanded ? null : serviceItem.id);
146
+ React.createElement(BottomAmenitiesMobile, { isSoldOut: isSoldOut, amenitiesNodes: amenities(), hoursIcon: renderIcon("hours", "14px"), duration: (_h = serviceItem.duration) === null || _h === void 0 ? void 0 : _h.toString(), isDirectTrip: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip, directoColor: colors.directoColor, directoAnim: (_j = serviceItem.icons) === null || _j === void 0 ? void 0 : _j.directoAnim, isChangeTicket: serviceItem.is_change_ticket, isPetSeat: isPetSeat, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: (_k = serviceItem.icons) === null || _k === void 0 ? void 0 : _k.petFriendlyAnim, flexibleAnim: (_l = serviceItem.icons) === null || _l === void 0 ? void 0 : _l.flexibleAnim, isTrackingEnabled: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled, locationAnim: (_m = serviceItem.icons) === null || _m === void 0 ? void 0 : _m.locationAnim, downArrowIcon: (_o = serviceItem.icons) === null || _o === void 0 ? void 0 : _o.downArrow, showDropdown: isItemExpanded, setShowDropdown: () => setIsExpanded &&
147
+ setIsExpanded(isItemExpanded ? null : serviceItem.id), onDropdownToggle: () => {
148
+ setIsExpanded &&
149
+ setIsExpanded(isItemExpanded ? null : serviceItem.id);
143
150
  }, isPeru: isPeru, femaleAnim: (_p = serviceItem.icons) === null || _p === void 0 ? void 0 : _p.femaleAnim, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, isTrain: isTrain, seatCategoryText: serviceItem.api_type === 78 && serviceItem.number
144
151
  ? serviceItem.number
145
152
  : undefined })),
@@ -162,18 +169,18 @@ function PeruServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStag
162
169
  lineHeight: 1.4,
163
170
  } },
164
171
  React.createElement("span", { className: "whitespace-nowrap min-[380px]:text-[12px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))))))),
165
- (isNewUiEnabled || ((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: {
166
- background: isSoldOut
167
- ? offerGradientWithOpacity
168
- : offerGradient,
172
+ (isNewUiEnabled ||
173
+ ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))) &&
174
+ !isSoldOut && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
175
+ background: isSoldOut ? offerGradientWithOpacity : offerGradient,
169
176
  borderRadius: "0 0 14px 14px",
170
177
  zIndex: -1,
171
178
  } },
172
179
  React.createElement("div", { className: "flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]", style: { lineHeight: 1.6 } },
173
180
  React.createElement("div", { className: "flex justify-between items-center" },
174
181
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
175
- Object.keys((_r = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _r !== void 0 ? _r : {})
176
- .length === 0 &&
182
+ Object.keys((_r = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) !== null && _r !== void 0 ? _r : {}).length ===
183
+ 0 &&
177
184
  ((_s = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) !== null && _s !== void 0 ? _s : []).length === 0 ? (React.createElement("div", { className: "flex items-center gap-[6px]" },
178
185
  React.createElement(LottiePlayer, { animationData: (_t = serviceItem.icons) === null || _t === void 0 ? void 0 : _t.starAnimation, width: "14px", height: "14px" }),
179
186
  React.createElement("span", { className: "text-[#fff]" }, "M\u00E1s elegido"))) : (React.createElement("div", { className: `flex ${((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "").length > 10 ? "items-start" : "items-center"}` },
@@ -218,9 +225,7 @@ function PeruServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStag
218
225
  React.createElement("div", { style: {
219
226
  overflow: "hidden",
220
227
  minHeight: 0,
221
- position: hasOfferText ||
222
- isNewUiEnabled ||
223
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
228
+ position: hasOfferText || isNewUiEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
224
229
  ? "relative"
225
230
  : undefined,
226
231
  zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ||
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -353,7 +353,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
353
353
  backgroundColor: "#ccc",
354
354
  } }),
355
355
  React.createElement("div", { className: "content-center" },
356
- React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, dpSeatColor: colors.seatPriceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru, renderIcon: renderIcon, discountSeatPriceColor: colors.discountSeatPriceColor, isSeatIcon: isSeatIcon, isTrain: isTrain, selectedSeatKey: selectedSeatKey, onSeatSelect: handleSeatSelect, topLabelColor: colors.topLabelColor, tooltipColor: colors.tooltipColor })),
356
+ React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, dpSeatColor: colors.seatPriceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru, renderIcon: renderIcon, discountSeatPriceColor: colors.discountSeatPriceColor, isSeatIcon: isSeatIcon, isTrain: isTrain, selectedSeatKey: selectedSeatKey, onSeatSelect: handleSeatSelect, topLabelColor: colors.topLabelColor, tooltipColor: colors.tooltipColor, discountSeatCrossPriceColor: colors.discountSeatCrossPriceColor })),
357
357
  React.createElement("div", { className: "relative" },
358
358
  React.createElement(KuposButton, { isSoldOut: isSoldOut, isLoading: serviceDetailsLoading, buttonColor: colors.kuposButtonColor, buyLabel: translation === null || translation === void 0 ? void 0 : translation.buyButton, soldOutLabel: translation === null || translation === void 0 ? void 0 : translation.soldOutButton, soldOutIcon: renderIcon("soldOutIcon", "14px"), onClick: checkMidnight }),
359
359
  showSeatSelectionError === serviceItem.id && isTrain && (React.createElement("div", { className: "flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]" },
package/dist/components/ServiceItem/ServiceItemMobile.js CHANGED
@@ -154,7 +154,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
154
154
  color: isSoldOut ? "#bbb" : "text-[#464647]",
155
155
  } },
156
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)),
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 }),
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 }),
158
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)),
159
159
  showLastSeats ? (React.createElement("div", { className: "flex justify-end " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
160
160
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[10px] text-center", style: {
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/components/ServiceItem/types.d.ts CHANGED
@@ -180,6 +180,7 @@ export interface ServiceItemProps {
180
180
  discountSeatPriceColor?: string;
181
181
  topLabelBgColor?: string;
182
182
  boardingBorderColor?: string;
183
+ discountSeatCrossPriceColor?: string;
183
184
  };
184
185
  cityOrigin?: {
185
186
  value: number;
package/dist/ui/PeruOfferBanner.js CHANGED
@@ -59,7 +59,7 @@ const ViewersCount = ({ serviceItem, viewersConfig, getAnimationIcon, }) => {
59
59
  const PeruOfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, showLoginModal, viewersConfig, getAnimationIcon, showLoginOption, colors, isLinatal, coachKey, isExpand, isNewUiEnabled, }) => {
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 && !isNewUiEnabled;
64
64
  // const showViewers = serviceItem?.is_dp_enabled;
65
65
  const showViewers = isNewUiEnabled;
package/dist/ui/SeatSection/SeatSection.d.ts CHANGED
@@ -24,6 +24,7 @@ interface SeatSectionProps {
24
24
  onSeatSelect?: (key: any, price: number, seatKey: string, apiSeatType?: string) => void;
25
25
  topLabelColor?: string;
26
26
  tooltipColor?: string;
27
+ discountSeatCrossPriceColor?: string;
27
28
  }
28
- declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isSeatIcon, isTrain, topLabelColor, tooltipColor, }: SeatSectionProps): React.ReactElement;
29
+ declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isSeatIcon, isTrain, topLabelColor, tooltipColor, discountSeatCrossPriceColor, }: SeatSectionProps): React.ReactElement;
29
30
  export default SeatSection;
package/dist/ui/SeatSection/SeatSection.js CHANGED
@@ -80,7 +80,7 @@ function getSeatTypeIcon(label, serviceItem) {
80
80
  return (_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _c === void 0 ? void 0 : _c.seat140Icon;
81
81
  return (_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _d === void 0 ? void 0 : _d.seatFallBackIcon;
82
82
  }
83
- function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isSeatIcon, isTrain, topLabelColor, tooltipColor, }) {
83
+ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isSeatIcon, isTrain, topLabelColor, tooltipColor, discountSeatCrossPriceColor, }) {
84
84
  var _a;
85
85
  const uniqueSeats = getUniqueSeats(seatTypes, isTrain);
86
86
  const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
@@ -349,7 +349,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
349
349
  top: "50%",
350
350
  width: "calc(100% + 4px)",
351
351
  height: "1px",
352
- backgroundColor: discountSeatPriceColor,
352
+ backgroundColor: discountSeatCrossPriceColor,
353
353
  transform: "rotate(-10deg)",
354
354
  transformOrigin: "center",
355
355
  } })))),
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.25",
3
+ "version": "10.4.27",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/PeruServiceItemMobile.tsx CHANGED
@@ -25,7 +25,10 @@ const exceptions = [
25
25
  "asiento_mascota",
26
26
  ];
27
27
 
28
- interface PeruServiceItemMobileProps extends Omit<MobileServiceItemProps, 'isNewUi'> {
28
+ interface PeruServiceItemMobileProps extends Omit<
29
+ MobileServiceItemProps,
30
+ "isNewUi"
31
+ > {
29
32
  isNewUiEnabled?: boolean;
30
33
  }
31
34
 
@@ -70,7 +73,8 @@ function PeruServiceItemMobile({
70
73
  isAllinBus,
71
74
  }: PeruServiceItemMobileProps): React.ReactElement {
72
75
  const isItemExpanded = serviceItem.id === isExpanded;
73
- const isPetSeat = (Object.keys(serviceItem?.pet_seat_info ?? {}) || []).length > 0;
76
+ const isPetSeat =
77
+ (Object.keys(serviceItem?.pet_seat_info ?? {}) || []).length > 0;
74
78
  let isSoldOut = serviceItem.available_seats <= 0;
75
79
 
76
80
  const seats = removeDuplicateSeats
@@ -92,12 +96,15 @@ function PeruServiceItemMobile({
92
96
  const isLongOfferText = (serviceItem?.offer_text?.length || 0) > 35;
93
97
  const hasDpEnabled = serviceItem?.is_dp_enabled === true;
94
98
 
95
- const isDiscountBelow20 = (serviceItem as any)?.discount_value > 0 && (serviceItem as any)?.discount_value < 20;
96
- const hasOfferText = Boolean(serviceItem?.offer_text) && !isDiscountBelow20;
99
+ const isDiscountBelow20 =
100
+ (serviceItem as any)?.discount_value > 0 &&
101
+ (serviceItem as any)?.discount_value < 20;
102
+ const hasOfferText = Boolean(serviceItem?.offer_text);
97
103
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
98
104
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
99
105
  const serviceCardStyle: React.CSSProperties =
100
- (isNewUiEnabled || (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents))
106
+ isNewUiEnabled ||
107
+ (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)
101
108
  ? {
102
109
  borderColor: isSoldOut ? "#ccc" : "transparent",
103
110
  borderStyle: "solid",
@@ -136,19 +143,21 @@ function PeruServiceItemMobile({
136
143
  ? raw.split("|").filter(Boolean)
137
144
  : [];
138
145
 
139
- const nodes = list.slice(0, 2).map((am, i) => (
140
- <img
141
- key={i}
142
- className="amenity"
143
- height={12}
144
- width={12}
145
- src={commonService.getAmenitiesImage(
146
- amenitiesData?.[am]?.toLowerCase(),
147
- serviceItem,
148
- )}
149
- alt="icon"
150
- />
151
- ));
146
+ const nodes = list
147
+ .slice(0, 2)
148
+ .map((am, i) => (
149
+ <img
150
+ key={i}
151
+ className="amenity"
152
+ height={12}
153
+ width={12}
154
+ src={commonService.getAmenitiesImage(
155
+ amenitiesData?.[am]?.toLowerCase(),
156
+ serviceItem,
157
+ )}
158
+ alt="icon"
159
+ />
160
+ ));
152
161
 
153
162
  return nodes;
154
163
  };
@@ -212,7 +221,8 @@ function PeruServiceItemMobile({
212
221
  <div
213
222
  className={`z-1 ${
214
223
  (isNewUiEnabled ||
215
- (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)) &&
224
+ (serviceItem?.is_dp_enabled &&
225
+ serviceItem?.dp_discount_percents)) &&
216
226
  !isSoldOut
217
227
  ? "rounded-[18px]"
218
228
  : "rounded-[10px] border border-[#ccc]"
@@ -356,10 +366,12 @@ function PeruServiceItemMobile({
356
366
  downArrowIcon={serviceItem.icons?.downArrow}
357
367
  showDropdown={isItemExpanded}
358
368
  setShowDropdown={() =>
359
- setIsExpanded && setIsExpanded(isItemExpanded ? null : serviceItem.id)
369
+ setIsExpanded &&
370
+ setIsExpanded(isItemExpanded ? null : serviceItem.id)
360
371
  }
361
372
  onDropdownToggle={() => {
362
- setIsExpanded && setIsExpanded(isItemExpanded ? null : serviceItem.id);
373
+ setIsExpanded &&
374
+ setIsExpanded(isItemExpanded ? null : serviceItem.id);
363
375
  }}
364
376
  isPeru={isPeru}
365
377
  femaleAnim={serviceItem.icons?.femaleAnim}
@@ -432,117 +444,117 @@ function PeruServiceItemMobile({
432
444
  )}
433
445
 
434
446
  {/* 🔹 EXPANDABLE DROPDOWN (below the card) - Countdown/registro when new UI is enabled */}
435
- {(isNewUiEnabled || (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)) && !isSoldOut && (
436
- <div
437
- className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
438
- style={{
439
- background: isSoldOut
440
- ? offerGradientWithOpacity
441
- : offerGradient,
442
- borderRadius: "0 0 14px 14px",
443
- zIndex: -1,
444
- }}
445
- >
447
+ {(isNewUiEnabled ||
448
+ (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)) &&
449
+ !isSoldOut && (
446
450
  <div
447
- className="flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]"
448
- style={{ lineHeight: 1.6 }}
451
+ className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
452
+ style={{
453
+ background: isSoldOut ? offerGradientWithOpacity : offerGradient,
454
+ borderRadius: "0 0 14px 14px",
455
+ zIndex: -1,
456
+ }}
449
457
  >
450
- <div className="flex justify-between items-center">
451
- {serviceItem?.is_dp_enabled &&
452
- Object.keys(serviceItem?.dp_discount_percents ?? {})
453
- .length === 0 &&
454
- (serviceItem?.dp_discounted_seats ?? []).length === 0 ? (
455
- <div className="flex items-center gap-[6px]">
456
- <LottiePlayer
457
- animationData={serviceItem.icons?.starAnimation}
458
- width="14px"
459
- height="14px"
460
- />
461
-
462
- <span className="text-[#fff]">Más elegido</span>
463
- </div>
464
- ) : (
465
- <div
466
- className={`flex ${(serviceItem?.offer_text || "").length > 10 ? "items-start" : "items-center"}`}
467
- >
468
- <div className={isLongOfferText ? "mt-[2px]" : ""}>
469
- {serviceItem.icons?.bombAnim && (
470
- <LottiePlayer
471
- animationData={serviceItem.icons.bombAnim}
472
- width="14px"
473
- height="14px"
474
- />
475
- )}
458
+ <div
459
+ className="flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]"
460
+ style={{ lineHeight: 1.6 }}
461
+ >
462
+ <div className="flex justify-between items-center">
463
+ {serviceItem?.is_dp_enabled &&
464
+ Object.keys(serviceItem?.dp_discount_percents ?? {}).length ===
465
+ 0 &&
466
+ (serviceItem?.dp_discounted_seats ?? []).length === 0 ? (
467
+ <div className="flex items-center gap-[6px]">
468
+ <LottiePlayer
469
+ animationData={serviceItem.icons?.starAnimation}
470
+ width="14px"
471
+ height="14px"
472
+ />
473
+
474
+ <span className="text-[#fff]">Más elegido</span>
476
475
  </div>
476
+ ) : (
477
477
  <div
478
- className={`ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`}
479
- style={{
480
- color: "#fff",
481
- lineHeight: 1.4,
482
- }}
478
+ className={`flex ${(serviceItem?.offer_text || "").length > 10 ? "items-start" : "items-center"}`}
483
479
  >
484
- {!isNewUiEnabled && serviceItem?.offer_text ? (
485
- <span className="whitespace-nowrap min-[380px]:text-[12px]">
486
- {serviceItem?.offer_text}
487
- </span>
488
- ) : (
489
- <span className="whitespace-nowrap min-[380px]:text-[12px]">
490
- Termina en&nbsp;
491
- <span
492
- className="bold-text"
493
- ref={(node) =>
494
- commonService.startCountdown(node, 599)
495
- }
496
- style={{
497
- fontVariantNumeric: "tabular-nums",
498
- display: "inline-block",
499
- }}
480
+ <div className={isLongOfferText ? "mt-[2px]" : ""}>
481
+ {serviceItem.icons?.bombAnim && (
482
+ <LottiePlayer
483
+ animationData={serviceItem.icons.bombAnim}
484
+ width="14px"
485
+ height="14px"
500
486
  />
501
- </span>
502
- )}
503
- </div>
504
- </div>
505
- )}
506
- <div
507
- className="flex flex-col items-end"
508
- style={{
509
- color: "#fff",
510
- }}
511
- >
512
- <div className="flex items-center">
513
- <div className="mr-[4px]">
514
- <LottiePlayer
515
- animationData={serviceItem.icons?.dotAnimation}
516
- width="12px"
517
- height="12px"
518
- />
487
+ )}
488
+ </div>
489
+ <div
490
+ className={`ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`}
491
+ style={{
492
+ color: "#fff",
493
+ lineHeight: 1.4,
494
+ }}
495
+ >
496
+ {!isNewUiEnabled && serviceItem?.offer_text ? (
497
+ <span className="whitespace-nowrap min-[380px]:text-[12px]">
498
+ {serviceItem?.offer_text}
499
+ </span>
500
+ ) : (
501
+ <span className="whitespace-nowrap min-[380px]:text-[12px]">
502
+ Termina en&nbsp;
503
+ <span
504
+ className="bold-text"
505
+ ref={(node) =>
506
+ commonService.startCountdown(node, 599)
507
+ }
508
+ style={{
509
+ fontVariantNumeric: "tabular-nums",
510
+ display: "inline-block",
511
+ }}
512
+ />
513
+ </span>
514
+ )}
515
+ </div>
519
516
  </div>
520
- <span className="flex-1" style={{ lineHeight: 1.4 }}>
521
- <span
522
- className="bold-text"
523
- ref={(node) =>
524
- commonService.startViewerCount(node, viewersConfig)
525
- }
526
- style={{ fontVariantNumeric: "tabular-nums" }}
527
- />{" "}
528
- <span> viendo</span> |{" "}
529
- <span className="whitespace-nowrap">
517
+ )}
518
+ <div
519
+ className="flex flex-col items-end"
520
+ style={{
521
+ color: "#fff",
522
+ }}
523
+ >
524
+ <div className="flex items-center">
525
+ <div className="mr-[4px]">
526
+ <LottiePlayer
527
+ animationData={serviceItem.icons?.dotAnimation}
528
+ width="12px"
529
+ height="12px"
530
+ />
531
+ </div>
532
+ <span className="flex-1" style={{ lineHeight: 1.4 }}>
530
533
  <span
531
534
  className="bold-text"
532
535
  ref={(node) =>
533
- commonService.startComprandoCount(node, 4, 16)
536
+ commonService.startViewerCount(node, viewersConfig)
534
537
  }
535
538
  style={{ fontVariantNumeric: "tabular-nums" }}
536
539
  />{" "}
537
- comprando
540
+ <span> viendo</span> |{" "}
541
+ <span className="whitespace-nowrap">
542
+ <span
543
+ className="bold-text"
544
+ ref={(node) =>
545
+ commonService.startComprandoCount(node, 4, 16)
546
+ }
547
+ style={{ fontVariantNumeric: "tabular-nums" }}
548
+ />{" "}
549
+ comprando
550
+ </span>
538
551
  </span>
539
- </span>
552
+ </div>
540
553
  </div>
541
554
  </div>
542
555
  </div>
543
556
  </div>
544
- </div>
545
- )}
557
+ )}
546
558
  <div
547
559
  style={{
548
560
  display: "grid",
@@ -564,9 +576,7 @@ function PeruServiceItemMobile({
564
576
  overflow: "hidden",
565
577
  minHeight: 0,
566
578
  position:
567
- hasOfferText ||
568
- isNewUiEnabled ||
569
- serviceItem?.is_dp_enabled
579
+ hasOfferText || isNewUiEnabled || serviceItem?.is_dp_enabled
570
580
  ? "relative"
571
581
  : undefined,
572
582
  zIndex:
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -689,6 +689,9 @@ function ServiceItemPB({
689
689
  onSeatSelect={handleSeatSelect}
690
690
  topLabelColor={colors.topLabelColor}
691
691
  tooltipColor={colors.tooltipColor}
692
+ discountSeatCrossPriceColor={
693
+ colors.discountSeatCrossPriceColor
694
+ }
692
695
  />
693
696
  </div>
694
697
 
package/src/components/ServiceItem/ServiceItemMobile.tsx CHANGED
@@ -394,6 +394,7 @@ function ServiceItemMobile({
394
394
  showLastSeats={showLastSeats}
395
395
  discountSeatPriceColor={colors.discountSeatPriceColor}
396
396
  isTrain={isTrain}
397
+ discountSeatCrossPriceColor={colors.discountSeatCrossPriceColor}
397
398
  />
398
399
 
399
400
  {hasDiscount && (
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/components/ServiceItem/types.ts CHANGED
@@ -184,6 +184,7 @@ export interface ServiceItemProps {
184
184
  discountSeatPriceColor?: string;
185
185
  topLabelBgColor?: string;
186
186
  boardingBorderColor?: string;
187
+ discountSeatCrossPriceColor?: string;
187
188
  };
188
189
  cityOrigin?: { value: number; label: string };
189
190
  cityDestination?: { value: number; label: string };
package/src/ui/PeruOfferBanner.tsx CHANGED
@@ -221,7 +221,7 @@ const PeruOfferBanner: React.FC<PeruOfferBannerProps> = ({
221
221
  const isDiscountBelow20 =
222
222
  (serviceItem as any)?.discount_value > 0 &&
223
223
  (serviceItem as any)?.discount_value < 20;
224
- const offerText = isDiscountBelow20 ? "" : serviceItem?.offer_text || "";
224
+ const offerText = serviceItem?.offer_text || "";
225
225
 
226
226
  const isLegacyOffer = !!offerText && !isNewUiEnabled;
227
227
 
package/src/ui/SeatSection/SeatSection.tsx CHANGED
@@ -34,6 +34,7 @@ interface SeatSectionProps {
34
34
  ) => void;
35
35
  topLabelColor?: string;
36
36
  tooltipColor?: string;
37
+ discountSeatCrossPriceColor?: string;
37
38
  }
38
39
 
39
40
  function getAllSeatTypes(seatTypes: SeatType[], isTrain?: boolean) {
@@ -146,6 +147,7 @@ function SeatSection({
146
147
  isTrain,
147
148
  topLabelColor,
148
149
  tooltipColor,
150
+ discountSeatCrossPriceColor,
149
151
  }: SeatSectionProps): React.ReactElement {
150
152
  const uniqueSeats = getUniqueSeats(seatTypes, isTrain);
151
153
  const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
@@ -687,7 +689,7 @@ function SeatSection({
687
689
  top: "50%",
688
690
  width: "calc(100% + 4px)",
689
691
  height: "1px",
690
- backgroundColor: discountSeatPriceColor,
692
+ backgroundColor: discountSeatCrossPriceColor,
691
693
  transform: "rotate(-10deg)",
692
694
  transformOrigin: "center",
693
695
  }}
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
  }}