kupos-ui-components-lib 10.1.6 → 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 +25 -10
  4. package/dist/components/PaymentSideBar/PaymentSideBarMobile.js +26 -9
  5. package/dist/components/PaymentSideBar/types.d.ts +2 -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 +51 -2
  14. package/src/components/PaymentSideBar/PaymentSideBarMobile.tsx +56 -1
  15. package/src/components/PaymentSideBar/types.ts +2 -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
@@ -177,7 +177,7 @@ const renderSummaryDetailsCard = ({ serviceName, date, source, dest, boardingSta
177
177
  DateService.formatDuration(duration),
178
178
  " horas")))))));
179
179
  };
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, }) => {
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
182
  // REMOVED AM/PM DUPLICATION AND ADDED 24 HOUR TIME FORMAT IN BOARDING STAGE
183
183
  const depTime = droppingTimeOnward || "";
@@ -406,8 +406,9 @@ 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
+ !isOpsite &&
411
412
  metaData.whatsapp_delivery_charges &&
412
413
  !loginData &&
413
414
  !checkWhatsappEligibility ? (React.createElement(PaymentItem, { label: React.createElement("div", { style: { display: "flex", alignItems: "center" } },
@@ -419,13 +420,27 @@ const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData,
419
420
  width: "15px",
420
421
  } }),
421
422
  React.createElement("div", { className: "duration-mouseover font9", style: { lineHeight: "1.3" } },
422
- 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
- removeDiscountAtomValue && (React.createElement(PaymentItem, { label: "Cup\u00F3n", amount: CommonService.currency(netFare, currencySign), isNegative: true, currency: "" })),
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
+ metaData &&
425
+ isOpsite &&
426
+ metaData.opsite_whatsapp_delivery_charges &&
427
+ !loginData &&
428
+ !checkWhatsappEligibility ? (React.createElement(PaymentItem, { label: React.createElement("div", { style: { display: "flex", alignItems: "center" } },
429
+ React.createElement("div", { className: "font10" }, translation === null || translation === void 0 ? void 0 : translation.whatsappDeliveryCharges),
430
+ React.createElement("div", { className: "img-hover" },
431
+ React.createElement("img", { src: icons === null || icons === void 0 ? void 0 : icons.whatsappInfoIcon, alt: "", style: {
432
+ marginLeft: "5px",
433
+ marginBottom: "3px",
434
+ width: "15px",
435
+ } }),
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 }, isBoldText: true })) : null,
438
+ removeDiscountAtomValue && (React.createElement(PaymentItem, { label: "Cup\u00F3n", amount: CommonService.currency(netFare, currencySign), isNegative: true, currency: "", isBoldText: true })),
424
439
  React.createElement("div", { style: { margin: "6px 0" } }, renderDiscount(discountAmount)),
425
440
  (promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCodeApplied) && (React.createElement(React.Fragment, null,
426
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)
427
442
  ? promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount
428
- : 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 }),
429
444
  (promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount) ? (React.createElement("div", { className: "promocode font10 flex items-center gap-[5px]" },
430
445
  React.createElement("div", null, promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCode),
431
446
  React.createElement("span", { className: "promo-remove", onClick: onPromoRemove },
@@ -439,11 +454,11 @@ const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData,
439
454
  width: "15px",
440
455
  } }),
441
456
  React.createElement("div", { className: "duration-mouseover font9", style: { lineHeight: "1.3" } },
442
- 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 } })),
443
- 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 } })),
444
- walletMoney ? (React.createElement(PaymentItem, { label: walletLabel, amount: CommonService.currency(walletMoney, currencySign), currency: "" })) : null,
445
- 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,
446
- 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),
447
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 } },
448
463
  React.createElement("div", { className: "flex justify-between items-center w-full" },
449
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, }) => {
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" },
@@ -192,6 +192,7 @@ const PaymentSideBarMobile = ({ serviceNameOnward, serviceNameReturn, metaData,
192
192
  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),
193
193
  React.createElement("div", { style: { margin: "6px 0" } }, renderDiscount(discountAmount)),
194
194
  metaData &&
195
+ !isOpsite &&
195
196
  metaData.whatsapp_delivery_charges &&
196
197
  !loginData &&
197
198
  !checkWhatsappEligibility ? (React.createElement(PaymentItem, { label: React.createElement("div", { style: { display: "flex" } },
@@ -206,10 +207,26 @@ const PaymentSideBarMobile = ({ serviceNameOnward, serviceNameReturn, metaData,
206
207
  backgroundColor: colors === null || colors === void 0 ? void 0 : colors.whatsappDeliveryChargesBgColor,
207
208
  color: colors === null || colors === void 0 ? void 0 : colors.whatsappDeliveryChargesTextColor,
208
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,
210
+ metaData &&
211
+ isOpsite &&
212
+ metaData.opsite_whatsapp_delivery_charges &&
213
+ !loginData &&
214
+ !checkWhatsappEligibility ? (React.createElement(PaymentItem, { label: React.createElement("div", { style: { display: "flex" } },
215
+ React.createElement("div", { className: "font-[14px]" }, translation === null || translation === void 0 ? void 0 : translation.whatsappDeliveryCharges),
216
+ React.createElement("div", { className: "img-hover" },
217
+ React.createElement("img", { src: icons === null || icons === void 0 ? void 0 : icons.whatsappInfoIcon, alt: "", style: {
218
+ marginLeft: "5px",
219
+ width: "15px",
220
+ }, onClick: () => setShowWhatsappChargesInfo(!showWhatsappChargesInfo) }),
221
+ showWhatsappChargesInfo && (React.createElement("div", { className: " absolute shadow-xl z-[1] w-[250px] p-[6px_20px] text-[11px] top-[88%] left-[11%] rounded-[10px]", style: {
222
+ lineHeight: "1.3",
223
+ backgroundColor: colors === null || colors === void 0 ? void 0 : colors.whatsappDeliveryChargesBgColor,
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,
209
226
  (promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCodeApplied) && (React.createElement(React.Fragment, null,
210
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)
211
228
  ? promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount
212
- : 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 }),
213
230
  (promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCouponAmount) ? (React.createElement("div", { className: "promocode font14 flex items-center gap-[5px]" },
214
231
  React.createElement("div", null, promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCode),
215
232
  React.createElement("span", { className: "promo-remove", onClick: onPromoRemove },
@@ -220,15 +237,15 @@ const PaymentSideBarMobile = ({ serviceNameOnward, serviceNameReturn, metaData,
220
237
  React.createElement("img", { src: icons === null || icons === void 0 ? void 0 : icons.whatsappInfoIcon, alt: "", style: {
221
238
  marginLeft: "5px",
222
239
  width: "15px",
223
- } }))), 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 } })),
224
241
  conexionChecked && conexionFare && returnConexionFare ? (React.createElement(PaymentItem, { label: "Conexi\u00F3n Aeropuerto:", amount: CommonService.currency(dateReturn
225
242
  ? returnConexionFare * conexionPassengers
226
- : conexionFare, currencySign), className: "subtotal-row text-[14px]", customStyle: { color: colors === null || colors === void 0 ? void 0 : colors.seatPriceColor } })) : null,
227
- removeDiscountAtomValue && (React.createElement(PaymentItem, { label: "Cup\u00F3n", amount: CommonService.currency(netFare, currencySign), isNegative: true, customStyle: { color: "var(--secondary-color)" }, className: "text-[14px]" })),
228
- 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 } })),
229
- walletMoney ? (React.createElement(PaymentItem, { label: walletLabel, amount: CommonService.currency(walletMoney, currencySign), className: "text-[14px]", customStyle: { color: "var(--secondary-color)" }, currency: "" })) : null,
230
- 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,
231
- 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)),
232
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 } },
233
250
  React.createElement("div", { className: "flex justify-between items-center w-full text-[#fff]" },
234
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?: {
@@ -105,4 +106,5 @@ export interface PaymentSideBarProps {
105
106
  insuranceData?: any;
106
107
  isPeru?: boolean;
107
108
  serviceFeeDataStateValue?: any;
109
+ isOpsite?: boolean;
108
110
  }
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.6",
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>
@@ -335,6 +337,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
335
337
  insuranceData,
336
338
  isPeru,
337
339
  serviceFeeDataStateValue,
340
+ isOpsite,
338
341
  }) => {
339
342
  // REMOVED AM/PM DUPLICATION AND ADDED 24 HOUR TIME FORMAT IN BOARDING STAGE
340
343
  const depTime = droppingTimeOnward || "";
@@ -685,10 +688,12 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
685
688
  )}
686
689
  className="subtotal-row font10"
687
690
  customStyle={{ color: colors?.seatPriceColor }}
691
+ isBoldText={true}
688
692
  />
689
693
  ) : null}
690
694
 
691
695
  {metaData &&
696
+ !isOpsite &&
692
697
  metaData.whatsapp_delivery_charges &&
693
698
  !loginData &&
694
699
  !checkWhatsappEligibility ? (
@@ -720,6 +725,44 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
720
725
  amount={metaData.whatsapp_delivery_charges}
721
726
  className="font10"
722
727
  customStyle={{ color: colors?.whatsappDeliveryChargesColor }}
728
+ isBoldText={true}
729
+ />
730
+ ) : null}
731
+
732
+ {metaData &&
733
+ isOpsite &&
734
+ metaData.opsite_whatsapp_delivery_charges &&
735
+ !loginData &&
736
+ !checkWhatsappEligibility ? (
737
+ <PaymentItem
738
+ label={
739
+ <div style={{ display: "flex", alignItems: "center" }}>
740
+ <div className="font10">
741
+ {translation?.whatsappDeliveryCharges}
742
+ </div>
743
+ <div className="img-hover">
744
+ <img
745
+ src={icons?.whatsappInfoIcon}
746
+ alt=""
747
+ style={{
748
+ marginLeft: "5px",
749
+ marginBottom: "3px",
750
+ width: "15px",
751
+ }}
752
+ />
753
+ <div
754
+ className="duration-mouseover font9"
755
+ style={{ lineHeight: "1.3" }}
756
+ >
757
+ <span>{translation?.whatsappInfoIcon}</span>
758
+ </div>
759
+ </div>
760
+ </div>
761
+ }
762
+ amount={metaData.opsite_whatsapp_delivery_charges}
763
+ className="font10"
764
+ customStyle={{ color: colors?.whatsappDeliveryChargesColor }}
765
+ isBoldText={true}
723
766
  />
724
767
  ) : null}
725
768
 
@@ -729,6 +772,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
729
772
  amount={CommonService.currency(netFare, currencySign)}
730
773
  isNegative={true}
731
774
  currency=""
775
+ isBoldText={true}
732
776
  />
733
777
  )}
734
778
 
@@ -749,6 +793,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
749
793
  className="text-[13.33px]"
750
794
  currency={currency}
751
795
  customStyle={{ color: colors?.promoCodePriceColor }}
796
+ isBoldText={true}
752
797
  />
753
798
  {promoCode?.promoCouponAmount ? (
754
799
  <div className="promocode font10 flex items-center gap-[5px]">
@@ -795,7 +840,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
795
840
  )}
796
841
  className="font10"
797
842
  currency={currency}
798
- customStyle={{ color: colors?.whatsappDeliveryChargesColor }}
843
+ customStyle={{ color: colors?.serviceFeePriceColor }}
799
844
  />
800
845
  )}
