kupos-ui-components-lib 10.0.3 → 10.0.5

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 (10) hide show
  1. package/dist/components/ServiceItem/PeruServiceItemDesktop.js +4 -4
  2. package/dist/components/ServiceItem/ServiceItemDesktop.js +4 -4
  3. package/dist/ui/SeatSection/SeatSection.d.ts +2 -1
  4. package/dist/ui/SeatSection/SeatSection.js +41 -12
  5. package/dist/ui/ServiceBadges/ServiceBadges.d.ts +1 -1
  6. package/package.json +1 -1
  7. package/src/components/ServiceItem/PeruServiceItemDesktop.tsx +4 -3
  8. package/src/components/ServiceItem/ServiceItemDesktop.tsx +4 -3
  9. package/src/ui/SeatSection/SeatSection.tsx +47 -4
  10. package/src/ui/ServiceBadges/ServiceBadges.tsx +1 -1
package/dist/components/ServiceItem/PeruServiceItemDesktop.js CHANGED
@@ -376,7 +376,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
376
376
  const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text);
377
377
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
378
378
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
379
- const serviceCardStyle = (hasOfferText && isNewUiEnabled) || hasDpEnabled
379
+ const serviceCardStyle = ((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
380
380
  ? {
381
381
  borderColor: "transparent",
382
382
  borderStyle: "solid",
@@ -391,13 +391,13 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
391
391
  : serviceItem.seat_types || [];
392
392
  const discountedSeats = seats.map((seat) => (Object.assign(Object.assign({}, seat), CommonService.calculateDiscountedPrice(seat.fare, serviceItem))));
393
393
  const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
394
- return (React.createElement("div", { className: `relative hover:z-[150] ${hasOfferText || hasDpEnabled || isNewUiEnabled ? "mb-[65px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
394
+ return (React.createElement("div", { className: `relative hover:z-[150] ${(hasOfferText || hasDpEnabled || isNewUiEnabled) && !isSoldOut ? "mb-[65px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
395
395
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
396
396
  showTopLabel
397
397
  ? "mt-[30px]"
398
398
  : "mt-[20px]"} ` },
399
399
  ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDpEnabled) && !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 })),
400
- React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${(hasOfferText && isNewUiEnabled && !isSoldOut) || hasDpEnabled
400
+ React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
401
401
  ? "z-[3] rounded-[18px]"
402
402
  : "rounded-[10px] border border-[#ccc]"}`, style: serviceCardStyle },
403
403
  React.createElement("div", { className: " pt-[20px]", style: {
@@ -458,7 +458,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
458
458
  margin: "auto",
459
459
  } }),
460
460
  React.createElement("div", { className: "content-center" },
461
- React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru, renderIcon: renderIcon, discountSeatPriceColor: colors.discountSeatPriceColor })),
461
+ React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru, renderIcon: renderIcon, discountSeatPriceColor: colors.discountSeatPriceColor, isSeatIcon: isSeatIcon })),
462
462
  React.createElement("div", { className: "relative" },
463
463
  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 }),
464
464
  showLastSeats ? (React.createElement("div", { className: "flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[36px]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -156,7 +156,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
156
156
  const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true;
157
157
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
158
158
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
159
- const serviceCardStyle = (hasOfferText && isNewUiEnabled) || hasDpEnabled
159
+ const serviceCardStyle = ((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
160
160
  ? {
161
161
  borderColor: "transparent",
162
162
  borderStyle: "solid",
@@ -293,13 +293,13 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
293
293
  setIsFeatureDropDownExpand(isFeatureDropDownExpand === serviceItem.id ||
294
294
  isFeatureDropDownExpand === true
295
295
  ? 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 ? "mb-[65px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
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-[65px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
297
297
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
298
298
  showTopLabel
299
299
  ? "mt-[30px]"
300
300
  : "mt-[20px]"} ` },
301
301
  ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDpEnabled) && !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 })),
302
- React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${(hasOfferText && isNewUiEnabled && !isSoldOut) || hasDpEnabled
302
+ React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
303
303
  ? "z-[3] rounded-[18px]"
304
304
  : "rounded-[10px] border border-[#ccc]"}`, style: serviceCardStyle },
305
305
  React.createElement("div", { className: " pt-[20px]", style: {
@@ -326,7 +326,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
326
326
  backgroundColor: "#ccc",
327
327
  } }),
328
328
  React.createElement("div", { className: "content-center" },
329
- 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, isTrain: isTrain, selectedSeatKey: selectedSeatKey, onSeatSelect: handleSeatSelect, topLabelColor: colors.topLabelColor, tooltipColor: colors.tooltipColor })),
329
+ 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 })),
330
330
  React.createElement("div", { className: "relative" },
331
331
  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 }),
