kupos-ui-components-lib 10.4.60 → 10.4.62

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 (20) hide show
  1. package/dist/components/ServiceItem/ServiceItemDesktop.d.ts +1 -1
  2. package/dist/components/ServiceItem/ServiceItemDesktop.js +2 -2
  3. package/dist/components/ServiceItem/ServiceItemMobile.d.ts +1 -1
  4. package/dist/components/ServiceItem/ServiceItemMobile.js +2 -2
  5. package/dist/components/ServiceItem/mobileTypes.d.ts +1 -0
  6. package/dist/components/ServiceItem/types.d.ts +1 -0
  7. package/dist/ui/SeatSection/SeatSection.d.ts +2 -1
  8. package/dist/ui/SeatSection/SeatSection.js +16 -3
  9. package/dist/ui/mobileweb/DateTimeSectionMobile.d.ts +2 -1
  10. package/dist/ui/mobileweb/DateTimeSectionMobile.js +2 -2
  11. package/dist/ui/mobileweb/SeatSectionMobile.d.ts +2 -1
  12. package/dist/ui/mobileweb/SeatSectionMobile.js +14 -3
  13. package/package.json +1 -1
  14. package/src/components/ServiceItem/ServiceItemDesktop.tsx +2 -0
  15. package/src/components/ServiceItem/ServiceItemMobile.tsx +2 -0
  16. package/src/components/ServiceItem/mobileTypes.ts +2 -0
  17. package/src/components/ServiceItem/types.ts +2 -0
  18. package/src/ui/SeatSection/SeatSection.tsx +34 -3
  19. package/src/ui/mobileweb/DateTimeSectionMobile.tsx +3 -0
  20. package/src/ui/mobileweb/SeatSectionMobile.tsx +21 -2
package/dist/components/ServiceItem/ServiceItemDesktop.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  import { ServiceItemProps } from "./types";
3
- declare function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel, priority_stage_ids, isShowSeatIcon, }: ServiceItemProps & {
3
+ declare function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel, priority_stage_ids, isShowSeatIcon, showDesdeLabel, }: ServiceItemProps & {
4
4
  currencySign?: string;
5
5
  }): React.ReactElement;
6
6
  export default ServiceItemPB;
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -87,7 +87,7 @@ const ANIMATION_MAP = {
87
87
  kupos: flameAnimation,
88
88
  },
89
89
  };
90
- function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t = (key) => key, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel, priority_stage_ids, isShowSeatIcon = false, }) {
90
+ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, children, busStage, serviceDetailsLoading, cityOrigin, cityDestination, translation, orignLabel, destinationLabel, currencySign, isCiva, showRating, showLastSeats, removeArrivalTime, removeDuplicateSeats, isPeruSites, showAvailableSeats, isSeatIcon, isLinatal, isPeru, t = (key) => key, siteType, isAllinBus, isExpand, setIsExpand, coachKey, viewersConfig, isNewUi, showLoginModal, isLoggedIn, showLoginOption, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, operatorLabel, priority_stage_ids, isShowSeatIcon = false, showDesdeLabel = false, }) {
91
91
  var _a, _b, _c;
92
92
  const handleSeatSelect = (key, price, seatKey, apiSeatType) => {
93
93
  onClearSeatSelectionError === null || onClearSeatSelectionError === void 0 ? void 0 : onClearSeatSelectionError();
@@ -364,7 +364,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
364
364
  backgroundColor: "#ccc",
365
365
  } }),