801
846
 
@@ -808,6 +853,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
808
853
  )}
809
854
  currency=""
810
855
  customStyle={{ color: colors?.agencyFeePriceColor }}
856
+ isBoldText={true}
811
857
  />
812
858
  )}
813
859
 
@@ -816,6 +862,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
816
862
  label={walletLabel}
817
863
  amount={CommonService.currency(walletMoney, currencySign)}
818
864
  currency=""
865
+ isBoldText={true}
819
866
  />
820
867
  ) : null}
821
868
 
@@ -827,6 +874,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
827
874
  amount={CommonService.currency(virtualMoney, currencySign)}
828
875
  customStyle={{ color: "var(--secondary-color)" }}
829
876
  currency=""
877
+ isBoldText={true}
830
878
  />
831
879
  ) : null}
832
880
 
@@ -842,6 +890,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
842
890
  )}
843
891
  currency="USD"
844
892
  customStyle={{ color: "var(--secondary-color)" }}
893
+ isBoldText={true}
845
894
  />
846
895
  ) : null}
847
896
  </div>
package/src/components/PaymentSideBar/PaymentSideBarMobile.tsx CHANGED
@@ -242,6 +242,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
242
242
  isPeru,
243
243
  setShowServicefeeModal,
244
244
  serviceFeeDataStateValue,
