kupos-ui-components-lib 10.1.7 → 10.1.8

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 (18) hide show
  1. package/dist/components/PaymentSideBar/PaymentItem.d.ts +1 -0
  2. package/dist/components/PaymentSideBar/PaymentItem.js +2 -2
  3. package/dist/components/PaymentSideBar/PaymentSideBarDesktop.js +10 -10
  4. package/dist/components/PaymentSideBar/PaymentSideBarMobile.js +10 -10
  5. package/dist/components/PaymentSideBar/types.d.ts +1 -0
  6. package/dist/components/ServiceItem/PeruServiceItemDesktop.js +1 -1
  7. package/dist/components/ServiceItem/ServiceItemDesktop.js +3 -3
  8. package/dist/styles.css +8 -2
  9. package/dist/ui/OfferBanner.d.ts +1 -0
  10. package/dist/ui/OfferBanner.js +3 -3
  11. package/package.json +1 -1
  12. package/src/components/PaymentSideBar/PaymentItem.tsx +3 -1
  13. package/src/components/PaymentSideBar/PaymentSideBarDesktop.tsx +14 -3
  14. package/src/components/PaymentSideBar/PaymentSideBarMobile.tsx +10 -2
  15. package/src/components/PaymentSideBar/types.ts +1 -0
  16. package/src/components/ServiceItem/PeruServiceItemDesktop.tsx +1 -1
  17. package/src/components/ServiceItem/ServiceItemDesktop.tsx +3 -2
  18. package/src/ui/OfferBanner.tsx +4 -2
package/dist/components/PaymentSideBar/PaymentItem.d.ts CHANGED
@@ -7,6 +7,7 @@ interface PaymentItemProps {
7
7
  isNegative?: boolean;
8
8
  customStyle?: React.CSSProperties;
9
9
  showCurrency?: boolean;
10
+ isBoldText?: boolean;
10
11
  }
11
12
  declare const PaymentItem: React.FC<PaymentItemProps>;
12
13
  export default PaymentItem;
package/dist/components/PaymentSideBar/PaymentItem.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import React from "react";
2
- const PaymentItem = ({ label, amount, currency = "CLP", className = "", isNegative = false, customStyle = {}, showCurrency = true, }) => {
2
+ const PaymentItem = ({ label, amount, currency = "CLP", className = "", isNegative = false, customStyle = {}, showCurrency = true, isBoldText = false, }) => {
3
3
  return (React.createElement("div", { className: `flex justify-between items-center w-full ${className} text-[13.33px] `, style: { margin: "6px 0" } },
4
4
  React.createElement("div", { className: "" }, label),
5
- React.createElement("div", { className: "bold-text", style: Object.assign({ minWidth: 80, display: "flex", justifyContent: "flex-end" }, customStyle) },
5
+ React.createElement("div", { className: isBoldText ? "bold-text" : "", style: Object.assign({ minWidth: 80, display: "flex", justifyContent: "flex-end" }, customStyle) },
6
6
  showCurrency && currency,
7
7
  " ",
8
8
  isNegative ? "- " : "",
package/dist/components/PaymentSideBar/PaymentSideBarDesktop.js CHANGED
@@ -406,7 +406,7 @@ const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData,
406
406
  React.createElement("div", { className: "bold-text", style: { color: colors === null || colors === void 0 ? void 0 : colors.seatPriceColor } }, CommonService.currency((_e = insuranceData === null || insuranceData === void 0 ? void 0 : insuranceData.insurance_total) !== null && _e !== void 0 ? _e : 0, currencySign)))) : null,
407
407
  conexionChecked && conexionFare && returnConexionFare ? (React.createElement(PaymentItem, { label: "Conexi\u00F3n Aeropuerto:", amount: CommonService.currency(dateReturn
408
408
  ? returnConexionFare * conexionPassengers
409
- : conexionFare, currencySign), className: "subtotal-row font10", customStyle: { color: colors === null || colors === void 0 ? void 0 : colors.seatPriceColor } })) : null,
409
+ : conexionFare, currencySign), className: "subtotal-row font10", customStyle: { color: colors === null || colors === void 0 ? void 0 : colors.seatPriceColor }, isBoldText: true })) : null,
410
410
  metaData &&
