kupos-ui-components-lib 10.4.40 → 10.4.42

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 (19) hide show
  1. package/dist/assets/images/discount/green_new.png +0 -0
  2. package/dist/assets/images/discount/green_rt.png +0 -0
  3. package/dist/assets/images/discount/last_minute.png +0 -0
  4. package/dist/assets/images/discount/purple.png +0 -0
  5. package/dist/assets/images/discount/yellow_instant.png +0 -0
  6. package/dist/components/DiscountBanners/DiscountBannerMobile.js +3 -0
  7. package/dist/ui/DiscountBanners/defaultBackgrounds.js +11 -10
  8. package/dist/ui/SeatSection/SeatSection.js +10 -7
  9. package/dist/ui/mobileweb/SeatSectionMobile.js +2 -2
  10. package/package.json +1 -1
  11. package/src/assets/images/discount/green_new.png +0 -0
  12. package/src/assets/images/discount/green_rt.png +0 -0
  13. package/src/assets/images/discount/last_minute.png +0 -0
  14. package/src/assets/images/discount/purple.png +0 -0
  15. package/src/assets/images/discount/yellow_instant.png +0 -0
  16. package/src/components/DiscountBanners/DiscountBannerMobile.tsx +2 -2
  17. package/src/ui/DiscountBanners/defaultBackgrounds.ts +11 -11
  18. package/src/ui/SeatSection/SeatSection.tsx +10 -5
  19. package/src/ui/mobileweb/SeatSectionMobile.tsx +2 -2
package/dist/components/DiscountBanners/DiscountBannerMobile.js CHANGED
@@ -120,6 +120,9 @@ class DiscountBannersMobile extends React.Component {
120
120
  React.createElement("span", { className: `bold-text flex-shrink-0 rounded-full text-center text-[#464647] overflow-hidden whitespace-nowrap ${sizeClasses.chip}`, style: chipPillInArt
121
121
  ? undefined
122
122
  : { backgroundColor: "rgba(255,255,255,0.55)" } }, label),
123
+ showFlamePercent && (React.createElement("span", { className: `bold-text absolute text-[#ffffff] text-center pointer-events-none ${sizeClasses.flameBadge}`, style: Object.assign(Object.assign({}, FLAME_CENTER), { transform: "translate(-50%, -50%)", textShadow: "0 1px 2px rgba(0,0,0,0.28)", fontWeight: 900, whiteSpace: "nowrap" }) },
124
+ card.amount,
125
+ React.createElement("span", { className: sizeClasses.flamePercent, style: { fontWeight: 700 } }, "%"))),
123
126
  React.createElement("span", { className: `flex flex-col ${sizeClasses.column}` },
124
127
  React.createElement("span", { className: `bold-text text-[#464647] ${sizeClasses.discount}` }, card.discountLabel),
125
128
  React.createElement("span", { className: `bold-text ${sizeClasses.subtitle}`, style: { color: accentColor } }, card.subtitle))));
package/dist/ui/DiscountBanners/defaultBackgrounds.js CHANGED
@@ -1,12 +1,13 @@
1
- import greenArt from "../../assets/images/discount/instant.png";
1
+ import greenArt from "../../assets/images/discount/green_new.png";
2
2
  import yellowArt from "../../assets/images/discount/yellow.png";
3
3
  import blueArt from "../../assets/images/discount/blue.png";
4
- import lastMinuteArt from "../../assets/images/discount/last.png";
5
- import firstTimeArt from "../../assets/images/discount/first.png";
4
+ import lastMinuteArt from "../../assets/images/discount/last_minute.png";
5
+ import firstTimeArt from "../../assets/images/discount/purple.png";
6
6
  import cashbackArt from "../../assets/images/discount/cash.png";
7
- import roundTripArt from "../../assets/images/discount/round.png";
8
- import promoCodeArt from "../../assets/images/discount/promo.png";
7
+ import roundTripArt from "../../assets/images/discount/green_rt.png";
8
+ import promoCodeArt from "../../assets/images/discount/yellow.png";
9
9
  import seatLevelArt from "../../assets/images/discount/seat.png";