332
332
  showSeatSelectionError === serviceItem.id && isTrain && (React.createElement("div", { className: "flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]" },
package/dist/ui/SeatSection/SeatSection.d.ts CHANGED
@@ -18,11 +18,12 @@ interface SeatSectionProps {
18
18
  serviceItem?: any;
19
19
  renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
20
20
  discountSeatPriceColor?: string;
21
+ isSeatIcon?: boolean;
21
22
  isTrain?: boolean;
22
23
  selectedSeatKey?: any;
23
24
  onSeatSelect?: (key: any, price: number, seatKey: string, apiSeatType?: string) => void;
24
25
  topLabelColor?: string;
25
26
  tooltipColor?: string;
26
27
  }
27
- declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isTrain, topLabelColor, tooltipColor, }: SeatSectionProps): React.ReactElement;
28
+ declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isSeatIcon, isTrain, topLabelColor, tooltipColor, }: SeatSectionProps): React.ReactElement;
28
29
  export default SeatSection;
package/dist/ui/SeatSection/SeatSection.js CHANGED
@@ -61,7 +61,18 @@ function getUniqueSeats(seatTypes) {
61
61
  function getNumberOfSeats(seatTypes) {
62
62
  return seatTypes.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
63
63
  }
64
- function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isTrain, topLabelColor, tooltipColor, }) {
64
+ function getSeatTypeIcon(label, serviceItem) {
65
+ var _a, _b, _c, _d;
66
+ const seatLabel = String(label !== null && label !== void 0 ? label : "");
67
+ if (seatLabel.includes("180°"))
68
+ return (_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _a === void 0 ? void 0 : _a.seat180Icon;
69
+ if (seatLabel.includes("160°"))
70
+ return (_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _b === void 0 ? void 0 : _b.seat160Icon;
71
+ if (seatLabel.includes("140°"))
72
+ return (_c = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _c === void 0 ? void 0 : _c.seat140Icon;
73
+ return (_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _d === void 0 ? void 0 : _d.seatFallBackIcon;
74
+ }
75
+ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isSeatIcon, isTrain, topLabelColor, tooltipColor, }) {
65
76
  var _a;
66
77
  const uniqueSeats = getUniqueSeats(seatTypes);
67
78
  const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
@@ -94,13 +105,19 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
94
105
  width: "7px",
95
106
  height: "7px",
96
107
  } })))),
97
- React.createElement("span", { key: key, className: `flex items-center justify-between text-[13.33px] whitespace-nowrap ${isSoldOut ? "text-[#c0c0c0]" : ""}` }, typeof val.label === "string" || typeof val.label === "number"
98
- ? removeDuplicateSeats && isPeru
99
- ? CommonService.truncateSeatLabel(val.label)
100
- : isTrain
101
- ? CommonService.capitalize(String(val.label))
102
- : val.label
103
- : null)));
108
+ React.createElement("span", { key: key, className: `flex items-center justify-between text-[13.33px] whitespace-nowrap ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
109
+ isSeatIcon && (React.createElement("img", { src: getSeatTypeIcon(val.label, serviceItem), alt: "seattype", style: {
110
+ width: "20px",
111
+ height: "20px",
112
+ marginRight: "5px",
113
+ } })),
114
+ typeof val.label === "string" || typeof val.label === "number"
115
+ ? removeDuplicateSeats && isPeru
116
+ ? CommonService.truncateSeatLabel(val.label)
117
+ : isTrain
118
+ ? CommonService.capitalize(String(val.label))
119
+ : val.label
120
+ : null)));
104
121
  });
105
122
  };
106
123
  const renderSeatPrices = () => {
@@ -180,7 +197,13 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
180
197
  if (isMovilBus && uniqueSeats.length > 1) {
181
198
  return uniqueSeats
182
199
  .filter((s) => !SEAT_EXCEPTIONS.includes(s.label))
183
- .map((val, key) => (React.createElement("span", { key: key, className: `flex items-center justify-between text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` }, CommonService.truncateSeatLabel(val.label))));
200
+ .map((val, key) => (React.createElement("span", { key: key, className: `flex items-center justify-between text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
201
+ isSeatIcon && !hasDiscount && (React.createElement("img", { src: getSeatTypeIcon(val.label, serviceItem), alt: "seattype", style: {
202
+ width: "20px",
203
+ height: "20px",
204
+ marginRight: "5px",
205
+ } })),
206
+ CommonService.truncateSeatLabel(val.label))));
184
207
  }
