kupos-ui-components-lib 10.2.1 β 10.2.3
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.
- package/dist/components/PaymentSideBar/PaymentSideBarDesktop.js +6 -3
- package/dist/components/PaymentSideBar/PaymentSideBarMobile.js +5 -3
- package/dist/components/ServiceItem/ServiceItemDesktop.js +1 -1
- package/dist/styles.css +3 -3
- package/dist/ui/AmenitiesBlock.js +0 -1
- package/dist/ui/ExpendedDropDown/ExpandedDropdown.js +1 -3
- package/dist/ui/OfferBanner.d.ts +1 -0
- package/dist/ui/OfferBanner.js +2 -2
- package/dist/ui/mobileweb/ExpandedDropdownMobile.js +1 -3
- package/dist/utils/CommonService.d.ts +1 -0
- package/dist/utils/CommonService.js +14 -0
- package/package.json +1 -1
- package/src/components/PaymentSideBar/PaymentSideBarDesktop.tsx +8 -1
- package/src/components/PaymentSideBar/PaymentSideBarMobile.tsx +7 -1
- package/src/components/ServiceItem/ServiceItemDesktop.tsx +1 -0
- package/src/ui/AmenitiesBlock.tsx +0 -5
- package/src/ui/ExpendedDropDown/ExpandedDropdown.tsx +5 -2
- package/src/ui/OfferBanner.tsx +3 -1
- package/src/ui/mobileweb/ExpandedDropdownMobile.tsx +5 -2
- package/src/utils/CommonService.ts +17 -0
|
@@ -179,6 +179,7 @@ const renderSummaryDetailsCard = ({ serviceName, date, source, dest, boardingSta
|
|
|
179
179
|
};
|
|
180
180
|
const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData, currencySign, dateOnward, dateReturn, sourceOnward, sourceReturn, destinationOnward, destinationReturn, boardingStageOnward, boardingStageReturn, droppingStageOnward, droppingStageReturn, boardingTimeOnward, boardingTimeReturn, droppingTimeOnward, droppingTimeReturn, durationOnward, durationReturn, selectSeatOnward, selectSeatReturn, journeyTypeActive, setJourneyTypeActive, translation, trainTypeOnward, trainTypeReturn, colors, trainType, icons, selectedOnward, selectedReturn, conexionChecked, conexionPassengers, returnConexionFare, conexionFare, loginData, checkWhatsappEligibility, removeDiscountAtomValue, netFare, promoCode, onPromoRemove, isAgency, agencyFee, walletMoney, virtualMoney, virtualLimit, showUsd, netFareInUsd, renderDiscount, discountAmount, walletLabel, creditosLabel, currency, customSideBarwidth, isLinatal, insuranceData, isPeru, serviceFeeDataStateValue, isOpsite, }) => {
|
|
181
181
|
var _a, _b, _c, _d, _e;
|
|
182
|
+
console.log("π ~ PaymentSideBarDesktop ~ walletMoney:", walletMoney);
|
|
182
183
|
// REMOVED AM/PM DUPLICATION AND ADDED 24 HOUR TIME FORMAT IN BOARDING STAGE
|
|
183
184
|
const depTime = droppingTimeOnward || "";
|
|
184
185
|
const returnTime = droppingTimeReturn || "";
|
|
@@ -420,7 +421,7 @@ const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData,
|
|
|
420
421
|
width: "15px",
|
|
421
422
|
} }),
|
|
422
423
|
React.createElement("div", { className: "duration-mouseover font9", style: { lineHeight: "1.3" } },
|
|
423
|
-
React.createElement("span", null, translation === null || translation === void 0 ? void 0 : translation.whatsappInfoIcon)))), amount: metaData.whatsapp_delivery_charges, className: "font10", customStyle: { color: colors === null || colors === void 0 ? void 0 : colors.whatsappDeliveryChargesColor }, isBoldText: true })) : null,
|
|
424
|
+
React.createElement("span", null, translation === null || translation === void 0 ? void 0 : translation.whatsappInfoIcon)))), amount: metaData.whatsapp_delivery_charges, className: "font10", customStyle: { color: colors === null || colors === void 0 ? void 0 : colors.whatsappDeliveryChargesColor }, isBoldText: true, currency: currency })) : null,
|
|
424
425
|
metaData &&
|
|
425
426
|
isOpsite &&
|
|
426
427
|
metaData.opsite_whatsapp_delivery_charges &&
|
|
@@ -434,7 +435,7 @@ const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData,
|
|
|
434
435
|
width: "15px",
|
|
435
436
|
} }),
|
|
436
437
|
React.createElement("div", { className: "duration-mouseover font9", style: { lineHeight: "1.3" } },
|
|
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 })) : null,
|
|
438
|
+
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
439
|
removeDiscountAtomValue && (React.createElement(PaymentItem, { label: "Cup\u00F3n", amount: CommonService.currency(netFare, currencySign), isNegative: true, currency: "", isBoldText: true })),
|
|
439
440
|
React.createElement("div", { style: { margin: "6px 0" } }, renderDiscount(discountAmount)),
|
|
440
441
|
(promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCodeApplied) && (React.createElement(React.Fragment, null,
|
|
@@ -456,7 +457,9 @@ const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData,
|
|
|
456
457
|
React.createElement("div", { className: "duration-mouseover font9", style: { lineHeight: "1.3" } },
|
|
457
458
|
React.createElement("span", null, translation === null || translation === void 0 ? void 0 : translation.serviceFeeHoverLabel)))), amount: CommonService.currency(serviceFeeDataStateValue === null || serviceFeeDataStateValue === void 0 ? void 0 : serviceFeeDataStateValue.total_convenience_fee_amount, currencySign), className: "font10", currency: currency, customStyle: { color: colors === null || colors === void 0 ? void 0 : colors.serviceFeePriceColor } })),
|
|
458
459
|
isAgency && (React.createElement(PaymentItem, { label: translation === null || translation === void 0 ? void 0 : translation.agencyFee, amount: CommonService.currency(agencyFee ? agencyFee : 0, currencySign), currency: "", customStyle: { color: colors === null || colors === void 0 ? void 0 : colors.agencyFeePriceColor }, isBoldText: true })),
|
|
459
|
-
walletMoney ? (React.createElement(PaymentItem, { label: walletLabel, amount:
|
|
460
|
+
walletMoney ? (React.createElement(PaymentItem, { label: walletLabel, amount: isPeru
|
|
461
|
+
? CommonService.currencyFixed(walletMoney, currencySign)
|
|
462
|
+
: CommonService.currency(walletMoney, currencySign), currency: "", isBoldText: true })) : null,
|
|
460
463
|
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,
|
|
461
464
|
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),
|
|
462
465
|
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 } },
|
|
@@ -206,7 +206,7 @@ const PaymentSideBarMobile = ({ serviceNameOnward, serviceNameReturn, metaData,
|
|
|
206
206
|
lineHeight: "1.3",
|
|
207
207
|
backgroundColor: colors === null || colors === void 0 ? void 0 : colors.whatsappDeliveryChargesBgColor,
|
|
208
208
|
color: colors === null || colors === void 0 ? void 0 : colors.whatsappDeliveryChargesTextColor,
|
|
209
|
-
} }, translation === null || translation === void 0 ? void 0 : translation.whatsappInfoIcon)))), amount: metaData.whatsapp_delivery_charges, className: "text-[14px]", customStyle: { color: colors === null || colors === void 0 ? void 0 : colors.whatsappDeliveryChargesColor } })) : null,
|
|
209
|
+
} }, translation === null || translation === void 0 ? void 0 : translation.whatsappInfoIcon)))), amount: metaData.whatsapp_delivery_charges, className: "text-[14px]", customStyle: { color: colors === null || colors === void 0 ? void 0 : colors.whatsappDeliveryChargesColor }, currency: currency })) : null,
|
|
210
210
|
metaData &&
|
|
211
211
|
isOpsite &&
|
|
212
212
|
metaData.opsite_whatsapp_delivery_charges &&
|
|
@@ -222,7 +222,7 @@ const PaymentSideBarMobile = ({ serviceNameOnward, serviceNameReturn, metaData,
|
|
|
222
222
|
lineHeight: "1.3",
|
|
223
223
|
backgroundColor: colors === null || colors === void 0 ? void 0 : colors.whatsappDeliveryChargesBgColor,
|
|
224
224
|
color: colors === null || colors === void 0 ? void 0 : colors.whatsappDeliveryChargesTextColor,
|
|
225
|
-
} }, translation === null || translation === void 0 ? void 0 : translation.whatsappInfoIcon)))), amount: metaData.opsite_whatsapp_delivery_charges, className: "text-[14px]", customStyle: { color: colors === null || colors === void 0 ? void 0 : colors.whatsappDeliveryChargesColor }, isBoldText: true })) : null,
|
|
225
|
+
} }, translation === null || translation === void 0 ? void 0 : translation.whatsappInfoIcon)))), amount: metaData.opsite_whatsapp_delivery_charges, className: "text-[14px]", customStyle: { color: colors === null || colors === void 0 ? void 0 : colors.whatsappDeliveryChargesColor }, isBoldText: true, currency: currency })) : null,
|
|
226
226
|
(promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCodeApplied) && (React.createElement(React.Fragment, null,
|
|
227
227
|
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)
|
|
228
228
|
? promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount
|
|
@@ -243,7 +243,9 @@ const PaymentSideBarMobile = ({ serviceNameOnward, serviceNameReturn, metaData,
|
|
|
243
243
|
: conexionFare, currencySign), className: "subtotal-row text-[14px]", customStyle: { color: colors === null || colors === void 0 ? void 0 : colors.seatPriceColor }, isBoldText: true })) : null,
|
|
244
244
|
removeDiscountAtomValue && (React.createElement(PaymentItem, { label: "Cup\u00F3n", amount: CommonService.currency(netFare, currencySign), isNegative: true, customStyle: { color: "var(--secondary-color)" }, className: "text-[14px]", isBoldText: true })),
|
|
245
245
|
isAgency && (React.createElement(PaymentItem, { label: translation === null || translation === void 0 ? void 0 : translation.agencyFee, amount: CommonService.currency(agencyFee ? agencyFee : 0, currencySign), className: "text-[14px", customStyle: { color: colors === null || colors === void 0 ? void 0 : colors.agencyFeePriceColor }, isBoldText: true })),
|
|
246
|
-
walletMoney ? (React.createElement(PaymentItem, { label: walletLabel, amount:
|
|
246
|
+
walletMoney ? (React.createElement(PaymentItem, { label: walletLabel, amount: isPeru
|
|
247
|
+
? CommonService.currencyFixed(walletMoney, currencySign)
|
|
248
|
+
: CommonService.currency(walletMoney, currencySign), className: "text-[14px]", customStyle: { color: "var(--secondary-color)" }, currency: "", isBoldText: true })) : null,
|
|
247
249
|
virtualMoney ? (React.createElement(PaymentItem, { label: React.createElement("span", { className: "secondary-text", style: { color: "var(--secondary-color)" } }, `${creditosLabel}(${virtualLimit}%)`), amount: CommonService.currency(virtualMoney, currencySign), customStyle: { color: "var(--secondary-color)" }, className: "text-[14px]", currency: "", isBoldText: true })) : null,
|
|
248
250
|
showUsd ? (React.createElement(PaymentItem, { label: React.createElement("span", { className: "primary-text" }, translation === null || translation === void 0 ? void 0 : translation.showUsd), amount: CommonService.currency(isAgency ? netFareInUsd + agencyFee : netFareInUsd, currencySign), currency: "USD", customStyle: { color: "var(--primary-color)" }, className: "text-[14px]", isBoldText: true })) : null)),
|
|
249
251
|
React.createElement("div", { className: ` text-[#fff] p-[10px_15px] text-left w-full flex items-center absolute -bottom-[35px] pt-[50px] rounded-b-[14px] text-[14px]`, style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.bottomStripColor } },
|
|
@@ -298,7 +298,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
|
|
|
298
298
|
showTopLabel
|
|
299
299
|
? "mt-[25px]"
|
|
300
300
|
: "mt-[20px]"} ` },
|
|
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, coachKey: coachKey })),
|
|
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, coachKey: coachKey, isExpand: isExpand })),
|
|
302
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 },
|
package/dist/styles.css
CHANGED
|
@@ -81,9 +81,6 @@
|
|
|
81
81
|
.right-\[25px\] {
|
|
82
82
|
right: 25px;
|
|
83
83
|
}
|
|
84
|
-
.-bottom-\[29px\] {
|
|
85
|
-
bottom: calc(29px * -1);
|
|
86
|
-
}
|
|
87
84
|
.-bottom-\[30px\] {
|
|
88
85
|
bottom: calc(30px * -1);
|
|
89
86
|
}
|
|
@@ -96,6 +93,9 @@
|
|
|
96
93
|
.-bottom-\[36px\] {
|
|
97
94
|
bottom: calc(36px * -1);
|
|
98
95
|
}
|
|
96
|
+
.-bottom-\[40px\] {
|
|
97
|
+
bottom: calc(40px * -1);
|
|
98
|
+
}
|
|
99
99
|
.bottom-\[11px\] {
|
|
100
100
|
bottom: 11px;
|
|
101
101
|
}
|
|
@@ -71,7 +71,6 @@ const AmenitiesBlock = ({ serviceItem, metaData, isSoldOut, colors, isPeru, getA
|
|
|
71
71
|
amenities,
|
|
72
72
|
priorityIds,
|
|
73
73
|
});
|
|
74
|
-
console.log("π ~ AmenitiesBlock ~ visibleAmenities:", visibleAmenities, amenities);
|
|
75
74
|
const shouldShowPlus = plusAmenities.length > 0;
|
|
76
75
|
const grayscaleClass = isSoldOut ? "grayscale" : "";
|
|
77
76
|
return (React.createElement("div", { className: "relative flex items-center gap-[6px]" },
|
|
@@ -41,8 +41,6 @@ function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAn
|
|
|
41
41
|
React.createElement("span", null, renderIcon("cancelTicketIcon", "16px")),
|
|
42
42
|
React.createElement("span", null,
|
|
43
43
|
React.createElement("span", { className: "bold-text" }, "Pol\u00EDticas de anulaci\u00F3n:"),
|
|
44
|
-
" Tu pasaje
|
|
45
|
-
React.createElement("span", { className: "bold-text" }, " hasta 4 horas antes"),
|
|
46
|
-
" antes de la salida del bus.")))));
|
|
44
|
+
" Tu pasaje no podr\u00E1 ser anulado por tener una tarifa preferencial.")))));
|
|
47
45
|
}
|
|
48
46
|
export default ExpandedDropdown;
|
package/dist/ui/OfferBanner.d.ts
CHANGED
package/dist/ui/OfferBanner.js
CHANGED
|
@@ -56,7 +56,7 @@ const ViewersCount = ({ serviceItem, viewersConfig, getAnimationIcon, }) => {
|
|
|
56
56
|
"comprando")))));
|
|
57
57
|
};
|
|
58
58
|
// βββ Main Component βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
59
|
-
const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, showLoginModal, viewersConfig, getAnimationIcon, showLoginOption, isNewUiEnabled, colors, isLinatal, coachKey, }) => {
|
|
59
|
+
const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, showLoginModal, viewersConfig, getAnimationIcon, showLoginOption, isNewUiEnabled, colors, isLinatal, coachKey, isExpand, }) => {
|
|
60
60
|
const isLegacyOffer = !!(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && !isNewUiEnabled && !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled);
|
|
61
61
|
const isDpEnabledWithoutDiscounts = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && !hasDpDiscounts(serviceItem);
|
|
62
62
|
const showViewers = isNewUiEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled);
|
|
@@ -74,7 +74,7 @@ const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, showLo
|
|
|
74
74
|
}
|
|
75
75
|
return null;
|
|
76
76
|
};
|
|
77
|
-
return (React.createElement("div", { className: `text-white w-full absolute ${coachKey ? "-bottom-[
|
|
77
|
+
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: {
|
|
78
78
|
background,
|
|
79
79
|
opacity: isSoldOut ? 0.5 : 1,
|
|
80
80
|
zIndex: isLinatal ? "-1" : "0",
|
|
@@ -48,8 +48,6 @@ function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyA
|
|
|
48
48
|
React.createElement("span", { className: "mt-[3px]" }, renderIcon("cancelTicketIcon", "14px")),
|
|
49
49
|
React.createElement("span", null,
|
|
50
50
|
React.createElement("span", { className: "bold-text" }, "Pol\u00EDticas de anulaci\u00F3n:"),
|
|
51
|
-
" Tu pasaje
|
|
52
|
-
React.createElement("span", { className: "bold-text" }, " hasta 4 horas antes"),
|
|
53
|
-
" antes de la salida del bus.")))));
|
|
51
|
+
" Tu pasaje no podr\u00E1 ser anulado por tener una tarifa preferencial.")))));
|
|
54
52
|
}
|
|
55
53
|
export default ExpandedDropdownMobile;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
declare const commonService: {
|
|
2
2
|
currency(amount: number, currencySign?: string): string;
|
|
3
|
+
currencyFixed(amount: number, currencySign?: string, decimals?: number): string;
|
|
3
4
|
currencyRounded(amount: number, currencySign?: string): string;
|
|
4
5
|
discountedCurrency(amount: number, currencySign?: string): string;
|
|
5
6
|
copyObject: (ob: any) => any;
|
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Fixes floating-point precision artifacts (e.g. 3546.1500000000005 β 3546.15)
|
|
3
|
+
* by rounding to the given number of decimal places.
|
|
4
|
+
*/
|
|
5
|
+
const fixFloatPrecision = (amount, decimals = 2) => {
|
|
6
|
+
return parseFloat(amount.toFixed(decimals));
|
|
7
|
+
};
|
|
1
8
|
const commonService = {
|
|
2
9
|
currency(amount, currencySign) {
|
|
3
10
|
const formattedAmount = amount
|
|
@@ -6,6 +13,13 @@ const commonService = {
|
|
|
6
13
|
const sign = currencySign || "$";
|
|
7
14
|
return sign + formattedAmount;
|
|
8
15
|
},
|
|
16
|
+
currencyFixed(amount, currencySign, decimals = 2) {
|
|
17
|
+
const formattedAmount = fixFloatPrecision(amount, decimals)
|
|
18
|
+
.toString()
|
|
19
|
+
.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
|
|
20
|
+
const sign = currencySign || "$";
|
|
21
|
+
return sign + formattedAmount;
|
|
22
|
+
},
|
|
9
23
|
currencyRounded(amount, currencySign) {
|
|
10
24
|
const formattedAmount = Math.round(amount)
|
|
11
25
|
.toString()
|
package/package.json
CHANGED
|
@@ -339,6 +339,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
|
|
|
339
339
|
serviceFeeDataStateValue,
|
|
340
340
|
isOpsite,
|
|
341
341
|
}) => {
|
|
342
|
+
console.log("π ~ PaymentSideBarDesktop ~ walletMoney:", walletMoney);
|
|
342
343
|
// REMOVED AM/PM DUPLICATION AND ADDED 24 HOUR TIME FORMAT IN BOARDING STAGE
|
|
343
344
|
const depTime = droppingTimeOnward || "";
|
|
344
345
|
const returnTime = droppingTimeReturn || "";
|
|
@@ -726,6 +727,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
|
|
|
726
727
|
className="font10"
|
|
727
728
|
customStyle={{ color: colors?.whatsappDeliveryChargesColor }}
|
|
728
729
|
isBoldText={true}
|
|
730
|
+
currency={currency}
|
|
729
731
|
/>
|
|
730
732
|
) : null}
|
|
731
733
|
|
|
@@ -763,6 +765,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
|
|
|
763
765
|
className="font10"
|
|
764
766
|
customStyle={{ color: colors?.whatsappDeliveryChargesColor }}
|
|
765
767
|
isBoldText={true}
|
|
768
|
+
currency={currency}
|
|
766
769
|
/>
|
|
767
770
|
) : null}
|
|
768
771
|
|
|
@@ -860,7 +863,11 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
|
|
|
860
863
|
{walletMoney ? (
|
|
861
864
|
<PaymentItem
|
|
862
865
|
label={walletLabel}
|
|
863
|
-
amount={
|
|
866
|
+
amount={
|
|
867
|
+
isPeru
|
|
868
|
+
? CommonService.currencyFixed(walletMoney, currencySign)
|
|
869
|
+
: CommonService.currency(walletMoney, currencySign)
|
|
870
|
+
}
|
|
864
871
|
currency=""
|
|
865
872
|
isBoldText={true}
|
|
866
873
|
/>
|
|
@@ -506,6 +506,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
|
|
|
506
506
|
amount={metaData.whatsapp_delivery_charges}
|
|
507
507
|
className="text-[14px]"
|
|
508
508
|
customStyle={{ color: colors?.whatsappDeliveryChargesColor }}
|
|
509
|
+
currency={currency}
|
|
509
510
|
/>
|
|
510
511
|
) : null}
|
|
511
512
|
|
|
@@ -552,6 +553,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
|
|
|
552
553
|
className="text-[14px]"
|
|
553
554
|
customStyle={{ color: colors?.whatsappDeliveryChargesColor }}
|
|
554
555
|
isBoldText={true}
|
|
556
|
+
currency={currency}
|
|
555
557
|
/>
|
|
556
558
|
) : null}
|
|
557
559
|
|
|
@@ -666,7 +668,11 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
|
|
|
666
668
|
{walletMoney ? (
|
|
667
669
|
<PaymentItem
|
|
668
670
|
label={walletLabel}
|
|
669
|
-
amount={
|
|
671
|
+
amount={
|
|
672
|
+
isPeru
|
|
673
|
+
? CommonService.currencyFixed(walletMoney, currencySign)
|
|
674
|
+
: CommonService.currency(walletMoney, currencySign)
|
|
675
|
+
}
|
|
670
676
|
className="text-[14px]"
|
|
671
677
|
customStyle={{ color: "var(--secondary-color)" }}
|
|
672
678
|
currency=""
|
|
@@ -108,11 +108,6 @@ const AmenitiesBlock = ({
|
|
|
108
108
|
amenities,
|
|
109
109
|
priorityIds,
|
|
110
110
|
});
|
|
111
|
-
console.log(
|
|
112
|
-
"π ~ AmenitiesBlock ~ visibleAmenities:",
|
|
113
|
-
visibleAmenities,
|
|
114
|
-
amenities,
|
|
115
|
-
);
|
|
116
111
|
|
|
117
112
|
const shouldShowPlus = plusAmenities.length > 0;
|
|
118
113
|
const grayscaleClass = isSoldOut ? "grayscale" : "";
|
|
@@ -64,7 +64,8 @@ function ExpandedDropdown({
|
|
|
64
64
|
<span className="bold-text">
|
|
65
65
|
hasta {serviceItem?.change_ticket_hours || 6} horas antes
|
|
66
66
|
</span>{" "}
|
|
67
|
-
de la salida del bus. El monto serΓ‘ reembolsado a tu
|
|
67
|
+
de la salida del bus. El monto serΓ‘ reembolsado a tu
|
|
68
|
+
billetera
|
|
68
69
|
{operatorLabel || "kupospay"}.
|
|
69
70
|
</span>
|
|
70
71
|
</div>
|
|
@@ -107,9 +108,11 @@ function ExpandedDropdown({
|
|
|
107
108
|
<span>{renderIcon("cancelTicketIcon", "16px")}</span>
|
|
108
109
|
<span>
|
|
109
110
|
<span className="bold-text">PolΓticas de anulaciΓ³n:</span> Tu pasaje
|
|
111
|
+
no podrΓ‘ ser anulado por tener una tarifa preferencial.
|
|
112
|
+
{/* Tu pasaje
|
|
110
113
|
puede ser anulado de forma online
|
|
111
114
|
<span className="bold-text"> hasta 4 horas antes</span> antes de la
|
|
112
|
-
salida del bus.
|
|
115
|
+
salida del bus. */}
|
|
113
116
|
</span>
|
|
114
117
|
</div>
|
|
115
118
|
</div>
|
package/src/ui/OfferBanner.tsx
CHANGED
|
@@ -31,6 +31,7 @@ interface OfferBannerProps {
|
|
|
31
31
|
colors: OfferBannerColors;
|
|
32
32
|
isLinatal?: boolean;
|
|
33
33
|
coachKey?: number;
|
|
34
|
+
isExpand?: any;
|
|
34
35
|
}
|
|
35
36
|
|
|
36
37
|
// βββ Helpers ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
@@ -212,6 +213,7 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
|
|
|
212
213
|
colors,
|
|
213
214
|
isLinatal,
|
|
214
215
|
coachKey,
|
|
216
|
+
isExpand,
|
|
215
217
|
}) => {
|
|
216
218
|
const isLegacyOffer =
|
|
217
219
|
!!serviceItem?.offer_text && !isNewUiEnabled && !serviceItem?.is_dp_enabled;
|
|
@@ -255,7 +257,7 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
|
|
|
255
257
|
|
|
256
258
|
return (
|
|
257
259
|
<div
|
|
258
|
-
className={`text-white w-full absolute ${coachKey ? "-bottom-[
|
|
260
|
+
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]`}
|
|
259
261
|
style={{
|
|
260
262
|
background,
|
|
261
263
|
opacity: isSoldOut ? 0.5 : 1,
|
|
@@ -60,7 +60,8 @@ function ExpandedDropdownMobile({
|
|
|
60
60
|
<span className="bold-text">
|
|
61
61
|
hasta {serviceItem?.change_ticket_hours || 6} horas antes
|
|
62
62
|
</span>{" "}
|
|
63
|
-
de la salida del bus. El monto serΓ‘ reembolsado a tu
|
|
63
|
+
de la salida del bus. El monto serΓ‘ reembolsado a tu
|
|
64
|
+
billetera
|
|
64
65
|
{operatorLabel || "kupospay"}.
|
|
65
66
|
</span>
|
|
66
67
|
</div>
|
|
@@ -121,9 +122,11 @@ function ExpandedDropdownMobile({
|
|
|
121
122
|
</span>
|
|
122
123
|
<span>
|
|
123
124
|
<span className="bold-text">PolΓticas de anulaciΓ³n:</span> Tu pasaje
|
|
125
|
+
no podrΓ‘ ser anulado por tener una tarifa preferencial.
|
|
126
|
+
{/* Tu pasaje
|
|
124
127
|
puede ser anulado de forma online
|
|
125
128
|
<span className="bold-text"> hasta 4 horas antes</span> antes de la
|
|
126
|
-
salida del bus.
|
|
129
|
+
salida del bus. */}
|
|
127
130
|
</span>
|
|
128
131
|
</div>
|
|
129
132
|
</div>
|
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Fixes floating-point precision artifacts (e.g. 3546.1500000000005 β 3546.15)
|
|
3
|
+
* by rounding to the given number of decimal places.
|
|
4
|
+
*/
|
|
5
|
+
const fixFloatPrecision = (amount: number, decimals: number = 2): number => {
|
|
6
|
+
return parseFloat(amount.toFixed(decimals));
|
|
7
|
+
};
|
|
8
|
+
|
|
1
9
|
const commonService = {
|
|
2
10
|
currency(amount: number, currencySign?: string) {
|
|
3
11
|
const formattedAmount = amount
|
|
@@ -8,6 +16,15 @@ const commonService = {
|
|
|
8
16
|
return sign + formattedAmount;
|
|
9
17
|
},
|
|
10
18
|
|
|
19
|
+
currencyFixed(amount: number, currencySign?: string, decimals: number = 2) {
|
|
20
|
+
const formattedAmount = fixFloatPrecision(amount, decimals)
|
|
21
|
+
.toString()
|
|
22
|
+
.replace(/\B(?=(\d{3})+(?!\d))/g, ".");
|
|
23
|
+
|
|
24
|
+
const sign = currencySign || "$";
|
|
25
|
+
return sign + formattedAmount;
|
|
26
|
+
},
|
|
27
|
+
|
|
11
28
|
currencyRounded(amount: number, currencySign?: string) {
|
|
12
29
|
const formattedAmount = Math.round(amount)
|
|
13
30
|
.toString()
|