kupos-ui-components-lib 10.4.48 → 10.4.50

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/components/PaymentSideBar/PaymentSideBarDesktop.js +2 -2
  2. package/dist/styles.css +9 -11
  3. package/dist/ui/DurationBlock.js +1 -1
  4. package/dist/ui/OfferBanner.js +1 -1
  5. package/dist/ui/SeatSection/SeatSection.js +7 -3
  6. package/dist/ui/ServiceBadges/ServiceBadges.js +1 -1
  7. package/dist/ui/mobileweb/DateTimeSectionMobile.js +13 -9
  8. package/dist/ui/mobileweb/SeatSectionMobile.js +22 -8
  9. package/package.json +1 -1
  10. package/src/components/PaymentSideBar/PaymentSideBarDesktop.tsx +2 -2
  11. package/src/ui/DurationBlock.tsx +1 -1
  12. package/src/ui/OfferBanner.tsx +1 -1
  13. package/src/ui/SeatSection/SeatSection.tsx +10 -3
  14. package/src/ui/ServiceBadges/ServiceBadges.tsx +1 -1
  15. package/src/ui/mobileweb/DateTimeSectionMobile.tsx +24 -10
  16. package/src/ui/mobileweb/SeatSectionMobile.tsx +34 -8
package/dist/components/PaymentSideBar/PaymentSideBarDesktop.js CHANGED
@@ -436,7 +436,7 @@ const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData,
436
436
  React.createElement("div", { className: "duration-mouseover font9", style: { lineHeight: "1.3" } },
437
437
  React.createElement("span", null, translation === null || translation === void 0 ? void 0 : translation.whatsappInfoIcon)))), amount: metaData.opsite_whatsapp_delivery_charges, className: "font10", customStyle: { color: colors === null || colors === void 0 ? void 0 : colors.whatsappDeliveryChargesColor }, isBoldText: true, currency: currency })) : null,
438
438
  removeDiscountAtomValue && (React.createElement(PaymentItem, { label: "Cup\u00F3n", amount: CommonService.currency(netFare, currencySign), isNegative: true, currency: "", isBoldText: true })),