185
208
  // Single seat type → original behaviour
186
209
  const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
@@ -196,7 +219,13 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
196
219
  hasDiscount && (React.createElement("span", { className: "text-[13.33px]", style: {
197
220
  color: "#999",
198
221
  } }, "Antes")),
199
- React.createElement("span", { className: "text-[13.33px] flex flex-col" }, operatorServiceName ? (React.createElement("span", { className: "text-[13.33px] whitespace-nowrap" }, seatLabel)) : (React.createElement("span", { className: "text-[13.33px]" }, "Desde")))));
222
+ React.createElement("span", { className: "text-[13.33px] flex flex-col" }, !hasDiscount ? (React.createElement("span", { className: "text-[13.33px] whitespace-nowrap flex items-center" },
223
+ isSeatIcon && !hasDiscount && (React.createElement("img", { src: getSeatTypeIcon(seatLabel, serviceItem), alt: "seattype", style: {
224
+ width: "20px",
225
+ height: "20px",
226
+ marginRight: "5px",
227
+ } })),
228
+ seatLabel)) : (React.createElement("span", { className: "text-[13.33px]" }, "Desde")))));
200
229
  }
201
230
  return renderSeatNames();
202
231
  };
@@ -243,7 +272,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
243
272
  } }))),
244
273
  React.createElement("div", { className: "col-start-2 row-start-3 flex h-[30px] items-end justify-center relative" },
245
274
  React.createElement("span", { className: "flex items-center gap-[6px] text-[22px] bold-text leading-[30px]", style: { color: isSoldOut ? "#c0c0c0" : dpSeatColor || "#ff5964" } },
246
- React.createElement("div", { className: "absolute", style: { left: isPeru ? "-1px" : "-19px", bottom: "1px" } }, renderIcon("fireIcon", "16px")),
275
+ React.createElement("div", { className: "absolute", style: { left: isPeru ? "-19px" : "-19px", bottom: "1px" } }, renderIcon("fireIcon", "16px")),
247
276
  availableSeats <= 0
248
277
  ? CommonService.currency(0, currencySign)
249
278
  : CommonService.discountedCurrency(Number(seatTypeFare), currencySign)))));