366
366
  React.createElement("div", { className: "content-center" },
367
- React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, dpSeatColor: colors.seatPriceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru, renderIcon: renderIcon, discountSeatPriceColor: colors.discountSeatPriceColor, isSeatIcon: isSeatIcon, isTrain: isTrain, selectedSeatKey: selectedSeatKey, onSeatSelect: handleSeatSelect, topLabelColor: colors.topLabelColor, tooltipColor: colors.tooltipColor, discountSeatCrossPriceColor: colors.discountSeatCrossPriceColor, isShowSeatIcon: isShowSeatIcon })),
367
+ React.createElement(SeatSection, { seatTypes: serviceItem.seat_types, serviceItem: serviceItem, availableSeats: serviceItem.available_seats, isSoldOut: isSoldOut, priceColor: colors.priceColor, dpSeatColor: colors.seatPriceColor, currencySign: currencySign, removeDuplicateSeats: removeDuplicateSeats, isPeru: isPeru, renderIcon: renderIcon, discountSeatPriceColor: colors.discountSeatPriceColor, isSeatIcon: isSeatIcon, isTrain: isTrain, selectedSeatKey: selectedSeatKey, onSeatSelect: handleSeatSelect, topLabelColor: colors.topLabelColor, tooltipColor: colors.tooltipColor, discountSeatCrossPriceColor: colors.discountSeatCrossPriceColor, isShowSeatIcon: isShowSeatIcon, showDesdeLabel: showDesdeLabel })),
368
368
  React.createElement("div", { className: "relative" },
369
369
  React.createElement(KuposButton, { isSoldOut: isSoldOut, isLoading: serviceDetailsLoading, buttonColor: colors.kuposButtonColor, buyLabel: translation === null || translation === void 0 ? void 0 : translation.buyButton, soldOutLabel: translation === null || translation === void 0 ? void 0 : translation.soldOutButton, soldOutIcon: renderIcon("soldOutIcon", "14px"), onClick: checkMidnight }),
370
370
  showSeatSelectionError === serviceItem.id && isTrain && (React.createElement("div", { className: "flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]" },
package/dist/components/ServiceItem/ServiceItemMobile.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from "react";
2
2
  import { MobileServiceItemProps } from "./mobileTypes";
3
- declare function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, operatorLabel, isTrain, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, isAllinBus, isPeruSite, priority_stage_ids, isShowSeatIcon, }: MobileServiceItemProps): React.ReactElement;
3
+ declare function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, operatorLabel, isTrain, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, isAllinBus, isPeruSite, priority_stage_ids, isShowSeatIcon, showDesdeLabel, }: MobileServiceItemProps): React.ReactElement;
4
4
  export default ServiceItemMobile;
package/dist/components/ServiceItem/ServiceItemMobile.js CHANGED
@@ -19,7 +19,7 @@ const exceptions = [
19
19
  "blanco",
20
20
  "asiento_mascota",
21
21
  ];
22
- function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, operatorLabel, isTrain, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, isAllinBus, isPeruSite, priority_stage_ids, isShowSeatIcon = false, }) {
22
+ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, orignLabel, destinationLabel, amenitiesData, setShowDropdown, showDropdown, isExpanded, setIsExpanded, setAmenetiesAtomValue, isCiva, currencySign, isPeru, showRating, showLastSeats, removeDuplicateSeats, isLinatal, viewersConfig, operatorLabel, isTrain, isFeatureDropDownExpand, setIsFeatureDropDownExpand, ticketQuantity, onIncreaseTicketQuantity, onDecreaseTicketQuantity, cityOrigin, cityDestination, isNewUi, onRemateUiButtonClick, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData, isFlores, isAllinBus, isPeruSite, priority_stage_ids, isShowSeatIcon = false, showDesdeLabel = false, }) {
23
23
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
24
24
  const isItemExpanded = serviceItem.id === isExpanded;
25
25
  const isPetSeat = (Object.keys(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.pet_seat_info) || []).length > 0;
@@ -154,7 +154,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
154
154
  color: isSoldOut ? "#bbb" : "text-[#464647]",
155
155
  } },
156
156
  React.createElement("span", { className: "ml-[3px] min-[420]:text-[13px] text-[12px] text-ellipsis overflow-hidden whitespace-nowrap max-w-[120px]" }, serviceItem.operator_details[2]))))) : null)),