10
+ import instantArt from "../../assets/images/discount/yellow_instant.png";
10
11
  export function toImageUrl(art) {
11
12
  if (typeof art === "string")
12
13
  return art;
@@ -27,11 +28,11 @@ export const DEFAULT_BACKGROUND_IMAGES = [
27
28
  blueArt,
28
29
  ].map(toImageUrl);
29
30
  export const CAMPAIGN_ART = {
30
- last_minute: { image: toImageUrl(lastMinuteArt), accent: "#4457C7" },
31
- first_time: { image: toImageUrl(firstTimeArt), accent: "#D63384" },
31
+ last_minute: { image: toImageUrl(lastMinuteArt), accent: "#1633DB" },
32
+ first_time: { image: toImageUrl(firstTimeArt), accent: "#FB488E" },
32
33
  cashback: { image: toImageUrl(cashbackArt), accent: "#0069D1" },
33
- round_trip: { image: toImageUrl(roundTripArt), accent: "#5C8A00" },
34
- instant_discount: { image: toImageUrl(promoCodeArt), accent: "#E08A00" },
34
+ round_trip: { image: toImageUrl(roundTripArt), accent: "#107E23" },
35
+ instant_discount: { image: toImageUrl(instantArt), accent: "#FDA105" },
35
36
  seat_level: { image: toImageUrl(seatLevelArt), accent: "#B87500" },
36
- promo_code: { image: toImageUrl(seatLevelArt), accent: "#B87500" },
37
+ promo_code: { image: toImageUrl(promoCodeArt), accent: "#FFC000" },
37
38
  };
package/dist/ui/SeatSection/SeatSection.js CHANGED
@@ -268,17 +268,18 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
268
268
  Math.round(Number(dpDiscountPercent)),
269
269
  "% OFF"))),
270
270
  React.createElement("div", { className: "col-start-2 row-start-2 flex items-center justify-center", style: { textAlign: "center" } },
271
- React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative", style: { position: "relative" } },
271
+ React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative", style: { position: "relative", display: "inline-block" } },
272
272
  formatPrice(Number(originalDpPrice)),
273
- React.createElement("span", { style: {
273
+ React.createElement("span", { "aria-hidden": "true", style: {
274
274
  position: "absolute",
275
275
  left: "-2px",
276
+ right: "-2px",
276
277
  top: "50%",
277
- width: "calc(100% + 4px)",
278
278
  height: "1px",
279
- backgroundColor: discountSeatPriceColor,
279
+ backgroundColor: discountSeatPriceColor || "#ff5c60",
280
280
  transform: "rotate(-10deg)",
281
281
  transformOrigin: "center",
282
+ pointerEvents: "none",
282
283
  } }))),
283
284
  React.createElement("div", { className: "col-start-2 row-start-3 flex h-[30px] items-end justify-center relative" },
284
285
  React.createElement("span", { className: "flex items-center gap-[6px] text-[22px] bold-text leading-[30px]", style: { color: isSoldOut ? "#c0c0c0" : dpSeatColor || "#ff5964" } },
@@ -349,18 +350,20 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
349
350
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 ? null : (React.createElement("div", { className: "col-start-2 row-start-2 flex items-center justify-center ", style: { textAlign: "center" } },
350
351
  React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] relative whitespace-nowrap", style: {
351
352
  position: "relative",
353
+ display: "inline-block",
352
354
  color: discountSeatCrossPriceColor,
353
355
  } },
354
356
  formatPrice(discountSeat.originalPrice),
355
- React.createElement("span", { style: {
357
+ React.createElement("span", { "aria-hidden": "true", style: {
356
358
  position: "absolute",
357
359
  left: "-2px",
360
+ right: "-2px",
358
361
  top: "50%",
359
- width: "calc(100% + 4px)",
360
362
  height: "1px",
361
- backgroundColor: discountSeatCrossPriceColor,
363
+ backgroundColor: discountSeatCrossPriceColor || "#ff5c60",
362
364
  transform: "rotate(-10deg)",
363
365
  transformOrigin: "center",
366
+ pointerEvents: "none",
364
367
  } })))),
365
368
  React.createElement("div", { className: "col-start-2 row-start-3 flex h-[30px] items-end justify-center relative" },
366
369
  React.createElement("span", { className: "flex items-center gap-[6px] bold-text leading-[30px]", style: {
package/dist/ui/mobileweb/SeatSectionMobile.js CHANGED
@@ -246,7 +246,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
246
246
  left: "50%",
247
247
  width: "80%",
248
248
  height: "1px",
249
- background: discountSeatPriceColor,
249
+ background: discountSeatPriceColor || "#ff5c60",
250
250
  transform: "rotate(-12deg)",
251
251
  transformOrigin: "center",
252
252
  } })),
@@ -282,7 +282,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
282
282
  left: "50%",
283
283
  width: "80%",
284
284
  height: "1px",
285
- background: discountSeatCrossPriceColor,
285
+ background: discountSeatCrossPriceColor || "#ff5c60",
286
286
  transform: "rotate(-12deg)",
287
287
  transformOrigin: "center",
288
288
  } })))),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "10.4.40",
