kupos-ui-components-lib 10.4.48 → 10.4.49

package/dist/components/PaymentSideBar/PaymentSideBarDesktop.js

@@ -436,7 +436,7 @@ const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData,
                             React.createElement("div", { className: "duration-mouseover font9", style: { lineHeight: "1.3" } },
                                 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,
                 removeDiscountAtomValue && (React.createElement(PaymentItem, { label: "Cup\u00F3n", amount: CommonService.currency(netFare, currencySign), isNegative: true, currency: "", isBoldText: true })),
-                React.createElement("div", { style: { margin: "6px 0" } }, renderDiscount(discountAmount)),
+                React.createElement("div", { style: { margin: "6px 0 0" } }, renderDiscount(discountAmount)),
                 (promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCodeApplied) && (React.createElement(React.Fragment, null,
                     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)
                             ? promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount
@@ -461,7 +461,7 @@ const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData,
                         : CommonService.currency(walletMoney, currencySign), currency: "", isBoldText: true })) : null,
                 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,
                 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),
-            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 } },
+            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 } },
                 React.createElement("div", { className: "flex justify-between items-center w-full" },
                     React.createElement("div", { className: "black-text" }, "Total"),
                     React.createElement("div", { className: "bold-text ", style: {

package/dist/styles.css

@@ -27,9 +27,6 @@
 .-top-\[8px\] {
   top: calc(8px * -1);
 }
-.-top-\[10px\] {
-  top: calc(10px * -1);
-}
 .-top-\[11px\] {
   top: calc(11px * -1);
 }
@@ -1033,6 +1030,9 @@
 .p-\[6px_20px\] {
   padding: 6px 20px;
 }
+.p-\[7px_15px\] {
+  padding: 7px 15px;
+}
 .p-\[8px_4px_4px\] {
   padding: 8px 4px 4px;
 }
@@ -1177,6 +1177,9 @@
 .pb-\[8px\] {
   padding-bottom: 8px;
 }
+.pb-\[9px\] {
+  padding-bottom: 9px;
+}
 .pb-\[10px\] {
   padding-bottom: 10px;
 }

package/dist/ui/OfferBanner.js

@@ -84,7 +84,7 @@ const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, showLo
         }
         return null;
     };
-    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: {
+    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: {
             background: (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
                 ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
                 ? offerGradient

package/dist/ui/SeatSection/SeatSection.js

@@ -258,7 +258,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
             React.createElement("div", { className: "col-start-1 row-start-2 flex items-center" },
                 React.createElement("span", { className: "text-[13.33px] font-normal leading-[22px] text-[#ccc]" }, "Antes")),
             React.createElement("div", { className: "col-start-1 row-start-3 flex h-[20px] items-end" },
-                React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#464647]" }, "Desde")),
+                React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#464647] whitespace-nowrap" }, "Desde")),
             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)) &&
                 Number(dpDiscountPercent) > 0 && (React.createElement("span", { className: `rounded-[100px] px-[6px] text-[12px] bold-text leading-[20px] text-white`, style: {
                     animation: "pulse-zoom 2s ease-in-out infinite",
@@ -329,7 +329,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
             (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" },
                 React.createElement("span", { className: "text-[13.33px] font-normal leading-[22px] text-[#ccc]" }, "Antes"))),
             React.createElement("div", { className: "col-start-1 row-start-3 flex h-[20px] items-end" },
-                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")),
+                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")),
             React.createElement("div", { className: "col-start-2 row-start-1 flex items-center justify-center absolute", style: { top: "-22px", left: "50%", transform: "translateX(-50%)" } },
                 (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 &&
                     !isPeru &&
@@ -375,7 +375,11 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
                         fontSize: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 ? "13.33px" : "22px",
                     } },
                     (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 && (React.createElement("div", { className: "absolute", style: {
-                            left: isPeru ? "-16px" : "-18px",
+                            left: isPeru
+                                ? CommonService.discountedCurrency(discountSeat.discountedPrice, currencySign).replace(/\D/g, "").length >= 4
+                                    ? "-16px"
+                                    : "-3px"
+                                : "-18px",
                             bottom: "1px",
                         } }, renderIcon("fireIcon", "16px"))),
                     availableSeats <= 0

package/dist/ui/ServiceBadges/ServiceBadges.js

@@ -1,7 +1,7 @@
 import React from "react";
 import CommonService from "../../utils/CommonService";
 const ServiceBadges = ({ showTopLabel, isSoldOut, colors, renderIcon, translation, serviceItem, isAllinBus = false, boardingName, getAnimationIcon, }) => {
-    return (React.createElement("div", { className: "absolute -top-[10px] left-0 w-full flex items-center justify-end gap-[12px] pr-[22px] z-10" },
+    return (React.createElement("div", { className: "absolute -top-[13px] left-0 w-full flex items-center justify-end gap-[12px] pr-[22px] z-10" },
         showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-10`, style: {
                 backgroundColor: colors.topLabelBgColor || "#fff",
                 border: isSoldOut

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kupos-ui-components-lib",
-  "version": "10.4.48",
+  "version": "10.4.49",
   "description": "A reusable UI components package",
   "publishConfig": {
     "access": "public"

package/src/components/PaymentSideBar/PaymentSideBarDesktop.tsx

@@ -778,7 +778,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
             />
           )}
 
-          <div style={{ margin: "6px 0" }}>
+          <div style={{ margin: "6px 0 0" }}>
             {renderDiscount(discountAmount)}
           </div>
 
@@ -901,7 +901,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
           ) : null}
         </div>
         <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]`}
+          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?.bottomStripColor }}
         >
           <div className="flex justify-between items-center w-full">

package/src/ui/OfferBanner.tsx

@@ -288,7 +288,7 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
 
   return (
     <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]`}
+      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={{
         background:
           (isNewUiEnabled && serviceItem?.ui_type === 2) ||

package/src/ui/SeatSection/SeatSection.tsx

@@ -486,7 +486,7 @@ function SeatSection({
         </div>
 
         <div className="col-start-1 row-start-3 flex h-[20px] items-end">
-          <span className="text-[13.33px] font-normal leading-[20px] text-[#464647]">
+          <span className="text-[13.33px] font-normal leading-[20px] text-[#464647] whitespace-nowrap">
             Desde
           </span>
         </div>
@@ -645,7 +645,7 @@ function SeatSection({
         )}
 
         <div className="col-start-1 row-start-3 flex h-[20px] items-end">
-          <span className="text-[13.33px] font-normal leading-[20px] text-[#464647]">
+          <span className="text-[13.33px] font-normal leading-[20px] text-[#464647] whitespace-nowrap">
             {serviceItem?.ui_type === 1 ? discountSeat.label : "Desde"}
           </span>
         </div>
@@ -737,7 +737,14 @@ function SeatSection({
               <div
                 className="absolute"
                 style={{
-                  left: isPeru ? "-16px" : "-18px",
+                  left: isPeru
+                    ? CommonService.discountedCurrency(
+                        discountSeat.discountedPrice,
+                        currencySign,
+                      ).replace(/\D/g, "").length >= 4
+                      ? "-16px"
+                      : "-3px"
+                    : "-18px",
                   bottom: "1px",
                 }}
               >

package/src/ui/ServiceBadges/ServiceBadges.tsx

@@ -32,7 +32,7 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
   getAnimationIcon,
 }) => {
   return (
-    <div className="absolute -top-[10px] left-0 w-full flex items-center justify-end gap-[12px] pr-[22px] z-10">
+    <div className="absolute -top-[13px] left-0 w-full flex items-center justify-end gap-[12px] pr-[22px] z-10">
       {showTopLabel && (
         <div
           className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-10`}