kupos-ui-components-lib 9.5.6 → 9.5.8

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 (7) hide show
  1. package/dist/components/ServiceItem/PeruServiceItemDesktop.js +4 -3
  2. package/dist/ui/ServiceBadges/ServiceBadges.js +17 -9
  3. package/dist/ui/mobileweb/ServiceBadgesMobile.js +17 -9
  4. package/package.json +1 -1
  5. package/src/components/ServiceItem/PeruServiceItemDesktop.tsx +6 -5
  6. package/src/ui/ServiceBadges/ServiceBadges.tsx +17 -15
  7. package/src/ui/mobileweb/ServiceBadgesMobile.tsx +17 -9
package/dist/components/ServiceItem/PeruServiceItemDesktop.js CHANGED
@@ -369,14 +369,14 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
369
369
  React.createElement("div", { className: "flex flex-col gap-[10px]" },
370
370
  React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
371
371
  React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.travel_date))),
372
- !isCiva && (React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
372
+ !isCiva && (React.createElement(StageTooltip, { stageData: serviceItem.dropoff_stages, direction: 2, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
373
373
  React.createElement("span", { className: "cursor-pointer bold-text capitalize" }, DateService.getServiceItemDate(serviceItem.arrival_date))))),
374
374
  React.createElement("div", { className: "flex flex-col gap-[10px] items-center" },
375
375
  React.createElement("div", { className: "h-[20px] flex items-center justify-center" },
376
376
  React.createElement("div", null, "\u2022")),
377
377
  !isCiva && (React.createElement("div", { className: "h-[20px] flex items-center justify-center" }, removeArrivalTime ? null : serviceItem.arr_time ? (React.createElement("div", null, "\u2022")) : null))),
378
378
  React.createElement("div", { className: "flex flex-col gap-[10px]" },
379
- React.createElement(StageTooltip, { stageData: serviceItem.dropoff_stages, direction: 2, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
379
+ React.createElement(StageTooltip, { stageData: serviceItem.boarding_stages, direction: 1, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
380
380
  React.createElement("div", { className: "font-[900] bold-text" }, DateService.formatTime(serviceItem.dep_time))),
381
381
  !isCiva && (React.createElement(StageTooltip, { stageData: serviceItem.dropoff_stages, direction: 2, terminals: busStage, serviceItem: serviceItem, metaData: metaData, colors: colors },
382
382
  React.createElement("div", { className: "font-[900] bold-text" }, removeArrivalTime
@@ -402,10 +402,11 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
402
402
  left: "68%",
403
403
  right: 0,
404
404
  justifyContent: getNumberOfSeats() < 2 ? "center" : "center",
405
+ gap: "5px",
405
406
  } },
406
407
  React.createElement("span", { style: {
407
408
  position: "absolute",
408
- top: -5,
409
+ top: getNumberOfSeats() > 1 ? -10 : -5,
409
410
  fontWeight: "initial",
410
411
  fontSize: "12px",
411
412
  left: 0,
package/dist/ui/ServiceBadges/ServiceBadges.js CHANGED
@@ -3,29 +3,37 @@ const ServiceBadges = ({ showTopLabel, isSoldOut, colors, renderIcon, translatio
3
3
  return (React.createElement("div", { className: "absolute -top-[10px] left-0 w-full flex items-center justify-end gap-[12px] pr-[22px] z-10" },
4
4
  showTopLabel && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-10`, style: {
5
5
  backgroundColor: "#fff",
6
- border: `1px solid ${colors.topLabelColor}`,
7
- color: colors.topLabelColor,
6
+ border: isSoldOut
7
+ ? "1px solid #ccc"
8
+ : `1px solid ${colors.topLabelColor}`,
9
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
8
10
  } },
9
11
  React.createElement("div", { className: isSoldOut ? "grayscale" : "" }, renderIcon("specialDeparture", "12px")),
10
- React.createElement("div", { className: isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]` }, showTopLabel))),
12
+ React.createElement("div", null, showTopLabel))),
11
13
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_transpordo) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
12
14
  backgroundColor: "#fff",
13
- border: `1px solid ${colors.topLabelColor}`,
14
- color: colors.topLabelColor,
15
+ border: isSoldOut
16
+ ? "1px solid #ccc"
17
+ : `1px solid ${colors.topLabelColor}`,
18
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
15
19
  } },
16
20
  renderIcon("connectingServiceIcon", "12px"),
17
21
  React.createElement("div", null, "Conexión"))),
18
22
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
19
23
  backgroundColor: "#fff",
20
- border: `1px solid ${colors.topLabelColor}`,
21
- color: colors.topLabelColor,
24
+ border: isSoldOut
25
+ ? "1px solid #ccc"
26
+ : `1px solid ${colors.topLabelColor}`,
27
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
22
28
  } },
23
29
  renderIcon("directo", "12px"),
