kupos-ui-components-lib 10.4.51 → 10.4.53

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 (13) hide show
  1. package/dist/components/PaymentSideBar/PaymentSideBarDesktop.js +2 -3
  2. package/dist/components/ServiceItem/ServiceItemDesktop.js +1 -1
  3. package/dist/styles.css +3 -3
  4. package/dist/ui/OfferBanner.js +4 -1
  5. package/dist/ui/SeatSection/SeatSection.js +4 -11
  6. package/dist/utils/CommonService.d.ts +1 -0
  7. package/dist/utils/CommonService.js +8 -0
  8. package/package.json +1 -1
  9. package/src/components/PaymentSideBar/PaymentSideBarDesktop.tsx +3 -3
  10. package/src/components/ServiceItem/ServiceItemDesktop.tsx +1 -1
  11. package/src/ui/OfferBanner.tsx +5 -1
  12. package/src/ui/SeatSection/SeatSection.tsx +4 -14
  13. package/src/utils/CommonService.ts +8 -0
package/dist/components/PaymentSideBar/PaymentSideBarDesktop.js CHANGED
@@ -470,12 +470,11 @@ const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData,
470
470
  justifyContent: "flex-end",
471
471
  } },
472
472
  currency ? currency : "",
473
- " ",
474
- CommonService.currency(isPeru
473
+ CommonService.currencyExact(isPeru
475
474
  ? Math.round((removeDiscountAtomValue ? 0 : netFare) * 100) /
476
475
  100
477
476
  : removeDiscountAtomValue
478
477
  ? 0
479
- : netFare, currencySign)))))));
478
+ : netFare)))))));
480
479
  };
481
480
  export default PaymentSideBarDesktop;
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -320,7 +320,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
320
320
  setIsFeatureDropDownExpand(isFeatureDropDownExpand === serviceItem.id ||
321
321
  isFeatureDropDownExpand === true
322
322
  ? null
323
- : serviceItem.id), selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle, wowDealData: wowDealData })) : (React.createElement("div", { className: `relative hover:z-[150] ${((isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 && hasOfferText) || (hasDpEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents)) || (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2)) && !isSoldOut ? "mb-[55px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
323
+ : serviceItem.id), selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle, wowDealData: wowDealData })) : (React.createElement("div", { className: `relative hover:z-[150] ${((isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 && hasOfferText) || (hasDpEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents)) || (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2)) && !isSoldOut ? "mb-[60px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
324
324
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
325
325
  showTopLabel
326
326
  ? "mt-[25px]"
package/dist/styles.css CHANGED
@@ -336,6 +336,9 @@
336
336
  .mb-\[55px\] {
337
337
  margin-bottom: 55px;
338
338
  }
339
+ .mb-\[60px\] {
340
+ margin-bottom: 60px;
341
+ }
339
342
  .mb-\[65px\] {
340
343
  margin-bottom: 65px;
341
344
  }
@@ -1177,9 +1180,6 @@
1177
1180
  .pb-\[8px\] {
1178
1181
  padding-bottom: 8px;
1179
1182
  }
1180
- .pb-\[9px\] {
1181
- padding-bottom: 9px;
1182
- }
1183
1183
  .pb-\[10px\] {
1184
1184
  padding-bottom: 10px;
1185
1185
  }
package/dist/ui/OfferBanner.js CHANGED
@@ -84,13 +84,16 @@ 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-[40px]" : isExpand ? "-bottom-[40px]" : "-bottom-[40px]"} rounded-b-[14px] text-[14px] h-[58px] flex items-end pb-[9px]`, 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 `, 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
91
91
  : background,
92
92
  opacity: isSoldOut ? 0.5 : 1,
93
93
  zIndex: isLinatal ? "-1" : "0",
94
+ paddingBottom: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 2
95
+ ? "12px"
96
+ : "9px",
94
97
  } },
95
98
  React.createElement("div", { className: "flex items-center w-full gap-[20px] px-[15px] justify-between" },
96
99
  React.createElement("div", { className: "flex items-center justify-start" }, renderLeftContent()),
package/dist/ui/SeatSection/SeatSection.js CHANGED
@@ -282,8 +282,8 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
282
282
  pointerEvents: "none",
283
283
  } }))),