@@ -315,7 +344,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
315
344
  React.createElement("div", { className: "col-start-2 row-start-3 flex h-[30px] items-end justify-center relative" },
316
345
  React.createElement("span", { className: "flex items-center gap-[6px] text-[22px] bold-text leading-[30px]", style: { color: isSoldOut ? "#c0c0c0" : discountSeatPriceColor } },
317
346
  React.createElement("div", { className: "absolute", style: {
318
- left: isPeru ? "-1px" : "-18px",
347
+ left: isPeru ? "-16px" : "-18px",
319
348
  bottom: "1px",
320
349
  } }, renderIcon("fireIcon", "16px")),
321
350
  availableSeats <= 0
package/dist/ui/ServiceBadges/ServiceBadges.d.ts CHANGED
@@ -13,7 +13,7 @@ interface ServiceBadgesProps {
13
13
  train_type_label?: string;
14
14
  };
15
15
  isAllinBus?: boolean;
16
- boardingName?: string;
16
+ boardingName?: any;
17
17
  getAnimationIcon?: (iconKey: string) => any;
18
18
  }
19
19
  declare const ServiceBadges: React.FC<ServiceBadgesProps>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "10.0.3",
3
+ "version": "10.0.5",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/PeruServiceItemDesktop.tsx CHANGED
@@ -576,7 +576,7 @@ function PeruServiceItemDesktop({
576
576
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
577
577
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
578
578
  const serviceCardStyle: React.CSSProperties =
579
- (hasOfferText && isNewUiEnabled) || hasDpEnabled
579
+ ((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
580
580
  ? {
581
581
  borderColor: "transparent",
582
582
  borderStyle: "solid",
@@ -605,7 +605,7 @@ function PeruServiceItemDesktop({
605
605
 
606
606
  return (
607
607
  <div
608
- className={`relative hover:z-[150] ${hasOfferText || hasDpEnabled || isNewUiEnabled ? "mb-[65px]" : "mb-[20px]"} ${
608
+ className={`relative hover:z-[150] ${(hasOfferText || hasDpEnabled || isNewUiEnabled) && !isSoldOut ? "mb-[65px]" : "mb-[20px]"} ${
609
609
  serviceItem?.is_direct_trip ||
610
610
  serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
611
611
  showTopLabel
@@ -631,7 +631,7 @@ function PeruServiceItemDesktop({
631
631
  <div
632
632
  id={`service-card-${serviceItem.id}`}
633
633
  className={`bg-white mx-auto relative ${
634
- (hasOfferText && isNewUiEnabled && !isSoldOut) || hasDpEnabled
634
+ ((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
635
635
  ? "z-[3] rounded-[18px]"
636
636
  : "rounded-[10px] border border-[#ccc]"
637
637
  }`}
@@ -865,6 +865,7 @@ function PeruServiceItemDesktop({
865
865
  isPeru={isPeru}
866
866
  renderIcon={renderIcon}
867
867
  discountSeatPriceColor={colors.discountSeatPriceColor}
868
+ isSeatIcon={isSeatIcon}
868
869
  />
869
870
  </div>
870
871
 
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -270,7 +270,7 @@ function ServiceItemPB({
270
270
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
271
271
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
272
272
  const serviceCardStyle: React.CSSProperties =
273
- (hasOfferText && isNewUiEnabled) || hasDpEnabled
273
+ ((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
274
274
  ? {
275
275
  borderColor: "transparent",
276
276
  borderStyle: "solid",
@@ -535,7 +535,7 @@ function ServiceItemPB({
535
535
  />
536
536
  ) : (
537
537
  <div
538
- className={`relative hover:z-[150] ${hasOfferText || hasDpEnabled || isNewUiEnabled ? "mb-[65px]" : "mb-[20px]"} ${
538
+ className={`relative hover:z-[150] ${(hasOfferText || hasDpEnabled || isNewUiEnabled) && !isSoldOut ? "mb-[65px]" : "mb-[20px]"} ${
539
539
  serviceItem?.is_direct_trip ||
540
540
  serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
541
541
  showTopLabel
@@ -562,7 +562,7 @@ function ServiceItemPB({
562
562
  <div
563
563
  id={`service-card-${serviceItem.id}`}
564
564
  className={`bg-white mx-auto relative ${
565
- (hasOfferText && isNewUiEnabled && !isSoldOut) || hasDpEnabled
565
+ ((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
566
566
  ? "z-[3] rounded-[18px]"
567
567
  : "rounded-[10px] border border-[#ccc]"
568
568
  }`}
@@ -649,6 +649,7 @@ function ServiceItemPB({
649
649
  isPeru={isPeru}
650
650
  renderIcon={renderIcon}
651
651
  discountSeatPriceColor={colors.discountSeatPriceColor}
652
+ isSeatIcon={isSeatIcon}
652
653
  isTrain={isTrain}
653
654
  selectedSeatKey={selectedSeatKey}
654
655
  onSeatSelect={handleSeatSelect}
package/src/ui/SeatSection/SeatSection.tsx CHANGED
@@ -23,6 +23,7 @@ interface SeatSectionProps {
23
23
  serviceItem?: any;
24
24
  renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
25
25
  discountSeatPriceColor?: string;
26
+ isSeatIcon?: boolean;
26
27
  isTrain?: boolean;
27
28
  selectedSeatKey?: any;
28
29
  onSeatSelect?: (
@@ -111,6 +112,14 @@ function getNumberOfSeats(seatTypes: SeatType[]) {
111
112
  return seatTypes.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
112
113
  }
113
114
 
115
+ function getSeatTypeIcon(label: string, serviceItem: any) {
116
+ const seatLabel = String(label ?? "");
117
+ if (seatLabel.includes("180°")) return serviceItem?.icons?.seat180Icon;
118
+ if (seatLabel.includes("160°")) return serviceItem?.icons?.seat160Icon;
119
+ if (seatLabel.includes("140°")) return serviceItem?.icons?.seat140Icon;
120
+ return serviceItem?.icons?.seatFallBackIcon;
121
+ }
122
+
114
123
  function SeatSection({
115
124
  seatTypes,
116
125
  availableSeats,
@@ -125,6 +134,7 @@ function SeatSection({
125
134
  renderIcon,
126
135
  dpSeatColor,
127
136
  discountSeatPriceColor,
137
+ isSeatIcon,
128
138
  isTrain,
129
139
  topLabelColor,
130
140
  tooltipColor,
@@ -193,6 +203,17 @@ function SeatSection({
193
203
  isSoldOut ? "text-[#c0c0c0]" : ""
194
204
  }`}
195
205
  >
206
+ {isSeatIcon && (
207
+ <img
208
+ src={getSeatTypeIcon(val.label, serviceItem) as string}
209
+ alt="seattype"
210
+ style={{
211
+ width: "20px",
212
+ height: "20px",
213
+ marginRight: "5px",
214
+ }}
215
+ />
216
+ )}
196
217
  {typeof val.label === "string" || typeof val.label === "number"
197
218
  ? removeDuplicateSeats && isPeru
198
219
  ? CommonService.truncateSeatLabel(val.label)
@@ -345,6 +366,17 @@ function SeatSection({
345
366
  isSoldOut ? "text-[#c0c0c0]" : ""
346
367
  }`}
347
368
  >
369
+ {isSeatIcon && !hasDiscount && (
370
+ <img
371
+ src={getSeatTypeIcon(val.label, serviceItem) as string}
372
+ alt="seattype"
373
+ style={{
374
+ width: "20px",
375
+ height: "20px",
376
+ marginRight: "5px",
377
+ }}
378
+ />
379
+ )}
348
380
  {CommonService.truncateSeatLabel(val.label)}
349
381
  </span>
350
382
  ));
@@ -380,8 +412,19 @@ function SeatSection({
380
412
  )}
381
413
 
382
414
  <span className="text-[13.33px] flex flex-col">
383
- {operatorServiceName ? (
384
- <span className="text-[13.33px] whitespace-nowrap">
415
+ {!hasDiscount ? (
416
+ <span className="text-[13.33px] whitespace-nowrap flex items-center">
417
+ {isSeatIcon && !hasDiscount && (
418
+ <img
419
+ src={getSeatTypeIcon(seatLabel as string, serviceItem) as string}
420
+ alt="seattype"
421
+ style={{
422
+ width: "20px",
423
+ height: "20px",
424
+ marginRight: "5px",
425
+ }}
426
+ />
427
+ )}
385
428
  {seatLabel}
386
429
  </span>
387
430
  ) : (
@@ -478,7 +521,7 @@ function SeatSection({
478
521
  >
479
522
  <div
480
523
  className="absolute"
481
- style={{ left: isPeru ? "-1px" : "-19px", bottom: "1px" }}
524
+ style={{ left: isPeru ? "-19px" : "-19px", bottom: "1px" }}
482
525
  >
483
526
  {renderIcon("fireIcon", "16px")}
484
527
  </div>
@@ -636,7 +679,7 @@ function SeatSection({
636
679
  <div
637
680
  className="absolute"
638
681
  style={{
639
- left: isPeru ? "-1px" : "-18px",
682
+ left: isPeru ? "-16px" : "-18px",
640
683
  bottom: "1px",
641
684
  }}
642
685
  >
package/src/ui/ServiceBadges/ServiceBadges.tsx CHANGED
@@ -15,7 +15,7 @@ interface ServiceBadgesProps {
15
15
  train_type_label?: string;
16
16
  };
17
17
  isAllinBus?: boolean;
18
- boardingName?: string;
18
+ boardingName?: any;
19
19
  getAnimationIcon?: (iconKey: string) => any;
20
20
  }
21
21