kupos-ui-components-lib 10.4.47 → 10.4.49

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 (12) hide show
  1. package/dist/components/PaymentSideBar/PaymentSideBarDesktop.js +2 -2
  2. package/dist/components/ServiceItem/PeruServiceItemMobile.js +1 -1
  3. package/dist/styles.css +6 -3
  4. package/dist/ui/OfferBanner.js +1 -1
  5. package/dist/ui/SeatSection/SeatSection.js +9 -5
  6. package/dist/ui/ServiceBadges/ServiceBadges.js +1 -1
  7. package/package.json +1 -1
  8. package/src/components/PaymentSideBar/PaymentSideBarDesktop.tsx +2 -2
  9. package/src/components/ServiceItem/PeruServiceItemMobile.tsx +1 -0
  10. package/src/ui/OfferBanner.tsx +1 -1
  11. package/src/ui/SeatSection/SeatSection.tsx +12 -5
  12. package/src/ui/ServiceBadges/ServiceBadges.tsx +1 -1
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/components/ServiceItem/PeruServiceItemMobile.js CHANGED
@@ -148,7 +148,7 @@ function PeruServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStag
148
148
  color: isSoldOut ? "#bbb" : "text-[#464647]",
149
149
  } },
150
150
  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)),
151
- 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 }),
151
+ 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, discountSeatCrossPriceColor: colors.discountSeatCrossPriceColor, isTrain: isTrain }),
152
152
  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)),
153
153
  showLastSeats ? (React.createElement("div", { className: "flex justify-end " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
154
154
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[10px] text-center", 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
  }
@@ -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
  }
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-[32px]" : isExpand ? "-bottom-[32px]" : "-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 &&
@@ -342,10 +342,10 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
342
342
  : `${discountValue}% OFF`)),
343
343
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 &&
344
344
  isPeru &&
345
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_display_badge) && (React.createElement("span", { className: "rounded-[100px] bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white", style: {
345
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_display_badge) && (React.createElement("span", { className: "rounded-[100px] px-[6px] text-[12px] bold-text leading-[20px] text-white", style: {
346
346
  animation: "pulse-zoom 2s ease-in-out infinite",
347
347
  whiteSpace: "nowrap",
348
- backgroundColor: discountSeatCrossPriceColor,
348
+ backgroundColor: discountSeatCrossPriceColor || "#ff5964",
349
349
  } }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_display_badge))),
350
350
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 ? null : (React.createElement("div", { className: "col-start-2 row-start-2 flex items-center justify-center ", style: { textAlign: "center" } },
351
351
  React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] relative whitespace-nowrap", style: {
@@ -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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "10.4.47",
3
+ "version": "10.4.49",
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/components/ServiceItem/PeruServiceItemMobile.tsx CHANGED
@@ -331,6 +331,7 @@ function PeruServiceItemMobile({
331
331
  serviceItem={serviceItem}
332
332
  showLastSeats={showLastSeats}
333
333
  discountSeatPriceColor={colors.discountSeatPriceColor}
334
+ discountSeatCrossPriceColor={colors.discountSeatCrossPriceColor}
334
335
  isTrain={isTrain}
335
336
  />
336
337
 
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-[32px]" : isExpand ? "-bottom-[32px]" : "-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>
@@ -675,11 +675,11 @@ function SeatSection({
675
675
  isPeru &&
676
676
  serviceItem?.discount_display_badge && (
677
677
  <span
678
- className="rounded-[100px] bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white"
678
+ className="rounded-[100px] px-[6px] text-[12px] bold-text leading-[20px] text-white"
679
679
  style={{
680
680
  animation: "pulse-zoom 2s ease-in-out infinite",
681
681
  whiteSpace: "nowrap",
682
- backgroundColor: discountSeatCrossPriceColor,
682
+ backgroundColor: discountSeatCrossPriceColor || "#ff5964",
683
683
  }}
684
684
  >
685
685
  {serviceItem?.discount_display_badge}
@@ -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`}