kupos-ui-components-lib 10.0.0 → 10.0.2

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/PaymentSideBarDesktop.js +11 -1
  2. package/dist/components/PaymentSideBar/PaymentSideBarMobile.js +9 -2
  3. package/dist/components/PaymentSideBar/types.d.ts +2 -0
  4. package/dist/components/ServiceItem/ServiceItemDesktop.js +1 -1
  5. package/dist/styles.css +0 -11
  6. package/dist/ui/FeatureServiceUI/FeatureServiceUi.d.ts +1 -2
  7. package/dist/ui/FeatureServiceUI/FeatureServiceUi.js +13 -12
  8. package/dist/ui/SeatSection/SeatSection.js +3 -0
  9. package/dist/utils/CommonService.d.ts +1 -0
  10. package/dist/utils/CommonService.js +7 -0
  11. package/package.json +1 -1
  12. package/src/components/PaymentSideBar/PaymentSideBarDesktop.tsx +34 -0
  13. package/src/components/PaymentSideBar/PaymentSideBarMobile.tsx +41 -1
  14. package/src/components/PaymentSideBar/types.ts +2 -1
  15. package/src/components/ServiceItem/ServiceItemDesktop.tsx +0 -1
  16. package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx +18 -19
  17. package/src/ui/SeatSection/SeatSection.tsx +5 -0
  18. package/src/utils/CommonService.ts +9 -0
package/dist/components/PaymentSideBar/PaymentSideBarDesktop.js CHANGED
@@ -177,7 +177,7 @@ const renderSummaryDetailsCard = ({ serviceName, date, source, dest, boardingSta
177
177
  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, }) => {
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, }) => {
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 || "";
@@ -427,6 +427,16 @@ const PaymentSideBarDesktop = ({ serviceNameOnward, serviceNameReturn, metaData,
427
427
  React.createElement("div", null, promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCode),
428
428
  React.createElement("span", { className: "promo-remove", onClick: onPromoRemove },
429
429
  React.createElement("img", { src: icons === null || icons === void 0 ? void 0 : icons.closeIcon, alt: "close", className: "w-[16px] h-[16px]" })))) : null,
430
+ (serviceFeeDataStateValue === null || serviceFeeDataStateValue === void 0 ? void 0 : serviceFeeDataStateValue.total_convenience_fee_amount) && (React.createElement(PaymentItem, { label: React.createElement("div", { style: { display: "flex", alignItems: "center" } },
431
+ React.createElement("div", { className: "font10" }, translation === null || translation === void 0 ? void 0 : translation.serviceFeeLabel),
432
+ React.createElement("div", { className: "img-hover" },
433
+ React.createElement("img", { src: icons === null || icons === void 0 ? void 0 : icons.whatsappInfoIcon, alt: "", style: {
434
+ marginLeft: "5px",
435
+ marginBottom: "3px",
436
+ width: "15px",
437
+ } }),
438
+ React.createElement("div", { className: "duration-mouseover font9", style: { lineHeight: "1.3" } },
439
+ 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 } })),
430
440
  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 } })),
431
441
  walletMoney ? (React.createElement(PaymentItem, { label: walletLabel, amount: CommonService.currency(walletMoney, currencySign), currency: "" })) : null,