157
- React.createElement(DateTimeSectionMobile, { onBookButtonPress: onBookButtonPress, isCiva: isCiva, isSoldOut: isSoldOut, isLinatal: isLinatal, isPeru: isPeru, orignLabel: orignLabel, destinationLabel: destinationLabel, originIcon: (_g = serviceItem.icons) === null || _g === void 0 ? void 0 : _g.origin, destinationIcon: (_h = serviceItem.icons) === null || _h === void 0 ? void 0 : _h.destination, travelDate: serviceItem.travel_date, arrivalDate: serviceItem.arrival_date, depTime: serviceItem.dep_time, arrTime: serviceItem.arr_time, seatTypes: serviceItem.seat_types, seatPriceColor: colors.seatPriceColor, tooltipBgColor: colors.tooltipBgColor, currencySign: currencySign, availableSeats: serviceItem.available_seats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, showLastSeats: showLastSeats, discountSeatPriceColor: colors.discountSeatPriceColor, isTrain: isTrain, discountSeatCrossPriceColor: colors.discountSeatCrossPriceColor, isShowSeatIcon: isShowSeatIcon }),
157
+ React.createElement(DateTimeSectionMobile, { onBookButtonPress: onBookButtonPress, isCiva: isCiva, isSoldOut: isSoldOut, isLinatal: isLinatal, isPeru: isPeru, orignLabel: orignLabel, destinationLabel: destinationLabel, originIcon: (_g = serviceItem.icons) === null || _g === void 0 ? void 0 : _g.origin, destinationIcon: (_h = serviceItem.icons) === null || _h === void 0 ? void 0 : _h.destination, travelDate: serviceItem.travel_date, arrivalDate: serviceItem.arrival_date, depTime: serviceItem.dep_time, arrTime: serviceItem.arr_time, seatTypes: serviceItem.seat_types, seatPriceColor: colors.seatPriceColor, tooltipBgColor: colors.tooltipBgColor, currencySign: currencySign, availableSeats: serviceItem.available_seats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, showLastSeats: showLastSeats, discountSeatPriceColor: colors.discountSeatPriceColor, isTrain: isTrain, discountSeatCrossPriceColor: colors.discountSeatCrossPriceColor, isShowSeatIcon: isShowSeatIcon, showDesdeLabel: showDesdeLabel }),
158
158
  hasDiscount && (React.createElement("div", { className: "flex justify-end" }, isSoldOut ? (React.createElement("span", { className: "col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]" }, "Agotado")) : null)),
159
159
  showLastSeats ? (React.createElement("div", { className: "flex justify-end " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
160
160
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[10px] text-center", style: {
package/dist/components/ServiceItem/mobileTypes.d.ts CHANGED
@@ -253,4 +253,5 @@ export interface MobileServiceItemProps {
253
253
  isPeruSite?: boolean;
254
254
  priority_stage_ids?: string[];
255
255
  isShowSeatIcon?: boolean;
256
+ showDesdeLabel?: boolean;
256
257
  }
package/dist/components/ServiceItem/types.d.ts CHANGED
@@ -274,4 +274,5 @@ export interface ServiceItemProps {
274
274
  operatorLabel?: string;
275
275
  priority_stage_ids?: string[];
276
276
  isShowSeatIcon?: boolean;
277
+ showDesdeLabel?: boolean;
277
278
  }
package/dist/ui/SeatSection/SeatSection.d.ts CHANGED
@@ -15,6 +15,7 @@ interface SeatSectionProps {
15
15
  currencySign?: string;
16
16
  removeDuplicateSeats?: boolean;
17
17
  isPeru?: boolean;
18
+ showDesdeLabel?: boolean;
18
19
  serviceItem?: any;
19
20
  renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
20
21
  discountSeatPriceColor?: string;
@@ -27,5 +28,5 @@ interface SeatSectionProps {
27
28
  discountSeatCrossPriceColor?: string;
28
29
  isShowSeatIcon?: boolean;
29
30
  }
30
- declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isSeatIcon, isTrain, topLabelColor, tooltipColor, discountSeatCrossPriceColor, isShowSeatIcon }: SeatSectionProps): React.ReactElement;
31
+ declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isSeatIcon, isTrain, topLabelColor, tooltipColor, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel, }: SeatSectionProps): React.ReactElement;
31
32
  export default SeatSection;