3
+ "version": "10.4.42",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/DiscountBanners/DiscountBannerMobile.tsx CHANGED
@@ -190,7 +190,7 @@ class DiscountBannersMobile extends React.Component<
190
190
  >
191
191
  {label}
192
192
  </span>
193
- {/* {showFlamePercent && (
193
+ {showFlamePercent && (
194
194
  <span
195
195
  className={`bold-text absolute text-[#ffffff] text-center pointer-events-none ${sizeClasses.flameBadge}`}
196
196
  style={{
@@ -209,7 +209,7 @@ class DiscountBannersMobile extends React.Component<
209
209
  %
210
210
  </span>
211
211
  </span>
212
- )} */}
212
+ )}
213
213
  <span className={`flex flex-col ${sizeClasses.column}`}>
214
214
  <span
215
215
  className={`bold-text text-[#464647] ${sizeClasses.discount}`}
package/src/ui/DiscountBanners/defaultBackgrounds.ts CHANGED
@@ -1,13 +1,13 @@
1
- import greenArt from "../../assets/images/discount/instant.png";
1
+ import greenArt from "../../assets/images/discount/green_new.png";
2
2
  import yellowArt from "../../assets/images/discount/yellow.png";
3
3
  import blueArt from "../../assets/images/discount/blue.png";
4
- import lastMinuteArt from "../../assets/images/discount/last.png";
5
- import firstTimeArt from "../../assets/images/discount/first.png";
4
+ import lastMinuteArt from "../../assets/images/discount/last_minute.png";
5
+ import firstTimeArt from "../../assets/images/discount/purple.png";
6
6
  import cashbackArt from "../../assets/images/discount/cash.png";
7
- import roundTripArt from "../../assets/images/discount/round.png";
8
- import promoCodeArt from "../../assets/images/discount/promo.png";
7
+ import roundTripArt from "../../assets/images/discount/green_rt.png";
8
+ import promoCodeArt from "../../assets/images/discount/yellow.png";
9
9
  import seatLevelArt from "../../assets/images/discount/seat.png";
10
- import instantArt from "../../assets/images/discount/instant.png";
10
+ import instantArt from "../../assets/images/discount/yellow_instant.png";
11
11
 
12
12
  export type ImageRef =
13
13
  | string
@@ -32,11 +32,11 @@ export const DEFAULT_BACKGROUND_IMAGES: string[] = [
32
32
  ].map(toImageUrl);
33
33
 