411
411
  !isOpsite &&
412
412
  metaData.whatsapp_delivery_charges &&
@@ -420,7 +420,7 @@ const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData,
420
420
  width: "15px",
421
421
  } }),
422
422
  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 } })) : null,
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
424
  metaData &&
425
425
  isOpsite &&
426
426
  metaData.opsite_whatsapp_delivery_charges &&
@@ -434,13 +434,13 @@ const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData,
434
434
  width: "15px",
435
435
  } }),
436
436
  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 } })) : null,
438
- removeDiscountAtomValue && (React.createElement(PaymentItem, { label: "Cup\u00F3n", amount: CommonService.currency(netFare, currencySign), isNegative: true, currency: "" })),
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
+ removeDiscountAtomValue && (React.createElement(PaymentItem, { label: "Cup\u00F3n", amount: CommonService.currency(netFare, currencySign), isNegative: true, currency: "", isBoldText: true })),
439
439
  React.createElement("div", { style: { margin: "6px 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
443
- : 0, currencySign), className: "text-[13.33px]", currency: currency, customStyle: { color: colors === null || colors === void 0 ? void 0 : colors.promoCodePriceColor } }),
443
+ : 0, currencySign), className: "text-[13.33px]", currency: currency, customStyle: { color: colors === null || colors === void 0 ? void 0 : colors.promoCodePriceColor }, isBoldText: true }),
444
444
  (promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount) ? (React.createElement("div", { className: "promocode font10 flex items-center gap-[5px]" },
445
445
  React.createElement("div", null, promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCode),
446
446
  React.createElement("span", { className: "promo-remove", onClick: onPromoRemove },
@@ -454,11 +454,11 @@ const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData,
454
454
  width: "15px",
455
455
  } }),
456
456
  React.createElement("div", { className: "duration-mouseover font9", style: { lineHeight: "1.3" } },
457
- 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.whatsappDeliveryChargesColor } })),
458
- 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 } })),
459
- walletMoney ? (React.createElement(PaymentItem, { label: walletLabel, amount: CommonService.currency(walletMoney, currencySign), currency: "" })) : null,
460
- virtualMoney ? (React.createElement(PaymentItem, { label: React.createElement("span", { className: "secondary-text " }, `${creditosLabel}(${virtualLimit}%)`), amount: CommonService.currency(virtualMoney, currencySign), customStyle: { color: "var(--secondary-color)" }, currency: "" })) : null,
461
- 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)" } })) : null),
457
+ 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
+ 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: CommonService.currency(walletMoney, currencySign), currency: "", isBoldText: true })) : null,
460
+ 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
+ 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
462
  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 } },
463
463
  React.createElement("div", { className: "flex justify-between items-center w-full" },
464
464
  React.createElement("div", { className: "black-text" }, "Total"),
package/dist/components/PaymentSideBar/PaymentSideBarMobile.js CHANGED
@@ -73,7 +73,7 @@ const renderSummaryDetailsCard = ({ serviceName, date, source, dest, boardingSta
73
73
  ? `${getRoundedHour(duration)}hrs aprox`
74
74
  : `${DateService.formatDuration(duration)} horas`)))))));
75
75
  };
