kupos-ui-components-lib 9.9.4 → 9.9.7

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 (7) hide show
  1. package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.js +10 -3
  2. package/dist/ui/FeatureServiceUI/FeatureServiceUi.js +19 -4
  3. package/dist/ui/mobileweb/DateTimeSectionMobile.js +5 -1
  4. package/dist/ui/mobileweb/SeatSectionMobile.js +7 -5
  5. package/package.json +1 -1
  6. package/src/ui/mobileweb/DateTimeSectionMobile.tsx +6 -2
  7. package/src/ui/mobileweb/SeatSectionMobile.tsx +12 -5
package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.js CHANGED
@@ -68,6 +68,7 @@ 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 canIncreaseTicketQuantity = ticketQuantity < maxSeatsPerBooking;
71
72
  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
73
  let departureRange = `Entre ${dealWindowFrom} y ${dealWindowTo}`;
73
74
  if (departures === null || departures === void 0 ? void 0 : departures.length) {
@@ -176,7 +177,9 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
176
177
  } },
177
178
  React.createElement("img", { src: op.logo, alt: op.name, onError: (e) => {
178
179
  var _a;
179
- e.currentTarget.src = ((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details) === null || _a === void 0 ? void 0 : _a[0]) || "/images/service-list/bus-icon.svg";
180
+ e.currentTarget.src =
181
+ ((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details) === null || _a === void 0 ? void 0 : _a[0]) ||
182
+ "/images/service-list/bus-icon.svg";
180
183
  }, className: `h-[24px] max-w-full object-contain ${isSoldOut ? "grayscale" : ""}` }),
181
184
  React.createElement("span", { className: "text-[12px] truncate max-w-full text-center " }, op.name),
182
185
  React.createElement("span", { className: "text-[11px] whitespace-nowrap" }, op === null || op === void 0 ? void 0 : op.seatsAvailable))))),
@@ -211,7 +214,11 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
211
214
  ? "cursor-pointer bg-[#2d374d]"
