kupos-ui-components-lib 9.5.3 → 9.5.5

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 (14) hide show
  1. package/dist/components/ServiceItem/ServiceItemDesktop.js +9 -9
  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/OfferBanner.js +1 -1
  6. package/dist/ui/SeatSection/SeatSection.js +4 -1
  7. package/dist/ui/mobileweb/SeatSectionMobile.js +6 -5
  8. package/package.json +1 -1
  9. package/src/components/ServiceItem/ServiceItemDesktop.tsx +10 -8
  10. package/src/components/ServiceItem/ServiceItemMobile.tsx +4 -3
  11. package/src/ui/ExpendedDropDown/ExpandedDropdown.tsx +3 -1
  12. package/src/ui/OfferBanner.tsx +1 -1
  13. package/src/ui/SeatSection/SeatSection.tsx +7 -1
  14. 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
  : {};
@@ -245,9 +246,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
245
246
  ? "z-[3] rounded-[18px]"
246
247
  : "rounded-[10px] border border-[#ccc]"}`, style: serviceCardStyle },
247
248
  React.createElement("div", { className: " pt-[20px]", style: {
248
- padding: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ||
249
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ||
250
- hasDiscount
249
+ padding: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text)
251
250
  ? "20px 15px 10px 15px"
252
251
  : coachKey
253
252
  ? "20px 15px 20px 15px"
@@ -279,20 +278,21 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
279
278
  isPeru ? null : (React.createElement("div", { style: {
280
279
  display: "grid",
281
280
  gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
282
- opacity: isItemExpanded ? 1 : 0,
283
281
  transition: "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
284
282
  position: "relative",
285
283
  zIndex: hasOfferText || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? 0 : -1,
286
284
  } },
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)
285
+ React.createElement("div", { style: Object.assign({ overflow: "hidden", minHeight: 0, marginTop: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text)
286
+ ? ""
287
+ : "-10px" }, (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/OfferBanner.js CHANGED
@@ -5,7 +5,7 @@ const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, renderIcon, isLogg
5
5
  return (React.createElement("div", { className: "text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[36px] pt-[50px] rounded-b-[14px] text-[14px]", style: {
6
6
  background: offerGradient,
7
7
  opacity: isSoldOut ? 0.5 : 1,
8
- zIndex: 0,
8
+ // zIndex: 0,
9
9
  } },
10
10
  React.createElement("div", { className: "flex justify-between items-center w-full" },
11
11
  React.createElement("div", { className: "flex items-center " }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? (React.createElement("div", { className: "flex items-center gap-[5px]" },
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.5",
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
  : {};
@@ -438,9 +439,7 @@ function ServiceItemPB({
438
439
  className=" pt-[20px]"
439
440
  style={{
440
441
  padding:
441
- serviceItem?.is_dp_enabled ||
442
- serviceItem?.offer_text ||
443
- hasDiscount
442
+ serviceItem?.is_dp_enabled || serviceItem?.offer_text
444
443
  ? "20px 15px 10px 15px"
445
444
  : coachKey
446
445
  ? "20px 15px 20px 15px"
@@ -567,7 +566,6 @@ function ServiceItemPB({
567
566
  style={{
568
567
  display: "grid",
569
568
  gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
570
- opacity: isItemExpanded ? 1 : 0,
571
569
  transition:
572
570
  "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
573
571
  position: "relative",
@@ -578,11 +576,14 @@ function ServiceItemPB({
578
576
  style={{
579
577
  overflow: "hidden",
580
578
  minHeight: 0,
581
- marginTop: "-10px",
579
+ marginTop:
580
+ serviceItem?.is_dp_enabled || serviceItem?.offer_text
581
+ ? ""
582
+ : "-10px",
582
583
  ...(hasOfferText || serviceItem?.is_dp_enabled
583
584
  ? {
584
- borderLeft: "3px solid #ff5964",
585
- borderRight: "3px solid #ff8842",
585
+ borderLeft: `3px solid ${isSoldOut ? "rgba(255, 89, 100, 0.5)" : "#ff5964"}`,
586
+ borderRight: `3px solid ${isSoldOut ? "rgba(255, 136, 66, 0.5)" : "#ff8842"}`,
586
587
  borderRadius: "0 0 18px 18px",
587
588
  boxSizing: "border-box",
588
589
  }
@@ -595,6 +596,7 @@ function ServiceItemPB({
595
596
  translation={translation}
596
597
  getAnimationIcon={getAnimationIcon}
597
598
  isChangeTicket={serviceItem.is_change_ticket === true}
599
+ isSoldOut={isSoldOut}
598
600
  />
599
601
  </div>
600
602
  </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/OfferBanner.tsx CHANGED
@@ -33,7 +33,7 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
33
33
  style={{
34
34
  background: offerGradient,
35
35
  opacity: isSoldOut ? 0.5 : 1,
36
- zIndex: 0,
36
+ // zIndex: 0,
37
37
  }}
38
38
  >
39
39
  <div className="flex justify-between items-center w-full">
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>