kupos-ui-components-lib 10.4.10 → 10.4.11

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.
@@ -363,6 +363,12 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
363
363
  Object.keys(serviceItem.pet_seat_info).length > 0,
364
364
  render: (React.createElement(PetBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, isSoldOut: isSoldOut })),
365
365
  },
366
+ {
367
+ key: "seatCategory",
368
+ width: "40%",
369
+ condition: serviceItem.api_type === 78 && !!serviceItem.number,
370
+ render: (React.createElement("span", { className: "text-[13.33px] whitespace-nowrap ml-auto mt-[3px] translate-x-[100px]", style: { opacity: isSoldOut ? 0.5 : 1 } }, serviceItem.number)),
371
+ },
366
372
  {
367
373
  key: "flexible",
368
374
  width: "20%",
@@ -140,7 +140,9 @@ function PeruServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStag
140
140
  React.createElement("div", { className: "bg-[#E6E6E6] mt-[10px] mb-[8px] h-[1px]" }),
141
141
  React.createElement(BottomAmenitiesMobile, { isSoldOut: isSoldOut, amenitiesNodes: amenities(), hoursIcon: renderIcon("hours", "14px"), duration: (_h = serviceItem.duration) === null || _h === void 0 ? void 0 : _h.toString(), isDirectTrip: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip, directoColor: colors.directoColor, directoAnim: (_j = serviceItem.icons) === null || _j === void 0 ? void 0 : _j.directoAnim, isChangeTicket: serviceItem.is_change_ticket, isPetSeat: isPetSeat, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: (_k = serviceItem.icons) === null || _k === void 0 ? void 0 : _k.petFriendlyAnim, flexibleAnim: (_l = serviceItem.icons) === null || _l === void 0 ? void 0 : _l.flexibleAnim, isTrackingEnabled: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_tracking_enabled, locationAnim: (_m = serviceItem.icons) === null || _m === void 0 ? void 0 : _m.locationAnim, downArrowIcon: (_o = serviceItem.icons) === null || _o === void 0 ? void 0 : _o.downArrow, showDropdown: isItemExpanded, setShowDropdown: () => setIsExpanded && setIsExpanded(isItemExpanded ? null : serviceItem.id), onDropdownToggle: () => {
142
142
  setIsExpanded && setIsExpanded(isItemExpanded ? null : serviceItem.id);
143
- }, isPeru: isPeru, femaleAnim: (_p = serviceItem.icons) === null || _p === void 0 ? void 0 : _p.femaleAnim, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, isTrain: isTrain })),
143
+ }, isPeru: isPeru, femaleAnim: (_p = serviceItem.icons) === null || _p === void 0 ? void 0 : _p.femaleAnim, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, isTrain: isTrain, seatCategoryText: serviceItem.api_type === 78 && serviceItem.number
144
+ ? serviceItem.number
145
+ : undefined })),
144
146
  React.createElement(ServiceBadgesMobile, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, serviceItem: serviceItem, isConexion: isConexion, isAllinBus: isAllinBus, boardingName: boardingName !== null && boardingName !== void 0 ? boardingName : undefined })),
145
147
  hasOfferText &&
146
148
  !isNewUiEnabled &&
@@ -47,6 +47,8 @@ export interface MobileServiceItemProps {
47
47
  discount_value?: number;
48
48
  ui_type?: number;
49
49
  max_discount?: number;
50
+ api_type?: number;
51
+ number?: string;
50
52
  discounts?: Array<{
51
53
  id?: number;
52
54
  name?: string;
@@ -61,6 +61,7 @@ export interface ServiceItemProps {
61
61
  show_top_label?: boolean;
62
62
  api_type?: number;
63
63
  apiType?: number;
64
+ number?: string;
64
65
  lottie?: {
65
66
  location?: string;
66
67
  flexible?: string;
package/dist/styles.css CHANGED
@@ -342,6 +342,9 @@
342
342
  .ml-\[50px\] {
343
343
  margin-left: 50px;
344
344
  }
345
+ .ml-auto {
346
+ margin-left: auto;
347
+ }
345
348
  .block {
346
349
  display: block;
347
350
  }
@@ -543,6 +546,10 @@
543
546
  --tw-translate-x: calc(calc(1/2 * 100%) * -1);
544
547
  translate: var(--tw-translate-x) var(--tw-translate-y);
545
548
  }
549
+ .translate-x-\[100px\] {
550
+ --tw-translate-x: 100px;
551
+ translate: var(--tw-translate-x) var(--tw-translate-y);
552
+ }
546
553
  .-translate-y-1\/2 {
547
554
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
548
555
  translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -24,6 +24,7 @@ interface BottomAmenitiesMobileProps {
24
24
  ladiesBookedSeats?: string;
25
25
  isDpEnabled?: boolean;
26
26
  isTrain?: boolean;
27
+ seatCategoryText?: string;
27
28
  }
28
- declare function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration, isDirectTrip, directoColor, directoAnim, isChangeTicket, isPetSeat, petSeatInfo, petFriendlyAnim, flexibleAnim, isTrackingEnabled, locationAnim, downArrowIcon, showDropdown, setShowDropdown, onDropdownToggle, isItemExpanded, isPeru, femaleAnim, ladiesBookedSeats, isDpEnabled, isTrain, }: BottomAmenitiesMobileProps): React.ReactElement;
29
+ declare function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration, isDirectTrip, directoColor, directoAnim, isChangeTicket, isPetSeat, petSeatInfo, petFriendlyAnim, flexibleAnim, isTrackingEnabled, locationAnim, downArrowIcon, showDropdown, setShowDropdown, onDropdownToggle, isItemExpanded, isPeru, femaleAnim, ladiesBookedSeats, isDpEnabled, isTrain, seatCategoryText, }: BottomAmenitiesMobileProps): React.ReactElement;
29
30
  export default BottomAmenitiesMobile;
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import LottiePlayer from "../../assets/LottiePlayer";
3
3
  import DateService from "../../utils/DateService";
