kupos-ui-components-lib 9.5.3 → 9.5.4

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 (12) hide show
  1. package/dist/components/ServiceItem/ServiceItemDesktop.js +6 -6
  2. package/dist/components/ServiceItem/ServiceItemMobile.js +4 -3
  3. package/dist/ui/ExpendedDropDown/ExpandedDropdown.d.ts +2 -1
  4. package/dist/ui/ExpendedDropDown/ExpandedDropdown.js +2 -2
  5. package/dist/ui/SeatSection/SeatSection.js +4 -1
  6. package/dist/ui/mobileweb/SeatSectionMobile.js +6 -5
  7. package/package.json +1 -1
  8. package/src/components/ServiceItem/ServiceItemDesktop.tsx +6 -5
  9. package/src/components/ServiceItem/ServiceItemMobile.tsx +4 -3
  10. package/src/ui/ExpendedDropDown/ExpandedDropdown.tsx +3 -1
  11. package/src/ui/SeatSection/SeatSection.tsx +7 -1
  12. package/src/ui/mobileweb/SeatSectionMobile.tsx +12 -5
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -112,13 +112,14 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
112
112
  const discountedSeats = seats.map((seat) => (Object.assign(Object.assign({}, seat), CommonService.calculateDiscountedPrice(seat.fare, serviceItem))));
113
113
  const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
114
114
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
115
+ const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
115
116
  const serviceCardStyle = hasOfferText || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
116
117
  ? {
117
118
  borderColor: "transparent",
118
119
  borderStyle: "solid",
119
120
  borderWidth: "3px 3px 0 3px",
120
121
  borderRadius: isItemExpanded || coachKey ? "18px 18px 0 0" : "18px",
121
- background: `linear-gradient(#fff, #fff) padding-box, ${offerGradient} border-box`,
122
+ background: `linear-gradient(#fff, #fff) padding-box, ${isSoldOut ? offerGradientWithOpacity : offerGradient} border-box`,
122
123
  // zIndex: 1,
123
124
  }
124
125
  : {};
@@ -279,20 +280,19 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
279
280
  isPeru ? null : (React.createElement("div", { style: {
280
281
  display: "grid",
281
282
  gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
282
- opacity: isItemExpanded ? 1 : 0,
283
283
  transition: "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
284
284
  position: "relative",
285
285
  zIndex: hasOfferText || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? 0 : -1,
286
286
  } },
287
- React.createElement("div", { style: Object.assign({ overflow: "hidden", minHeight: 0, marginTop: "-10px" }, (hasOfferText || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
287
+ React.createElement("div", { style: Object.assign({ overflow: "hidden", minHeight: 0 }, (hasOfferText || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
288
288
  ? {
289
- borderLeft: "3px solid #ff5964",
290
- borderRight: "3px solid #ff8842",
289
+ borderLeft: `3px solid ${isSoldOut ? "rgba(255, 89, 100, 0.5)" : "#ff5964"}`,
290
+ borderRight: `3px solid ${isSoldOut ? "rgba(255, 136, 66, 0.5)" : "#ff8842"}`,
291
291
  borderRadius: "0 0 18px 18px",
292
292
  boxSizing: "border-box",
293
293
  }
294
294
  : {})) },
295
- React.createElement(ExpandedDropdown, { serviceItem: serviceItem, isPeru: isPeru, translation: translation, getAnimationIcon: getAnimationIcon, isChangeTicket: serviceItem.is_change_ticket === true })))),
295
+ React.createElement(ExpandedDropdown, { serviceItem: serviceItem, isPeru: isPeru, translation: translation, getAnimationIcon: getAnimationIcon, isChangeTicket: serviceItem.is_change_ticket === true, isSoldOut: isSoldOut })))),
296
296
  children,
297
297
  React.createElement(ServiceBadges, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, translation: translation, serviceItem: serviceItem })))));
298
298
  }