76
- const PaymentSideBarMobile = ({ 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, currency, showWhatsappChargesInfo, setShowWhatsappChargesInfo, t, countdown, walletLabel, creditosLabel, isTacna, isLinatal, insuranceData, isPeru, setShowServicefeeModal, serviceFeeDataStateValue, isOpsite }) => {
76
+ const PaymentSideBarMobile = ({ 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, currency, showWhatsappChargesInfo, setShowWhatsappChargesInfo, t, countdown, walletLabel, creditosLabel, isTacna, isLinatal, insuranceData, isPeru, setShowServicefeeModal, serviceFeeDataStateValue, isOpsite, }) => {
77
77
  var _a, _b, _c, _d, _e;
78
78
  return (React.createElement("div", { className: "pb-[15px]" },
79
79
  React.createElement("div", { className: "border border-[#ccc] m-[20px] rounded-[20px] relative" },
@@ -222,11 +222,11 @@ 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 } })) : 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 })) : 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
229
- : 0, currencySign), className: "text-[14px]", showCurrency: false, customStyle: { color: colors === null || colors === void 0 ? void 0 : colors.promoCodePriceColor }, currency: "" }),
229
+ : 0, currencySign), className: "text-[14px]", showCurrency: false, customStyle: { color: colors === null || colors === void 0 ? void 0 : colors.promoCodePriceColor }, currency: "", isBoldText: true }),
230
230
  (promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount) ? (React.createElement("div", { className: "promocode font14 flex items-center gap-[5px]" },
231
231
  React.createElement("div", null, promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCode),
232
232
  React.createElement("span", { className: "promo-remove", onClick: onPromoRemove },
@@ -237,15 +237,15 @@ const PaymentSideBarMobile = ({ serviceNameOnward, serviceNameReturn, metaData,
237
237
  React.createElement("img", { src: icons === null || icons === void 0 ? void 0 : icons.whatsappInfoIcon, alt: "", style: {
238
238
  marginLeft: "5px",
239
239
  width: "15px",
240
- } }))), amount: CommonService.currency(serviceFeeDataStateValue === null || serviceFeeDataStateValue === void 0 ? void 0 : serviceFeeDataStateValue.total_convenience_fee_amount, currencySign), className: "font14", currency: currency, customStyle: { color: colors === null || colors === void 0 ? void 0 : colors.whatsappDeliveryChargesColor } })),
240
+ } }))), amount: CommonService.currency(serviceFeeDataStateValue === null || serviceFeeDataStateValue === void 0 ? void 0 : serviceFeeDataStateValue.total_convenience_fee_amount, currencySign), className: "font14", currency: currency, customStyle: { color: colors === null || colors === void 0 ? void 0 : colors.serviceFeePriceColor } })),
241
241
  conexionChecked && conexionFare && returnConexionFare ? (React.createElement(PaymentItem, { label: "Conexi\u00F3n Aeropuerto:", amount: CommonService.currency(dateReturn
242
242
  ? returnConexionFare * conexionPassengers
243
- : conexionFare, currencySign), className: "subtotal-row text-[14px]", customStyle: { color: colors === null || colors === void 0 ? void 0 : colors.seatPriceColor } })) : null,
244
- removeDiscountAtomValue && (React.createElement(PaymentItem, { label: "Cup\u00F3n", amount: CommonService.currency(netFare, currencySign), isNegative: true, customStyle: { color: "var(--secondary-color)" }, className: "text-[14px]" })),
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 } })),
246
- walletMoney ? (React.createElement(PaymentItem, { label: walletLabel, amount: CommonService.currency(walletMoney, currencySign), className: "text-[14px]", customStyle: { color: "var(--secondary-color)" }, currency: "" })) : null,
247
- 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: "" })) : null,
248
- 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]" })) : null)),
243
+ : conexionFare, currencySign), className: "subtotal-row text-[14px]", customStyle: { color: colors === null || colors === void 0 ? void 0 : colors.seatPriceColor }, isBoldText: true })) : null,
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
+ 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: CommonService.currency(walletMoney, currencySign), className: "text-[14px]", customStyle: { color: "var(--secondary-color)" }, currency: "", isBoldText: true })) : null,
247
+ 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
+ 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
249
  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 } },
