kupos-ui-components-lib 10.4.60 → 10.4.61

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 (5) hide show
  1. package/dist/ui/SeatSection/SeatSection.js +10 -1
  2. package/dist/ui/mobileweb/SeatSectionMobile.js +12 -1
  3. package/package.json +1 -1
  4. package/src/ui/SeatSection/SeatSection.tsx +17 -1
  5. package/src/ui/mobileweb/SeatSectionMobile.tsx +17 -1
package/dist/ui/SeatSection/SeatSection.js CHANGED
@@ -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 &&
package/dist/ui/mobileweb/SeatSectionMobile.js CHANGED
@@ -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
  }
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.61",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/ui/SeatSection/SeatSection.tsx CHANGED
@@ -661,6 +661,11 @@ function SeatSection({
661
661
  }
662
662
 
663
663
  if (hasDiscount && discountSeat) {
664
+ const discountSeatIcon =
665
+ serviceItem?.ui_type === 1 && isShowSeatIcon
666
+ ? getSeatLabelIcon(discountSeat.label, serviceItem)
667
+ : null;
668
+
664
669
  return (
665
670
  <div
666
671
  className="grid grid-cols-2 items-center text-[13.33px] relative"
@@ -675,7 +680,18 @@ function SeatSection({
675
680
  )}
676
681
 
677
682
  <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">
683
+ <span className="text-[13.33px] font-normal leading-[20px] text-[#464647] whitespace-nowrap flex items-center">
684
+ {discountSeatIcon && (
685
+ <img
686
+ src={discountSeatIcon}
687
+ alt="seattype"
688
+ style={{
689
+ width: "20px",
690
+ height: "20px",
691
+ marginRight: "5px",
692
+ }}
693
+ />
694
+ )}
679
695
  {serviceItem?.ui_type === 1 ? discountSeat.label : "Desde"}
680
696
  </span>
681
697
  </div>
package/src/ui/mobileweb/SeatSectionMobile.tsx CHANGED
@@ -218,6 +218,10 @@ function SeatSectionMobile({
218
218
  Number(seat.fare),
219
219
  serviceItem,
220
220
  );
221
+ // Picked from the full label, since truncation can cut off the angle
222
+ const rowSeatIcon = isShowSeatIcon
223
+ ? getSeatLabelIcon(seat.label, serviceItem)
224
+ : null;
221
225
  return (
222
226
  <div
223
227
  key={key}
@@ -225,9 +229,21 @@ function SeatSectionMobile({
225
229
  style={{ marginTop: key > 0 ? "8px" : "0" }}
226
230
  >
227
231
  <span
228
- className="min-[420]:text-[13px] text-[12px] bold-text whitespace-nowrap"
232
+ className="min-[420]:text-[13px] text-[12px] bold-text whitespace-nowrap flex items-center"
229
233
  style={{ color: isSoldOut ? "#bbb" : "#464647" }}
230
234
  >
235
+ {rowSeatIcon && (
236
+ <img
237
+ src={rowSeatIcon}
238
+ alt="seattype"
239
+ style={{
240
+ width: "16px",
241
+ height: "16px",
242
+ marginRight: "4px",
243
+ filter: isSoldOut ? "grayscale(1)" : "",
244
+ }}
245
+ />
246
+ )}
231
247
  {commonService.truncateSeatLabel(seat.label)}
232
248
  </span>
233
249
  <span