kupos-ui-components-lib 9.8.1 → 9.8.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, }: 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, }: 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, }) {
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, }) {
78
78
  var _a;
79
- const handleSeatSelect = (key, price) => {
80
- onClearSeatSelectionError === null || onClearSeatSelectionError === void 0 ? void 0 : onClearSeatSelectionError();
81
- onSeatSelect === null || onSeatSelect === void 0 ? void 0 : onSeatSelect(key, price);
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-[10px] text-center", 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,11 +224,4 @@ 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) => void;
230
- onTrainButtonClick?: any;
231
- showSeatSelectionError?: string | null;
232
- onShowSeatSelectionError?: (serviceId: string) => void;
233
- onClearSeatSelectionError?: () => void;
234
227
  }
@@ -16,10 +16,6 @@ interface SeatSectionProps {
16
16
  serviceItem?: any;
17
17
  renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
18
18
  discountSeatPriceColor?: string;
19
- isTrain?: boolean;
20
- selectedSeatKey?: any;
21
- onSeatSelect?: (key: any, price: number) => void;
22
- topLabelColor?: string;
23
19
  }
24
- 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;
25
21
  export default SeatSection;
@@ -8,7 +8,6 @@ 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
11
  }));
13
12
  seatTypesWithPrices.sort((a, b) => a.price - b.price);
14
13
  return seatTypesWithPrices;
@@ -55,7 +54,7 @@ function getUniqueSeats(seatTypes) {
55
54
  function getNumberOfSeats(seatTypes) {
56
55
  return seatTypes.filter((val) => !SEAT_EXCEPTIONS.includes(val.label)).length;
57
56
  }
58
- 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, }) {
59
58
  var _a;
60
59
  const uniqueSeats = getUniqueSeats(seatTypes);
61
60
  const sortedSeatTypes = getSortedSeatTypes(seatTypes);
@@ -66,30 +65,11 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
66
65
  : CommonService.currency(price, currencySign);
67
66
  const renderSeatNames = () => {
68
67
  const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
69
- return seats.map((val, key) => SEAT_EXCEPTIONS.includes(val.label) ? null : (React.createElement("div", { className: "flex items-center", style: isTrain ? { cursor: "pointer" } : undefined, onClick: isTrain && !isSoldOut
70
- ? () => onSeatSelect === null || onSeatSelect === void 0 ? void 0 : onSeatSelect(val.label, val.price)
71
- : undefined },
72
- isTrain && (React.createElement("div", { style: {
73
- border: `1px solid ${val.label === selectedSeatKey ? topLabelColor : "#ccc"}`,
74
- borderRadius: "50%",
75
- width: "14px",
76
- height: "14px",
77
- minWidth: "14px",
78
- marginRight: "10px",
79
- display: "flex",
80
- alignItems: "center",
81
- justifyContent: "center",
82
- } }, val.label === selectedSeatKey && (React.createElement("div", { style: {
83
- backgroundColor: topLabelColor,
84
- borderRadius: "50%",
85
- width: "7px",
86
- height: "7px",
87
- } })))),
88
- 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"
89
- ? removeDuplicateSeats && isPeru
90
- ? CommonService.truncateSeatLabel(val.label)
91
- : val.label
92
- : null))));
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)));
93
73
  };
94
74
  const renderSeatPrices = () => {
95
75
  if (isPeru) {
@@ -57,7 +57,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
57
57
  const filtered = (_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label))) === null || _a === void 0 ? void 0 : _a.filter((item) => !EXCEPTIONS.includes(item.label));
58
58
  if (!filtered || filtered.length === 0)
59
59
  return null;
60
- return filtered.reduce((min, item) => (item.fare < min ? item.fare : min), filtered[0].fare);
60
+ return filtered.reduce((min, item) => (Number(item.fare) < min ? Number(item.fare) : min), Number(filtered[0].fare));
61
61
  };