245
+ isOpsite,
245
246
  }) => {
246
247
  return (
247
248
  <div className="pb-[15px]">
@@ -461,6 +462,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
461
462
  </div>
462
463
 
463
464
  {metaData &&
465
+ !isOpsite &&
464
466
  metaData.whatsapp_delivery_charges &&
465
467
  !loginData &&
466
468
  !checkWhatsappEligibility ? (
@@ -504,6 +506,52 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
504
506
  />
505
507
  ) : null}
506
508
 
509
+ {metaData &&
510
+ isOpsite &&
511
+ metaData.opsite_whatsapp_delivery_charges &&
512
+ !loginData &&
513
+ !checkWhatsappEligibility ? (
514
+ <PaymentItem
515
+ label={
516
+ <div style={{ display: "flex" }}>
517
+ <div className="font-[14px]">
518
+ {translation?.whatsappDeliveryCharges}
519
+ </div>
520
+ <div className="img-hover">
521
+ <img
522
+ src={icons?.whatsappInfoIcon}
523
+ alt=""
524
+ style={{
525
+ marginLeft: "5px",
526
+ width: "15px",
527
+ }}
528
+ onClick={() =>
529
+ setShowWhatsappChargesInfo(!showWhatsappChargesInfo)
530
+ }
531
+ />
532
+ {showWhatsappChargesInfo && (
533
+ <div
534
+ className=" absolute shadow-xl z-[1] w-[250px] p-[6px_20px] text-[11px] top-[88%] left-[11%] rounded-[10px]"
535
+ style={{
536
+ lineHeight: "1.3",
537
+ backgroundColor:
538
+ colors?.whatsappDeliveryChargesBgColor,
539
+ color: colors?.whatsappDeliveryChargesTextColor,
540
+ }}
541
+ >
542
+ {translation?.whatsappInfoIcon}
543
+ </div>
544
+ )}
545
+ </div>
546
+ </div>
547
+ }
548
+ amount={metaData.opsite_whatsapp_delivery_charges}
549
+ className="text-[14px]"
550
+ customStyle={{ color: colors?.whatsappDeliveryChargesColor }}
551
+ isBoldText={true}
552
+ />
553
+ ) : null}
554
+
507
555
  {promoCode?.promoCodeApplied && (
508
556
  <>
509
557
  <PaymentItem
@@ -518,6 +566,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
518
566
  showCurrency={false}
519
567
  customStyle={{ color: colors?.promoCodePriceColor }}
520
568
  currency=""
569
+ isBoldText={true}
521
570
  />
522
571
  {promoCode?.promoCouponAmount ? (
523
572
  <div className="promocode font14 flex items-center gap-[5px]">
@@ -568,7 +617,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
568
617
  )}
569
618
  className="font14"
570
619
  currency={currency}
571
- customStyle={{ color: colors?.whatsappDeliveryChargesColor }}
620
+ customStyle={{ color: colors?.serviceFeePriceColor }}
572
621
  />
573
622
  )}
574
623
 
@@ -583,6 +632,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
583
632
  )}