24
30
  React.createElement("div", null, translation === null || translation === void 0 ? void 0 : translation.directService))),
25
31
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" && (React.createElement("div", { className: `flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`, style: {
26
32
  backgroundColor: "#fff",
27
- border: `1px solid ${colors.topLabelColor}`,
28
- color: colors.topLabelColor,
33
+ border: isSoldOut
34
+ ? "1px solid #ccc"
35
+ : `1px solid ${colors.topLabelColor}`,
36
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
29
37
  } },
30
38
  renderIcon("directo", "12px"),
31
39
  React.createElement("div", null, "Tren Express")))));
package/dist/ui/mobileweb/ServiceBadgesMobile.js CHANGED
@@ -3,31 +3,39 @@ const ServiceBadgesMobile = ({ showTopLabel, isSoldOut, colors, renderIcon, serv
3
3
  return (React.createElement("div", { className: "absolute -top-[10px] left-0 w-full flex items-center justify-end gap-[12px] pr-[17px] z-10" },
4
4
  showTopLabel && (React.createElement("div", { className: `flex items-center gap-[2px] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`, style: {
5
5
  backgroundColor: "#fff",
6
- border: `1px solid ${colors.topLabelColor}`,
7
- color: colors.topLabelColor,
6
+ border: isSoldOut
7
+ ? "1px solid #ccc"
8
+ : `1px solid ${colors.topLabelColor}`,
9
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
8
10
  } },
9
11
  React.createElement("div", { className: isSoldOut ? "grayscale" : "" }, renderIcon("specialDeparture", "12px")),
10
12
  React.createElement("div", { style: {
11
- color: colors.topLabelColor,
13
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
12
14
  } }, showTopLabel))),
13
15
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`, style: {
14
16
  backgroundColor: "#fff",
15
- border: `1px solid ${colors.topLabelColor}`,
16
- color: colors.topLabelColor,
17
+ border: isSoldOut
18
+ ? "1px solid #ccc"
19
+ : `1px solid ${colors.topLabelColor}`,
20
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
17
21
  } },
18
22
  renderIcon("directo", "12px"),
19
23
  React.createElement("div", { className: "ml-[5px]" }, "Directo"))),
20
24
  isConexion && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[11px] z-20`, style: {
21
25
  backgroundColor: "#fff",
22
- border: `1px solid ${colors.topLabelColor}`,
23
- color: colors.topLabelColor,
26
+ border: isSoldOut
27
+ ? "1px solid #ccc"
28
+ : `1px solid ${colors.topLabelColor}`,
29
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
24
30
  } },
25
31
  renderIcon("airportIcon", "14px"),
26
32
  React.createElement("div", null, "Conexi\u00F3n"))),
27
33
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" && (React.createElement("div", { className: `flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`, style: {
28
34
  backgroundColor: "#fff",
29
- border: `1px solid ${colors.topLabelColor}`,
30
- color: colors.topLabelColor,
35
+ border: isSoldOut
36
+ ? "1px solid #ccc"
37
+ : `1px solid ${colors.topLabelColor}`,
38
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
31
39
  } },
32
40
  renderIcon("directo", "12px"),
33
41
  React.createElement("div", null, "Tren Express")))));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "9.5.6",
