kupos-ui-components-lib 10.1.1 → 10.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.js +2 -2
  2. package/dist/ui/FeatureServiceUI/FeatureServiceUi.js +9 -7
  3. package/dist/ui/SeatSection/SeatSection.js +1 -3
  4. package/dist/ui/mobileweb/SeatSectionMobile.js +2 -2
  5. package/dist/utils/DateService.d.ts +1 -1
  6. package/dist/utils/DateService.js +1 -1
  7. package/package.json +1 -1
  8. package/src/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.tsx +2 -2
  9. package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx +20 -7
  10. package/src/ui/SeatSection/SeatSection.tsx +1 -3
  11. package/src/ui/mobileweb/SeatSectionMobile.tsx +2 -2
  12. package/src/utils/DateService.ts +2 -2
package/dist/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.js CHANGED
@@ -99,7 +99,7 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
99
99
  const isThisTimeDropdownOpen = isTimeDropdownOpen === serviceItem.id;
100
100
  const canDecreaseTicketQuantity = ticketQuantity > 1;
101
101
  const availableSeats = (_c = selectedSlotService === null || selectedSlotService === void 0 ? void 0 : selectedSlotService.available_seats) !== null && _c !== void 0 ? _c : maxSeatsPerBooking;
102
- const canIncreaseTicketQuantity = ticketQuantity < availableSeats;
102
+ const canIncreaseTicketQuantity = ticketQuantity < maxSeatsPerBooking;
103
103
  const HOW_IT_WORKS_STEPS = [
104
104
  {
105
105
  icon: "flexible",
@@ -303,7 +303,7 @@ const FeatureServiceUiMobile = ({ serviceItem, showTopLabel, colors, isSoldOut,
303
303
  : "cursor-not-allowed bg-[#222b3d] opacity-50"}` }, "+")),
304
304
  !canIncreaseTicketQuantity && (React.createElement("span", { className: "text-[10px] text-[#FF5C60]" },
305
305
  "m\u00E1x. ",
306
- availableSeats,
306
+ maxSeatsPerBooking,
307
307
  " pasajes"))),
308
308
  React.createElement("div", { className: "mt-[10px] flex justify-between items-center rounded-[14px]", style: {
309
309
  // height: "80px",
package/dist/ui/FeatureServiceUI/FeatureServiceUi.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from "react";
2
2
  import LottiePlayer from "../../assets/LottiePlayer";
3
3
  import commonService from "../../utils/CommonService";
4
+ import DateService from "../../utils/DateService";
4
5
  if (typeof document !== "undefined") {
5
6
  if (!document.getElementById("feature-spin-style")) {
6
7
  const style = document.createElement("style");
@@ -107,7 +108,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, getAnimationIcon, cityOri
107
108
  const isThisTimeDropdownOpen = isTimeDropdownOpen === serviceItem.id;
108
109
  const canDecreaseTicketQuantity = ticketQuantity > 1;
109
110
  const availableSeats = (_c = selectedSlotService === null || selectedSlotService === void 0 ? void 0 : selectedSlotService.available_seats) !== null && _c !== void 0 ? _c : maxSeatsPerBooking;
110
- const canIncreaseTicketQuantity = ticketQuantity < availableSeats;
111
+ const canIncreaseTicketQuantity = ticketQuantity < maxSeatsPerBooking;
111
112
  const HOW_IT_WORKS_STEPS = [
112
113
  {
113
114
  icon: "flexible",
@@ -202,11 +203,12 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, getAnimationIcon, cityOri
202
203
  React.createElement("span", { className: "text-[13px] bold-text" }, cityDestination === null || cityDestination === void 0 ? void 0 : cityDestination.label.split(",")[0]))),
203
204
  React.createElement("div", { className: "flex flex-col gap-[10px]" },
204
205
  React.createElement("div", { className: "text-[12px] bold-text" }, travelDate
205
- ? new Date(travelDate).toLocaleDateString("es-CL", {
206
- weekday: "long",
207
- day: "numeric",
208
- month: "long",
209
- })
206
+ ? (() => {
207
+ const dayName = DateService.getDayNameFromDate(travelDate, "yyyy-mm-dd", "full");
208
+ const day = parseInt(DateService.getDateFromDate(travelDate, "yyyy-mm-dd"), 10);
209
+ const monthName = DateService.getMonthNameFromDate(travelDate, "yyyy-mm-dd", "full");
210
+ return `${dayName}, ${day} de ${monthName}`;
211
+ })()
210
212
  : "Viernes 23 de mayo"),
211
213
  React.createElement("div", { className: "kupos-time-dd relative", tabIndex: 0, onBlur: (e) => {
212
214
  if (!e.currentTarget.contains(e.relatedTarget)) {
@@ -361,7 +363,7 @@ const FeatureServiceUi = ({ serviceItem, showTopLabel, getAnimationIcon, cityOri
361
363
  : "cursor-not-allowed bg-[#222b3d] opacity-50"}` }, "+")),
