kupos-ui-components-lib 10.4.1 → 10.4.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 (5) hide show
  1. package/dist/ui/SeatSection/SeatSection.js +20 -10
  2. package/dist/ui/mobileweb/SeatSectionMobile.js +38 -30
  3. package/package.json +1 -1
  4. package/src/ui/SeatSection/SeatSection.tsx +71 -54
  5. package/src/ui/mobileweb/SeatSectionMobile.tsx +62 -50
package/dist/ui/SeatSection/SeatSection.js CHANGED
@@ -325,18 +325,19 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
325
325
  }
326
326
  if (hasDiscount && discountSeat) {
327
327
  return (React.createElement("div", { className: "grid grid-cols-2 items-center text-[13.33px] relative", style: { opacity: isSoldOut ? 0.5 : 1 } },
328
- React.createElement("div", { className: "col-start-1 row-start-2 flex items-center" },
329
- React.createElement("span", { className: "text-[13.33px] font-normal leading-[22px] text-[#ccc]" }, "Antes")),
328
+ (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" },
329
+ React.createElement("span", { className: "text-[13.33px] font-normal leading-[22px] text-[#ccc]" }, "Antes"))),
330
330
  React.createElement("div", { className: "col-start-1 row-start-3 flex h-[20px] items-end" },
331
- React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#464647]" }, "Desde")),
332
- React.createElement("div", { className: "col-start-2 row-start-1 flex items-center justify-center absolute", style: { top: "-22px", left: "50%", transform: "translateX(-50%)" } }, (discountValue != null || isMaxDiscountApplied) && (React.createElement("span", { className: "rounded-[100px] bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white", style: {
331
+ React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#464647]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 ? discountSeat.label : "Desde")),
332
+ React.createElement("div", { className: "col-start-2 row-start-1 flex items-center justify-center absolute", style: { top: "-22px", left: "50%", transform: "translateX(-50%)" } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 &&
333
+ (discountValue != null || isMaxDiscountApplied) && (React.createElement("span", { className: "rounded-[100px] bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white", style: {
333
334
  animation: "pulse-zoom 2s ease-in-out infinite",
334
335
  whiteSpace: "nowrap",
335
336
  backgroundColor: discountSeatPriceColor,
336
337
  } }, isMaxDiscountApplied
337
338
  ? `${CommonService.currency(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.max_discount)} OFF`
338
339
  : `${discountValue}% OFF`))),
339
- React.createElement("div", { className: "col-start-2 row-start-2 flex items-center justify-center ", style: { textAlign: "center" } },
340
+ (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" } },
340
341
  React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] relative whitespace-nowrap", style: {
341
342
  position: "relative",
342
343
  color: discountSeatPriceColor,
@@ -351,16 +352,25 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
351
352
  backgroundColor: discountSeatPriceColor,
352
353
  transform: "rotate(-10deg)",
353
354
  transformOrigin: "center",
354
- } }))),
355
+ } })))),
355
356
  React.createElement("div", { className: "col-start-2 row-start-3 flex h-[30px] items-end justify-center relative" },
356
- React.createElement("span", { className: "flex items-center gap-[6px] text-[22px] bold-text leading-[30px]", style: { color: isSoldOut ? "#c0c0c0" : discountSeatPriceColor } },
357
- React.createElement("div", { className: "absolute", style: {
357
+ React.createElement("span", { className: "flex items-center gap-[6px] bold-text leading-[30px]", style: {
358
+ color: isSoldOut
359
+ ? "#c0c0c0"
360
+ : (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1
361
+ ? "#464647"
362
+ : discountSeatPriceColor,
363
+ fontSize: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 ? "13.33px" : "22px",
364
+ } },
365
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 && (React.createElement("div", { className: "absolute", style: {
358
366
  left: isPeru ? "-16px" : "-18px",
359
367
  bottom: "1px",
360
- } }, renderIcon("fireIcon", "16px")),
368
+ } }, renderIcon("fireIcon", "16px"))),
361
369
  availableSeats <= 0
362
370
  ? CommonService.currency(0, currencySign)
363
- : CommonService.discountedCurrency(discountSeat.discountedPrice, currencySign)))));
371
+ : CommonService.discountedCurrency((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1
372
+ ? discountSeat.originalPrice
373
+ : discountSeat.discountedPrice, currencySign)))));
364
374
  }