432
442
  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,
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
  : `${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, }) => {
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, }) => {
77
77
  var _a, _b, _c, _d, _e;
78
78
  return (React.createElement("div", { className: "pb-[10px]" },
79
79
  React.createElement("div", { className: "border border-[#ccc] m-[20px] rounded-[20px] relative" },
@@ -211,6 +211,13 @@ const PaymentSideBarMobile = ({ serviceNameOnward, serviceNameReturn, metaData,
211
211
  React.createElement("div", null, promoCode === null || promoCode === void 0 ? void 0 : promoCode.promoCode),
212
212
  React.createElement("span", { className: "promo-remove", onClick: onPromoRemove },
213
213
  React.createElement("img", { src: icons === null || icons === void 0 ? void 0 : icons.closeIcon, alt: "close", className: "w-[16px] h-[16px]" })))) : null,
214
+ (serviceFeeDataStateValue === null || serviceFeeDataStateValue === void 0 ? void 0 : serviceFeeDataStateValue.total_convenience_fee_amount) && (React.createElement(PaymentItem, { label: React.createElement("div", { style: { display: "flex", alignItems: "center" } },
215
+ React.createElement("div", { className: " font14 flex items-center gap-[5px]" }, translation === null || translation === void 0 ? void 0 : translation.serviceFeeLabel),
216
+ React.createElement("div", { className: "img-hover", onClick: () => setShowServicefeeModal(true) },
217
+ React.createElement("img", { src: icons === null || icons === void 0 ? void 0 : icons.whatsappInfoIcon, alt: "", style: {
218
+ marginLeft: "5px",
219
+ width: "15px",
220
+ } }))), 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 } })),
214
221
  conexionChecked && conexionFare && returnConexionFare ? (React.createElement(PaymentItem, { label: "Conexi\u00F3n Aeropuerto:", amount: CommonService.currency(dateReturn
215
222
  ? returnConexionFare * conexionPassengers
216
223
  : conexionFare, currencySign), className: "subtotal-row text-[14px]", customStyle: { color: colors === null || colors === void 0 ? void 0 : colors.seatPriceColor } })) : null,
@@ -219,7 +226,7 @@ const PaymentSideBarMobile = ({ serviceNameOnward, serviceNameReturn, metaData,
219
226
  walletMoney ? (React.createElement(PaymentItem, { label: walletLabel, amount: CommonService.currency(walletMoney, currencySign), className: "text-[14px]", customStyle: { color: "var(--secondary-color)" }, currency: "" })) : null,
220
227
  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,
221
228
  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)),
222
- React.createElement("div", { className: ` text-[#fff] p-[10px_15px] text-left w-full flex items-center absolute -bottom-[10%] pt-[50px] z-1 rounded-b-[14px] text-[14px]`, style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.bottomStripColor } },
229
+ React.createElement("div", { className: ` text-[#fff] p-[10px_15px] text-left w-full flex items-center absolute -bottom-[9%] pt-[50px] z-1 rounded-b-[14px] text-[14px]`, style: { backgroundColor: colors === null || colors === void 0 ? void 0 : colors.bottomStripColor } },
223
230
  React.createElement("div", { className: "flex justify-between items-center w-full text-[#fff]" },
224
231
  React.createElement("div", { className: "bold-text" }, "Total"),
225
232
  React.createElement("div", { className: "bold-text text-[14px] text-[#fff]", style: {
package/dist/components/PaymentSideBar/types.d.ts CHANGED
@@ -91,6 +91,7 @@ export interface PaymentSideBarProps {
91
91
  currency?: string;
92
92
  t?: (key: string) => string;
93
93
  setShowWhatsappChargesInfo?: (value: boolean) => void;
94
+ setShowServicefeeModal?: (value: boolean) => void;
94
95
  showWhatsappChargesInfo?: boolean;
95
96
  onButtonOneClick?: any;
96
97
  onHide?: any;
@@ -103,4 +104,5 @@ export interface PaymentSideBarProps {
103
104
  isTacna?: boolean;
104
105
  insuranceData?: any;
105
106
  isPeru?: boolean;
107
+ serviceFeeDataStateValue?: any;
106
108
  }
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -289,7 +289,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
289
289
  },
290
290
  ];
291
291
  const otherItems = items.filter((i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition);
292
- return (React.createElement(React.Fragment, null, isPeruSites ? (React.createElement(PeruServiceItemDesktop, { serviceItem: serviceItem, onBookButtonPress: onBookButtonPress, colors: colors, metaData: metaData, children: children, busStage: busStage, serviceDetailsLoading: serviceDetailsLoading, cityOrigin: cityOrigin, cityDestination: cityDestination, translation: translation, orignLabel: orignLabel, destinationLabel: destinationLabel, currencySign: currencySign, isCiva: isCiva, showRating: showRating, showLastSeats: showLastSeats, removeArrivalTime: removeArrivalTime, removeDuplicateSeats: removeDuplicateSeats, isPeruSites: isPeruSites, t: (key) => t(key), showAvailableSeats: showAvailableSeats, isSeatIcon: isSeatIcon, isPeru: isPeru, siteType: siteType, isAllinBus: isAllinBus, viewersConfig: viewersConfig, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, isExpand: isExpand, setIsExpand: setIsExpand, coachKey: coachKey, isFlores: isFlores, isNewUiEnabled: isNewUiEnabled, showLoginOption: showLoginOption })) : isNewUi ? (React.createElement(FeatureServiceUi, { serviceItem: serviceItem, showTopLabel: showTopLabel, isSoldOut: isSoldOut, getAnimationIcon: getAnimationIcon, cityOrigin: cityOrigin, cityDestination: cityDestination, renderIcon: renderIcon, viewersConfig: viewersConfig, isFeatureDropDownExpand: isFeatureDropDownExpand, ticketQuantity: ticketQuantity, onIncreaseTicketQuantity: onIncreaseTicketQuantity, onDecreaseTicketQuantity: onDecreaseTicketQuantity, onBookButtonPress: onRemateUiButtonClick, onToggleExpand: () => setIsFeatureDropDownExpand &&
292
+ return (React.createElement(React.Fragment, null, isPeruSites ? (React.createElement(PeruServiceItemDesktop, { serviceItem: serviceItem, onBookButtonPress: onBookButtonPress, colors: colors, metaData: metaData, children: children, busStage: busStage, serviceDetailsLoading: serviceDetailsLoading, cityOrigin: cityOrigin, cityDestination: cityDestination, translation: translation, orignLabel: orignLabel, destinationLabel: destinationLabel, currencySign: currencySign, isCiva: isCiva, showRating: showRating, showLastSeats: showLastSeats, removeArrivalTime: removeArrivalTime, removeDuplicateSeats: removeDuplicateSeats, isPeruSites: isPeruSites, t: (key) => t(key), showAvailableSeats: showAvailableSeats, isSeatIcon: isSeatIcon, isPeru: isPeru, siteType: siteType, isAllinBus: isAllinBus, viewersConfig: viewersConfig, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, isExpand: isExpand, setIsExpand: setIsExpand, coachKey: coachKey, isFlores: isFlores, isNewUiEnabled: isNewUiEnabled, showLoginOption: showLoginOption })) : isNewUi ? (React.createElement(FeatureServiceUi, { serviceItem: serviceItem, showTopLabel: showTopLabel, getAnimationIcon: getAnimationIcon, cityOrigin: cityOrigin, cityDestination: cityDestination, renderIcon: renderIcon, viewersConfig: viewersConfig, isFeatureDropDownExpand: isFeatureDropDownExpand, ticketQuantity: ticketQuantity, onIncreaseTicketQuantity: onIncreaseTicketQuantity, onDecreaseTicketQuantity: onDecreaseTicketQuantity, onBookButtonPress: onRemateUiButtonClick, onToggleExpand: () => setIsFeatureDropDownExpand &&
293
293
  setIsFeatureDropDownExpand(isFeatureDropDownExpand === serviceItem.id ||
294
294
  isFeatureDropDownExpand === true
295
295
  ? null
package/dist/styles.css CHANGED
@@ -84,9 +84,6 @@
84
84
  .-bottom-\[9\%\] {
85
85
  bottom: calc(9% * -1);
86
86
  }
87
- .-bottom-\[10\%\] {
88
- bottom: calc(10% * -1);
89
- }
90
87
  .-bottom-\[30px\] {
91
88
  bottom: calc(30px * -1);
92
89
  }
@@ -1218,18 +1215,10 @@
1218
1215
  outline-style: var(--tw-outline-style);
1219
1216
  outline-width: 1px;
1220
1217
  }
1221
- .brightness-0 {
1222
- --tw-brightness: brightness(0%);
1223
- filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
1224
- }
1225
1218
  .grayscale {
1226
1219
  --tw-grayscale: grayscale(100%);
1227
1220
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
1228
1221
  }
1229
- .invert {
1230
- --tw-invert: invert(100%);
1231
- filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
1232
- }
1233
1222
  .filter {
1234
1223
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
1235
1224
  }
package/dist/ui/FeatureServiceUI/FeatureServiceUi.d.ts CHANGED
@@ -1,8 +1,7 @@
1
1
  import React from "react";
2
- declare const FeatureServiceUi: ({ serviceItem, showTopLabel, isSoldOut, getAnimationIcon, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, }: {
2
+ declare const FeatureServiceUi: ({ serviceItem, showTopLabel, getAnimationIcon, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, }: {
3
3
  serviceItem: any;
4
4
  showTopLabel: any;
5
- isSoldOut: any;
6
5
  getAnimationIcon: any;
7
6
  cityOrigin: any;
8
7
  cityDestination: any;
package/dist/ui/FeatureServiceUI/FeatureServiceUi.js CHANGED
@@ -30,8 +30,8 @@ const HARDCODED_OPERATORS = [
30
30
  seatsAvailable: "3 disponibles",
31
31
  },
32
32
  ];
33
- const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIcon, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity = 1, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData = undefined, }) => {
34
- var _a, _b, _c, _d, _e, _f;
33
+ const FeatureServiceUi = ({ serviceItem, showTopLabel, getAnimationIcon, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity = 1, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData = undefined, }) => {
34
+ var _a, _b, _c, _d, _e, _f, _g;
35
35
  // Use wow_deal services if available, otherwise fall back to serviceItem operators or hardcoded
36
36
  const operators = ((_a = wowDealData === null || wowDealData === void 0 ? void 0 : wowDealData.services) === null || _a === void 0 ? void 0 : _a.length) > 0
37
37
  ? wowDealData.services.slice(0, 3).map((service) => ({
@@ -106,7 +106,8 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
106
106
  isFeatureDropDownExpand === true;
107
107
  const isThisTimeDropdownOpen = isTimeDropdownOpen === serviceItem.id;
108
108
  const canDecreaseTicketQuantity = ticketQuantity > 1;
109
- const canIncreaseTicketQuantity = ticketQuantity < maxSeatsPerBooking;
109
+ const availableSeats = (_c = selectedSlotService === null || selectedSlotService === void 0 ? void 0 : selectedSlotService.available_seats) !== null && _c !== void 0 ? _c : maxSeatsPerBooking;
110
+ const canIncreaseTicketQuantity = ticketQuantity < availableSeats;
110
111
  const HOW_IT_WORKS_STEPS = [
111
112
  {
112
113
  icon: "flexible",
@@ -194,10 +195,10 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
194
195
  React.createElement("div", { className: "flex flex-col justify-between gap-[20px] mb-[16px] pr-[22px]" },
195
196
  React.createElement("div", { className: "flex flex-col gap-[8px]" },
196
197
  React.createElement("div", { className: "flex items-center gap-[8px]" },
197
- React.createElement("img", { src: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.whiteOrigin, alt: "origin", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}` }),
198
+ React.createElement("img", { src: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.whiteOrigin, alt: "origin", className: `w-[14px] h-[14px] shrink-0` }),
198
199
  React.createElement("span", { className: "text-[13px] bold-text" }, cityOrigin === null || cityOrigin === void 0 ? void 0 : cityOrigin.label.split(",")[0])),
199
200
  React.createElement("div", { className: "flex items-center gap-[8px]" },
200
- React.createElement("img", { src: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.whiteDestination, alt: "destination", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
201
+ React.createElement("img", { src: (_e = serviceItem.icons) === null || _e === void 0 ? void 0 : _e.whiteDestination, alt: "destination", className: `w-[14px] h-[14px] shrink-0` }),
201
202
  React.createElement("span", { className: "text-[13px] bold-text" }, cityDestination === null || cityDestination === void 0 ? void 0 : cityDestination.label.split(",")[0]))),
202
203
  React.createElement("div", { className: "flex flex-col gap-[10px]" },
203
204
  React.createElement("div", { className: "text-[12px] bold-text" }, travelDate
@@ -214,7 +215,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
214
215
  }, style: { outline: "none" } },
215
216
  React.createElement("button", { type: "button", onClick: () => onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(isThisTimeDropdownOpen ? null : serviceItem.id), className: "flex whitespace-nowrap cursor-pointer select-none items-center gap-[6px] border-none bg-transparent p-0 bold-text text-[12px] text-[white]" },
216
217
  React.createElement("span", null, departureRange),
217
- React.createElement("img", { src: (_e = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _e === void 0 ? void 0 : _e.downArrow, alt: "down arrow", className: `kupos-time-chevron transition-transform duration-200 ${isThisTimeDropdownOpen ? "rotate-180" : "rotate-0"}`, style: {
218
+ React.createElement("img", { src: (_f = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _f === void 0 ? void 0 : _f.downArrow, alt: "down arrow", className: `kupos-time-chevron transition-transform duration-200 ${isThisTimeDropdownOpen ? "rotate-180" : "rotate-0"}`, style: {
218
219
  width: "12px",
219
220
  height: "8px",
220
221
  filter: "brightness(0) invert(1)",
@@ -291,7 +292,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
291
292
  e.currentTarget.src =
292
293
  ((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details) === null || _a === void 0 ? void 0 : _a[0]) ||
293
294
  "/images/service-list/bus-icon.svg";
294
- }, className: `h-[24px] max-w-full object-contain ${isSoldOut ? "grayscale" : ""}` }),
295
+ }, className: `h-[24px] max-w-full object-contain` }),
295
296
  React.createElement("span", { className: "text-[11px] truncate w-full text-center text-[white] overflow-hidden" }, op.name),
296
297
  React.createElement("div", { className: "bg-[#FF8F45] text-white text-[12px] font-bold px-[10px] py-[4px] rounded-[4px] bold-text whitespace-nowrap" },
297
298
  React.createElement("span", null, op === null || op === void 0 ? void 0 : op.time)),
@@ -332,7 +333,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
332
333
  displaySavingsPercent,
333
334
  "% OFF"),
334
335
  React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative", style: { position: "relative" } },
335
- `$${(displayOriginalPrice * ticketQuantity).toLocaleString()}`,
336
+ commonService.currencyRounded(displayOriginalPrice * ticketQuantity),
336
337
  React.createElement("span", { style: {
337
338
  position: "absolute",
338
339
  left: "-2px",
@@ -343,7 +344,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
343
344
  transform: "rotate(-10deg)",
344
345
  transformOrigin: "center",
345
346
  } })),
346
- React.createElement("span", { className: "text-white bold-text text-[28px] leading-none" }, `$${(displayFinalPrice * ticketQuantity).toLocaleString()}`)),
347
+ React.createElement("span", { className: "text-white bold-text text-[28px] leading-none" }, commonService.currencyRounded(displayFinalPrice * ticketQuantity))),
347
348
  React.createElement("div", { className: "mt-[4px] flex flex-col items-center gap-[8px]" },
348
349
  React.createElement("span", { className: "text-[12px] text-white" }, "\u00BFCu\u00E1ntos pasajes quieres?"),
349
350
  React.createElement("div", { className: "flex w-full items-center justify-between rounded-[16px] ", style: {
@@ -360,7 +361,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
360
361
  : "cursor-not-allowed bg-[#222b3d] opacity-50"}` }, "+")),
361
362
  !canIncreaseTicketQuantity && (React.createElement("span", { className: "text-[10px] text-[#FF5C60]" },
362
363
  "m\u00E1x. ",
363
- maxSeatsPerBooking,
364
+ availableSeats,
364
365
  " pasajes"))),
365
366
  React.createElement("button", { type: "button", ref: (btn) => {
366
367
  if (!btn)
@@ -377,7 +378,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
377
378
  normal.style.display = "none";
378
379
  if (loading)
379
380
  loading.style.display = "flex";
380
- onBookButtonPress === null || onBookButtonPress === void 0 ? void 0 : onBookButtonPress(ticketQuantity, serviceItem);
381
+ onBookButtonPress === null || onBookButtonPress === void 0 ? void 0 : onBookButtonPress(ticketQuantity, serviceItem, servicesInActiveSlot);
381
382
  };
382
383
  }, className: "flex items-center gap-[6px] px-[20px] py-[10px] rounded-[16px] text-white bold-text text-[13px] mt-[4px] justify-center border-none cursor-pointer text-center", style: {
383
384
  backgroundColor: "#FF5C60",
@@ -399,7 +400,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
399
400
  flexShrink: 0,
400
401
  } })))),
401
402
  React.createElement("div", { className: `absolute bottom-[11px] right-[18px] cursor-pointer transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`, onClick: onToggleExpand },
402
- React.createElement("img", { src: (_f = serviceItem.icons) === null || _f === void 0 ? void 0 : _f.downArrow, alt: "down arrow", style: {
403
+ React.createElement("img", { src: (_g = serviceItem.icons) === null || _g === void 0 ? void 0 : _g.downArrow, alt: "down arrow", style: {
403
404
  width: "14px",
404
405
  height: "8px",
405
406
  filter: "brightness(0) invert(1)",
package/dist/ui/SeatSection/SeatSection.js CHANGED
@@ -23,6 +23,9 @@ function getSortedSeatTypes(seatTypes, isTrain) {
23
23
  if (premiumIndex >= 3) {
24
24
  seatTypesWithPrices[2] = seatTypesWithPrices[premiumIndex];
25
25
  }
26
+ if (isTrain) {
27
+ return seatTypesWithPrices;
28
+ }
26
29
  if (!isTrain) {
27
30
  seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
28
31
  }
package/dist/utils/CommonService.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  declare const commonService: {
2
2
  currency(amount: number, currencySign?: string): string;
3
+ currencyRounded(amount: number, currencySign?: string): string;
3
4
  discountedCurrency(amount: number, currencySign?: string): string;
4
5
  copyObject: (ob: any) => any;
5
6
  getServiceTypeLabelForFilters: (service_type: any) => "Tipo de servicio" | "Punto de embarque" | "Tipo de asiento" | "SERVICIOS" | "";
package/dist/utils/CommonService.js CHANGED
@@ -6,6 +6,13 @@ const commonService = {
6
6
  const sign = currencySign || "$";
7
7
  return sign + formattedAmount;
8
8
  },
9
+ currencyRounded(amount, currencySign) {
10
+ const formattedAmount = Math.round(amount)
11
+ .toString()
12
+ .replace(/\B(?=(\d{3})+(?!\d))/g, ".");
13
+ const sign = currencySign || "$";
14
+ return sign + formattedAmount;
15
+ },
9
16
  discountedCurrency(amount, currencySign) {
10
17
  const formattedAmount = Math.trunc(amount)
11
18
  .toString()
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "10.0.0",
3
+ "version": "10.0.2",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/PaymentSideBar/PaymentSideBarDesktop.tsx CHANGED
@@ -334,6 +334,7 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
334
334
  isLinatal,
335
335
  insuranceData,
336
336
  isPeru,
337
+ serviceFeeDataStateValue,
337
338
  }) => {
338
339
  // REMOVED AM/PM DUPLICATION AND ADDED 24 HOUR TIME FORMAT IN BOARDING STAGE
339
340
  const depTime = droppingTimeOnward || "";
@@ -757,6 +758,39 @@ const PaymentSideBarDesktop: React.FC<PaymentSideBarProps> = ({
757
758
  </span>
758
759
  </div>
759
760
  ) : null}
761
+ {serviceFeeDataStateValue?.total_convenience_fee_amount && (
762
+ <PaymentItem
763
+ label={
764
+ <div style={{ display: "flex", alignItems: "center" }}>
765
+ <div className="font10">{translation?.serviceFeeLabel}</div>
766
+ <div className="img-hover">
767
+ <img
768
+ src={icons?.whatsappInfoIcon}
769
+ alt=""
770
+ style={{
771
+ marginLeft: "5px",
772
+ marginBottom: "3px",
773
+ width: "15px",
774
+ }}
775
+ />
776
+ <div
777
+ className="duration-mouseover font9"
778
+ style={{ lineHeight: "1.3" }}
779
+ >
780
+ <span>{translation?.serviceFeeHoverLabel}</span>
781
+ </div>
782
+ </div>
783
+ </div>
784
+ }
785
+ amount={CommonService.currency(
786
+ serviceFeeDataStateValue?.total_convenience_fee_amount,
787
+ currencySign,
788
+ )}
789
+ className="font10"
790
+ currency={currency}
791
+ customStyle={{ color: colors?.whatsappDeliveryChargesColor }}
792
+ />
793
+ )}
760
794
 
761
795
  {isAgency && (
762
796
  <PaymentItem
package/src/components/PaymentSideBar/PaymentSideBarMobile.tsx CHANGED
@@ -240,6 +240,8 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
240
240
  isLinatal,
241
241
  insuranceData,
242
242
  isPeru,
243
+ setShowServicefeeModal,
244
+ serviceFeeDataStateValue,
243
245
  }) => {
244
246
  return (
245
247
  <div className="pb-[10px]">
@@ -526,6 +528,44 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
526
528
  </div>
527
529
  ) : null}
528
530
 
531
+ {serviceFeeDataStateValue?.total_convenience_fee_amount && (
532
+ <PaymentItem
533
+ label={
534
+ <div style={{ display: "flex", alignItems: "center" }}>
535
+ <div className=" font14 flex items-center gap-[5px]">
536
+ {translation?.serviceFeeLabel}
537
+ </div>
538
+ <div
539
+ className="img-hover"
540
+ onClick={() => setShowServicefeeModal(true)}
541
+ >
542
+ <img
543
+ src={icons?.whatsappInfoIcon}
544
+ alt=""
545
+ style={{
546
+ marginLeft: "5px",
547
+ width: "15px",
548
+ }}
549
+ />
550
+ {/* <div
551
+ className="duration-mouseover font9"
552
+ style={{ lineHeight: "1.3" }}
553
+ >
554
+ <span>{translation?.serviceFeeHoverLabel}</span>
555
+ </div> */}
556
+ </div>
557
+ </div>
558
+ }
559
+ amount={CommonService.currency(
560
+ serviceFeeDataStateValue?.total_convenience_fee_amount,
561
+ currencySign,
562
+ )}
563
+ className="font14"
564
+ currency={currency}
565
+ customStyle={{ color: colors?.whatsappDeliveryChargesColor }}
566
+ />
567
+ )}
568
+
529
569
  {conexionChecked && conexionFare && returnConexionFare ? (
530
570
  <PaymentItem
531
571
  label="Conexión Aeropuerto:"
@@ -604,7 +644,7 @@ const PaymentSideBarMobile: React.FC<PaymentSideBarProps> = ({
604
644
  </div>
605
645
  </div>
606
646
  <div
607
- className={` text-[#fff] p-[10px_15px] text-left w-full flex items-center absolute -bottom-[10%] pt-[50px] z-1 rounded-b-[14px] text-[14px]`}
647
+ className={` text-[#fff] p-[10px_15px] text-left w-full flex items-center absolute -bottom-[9%] pt-[50px] z-1 rounded-b-[14px] text-[14px]`}
608
648
  style={{ backgroundColor: colors?.bottomStripColor }}
609
649
  >
610
650
  <div className="flex justify-between items-center w-full text-[#fff]">
package/src/components/PaymentSideBar/types.ts CHANGED
@@ -90,6 +90,7 @@ export interface PaymentSideBarProps {
90
90
  currency?: string;
91
91
  t?: (key: string) => string;
92
92
  setShowWhatsappChargesInfo?: (value: boolean) => void;
93
+ setShowServicefeeModal?: (value: boolean) => void;
93
94
  showWhatsappChargesInfo?: boolean;
94
95
  onButtonOneClick?: any;
95
96
  onHide?: any;
@@ -102,5 +103,5 @@ export interface PaymentSideBarProps {
102
103
  isTacna?: boolean;
103
104
  insuranceData?: any;
104
105
  isPeru?: boolean;
106
+ serviceFeeDataStateValue?: any;
105
107
  }
106
-
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -508,7 +508,6 @@ function ServiceItemPB({
508
508
  <FeatureServiceUi
509
509
  serviceItem={serviceItem}
510
510
  showTopLabel={showTopLabel}
511
- isSoldOut={isSoldOut}
512
511
  getAnimationIcon={getAnimationIcon}
513
512
  cityOrigin={cityOrigin}
514
513
  cityDestination={cityDestination}
package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx CHANGED
@@ -36,7 +36,6 @@ const HARDCODED_OPERATORS = [
36
36
  const FeatureServiceUi = ({
37
37
  serviceItem,
38
38
  showTopLabel,
39
- isSoldOut,
40
39
  getAnimationIcon,
41
40
  cityOrigin,
42
41
  cityDestination,
@@ -149,7 +148,9 @@ const FeatureServiceUi = ({
149
148
  isFeatureDropDownExpand === true;
150
149
  const isThisTimeDropdownOpen = isTimeDropdownOpen === serviceItem.id;
151
150
  const canDecreaseTicketQuantity = ticketQuantity > 1;
152
- const canIncreaseTicketQuantity = ticketQuantity < maxSeatsPerBooking;
151
+ const availableSeats =
152
+ selectedSlotService?.available_seats ?? maxSeatsPerBooking;
153
+ const canIncreaseTicketQuantity = ticketQuantity < availableSeats;
153
154
 
154
155
  const HOW_IT_WORKS_STEPS = [
155
156
  {
@@ -266,9 +267,7 @@ const FeatureServiceUi = ({
266
267
  <img
267
268
  src={serviceItem.icons?.whiteOrigin}
268
269
  alt="origin"
269
- className={`w-[14px] h-[14px] shrink-0 ${
270
- isSoldOut ? "grayscale" : ""
271
- }`}
270
+ className={`w-[14px] h-[14px] shrink-0`}
272
271
  />
273
272
  <span className="text-[13px] bold-text">
274
273
  {cityOrigin?.label.split(",")[0]}
@@ -278,10 +277,7 @@ const FeatureServiceUi = ({
278
277
  <img
279
278
  src={serviceItem.icons?.whiteDestination}
280
279
  alt="destination"
281
- className={`w-[14px] h-[14px] shrink-0 ${
282
- isSoldOut ? "grayscale" : ""
283
- }`}
284
- style={{ opacity: isSoldOut ? 0.5 : 1 }}
280
+ className={`w-[14px] h-[14px] shrink-0`}
285
281
  />
286
282
  <span className="text-[13px] bold-text">
287
283
  {cityDestination?.label.split(",")[0]}
@@ -480,12 +476,7 @@ const FeatureServiceUi = ({
480
476
  serviceItem?.operator_details?.[0] ||
481
477
  "/images/service-list/bus-icon.svg";
482
478
  }}
483
- className={`h-[24px] max-w-full object-contain ${
484
- isSoldOut ? "grayscale" : ""
485
- }`}
486
- // className={`h-[24px] max-w-full object-contain brightness-0 invert ${
487
- // isSoldOut ? "grayscale" : ""
488
- // }`}
479
+ className={`h-[24px] max-w-full object-contain`}
489
480
  />
490
481
  <span className="text-[11px] truncate w-full text-center text-[white] overflow-hidden">
491
482
  {op.name}
@@ -566,7 +557,9 @@ const FeatureServiceUi = ({
566
557
  className="text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative"
567
558
  style={{ position: "relative" }}
568
559
  >
569
- {`$${(displayOriginalPrice * ticketQuantity).toLocaleString()}`}
560
+ {commonService.currencyRounded(
561
+ displayOriginalPrice * ticketQuantity,
562
+ )}
570
563
  <span
571
564
  style={{
572
565
  position: "absolute",
@@ -583,7 +576,9 @@ const FeatureServiceUi = ({
583
576
  />
584
577
  </span>
585
578
  <span className="text-white bold-text text-[28px] leading-none">
586
- {`$${(displayFinalPrice * ticketQuantity).toLocaleString()}`}
579
+ {commonService.currencyRounded(
580
+ displayFinalPrice * ticketQuantity,
581
+ )}
587
582
  </span>
588
583
  </div>
589
584
 
@@ -631,7 +626,7 @@ const FeatureServiceUi = ({
631
626
  </div>
632
627
  {!canIncreaseTicketQuantity && (
633
628
  <span className="text-[10px] text-[#FF5C60]">
634
- máx. {maxSeatsPerBooking} pasajes
629
+ máx. {availableSeats} pasajes
635
630
  </span>
636
631
  )}
637
632
  </div>
@@ -653,7 +648,11 @@ const FeatureServiceUi = ({
653
648
  ) as HTMLElement | null;
654
649
  if (normal) normal.style.display = "none";
655
650
  if (loading) loading.style.display = "flex";
656
- onBookButtonPress?.(ticketQuantity, serviceItem);
651
+ onBookButtonPress?.(
652
+ ticketQuantity,
653
+ serviceItem,
654
+ servicesInActiveSlot,
655
+ );
657
656
  };
658
657
  }}
659
658
  className="flex items-center gap-[6px] px-[20px] py-[10px] rounded-[16px] text-white bold-text text-[13px] mt-[4px] justify-center border-none cursor-pointer text-center"
package/src/ui/SeatSection/SeatSection.tsx CHANGED
@@ -58,6 +58,7 @@ function getSortedSeatTypes(seatTypes: SeatType[], isTrain: any) {
58
58
  }
59
59
 
60
60
  let seatTypesWithPrices = getAllSeatTypes(seatTypes);
61
+
61
62
  const premiumIndex = seatTypesWithPrices.findIndex(
62
63
  (item) => item.label === "Premium",
63
64
  );
@@ -66,6 +67,10 @@ function getSortedSeatTypes(seatTypes: SeatType[], isTrain: any) {
66
67
  seatTypesWithPrices[2] = seatTypesWithPrices[premiumIndex];
67
68
  }
68
69
 
70
+ if (isTrain) {
71
+ return seatTypesWithPrices;
72
+ }
73
+
69
74
  if (!isTrain) {
70
75
  seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
71
76
  }
package/src/utils/CommonService.ts CHANGED
@@ -8,6 +8,15 @@ const commonService = {
8
8
  return sign + formattedAmount;
9
9
  },
10
10
 
11
+ currencyRounded(amount: number, currencySign?: string) {
12
+ const formattedAmount = Math.round(amount)
13
+ .toString()
14
+ .replace(/\B(?=(\d{3})+(?!\d))/g, ".");
15
+
16
+ const sign = currencySign || "$";
17
+ return sign + formattedAmount;
18
+ },
19
+
11
20
  discountedCurrency(amount: number, currencySign?: string) {
12
21
  const formattedAmount = Math.trunc(amount)
13
22
  .toString()