584
633
  className="subtotal-row text-[14px]"
585
634
  customStyle={{ color: colors?.seatPriceColor }}
635
+ isBoldText={true}
586
636
  />
587
637
  ) : null}
588
638
 
@@ -593,6 +643,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
593
643
  isNegative={true}
594
644
  customStyle={{ color: "var(--secondary-color)" }}
595
645
  className="text-[14px]"
646
+ isBoldText={true}
596
647
  />
597
648
  )}
598
649
 
@@ -605,6 +656,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
605
656
  )}
606
657
  className="text-[14px"
607
658
  customStyle={{ color: colors?.agencyFeePriceColor }}
659
+ isBoldText={true}
608
660
  />
609
661
  )}
610
662
 
@@ -615,6 +667,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
615
667
  className="text-[14px]"
616
668
  customStyle={{ color: "var(--secondary-color)" }}
617
669
  currency=""
670
+ isBoldText={true}
618
671
  />
619
672
  ) : null}
620
673
 
@@ -630,6 +683,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
630
683
  customStyle={{ color: "var(--secondary-color)" }}
631
684
  className="text-[14px]"
632
685
  currency=""
686
+ isBoldText={true}
633
687
  />
634
688
  ) : null}
635
689
 
@@ -645,6 +699,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
645
699
  currency="USD"
646
700
  customStyle={{ color: "var(--primary-color)" }}
647
701
  className="text-[14px]"
702
+ isBoldText={true}
648
703
  />
649
704
  ) : null}
650
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?: {
@@ -104,4 +105,5 @@ export interface PaymentSideBarProps {
104
105
  insuranceData?: any;
105
106
  isPeru?: boolean;
106
107
  serviceFeeDataStateValue?: any;
108
+ isOpsite?: boolean;
107
109
  }
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>