62
62
  const renderPeruSeats = () => {
63
63
  const lowestFare = getLowestFare();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "9.8.1",
3
+ "version": "9.8.3",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -116,18 +116,7 @@ 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
  }: ServiceItemProps & { currencySign?: string }): React.ReactElement {
127
- const handleSeatSelect = (key: any, price: number) => {
128
- onClearSeatSelectionError?.();
129
- onSeatSelect?.(key, price);
130
- };
131
120
  const getAnimationIcon = (icon: string) => {
132
121
  const animation = ANIMATION_MAP[icon];
133
122
  if (!animation) return null;
@@ -324,17 +313,6 @@ function ServiceItemPB({
324
313
  return;
325
314
  }
326
315
 
327
- if (isTrain) {
328
- if (!selectedSeatKey) {
329
- onShowSeatSelectionError?.(serviceItem.id);
330
- return;
331
- }
332
- if (onTrainButtonClick) {
333
- onTrainButtonClick();
334
- return;
335
- }
336
- }
337
-
338
316
  onBookButtonPress();
339
317
  };
340
318
 
@@ -547,10 +525,6 @@ function ServiceItemPB({
547
525
  isPeru={isPeru}
548
526
  renderIcon={renderIcon}
549
527
  discountSeatPriceColor={colors.discountSeatPriceColor}
550
- isTrain={isTrain}
551
- selectedSeatKey={selectedSeatKey}
552
- onSeatSelect={handleSeatSelect}
553
- topLabelColor={colors.topLabelColor}
554
528
  />
555
529
  </div>
556
530
 
@@ -566,18 +540,6 @@ function ServiceItemPB({
566
540
  soldOutIcon={renderIcon("soldOutIcon", "14px")}
567
541
  onClick={checkMidnight}
568
542
  />
569
- {showSeatSelectionError === serviceItem.id && isTrain && (
570
- <div className="flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]">
571
- <div
572
- className="text-[10px] text-center"
573
- style={{
574
- color: colors.seatPriceColor,
575
- }}
576
- >
577
- Selecciona el tipo de servicio
578
- </div>
579
- </div>
580
- )}
581
543
  {showLastSeats ? (
582
544
  <div className="flex justify-center mr-[11px] w-[100%] right-[0px] absolute left-[0] top-[40px]">
583
545
  {serviceItem?.available_seats < 10 &&
@@ -226,11 +226,5 @@ export interface ServiceItemProps {
226
226
  showLoginModal?: any
227
227
  isLoggedIn?: any
228
228
  showLoginOption?: boolean
229
- isTrain?: boolean
230
- selectedSeatKey?: any;
231
- onSeatSelect?: (key: any, price: number) => void;
232
- onTrainButtonClick?: any
233
- showSeatSelectionError?: string | null;
234
- onShowSeatSelectionError?: (serviceId: string) => void;
235
- onClearSeatSelectionError?: () => void;
229
+
236
230
  }
@@ -21,10 +21,6 @@ interface SeatSectionProps {
21
21
  serviceItem?: any;
22
22
  renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
23
23
  discountSeatPriceColor?: string;
24
- isTrain?: boolean;
25
- selectedSeatKey?: any;
26
- onSeatSelect?: (key: any, price: number) => void;
27
- topLabelColor?: string;
28
24
  }
29
25
 
30
26
  function getAllSeatTypes(seatTypes: SeatType[]) {
@@ -35,7 +31,6 @@ function getAllSeatTypes(seatTypes: SeatType[]) {
35
31
  let seatTypesWithPrices = seatTypes.filter(Boolean).map((val) => ({
36
32
  label: val?.label,
37
33
  price: val?.fare,
38
- key: val?.key,
39
34
  }));
40
35
 
41
36
  seatTypesWithPrices.sort((a, b) => a.price - b.price);
@@ -102,15 +97,11 @@ function SeatSection({
102
97
  priceColor,
103
98
  currencySign,
104
99
  removeDuplicateSeats,
105
- selectedSeatKey,
106
- onSeatSelect,
107
100
  isPeru,
108
101
  serviceItem,
109
102
  renderIcon,
110
103
  dpSeatColor,
111
104
  discountSeatPriceColor,
112
- isTrain,
113
- topLabelColor,
114
105
  }: SeatSectionProps): React.ReactElement {
115
106
  const uniqueSeats = getUniqueSeats(seatTypes);
116
107
  const sortedSeatTypes = getSortedSeatTypes(seatTypes);
@@ -127,54 +118,18 @@ function SeatSection({
127
118
 
128
119
  return seats.map((val, key: number) =>
129
120
  SEAT_EXCEPTIONS.includes(val.label) ? null : (
130
- <div
131
- className="flex items-center"
132
- style={isTrain ? { cursor: "pointer" } : undefined}
133
- onClick={
134
- isTrain && !isSoldOut
135
- ? () => onSeatSelect?.(val.label, val.price)
136
- : undefined
137
- }
121
+ <span
122
+ key={key}
123
+ className={`flex items-center justify-between text-[13.33px] ${
124
+ isSoldOut ? "text-[#c0c0c0]" : ""
125
+ }`}
138
126
  >
139
- {isTrain && (
140
- <div
141
- style={{
142
- border: `1px solid ${val.label === selectedSeatKey ? topLabelColor : "#ccc"}`,
143
- borderRadius: "50%",
144
- width: "14px",
145
- height: "14px",
146
- minWidth: "14px",
147
- marginRight: "10px",
148
- display: "flex",
149
- alignItems: "center",
150
- justifyContent: "center",
151
- }}
152
- >
153
- {val.label === selectedSeatKey && (
154
- <div
155
- style={{
156
- backgroundColor: topLabelColor,
157
- borderRadius: "50%",
158
- width: "7px",
159
- height: "7px",
160
- }}
161
- />
162
- )}
163
- </div>
164
- )}
165
- <span
166
- key={key}
167
- className={`flex items-center justify-between text-[13.33px] ${
168
- isSoldOut ? "text-[#c0c0c0]" : ""
169
- }`}
170
- >
171
- {typeof val.label === "string" || typeof val.label === "number"
172
- ? removeDuplicateSeats && isPeru
173
- ? CommonService.truncateSeatLabel(val.label)
174
- : val.label
175
- : null}
176
- </span>
177
- </div>
127
+ {typeof val.label === "string" || typeof val.label === "number"
128
+ ? removeDuplicateSeats && isPeru
129
+ ? CommonService.truncateSeatLabel(val.label)
130
+ : val.label
131
+ : null}
132
+ </span>
178
133
  ),
179
134
  );
180
135
  };
@@ -137,9 +137,10 @@ function SeatSectionMobile({
137
137
  ?.filter((item) => getFilteredSeats(item.label))
138
138
  ?.filter((item) => !EXCEPTIONS.includes(item.label));
139
139
  if (!filtered || filtered.length === 0) return null;
140
+
140
141
  return filtered.reduce(
141
- (min, item) => (item.fare < min ? item.fare : min),
142
- filtered[0].fare,
142
+ (min, item) => (Number(item.fare) < min ? Number(item.fare) : min),
143
+ Number(filtered[0].fare),
143
144
  );
144
145
  };
145
146