package/dist/components/ServiceItem/ServiceItemMobile.js CHANGED
@@ -30,13 +30,14 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
30
30
  const isLongOfferText = (((_b = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) === null || _b === void 0 ? void 0 : _b.length) || 0) > 35;
31
31
  const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text);
32
32
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
33
+ const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
33
34
  const serviceCardStyle = hasOfferText || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
34
35
  ? {
35
36
  borderColor: "transparent",
36
37
  borderStyle: "solid",
37
38
  borderWidth: "3px 3px 0 3px",
38
39
  borderRadius: "18px",
39
- background: `linear-gradient(#fff, #fff) padding-box, ${offerGradient} border-box`,
40
+ background: `linear-gradient(#fff, #fff) padding-box, ${isSoldOut ? offerGradientWithOpacity : offerGradient} border-box`,
40
41
  }
41
42
  : {};
42
43
  const labelId = typeof serviceItem.boarding_stages === "string"
@@ -116,8 +117,8 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
116
117
  }, isPeru: isPeru })),
117
118
  React.createElement(ServiceBadgesMobile, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, serviceItem: serviceItem, isConexion: isConexion })),
118
119
  ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)) && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
119
- background: isSoldOut ? "#ccc" : offerGradient,
120
- opacity: isSoldOut ? 0.5 : 1,
120
+ background: isSoldOut ? offerGradientWithOpacity : offerGradient,
121
+ // opacity: isSoldOut ? 0.5 : 1,
121
122
  borderRadius: "0 0 14px 14px",
122
123
  zIndex: -1,
123
124
  } },
package/dist/ui/ExpendedDropDown/ExpandedDropdown.d.ts CHANGED
@@ -10,6 +10,7 @@ interface ExpandedDropdownProps {
10
10
  translation?: Record<string, string>;
11
11
  getAnimationIcon?: (iconName: string) => any;
12
12
  isChangeTicket?: boolean;
13
+ isSoldOut?: boolean;
13
14
  }
14
- declare function ExpandedDropdown({ serviceItem, isPeru, translation, getAnimationIcon, isChangeTicket, }: ExpandedDropdownProps): React.ReactElement;
15
+ declare function ExpandedDropdown({ serviceItem, isPeru, translation, getAnimationIcon, isChangeTicket, isSoldOut, }: ExpandedDropdownProps): React.ReactElement;
15
16
  export default ExpandedDropdown;
package/dist/ui/ExpendedDropDown/ExpandedDropdown.js CHANGED
@@ -1,13 +1,13 @@
1
1
  import React from "react";
2
2
  import LottiePlayer from "../../assets/LottiePlayer";