250
250
  React.createElement("div", { className: "flex justify-between items-center w-full text-[#fff]" },
251
251
  React.createElement("div", { className: "bold-text" }, "Total"),
package/dist/components/PaymentSideBar/types.d.ts CHANGED
@@ -55,6 +55,7 @@ export interface PaymentSideBarProps {
55
55
  promoCodePriceColor?: string;
56
56
  agencyFeePriceColor?: string;
57
57
  whatsappDeliveryChargesColor?: string;
58
+ serviceFeePriceColor?: string;
58
59
  };
59
60
  trainType?: boolean;
60
61
  icons?: {
package/dist/components/ServiceItem/PeruServiceItemDesktop.js CHANGED
@@ -394,7 +394,7 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
394
394
  return (React.createElement("div", { className: `relative hover:z-[150] ${(hasOfferText || hasDpEnabled || isNewUiEnabled) && !isSoldOut ? "mb-[65px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
395
395
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
396
396
  showTopLabel
397
- ? "mt-[20px]"
397
+ ? "mt-[30px]"
398
398
  : "mt-[20px]"} ` },
399
399
  ((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 })),
400
400
  React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -293,12 +293,12 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
293
293
  setIsFeatureDropDownExpand(isFeatureDropDownExpand === serviceItem.id ||
294
294
  isFeatureDropDownExpand === true
295
295
  ? null
296
- : serviceItem.id), selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle, wowDealData: wowDealData })) : (React.createElement("div", { className: `relative hover:z-[150] ${(hasOfferText || hasDpEnabled || isNewUiEnabled) && !isSoldOut ? "mb-[65px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
296
+ : serviceItem.id), selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle, wowDealData: wowDealData })) : (React.createElement("div", { className: `relative hover:z-[150] ${(hasOfferText || hasDpEnabled || isNewUiEnabled) && !isSoldOut ? "mb-[55px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
297
297
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
298
298
  showTopLabel
299
- ? "mt-[20px]"
299
+ ? "mt-[30px]"
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 })),
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 })),
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,6 +81,9 @@
81
81
  .right-\[25px\] {
82
82
  right: 25px;
83
83
  }
84
+ .-bottom-\[29px\] {
85
+ bottom: calc(29px * -1);
86
+ }
84
87
  .-bottom-\[30px\] {
85
88
  bottom: calc(30px * -1);
86
89
  }
@@ -243,6 +246,9 @@
243
246
  .mt-\[24px\] {
244
247
  margin-top: 24px;
245
248
  }
249
+ .mt-\[30px\] {
250
+ margin-top: 30px;
251
+ }
246
252
  .mt-\[50px\] {
247
253
  margin-top: 50px;
248
254
  }
@@ -393,8 +399,8 @@
393
399
  .h-\[30px\] {
394
400
  height: 30px;
395
401
  }
396
- .h-\[44px\] {
397
- height: 44px;
402
+ .h-\[58px\] {
403
+ height: 58px;
398
404
  }
399
405
  .h-\[90px\] {
400
406
  height: 90px;
package/dist/ui/OfferBanner.d.ts CHANGED
@@ -17,6 +17,7 @@ interface OfferBannerProps {
17
17
  isNewUiEnabled?: boolean;
18
18
  colors: OfferBannerColors;
19
19
  isLinatal?: boolean;
20
+ coachKey?: number;
20
21
  }
21
22
  declare const OfferBanner: React.FC<OfferBannerProps>;
22
23
  export default OfferBanner;
package/dist/ui/OfferBanner.js CHANGED
@@ -54,7 +54,7 @@ const ViewersCount = ({ serviceItem, viewersConfig, getAnimationIcon, }) => {
54
54
  "comprando")))));
55
55
  };
56
56
  // ─── Main Component ───────────────────────────────────────────────────────────
57
- const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, showLoginModal, viewersConfig, getAnimationIcon, showLoginOption, isNewUiEnabled, colors, isLinatal, }) => {
57
+ const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, showLoginModal, viewersConfig, getAnimationIcon, showLoginOption, isNewUiEnabled, colors, isLinatal, coachKey, }) => {
58
58
  const isLegacyOffer = !!(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && !isNewUiEnabled && !(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled);
59
59
  const isDpEnabledWithoutDiscounts = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && !hasDpDiscounts(serviceItem);
60
60
  const showViewers = isNewUiEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled);
@@ -72,12 +72,12 @@ const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, showLo
72
72
  }
73
73
  return null;
74
74
  };