package/dist/ui/SeatSection/SeatSection.js CHANGED
@@ -96,7 +96,7 @@ function addSeatDegree(label) {
96
96
  return label;
97
97
  return String(label).replace(/\b(120|140|160|180)\b(?!°)/g, "$1°");
98
98
  }
99
- function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isSeatIcon, isTrain, topLabelColor, tooltipColor, discountSeatCrossPriceColor, isShowSeatIcon }) {
99
+ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isSeatIcon, isTrain, topLabelColor, tooltipColor, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel = false, }) {
100
100
  var _a;
101
101
  const uniqueSeats = getUniqueSeats(seatTypes, isTrain);
102
102
  const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
@@ -349,11 +349,20 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
349
349
  }
350
350
  }
351
351
  if (hasDiscount && discountSeat) {
352
+ const discountSeatIcon = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 && isShowSeatIcon
353
+ ? getSeatLabelIcon(discountSeat.label, serviceItem)
354
+ : null;
352
355
  return (React.createElement("div", { className: "grid grid-cols-2 items-center text-[13.33px] relative", style: { opacity: isSoldOut ? 0.5 : 1 } },
353
356
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 ? null : (React.createElement("div", { className: "col-start-1 row-start-2 flex items-center" },
354
357
  React.createElement("span", { className: "text-[13.33px] font-normal leading-[22px] text-[#ccc]" }, "Antes"))),
355
358
  React.createElement("div", { className: "col-start-1 row-start-3 flex h-[20px] items-end" },
356
- React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#464647] whitespace-nowrap" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 ? discountSeat.label : "Desde")),
359
+ React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#464647] whitespace-nowrap flex items-center" },
360
+ discountSeatIcon && (React.createElement("img", { src: discountSeatIcon, alt: "seattype", style: {
361
+ width: "20px",
362
+ height: "20px",
363
+ marginRight: "5px",
364
+ } })),
365
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 ? discountSeat.label : "Desde")),
357
366
  React.createElement("div", { className: "col-start-2 row-start-1 flex items-center justify-center absolute", style: { top: "-22px", left: "50%", transform: "translateX(-50%)" } },
358
367
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 &&
359
368
  !isPeru &&
@@ -417,6 +426,10 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
417
426
  right: 0,
418
427
  justifyContent: isCentered ? "center" : "",
419
428
  gap: "10px",
420
- } }, renderSeatPrices())));
429
+ } }, showDesdeLabel ? (
430
+ // "Desde" sits just above the price without shifting it
431
+ React.createElement("div", { className: "relative flex flex-col", style: { gap: "10px" } },
432
+ React.createElement("span", { className: "text-[12px] font-normal text-[#6a6a6a] absolute whitespace-nowrap", style: { top: "-15px" } }, "Desde"),
433
+ renderSeatPrices())) : (renderSeatPrices()))));
421
434
  }
422
435
  export default SeatSection;
package/dist/ui/mobileweb/DateTimeSectionMobile.d.ts CHANGED
@@ -25,6 +25,7 @@ interface DateTimeSectionMobileProps {
25
25
  isTrain?: boolean;
26
26
  discountSeatCrossPriceColor?: string;
27
27
  isShowSeatIcon?: boolean;
28
+ showDesdeLabel?: boolean;
28
29
  }
29
- declare function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, isShowSeatIcon, }: DateTimeSectionMobileProps): React.ReactElement;
30
+ declare function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel, }: DateTimeSectionMobileProps): React.ReactElement;
30
31
  export default DateTimeSectionMobile;