362
364
  !canIncreaseTicketQuantity && (React.createElement("span", { className: "text-[10px] text-[#FF5C60]" },
363
365
  "m\u00E1x. ",
364
- availableSeats,
366
+ maxSeatsPerBooking,
365
367
  " pasajes"))),
366
368
  React.createElement("button", { type: "button", ref: (btn) => {
367
369
  if (!btn)
package/dist/ui/SeatSection/SeatSection.js CHANGED
@@ -114,9 +114,7 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
114
114
  typeof val.label === "string" || typeof val.label === "number"
115
115
  ? removeDuplicateSeats && isPeru
116
116
  ? CommonService.truncateSeatLabel(val.label)
117
- : isTrain
118
- ? CommonService.capitalize(String(val.label))
119
- : val.label
117
+ : CommonService.capitalize(String(val.label))
120
118
  : null)));
121
119
  });
122
120
  };
package/dist/ui/mobileweb/SeatSectionMobile.js CHANGED
@@ -22,7 +22,7 @@ const SeatRow = ({ type, index, displayLabel, fare, isSoldOut, seatPriceColor, h
22
22
  return (React.createElement("div", { className: rowClass, key: index },
23
23
  React.createElement("span", { className: `min-[420]:text-[13px] ${textSize} `, style: { color: labelColor } }, isTrain
24
24
  ? commonService.truncateSeatLabel(commonService.capitalize(displayLabel), 8)
25
- : displayLabel),
25
+ : commonService.capitalize(displayLabel)),
26
26
  React.createElement("span", { className: `min-[420]:text-[13px] ${textSize} bold-text`, style: { color: priceColor } }, fare)));
27
27
  };
28
28
  const getFilteredSeats = (item) => {
@@ -89,7 +89,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
89
89
  React.createElement("span", { className: "min-[420]:text-[13px] text-[12px]", style: { color: "#bbb" } }, "Antes"),
90
90
  React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] line-through", style: { color: "#bbb" } }, commonService.currency(originalPrice, currencySign)))),
91
91
  React.createElement("div", { className: "w-[100%] flex flex-row justify-between items-center" },
92
- React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: isSoldOut ? "#bbb" : "#464647" } }, (originalPrice !== discountedPrice) ? "Desde" : seatLabel || "Desde"),
92
+ React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: isSoldOut ? "#bbb" : "#464647" } }, originalPrice !== discountedPrice ? "Desde" : seatLabel || "Desde"),
93
93
  React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] bold-text", style: { color: priceColor } }, commonService.currency(discountedPrice, currencySign)))));
94
94
  };
