kupos-ui-components-lib 9.9.8 → 9.9.10

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 +4 -4
  2. package/dist/components/ServiceItem/ServiceItemMobile.js +14 -7
  3. package/dist/styles.css +6 -3
  4. package/dist/ui/OfferBanner.js +1 -1
  5. package/dist/ui/ServiceBadges/ServiceBadges.d.ts +1 -1
  6. package/dist/ui/ServiceBadges/ServiceBadges.js +3 -1
  7. package/dist/ui/mobileweb/ServiceBadgesMobile.d.ts +1 -1
  8. package/dist/ui/mobileweb/ServiceBadgesMobile.js +3 -3
  9. package/package.json +1 -1
  10. package/src/components/ServiceItem/ServiceItemDesktop.tsx +6 -3
  11. package/src/components/ServiceItem/ServiceItemMobile.tsx +57 -42
  12. package/src/ui/OfferBanner.tsx +1 -1
  13. package/src/ui/ServiceBadges/ServiceBadges.tsx +6 -4
  14. package/src/ui/mobileweb/ServiceBadgesMobile.tsx +8 -5
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -144,12 +144,12 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
144
144
  // zIndex: 1,
145
145
  }
146
146
  : {};
147
- const renderIcon = (iconKey, size = "14px") => {
147
+ const renderIcon = (iconKey, size = "14px", styles) => {
148
148
  var _a;
149
149
  const iconValue = (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a[iconKey];
150
150
  if (iconValue) {
151
151
  if (typeof iconValue === "string") {
152
- return (React.createElement("img", { src: iconValue, alt: iconKey, className: `${`w-[${size}] h-[${size}]`} ` }));
152
+ return (React.createElement("img", { src: iconValue, alt: iconKey, className: `${`w-[${size}] h-[${size}]`} `, style: Object.assign({}, (styles || {})) }));
153
153
  }
154
154
  }
155
155
  return null;
@@ -261,10 +261,10 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
261
261
  setIsFeatureDropDownExpand(isFeatureDropDownExpand === serviceItem.id ||
262
262
  isFeatureDropDownExpand === true
263
263
  ? null
264
- : serviceItem.id), selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle, wowDealData: wowDealData })) : (React.createElement("div", { className: `relative hover:z-[150] ${hasOfferText || hasDpEnabled ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
264
+ : serviceItem.id), selectedTimeSlot: selectedTimeSlot, onTimeSlotChange: onTimeSlotChange, isTimeDropdownOpen: isTimeDropdownOpen, onTimeDropdownToggle: onTimeDropdownToggle, wowDealData: wowDealData })) : (React.createElement("div", { className: `relative hover:z-[150] ${hasOfferText || hasDpEnabled || isNewUiEnabled ? "mb-[55px]" : "mb-[10px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
265
265
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
266
266
  showTopLabel
267
- ? "mt-[24px]"
267
+ ? "mt-[30px]"
268
268
  : "mt-[20px]"} ` },
269
269
  ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDpEnabled) && !isSoldOut && (React.createElement(OfferBanner, { offerGradient: offerGradient, isSoldOut: isSoldOut, serviceItem: serviceItem, renderIcon: renderIcon, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon, showLoginOption: showLoginOption, isNewUiEnabled: isNewUiEnabled, colors: colors })),
270
270
  React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${(hasOfferText && isNewUiEnabled && !isSoldOut) || hasDpEnabled
package/dist/components/ServiceItem/ServiceItemMobile.js CHANGED
@@ -75,12 +75,12 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
75
75
  });
76
76
  return nodes;
77
77
  };
78
- const renderIcon = (iconKey, size = "14px") => {
78
+ const renderIcon = (iconKey, size = "14px", styles) => {
79
79
  var _a;
80
80
  const iconValue = (_a = serviceItem.icons) === null || _a === void 0 ? void 0 : _a[iconKey];
81
81
  if (iconValue) {
82
82
  if (typeof iconValue === "string") {
83
- return (React.createElement("img", { src: iconValue, alt: iconKey, className: `${`w-[${size}] h-[${size}]`} mr-[5px]`, style: { filter: isSoldOut ? "grayscale" : "" } }));
83
+ return (React.createElement("img", { src: iconValue, alt: iconKey, className: `${`w-[${size}] h-[${size}]`} mr-[5px]`, style: Object.assign({ filter: isSoldOut ? "grayscale" : "" }, (styles || {})) }));
84
84
  }
85
85
  }
86
86
  return null;
@@ -99,10 +99,17 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
99
99
  showTopLabel
100
100
  ? "mt-[20px]"
101
101
  : "mt-[10px]"} `, style: { zIndex: 1 } },
102
- React.createElement("div", { className: `z-1 ${((hasOfferText && isNewUiEnabled) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)) && !isSoldOut
102
+ React.createElement("div", { className: `z-1 ${((hasOfferText && isNewUiEnabled) ||
103
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)) &&
104
+ !isSoldOut
103
105
  ? "rounded-[18px]"
104
106
  : "rounded-[10px] border border-[#ccc]"}`, style: Object.assign(Object.assign({}, serviceCardStyle), { backgroundColor: "#fff" }) },
105
- React.createElement("div", { style: { padding: "12px 12px 8px 12px" } },
107
+ React.createElement("div", { style: {
108
+ padding: "12px 12px 8px 12px",
109
+ marginTop: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) && showTopLabel && isConexion
110
+ ? " 10px"
111
+ : "",
112
+ } },
106
113
  React.createElement("div", { className: "flex justify-between items-center mb-[10px]" },
107
114
  React.createElement("div", { className: "flex items-center justify-center gap-x-4", style: {
108
115
  marginBottom: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDiscount ? "10px" : "",
@@ -129,8 +136,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
129
136
  setIsExpanded(isItemExpanded ? null : serviceItem.id);
130
137
  }, isPeru: isPeru, femaleAnim: serviceItem.icons.femaleAnim, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled })),
131
138
  React.createElement(ServiceBadgesMobile, { showTopLabel: showTopLabel, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, serviceItem: serviceItem, isConexion: isConexion })),
132
- (((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && !isNewUiEnabled)) &&
133
- !isSoldOut && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
139
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && !isNewUiEnabled && !isSoldOut && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
134
140
  background: colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
135
141
  borderRadius: "0 0 14px 14px",
136
142
  zIndex: -1,
@@ -145,7 +151,8 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
145
151
  lineHeight: 1.4,
146
152
  } },
147
153
  React.createElement("span", { className: "whitespace-nowrap min-[380px]:text-[12px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))))))),
148
- (((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && isNewUiEnabled) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)) &&
154
+ (((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && isNewUiEnabled) ||
155
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)) &&
149
156
  !isSoldOut && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
150
157
  background: isSoldOut
151
158
  ? offerGradientWithOpacity
package/dist/styles.css CHANGED
@@ -33,6 +33,9 @@
33
33
  .-top-\[11px\] {
34
34
  top: calc(11px * -1);
35
35
  }
36
+ .-top-\[12px\] {
37
+ top: calc(12px * -1);
38
+ }
36
39
  .-top-\[13px\] {
37
40
  top: calc(13px * -1);
38
41
  }
@@ -237,6 +240,9 @@
237
240
  .mt-\[24px\] {
238
241
  margin-top: 24px;
239
242
  }
243
+ .mt-\[30px\] {
244
+ margin-top: 30px;
245
+ }
240
246
  .-mr-\[12px\] {
241
247
  margin-right: calc(12px * -1);
242
248
  }
@@ -855,9 +861,6 @@
855
861
  .p-\[15px\] {
856
862
  padding: 15px;
857
863
  }
858
- .p-\[15px_15px\] {
859
- padding: 15px 15px;
860
- }
861
864
  .p-\[16px_20px\] {
862
865
  padding: 16px 20px;
863
866
  }
package/dist/ui/OfferBanner.js CHANGED
@@ -3,7 +3,7 @@ import LottiePlayer from "../assets/LottiePlayer";
3
3
  import CommonService from "../utils/CommonService";
4
4
  const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, renderIcon, isLoggedIn, showLoginModal, viewersConfig, getAnimationIcon, showLoginOption, isNewUiEnabled, colors, }) => {
5
5
  var _a, _b, _c, _d;
6
- return (React.createElement("div", { className: "text-white p-[15px_15px] text-left w-full flex items-center absolute -bottom-[44px] pt-[50px] rounded-b-[14px] text-[14px] mt-[10px]", style: {
6
+ return (React.createElement("div", { className: "text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[44px] pt-[50px] rounded-b-[14px] text-[14px] mt-[10px]", style: {
7
7
  background: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && !isNewUiEnabled
8
8
  ? colors === null || colors === void 0 ? void 0 : colors.bottomStripColor
9
9
  : offerGradient,
package/dist/ui/ServiceBadges/ServiceBadges.d.ts CHANGED
@@ -3,7 +3,7 @@ interface ServiceBadgesProps {
3
3
  showTopLabel?: string;
4
4
  isSoldOut: boolean;
5
5
  colors: any;
6
- renderIcon: (iconKey: string, size?: string) => React.ReactNode;
6
+ renderIcon: (iconKey: string, size?: string, styles?: any) => React.ReactNode;
7
7
  translation?: {
8
8
  directService?: string;
9
9
  };
package/dist/ui/ServiceBadges/ServiceBadges.js CHANGED
@@ -8,7 +8,9 @@ const ServiceBadges = ({ showTopLabel, isSoldOut, colors, renderIcon, translatio
8
8
  : `1px solid ${colors.topLabelColor}`,
9
9
  color: isSoldOut ? "#ccc" : colors.topLabelColor,
10
10
  } },
11
- React.createElement("div", { className: isSoldOut ? "grayscale" : "" }, renderIcon("specialDeparture", "12px")),
11
+ renderIcon("specialDeparture", "12px", {
12
+ filter: isSoldOut ? "grayscale(0.5)" : "",
13
+ }),
12
14
  React.createElement("div", null, showTopLabel))),
13
15
  (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: {
14
16
  backgroundColor: "#fff",
package/dist/ui/mobileweb/ServiceBadgesMobile.d.ts CHANGED
@@ -3,7 +3,7 @@ interface ServiceBadgesMobileProps {
3
3
  showTopLabel?: string;
4
4
  isSoldOut: boolean;
5
5
  colors: any;
6
- renderIcon: (iconKey: string, size?: string) => React.ReactNode;
6
+ renderIcon: (iconKey: string, size?: string, styles?: any) => React.ReactNode;
7
7
  translation?: {
8
8
  directService?: string;
9
9
  };
package/dist/ui/mobileweb/ServiceBadgesMobile.js CHANGED
@@ -1,14 +1,14 @@
1
1
  import React from "react";
2
2
  const ServiceBadgesMobile = ({ showTopLabel, isSoldOut, colors, renderIcon, serviceItem, isConexion, }) => {
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
- 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: {
3
+ return (React.createElement("div", { className: "absolute -top-[12px] left-0 w-full flex items-center justify-end gap-[12px] pr-[17px] z-10" },
4
+ showTopLabel && (React.createElement("div", { className: `flex items-center gap-[2p x] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`, style: {
5
5
  backgroundColor: "#fff",
6
6
  border: isSoldOut
7
7
  ? "1px solid #ccc"
8
8
  : `1px solid ${colors.topLabelColor}`,
9
9
  color: isSoldOut ? "#ccc" : colors.topLabelColor,
10
10
  } },
11
- React.createElement("div", { className: isSoldOut ? "grayscale" : "" }, renderIcon("specialDeparture", "12px")),
11
+ React.createElement("div", { className: isSoldOut ? "grayscale" : "", style: { marginTop: "1px" } }, renderIcon("specialDeparture", "12px", { marginTop: "1px" })),
12
12
  React.createElement("div", { style: {
13
13
  color: isSoldOut ? "#ccc" : colors.topLabelColor,
14
14
  } }, showTopLabel))),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "9.9.8",
3
+ "version": "9.9.10",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -243,7 +243,7 @@ function ServiceItemPB({
243
243
  }
244
244
  : {};
245
245
 
246
- const renderIcon = (iconKey: string, size: string = "14px") => {
246
+ const renderIcon = (iconKey: string, size: string = "14px", styles?: any) => {
247
247
  const iconValue = serviceItem.icons?.[iconKey];
248
248
  if (iconValue) {
249
249
  if (typeof iconValue === "string") {
@@ -252,6 +252,9 @@ function ServiceItemPB({
252
252
  src={iconValue}
253
253
  alt={iconKey}
254
254
  className={`${`w-[${size}] h-[${size}]`} `}
255
+ style={{
256
+ ...(styles || {}),
257
+ }}
255
258
  />
256
259
  );
257
260
  }
@@ -484,11 +487,11 @@ function ServiceItemPB({
484
487
  />
485
488
  ) : (
486
489
  <div
487
- className={`relative hover:z-[150] ${hasOfferText || hasDpEnabled ? "mb-[55px]" : "mb-[10px]"} ${
490
+ className={`relative hover:z-[150] ${hasOfferText || hasDpEnabled || isNewUiEnabled ? "mb-[55px]" : "mb-[10px]"} ${
488
491
  serviceItem?.is_direct_trip ||
489
492
  serviceItem?.train_type_label === "Tren Express (Nuevo)" ||
490
493
  showTopLabel
491
- ? "mt-[24px]"
494
+ ? "mt-[30px]"
492
495
  : "mt-[20px]"
493
496
  } `}
494
497
  >
package/src/components/ServiceItem/ServiceItemMobile.tsx CHANGED
@@ -146,7 +146,7 @@ function ServiceItemMobile({
146
146
  return nodes;
147
147
  };
148
148
 
149
- const renderIcon = (iconKey: string, size: string = "14px") => {
149
+ const renderIcon = (iconKey: string, size: string = "14px", styles?: any) => {
150
150
  const iconValue = serviceItem.icons?.[iconKey];
151
151
  if (iconValue) {
152
152
  if (typeof iconValue === "string") {
@@ -155,7 +155,10 @@ function ServiceItemMobile({
155
155
  src={iconValue}
156
156
  alt={iconKey}
157
157
  className={`${`w-[${size}] h-[${size}]`} mr-[5px]`}
158
- style={{ filter: isSoldOut ? "grayscale" : "" }}
158
+ style={{
159
+ filter: isSoldOut ? "grayscale" : "",
160
+ ...(styles || {}),
161
+ }}
159
162
  />
160
163
  );
161
164
  }
@@ -215,13 +218,23 @@ function ServiceItemMobile({
215
218
  >
216
219
  <div
217
220
  className={`z-1 ${
218
- ((hasOfferText && isNewUiEnabled) || serviceItem?.is_dp_enabled) && !isSoldOut
221
+ ((hasOfferText && isNewUiEnabled) ||
222
+ serviceItem?.is_dp_enabled) &&
223
+ !isSoldOut
219
224
  ? "rounded-[18px]"
220
225
  : "rounded-[10px] border border-[#ccc]"
221
226
  }`}
222
227
  style={{ ...serviceCardStyle, backgroundColor: "#fff" }}
223
228
  >
224
- <div style={{ padding: "12px 12px 8px 12px" }}>
229
+ <div
230
+ style={{
231
+ padding: "12px 12px 8px 12px",
232
+ marginTop:
233
+ serviceItem?.is_direct_trip && showTopLabel && isConexion
234
+ ? " 10px"
235
+ : "",
236
+ }}
237
+ >
225
238
  {/* Header with operator info and favorite */}
226
239
  <div className="flex justify-between items-center mb-[10px]">
227
240
  <div
@@ -231,7 +244,9 @@ function ServiceItemMobile({
231
244
  serviceItem?.offer_text || hasDiscount ? "10px" : "",
232
245
  }}
233
246
  >
234
- <div className={`w-[115px] ${isFlores ? "" : "overflow-y-hidden"} h-[22px]`}>
247
+ <div
248
+ className={`w-[115px] ${isFlores ? "" : "overflow-y-hidden"} h-[22px]`}
249
+ >
235
250
  <img
236
251
  src={serviceItem.operator_details[0]}
237
252
  alt="service logo"
@@ -371,50 +386,50 @@ function ServiceItemMobile({
371
386
  </div>
372
387
 
373
388
  {/* 🔹 EXPANDABLE DROPDOWN (below the card) */}
374
- {((serviceItem?.offer_text && !isNewUiEnabled)) &&
375
- !isSoldOut && (
389
+ {serviceItem?.offer_text && !isNewUiEnabled && !isSoldOut && (
390
+ <div
391
+ className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
392
+ style={{
393
+ background: colors?.bottomStripColor,
394
+ borderRadius: "0 0 14px 14px",
395
+ zIndex: -1,
396
+ }}
397
+ >
376
398
  <div
377
- className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
378
- style={{
379
- background: colors?.bottomStripColor,
380
- borderRadius: "0 0 14px 14px",
381
- zIndex: -1,
382
- }}
399
+ className="flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]"
400
+ style={{ lineHeight: 1.6 }}
383
401
  >
384
- <div
385
- className="flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]"
386
- style={{ lineHeight: 1.6 }}
387
- >
388
- <div className="flex justify-between items-center">
389
- <div
390
- className={`flex ${(serviceItem?.offer_text || "").length > 10 ? "items-start" : "items-center"}`}
391
- >
392
- <div className={isLongOfferText ? "mt-[2px]" : ""}>
393
- <LottiePlayer
394
- animationData={serviceItem.icons.promoAnim}
395
- width="14px"
396
- height="14px"
397
- />
398
- </div>
399
- <div
400
- className={`ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`}
401
- style={{
402
- color: "#fff",
403
- lineHeight: 1.4,
404
- }}
405
- >
406
- <span className="whitespace-nowrap min-[380px]:text-[12px]">
407
- {serviceItem?.offer_text}
408
- </span>
409
- </div>
410
- </div>
402
+ <div className="flex justify-between items-center">
403
+ <div
404
+ className={`flex ${(serviceItem?.offer_text || "").length > 10 ? "items-start" : "items-center"}`}
405
+ >
406
+ <div className={isLongOfferText ? "mt-[2px]" : ""}>
407
+ <LottiePlayer
408
+ animationData={serviceItem.icons.promoAnim}
409
+ width="14px"
410
+ height="14px"
411
+ />
412
+ </div>
413
+ <div
414
+ className={`ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`}
415
+ style={{
416
+ color: "#fff",
417
+ lineHeight: 1.4,
418
+ }}
419
+ >
420
+ <span className="whitespace-nowrap min-[380px]:text-[12px]">
421
+ {serviceItem?.offer_text}
422
+ </span>
423
+ </div>
411
424
  </div>
412
425
  </div>
413
426
  </div>
414
- )}
427
+ </div>
428
+ )}
415
429
 
416
430
  {/* 🔹 EXPANDABLE DROPDOWN (below the card) */}
417
- {((serviceItem?.offer_text && isNewUiEnabled) || serviceItem?.is_dp_enabled) &&
431
+ {((serviceItem?.offer_text && isNewUiEnabled) ||
432
+ serviceItem?.is_dp_enabled) &&
418
433
  !isSoldOut && (
419
434
  <div
420
435
  className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
package/src/ui/OfferBanner.tsx CHANGED
@@ -38,7 +38,7 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
38
38
  }) => {
39
39
  return (
40
40
  <div
41
- className="text-white p-[15px_15px] text-left w-full flex items-center absolute -bottom-[44px] pt-[50px] rounded-b-[14px] text-[14px] mt-[10px]"
41
+ className="text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[44px] pt-[50px] rounded-b-[14px] text-[14px] mt-[10px]"
42
42
  style={{
43
43
  background:
44
44
  serviceItem?.offer_text && !isNewUiEnabled
package/src/ui/ServiceBadges/ServiceBadges.tsx CHANGED
@@ -4,7 +4,7 @@ interface ServiceBadgesProps {
4
4
  showTopLabel?: string;
5
5
  isSoldOut: boolean;
6
6
  colors: any;
7
- renderIcon: (iconKey: string, size?: string) => React.ReactNode;
7
+ renderIcon: (iconKey: string, size?: string, styles?: any) => React.ReactNode;
8
8
  translation?: {
9
9
  directService?: string;
10
10
  };
@@ -36,9 +36,11 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
36
36
  color: isSoldOut ? "#ccc" : colors.topLabelColor,
37
37
  }}
38
38
  >
39
- <div className={isSoldOut ? "grayscale" : ""}>
40
- {renderIcon("specialDeparture", "12px")}
41
- </div>
39
+ {/* <div className={isSoldOut ? "grayscale" : ""}> */}
40
+ {renderIcon("specialDeparture", "12px", {
41
+ filter: isSoldOut ? "grayscale(0.5)" : "",
42
+ })}
43
+ {/* </div> */}
42
44
  <div>{showTopLabel}</div>
43
45
  </div>
44
46
  )}
package/src/ui/mobileweb/ServiceBadgesMobile.tsx CHANGED
@@ -4,7 +4,7 @@ interface ServiceBadgesMobileProps {
4
4
  showTopLabel?: string;
5
5
  isSoldOut: boolean;
6
6
  colors: any;
7
- renderIcon: (iconKey: string, size?: string) => React.ReactNode;
7
+ renderIcon: (iconKey: string, size?: string, styles?: any) => React.ReactNode;
8
8
  translation?: {
9
9
  directService?: string;
10
10
  };
@@ -24,10 +24,10 @@ const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
24
24
  isConexion,
25
25
  }) => {
26
26
  return (
27
- <div className="absolute -top-[10px] left-0 w-full flex items-center justify-end gap-[12px] pr-[17px] z-10">
27
+ <div className="absolute -top-[12px] left-0 w-full flex items-center justify-end gap-[12px] pr-[17px] z-10">
28
28
  {showTopLabel && (
29
29
  <div
30
- className={`flex items-center gap-[2px] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`}
30
+ className={`flex items-center gap-[2p x] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] z-20`}
31
31
  style={{
32
32
  backgroundColor: "#fff",
33
33
  border: isSoldOut
@@ -36,8 +36,11 @@ const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
36
36
  color: isSoldOut ? "#ccc" : colors.topLabelColor,
37
37
  }}
38
38
  >
39
- <div className={isSoldOut ? "grayscale" : ""}>
40
- {renderIcon("specialDeparture", "12px")}
39
+ <div
40
+ className={isSoldOut ? "grayscale" : ""}
41
+ style={{ marginTop: "1px" }}
42
+ >
43
+ {renderIcon("specialDeparture", "12px", { marginTop: "1px" })}
41
44
  </div>
42
45
  <div
43
46
  style={{