212
215
  : "cursor-not-allowed bg-[#222b3d] opacity-50"}` }, "-"),
213
216
  React.createElement("span", { className: "bold-text text-[14px] text-[white]" }, ticketQuantity),
214
- React.createElement("button", { type: "button", "aria-label": "Aumentar pasajes", onClick: () => onIncreaseTicketQuantity === null || onIncreaseTicketQuantity === void 0 ? void 0 : onIncreaseTicketQuantity(serviceItem), className: "flex h-[26px] w-[26px] cursor-pointer items-center justify-center rounded-full border-none bg-[#2d374d] text-[16px] leading-none text-[white]" }, "+"))),
217
+ React.createElement("button", { type: "button", disabled: !canIncreaseTicketQuantity, "aria-label": "Aumentar pasajes", onClick: () => onIncreaseTicketQuantity === null || onIncreaseTicketQuantity === void 0 ? void 0 : onIncreaseTicketQuantity(serviceItem), className: "flex h-[26px] w-[26px] cursor-pointer items-center justify-center rounded-full border-none bg-[#2d374d] text-[16px] leading-none text-[white]" }, "+")),
218
+ !canIncreaseTicketQuantity && (React.createElement("span", { className: "text-[10px] text-[#FF5C60]" },
219
+ "m\u00E1x. ",
220
+ maxSeatsPerBooking,
221
+ " pasajes"))),
215
222
  React.createElement("div", { className: "mt-[10px] flex justify-between items-center rounded-[14px]", style: {
216
223
  // height: "80px",
217
224
  border: "1px solid #363c48",
@@ -220,7 +227,7 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
220
227
  } },
221
228
  React.createElement("div", { className: "flex flex-col" },
222
229
  React.createElement("span", { className: "text-[18px] font-normal leading-[20px] text-[#9f9f9f] relative", style: { position: "relative" } },
223
- `$${((originalPrice * ticketQuantity)).toLocaleString()}`,
230
+ `$${(originalPrice * ticketQuantity).toLocaleString()}`,
224
231
  React.createElement("span", { style: {
225
232
  position: "absolute",
226
233
  left: "-2px",
package/dist/ui/FeatureServiceUI/FeatureServiceUi.js CHANGED
@@ -67,6 +67,7 @@ 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 canIncreaseTicketQuantity = ticketQuantity < maxSeatsPerBooking;
70
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);
71
72
  let departureRange = `Entre ${dealWindowFrom} y ${dealWindowTo}`;
72
73
  if (departures === null || departures === void 0 ? void 0 : departures.length) {
@@ -170,7 +171,13 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
170
171
  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 } }),
171
172
  React.createElement("span", { className: "text-[13px] bold-text" }, cityDestination === null || cityDestination === void 0 ? void 0 : cityDestination.label.split(",")[0]))),
172
173
  React.createElement("div", { className: "flex flex-col gap-[8px]" },
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'),
174
+ React.createElement("div", { className: "text-[12px] bold-text" }, travelDate
175
+ ? new Date(travelDate).toLocaleDateString("es-CL", {
176
+ weekday: "long",
177
+ day: "numeric",
178
+ month: "long",
179
+ })
180
+ : "Viernes 23 de mayo"),
174
181
  React.createElement("div", { className: "bold-text text-[12px] text-white" }, departureRange)),
175
182
  React.createElement("div", { className: "flex flex-col items-start gap-[10px] text-[12px] " },
176
183
  React.createElement("div", { className: "flex items-justify gap-[8px]" },
@@ -198,7 +205,9 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
198
205
  } },
199
206
  React.createElement("img", { src: op.logo, alt: op.name, onError: (e) => {
200
207
  var _a;
201
- e.currentTarget.src = ((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details) === null || _a === void 0 ? void 0 : _a[0]) || "/images/service-list/bus-icon.svg";
208
+ e.currentTarget.src =
209
+ ((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.operator_details) === null || _a === void 0 ? void 0 : _a[0]) ||
210
+ "/images/service-list/bus-icon.svg";
202
211
  }, className: `h-[24px] max-w-full object-contain ${isSoldOut ? "grayscale" : ""}` }),
203
212
  React.createElement("span", { className: "text-[11px] truncate max-w-full text-center" }, op.name),
204
213
  React.createElement("div", { className: "bg-[#FF8F45] text-white text-[12px] font-bold px-[10px] py-[4px] rounded-[4px] bold-text whitespace-nowrap" },
@@ -260,8 +269,14 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, isSoldOut, getAnimationIc
260
269
  ? "cursor-pointer bg-[#2d374d]"
261
270
  : "cursor-not-allowed bg-[#222b3d] opacity-50"}` }, "-"),
262
271
  React.createElement("span", { className: "bold-text text-[14px] text-white" }, ticketQuantity),
