kupos-ui-components-lib 10.1.7 → 10.1.9

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 +11 -11
  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 -5
  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 +14 -3
  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,10 +73,10 @@ 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
- React.createElement("div", { className: "border border-[#ccc] m-[20px] rounded-[20px] relative" },
79
+ React.createElement("div", { className: "border border-[#ccc] rounded-[20px] relative", style: { margin: "10px 20px 20px" } },
80
80
  React.createElement("div", { style: {
81
81
  position: "absolute",
82
82
  zIndex: 200,
@@ -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
  }
@@ -183,9 +186,6 @@
183
186
  .container {
184
187
  width: 100%;
185
188
  }
186
- .m-\[20px\] {
187
- margin: 20px;
188
- }
189
189
  .m-\[auto\] {
190
190
  margin: auto;
191
191
  }
@@ -243,6 +243,9 @@
243
243
  .mt-\[24px\] {
244
244
  margin-top: 24px;
245
245
  }
246
+ .mt-\[30px\] {
247
+ margin-top: 30px;
248
+ }
246
249
  .mt-\[50px\] {
247
250
  margin-top: 50px;
248
251
  }
@@ -393,8 +396,8 @@
393
396
  .h-\[30px\] {
394
397
  height: 30px;
395
398
  }
396
- .h-\[44px\] {
397
- height: 44px;
399
+ .h-\[58px\] {
400
+ height: 58px;
398
401
  }
399
402
  .h-\[90px\] {
400
403
  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.9",
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,11 +242,14 @@ 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]">
249
- <div className="border border-[#ccc] m-[20px] rounded-[20px] relative">
249
+ <div
250
+ className="border border-[#ccc] rounded-[20px] relative"
251
+ style={{ margin: "10px 20px 20px" }}
252
+ >
250
253
  <div
251
254
  style={{
252
255
  position: "absolute",
@@ -548,6 +551,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
548
551
  amount={metaData.opsite_whatsapp_delivery_charges}
549
552
  className="text-[14px]"
550
553
  customStyle={{ color: colors?.whatsappDeliveryChargesColor }}
554
+ isBoldText={true}
551
555
  />
552
556
  ) : null}
553
557
 
@@ -565,6 +569,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
565
569
  showCurrency={false}
566
570
  customStyle={{ color: colors?.promoCodePriceColor }}
567
571
  currency=""
572
+ isBoldText={true}
568
573
  />
569
574
  {promoCode?.promoCouponAmount ? (
570
575
  <div className="promocode font14 flex items-center gap-[5px]">
@@ -615,7 +620,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
615
620
  )}
616
621
  className="font14"
617
622
  currency={currency}
618
- customStyle={{ color: colors?.whatsappDeliveryChargesColor }}
623
+ customStyle={{ color: colors?.serviceFeePriceColor }}
619
624
  />
620
625
  )}
621
626
 
@@ -630,6 +635,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
630
635
  )}
631
636
  className="subtotal-row text-[14px]"
632
637
  customStyle={{ color: colors?.seatPriceColor }}
638
+ isBoldText={true}
633
639
  />
634
640
  ) : null}
635
641
 
@@ -640,6 +646,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
640
646
  isNegative={true}
641
647
  customStyle={{ color: "var(--secondary-color)" }}
642
648
  className="text-[14px]"
649
+ isBoldText={true}
643
650
  />
644
651
  )}
645
652
 
@@ -652,6 +659,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
652
659
  )}
653
660
  className="text-[14px"
654
661
  customStyle={{ color: colors?.agencyFeePriceColor }}
662
+ isBoldText={true}
655
663
  />
656
664
  )}
657
665
 
@@ -662,6 +670,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
662
670
  className="text-[14px]"
663
671
  customStyle={{ color: "var(--secondary-color)" }}
664
672
  currency=""
673
+ isBoldText={true}
665
674
  />
666
675
  ) : null}
667
676
 
@@ -677,6 +686,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
677
686
  customStyle={{ color: "var(--secondary-color)" }}
678
687
  className="text-[14px]"
679
688
  currency=""
689
+ isBoldText={true}
680
690
  />
681
691
  ) : null}
682
692
 
@@ -692,6 +702,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
692
702
  currency="USD"
693
703
  customStyle={{ color: "var(--primary-color)" }}
694
704
  className="text-[14px]"
705
+ isBoldText={true}
695
706
  />
696
707
  ) : null}
697
708
  </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>