4
- function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration, isDirectTrip, directoColor, directoAnim, isChangeTicket, isPetSeat, petSeatInfo, petFriendlyAnim, flexibleAnim, isTrackingEnabled, locationAnim, downArrowIcon, showDropdown, setShowDropdown, onDropdownToggle, isItemExpanded, isPeru, femaleAnim, ladiesBookedSeats, isDpEnabled, isTrain, }) {
4
+ function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration, isDirectTrip, directoColor, directoAnim, isChangeTicket, isPetSeat, petSeatInfo, petFriendlyAnim, flexibleAnim, isTrackingEnabled, locationAnim, downArrowIcon, showDropdown, setShowDropdown, onDropdownToggle, isItemExpanded, isPeru, femaleAnim, ladiesBookedSeats, isDpEnabled, isTrain, seatCategoryText, }) {
5
5
  return (React.createElement("div", { className: `${"flex justify-between items-center items-center "}` },
6
6
  React.createElement("div", { className: "w-[55%] flex justify-between items-center" },
7
7
  React.createElement("div", { style: { opacity: isSoldOut ? 0.5 : 1 } }, amenitiesNodes),
@@ -11,6 +11,7 @@ function BottomAmenitiesMobile({ isSoldOut, amenitiesNodes, hoursIcon, duration,
11
11
  React.createElement("div", { className: `cursor-default group min-[420]:text-[13px] text-[12px] ${isSoldOut ? "text-[#c0c0c0]" : ""}`, style: { lineHeight: "normal" } },
12
12
  DateService.formatDuration(duration),
13
13
  "hrs"))),
14
+ seatCategoryText && (React.createElement("div", { className: "flex-1 text-right whitespace-nowrap min-[420]:text-[13px] text-[12px]", style: { opacity: isSoldOut ? 0.5 : 1 } }, seatCategoryText)),
14
15
  React.createElement("div", { className: "flex items-center" },
15
16
  React.createElement("div", null, (isChangeTicket || isPetSeat) && (React.createElement("div", { className: "flex items-center" },
16
17
  petSeatInfo && Object.keys(petSeatInfo).length > 0 ? (React.createElement("div", { className: "flex items-center" },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "10.4.10",
3
+ "version": "10.4.11",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -547,6 +547,19 @@ function PeruServiceItemDesktop({
547
547
  />
548
548
  ),
549
549
  },
550
+ {
551
+ key: "seatCategory",
552
+ width: "40%",
553
+ condition: serviceItem.api_type === 78 && !!serviceItem.number,
554
+ render: (
555
+ <span
556
+ className="text-[13.33px] whitespace-nowrap ml-auto mt-[3px] translate-x-[100px]"
557
+ style={{ opacity: isSoldOut ? 0.5 : 1 }}
558
+ >
559
+ {serviceItem.number}
560
+ </span>
561
+ ),
562
+ },
550
563
 
551
564
  {
552
565
  key: "flexible",
@@ -366,6 +366,11 @@ function PeruServiceItemMobile({
366
366
  ladiesBookedSeats={serviceItem.ladies_booked_seats}
367
367
  isDpEnabled={serviceItem.is_dp_enabled}
368
368
  isTrain={isTrain}
369
+ seatCategoryText={
370
+ serviceItem.api_type === 78 && serviceItem.number
371
+ ? serviceItem.number
372
+ : undefined
373
+ }
369
374
  />
370
375
  </div>
371
376
 
@@ -50,6 +50,8 @@ export interface MobileServiceItemProps {
50
50
  discount_value?: number;
51
51
  ui_type?: number;
52
52
  max_discount?: number;
53
+ api_type?: number;
54
+ number?: string;
53
55
  discounts?: Array<{
54
56
  id?: number;
55
57
  name?: string;
@@ -63,6 +63,7 @@ export interface ServiceItemProps {
63
63
  show_top_label?: boolean;
64
64
  api_type?: number;
65
65
  apiType?: number;
66
+ number?: string;
66
67
  lottie?: {
67
68
  location?: string;
68
69
  flexible?: string;
@@ -27,6 +27,7 @@ interface BottomAmenitiesMobileProps {
27
27
  ladiesBookedSeats?: string;
28
28
  isDpEnabled?: boolean;
29
29
  isTrain?: boolean;
30
+ seatCategoryText?: string;
30
31
  }
31
32
 
32
33
  function BottomAmenitiesMobile({
@@ -54,6 +55,7 @@ function BottomAmenitiesMobile({
54
55
  ladiesBookedSeats,
55
56
  isDpEnabled,
56
57
  isTrain,
58
+ seatCategoryText,
57
59
  }: BottomAmenitiesMobileProps): React.ReactElement {
58
60
  return (
59
61
  <div className={`${"flex justify-between items-center items-center "}`}>
@@ -100,6 +102,15 @@ function BottomAmenitiesMobile({
100
102
  )} */}
101
103
  </div>
102
104
 
105
+ {seatCategoryText && (
106
+ <div
107
+ className="flex-1 text-right whitespace-nowrap min-[420]:text-[13px] text-[12px]"
108
+ style={{ opacity: isSoldOut ? 0.5 : 1 }}
109
+ >
110
+ {seatCategoryText}
111
+ </div>
112
+ )}
113
+
103
114
  <div className="flex items-center">
104
115
  <div>
105
116
  {(isChangeTicket || isPetSeat) && (