75
- return (React.createElement("div", { className: "text-white w-full absolute -bottom-[40px] pt-[20px] rounded-b-[14px] text-[14px] mt-[10px]", style: {
75
+ return (React.createElement("div", { className: `text-white w-full absolute ${coachKey ? "-bottom-[29px]" : "-bottom-[40px]"} rounded-b-[14px] text-[14px] h-[58px] flex items-end pb-[7px]`, style: {
76
76
  background,
77
77
  opacity: isSoldOut ? 0.5 : 1,
78
78
  zIndex: isLinatal ? "-1" : "-1",
79
79
  } },
80
- React.createElement("div", { className: "flex justify-start items-center h-[44px] w-full gap-[20px] px-[15px]" },
80
+ React.createElement("div", { className: "flex items-center w-full gap-[20px] px-[15px] justify-between" },
81
81
  React.createElement("div", { className: "flex items-center justify-start" }, renderLeftContent()),
82
82
  showViewers && (React.createElement(ViewersCount, { serviceItem: serviceItem, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon })))));
83
83
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "10.1.7",
3
+ "version": "10.1.8",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/PaymentSideBar/PaymentItem.tsx CHANGED
@@ -9,6 +9,7 @@ interface PaymentItemProps {
9
9
  isNegative?: boolean;
10
10
  customStyle?: React.CSSProperties;
11
11
  showCurrency?: boolean;
12
+ isBoldText?: boolean;
12
13
  }
13
14
 
14
15
  const PaymentItem: React.FC<PaymentItemProps> = ({
@@ -20,6 +21,7 @@ const PaymentItem: React.FC<PaymentItemProps> = ({
20
21
  isNegative = false,
21
22
  customStyle = {},
22
23
  showCurrency = true,
24
+ isBoldText = false,
23
25
  }) => {
24
26
  return (
25
27
  <div
@@ -28,7 +30,7 @@ const PaymentItem: React.FC<PaymentItemProps> = ({
28
30
  >
29
31
  <div className="">{label}</div>
30
32
  <div
31
- className="bold-text"
33
+ className={isBoldText ? "bold-text" : ""}
32
34
  style={{
33
35
  minWidth: 80,
34
36
  display: "flex",
package/src/components/PaymentSideBar/PaymentSideBarDesktop.tsx CHANGED
@@ -266,7 +266,9 @@ const renderSummaryDetailsCard = ({
266
266
  className="w-[16px] h-[16px] mr-[5px]"
267
267
  />
268
268
  </div>
269
- <span>Duración : {DateService.formatDuration(duration)} horas</span>
269
+ <span>
270
+ Duración : {DateService.formatDuration(duration)} horas
271
+ </span>
270
272
  </div>
271
273
  )}
272
274
  </div>
@@ -686,6 +688,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
686
688
  )}
687
689
  className="subtotal-row font10"
688
690
  customStyle={{ color: colors?.seatPriceColor }}
691
+ isBoldText={true}
689
692
  />
690
693
  ) : null}
691
694
 
@@ -722,10 +725,11 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
722
725
  amount={metaData.whatsapp_delivery_charges}
723
726
  className="font10"
724
727
  customStyle={{ color: colors?.whatsappDeliveryChargesColor }}
728
+ isBoldText={true}
725
729
  />
726
730
  ) : null}
727
731
 
728
- {metaData &&
732
+ {metaData &&
729
733
  isOpsite &&
730
734
  metaData.opsite_whatsapp_delivery_charges &&
731
735
  !loginData &&
@@ -758,6 +762,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
758
762
  amount={metaData.opsite_whatsapp_delivery_charges}
759
763
  className="font10"
760
764
  customStyle={{ color: colors?.whatsappDeliveryChargesColor }}
765
+ isBoldText={true}
761
766
  />
762
767
  ) : null}
763
768
 
@@ -767,6 +772,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
767
772
  amount={CommonService.currency(netFare, currencySign)}
768
773
  isNegative={true}
769
774
  currency=""
775
+ isBoldText={true}
770
776
  />
771
777
  )}
772
778
 
@@ -787,6 +793,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
787
793
  className="text-[13.33px]"
788
794
  currency={currency}
789
795
  customStyle={{ color: colors?.promoCodePriceColor }}
796
+ isBoldText={true}
790
797
  />
791
798
  {promoCode?.promoCouponAmount ? (
792
799
  <div className="promocode font10 flex items-center gap-[5px]">
@@ -833,7 +840,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
833
840
  )}
834
841
  className="font10"
835
842
  currency={currency}
836
- customStyle={{ color: colors?.whatsappDeliveryChargesColor }}
843
+ customStyle={{ color: colors?.serviceFeePriceColor }}
837
844
  />
838
845
  )}
839
846
 
@@ -846,6 +853,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
846
853
  )}
847
854
  currency=""
848
855
  customStyle={{ color: colors?.agencyFeePriceColor }}
856
+ isBoldText={true}
849
857
  />
850
858
  )}