3
- function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAnimationIcon, isChangeTicket = false, }) {
3
+ function ExpandedDropdown({ serviceItem, isPeru = false, translation = {}, getAnimationIcon, isChangeTicket = false, isSoldOut, }) {
4
4
  const hasPetInfo = serviceItem.pet_seat_info &&
5
5
  Object.keys(serviceItem.pet_seat_info).length > 0;
6
6
  return (React.createElement("div", { className: "px-[15px] pt-[26px] pb-[14px] -mt-[16px] pt-[35px] relative -z-9", style: {
7
7
  backgroundColor: "#ffefef",
8
8
  borderRadius: "0 0 10px 10px",
9
9
  } },
10
- React.createElement("div", { className: "flex flex-col gap-[6px] text-[13px] text-[#464647]", style: { lineHeight: 1.5 } },
10
+ React.createElement("div", { className: "flex flex-col gap-[6px] text-[13px] text-[#464647]", style: { lineHeight: 1.5, opacity: isSoldOut ? 0.5 : 1 } },
11
11
  isPeru ? null : isChangeTicket ? (React.createElement("div", { className: "flex gap-[8px]", style: { lineHeight: 1.5 } },
12
12
  React.createElement("span", { style: { marginTop: "2px" } }, "\u2022"),
13
13
  React.createElement("span", null,
package/dist/ui/SeatSection/SeatSection.js CHANGED
@@ -119,7 +119,10 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
119
119
  if (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) {
120
120
  const dpSeats = (removeDuplicateSeats ? uniqueSeats : sortedSeatTypes).filter((s) => !SEAT_EXCEPTIONS.includes(s.label));
121
121
  const lowestFare = dpSeats.length > 0 ? Math.min(...dpSeats.map((s) => Number(s.price))) : 0;
122
- return (React.createElement("div", { className: "flex items-center justify-between text-[13.33px] " },
122
+ return (React.createElement("div", { className: "flex items-center justify-between text-[13.33px] ", style: {
123
+ opacity: isSoldOut ? 0.5 : 1,
124
+ width: isSoldOut ? "160px" : "",
125
+ } },
123
126
  React.createElement("div", null,
124
127
  React.createElement("span", { className: "text-[13.33px] font-normal leading-[24px] text-[#464647]" }, "Desde")),
125
128
  React.createElement("div", null,
package/dist/ui/mobileweb/SeatSectionMobile.js CHANGED
@@ -80,11 +80,12 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
80
80
  return null;
81
81
  const { discountedPrice } = commonService.calculateDiscountedPrice(lowestFare, serviceItem);
82
82
  const priceColor = isSoldOut ? "#bbb" : tooltipBgColor;
83
- return (React.createElement("div", { className: "relative flex flex-col justify-center h-full" },
83
+ return (React.createElement("div", { className: "relative flex flex-col justify-center h-full", style: { opacity: isSoldOut ? 0.5 : 1 } },
84
84
  React.createElement("div", { className: "absolute right-[0px]", style: {
85
85
  animation: "pulse-zoom 2s ease-in-out infinite",
86
- top: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
87
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0
86
+ top: ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) < 10 &&
87
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.available_seats) > 0) ||
88
+ isSoldOut
88
89
  ? "-20px"
89
90
  : "-15px",
90
91
  } },
@@ -92,7 +93,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
92
93
  backgroundColor: tooltipBgColor,
93
94
  } }, "Mejor precio")),
94
95
  React.createElement("div", { className: "w-[100%] flex flex-row justify-between items-center" },
95
- React.createElement("span", { className: "min-[420]:text-[13px] text-[12px]", style: { color: isSoldOut ? "#bbb" : "#464647" } }, "Desde"),
96
+ React.createElement("span", { className: "min-[420]:text-[13px] text-[12px]" }, "Desde"),
96
97
  React.createElement("span", { className: "flex items-center gap-[4px] min-[420]:text-[13px] text-[14px] bold-text", style: { color: priceColor } },
97
98
  ((_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.icons) === null || _a === void 0 ? void 0 : _a.fireIcon) ? (React.createElement("img", { src: serviceItem.icons.fireIcon, alt: "dp", className: "h-[14px] w-[14px] object-contain", style: { filter: isSoldOut ? "grayscale(1)" : "" } })) : null,
98
99
  commonService.currency(discountedPrice, currencySign))),
@@ -101,7 +102,7 @@ function SeatSectionMobile({ seatTypes: seatTypesData, isSoldOut, isPeru, seatPr
101
102
  color: tooltipBgColor,
102
103
  } }, "\u00A1\u00DAltimos Asientos!")))) : null,
103
104
  isSoldOut ? (React.createElement("div", { className: "flex justify-end" },
104
- React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] text-[#ccc]" }, "Agotado"))) : null));
105
+ React.createElement("span", { className: "min-[420]:text-[13px] text-[12px] text-[#464647]", style: { opacity: isSoldOut ? 0.5 : 1 } }, "Agotado"))) : null));
105
106
  };
106
107
  const renderSeats = () => {
107
108
  var _a, _b, _c;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "9.5.3",
3
+ "version": "9.5.4",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -191,6 +191,7 @@ function ServiceItemPB({
191
191
  );
192
192
 
193
193
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
194
+ const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
194
195
  const serviceCardStyle: React.CSSProperties =
195
196
  hasOfferText || serviceItem?.is_dp_enabled
196
197
  ? {
@@ -198,7 +199,7 @@ function ServiceItemPB({
198
199
  borderStyle: "solid",
199
200
  borderWidth: "3px 3px 0 3px",
200
201
  borderRadius: isItemExpanded || coachKey ? "18px 18px 0 0" : "18px",
201
- background: `linear-gradient(#fff, #fff) padding-box, ${offerGradient} border-box`,
202
+ background: `linear-gradient(#fff, #fff) padding-box, ${isSoldOut ? offerGradientWithOpacity : offerGradient} border-box`,
202
203
  // zIndex: 1,
203
204
  }
204
205
  : {};
@@ -567,7 +568,6 @@ function ServiceItemPB({
567
568
  style={{
568
569
  display: "grid",
569
570
  gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
570
- opacity: isItemExpanded ? 1 : 0,
571
571
  transition:
572
572
  "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
573
573
  position: "relative",
@@ -578,11 +578,11 @@ function ServiceItemPB({
578
578
  style={{
579
579
  overflow: "hidden",
580
580
  minHeight: 0,
581
- marginTop: "-10px",
581
+ // marginTop: "-10px",
582
582
  ...(hasOfferText || serviceItem?.is_dp_enabled
583
583
  ? {
584
- borderLeft: "3px solid #ff5964",
585
- borderRight: "3px solid #ff8842",
584
+ borderLeft: `3px solid ${isSoldOut ? "rgba(255, 89, 100, 0.5)" : "#ff5964"}`,
585
+ borderRight: `3px solid ${isSoldOut ? "rgba(255, 136, 66, 0.5)" : "#ff8842"}`,
586
586
  borderRadius: "0 0 18px 18px",
587
587
  boxSizing: "border-box",
588
588
  }
@@ -595,6 +595,7 @@ function ServiceItemPB({
595
595
  translation={translation}
596
596
  getAnimationIcon={getAnimationIcon}
597
597
  isChangeTicket={serviceItem.is_change_ticket === true}
598
+ isSoldOut={isSoldOut}
598
599
  />
599
600
  </div>
600
601
  </div>
package/src/components/ServiceItem/ServiceItemMobile.tsx CHANGED
@@ -70,6 +70,7 @@ function ServiceItemMobile({
70
70
 
71
71
  const hasOfferText = Boolean(serviceItem?.offer_text);
72
72
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
73
+ const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
73
74
  const serviceCardStyle: React.CSSProperties =
74
75
  hasOfferText || serviceItem?.is_dp_enabled
75
76
  ? {
@@ -77,7 +78,7 @@ function ServiceItemMobile({
77
78
  borderStyle: "solid",
78
79
  borderWidth: "3px 3px 0 3px",
79
80
  borderRadius: "18px",
80
- background: `linear-gradient(#fff, #fff) padding-box, ${offerGradient} border-box`,
81
+ background: `linear-gradient(#fff, #fff) padding-box, ${isSoldOut ? offerGradientWithOpacity : offerGradient} border-box`,
81
82
  }
82
83
  : {};
83
84
 
@@ -293,8 +294,8 @@ function ServiceItemMobile({
293
294
  <div
294
295
  className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
295
296
  style={{
296
- background: isSoldOut ? "#ccc" : offerGradient,
297
- opacity: isSoldOut ? 0.5 : 1,
297
+ background: isSoldOut ? offerGradientWithOpacity : offerGradient,
298
+ // opacity: isSoldOut ? 0.5 : 1,
298
299
  borderRadius: "0 0 14px 14px",
299
300
  zIndex: -1,
300
301
  }}
package/src/ui/ExpendedDropDown/ExpandedDropdown.tsx CHANGED
@@ -12,6 +12,7 @@ interface ExpandedDropdownProps {
12
12
  translation?: Record<string, string>;
13
13
  getAnimationIcon?: (iconName: string) => any;
14
14
  isChangeTicket?: boolean;
15
+ isSoldOut?: boolean;
15
16
  }
16
17
 
17
18
  function ExpandedDropdown({
@@ -20,6 +21,7 @@ function ExpandedDropdown({
20
21
  translation = {},
21
22
  getAnimationIcon,
22
23
  isChangeTicket = false,
24
+ isSoldOut,
23
25
  }: ExpandedDropdownProps): React.ReactElement {
24
26
  const hasPetInfo =
25
27
  serviceItem.pet_seat_info &&
@@ -35,7 +37,7 @@ function ExpandedDropdown({
35
37
  >
36
38
  <div
37
39
  className="flex flex-col gap-[6px] text-[13px] text-[#464647]"
38
- style={{ lineHeight: 1.5 }}
40
+ style={{ lineHeight: 1.5, opacity: isSoldOut ? 0.5 : 1 }}
39
41
  >
40
42
  {isPeru ? null : isChangeTicket ? (
41
43
  <div className="flex gap-[8px]" style={{ lineHeight: 1.5 }}>
package/src/ui/SeatSection/SeatSection.tsx CHANGED
@@ -230,7 +230,13 @@ function SeatSection({
230
230
  dpSeats.length > 0 ? Math.min(...dpSeats.map((s) => Number(s.price))) : 0;
231
231
 
232
232
  return (
233
- <div className="flex items-center justify-between text-[13.33px] ">
233
+ <div
234
+ className="flex items-center justify-between text-[13.33px] "
235
+ style={{
236
+ opacity: isSoldOut ? 0.5 : 1,
237
+ width: isSoldOut ? "160px" : "",
238
+ }}
239
+ >
234
240
  <div>
235
241
  <span className="text-[13.33px] font-normal leading-[24px] text-[#464647]">
236
242
  Desde
package/src/ui/mobileweb/SeatSectionMobile.tsx CHANGED
@@ -196,14 +196,18 @@ function SeatSectionMobile({
196
196
  const priceColor = isSoldOut ? "#bbb" : tooltipBgColor;
197
197
 
198
198
  return (
199
- <div className="relative flex flex-col justify-center h-full">
199
+ <div
200
+ className="relative flex flex-col justify-center h-full"
201
+ style={{ opacity: isSoldOut ? 0.5 : 1 }}
202
+ >
200
203
  <div
201
204
  className="absolute right-[0px]"
202
205
  style={{
203
206
  animation: "pulse-zoom 2s ease-in-out infinite",
204
207
  top:
205
- serviceItem?.available_seats < 10 &&
206
- serviceItem?.available_seats > 0
208
+ (serviceItem?.available_seats < 10 &&
209
+ serviceItem?.available_seats > 0) ||
210
+ isSoldOut
207
211
  ? "-20px"
208
212
  : "-15px",
209
213
  }}
@@ -220,7 +224,7 @@ function SeatSectionMobile({
220
224
  <div className="w-[100%] flex flex-row justify-between items-center">
221
225
  <span
222
226
  className="min-[420]:text-[13px] text-[12px]"
223
- style={{ color: isSoldOut ? "#bbb" : "#464647" }}
227
+ // style={{ color: isSoldOut ? "#bbb" : "#464647" }}
224
228
  >
225
229
  Desde
226
230
  </span>
@@ -256,7 +260,10 @@ function SeatSectionMobile({
256
260
  ) : null}
257
261
  {isSoldOut ? (
258
262
  <div className="flex justify-end">
259
- <span className="min-[420]:text-[13px] text-[12px] text-[#ccc]">
263
+ <span
264
+ className="min-[420]:text-[13px] text-[12px] text-[#464647]"
265
+ style={{ opacity: isSoldOut ? 0.5 : 1 }}
266
+ >
260
267
  Agotado
261
268
  </span>
262
269
  </div>