439
- React.createElement("div", { style: { margin: "6px 0" } }, renderDiscount(discountAmount)),
439
+ React.createElement("div", { style: { margin: "6px 0 0" } }, renderDiscount(discountAmount)),
440
440
  (promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCodeApplied) && (React.createElement(React.Fragment, null,
441
441
  React.createElement(PaymentItem, { label: `${translation === null || translation === void 0 ? void 0 : translation.promotionalCode}:`, amount: CommonService.currency((promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount)
442
442
  ? promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount
@@ -461,7 +461,7 @@ const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData,
461
461
  : CommonService.currency(walletMoney, currencySign), currency: "", isBoldText: true })) : null,
462
462
  virtualMoney ? (React.createElement(PaymentItem, { label: React.createElement("span", { className: "secondary-text " }, `${creditosLabel}(${virtualLimit}%)`), amount: CommonService.currency(virtualMoney, currencySign), customStyle: { color: "var(--secondary-color)" }, currency: "", isBoldText: true })) : null,
463
463
  showUsd ? (React.createElement(PaymentItem, { label: React.createElement("span", { className: "secondary-text" }, translation === null || translation === void 0 ? void 0 : translation.showUsd), className: "text-[13.33px]", amount: CommonService.currency(isAgency ? netFareInUsd + agencyFee : netFareInUsd, currencySign), currency: "USD", customStyle: { color: "var(--secondary-color)" }, isBoldText: true })) : null),
464
- React.createElement("div", { className: ` text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[35px] pt-[50px] -z-10 rounded-b-[14px] text-[14px]`, style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.bottomStripColor } },
464
+ React.createElement("div", { className: ` text-white p-[7px_15px] text-left w-full flex items-center absolute -bottom-[35px] pt-[50px] -z-10 rounded-b-[14px] text-[14px]`, style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.bottomStripColor } },
465
465
  React.createElement("div", { className: "flex justify-between items-center w-full" },
466
466
  React.createElement("div", { className: "black-text" }, "Total"),
467
467
  React.createElement("div", { className: "bold-text ", style: {
package/dist/styles.css CHANGED
@@ -27,9 +27,6 @@
27
27
  .-top-\[8px\] {
28
28
  top: calc(8px * -1);
29
29
  }
30
- .-top-\[10px\] {
31
- top: calc(10px * -1);
32
- }
33
30
  .-top-\[11px\] {
34
31
  top: calc(11px * -1);
35
32
  }
@@ -60,6 +57,9 @@
60
57
  .top-\[25px\] {
61
58
  top: 25px;
62
59
  }
60
+ .top-\[29px\] {
61
+ top: 29px;
62
+ }
63
63
  .top-\[30px\] {
64
64
  top: 30px;
65
65
  }
@@ -138,9 +138,6 @@
138
138
  .left-\[31px\] {
139
139
  left: 31px;
140
140
  }
141
- .left-\[50\%\] {
142
- left: 50%;
143
- }
144
141
  .-z-9 {
145
142
  z-index: calc(9 * -1);
146
143
  }
@@ -1033,6 +1030,9 @@
1033
1030
  .p-\[6px_20px\] {
1034
1031
  padding: 6px 20px;
1035
1032
  }
1033
+ .p-\[7px_15px\] {
1034
+ padding: 7px 15px;
1035
+ }
1036
1036
  .p-\[8px_4px_4px\] {
1037
1037
  padding: 8px 4px 4px;
1038
1038
  }
@@ -1177,6 +1177,9 @@
1177
1177
  .pb-\[8px\] {
1178
1178
  padding-bottom: 8px;
1179
1179
  }
1180
+ .pb-\[9px\] {
1181
+ padding-bottom: 9px;
1182
+ }
1180
1183
  .pb-\[10px\] {
1181
1184
  padding-bottom: 10px;
1182
1185
  }
@@ -1606,11 +1609,6 @@
1606
1609
  }
1607
1610
  }
1608
1611
  }
1609
- .max-\[399px\]\:left-\[53\%\] {
1610
- @media (width < 399px) {
1611
- left: 53%;
1612
- }
1613
- }
1614
1612
  .min-\[420\]\:text-\[12px\] {
1615
1613
  @media (width >= 420) {
1616
1614
  font-size: 12px;
package/dist/ui/DurationBlock.js CHANGED
@@ -7,7 +7,7 @@ const DurationBlock = ({ serviceItem, translation, renderIcon, isSoldOut, colors
7
7
  DateService.formatDuration(serviceItem.duration),
8
8
  " ",
9
9
  translation.hours),
10
- React.createElement("div", { className: "hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[188px] text-center break-normal shadow-service text-[12px]", style: { backgroundColor: colors.bottomStripColor } },
10
+ React.createElement("div", { className: "hidden group-hover:block absolute top-[29px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[188px] text-center break-normal shadow-service text-[12px]", style: { backgroundColor: colors.bottomStripColor } },
11
11
  React.createElement("div", { className: "tooltip-arrow absolute -top-[7px] left-1/2 -translate-x-1/2 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent", style: { borderBottomColor: colors.bottomStripColor } }),
12
12
  "Duraci\u00F3n estimada del viaje"))));
13
13
  export default DurationBlock;
package/dist/ui/OfferBanner.js CHANGED
@@ -84,7 +84,7 @@ const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, showLo
84
84
  }
85
85
  return null;
86
86
  };
87
- return (React.createElement("div", { className: `text-white w-full absolute ${coachKey ? "-bottom-[32px]" : isExpand ? "-bottom-[32px]" : "-bottom-[40px]"} rounded-b-[14px] text-[14px] h-[58px] flex items-end pb-[7px]`, style: {
87
+ return (React.createElement("div", { className: `text-white w-full absolute ${coachKey ? "-bottom-[40px]" : isExpand ? "-bottom-[40px]" : "-bottom-[40px]"} rounded-b-[14px] text-[14px] h-[58px] flex items-end pb-[9px]`, style: {
88
88
  background: (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
89
89
  ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
90
90
  ? offerGradient
package/dist/ui/SeatSection/SeatSection.js CHANGED
@@ -258,7 +258,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
258
258
  React.createElement("div", { className: "col-start-1 row-start-2 flex items-center" },
259
259
  React.createElement("span", { className: "text-[13.33px] font-normal leading-[22px] text-[#ccc]" }, "Antes")),
260
260
  React.createElement("div", { className: "col-start-1 row-start-3 flex h-[20px] items-end" },
261
- React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#464647]" }, "Desde")),
261
+ React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#464647] whitespace-nowrap" }, "Desde")),
262
262
  React.createElement("div", { className: "col-start-2 row-start-1 flex items-center justify-center absolute", style: { top: "-22px", left: "50%", transform: "translateX(-50%)" } }, !isNaN(Number(dpDiscountPercent)) &&
263
263
  Number(dpDiscountPercent) > 0 && (React.createElement("span", { className: `rounded-[100px] px-[6px] text-[12px] bold-text leading-[20px] text-white`, style: {
264
264
  animation: "pulse-zoom 2s ease-in-out infinite",
@@ -329,7 +329,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
329
329
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 ? null : (React.createElement("div", { className: "col-start-1 row-start-2 flex items-center" },
330
330
  React.createElement("span", { className: "text-[13.33px] font-normal leading-[22px] text-[#ccc]" }, "Antes"))),
331
331
  React.createElement("div", { className: "col-start-1 row-start-3 flex h-[20px] items-end" },
332
- React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#464647]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 ? discountSeat.label : "Desde")),
332
+ React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#464647] whitespace-nowrap" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 ? discountSeat.label : "Desde")),
333
333
  React.createElement("div", { className: "col-start-2 row-start-1 flex items-center justify-center absolute", style: { top: "-22px", left: "50%", transform: "translateX(-50%)" } },
334
334
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 &&
335
335
  !isPeru &&
@@ -375,7 +375,11 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
375
375
  fontSize: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 ? "13.33px" : "22px",
376
376
  } },
377
377
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 && (React.createElement("div", { className: "absolute", style: {
378
- left: isPeru ? "-16px" : "-18px",
378
+ left: isPeru
379
+ ? CommonService.discountedCurrency(discountSeat.discountedPrice, currencySign).replace(/\D/g, "").length >= 4
380
+ ? "-16px"
381
+ : "-3px"
382
+ : "-18px",
379
383
  bottom: "1px",
380
384
  } }, renderIcon("fireIcon", "16px"))),
381
385
  availableSeats <= 0
package/dist/ui/ServiceBadges/ServiceBadges.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import CommonService from "../../utils/CommonService";
3
3
  const ServiceBadges = ({ showTopLabel, isSoldOut, colors, renderIcon, translation, serviceItem, isAllinBus = false, boardingName, getAnimationIcon, }) => {
4
- return (React.createElement("div", { className: "absolute -top-[10px] left-0 w-full flex items-center justify-end gap-[12px] pr-[22px] z-10" },
4
+ return (React.createElement("div", { className: "absolute -top-[13px] left-0 w-full flex items-center justify-end gap-[12px] pr-[22px] z-10" },
5
5
  showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-10`, style: {
6
6
  backgroundColor: colors.topLabelBgColor || "#fff",
7
7
  border: isSoldOut
package/dist/ui/mobileweb/DateTimeSectionMobile.js CHANGED
@@ -23,19 +23,20 @@ const getCleanedDepTime = (raw) => {
23
23
  };
24
24
  const TimeRow = ({ label, icon, alt, date, timeContent, isSoldOut, }) => {
25
25
  const formattedDate = DateService.getServiceItemDate(date);
26
- const dotPositionClass = formattedDate.includes("dom")
27
- ? "max-[399px]:left-[53%]"
28
- : "";
29
- return (React.createElement("div", { className: `flex items-center min-[420]:text-[13px] text-[12px] justify-between ${isSoldOut ? "text-[#c0c0c0]" : ""}` },
26
+ return (React.createElement("div", { className: `flex items-center min-[420]:text-[13px] text-[12px] justify-between ${isSoldOut ? "text-[#c0c0c0]" : ""}`,
27
+ // Scale down on narrow phones (<~380px) so date + time fit beside the
28
+ // fares; 20px line height matches the Antes/Desde rows so they line up
29
+ style: { fontSize: "min(13px, 3.4vw)", lineHeight: "20px" } },
30
30
  React.createElement("div", { className: "flex items-center", style: { flex: 1 } },
31
31
  React.createElement("div", null,
32
32
  " ",
33
33
  label ? (React.createElement("div", { className: "w-[60px]" }, label)) : (React.createElement("div", { className: "w-[12px] h-auto mr-[5px]" },
34
34
  React.createElement("img", { src: icon, alt: alt, className: `w-[12px] h-auto mr-[5px] ${isSoldOut ? "grayscale" : ""}` })))),
35
- React.createElement("div", { className: "flex items-center relative capitalize justify-between", style: { flex: 1 } },
35
+ React.createElement("div", { className: "flex items-center relative capitalize justify-between", style: { flex: 1, gap: "6px" } },
36
36
  React.createElement("span", { className: "cursor-pointer black-text whitespace-nowrap" }, formattedDate),
37
- React.createElement("div", { className: `absolute left-[50%] ${dotPositionClass}` }, "\u2022"),
38
- React.createElement("div", { className: "font-[900] relative black-text whitespace-nowrap" }, timeContent)))));
37
+ React.createElement("div", { className: "flex items-center whitespace-nowrap", style: { gap: "6px", minWidth: "5.6em" } },
38
+ React.createElement("div", null, "\u2022"),
39
+ React.createElement("div", { className: "font-[900] relative black-text", style: { fontVariantNumeric: "tabular-nums" } }, timeContent))))));
39
40
  };
40
41
  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
42
  const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
@@ -49,7 +50,9 @@ function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal
49
50
  ? null
50
51
  : DateService.ampmOnly(depTime)))) : (DateService.formatTime(depTime));
51
52
  return (React.createElement("div", { className: "flex justify-between gap-[5px] w-full", onClick: onBookButtonPress },
52
- React.createElement("div", { className: `flex flex-col gap-[4px] w-[50%] ${isTrain ? "justify-center" : "justify-between"}`, style: {
53
+ React.createElement("div", { className: `flex flex-col gap-[4px] ${isTrain ? "justify-center" : "justify-between"}`, style: {
54
+ flex: 1,
55
+ minWidth: 0,
53
56
  justifyContent: isCiva && "center",
54
57
  minHeight: isTrain ? undefined : "2.5rem",
55
58
  alignSelf: isTrain ? "stretch" : undefined,
@@ -60,7 +63,8 @@ function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal
60
63
  width: "1px",
61
64
  height: "2.5rem",
62
65
  backgroundColor: "#ccc",
63
- margin: "auto",
66
+ margin: "auto 6px",
67
+ flexShrink: 0,
64
68
  } }),
65
69
  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
70
  }
package/dist/ui/mobileweb/SeatSectionMobile.js CHANGED
@@ -221,9 +221,18 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
221
221
  originalDpPrice != null &&
222
222
  dpDiscountPercent != null &&
223
223
  firstSeatFare != null;
224
- return (React.createElement("div", { className: "content-center relative", style: { width: "40%" } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
224
+ return (React.createElement("div", { className: "content-center relative", style: { width: "40%", flexShrink: 0 } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
225
225
  !((_j = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discounted_seats) === null || _j === void 0 ? void 0 : _j.length) &&
226
- !dpDiscountPercent ? (React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem]", style: { gap: isSoldOut ? "0px" : "5px" } }, renderDpSeats())) : hasDpDiscount ? (React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] " },
226
+ !dpDiscountPercent ? (React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem]", style: { gap: isSoldOut ? "0px" : "5px" } }, renderDpSeats())) : hasDpDiscount ? (
227
+ // Antes/Desde rows spread top/bottom so they line up with the
228
+ // departure/arrival rows beside them
229
+ React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] ", style: {
230
+ height: "100%",
231
+ alignContent: !isNaN(Number(dpDiscountPercent)) &&
232
+ Number(dpDiscountPercent) > 0
233
+ ? "space-between"
234
+ : "center",
235
+ } },
227
236
  !isNaN(Number(dpDiscountPercent)) &&
228
237
  Number(dpDiscountPercent) > 0 && (React.createElement("div", { className: "absolute -top-[18px] right-[0px]", style: {
229
238
  animation: "pulse-zoom 2s ease-in-out infinite",
@@ -250,16 +259,21 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
250
259
  transform: "rotate(-12deg)",
251
260
  transformOrigin: "center",
252
261
  } })),
253
- React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[24px]", style: { color: isSoldOut ? "#bbb" : "#464647" } }, "Desde"),
254
- React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: {
262
+ React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[20px]", style: { color: isSoldOut ? "#bbb" : "#464647" } }, "Desde"),
263
+ React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[20px]", style: {
255
264
  color: isSoldOut ? "#bbb" : discountSeatPriceColor || "#ff5964",
256
265
  } },
257
266
  ((_k = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _k === void 0 ? void 0 : _k.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { filter: isSoldOut ? "grayscale" : "" } })) : null,
258
267
  commonService.discountedCurrency(Number(firstSeatFare), currencySign)),
259
268
  isSoldOut ? (React.createElement("span", { className: "col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]" }, "Agotado")) : null)) : // Peru Tier B (ui_type 1) falls through to the regular layout — same
260
269
  // colours and "Desde" as a service with no discount, original fare.
261
- hasDiscount && discountSeat && !(isPeru && isOfferTextOnlyTier) ? (React.createElement("div", null,
262
- React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] " },
270
+ hasDiscount && discountSeat && !(isPeru && isOfferTextOnlyTier) ? (React.createElement("div", { style: { height: "100%" } },
271
+ React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] ", style: {
272
+ height: "100%",
273
+ alignContent: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 && discountBadgeText
274
+ ? "space-between"
275
+ : "center",
276
+ } },
263
277
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 && discountBadgeText && (React.createElement(React.Fragment, null,
264
278
  React.createElement("div", { className: "absolute -top-[18px] right-[0px]", style: {
265
279
  animation: "pulse-zoom 2s ease-in-out infinite",
@@ -286,10 +300,10 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
286
300
  transform: "rotate(-12deg)",
287
301
  transformOrigin: "center",
288
302
  } })))),
289
- React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[24px]", style: { color: isSoldOut ? "#bbb" : "#464647" } }, isOfferTextOnlyTier
303
+ React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[20px]", style: { color: isSoldOut ? "#bbb" : "#464647" } }, isOfferTextOnlyTier
290
304
  ? commonService.capitalize(commonService.truncateSeatLabel(discountSeat.label))
291
305
  : "Desde"),
292
- React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: {
306
+ React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[20px]", style: {
293
307
  color: isSoldOut
294
308
  ? "#bbb"
295
309
  : (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "10.4.48",
3
+ "version": "10.4.50",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/PaymentSideBar/PaymentSideBarDesktop.tsx CHANGED
@@ -778,7 +778,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
778
778
  />
779
779
  )}
780
780
 
781
- <div style={{ margin: "6px 0" }}>
781
+ <div style={{ margin: "6px 0 0" }}>
782
782
  {renderDiscount(discountAmount)}
783
783
  </div>
784
784
 
@@ -901,7 +901,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
901
901
  ) : null}
902
902
  </div>
903
903
  <div
904
- className={` text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[35px] pt-[50px] -z-10 rounded-b-[14px] text-[14px]`}
904
+ className={` text-white p-[7px_15px] text-left w-full flex items-center absolute -bottom-[35px] pt-[50px] -z-10 rounded-b-[14px] text-[14px]`}
905
905
  style={{ backgroundColor: colors?.bottomStripColor }}
906
906
  >
907
907
  <div className="flex justify-between items-center w-full">
package/src/ui/DurationBlock.tsx CHANGED
@@ -21,7 +21,7 @@ const DurationBlock = ({
21
21
  {DateService.formatDuration(serviceItem.duration)} {translation.hours}
22
22
  </span>
23
23
  <div
24
- className="hidden group-hover:block absolute top-[24px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[188px] text-center break-normal shadow-service text-[12px]"
24
+ className="hidden group-hover:block absolute top-[29px] left-1/2 -translate-x-1/2 text-white p-3 rounded-[14px] whitespace-normal z-10 mt-2.5 w-[188px] text-center break-normal shadow-service text-[12px]"
25
25
  style={{ backgroundColor: colors.bottomStripColor }}
26
26
  >
27
27
  {/* Tooltip arrow */}
package/src/ui/OfferBanner.tsx CHANGED
@@ -288,7 +288,7 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
288
288
 
289
289
  return (
290
290
  <div
291
- className={`text-white w-full absolute ${coachKey ? "-bottom-[32px]" : isExpand ? "-bottom-[32px]" : "-bottom-[40px]"} rounded-b-[14px] text-[14px] h-[58px] flex items-end pb-[7px]`}
291
+ className={`text-white w-full absolute ${coachKey ? "-bottom-[40px]" : isExpand ? "-bottom-[40px]" : "-bottom-[40px]"} rounded-b-[14px] text-[14px] h-[58px] flex items-end pb-[9px]`}
292
292
  style={{
293
293
  background:
294
294
  (isNewUiEnabled && serviceItem?.ui_type === 2) ||
package/src/ui/SeatSection/SeatSection.tsx CHANGED
@@ -486,7 +486,7 @@ function SeatSection({
486
486
  </div>
487
487
 
488
488
  <div className="col-start-1 row-start-3 flex h-[20px] items-end">
489
- <span className="text-[13.33px] font-normal leading-[20px] text-[#464647]">
489
+ <span className="text-[13.33px] font-normal leading-[20px] text-[#464647] whitespace-nowrap">
490
490
  Desde
491
491
  </span>
492
492
  </div>
@@ -645,7 +645,7 @@ function SeatSection({
645
645
  )}
646
646
 
647
647
  <div className="col-start-1 row-start-3 flex h-[20px] items-end">
648
- <span className="text-[13.33px] font-normal leading-[20px] text-[#464647]">
648
+ <span className="text-[13.33px] font-normal leading-[20px] text-[#464647] whitespace-nowrap">
649
649
  {serviceItem?.ui_type === 1 ? discountSeat.label : "Desde"}
650
650
  </span>
651
651
  </div>
@@ -737,7 +737,14 @@ function SeatSection({
737
737
  <div
738
738
  className="absolute"
739
739
  style={{
740
- left: isPeru ? "-16px" : "-18px",
740
+ left: isPeru
741
+ ? CommonService.discountedCurrency(
742
+ discountSeat.discountedPrice,
743
+ currencySign,
744
+ ).replace(/\D/g, "").length >= 4
745
+ ? "-16px"
746
+ : "-3px"
747
+ : "-18px",
741
748
  bottom: "1px",
742
749
  }}
743
750
  >
package/src/ui/ServiceBadges/ServiceBadges.tsx CHANGED
@@ -32,7 +32,7 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
32
32
  getAnimationIcon,
33
33
  }) => {
34
34
  return (
35
- <div className="absolute -top-[10px] left-0 w-full flex items-center justify-end gap-[12px] pr-[22px] z-10">
35
+ <div className="absolute -top-[13px] left-0 w-full flex items-center justify-end gap-[12px] pr-[22px] z-10">
36
36
  {showTopLabel && (
37
37
  <div
38
38
  className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-10`}
package/src/ui/mobileweb/DateTimeSectionMobile.tsx CHANGED
@@ -69,14 +69,14 @@ const TimeRow: React.FC<TimeRowProps> = ({
69
69
  isSoldOut,
70
70
  }) => {
71
71
  const formattedDate = DateService.getServiceItemDate(date);
72
- const dotPositionClass = formattedDate.includes("dom")
73
- ? "max-[399px]:left-[53%]"
74
- : "";
75
72
  return (
76
73
  <div
77
74
  className={`flex items-center min-[420]:text-[13px] text-[12px] justify-between ${
78
75
  isSoldOut ? "text-[#c0c0c0]" : ""
79
76
  }`}
77
+ // Scale down on narrow phones (<~380px) so date + time fit beside the
78
+ // fares; 20px line height matches the Antes/Desde rows so they line up
79
+ style={{ fontSize: "min(13px, 3.4vw)", lineHeight: "20px" }}
80
80
  >
81
81
  <div className="flex items-center" style={{ flex: 1 }}>
82
82
  <div>
@@ -97,14 +97,24 @@ const TimeRow: React.FC<TimeRowProps> = ({
97
97
  </div>
98
98
  <div
99
99
  className="flex items-center relative capitalize justify-between"
100
- style={{ flex: 1 }}
100
+ style={{ flex: 1, gap: "6px" }}
101
101
  >
102
102
  <span className="cursor-pointer black-text whitespace-nowrap">
103
103
  {formattedDate}
104
104
  </span>
105
- <div className={`absolute left-[50%] ${dotPositionClass}`}>•</div>
106
- <div className="font-[900] relative black-text whitespace-nowrap">
107
- {timeContent}
105
+ {/* Dot + time in a fixed-width, left-aligned box so both rows'
106
+ times line up regardless of date/time text width */}
107
+ <div
108
+ className="flex items-center whitespace-nowrap"
109
+ style={{ gap: "6px", minWidth: "5.6em" }}
110
+ >
111
+ <div>•</div>
112
+ <div
113
+ className="font-[900] relative black-text"
114
+ style={{ fontVariantNumeric: "tabular-nums" }}
115
+ >
116
+ {timeContent}
117
+ </div>
108
118
  </div>
109
119
  </div>
110
120
  </div>
@@ -161,10 +171,13 @@ function DateTimeSectionMobile({
161
171
  className="flex justify-between gap-[5px] w-full"
162
172
  onClick={onBookButtonPress}
163
173
  >
164
- {/* DATE AND TIME */}
174
+ {/* DATE AND TIME — takes whatever the seat column (40%) leaves, so
175
+ long date/time strings don't spill over the divider */}
165
176
  <div
166
- className={`flex flex-col gap-[4px] w-[50%] ${isTrain ? "justify-center" : "justify-between"}`}
177
+ className={`flex flex-col gap-[4px] ${isTrain ? "justify-center" : "justify-between"}`}
167
178
  style={{
179
+ flex: 1,
180
+ minWidth: 0,
168
181
  justifyContent: isCiva && "center",
169
182
  minHeight: isTrain ? undefined : "2.5rem",
170
183
  alignSelf: isTrain ? "stretch" : undefined,
@@ -195,7 +208,8 @@ function DateTimeSectionMobile({
195
208
  width: "1px",
196
209
  height: "2.5rem",
197
210
  backgroundColor: "#ccc",
198
- margin: "auto",
211
+ margin: "auto 6px",
212
+ flexShrink: 0,
199
213
  }}
200
214
  ></div>
201
215
 
package/src/ui/mobileweb/SeatSectionMobile.tsx CHANGED
@@ -521,7 +521,10 @@ function SeatSectionMobile({
521
521
  firstSeatFare != null;
522
522
 
523
523
  return (
524
- <div className="content-center relative" style={{ width: "40%" }}>
524
+ <div
525
+ className="content-center relative"
526
+ style={{ width: "40%", flexShrink: 0 }}
527
+ >
525
528
  {serviceItem?.is_dp_enabled &&
526
529
  !serviceItem?.dp_discounted_seats?.length &&
527
530
  !dpDiscountPercent ? (
@@ -532,7 +535,19 @@ function SeatSectionMobile({
532
535
  {renderDpSeats()}
533
536
  </div>
534
537
  ) : hasDpDiscount ? (
535
- <div className="relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] ">
538
+ // Antes/Desde rows spread top/bottom so they line up with the
539
+ // departure/arrival rows beside them
540
+ <div
541
+ className="relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] "
542
+ style={{
543
+ height: "100%",
544
+ alignContent:
545
+ !isNaN(Number(dpDiscountPercent)) &&
546
+ Number(dpDiscountPercent) > 0
547
+ ? "space-between"
548
+ : "center",
549
+ }}
550
+ >
536
551
  {!isNaN(Number(dpDiscountPercent)) &&
537
552
  Number(dpDiscountPercent) > 0 && (
538
553
  <div
@@ -579,13 +594,13 @@ function SeatSectionMobile({
579
594
  </span>
580
595
 
581
596
  <span
582
- className="min-[420]:text-[13px] text-[12px] leading-[24px]"
597
+ className="min-[420]:text-[13px] text-[12px] leading-[20px]"
583
598
  style={{ color: isSoldOut ? "#bbb" : "#464647" }}
584
599
  >
585
600
  Desde
586
601
  </span>
587
602
  <span
588
- className="flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]"
603
+ className="flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[20px]"
589
604
  style={{
590
605
  color: isSoldOut ? "#bbb" : discountSeatPriceColor || "#ff5964",
591
606
  }}
@@ -613,8 +628,19 @@ function SeatSectionMobile({
613
628
  ) : // Peru Tier B (ui_type 1) falls through to the regular layout — same
614
629
  // colours and "Desde" as a service with no discount, original fare.
615
630
  hasDiscount && discountSeat && !(isPeru && isOfferTextOnlyTier) ? (
616
- <div>
617
- <div className="relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] ">
631
+ <div style={{ height: "100%" }}>
632
+ {/* Antes/Desde rows spread top/bottom so they line up with the
633
+ departure/arrival rows beside them */}
634
+ <div
635
+ className="relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] "
636
+ style={{
637
+ height: "100%",
638
+ alignContent:
639
+ serviceItem?.ui_type !== 1 && discountBadgeText
640
+ ? "space-between"
641
+ : "center",
642
+ }}
643
+ >
618
644
  {serviceItem?.ui_type !== 1 && discountBadgeText && (
619
645
  <>
620
646
  <div
@@ -667,7 +693,7 @@ function SeatSectionMobile({
667
693
  )}
668
694
 
669
695
  <span
670
- className="min-[420]:text-[13px] text-[12px] leading-[24px]"
696
+ className="min-[420]:text-[13px] text-[12px] leading-[20px]"
671
697
  style={{ color: isSoldOut ? "#bbb" : "#464647" }}
672
698
  >
673
699
  {isOfferTextOnlyTier
@@ -677,7 +703,7 @@ function SeatSectionMobile({
677
703
  : "Desde"}
678
704
  </span>
679
705
  <span
680
- className="flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]"
706
+ className="flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[20px]"
681
707
  style={{
682
708
  color: isSoldOut
683
709
  ? "#bbb"