851
859
 
@@ -854,6 +862,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
854
862
  label={walletLabel}
855
863
  amount={CommonService.currency(walletMoney, currencySign)}
856
864
  currency=""
865
+ isBoldText={true}
857
866
  />
858
867
  ) : null}
859
868
 
@@ -865,6 +874,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
865
874
  amount={CommonService.currency(virtualMoney, currencySign)}
866
875
  customStyle={{ color: "var(--secondary-color)" }}
867
876
  currency=""
877
+ isBoldText={true}
868
878
  />
869
879
  ) : null}
870
880
 
@@ -880,6 +890,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
880
890
  )}
881
891
  currency="USD"
882
892
  customStyle={{ color: "var(--secondary-color)" }}
893
+ isBoldText={true}
883
894
  />
884
895
  ) : null}
885
896
  </div>
package/src/components/PaymentSideBar/PaymentSideBarMobile.tsx CHANGED
@@ -242,7 +242,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
242
242
  isPeru,
243
243
  setShowServicefeeModal,
244
244
  serviceFeeDataStateValue,
245
- isOpsite
245
+ isOpsite,
246
246
  }) => {
247
247
  return (
248
248
  <div className="pb-[15px]">
@@ -548,6 +548,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
548
548
  amount={metaData.opsite_whatsapp_delivery_charges}
549
549
  className="text-[14px]"
550
550
  customStyle={{ color: colors?.whatsappDeliveryChargesColor }}
551
+ isBoldText={true}
551
552
  />
552
553
  ) : null}
553
554
 
@@ -565,6 +566,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
565
566
  showCurrency={false}
566
567
  customStyle={{ color: colors?.promoCodePriceColor }}
567
568
  currency=""
569
+ isBoldText={true}
568
570
  />
569
571
  {promoCode?.promoCouponAmount ? (
570
572
  <div className="promocode font14 flex items-center gap-[5px]">
@@ -615,7 +617,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
615
617
  )}
616
618
  className="font14"
617
619
  currency={currency}
618
- customStyle={{ color: colors?.whatsappDeliveryChargesColor }}
620
+ customStyle={{ color: colors?.serviceFeePriceColor }}
619
621
  />
620
622
  )}
621
623
 
@@ -630,6 +632,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
630
632
  )}
631
633
  className="subtotal-row text-[14px]"
632
634
  customStyle={{ color: colors?.seatPriceColor }}
635
+ isBoldText={true}
633
636
  />
634
637
  ) : null}
635
638
 
@@ -640,6 +643,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
640
643
  isNegative={true}
641
644
  customStyle={{ color: "var(--secondary-color)" }}
642
645
  className="text-[14px]"
646
+ isBoldText={true}
643
647
  />
644
648
  )}
645
649
 
@@ -652,6 +656,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
652
656
  )}
653
657
  className="text-[14px"
654
658
  customStyle={{ color: colors?.agencyFeePriceColor }}
659
+ isBoldText={true}
655
660
  />
656
661
  )}
657
662
 
@@ -662,6 +667,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
662
667
  className="text-[14px]"
663
668
  customStyle={{ color: "var(--secondary-color)" }}
664
669
  currency=""
670
+ isBoldText={true}
665
671
  />
666
672
  ) : null}
667
673
 
@@ -677,6 +683,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
677
683
  customStyle={{ color: "var(--secondary-color)" }}
678
684
  className="text-[14px]"