263
- React.createElement("button", { type: "button", "aria-label": "Aumentar pasajes", onClick: () => onIncreaseTicketQuantity === null || onIncreaseTicketQuantity === void 0 ? void 0 : onIncreaseTicketQuantity(serviceItem), className: "flex h-[26px] w-[26px] cursor-pointer items-center justify-center rounded-full border-none bg-[#2d374d] text-[16px] leading-none text-white" }, "+"))),
264
- React.createElement("button", { type: "button", onClick: onBookButtonPress, className: "flex items-center gap-[6px] px-[20px] py-[10px] rounded-[16px] text-white bold-text text-[13px] mt-[4px] justify-center border-none cursor-pointer text-center", style: {
272
+ React.createElement("button", { type: "button", "aria-label": "Aumentar pasajes", disabled: !canIncreaseTicketQuantity, onClick: () => onIncreaseTicketQuantity === null || onIncreaseTicketQuantity === void 0 ? void 0 : onIncreaseTicketQuantity(serviceItem), className: `flex h-[26px] w-[26px] items-center justify-center rounded-full border-none text-[16px] leading-none text-white ${canIncreaseTicketQuantity
273
+ ? "cursor-pointer bg-[#2d374d]"
274
+ : "cursor-not-allowed bg-[#222b3d] opacity-50"}` }, "+")),
275
+ !canIncreaseTicketQuantity && (React.createElement("span", { className: "text-[10px] text-[#FF5C60]" },
276
+ "m\u00E1x. ",
277
+ maxSeatsPerBooking,
278
+ " pasajes"))),
279
+ React.createElement("button", { type: "button", onClick: () => onBookButtonPress === null || onBookButtonPress === void 0 ? void 0 : onBookButtonPress(ticketQuantity, serviceItem), className: "flex items-center gap-[6px] px-[20px] py-[10px] rounded-[16px] text-white bold-text text-[13px] mt-[4px] justify-center border-none cursor-pointer text-center", style: {
265
280
  backgroundColor: "#FF5C60",
266
281
  whiteSpace: "nowrap",
267
282
  } },
package/dist/ui/mobileweb/DateTimeSectionMobile.js CHANGED
@@ -49,7 +49,11 @@ function DateTimeSectionMobile({ onBookButtonPress, isCiva, isSoldOut, isLinatal
49
49
  ? null
50
50
  : DateService.ampmOnly(depTime)))) : (DateService.formatTime(depTime));
51
51
  return (React.createElement("div", { className: "flex justify-between gap-[5px] w-full", onClick: onBookButtonPress },
52
- React.createElement("div", { className: "min-h-[2.5rem] flex flex-col justify-between gap-[4px] w-[50%] ", style: { justifyContent: isCiva && "center" } },
52
+ React.createElement("div", { className: `flex flex-col gap-[4px] w-[50%] ${isTrain ? "justify-center" : "justify-between"}`, style: {
53
+ justifyContent: isCiva && "center",
54
+ minHeight: isTrain ? undefined : "2.5rem",
55
+ alignSelf: isTrain ? "stretch" : undefined,
56
+ } },
53
57
  React.createElement(TimeRow, { label: orignLabel, icon: originIcon, alt: "origin", date: travelDate, timeContent: depTimeContent, isSoldOut: isSoldOut }),
54
58
  isCiva ? null : (React.createElement(TimeRow, { label: destinationLabel, icon: destinationIcon, alt: "destination", date: arrivalDate, timeContent: DateService.formatTime(arrTime), isSoldOut: isSoldOut }))),
55
59
  React.createElement("div", { style: {
package/dist/ui/mobileweb/SeatSectionMobile.js CHANGED
@@ -11,7 +11,7 @@ const EXCEPTIONS = [
11
11
  "blanco",
12
12
  "asiento_mascota",
13
13
  ];
14
- const SeatRow = ({ type, index, displayLabel, fare, isSoldOut, seatPriceColor, hasMultipleTypes, textSize, }) => {
14
+ const SeatRow = ({ type, index, displayLabel, fare, isSoldOut, seatPriceColor, hasMultipleTypes, textSize, isTrain, }) => {
15
15
  if (EXCEPTIONS.includes(type.label))
16
16
  return null;
17
17
  const rowClass = hasMultipleTypes
@@ -20,7 +20,9 @@ const SeatRow = ({ type, index, displayLabel, fare, isSoldOut, seatPriceColor, h
20
20
  const labelColor = isSoldOut ? "#bbb" : "#464647";
21
21
  const priceColor = isSoldOut ? "#bbb" : seatPriceColor;
22
22
  return (React.createElement("div", { className: rowClass, key: index },
23
- React.createElement("span", { className: `min-[420]:text-[13px] ${textSize} `, style: { color: labelColor } }, displayLabel),
23
+ React.createElement("span", { className: `min-[420]:text-[13px] ${textSize} `, style: { color: labelColor } }, isTrain
24
+ ? commonService.truncateSeatLabel(displayLabel, 8)
25
+ : displayLabel),
24
26
  React.createElement("span", { className: `min-[420]:text-[13px] ${textSize} bold-text`, style: { color: priceColor } }, fare)));
25
27
  };
26
28
  const getFilteredSeats = (item) => {
@@ -107,10 +109,10 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
107
109
  }
108
110
  if (removeDuplicateSeats) {
109
111
  const uniqueSeats = getUniqueSeats(seatTypesData, 3);
110
- return uniqueSeats.map((type, i) => (React.createElement(SeatRow, { key: i, type: type, index: i, displayLabel: commonService.truncateSeatLabel(type.label), fare: getFare(type.fare), isSoldOut: isSoldOut, seatPriceColor: seatPriceColor, hasMultipleTypes: hasMultipleTypes, textSize: "text-[11px]" })));
112
+ return uniqueSeats.map((type, i) => (React.createElement(SeatRow, { key: i, type: type, index: i, displayLabel: commonService.truncateSeatLabel(type.label), fare: getFare(type.fare), isSoldOut: isSoldOut, seatPriceColor: seatPriceColor, hasMultipleTypes: hasMultipleTypes, textSize: "text-[11px]", isTrain: isTrain })));
111
113
  }
112
114
  const filteredSeats = (_a = seatTypesData === null || seatTypesData === void 0 ? void 0 : seatTypesData.filter((item) => getFilteredSeats(item.label))) === null || _a === void 0 ? void 0 : _a.sort((a, b) => a.fare - b.fare);
113
- return (_b = (isTrain ? filteredSeats : filteredSeats === null || filteredSeats === void 0 ? void 0 : filteredSeats.slice(0, 2))) === null || _b === void 0 ? void 0 : _b.map((type, i) => (React.createElement(SeatRow, { key: i, type: type, index: i, displayLabel: type.label, fare: getFare(type.fare), isSoldOut: isSoldOut, seatPriceColor: seatPriceColor, hasMultipleTypes: hasMultipleTypes, textSize: "text-[12px]" })));
115
+ return (_b = (isTrain ? filteredSeats : filteredSeats === null || filteredSeats === void 0 ? void 0 : filteredSeats.slice(0, 2))) === null || _b === void 0 ? void 0 : _b.map((type, i) => (React.createElement(SeatRow, { key: i, type: type, index: i, displayLabel: type.label, fare: getFare(type.fare), isSoldOut: isSoldOut, seatPriceColor: seatPriceColor, hasMultipleTypes: hasMultipleTypes, textSize: "text-[12px]", isTrain: isTrain })));
114
116
  };
115
117
  const seats = removeDuplicateSeats
116
118
  ? getUniqueSeats(seatTypesData, 3)
@@ -226,7 +228,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
226
228
  color: isSoldOut ? "#bbb" : discountSeatPriceColor || "#ff5964",
227
229
  } },
228
230
  ((_g = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _g === void 0 ? void 0 : _g.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "discount", className: "h-[16px] w-[16px] object-contain", style: { opacity: isSoldOut ? 0.5 : 1 } })) : null,
229
- commonService.discountedCurrency(discountSeat.discountedPrice, currencySign))))) : (React.createElement("div", { className: "flex flex-col justify-between h-[2.5rem] ", style: {
231
+ commonService.discountedCurrency(discountSeat.discountedPrice, currencySign))))) : (React.createElement("div", { className: `flex flex-col justify-between ${isTrain ? "" : "h-[2.5rem]"} `, style: {
230
232
  gap: isSoldOut ? "0px" : "5px",
231
233
  justifyContent: hasMultipleTypes ? "space-between" : "center",
232
234
  } },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "9.9.4",
3
+ "version": "9.9.7",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/ui/mobileweb/DateTimeSectionMobile.tsx CHANGED
@@ -157,8 +157,12 @@ function DateTimeSectionMobile({
157
157
  >
158
158
  {/* DATE AND TIME */}
159
159
  <div
160
- className="min-h-[2.5rem] flex flex-col justify-between gap-[4px] w-[50%] "
161
- style={{ justifyContent: isCiva && "center" }}
160
+ className={`flex flex-col gap-[4px] w-[50%] ${isTrain ? "justify-center" : "justify-between"}`}
161
+ style={{
162
+ justifyContent: isCiva && "center",
163
+ minHeight: isTrain ? undefined : "2.5rem",
164
+ alignSelf: isTrain ? "stretch" : undefined,
165
+ }}
162
166
  >
163
167
  <TimeRow
164
168
  label={orignLabel}
package/src/ui/mobileweb/SeatSectionMobile.tsx CHANGED
@@ -43,6 +43,7 @@ interface SeatRowProps {
43
43
  seatPriceColor: string;
44
44
  hasMultipleTypes: boolean;
45
45
  textSize: string;
46
+ isTrain?: boolean;
46
47
  }
47
48
 
48
49
  const SeatRow: React.FC<SeatRowProps> = ({
@@ -54,6 +55,7 @@ const SeatRow: React.FC<SeatRowProps> = ({
54
55
  seatPriceColor,
55
56
  hasMultipleTypes,
56
57
  textSize,
58
+ isTrain,
57
59
  }) => {
58
60
  if (EXCEPTIONS.includes(type.label)) return null;
59
61
 
@@ -70,7 +72,9 @@ const SeatRow: React.FC<SeatRowProps> = ({
70
72
  className={`min-[420]:text-[13px] ${textSize} `}
71
73
  style={{ color: labelColor }}
72
74
  >
73
- {displayLabel}
75
+ {isTrain
76
+ ? commonService.truncateSeatLabel(displayLabel, 8)
77
+ : displayLabel}
74
78
  </span>
75
79
  <span
76
80
  className={`min-[420]:text-[13px] ${textSize} bold-text`}
@@ -280,6 +284,7 @@ function SeatSectionMobile({
280
284
  seatPriceColor={seatPriceColor}
281
285
  hasMultipleTypes={hasMultipleTypes}
282
286
  textSize="text-[11px]"
287
+ isTrain={isTrain}
283
288
  />
284
289
  ));
285
290
  }
@@ -288,8 +293,8 @@ function SeatSectionMobile({
288
293
  ?.filter((item) => getFilteredSeats(item.label))
289
294
  ?.sort((a, b) => a.fare - b.fare);
290
295
 
291
- return (isTrain ? filteredSeats : filteredSeats?.slice(0, 2))
292
- ?.map((type, i) => (
296
+ return (isTrain ? filteredSeats : filteredSeats?.slice(0, 2))?.map(
297
+ (type, i) => (
293
298
  <SeatRow
294
299
  key={i}
295
300
  type={type}
@@ -300,8 +305,10 @@ function SeatSectionMobile({
300
305
  seatPriceColor={seatPriceColor}
301
306
  hasMultipleTypes={hasMultipleTypes}
302
307
  textSize="text-[12px]"
308
+ isTrain={isTrain}
303
309
  />
304
- ));
310
+ ),
311
+ );
305
312
  };
306
313
 
307
314
  const seats = removeDuplicateSeats
@@ -546,7 +553,7 @@ function SeatSectionMobile({
546
553
  </div>
547
554
  ) : (
548
555
  <div
549
- className="flex flex-col justify-between h-[2.5rem] "
556
+ className={`flex flex-col justify-between ${isTrain ? "" : "h-[2.5rem]"} `}
550
557
  style={{
551
558
  gap: isSoldOut ? "0px" : "5px",
552
559
  justifyContent: hasMultipleTypes ? "space-between" : "center",