3
+ "version": "9.5.8",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/PeruServiceItemDesktop.tsx CHANGED
@@ -665,8 +665,8 @@ function PeruServiceItemDesktop({
665
665
  {/* Arrival Date */}
666
666
  {!isCiva && (
667
667
  <StageTooltip
668
- stageData={serviceItem.boarding_stages}
669
- direction={1}
668
+ stageData={serviceItem.dropoff_stages}
669
+ direction={2}
670
670
  terminals={busStage}
671
671
  serviceItem={serviceItem}
672
672
  metaData={metaData}
@@ -700,8 +700,8 @@ function PeruServiceItemDesktop({
700
700
  <div className="flex flex-col gap-[10px]">
701
701
  {/* Departure Time */}
702
702
  <StageTooltip
703
- stageData={serviceItem.dropoff_stages}
704
- direction={2}
703
+ stageData={serviceItem.boarding_stages}
704
+ direction={1}
705
705
  terminals={busStage}
706
706
  serviceItem={serviceItem}
707
707
  metaData={metaData}
@@ -767,12 +767,13 @@ function PeruServiceItemDesktop({
767
767
  right: 0,
768
768
  justifyContent:
769
769
  getNumberOfSeats() < 2 ? "center" : "center",
770
+ gap: "5px",
770
771
  }}
771
772
  >
772
773
  <span
773
774
  style={{
774
775
  position: "absolute",
775
- top: -5,
776
+ top: getNumberOfSeats() > 1 ? -10 : -5,
776
777
  fontWeight: "initial",
777
778
  fontSize: "12px",
778
779
  left: 0,
package/src/ui/ServiceBadges/ServiceBadges.tsx CHANGED
@@ -30,20 +30,16 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
30
30
  className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-10`}
31
31
  style={{
32
32
  backgroundColor: "#fff",
33
- border: `1px solid ${colors.topLabelColor}`,
34
- color: colors.topLabelColor,
33
+ border: isSoldOut
34
+ ? "1px solid #ccc"
35
+ : `1px solid ${colors.topLabelColor}`,
36
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
35
37
  }}
36
38
  >
37
39
  <div className={isSoldOut ? "grayscale" : ""}>
38
40
  {renderIcon("specialDeparture", "12px")}
39
41
  </div>
40
- <div
41
- className={
42
- isSoldOut ? "text-white" : `text-[${colors.topLabelColor}]`
43
- }
44
- >
45
- {showTopLabel}
46
- </div>
42
+ <div>{showTopLabel}</div>
47
43
  </div>
48
44
  )}
49
45
  {serviceItem?.is_transpordo && (
@@ -51,8 +47,10 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
51
47
  className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`}
52
48
  style={{
53
49
  backgroundColor: "#fff",
54
- border: `1px solid ${colors.topLabelColor}`,
55
- color: colors.topLabelColor,
50
+ border: isSoldOut
51
+ ? "1px solid #ccc"
52
+ : `1px solid ${colors.topLabelColor}`,
53
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
56
54
  }}
57
55
  >
58
56
  {renderIcon("connectingServiceIcon", "12px")}
@@ -64,8 +62,10 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
64
62
  className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`}
65
63
  style={{
66
64
  backgroundColor: "#fff",
67
- border: `1px solid ${colors.topLabelColor}`,
68
- color: colors.topLabelColor,
65
+ border: isSoldOut
66
+ ? "1px solid #ccc"
67
+ : `1px solid ${colors.topLabelColor}`,
68
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
69
69
  }}
70
70
  >
71
71
  {renderIcon("directo", "12px")}
@@ -77,8 +77,10 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
77
77
  className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px] z-20`}
78
78
  style={{
79
79
  backgroundColor: "#fff",
80
- border: `1px solid ${colors.topLabelColor}`,
81
- color: colors.topLabelColor,
80
+ border: isSoldOut
81
+ ? "1px solid #ccc"
82
+ : `1px solid ${colors.topLabelColor}`,
83
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
82
84
  }}
83
85
  >
84
86
  {renderIcon("directo", "12px")}
package/src/ui/mobileweb/ServiceBadgesMobile.tsx CHANGED
@@ -30,8 +30,10 @@ const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
30
30
  className={`flex items-center gap-[2px] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`}
31
31
  style={{
32
32
  backgroundColor: "#fff",
33
- border: `1px solid ${colors.topLabelColor}`,
34
- color: colors.topLabelColor,
33
+ border: isSoldOut
34
+ ? "1px solid #ccc"
35
+ : `1px solid ${colors.topLabelColor}`,
36
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
35
37
  }}
36
38
  >
37
39
  <div className={isSoldOut ? "grayscale" : ""}>
@@ -39,7 +41,7 @@ const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
39
41
  </div>
40
42
  <div
41
43
  style={{
42
- color: colors.topLabelColor,
44
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
43
45
  }}
44
46
  >
45
47
  {showTopLabel}
@@ -51,8 +53,10 @@ const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
51
53
  className={`flex items-center gap-[2px] py-[5px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`}
52
54
  style={{
53
55
  backgroundColor: "#fff",
54
- border: `1px solid ${colors.topLabelColor}`,
55
- color: colors.topLabelColor,
56
+ border: isSoldOut
57
+ ? "1px solid #ccc"
58
+ : `1px solid ${colors.topLabelColor}`,
59
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
56
60
  }}
57
61
  >
58
62
  {renderIcon("directo", "12px")}
@@ -64,8 +68,10 @@ const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
64
68
  className={`flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[11px] z-20`}
65
69
  style={{
66
70
  backgroundColor: "#fff",
67
- border: `1px solid ${colors.topLabelColor}`,
68
- color: colors.topLabelColor,
71
+ border: isSoldOut
72
+ ? "1px solid #ccc"
73
+ : `1px solid ${colors.topLabelColor}`,
74
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
69
75
  }}
70
76
  >
71
77
  {renderIcon("airportIcon", "14px")}
@@ -77,8 +83,10 @@ const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
77
83
  className={`flex items-center gap-[2px] py-[5px] text-white px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`}
78
84
  style={{
79
85
  backgroundColor: "#fff",
80
- border: `1px solid ${colors.topLabelColor}`,
81
- color: colors.topLabelColor,
86
+ border: isSoldOut
87
+ ? "1px solid #ccc"
88
+ : `1px solid ${colors.topLabelColor}`,
89
+ color: isSoldOut ? "#ccc" : colors.topLabelColor,
82
90
  }}
83
91
  >
84
92
  {renderIcon("directo", "12px")}