679
685
  currency=""
686
+ isBoldText={true}
680
687
  />
681
688
  ) : null}
682
689
 
@@ -692,6 +699,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
692
699
  currency="USD"
693
700
  customStyle={{ color: "var(--primary-color)" }}
694
701
  className="text-[14px]"
702
+ isBoldText={true}
695
703
  />
696
704
  ) : null}
697
705
  </div>
package/src/components/PaymentSideBar/types.ts CHANGED
@@ -53,6 +53,7 @@ export interface PaymentSideBarProps {
53
53
  promoCodePriceColor?: string;
54
54
  agencyFeePriceColor?: string;
55
55
  whatsappDeliveryChargesColor?: string;
56
+ serviceFeePriceColor?: string;
56
57
  };
57
58
  trainType?: boolean;
58
59
  icons?: {
package/src/components/ServiceItem/PeruServiceItemDesktop.tsx CHANGED
@@ -609,7 +609,7 @@ function PeruServiceItemDesktop({
609
609
  serviceItem?.is_direct_trip ||
610
610
  serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
611
611
  showTopLabel
612
- ? "mt-[20px]"
612
+ ? "mt-[30px]"
613
613
  : "mt-[20px]"
614
614
  } `}
615
615
  >
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -535,11 +535,11 @@ function ServiceItemPB({
535
535
  />
536
536
  ) : (
537
537
  <div
538
- className={`relative hover:z-[150] ${(hasOfferText || hasDpEnabled || isNewUiEnabled) && !isSoldOut ? "mb-[65px]" : "mb-[20px]"} ${
538
+ className={`relative hover:z-[150] ${(hasOfferText || hasDpEnabled || isNewUiEnabled) && !isSoldOut ? "mb-[55px]" : "mb-[20px]"} ${
539
539
  serviceItem?.is_direct_trip ||
540
540
  serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
541
541
  showTopLabel
542
- ? "mt-[20px]"
542
+ ? "mt-[30px]"
543
543
  : "mt-[20px]"
544
544
  } `}
545
545
  >
@@ -557,6 +557,7 @@ function ServiceItemPB({
557
557
  isNewUiEnabled={isNewUiEnabled}
558
558
  colors={colors}
559
559
  isLinatal={isLinatal}
560
+ coachKey={coachKey}
560
561
  />
561
562
  )}
562
563
  <div
package/src/ui/OfferBanner.tsx CHANGED
@@ -30,6 +30,7 @@ interface OfferBannerProps {
30
30
  isNewUiEnabled?: boolean;
31
31
  colors: OfferBannerColors;
32
32
  isLinatal?: boolean;
33
+ coachKey?: number;
33
34
  }
34
35
 
35
36
  // ─── Helpers ──────────────────────────────────────────────────────────────────
@@ -208,6 +209,7 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
208
209
  isNewUiEnabled,
209
210
  colors,
210
211
  isLinatal,
212
+ coachKey,
211
213
  }) => {
212
214
  const isLegacyOffer =
213
215
  !!serviceItem?.offer_text && !isNewUiEnabled && !serviceItem?.is_dp_enabled;
@@ -251,14 +253,14 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
251
253
 
252
254
  return (
253
255
  <div
254
- className="text-white w-full absolute -bottom-[40px] pt-[20px] rounded-b-[14px] text-[14px] mt-[10px]"
256
+ className={`text-white w-full absolute ${coachKey ? "-bottom-[29px]" : "-bottom-[40px]"} rounded-b-[14px] text-[14px] h-[58px] flex items-end pb-[7px]`}
255
257
  style={{
256
258
  background,
257
259
  opacity: isSoldOut ? 0.5 : 1,
258
260
  zIndex: isLinatal ? "-1" : "-1",
259
261
  }}
260
262
  >
261
- <div className="flex justify-start items-center h-[44px] w-full gap-[20px] px-[15px]">
263
+ <div className="flex items-center w-full gap-[20px] px-[15px] justify-between">
262
264
  <div className="flex items-center justify-start">
263
265
  {renderLeftContent()}
264
266
  </div>