package/dist/ui/mobileweb/DateTimeSectionMobile.js CHANGED
@@ -38,7 +38,7 @@ const TimeRow = ({ label, icon, alt, date, timeContent, isSoldOut, }) => {
38
38
  React.createElement("div", null, "\u2022"),
39
39
  React.createElement("div", { className: "font-[900] relative black-text", style: { fontVariantNumeric: "tabular-nums" } }, timeContent))))));
40
40
  };
41
- function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, isShowSeatIcon, }) {
41
+ function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal, isPeru, orignLabel, destinationLabel, originIcon, destinationIcon, travelDate, arrivalDate, depTime, arrTime, seatTypes, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel, }) {
42
42
  const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
43
43
  const depTimeContent = isLinatal ? (React.createElement("div", null,
44
44
  React.createElement("span", null,
@@ -66,6 +66,6 @@ function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal
66
66
  margin: "auto 6px",
67
67
  flexShrink: 0,
68
68
  } }),
69
- React.createElement(SeatSectionMobile, { seatTypes: seatTypes, isSoldOut: isSoldOut, isPeru: isPeru, seatPriceColor: seatPriceColor, currencySign: currencySign, availableSeats: availableSeats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, tooltipBgColor: tooltipBgColor, showLastSeats: showLastSeats, discountSeatPriceColor: discountSeatPriceColor, isTrain: isTrain, discountSeatCrossPriceColor: discountSeatCrossPriceColor, isShowSeatIcon: isShowSeatIcon })));
69
+ React.createElement(SeatSectionMobile, { seatTypes: seatTypes, isSoldOut: isSoldOut, isPeru: isPeru, seatPriceColor: seatPriceColor, currencySign: currencySign, availableSeats: availableSeats, removeDuplicateSeats: removeDuplicateSeats, serviceItem: serviceItem, tooltipBgColor: tooltipBgColor, showLastSeats: showLastSeats, discountSeatPriceColor: discountSeatPriceColor, isTrain: isTrain, discountSeatCrossPriceColor: discountSeatCrossPriceColor, isShowSeatIcon: isShowSeatIcon, showDesdeLabel: showDesdeLabel })));
70
70
  }
71
71
  export default DateTimeSectionMobile;
package/dist/ui/mobileweb/SeatSectionMobile.d.ts CHANGED
@@ -20,6 +20,7 @@ interface SeatSectionMobileProps {
20
20
  isTrain?: boolean;
21
21
  discountSeatCrossPriceColor?: string;
22
22
  isShowSeatIcon?: boolean;
23
+ showDesdeLabel?: boolean;
23
24
  }
24
- declare function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, isShowSeatIcon, }: SeatSectionMobileProps): React.ReactElement;
25
+ declare function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel, }: SeatSectionMobileProps): React.ReactElement;
25
26
  export default SeatSectionMobile;
package/dist/ui/mobileweb/SeatSectionMobile.js CHANGED
@@ -63,7 +63,7 @@ const getUniqueSeats = (data, limit) => {
63
63
  .sort((a, b) => a.fare - b.fare)
64
64
  .slice(0, limit);
65
65
  };
66
- function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, isShowSeatIcon, }) {
66
+ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPriceColor, currencySign, availableSeats, removeDuplicateSeats, serviceItem, tooltipBgColor, showLastSeats, discountSeatPriceColor, isTrain, discountSeatCrossPriceColor, isShowSeatIcon, showDesdeLabel = false, }) {
67
67
  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
68
68
  const hasMultipleTypes = ((_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.length) !== null && _a !== void 0 ? _a : 0) > 2;
69
69
  const isMovilBus = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_service_name) === "MovilBus" ||
@@ -104,8 +104,19 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
104
104
  React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] absolute", style: { color: "#6a6a6a", top: -20, right: 0 } }, "Desde"),
