kupos-ui-components-lib 9.9.1 → 9.9.3

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.
@@ -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, showLoginModal, isLoggedIn, showLoginOption, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, isFlores, operatorLabel, }: 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, showLoginModal, isLoggedIn, showLoginOption, isFlores, operatorLabel, }: ServiceItemProps & {
4
4
  currencySign?: string;
5
5
  }): React.ReactElement;
6
6
  export default ServiceItemPB;
@@ -74,12 +74,8 @@ const ANIMATION_MAP = {
74
74
  kupos: femaleAnimation,
75
75
  },
76
76
  };
77
- 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, showLoginModal, isLoggedIn, showLoginOption, isTrain, selectedSeatKey, onSeatSelect, onTrainButtonClick, showSeatSelectionError, onShowSeatSelectionError, onClearSeatSelectionError, isFlores, operatorLabel, }) {
77
+ 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, showLoginModal, isLoggedIn, showLoginOption, isFlores, operatorLabel, }) {
78
78
  var _a;
79
- const handleSeatSelect = (key, price, seatKey, apiSeatType) => {
80
- onClearSeatSelectionError === null || onClearSeatSelectionError === void 0 ? void 0 : onClearSeatSelectionError();
81
- onSeatSelect === null || onSeatSelect === void 0 ? void 0 : onSeatSelect(key, price, seatKey, apiSeatType);
82
- };
83
79
  const getAnimationIcon = (icon) => {
84
80
  var _a;
85
81
  const animation = ANIMATION_MAP[icon];
@@ -217,16 +213,6 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
217
213
  });
218
214
  return;
219
215
  }
220
- if (isTrain) {
221
- if (!selectedSeatKey) {
222
- onShowSeatSelectionError === null || onShowSeatSelectionError === void 0 ? void 0 : onShowSeatSelectionError(serviceItem.id);
223
- return;
224
- }
225
- if (onTrainButtonClick) {
226
- onTrainButtonClick();
227
- return;
228
- }
229
- }
230
216
  onBookButtonPress();
231
217
  };
232
218
  const items = [
@@ -289,13 +275,9 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
289
275
  backgroundColor: "#ccc",
290
276
  } }),
291
277
  React.createElement("div", { className: "content-center" },
292
- 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, isTrain: isTrain, selectedSeatKey: selectedSeatKey, onSeatSelect: handleSeatSelect, topLabelColor: colors.topLabelColor })),
278
+ 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 })),
293
279
  React.createElement("div", { className: "relative" },
294
280
  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 }),