34
34
  export const CAMPAIGN_ART: Record<string, { image: string; accent: string }> = {
35
- last_minute: { image: toImageUrl(lastMinuteArt), accent: "#4457C7" },
36
- first_time: { image: toImageUrl(firstTimeArt), accent: "#D63384" },
35
+ last_minute: { image: toImageUrl(lastMinuteArt), accent: "#1633DB" },
36
+ first_time: { image: toImageUrl(firstTimeArt), accent: "#FB488E" },
37
37
  cashback: { image: toImageUrl(cashbackArt), accent: "#0069D1" },
38
- round_trip: { image: toImageUrl(roundTripArt), accent: "#5C8A00" },
39
- instant_discount: { image: toImageUrl(promoCodeArt), accent: "#E08A00" },
38
+ round_trip: { image: toImageUrl(roundTripArt), accent: "#107E23" },
39
+ instant_discount: { image: toImageUrl(instantArt), accent: "#FDA105" },
40
40
  seat_level: { image: toImageUrl(seatLevelArt), accent: "#B87500" },
41
- promo_code: { image: toImageUrl(seatLevelArt), accent: "#B87500" },
41
+ promo_code: { image: toImageUrl(promoCodeArt), accent: "#FFC000" },
42
42
  };
package/src/ui/SeatSection/SeatSection.tsx CHANGED
@@ -516,19 +516,21 @@ function SeatSection({
516
516
  >
517
517
  <span
518
518
  className="text-[13.33px] font-normal leading-[20px] text-[#9f9f9f] relative"
519
- style={{ position: "relative" }}
519
+ style={{ position: "relative", display: "inline-block" }}
520
520
  >
521
521
  {formatPrice(Number(originalDpPrice))}
522
522
  <span
523
+ aria-hidden="true"
523
524
  style={{
524
525
  position: "absolute",
525
526
  left: "-2px",
527
+ right: "-2px",
526
528
  top: "50%",
527
- width: "calc(100% + 4px)",
528
529
  height: "1px",
529
- backgroundColor: discountSeatPriceColor,
530
+ backgroundColor: discountSeatPriceColor || "#ff5c60",
530
531
  transform: "rotate(-10deg)",
531
532
  transformOrigin: "center",
533
+ pointerEvents: "none",
532
534
  }}
533
535
  />
534
536
  </span>
@@ -694,20 +696,23 @@ function SeatSection({
694
696
  className="text-[13.33px] font-normal leading-[20px] relative whitespace-nowrap"
695
697
  style={{
696
698
  position: "relative",
699
+ display: "inline-block",
697
700
  color: discountSeatCrossPriceColor,
698
701
  }}
699
702
  >
700
703
  {formatPrice(discountSeat.originalPrice)}
701
704
  <span
705
+ aria-hidden="true"
702
706
  style={{
703
707
  position: "absolute",
704
708
  left: "-2px",
709
+ right: "-2px",
705
710
  top: "50%",
706
- width: "calc(100% + 4px)",
707
711
  height: "1px",
708
- backgroundColor: discountSeatCrossPriceColor,
712
+ backgroundColor: discountSeatCrossPriceColor || "#ff5c60",
709
713
  transform: "rotate(-10deg)",
710
714
  transformOrigin: "center",
715
+ pointerEvents: "none",
711
716
  }}
712
717
  />
713
718
  </span>
package/src/ui/mobileweb/SeatSectionMobile.tsx CHANGED
@@ -568,7 +568,7 @@ function SeatSectionMobile({
568
568
  left: "50%",
569
569
  width: "80%",
570
570
  height: "1px",
571
- background: discountSeatPriceColor,
571
+ background: discountSeatPriceColor || "#ff5c60",
572
572
  transform: "rotate(-12deg)",
573
573
  transformOrigin: "center",
574
574
  }}
@@ -654,7 +654,7 @@ function SeatSectionMobile({
654
654
  left: "50%",
655
655
  width: "80%",
656
656
  height: "1px",
657
- background: discountSeatCrossPriceColor,
657
+ background: discountSeatCrossPriceColor || "#ff5c60",
658
658
  transform: "rotate(-12deg)",
659
659
  transformOrigin: "center",
660
660
  }}