284
284
  React.createElement("div", { className: "col-start-2 row-start-3 flex h-[30px] items-end justify-center relative" },
285
- React.createElement("span", { className: "flex items-center gap-[6px] text-[22px] bold-text leading-[30px]", style: { color: isSoldOut ? "#c0c0c0" : dpSeatColor || "#ff5964" } },
286
- React.createElement("div", { className: "absolute", style: { left: isPeru ? "-19px" : "-19px", bottom: "1px" } }, renderIcon("fireIcon", "16px")),
285
+ React.createElement("span", { className: "relative flex items-center gap-[6px] text-[22px] bold-text leading-[30px]", style: { color: isSoldOut ? "#c0c0c0" : dpSeatColor || "#ff5964" } },
286
+ React.createElement("div", { className: "absolute", style: { right: "100%", marginRight: "6px", bottom: "1px" } }, renderIcon("fireIcon", "16px")),
287
287
  availableSeats <= 0
288
288
  ? CommonService.currency(0, currencySign)
289
289
  : CommonService.discountedCurrency(Number(seatTypeFare), currencySign)))));
@@ -366,7 +366,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
366
366
  pointerEvents: "none",
367
367
  } })))),
368
368
  React.createElement("div", { className: "col-start-2 row-start-3 flex h-[30px] items-end justify-center relative" },
369
- React.createElement("span", { className: "flex items-center gap-[6px] bold-text leading-[30px]", style: {
369
+ React.createElement("span", { className: "relative flex items-center gap-[6px] bold-text leading-[30px]", style: {
370
370
  color: isSoldOut
371
371
  ? "#c0c0c0"
372
372
  : (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1
@@ -374,14 +374,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
374
374
  : discountSeatPriceColor,
375
375
  fontSize: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 ? "13.33px" : "22px",
376
376
  } },
377
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 && (React.createElement("div", { className: "absolute", style: {
378
- left: isPeru
379
- ? CommonService.discountedCurrency(discountSeat.discountedPrice, currencySign).replace(/\D/g, "").length >= 4
380
- ? "-16px"
381
- : "-3px"
382
- : "-18px",
383
- bottom: "1px",
384
- } }, renderIcon("fireIcon", "16px"))),
377
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 && (React.createElement("div", { className: "absolute", style: { right: "100%", marginRight: "6px", bottom: "1px" } }, renderIcon("fireIcon", "16px"))),
385
378
  availableSeats <= 0
386
379
  ? CommonService.currency(0, currencySign)
387
380
  : CommonService.discountedCurrency((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1
package/dist/utils/CommonService.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  declare const commonService: {
2
2
  currency(amount: number, currencySign?: string): string;
3
+ currencyExact: (amount: any) => string;
3
4
  currencyFixed(amount: number, currencySign?: string, decimals?: number): string;
4
5
  currencyRounded(amount: number, currencySign?: string): string;
5
6
  discountedCurrency(amount: number, currencySign?: string): string;
package/dist/utils/CommonService.js CHANGED
@@ -13,6 +13,14 @@ const commonService = {
13
13
  const sign = currencySign || "$";
14
14
  return sign + formattedAmount;
15
15
  },
16
+ currencyExact: (amount) => {
17
+ if (amount === null || amount === undefined || isNaN(amount))
18
+ return "S/0";
19
+ const rounded = Math.round(+amount * 100) / 100;
20
+ const parts = String(rounded).split(".");
21
+ parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ".");
22
+ return "S/" + parts.join(".");
23
+ },
16
24
  currencyFixed(amount, currencySign, decimals = 2) {
17
25
  const formattedAmount = fixFloatPrecision(amount, decimals)
18
26
  .toString()
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "10.4.51",
3
+ "version": "10.4.53",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/PaymentSideBar/PaymentSideBarDesktop.tsx CHANGED
@@ -914,15 +914,15 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
914
914
  justifyContent: "flex-end",
915
915
  }}
916
916
  >
917
- {currency ? currency : ""}{" "}
918
- {CommonService.currency(
917
+ {currency ? currency : ""}
918
+
919
+ {CommonService.currencyExact(
919
920
  isPeru
920
921
  ? Math.round((removeDiscountAtomValue ? 0 : netFare) * 100) /
921
922
  100
922
923
  : removeDiscountAtomValue
923
924
  ? 0
924
925
  : netFare,
925
- currencySign,
926
926
  )}
927
927
  </div>
928
928
  </div>
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -571,7 +571,7 @@ function ServiceItemPB({
571
571
  />
572
572
  ) : (
573
573
  <div
574
- className={`relative hover:z-[150] ${((isNewUiEnabled && serviceItem?.ui_type === 1 && hasOfferText) || (hasDpEnabled && serviceItem?.dp_discount_percents) || (isNewUiEnabled && serviceItem?.ui_type === 2)) && !isSoldOut ? "mb-[55px]" : "mb-[20px]"} ${
574
+ className={`relative hover:z-[150] ${((isNewUiEnabled && serviceItem?.ui_type === 1 && hasOfferText) || (hasDpEnabled && serviceItem?.dp_discount_percents) || (isNewUiEnabled && serviceItem?.ui_type === 2)) && !isSoldOut ? "mb-[60px]" : "mb-[20px]"} ${
575
575
  serviceItem?.is_direct_trip ||
576
576
  serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
577
577
  showTopLabel
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-[40px]" : isExpand ? "-bottom-[40px]" : "-bottom-[40px]"} rounded-b-[14px] text-[14px] h-[58px] flex items-end pb-[9px]`}
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 `}
292
292
  style={{
293
293
  background:
294
294
  (isNewUiEnabled && serviceItem?.ui_type === 2) ||
@@ -297,6 +297,10 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
297
297
  : background,
298
298
  opacity: isSoldOut ? 0.5 : 1,
299
299
  zIndex: isLinatal ? "-1" : "0",
300
+ paddingBottom:
301
+ serviceItem?.offer_text && serviceItem?.ui_type !== 2
302
+ ? "12px"
303
+ : "9px",
300
304
  }}
301
305
  >
302
306
  <div className="flex items-center w-full gap-[20px] px-[15px] justify-between">
package/src/ui/SeatSection/SeatSection.tsx CHANGED
@@ -538,12 +538,12 @@ function SeatSection({
538
538
 
539
539
  <div className="col-start-2 row-start-3 flex h-[30px] items-end justify-center relative">
540
540
  <span
541
- className="flex items-center gap-[6px] text-[22px] bold-text leading-[30px]"
541
+ className="relative flex items-center gap-[6px] text-[22px] bold-text leading-[30px]"
542
542
  style={{ color: isSoldOut ? "#c0c0c0" : dpSeatColor || "#ff5964" }}
543
543
  >
544
544
  <div
545
545
  className="absolute"
546
- style={{ left: isPeru ? "-19px" : "-19px", bottom: "1px" }}
546
+ style={{ right: "100%", marginRight: "6px", bottom: "1px" }}
547
547
  >
548
548
  {renderIcon("fireIcon", "16px")}
549
549
  </div>
@@ -721,7 +721,7 @@ function SeatSection({
721
721
 
722
722
  <div className="col-start-2 row-start-3 flex h-[30px] items-end justify-center relative">
723
723
  <span
724
- className="flex items-center gap-[6px] bold-text leading-[30px]"
724
+ className="relative flex items-center gap-[6px] bold-text leading-[30px]"
725
725
  style={{
726
726
  color: isSoldOut
727
727
  ? "#c0c0c0"
@@ -736,17 +736,7 @@ function SeatSection({
736
736
  {serviceItem?.ui_type !== 1 && (
737
737
  <div
738
738
  className="absolute"
739
- style={{
740
- left: isPeru
741
- ? CommonService.discountedCurrency(
742
- discountSeat.discountedPrice,
743
- currencySign,
744
- ).replace(/\D/g, "").length >= 4
745
- ? "-16px"
746
- : "-3px"
747
- : "-18px",
748
- bottom: "1px",
749
- }}
739
+ style={{ right: "100%", marginRight: "6px", bottom: "1px" }}
750
740
  >
751
741
  {renderIcon("fireIcon", "16px")}
752
742
  </div>
package/src/utils/CommonService.ts CHANGED
@@ -16,6 +16,14 @@ const commonService = {
16
16
  return sign + formattedAmount;
17
17
  },
18
18
 
19
+ currencyExact: (amount) => {
20
+ if (amount === null || amount === undefined || isNaN(amount)) return "S/0";
21
+ const rounded = Math.round(+amount * 100) / 100;
22
+ const parts = String(rounded).split(".");
23
+ parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ".");
24
+ return "S/" + parts.join(".");
25
+ },
26
+
19
27
  currencyFixed(amount: number, currencySign?: string, decimals: number = 2) {
20
28
  const formattedAmount = fixFloatPrecision(amount, decimals)
21
29
  .toString()