295
- showSeatSelectionError === serviceItem.id && isTrain && (React.createElement("div", { className: "flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]" },
296
- React.createElement("div", { className: "text-[9px] text-center whitespace-nowrap", style: {
297
- color: colors.seatPriceColor,
298
- } }, "Selecciona el tipo de servicio"))),
299
281
  showLastSeats ? (React.createElement("div", { className: "flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
300
282
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0 && (React.createElement("div", { className: "text-[12px] mt-1 text-center", style: {
301
283
  color: colors.seatPriceColor,
@@ -224,13 +224,6 @@ export interface ServiceItemProps {
224
224
  showLoginModal?: any;
225
225
  isLoggedIn?: any;
226
226
  showLoginOption?: boolean;
227
- isTrain?: boolean;
228
- selectedSeatKey?: any;
229
- onSeatSelect?: (key: any, price: number, seatKey: string, apiSeatType?: string) => void;
230
- onTrainButtonClick?: any;
231
- showSeatSelectionError?: string | null;
232
- onShowSeatSelectionError?: (serviceId: string) => void;
233
- onClearSeatSelectionError?: () => void;
234
227
  isFlores?: boolean;
235
228
  operatorLabel?: string;
236
229
  }
package/dist/styles.css CHANGED
@@ -863,9 +863,6 @@
863
863
  .text-right {
864
864
  text-align: right;
865
865
  }
866
- .text-\[9px\] {
867
- font-size: 9px;
868
- }
869
866
  .text-\[10px\] {
870
867
  font-size: 10px;
871
868
  }
@@ -11,7 +11,7 @@ function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAn
11
11
  React.createElement("span", null, renderIcon("changeTicketIcon", "16px")),
12
12
  React.createElement("span", null,
13
13
  React.createElement("span", { className: "bold-text" }, "Pasaje flexible:"),
14
- " Tu pasaje puede ser cambiado de manera online",
14
+ " Tu pasaje puede ser cambiado sin costo",
15
15
  " ",
16
16
  React.createElement("span", { className: "bold-text" },
17
17
  "hasta ",
@@ -29,14 +29,14 @@ const HARDCODED_OPERATORS = [
29
29
  },
30
30
  ];
31
31
  const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity = 1, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, selectedTimeSlot = TIME_SLOTS[0], onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData = undefined, }) => {
32
- var _a, _b, _c, _d, _e, _f;
32
+ var _a, _b, _c, _d, _e, _f, _g;
33
33
  // Use wow_deal data if available, otherwise fall back to serviceItem operators or hardcoded
34
- const operators = ((_a = wowDealData === null || wowDealData === void 0 ? void 0 : wowDealData.operators) === null || _a === void 0 ? void 0 : _a.length) > 0
35
- ? wowDealData.operators.map((op) => ({
36
- logo: op.operator_logo_url,
37
- name: op.operator_name,
38
- time: op.starting_departure,
39
- seatsAvailable: `${op.available_seats} disponibles`,
34
+ const operators = ((_a = wowDealData === null || wowDealData === void 0 ? void 0 : wowDealData.services) === null || _a === void 0 ? void 0 : _a.length) > 0
35
+ ? wowDealData.services.slice(0, 3).map((service) => ({
36
+ logo: service.operator_logo_url,
37
+ name: service.operator_name,
38
+ time: service.departure_time,
39
+ seatsAvailable: `${service.available_seats} disponibles`,
40
40
  }))
41
41
  : ((_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operators) === null || _b === void 0 ? void 0 : _b.length) > 0
42
42
  ? serviceItem.operators
@@ -68,6 +68,16 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
68
68
  isFeatureDropDownExpand === true;
69
69
  const isThisTimeDropdownOpen = isTimeDropdownOpen === serviceItem.id;
70
70
  const canDecreaseTicketQuantity = ticketQuantity > 1;
71
+ const departures = (_d = (_c = wowDealData === null || wowDealData === void 0 ? void 0 : wowDealData.services) === null || _c === void 0 ? void 0 : _c.map((s) => s.departure_time)) === null || _d === void 0 ? void 0 : _d.filter(Boolean);
72
+ let departureRange = `Entre ${dealWindowFrom} y ${dealWindowTo}`;
73
+ if (departures === null || departures === void 0 ? void 0 : departures.length) {
74
+ const sorted = [...departures].sort((a, b) => {
75
+ const [ah, am] = a.split(":").map(Number);
76
+ const [bh, bm] = b.split(":").map(Number);
77
+ return ah * 60 + am - (bh * 60 + bm);
78
+ });
79
+ departureRange = `Entre ${sorted[0]} y ${sorted[sorted.length - 1]}`;
80
+ }
71
81
  const HOW_IT_WORKS_STEPS = [
72
82
  {
73
83
  icon: "flexible",
@@ -142,41 +152,13 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
142
152
  React.createElement("div", { className: " text-[white]" },
143
153
  React.createElement("div", { className: "flex flex-col gap-[10px] relative" },
144
154
  React.createElement("div", { className: "flex items-center gap-[6px]" },
145
- React.createElement("img", { src: (_c = serviceItem.icons) === null || _c === void 0 ? void 0 : _c.whiteOrigin, alt: "origin", className: `w-[13px] h-[13px] shrink-0 ${isSoldOut ? "grayscale" : ""}` }),
155
+ React.createElement("img", { src: (_e = serviceItem.icons) === null || _e === void 0 ? void 0 : _e.whiteOrigin, alt: "origin", className: `w-[13px] h-[13px] shrink-0 ${isSoldOut ? "grayscale" : ""}` }),
146
156
  React.createElement("span", { className: "text-[14px] bold-text" }, cityOrigin === null || cityOrigin === void 0 ? void 0 : cityOrigin.label.split(",")[0]),
147
157
  React.createElement("span", { className: "mx-[6px] text-[14px] bold-text" }, "\u2192"),
148
- React.createElement("img", { src: (_d = serviceItem.icons) === null || _d === void 0 ? void 0 : _d.whiteDestination, alt: "destination", className: `w-[13px] h-[13px] shrink-0 ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
158
+ React.createElement("img", { src: (_f = serviceItem.icons) === null || _f === void 0 ? void 0 : _f.whiteDestination, alt: "destination", className: `w-[13px] h-[13px] shrink-0 ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
149
159
  React.createElement("span", { className: "text-[14px] bold-text" }, cityDestination === null || cityDestination === void 0 ? void 0 : cityDestination.label.split(",")[0])),
150
160
  React.createElement("div", { className: "flex items-center gap-[6px]" },
151
- React.createElement("div", { className: "kupos-time-dd relative", tabIndex: 0, onBlur: (e) => {
152
- if (!e.currentTarget.contains(e.relatedTarget)) {
153
- onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(null);
154
- }
155
- }, style: { outline: "none" } },
156
- React.createElement("button", { type: "button", onClick: () => onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(isThisTimeDropdownOpen ? null : serviceItem.id), className: "flex cursor-pointer select-none items-center gap-[6px] border-none bg-transparent p-0 bold-text text-[13px] text-[white]" },
157
- React.createElement("span", null, displayTimeSlot),
158
- 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: {
159
- width: "12px",
160
- height: "8px",
161
- filter: "brightness(0) invert(1)",
162
- } })),
163
- isThisTimeDropdownOpen && (React.createElement(React.Fragment, null,
164
- React.createElement("div", { className: "absolute left-0 top-[calc(100%+10px)]", style: {
165
- zIndex: 20,
166
- backgroundColor: "#fff",
167
- borderRadius: "14px",
168
- minWidth: "190px",
169
- boxShadow: "0 8px 32px rgba(0,0,0,0.28)",
170
- overflow: "hidden",
171
- padding: "6px 0",
172
- } }, TIME_SLOTS.map((slot) => {
173
- const isActive = slot === selectedTimeSlot;
174
- return (React.createElement("button", { key: slot, type: "button", onClick: () => {
175
- onTimeSlotChange === null || onTimeSlotChange === void 0 ? void 0 : onTimeSlotChange(slot);
176
- onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(null);
177
- }, className: `flex w-full cursor-pointer items-center gap-[10px] border-none px-[12px] py-[9px] text-left text-[13px] ${isActive ? "bg-[#FF5C60] font-bold text-[white]" : "bg-transparent font-normal text-[#1a1a1a]"}` },
178
- React.createElement("span", null, slot)));
179
- })))))))),
161
+ React.createElement("div", { className: "bold-text text-[12px] text-white" }, departureRange)))),
180
162
  React.createElement("div", { className: "border-t border-[#363c48] my-[8px]" }),
181
163
  React.createElement("div", null,
182
164
  React.createElement("span", { className: "block w-full text-[14px] bold-text text-[white] mb-[10px]", style: { textAlign: "center" } },
@@ -238,8 +220,7 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
238
220
  } },
239
221
  React.createElement("div", { className: "flex flex-col" },
240
222
  React.createElement("span", { className: "text-[18px] font-normal leading-[20px] text-[#9f9f9f] relative", style: { position: "relative" } },
241
- "$",
242
- originalPrice.toLocaleString(),
223
+ `$${((originalPrice * ticketQuantity)).toLocaleString()}`,
243
224
  React.createElement("span", { style: {
244
225
  position: "absolute",
245
226
  left: "-2px",
@@ -265,7 +246,7 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
265
246
  React.createElement(LottiePlayer, { animationData: serviceItem.icons.thunderAnim, width: "16px", height: "16px" }),
266
247
  React.createElement("span", { className: "whitespace-nowrap" }, "\u00A1Lo quiero!")),
267
248
  React.createElement("div", { className: "flex justify-end mt-[10px]", onClick: onToggleExpand },
268
- 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: `transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`, style: {
249
+ React.createElement("img", { src: (_g = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _g === void 0 ? void 0 : _g.downArrow, alt: "down arrow", className: `transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`, style: {
269
250
  width: "14px",
270
251
  height: "8px",
271
252
  filter: "brightness(0) invert(1)",
@@ -28,14 +28,14 @@ const HARDCODED_OPERATORS = [
28
28
  },
29
29
  ];
30
30
  const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIcon, cityOrigin, cityDestination, renderIcon, viewersConfig, isFeatureDropDownExpand, onToggleExpand, ticketQuantity = 1, onIncreaseTicketQuantity, onDecreaseTicketQuantity, onBookButtonPress, selectedTimeSlot, onTimeSlotChange, isTimeDropdownOpen, onTimeDropdownToggle, wowDealData = undefined, }) => {
31
- var _a, _b, _c, _d, _e, _f;
32
- // Use wow_deal data if available, otherwise fall back to serviceItem operators or hardcoded
33
- const operators = ((_a = wowDealData === null || wowDealData === void 0 ? void 0 : wowDealData.operators) === null || _a === void 0 ? void 0 : _a.length) > 0
34
- ? wowDealData.operators.map((op) => ({
35
- logo: op.operator_logo_url,
36
- name: op.operator_name,
37
- time: op.starting_departure,
38
- seatsAvailable: `${op.available_seats} disponibles`,
31
+ var _a, _b, _c, _d, _e, _f, _g;
32
+ // Use wow_deal services if available, otherwise fall back to serviceItem operators or hardcoded
33
+ const operators = ((_a = wowDealData === null || wowDealData === void 0 ? void 0 : wowDealData.services) === null || _a === void 0 ? void 0 : _a.length) > 0
34
+ ? wowDealData.services.slice(0, 3).map((service) => ({
35
+ logo: service.operator_logo_url,
36
+ name: service.operator_name,
37
+ time: service.departure_time,
38
+ seatsAvailable: `${service.available_seats} disponibles`,
39
39
  }))
40
40
  : ((_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operators) === null || _b === void 0 ? void 0 : _b.length) > 0
41
41
  ? serviceItem.operators
@@ -67,6 +67,16 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
67
67
  isFeatureDropDownExpand === true;
68
68
  const isThisTimeDropdownOpen = isTimeDropdownOpen === serviceItem.id;
69
69
  const canDecreaseTicketQuantity = ticketQuantity > 1;
70
+ const departures = (_d = (_c = wowDealData === null || wowDealData === void 0 ? void 0 : wowDealData.services) === null || _c === void 0 ? void 0 : _c.map((s) => s.departure_time)) === null || _d === void 0 ? void 0 : _d.filter(Boolean);
71
+ let departureRange = `Entre ${dealWindowFrom} y ${dealWindowTo}`;
72
+ if (departures === null || departures === void 0 ? void 0 : departures.length) {
73
+ const sorted = [...departures].sort((a, b) => {
74
+ const [ah, am] = a.split(":").map(Number);
75
+ const [bh, bm] = b.split(":").map(Number);
76
+ return ah * 60 + am - (bh * 60 + bm);
77
+ });
78
+ departureRange = `Entre ${sorted[0]} y ${sorted[sorted.length - 1]}`;
79
+ }
70
80
  const HOW_IT_WORKS_STEPS = [
71
81
  {
72
82
  icon: "flexible",
@@ -142,8 +152,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
142
152
  // animationData={serviceItem.icons.flexibleAnim}
143
153
  animationData: getAnimationIcon("flameAnimation"), width: "18px", height: "18px" })),
144
154
  React.createElement("span", { className: "bold-text" }, "Remate"),
145
- "\u00A0t\u00E9rmina en",
146
- " ",
155
+ "\u00A0t\u00E9rmina en \u00A0",
147
156
  React.createElement("span", { className: "bold-text text-end", ref: (node) => commonService.startCountdown(node, getCountdownSeconds()), style: {
148
157
  fontVariantNumeric: "tabular-nums",
149
158
  display: "inline-block",
@@ -155,42 +164,14 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
155
164
  React.createElement("div", { className: "flex flex-col justify-between gap-[20px] mb-[16px] pr-[22px]" },
156
165
  React.createElement("div", { className: "flex flex-col gap-[8px]" },
157
166
  React.createElement("div", { className: "flex items-center gap-[8px]" },
158
- 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" : ""}` }),
167
+ React.createElement("img", { src: (_e = serviceItem.icons) === null || _e === void 0 ? void 0 : _e.whiteOrigin, alt: "origin", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}` }),
159
168
  React.createElement("span", { className: "text-[13px] bold-text" }, cityOrigin === null || cityOrigin === void 0 ? void 0 : cityOrigin.label.split(",")[0])),
160
169
  React.createElement("div", { className: "flex items-center gap-[8px]" },
161
- 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 } }),
170
+ React.createElement("img", { src: (_f = serviceItem.icons) === null || _f === void 0 ? void 0 : _f.whiteDestination, alt: "destination", className: `w-[14px] h-[14px] shrink-0 ${isSoldOut ? "grayscale" : ""}`, style: { opacity: isSoldOut ? 0.5 : 1 } }),
162
171
  React.createElement("span", { className: "text-[13px] bold-text" }, cityDestination === null || cityDestination === void 0 ? void 0 : cityDestination.label.split(",")[0]))),
163
172
  React.createElement("div", { className: "flex flex-col gap-[8px]" },
164
173
  React.createElement("div", { className: "text-[12px] bold-text" }, travelDate ? new Date(travelDate).toLocaleDateString('es-CL', { weekday: 'long', day: 'numeric', month: 'long' }) : 'Viernes 23 de mayo'),
165
- React.createElement("div", { className: "kupos-time-dd relative", tabIndex: 0, onBlur: (e) => {
166
- if (!e.currentTarget.contains(e.relatedTarget)) {
167
- onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(null);
168
- }
169
- }, style: { outline: "none" } },
170
- 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]" },
171
- React.createElement("span", null, displayTimeSlot),
172
- 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: {
173
- width: "12px",
174
- height: "8px",
175
- filter: "brightness(0) invert(1)",
176
- } })),
177
- isThisTimeDropdownOpen && (React.createElement(React.Fragment, null,
178
- React.createElement("div", { className: "absolute left-0 top-[calc(100%+10px)]", style: {
179
- zIndex: 20,
180
- backgroundColor: "#fff",
181
- borderRadius: "14px",
182
- minWidth: "190px",
183
- boxShadow: "0 8px 32px rgba(0,0,0,0.28)",
184
- overflow: "hidden",
185
- padding: "6px 0",
186
- } }, TIME_SLOTS.map((slot) => {
187
- const isActive = slot === selectedTimeSlot;
188
- return (React.createElement("button", { key: slot, type: "button", onClick: () => {
189
- onTimeSlotChange === null || onTimeSlotChange === void 0 ? void 0 : onTimeSlotChange(slot);
190
- onTimeDropdownToggle === null || onTimeDropdownToggle === void 0 ? void 0 : onTimeDropdownToggle(null);
191
- }, className: `flex w-full cursor-pointer items-center gap-[10px] border-none px-[12px] py-[9px] text-left text-[13px] ${isActive ? "bg-[#FF5C60] font-bold text-[white]" : "bg-transparent font-normal text-[#1a1a1a]"}` },
192
- React.createElement("span", null, slot)));
193
- })))))),
174
+ React.createElement("div", { className: "bold-text text-[12px] text-white" }, departureRange)),
194
175
  React.createElement("div", { className: "flex flex-col items-start gap-[10px] text-[12px] " },
195
176
  React.createElement("div", { className: "flex items-justify gap-[8px]" },
196
177
  renderIcon("sheildIcon", "16px"),
@@ -256,8 +237,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
256
237
  savingsPercent,
257
238
  "% OFF"),
258
239
  React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative", style: { position: "relative" } },
259
- "$",
260
- originalPrice.toLocaleString(),
240
+ `$${(originalPrice * ticketQuantity).toLocaleString()}`,
261
241
  React.createElement("span", { style: {
262
242
  position: "absolute",
263
243
  left: "-2px",
@@ -292,7 +272,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
292
272
  animationData: getAnimationIcon("thunderAnimation"), width: "16px", height: "16px" }),
293
273
  React.createElement("span", { className: "whitespace-nowrap" }, "\u00A1Lo quiero!"))),
294
274
  React.createElement("div", { className: `absolute bottom-[11px] right-[18px] cursor-pointer transition-transform duration-300 ease-in-out ${isItemExpanded ? "rotate-180" : ""}`, onClick: onToggleExpand },
295
- React.createElement("img", { src: (_f = serviceItem.icons) === null || _f === void 0 ? void 0 : _f.downArrow, alt: "down arrow", style: {
275
+ React.createElement("img", { src: (_g = serviceItem.icons) === null || _g === void 0 ? void 0 : _g.downArrow, alt: "down arrow", style: {
296
276
  width: "14px",
297
277
  height: "8px",
298
278
  filter: "brightness(0) invert(1)",
@@ -3,8 +3,6 @@ interface SeatType {
3
3
  label: string;
4
4
  fare: number;
5
5
  key: any;
6
- apiSeatType?: string;
7
- api_seat_type?: string;
8
6
  }
9
7
  interface SeatSectionProps {
10
8
  seatTypes: SeatType[];
@@ -18,10 +16,6 @@ interface SeatSectionProps {
18
16
  serviceItem?: any;
19
17
  renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
20
18
  discountSeatPriceColor?: string;
21
- isTrain?: boolean;
22
- selectedSeatKey?: any;
23
- onSeatSelect?: (key: any, price: number, seatKey: string, apiSeatType?: string) => void;
24
- topLabelColor?: string;
25
19
  }
26
- declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isTrain, topLabelColor, }: SeatSectionProps): React.ReactElement;
20
+ declare function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, }: SeatSectionProps): React.ReactElement;
27
21
  export default SeatSection;
@@ -8,13 +8,11 @@ function getAllSeatTypes(seatTypes) {
8
8
  let seatTypesWithPrices = seatTypes.filter(Boolean).map((val) => ({
9
9
  label: val === null || val === void 0 ? void 0 : val.label,
10
10
  price: val === null || val === void 0 ? void 0 : val.fare,
11
- key: val === null || val === void 0 ? void 0 : val.key,
12
- apiSeatType: (val === null || val === void 0 ? void 0 : val.apiSeatType) || (val === null || val === void 0 ? void 0 : val.api_seat_type),
13
11
  }));
14
12
  seatTypesWithPrices.sort((a, b) => a.price - b.price);
15
13
  return seatTypesWithPrices;
16
14
  }
17
- function getSortedSeatTypes(seatTypes, isTrain) {
15
+ function getSortedSeatTypes(seatTypes) {
18
16
  if (!(seatTypes === null || seatTypes === void 0 ? void 0 : seatTypes.length)) {
19
17
  return [{ label: "Salon cama", price: 0 }];
20
18
  }
@@ -23,12 +21,7 @@ function getSortedSeatTypes(seatTypes, isTrain) {
23
21
  if (premiumIndex >= 3) {
24
22
  seatTypesWithPrices[2] = seatTypesWithPrices[premiumIndex];
25
23
  }
26
- if (isTrain) {
27
- seatTypesWithPrices = seatTypesWithPrices.slice(0, 4);
28
- }
29
- else {
30
- seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
31
- }
24
+ seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
32
25
  const seenPrices = new Set();
33
26
  seatTypesWithPrices = seatTypesWithPrices.filter((seat) => {
34
27
  if (seenPrices.has(seat.price))
@@ -61,10 +54,10 @@ function getUniqueSeats(seatTypes) {
61
54
  function getNumberOfSeats(seatTypes) {
62
55
  return seatTypes.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
63
56
  }
64
- function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, selectedSeatKey, onSeatSelect, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, isTrain, topLabelColor, }) {
57
+ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currencySign, removeDuplicateSeats, isPeru, serviceItem, renderIcon, dpSeatColor, discountSeatPriceColor, }) {
65
58
  var _a;
66
59
  const uniqueSeats = getUniqueSeats(seatTypes);
67
- const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
60
+ const sortedSeatTypes = getSortedSeatTypes(seatTypes);
68
61
  const numberOfSeats = getNumberOfSeats(seatTypes);
69
62
  const isCentered = numberOfSeats < 2 || removeDuplicateSeats;
70
63
  const formatPrice = (price) => availableSeats <= 0
@@ -72,36 +65,11 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
72
65
  : CommonService.currency(price, currencySign);
73
66
  const renderSeatNames = () => {
74
67
  const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
75
- return seats.map((val, key) => {
76
- return SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("div", { className: "flex items-center", style: isTrain ? { cursor: "pointer" } : undefined, onClick: isTrain && !isSoldOut
77
- ? () => val.label === selectedSeatKey
78
- ? onSeatSelect === null || onSeatSelect === void 0 ? void 0 : onSeatSelect(null, 0, "", "")
79
- : onSeatSelect === null || onSeatSelect === void 0 ? void 0 : onSeatSelect(val.label, val.price, val.key, val.apiSeatType)
80
- : undefined },
81
- isTrain && (React.createElement("div", { style: {
82
- border: `1px solid ${val.label === selectedSeatKey ? topLabelColor : "#ccc"}`,
83
- borderRadius: "50%",
84
- width: "14px",
85
- height: "14px",
86
- minWidth: "14px",
87
- marginRight: "10px",
88
- display: "flex",
89
- alignItems: "center",
90
- justifyContent: "center",
91
- } }, val.label === selectedSeatKey && (React.createElement("div", { style: {
92
- backgroundColor: topLabelColor,
93
- borderRadius: "50%",
94
- width: "7px",
95
- height: "7px",
96
- } })))),
97
- React.createElement("span", { key: key, className: `flex items-center justify-between text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` }, typeof val.label === "string" || typeof val.label === "number"
98
- ? removeDuplicateSeats && isPeru
99
- ? CommonService.truncateSeatLabel(val.label)
100
- : isTrain
101
- ? CommonService.truncateSeatLabel(val.label)
102
- : val.label
103
- : null)));
104
- });
68
+ return seats.map((val, key) => SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("span", { key: key, className: `flex items-center justify-between text-[13.33px] ${isSoldOut ? "text-[#c0c0c0]" : ""}` }, typeof val.label === "string" || typeof val.label === "number"
69
+ ? removeDuplicateSeats && isPeru
70
+ ? CommonService.truncateSeatLabel(val.label)
71
+ : val.label
72
+ : null)));
105
73
  };
106
74
  const renderSeatPrices = () => {
107
75
  if (isPeru) {
@@ -10,7 +10,7 @@ function ExpandedDropdownMobile({ serviceItem, isPeru, petSeatInfo, petFriendlyA
10
10
  React.createElement("span", { className: "mt-[3px]" }, renderIcon("changeTicketIcon", "14px")),
11
11
  React.createElement("span", null,
12
12
  React.createElement("span", { className: "bold-text" }, "Pasaje flexible:"),
13
- " Tu pasaje puede ser cambiado de manera online",
13
+ " Tu pasaje puede ser cambiado sin costo",
14
14
  " ",
15
15
  React.createElement("span", { className: "bold-text" },
16
16
  "hasta ",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "9.9.1",
3
+ "version": "9.9.3",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -116,25 +116,9 @@ function ServiceItemPB({
116
116
  showLoginModal,
117
117
  isLoggedIn,
118
118
  showLoginOption,
119
- isTrain,
120
- selectedSeatKey,
121
- onSeatSelect,
122
- onTrainButtonClick,
123
- showSeatSelectionError,
124
- onShowSeatSelectionError,
125
- onClearSeatSelectionError,
126
119
  isFlores,
127
120
  operatorLabel,
128
121
  }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
129
- const handleSeatSelect = (
130
- key: any,
131
- price: number,
132
- seatKey: string,
133
- apiSeatType?: string,
134
- ) => {
135
- onClearSeatSelectionError?.();
136
- onSeatSelect?.(key, price, seatKey, apiSeatType);
137
- };
138
122
  const getAnimationIcon = (icon: string) => {
139
123
  const animation = ANIMATION_MAP[icon];
140
124
  if (!animation) return null;
@@ -331,17 +315,6 @@ function ServiceItemPB({
331
315
  return;
332
316
  }
333
317
 
334
- if (isTrain) {
335
- if (!selectedSeatKey) {
336
- onShowSeatSelectionError?.(serviceItem.id);
337
- return;
338
- }
339
- if (onTrainButtonClick) {
340
- onTrainButtonClick();
341
- return;
342
- }
343
- }
344
-
345
318
  onBookButtonPress();
346
319
  };
347
320
 
@@ -555,10 +528,6 @@ function ServiceItemPB({
555
528
  isPeru={isPeru}
556
529
  renderIcon={renderIcon}
557
530
  discountSeatPriceColor={colors.discountSeatPriceColor}
558
- isTrain={isTrain}
559
- selectedSeatKey={selectedSeatKey}
560
- onSeatSelect={handleSeatSelect}
561
- topLabelColor={colors.topLabelColor}
562
531
  />
563
532
  </div>
564
533
 
@@ -574,18 +543,6 @@ function ServiceItemPB({
574
543
  soldOutIcon={renderIcon("soldOutIcon", "14px")}
575
544
  onClick={checkMidnight}
576
545
  />
577
- {showSeatSelectionError === serviceItem.id && isTrain && (
578
- <div className="flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]">
579
- <div
580
- className="text-[9px] text-center whitespace-nowrap"
581
- style={{
582
- color: colors.seatPriceColor,
583
- }}
584
- >
585
- Selecciona el tipo de servicio
586
- </div>
587
- </div>
588
- )}
589
546
  {showLastSeats ? (
590
547
  <div className="flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]">
591
548
  {serviceItem?.available_seats < 10 &&
@@ -226,18 +226,6 @@ export interface ServiceItemProps {
226
226
  showLoginModal?: any;
227
227
  isLoggedIn?: any;
228
228
  showLoginOption?: boolean;
229
- isTrain?: boolean;
230
- selectedSeatKey?: any;
231
- onSeatSelect?: (
232
- key: any,
233
- price: number,
234
- seatKey: string,
235
- apiSeatType?: string,
236
- ) => void;
237
- onTrainButtonClick?: any;
238
- showSeatSelectionError?: string | null;
239
- onShowSeatSelectionError?: (serviceId: string) => void;
240
- onClearSeatSelectionError?: () => void;
241
229
  isFlores?: boolean;
242
230
  operatorLabel?: string;
243
231
  }
@@ -60,7 +60,7 @@ function ExpandedDropdown({
60
60
  </span> */}
61
61
  <span>
62
62
  <span className="bold-text">Pasaje flexible:</span> Tu pasaje
63
- puede ser cambiado de manera online{" "}
63
+ puede ser cambiado sin costo{" "}
64
64
  <span className="bold-text">
65
65
  hasta {serviceItem?.change_ticket_hours || 6} horas antes
66
66
  </span>{" "}
@@ -7,8 +7,6 @@ interface SeatType {
7
7
  label: string;
8
8
  fare: number;
9
9
  key: any;
10
- apiSeatType?: string;
11
- api_seat_type?: string;
12
10
  }
13
11
 
14
12
  interface SeatSectionProps {
@@ -23,15 +21,6 @@ interface SeatSectionProps {
23
21
  serviceItem?: any;
24
22
  renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
25
23
  discountSeatPriceColor?: string;
26
- isTrain?: boolean;
27
- selectedSeatKey?: any;
28
- onSeatSelect?: (
29
- key: any,
30
- price: number,
31
- seatKey: string,
32
- apiSeatType?: string,
33
- ) => void;
34
- topLabelColor?: string;
35
24
  }
36
25
 
37
26
  function getAllSeatTypes(seatTypes: SeatType[]) {
@@ -42,8 +31,6 @@ function getAllSeatTypes(seatTypes: SeatType[]) {
42
31
  let seatTypesWithPrices = seatTypes.filter(Boolean).map((val) => ({
43
32
  label: val?.label,
44
33
  price: val?.fare,
45
- key: val?.key,
46
- apiSeatType: val?.apiSeatType || val?.api_seat_type,
47
34
  }));
48
35
 
49
36
  seatTypesWithPrices.sort((a, b) => a.price - b.price);
@@ -51,7 +38,7 @@ function getAllSeatTypes(seatTypes: SeatType[]) {
51
38
  return seatTypesWithPrices;
52
39
  }
53
40
 
54
- function getSortedSeatTypes(seatTypes: SeatType[], isTrain: any) {
41
+ function getSortedSeatTypes(seatTypes: SeatType[]) {
55
42
  if (!seatTypes?.length) {
56
43
  return [{ label: "Salon cama", price: 0 }];
57
44
  }
@@ -65,11 +52,7 @@ function getSortedSeatTypes(seatTypes: SeatType[], isTrain: any) {
65
52
  seatTypesWithPrices[2] = seatTypesWithPrices[premiumIndex];
66
53
  }
67
54
 
68
- if (isTrain) {
69
- seatTypesWithPrices = seatTypesWithPrices.slice(0, 4);
70
- } else {
71
- seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
72
- }
55
+ seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
73
56
 
74
57
  const seenPrices = new Set<number>();
75
58
  seatTypesWithPrices = seatTypesWithPrices.filter((seat) => {
@@ -114,18 +97,14 @@ function SeatSection({
114
97
  priceColor,
115
98
  currencySign,
116
99
  removeDuplicateSeats,
117
- selectedSeatKey,
118
- onSeatSelect,
119
100
  isPeru,
120
101
  serviceItem,
121
102
  renderIcon,
122
103
  dpSeatColor,
123
104
  discountSeatPriceColor,
124
- isTrain,
125
- topLabelColor,
126
105
  }: SeatSectionProps): React.ReactElement {
127
106
  const uniqueSeats = getUniqueSeats(seatTypes);
128
- const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
107
+ const sortedSeatTypes = getSortedSeatTypes(seatTypes);
129
108
  const numberOfSeats = getNumberOfSeats(seatTypes);
130
109
  const isCentered = numberOfSeats < 2 || removeDuplicateSeats;
131
110
 
@@ -137,68 +116,22 @@ function SeatSection({
137
116
  const renderSeatNames = () => {
138
117
  const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
139
118
 
140
- return seats.map((val, key: number) => {
141
- return SEAT_EXCEPTIONS.includes(val.label) ? null : (
142
- <div
143
- className="flex items-center"
144
- style={isTrain ? { cursor: "pointer" } : undefined}
145
- onClick={
146
- isTrain && !isSoldOut
147
- ? () =>
148
- val.label === selectedSeatKey
149
- ? onSeatSelect?.(null, 0, "", "")
150
- : onSeatSelect?.(
151
- val.label,
152
- val.price,
153
- val.key,
154
- (val as any).apiSeatType,
155
- )
156
- : undefined
157
- }
119
+ return seats.map((val, key: number) =>
120
+ SEAT_EXCEPTIONS.includes(val.label) ? null : (
121
+ <span
122
+ key={key}
123
+ className={`flex items-center justify-between text-[13.33px] ${
124
+ isSoldOut ? "text-[#c0c0c0]" : ""
125
+ }`}
158
126
  >
159
- {isTrain && (
160
- <div
161
- style={{
162
- border: `1px solid ${val.label === selectedSeatKey ? topLabelColor : "#ccc"}`,
163
- borderRadius: "50%",
164
- width: "14px",
165
- height: "14px",
166
- minWidth: "14px",
167
- marginRight: "10px",
168
- display: "flex",
169
- alignItems: "center",
170
- justifyContent: "center",
171
- }}
172
- >
173
- {val.label === selectedSeatKey && (
174
- <div
175
- style={{
176
- backgroundColor: topLabelColor,
177
- borderRadius: "50%",
178
- width: "7px",
179
- height: "7px",
180
- }}
181
- />
182
- )}
183
- </div>
184
- )}
185
- <span
186
- key={key}
187
- className={`flex items-center justify-between text-[13.33px] ${
188
- isSoldOut ? "text-[#c0c0c0]" : ""
189
- }`}
190
- >
191
- {typeof val.label === "string" || typeof val.label === "number"
192
- ? removeDuplicateSeats && isPeru
193
- ? CommonService.truncateSeatLabel(val.label)
194
- : isTrain
195
- ? CommonService.truncateSeatLabel(val.label)
196
- : val.label
197
- : null}
198
- </span>
199
- </div>
200
- );
201
- });
127
+ {typeof val.label === "string" || typeof val.label === "number"
128
+ ? removeDuplicateSeats && isPeru
129
+ ? CommonService.truncateSeatLabel(val.label)
130
+ : val.label
131
+ : null}
132
+ </span>
133
+ ),
134
+ );
202
135
  };
203
136
 
204
137
  const renderSeatPrices = () => {
@@ -56,7 +56,7 @@ function ExpandedDropdownMobile({
56
56
 
57
57
  <span>
58
58
  <span className="bold-text">Pasaje flexible:</span> Tu pasaje
59
- puede ser cambiado de manera online{" "}
59
+ puede ser cambiado sin costo{" "}
60
60
  <span className="bold-text">
61
61
  hasta {serviceItem?.change_ticket_hours || 6} horas antes
62
62
  </span>{" "}