105
105
  uniqueSeats.map((seat, key) => {
106
106
  const { originalPrice, discountedPrice } = commonService.calculateDiscountedPrice(Number(seat.fare), serviceItem);
107
+ // Picked from the full label, since truncation can cut off the angle
108
+ const rowSeatIcon = isShowSeatIcon
109
+ ? getSeatLabelIcon(seat.label, serviceItem)
110
+ : null;
107
111
  return (React.createElement("div", { key: key, className: "w-[100%] flex flex-row justify-between items-center", style: { marginTop: key > 0 ? "8px" : "0" } },
108
- React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text whitespace-nowrap", style: { color: isSoldOut ? "#bbb" : "#464647" } }, commonService.truncateSeatLabel(seat.label)),
112
+ React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text whitespace-nowrap flex items-center", style: { color: isSoldOut ? "#bbb" : "#464647" } },
113
+ rowSeatIcon && (React.createElement("img", { src: rowSeatIcon, alt: "seattype", style: {
114
+ width: "16px",
115
+ height: "16px",
116
+ marginRight: "4px",
117
+ filter: isSoldOut ? "grayscale(1)" : "",
118
+ } })),
119
+ commonService.truncateSeatLabel(seat.label)),
109
120
  React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: priceColor } }, commonService.currency(showOriginalFare ? originalPrice : discountedPrice, currencySign))));
110
121
  })));
111
122
  }
@@ -123,7 +134,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
123
134
  React.createElement("span", { className: "min-[420]:text-[13px] text-[12px]", style: { color: "#bbb" } }, "Antes"),
124
135
  React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] line-through", style: { color: "#bbb" } }, commonService.currency(originalPrice, currencySign)))),