95
95
  const renderDpSeats = () => {
package/dist/utils/DateService.d.ts CHANGED
@@ -5,7 +5,7 @@ declare const DateService: {
5
5
  ampm: (time: any) => string;
6
6
  getMonthName: (month: number, type?: string) => string;
7
7
  getDayNameFromDate: (date: string, format?: string, type?: string) => string;
8
- getDateFromDate: (date: any, format?: string) => string | number;
8
+ getDateFromDate: (date: string, format?: string) => string;
9
9
  getMonthFromDate: (dateStr: string, format?: string) => string;
10
10
  getMonthNameFromDate: (dateStr: string, format?: string, type?: string) => string;
11
11
  getYearFromDate: (dateStr: string, format?: string) => string;
package/dist/utils/DateService.js CHANGED
@@ -99,7 +99,7 @@ const DateService = {
99
99
  let doo = new Date(Date.parse(d + datePostfix));
100
100
  let dt = new Date(doo.getTime() + Math.abs(doo.getTimezoneOffset() * 60000));
101
101
  let day = dt.getDate();
102
- return day > 9 ? day : "0" + day;
102
+ return day > 9 ? day.toString() : "0" + day;
103
103
  },
104
104
  getMonthFromDate: (dateStr, format = "yyyy-mm-dd") => {
105
105
  let d = DateService.changeDateFormat(dateStr, format, "yyyy-mm-dd");
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "10.1.1",
3
+ "version": "10.1.2",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/ui/FeaturServiceUiMobile/FeatureServiceUiMobile.tsx CHANGED
@@ -143,7 +143,7 @@ const FeatureServiceUiMobile = ({
143
143
  const canDecreaseTicketQuantity = ticketQuantity > 1;
144
144
  const availableSeats =
145
145
  selectedSlotService?.available_seats ?? maxSeatsPerBooking;
146
- const canIncreaseTicketQuantity = ticketQuantity < availableSeats;
146
+ const canIncreaseTicketQuantity = ticketQuantity < maxSeatsPerBooking;
147
147
 
148
148
  const HOW_IT_WORKS_STEPS = [
149
149
  {
@@ -512,7 +512,7 @@ const FeatureServiceUiMobile = ({
512
512
  </div>
513
513
  {!canIncreaseTicketQuantity && (
514
514
  <span className="text-[10px] text-[#FF5C60]">
515
- máx. {availableSeats} pasajes
515
+ máx. {maxSeatsPerBooking} pasajes
516
516
  </span>
517
517
  )}
518
518
  </div>
package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from "react";
2
2
  import LottiePlayer from "../../assets/LottiePlayer";
3
3
  import commonService from "../../utils/CommonService";
4
+ import DateService from "../../utils/DateService";
4
5
 
5
6
  if (typeof document !== "undefined") {
6
7
  if (!document.getElementById("feature-spin-style")) {
@@ -150,7 +151,7 @@ const FeatureServiceUi = ({
150
151
  const canDecreaseTicketQuantity = ticketQuantity > 1;
151
152
  const availableSeats =
152
153
  selectedSlotService?.available_seats ?? maxSeatsPerBooking;
153
- const canIncreaseTicketQuantity = ticketQuantity < availableSeats;
154
+ const canIncreaseTicketQuantity = ticketQuantity < maxSeatsPerBooking;
154
155
 
155
156
  const HOW_IT_WORKS_STEPS = [
156
157
  {
@@ -288,11 +289,23 @@ const FeatureServiceUi = ({
288
289
  <div className="flex flex-col gap-[10px]">
289
290
  <div className="text-[12px] bold-text">
290
291
  {travelDate
291
- ? new Date(travelDate).toLocaleDateString("es-CL", {
292
- weekday: "long",
293
- day: "numeric",
294
- month: "long",
295
- })
292
+ ? (() => {
293
+ const dayName = DateService.getDayNameFromDate(
294
+ travelDate,
295
+ "yyyy-mm-dd",
296
+ "full",
297
+ );
298
+ const day = parseInt(
299
+ DateService.getDateFromDate(travelDate, "yyyy-mm-dd"),
300
+ 10,
301
+ );
302
+ const monthName = DateService.getMonthNameFromDate(
303
+ travelDate,
304
+ "yyyy-mm-dd",
305
+ "full",
306
+ );
307
+ return `${dayName}, ${day} de ${monthName}`;
308
+ })()
296
309
  : "Viernes 23 de mayo"}
297
310
  </div>
298
311
 
@@ -626,7 +639,7 @@ const FeatureServiceUi = ({
626
639
  </div>
627
640
  {!canIncreaseTicketQuantity && (
628
641
  <span className="text-[10px] text-[#FF5C60]">
629
- máx. {availableSeats} pasajes
642
+ máx. {maxSeatsPerBooking} pasajes
630
643
  </span>
631
644
  )}
632
645
  </div>
package/src/ui/SeatSection/SeatSection.tsx CHANGED
@@ -217,9 +217,7 @@ function SeatSection({
217
217
  {typeof val.label === "string" || typeof val.label === "number"
218
218
  ? removeDuplicateSeats && isPeru
219
219
  ? CommonService.truncateSeatLabel(val.label)
220
- : isTrain
221
- ? CommonService.capitalize(String(val.label))
222
- : val.label
220
+ : CommonService.capitalize(String(val.label))
223
221
  : null}
224
222
  </span>
225
223
  </div>
package/src/ui/mobileweb/SeatSectionMobile.tsx CHANGED
@@ -77,7 +77,7 @@ const SeatRow: React.FC<SeatRowProps> = ({
77
77
  commonService.capitalize(displayLabel),
78
78
  8,
79
79
  )
80
- : displayLabel}
80
+ : commonService.capitalize(displayLabel)}
81
81
  </span>
82
82
  <span
83
83
  className={`min-[420]:text-[13px] ${textSize} bold-text`}
@@ -230,7 +230,7 @@ function SeatSectionMobile({
230
230
  className="min-[420]:text-[13px] text-[12px] bold-text"
231
231
  style={{ color: isSoldOut ? "#bbb" : "#464647" }}
232
232
  >
233
- {(originalPrice !== discountedPrice) ? "Desde" : seatLabel || "Desde"}
233
+ {originalPrice !== discountedPrice ? "Desde" : seatLabel || "Desde"}
234
234
  </span>
235
235
  <span
236
236
  className="min-[420]:text-[13px] text-[12px] bold-text"
package/src/utils/DateService.ts CHANGED
@@ -107,7 +107,7 @@ const DateService = {
107
107
  return DateService.getDayname(day, type);
108
108
  },
109
109
 
110
- getDateFromDate: (date, format = "dd/mm/yyyy") => {
110
+ getDateFromDate: (date: string, format = "dd/mm/yyyy"): string => {
111
111
  let d = DateService.changeDateFormat(date, format, "yyyy-mm-dd");
112
112
  if (!d) {
113
113
  return "";
@@ -117,7 +117,7 @@ const DateService = {
117
117
  doo.getTime() + Math.abs(doo.getTimezoneOffset() * 60000)
118
118
  );
119
119
  let day = dt.getDate();
120
- return day > 9 ? day : "0" + day;
120
+ return day > 9 ? day.toString() : "0" + day;
121
121
  },
122
122
 
123
123
  getMonthFromDate: (dateStr: string, format = "yyyy-mm-dd"): string => {