365
375
  return isTrain && availableSeats <= 0 ? null : (React.createElement("div", { className: "relative flex gap-[10px] text-[13.33px] justify-between min-h-[2.2rem]", style: isCentered ? { alignItems: "center" } : {} },
366
376
  React.createElement("div", { className: "flex flex-col justify-between", style: { gap: "10px" } }, renderLabels()),
package/dist/ui/mobileweb/SeatSectionMobile.js CHANGED
@@ -231,38 +231,46 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
231
231
  commonService.discountedCurrency(Number(firstSeatFare), currencySign)),
232
232
  isSoldOut ? (React.createElement("span", { className: "col-span-2 min-[420]:text-[13px] text-right text-[12px] text-[#ccc]" }, "Agotado")) : null)) : hasDiscount && discountSeat ? (React.createElement("div", null,
233
233
  React.createElement("div", { className: "relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] " },
234
- (discountValue != null || isMaxDiscountApplied) && (React.createElement("div", { className: "absolute -top-[18px] right-[0px]", style: {
235
- animation: "pulse-zoom 2s ease-in-out infinite",
236
- opacity: isSoldOut ? 0.5 : 1,
237
- } },
238
- React.createElement("span", { className: "rounded-[100px] px-[8px] text-[12px] bold-text leading-[20px] text-[#fff]", style: {
239
- backgroundColor: tooltipBgColor,
240
- } }, isMaxDiscountApplied
241
- ? `${commonService.currency(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.max_discount)} OFF`
242
- : `${discountValue}% OFF`))),
243
- React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[20px] text-[#c2c2c2]" }, "Antes"),
244
- React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[20px] text-[#9f9f9f] text-right", style: {
245
- position: "relative",
246
- display: "inline-block",
247
- overflow: "hidden",
248
- } },
249
- commonService.currency(discountSeat.originalPrice, currencySign),
250
- React.createElement("span", { style: {
251
- position: "absolute",
252
- top: "35%",
253
- left: "50%",
254
- width: "80%",
255
- height: "1px",
256
- background: discountSeatPriceColor,
257
- transform: "rotate(-12deg)",
258
- transformOrigin: "center",
259
- } })),
260
- React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[24px]", style: { color: isSoldOut ? "#bbb" : "#464647" } }, "Desde"),
234
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 &&
235
+ (discountValue != null || isMaxDiscountApplied) && (React.createElement(React.Fragment, null,
236
+ React.createElement("div", { className: "absolute -top-[18px] right-[0px]", style: {
237
+ animation: "pulse-zoom 2s ease-in-out infinite",
238
+ opacity: isSoldOut ? 0.5 : 1,
239
+ } },
240
+ React.createElement("span", { className: "rounded-[100px] px-[8px] text-[12px] bold-text leading-[20px] text-[#fff]", style: {
241
+ backgroundColor: tooltipBgColor,
242
+ } }, isMaxDiscountApplied
243
+ ? `${commonService.currency(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.max_discount)} OFF`
244
+ : `${discountValue}% OFF`)),
245
+ React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[20px] text-[#c2c2c2]" }, "Antes"),
246
+ React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[20px] text-[#9f9f9f] text-right", style: {
247
+ position: "relative",
248
+ display: "inline-block",
249
+ overflow: "hidden",
250
+ } },
251
+ commonService.currency(discountSeat.originalPrice, currencySign),
252
+ React.createElement("span", { style: {
253
+ position: "absolute",
254
+ top: "35%",
255
+ left: "50%",
256
+ width: "80%",
257
+ height: "1px",
258
+ background: discountSeatPriceColor,
259
+ transform: "rotate(-12deg)",
260
+ transformOrigin: "center",
261
+ } })))),
262
+ React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] leading-[24px]", style: { color: isSoldOut ? "#bbb" : "#464647" } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 ? discountSeat.label : "Desde"),
261
263
  React.createElement("span", { className: "flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]", style: {
262
- color: isSoldOut ? "#bbb" : discountSeatPriceColor || "#ff5964",
264
+ color: isSoldOut
265
+ ? "#bbb"
266
+ : (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1
267
+ ? "#464647"
268
+ : discountSeatPriceColor || "#ff5964",
263
269
  } },
264
- ((_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,
265
- commonService.discountedCurrency(discountSeat.discountedPrice, currencySign))))) : (React.createElement("div", { className: `flex flex-col justify-between ${isTrain ? "" : "h-[2.5rem]"} `, style: {
270
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 && ((_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,
271
+ commonService.discountedCurrency((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1
272
+ ? discountSeat.originalPrice
273
+ : discountSeat.discountedPrice, currencySign))))) : (React.createElement("div", { className: `flex flex-col justify-between ${isTrain ? "" : "h-[2.5rem]"} `, style: {
266
274
  gap: isSoldOut ? "0px" : "5px",
267
275
  justifyContent: hasMultipleTypes ? "space-between" : "center",
268
276
  } },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "10.4.1",
3
+ "version": "10.4.2",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/ui/SeatSection/SeatSection.tsx CHANGED
@@ -632,15 +632,17 @@ function SeatSection({
632
632
  className="grid grid-cols-2 items-center text-[13.33px] relative"
633
633
  style={{ opacity: isSoldOut ? 0.5 : 1 }}
634
634
  >
635
- <div className="col-start-1 row-start-2 flex items-center">
636
- <span className="text-[13.33px] font-normal leading-[22px] text-[#ccc]">
637
- Antes
638
- </span>
639
- </div>
635
+ {serviceItem?.ui_type === 1 ? null : (
636
+ <div className="col-start-1 row-start-2 flex items-center">
637
+ <span className="text-[13.33px] font-normal leading-[22px] text-[#ccc]">
638
+ Antes
639
+ </span>
640
+ </div>
641
+ )}
640
642
 
641
643
  <div className="col-start-1 row-start-3 flex h-[20px] items-end">
642
644
  <span className="text-[13.33px] font-normal leading-[20px] text-[#464647]">
643
- Desde
645
+ {serviceItem?.ui_type === 1 ? discountSeat.label : "Desde"}
644
646
  </span>
645
647
  </div>
646
648
 
@@ -648,68 +650,83 @@ function SeatSection({
648
650
  className="col-start-2 row-start-1 flex items-center justify-center absolute"
649
651
  style={{ top: "-22px", left: "50%", transform: "translateX(-50%)" }}
650
652
  >
651
- {(discountValue != null || isMaxDiscountApplied) && (
652
- <span
653
- className="rounded-[100px] bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white"
654
- style={{
655
- animation: "pulse-zoom 2s ease-in-out infinite",
656
- whiteSpace: "nowrap",
657
- backgroundColor: discountSeatPriceColor,
658
- }}
659
- >
660
- {isMaxDiscountApplied
661
- ? `${CommonService.currency(serviceItem?.max_discount)} OFF`
662
- : `${discountValue}% OFF`}
663
- </span>
664
- )}
653
+ {serviceItem?.ui_type !== 1 &&
654
+ (discountValue != null || isMaxDiscountApplied) && (
655
+ <span
656
+ className="rounded-[100px] bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white"
657
+ style={{
658
+ animation: "pulse-zoom 2s ease-in-out infinite",
659
+ whiteSpace: "nowrap",
660
+ backgroundColor: discountSeatPriceColor,
661
+ }}
662
+ >
663
+ {isMaxDiscountApplied
664
+ ? `${CommonService.currency(serviceItem?.max_discount)} OFF`
665
+ : `${discountValue}% OFF`}
666
+ </span>
667
+ )}
665
668
  </div>
666
669
 
667
- <div
668
- className="col-start-2 row-start-2 flex items-center justify-center "
669
- style={{ textAlign: "center" }}
670
- >
671
- <span
672
- className="text-[13.33px] font-normal leading-[20px] relative whitespace-nowrap"
673
- style={{
674
- position: "relative",
675
- color: discountSeatPriceColor,
676
- }}
670
+ {serviceItem?.ui_type === 1 ? null : (
671
+ <div
672
+ className="col-start-2 row-start-2 flex items-center justify-center "
673
+ style={{ textAlign: "center" }}
677
674
  >
678
- {formatPrice(discountSeat.originalPrice)}
679
675
  <span
676
+ className="text-[13.33px] font-normal leading-[20px] relative whitespace-nowrap"
680
677
  style={{
681
- position: "absolute",
682
- left: "-2px",
683
- top: "50%",
684
- width: "calc(100% + 4px)",
685
- height: "1px",
686
- backgroundColor: discountSeatPriceColor,
687
- transform: "rotate(-10deg)",
688
- transformOrigin: "center",
678
+ position: "relative",
679
+ color: discountSeatPriceColor,
689
680
  }}
690
- />
691
- </span>
692
- </div>
681
+ >
682
+ {formatPrice(discountSeat.originalPrice)}
683
+ <span
684
+ style={{
685
+ position: "absolute",
686
+ left: "-2px",
687
+ top: "50%",
688
+ width: "calc(100% + 4px)",
689
+ height: "1px",
690
+ backgroundColor: discountSeatPriceColor,
691
+ transform: "rotate(-10deg)",
692
+ transformOrigin: "center",
693
+ }}
694
+ />
695
+ </span>
696
+ </div>
697
+ )}
693
698
 
694
699
  <div className="col-start-2 row-start-3 flex h-[30px] items-end justify-center relative">
695
700
  <span
696
- className="flex items-center gap-[6px] text-[22px] bold-text leading-[30px]"
697
- style={{ color: isSoldOut ? "#c0c0c0" : discountSeatPriceColor }}
701
+ className="flex items-center gap-[6px] bold-text leading-[30px]"
702
+ style={{
703
+ color: isSoldOut
704
+ ? "#c0c0c0"
705
+ : serviceItem?.ui_type === 1
706
+ ? "#464647"
707
+ : discountSeatPriceColor,
708
+
709
+ fontSize: serviceItem?.ui_type === 1 ? "13.33px" : "22px",
710
+ }}
698
711
  >
699
712
  {/* <span className="text-[18px] leading-[24px]">🔥</span> */}
700
- <div
701
- className="absolute"
702
- style={{
703
- left: isPeru ? "-16px" : "-18px",
704
- bottom: "1px",
705
- }}
706
- >
707
- {renderIcon("fireIcon", "16px")}
708
- </div>
713
+ {serviceItem?.ui_type !== 1 && (
714
+ <div
715
+ className="absolute"
716
+ style={{
717
+ left: isPeru ? "-16px" : "-18px",
718
+ bottom: "1px",
719
+ }}
720
+ >
721
+ {renderIcon("fireIcon", "16px")}
722
+ </div>
723
+ )}
709
724
  {availableSeats <= 0
710
725
  ? CommonService.currency(0, currencySign)
711
726
  : CommonService.discountedCurrency(
712
- discountSeat.discountedPrice,
727
+ serviceItem?.ui_type === 1
728
+ ? discountSeat.originalPrice
729
+ : discountSeat.discountedPrice,
713
730
  currencySign,
714
731
  )}
715
732
  </span>
package/src/ui/mobileweb/SeatSectionMobile.tsx CHANGED
@@ -549,66 +549,76 @@ function SeatSectionMobile({
549
549
  ) : hasDiscount && discountSeat ? (
550
550
  <div>
551
551
  <div className="relative grid grid-cols-[auto_auto] justify-between gap-x-[8px] ">
552
- {(discountValue != null || isMaxDiscountApplied) && (
553
- <div
554
- className="absolute -top-[18px] right-[0px]"
555
- style={{
556
- animation: "pulse-zoom 2s ease-in-out infinite",
557
- opacity: isSoldOut ? 0.5 : 1,
558
- }}
559
- >
560
- <span
561
- className="rounded-[100px] px-[8px] text-[12px] bold-text leading-[20px] text-[#fff]"
562
- style={{
563
- backgroundColor: tooltipBgColor,
564
- }}
565
- >
566
- {isMaxDiscountApplied
567
- ? `${commonService.currency(serviceItem?.max_discount)} OFF`
568
- : `${discountValue}% OFF`}
569
- </span>
570
- </div>
571
- )}
572
-
573
- <span className="min-[420]:text-[13px] text-[12px] leading-[20px] text-[#c2c2c2]">
574
- Antes
575
- </span>
576
- <span
577
- className="min-[420]:text-[13px] text-[12px] leading-[20px] text-[#9f9f9f] text-right"
578
- style={{
579
- position: "relative",
580
- display: "inline-block",
581
- overflow: "hidden",
582
- }}
583
- >
584
- {commonService.currency(discountSeat.originalPrice, currencySign)}
585
- <span
586
- style={{
587
- position: "absolute",
588
- top: "35%",
589
- left: "50%",
590
- width: "80%",
591
- height: "1px",
592
- background: discountSeatPriceColor,
593
- transform: "rotate(-12deg)",
594
- transformOrigin: "center",
595
- }}
596
- />
597
- </span>
552
+ {serviceItem?.ui_type !== 1 &&
553
+ (discountValue != null || isMaxDiscountApplied) && (
554
+ <>
555
+ <div
556
+ className="absolute -top-[18px] right-[0px]"
557
+ style={{
558
+ animation: "pulse-zoom 2s ease-in-out infinite",
559
+ opacity: isSoldOut ? 0.5 : 1,
560
+ }}
561
+ >
562
+ <span
563
+ className="rounded-[100px] px-[8px] text-[12px] bold-text leading-[20px] text-[#fff]"
564
+ style={{
565
+ backgroundColor: tooltipBgColor,
566
+ }}
567
+ >
568
+ {isMaxDiscountApplied
569
+ ? `${commonService.currency(serviceItem?.max_discount)} OFF`
570
+ : `${discountValue}% OFF`}
571
+ </span>
572
+ </div>
573
+
574
+ <span className="min-[420]:text-[13px] text-[12px] leading-[20px] text-[#c2c2c2]">
575
+ Antes
576
+ </span>
577
+ <span
578
+ className="min-[420]:text-[13px] text-[12px] leading-[20px] text-[#9f9f9f] text-right"
579
+ style={{
580
+ position: "relative",
581
+ display: "inline-block",
582
+ overflow: "hidden",
583
+ }}
584
+ >
585
+ {commonService.currency(
586
+ discountSeat.originalPrice,
587
+ currencySign,
588
+ )}
589
+ <span
590
+ style={{
591
+ position: "absolute",
592
+ top: "35%",
593
+ left: "50%",
594
+ width: "80%",
595
+ height: "1px",
596
+ background: discountSeatPriceColor,
597
+ transform: "rotate(-12deg)",
598
+ transformOrigin: "center",
599
+ }}
600
+ />
601
+ </span>
602
+ </>
603
+ )}
598
604
 
599
605
  <span
600
606
  className="min-[420]:text-[13px] text-[12px] leading-[24px]"
601
607
  style={{ color: isSoldOut ? "#bbb" : "#464647" }}
602
608
  >
603
- Desde
609
+ {serviceItem?.ui_type === 1 ? discountSeat.label : "Desde"}
604
610
  </span>
605
611
  <span
606
612
  className="flex items-center justify-end gap-[4px] text-[14px] bold-text leading-[24px]"
607
613
  style={{
608
- color: isSoldOut ? "#bbb" : discountSeatPriceColor || "#ff5964",
614
+ color: isSoldOut
615
+ ? "#bbb"
616
+ : serviceItem?.ui_type === 1
617
+ ? "#464647"
618
+ : discountSeatPriceColor || "#ff5964",
609
619
  }}
610
620
  >
611
- {serviceItem?.icons?.fireIcon ? (
621
+ {serviceItem?.ui_type !== 1 && serviceItem?.icons?.fireIcon ? (
612
622
  <img
613
623
  src={serviceItem.icons.fireIcon}
614
624
  alt="discount"
@@ -618,7 +628,9 @@ function SeatSectionMobile({
618
628
  ) : null}
619
629
  {/* {commonService.currency(discountSeat.discountedPrice, currencySign)} */}
620
630
  {commonService.discountedCurrency(
621
- discountSeat.discountedPrice,
631
+ serviceItem?.ui_type === 1
632
+ ? discountSeat.originalPrice
633
+ : discountSeat.discountedPrice,
622
634
  currencySign,
623
635
  )}
624
636
  </span>