125
136
  React.createElement("div", { className: "relative w-[100%] flex flex-row justify-between items-center" },
126
- hasInclination && !hasStrikeOff && (React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] absolute", style: { color: "#6a6a6a", top: -20, right: 0 } }, "Desde")),
137
+ (hasInclination || showDesdeLabel) && !hasStrikeOff && (React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] absolute", style: { color: "#6a6a6a", top: -20, right: 0 } }, "Desde")),
127
138
  React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text flex items-center", style: { color: isSoldOut ? "#bbb" : "#464647" } },
128
139
  seatLabelIcon && (React.createElement("img", { src: seatLabelIcon, alt: "seattype", style: {
129
140
  width: "16px",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "10.4.60",
3
+ "version": "10.4.62",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -153,6 +153,7 @@ function ServiceItemPB({
153
153
  operatorLabel,
154
154
  priority_stage_ids,
155
155
  isShowSeatIcon = false,
156
+ showDesdeLabel = false,
156
157
  }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
157
158
  const handleSeatSelect = (
158
159
  key: any,
@@ -715,6 +716,7 @@ function ServiceItemPB({
715
716
  colors.discountSeatCrossPriceColor
716
717
  }
717
718
  isShowSeatIcon={isShowSeatIcon}
719
+ showDesdeLabel={showDesdeLabel}
718
720
  />
719
721
  </div>
720
722
 
package/src/components/ServiceItem/ServiceItemMobile.tsx CHANGED
@@ -68,6 +68,7 @@ function ServiceItemMobile({
68
68
  isPeruSite,
69
69
  priority_stage_ids,
70
70
  isShowSeatIcon = false,
71
+ showDesdeLabel = false,
71
72
  }: MobileServiceItemProps): React.ReactElement {
72
73
  const isItemExpanded = serviceItem.id === isExpanded;
73
74
  const isPetSeat = (Object.keys(serviceItem?.pet_seat_info) || []).length > 0;
@@ -397,6 +398,7 @@ function ServiceItemMobile({
397
398
  isTrain={isTrain}
398
399
  discountSeatCrossPriceColor={colors.discountSeatCrossPriceColor}
399
400
  isShowSeatIcon={isShowSeatIcon}
401
+ showDesdeLabel={showDesdeLabel}
400
402
  />
401
403
 
402
404
  {hasDiscount && (
package/src/components/ServiceItem/mobileTypes.ts CHANGED
@@ -265,4 +265,6 @@ export interface MobileServiceItemProps {
265
265
  isPeruSite?: boolean;
266
266
  priority_stage_ids?: string[];
267
267
  isShowSeatIcon?: boolean;
268
+ // shows a small "Desde" label above the price in the seat section
269
+ showDesdeLabel?: boolean;
268
270
  }
package/src/components/ServiceItem/types.ts CHANGED
@@ -286,4 +286,6 @@ export interface ServiceItemProps {
286
286
  operatorLabel?: string;
287
287
  priority_stage_ids?: string[];
288
288
  isShowSeatIcon?: boolean;
289
+ // shows a small "Desde" label above the price in the seat section
290
+ showDesdeLabel?: boolean;
289
291
  }
package/src/ui/SeatSection/SeatSection.tsx CHANGED
@@ -20,6 +20,7 @@ interface SeatSectionProps {
20
20
  currencySign?: string;
21
21
  removeDuplicateSeats?: boolean;
22
22
  isPeru?: boolean;
23
+ showDesdeLabel?: boolean;
23
24
  serviceItem?: any;
24
25
  renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
25
26
  discountSeatPriceColor?: string;
@@ -162,7 +163,8 @@ function SeatSection({
162
163
  topLabelColor,
163
164
  tooltipColor,
164
165
  discountSeatCrossPriceColor,
165
- isShowSeatIcon
166
+ isShowSeatIcon,
167
+ showDesdeLabel = false,
166
168
  }: SeatSectionProps): React.ReactElement {
167
169
  const uniqueSeats = getUniqueSeats(seatTypes, isTrain);
168
170
  const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
@@ -661,6 +663,11 @@ function SeatSection({
661
663
  }
662
664
 
663
665
  if (hasDiscount && discountSeat) {
666
+ const discountSeatIcon =
667
+ serviceItem?.ui_type === 1 && isShowSeatIcon
668
+ ? getSeatLabelIcon(discountSeat.label, serviceItem)
669
+ : null;
670
+
664
671
  return (
665
672
  <div
666
673
  className="grid grid-cols-2 items-center text-[13.33px] relative"
@@ -675,7 +682,18 @@ function SeatSection({
675
682
  )}
676
683
 
677
684
  <div className="col-start-1 row-start-3 flex h-[20px] items-end">
678
- <span className="text-[13.33px] font-normal leading-[20px] text-[#464647] whitespace-nowrap">
685
+ <span className="text-[13.33px] font-normal leading-[20px] text-[#464647] whitespace-nowrap flex items-center">
686
+ {discountSeatIcon && (
687
+ <img
688
+ src={discountSeatIcon}
689
+ alt="seattype"
690
+ style={{
691
+ width: "20px",
692
+ height: "20px",
693
+ marginRight: "5px",
694
+ }}
695
+ />
696
+ )}
679
697
  {serviceItem?.ui_type === 1 ? discountSeat.label : "Desde"}
680
698
  </span>
681
699
  </div>
@@ -808,7 +826,20 @@ function SeatSection({
808
826
  gap: "10px",
809
827
  }}
810
828
  >
811
- {renderSeatPrices()}
829
+ {showDesdeLabel ? (
830
+ // "Desde" sits just above the price without shifting it
831
+ <div className="relative flex flex-col" style={{ gap: "10px" }}>
832
+ <span
833
+ className="text-[12px] font-normal text-[#6a6a6a] absolute whitespace-nowrap"
834
+ style={{ top: "-15px" }}
835
+ >
836
+ Desde
837
+ </span>
838
+ {renderSeatPrices()}
839
+ </div>
840
+ ) : (
841
+ renderSeatPrices()
842
+ )}
812
843
  </div>
813
844
  </div>
814
845
  );
package/src/ui/mobileweb/DateTimeSectionMobile.tsx CHANGED
@@ -28,6 +28,7 @@ interface DateTimeSectionMobileProps {
28
28
  isTrain?: boolean;
29
29
  discountSeatCrossPriceColor?: string;
30
30
  isShowSeatIcon?: boolean;
31
+ showDesdeLabel?: boolean;
31
32
  }
32
33
 
33
34
  const pad = (n: number) => (n < 10 ? "0" + n : String(n));
@@ -149,6 +150,7 @@ function DateTimeSectionMobile({
149
150
  isTrain,
150
151
  discountSeatCrossPriceColor,
151
152
  isShowSeatIcon,
153
+ showDesdeLabel,
152
154
  }: DateTimeSectionMobileProps): React.ReactElement {
153
155
  const { cleaned: cleanedDepTime, hasAM, hasPM } = getCleanedDepTime(depTime);
154
156
 
@@ -231,6 +233,7 @@ function DateTimeSectionMobile({
231
233
  isTrain={isTrain}
232
234
  discountSeatCrossPriceColor={discountSeatCrossPriceColor}
233
235
  isShowSeatIcon={isShowSeatIcon}
236
+ showDesdeLabel={showDesdeLabel}
234
237
  />
235
238
  </div>
236
239
  );
package/src/ui/mobileweb/SeatSectionMobile.tsx CHANGED
@@ -35,6 +35,8 @@ interface SeatSectionMobileProps {
35
35
  isTrain?: boolean;
36
36
  discountSeatCrossPriceColor?: string;
37
37
  isShowSeatIcon?: boolean;
38
+ // shows "Desde" above the price on every service, not only inclination ones
39
+ showDesdeLabel?: boolean;
38
40
  }
39
41
 
40
42
  interface SeatRowProps {
@@ -151,6 +153,7 @@ function SeatSectionMobile({
151
153
  isTrain,
152
154
  discountSeatCrossPriceColor,
153
155
  isShowSeatIcon,
156
+ showDesdeLabel = false,
154
157
  }: SeatSectionMobileProps): React.ReactElement {
155
158
  const hasMultipleTypes = (seatTypesData?.length ?? 0) > 2;
156
159
 
@@ -218,6 +221,10 @@ function SeatSectionMobile({
218
221
  Number(seat.fare),
219
222
  serviceItem,
220
223
  );
224
+ // Picked from the full label, since truncation can cut off the angle
225
+ const rowSeatIcon = isShowSeatIcon
226
+ ? getSeatLabelIcon(seat.label, serviceItem)
227
+ : null;
221
228
  return (
222
229
  <div
223
230
  key={key}
@@ -225,9 +232,21 @@ function SeatSectionMobile({
225
232
  style={{ marginTop: key > 0 ? "8px" : "0" }}
226
233
  >
227
234
  <span
228
- className="min-[420]:text-[13px] text-[12px] bold-text whitespace-nowrap"
235
+ className="min-[420]:text-[13px] text-[12px] bold-text whitespace-nowrap flex items-center"
229
236
  style={{ color: isSoldOut ? "#bbb" : "#464647" }}
230
237
  >
238
+ {rowSeatIcon && (
239
+ <img
240
+ src={rowSeatIcon}
241
+ alt="seattype"
242
+ style={{
243
+ width: "16px",
244
+ height: "16px",
245
+ marginRight: "4px",
246
+ filter: isSoldOut ? "grayscale(1)" : "",
247
+ }}
248
+ />
249
+ )}
231
250
  {commonService.truncateSeatLabel(seat.label)}
232
251
  </span>
233
252
  <span
@@ -281,7 +300,7 @@ function SeatSectionMobile({
281
300
  )}
282
301
  <div className="relative w-[100%] flex flex-row justify-between items-center">
283
302
  {/* Inclination fares sit under "Desde", same as the stacked rows above. */}
284
- {hasInclination && !hasStrikeOff && (
303
+ {(hasInclination || showDesdeLabel) && !hasStrikeOff && (
285
304
  <span
286
305
  className="min-[420]:text-[13px] text-[12px] absolute"
287
306
  style={{ color: "#6a6a6a", top: -20, right: 0 }}