kupos-ui-components-lib 10.4.22 → 10.4.25

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 (11) hide show
  1. package/dist/components/ServiceItem/PeruServiceItemDesktop.js +11 -8
  2. package/dist/components/ServiceItem/ServiceItemDesktop.js +1 -1
  3. package/dist/components/ServiceItem/ServiceItemMobile.js +18 -11
  4. package/dist/ui/OfferBanner.js +1 -1
  5. package/dist/ui/PeruOfferBanner.js +5 -4
  6. package/package.json +1 -1
  7. package/src/components/ServiceItem/PeruServiceItemDesktop.tsx +38 -35
  8. package/src/components/ServiceItem/ServiceItemDesktop.tsx +3 -2
  9. package/src/components/ServiceItem/ServiceItemMobile.tsx +106 -95
  10. package/src/ui/OfferBanner.tsx +1 -1
  11. package/src/ui/PeruOfferBanner.tsx +5 -5
package/dist/components/ServiceItem/PeruServiceItemDesktop.js CHANGED
@@ -387,13 +387,19 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
387
387
  render: (React.createElement(FlexibleBlock, { translation: translation, getAnimationIcon: getAnimationIcon, colors: colors, serviceItem: serviceItem, isSoldOut: isSoldOut })),
388
388
  },
389
389
  ];
390
+ const seats = removeDuplicateSeats
391
+ ? ((_c = serviceItem.seat_types) === null || _c === void 0 ? void 0 : _c.filter((seat, index, self) => index === self.findIndex((s) => s.label === seat.label))) || []
392
+ : serviceItem.seat_types || [];
393
+ const discountedSeats = seats.map((seat) => (Object.assign(Object.assign({}, seat), CommonService.calculateDiscountedPrice(seat.fare, serviceItem))));
394
+ const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
390
395
  const otherItems = items.filter((i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition);
391
396
  const isItemExpanded = serviceItem.id === isExpand || isExpand === true;
392
397
  const grayscaleClass = isSoldOut ? "grayscale" : "";
393
398
  const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text);
394
399
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
395
400
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
396
- const serviceCardStyle = ((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
401
+ const serviceCardStyle = (hasOfferText || isNewUiEnabled || hasDpEnabled || hasDiscount) &&
402
+ !isSoldOut
397
403
  ? {
398
404
  borderColor: "transparent",
399
405
  borderStyle: "solid",
@@ -403,18 +409,15 @@ function PeruServiceItemDesktop({ serviceItem, onBookButtonPress, colors, metaDa
403
409
  // zIndex: 1,
404
410
  }
405
411
  : {};
406
- const seats = removeDuplicateSeats
407
- ? ((_c = serviceItem.seat_types) === null || _c === void 0 ? void 0 : _c.filter((seat, index, self) => index === self.findIndex((s) => s.label === seat.label))) || []
408
- : serviceItem.seat_types || [];
409
- const discountedSeats = seats.map((seat) => (Object.assign(Object.assign({}, seat), CommonService.calculateDiscountedPrice(seat.fare, serviceItem))));
410
- const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
411
412
  return (React.createElement("div", { className: `relative hover:z-[150] ${(hasOfferText || hasDpEnabled || isNewUiEnabled) && !isSoldOut ? "mb-[65px]" : "mb-[20px]"} ${(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_direct_trip) ||
412
413
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.train_type_label) === "Tren Express (Nuevo)" ||
413
414
  showTopLabel
414
415
  ? "mt-[30px]"
415
416
  : "mt-[20px]"} ` },
416
- ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDpEnabled) && !isSoldOut && (React.createElement(PeruOfferBanner, { offerGradient: offerGradient, isSoldOut: isSoldOut, serviceItem: serviceItem, renderIcon: renderIcon, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon, showLoginOption: showLoginOption, colors: colors, coachKey: coachKey, isExpand: isExpand, isNewUiEnabled: isNewUiEnabled })),
417
- React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
417
+ ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDpEnabled || hasDiscount) &&
418
+ !isSoldOut && (React.createElement(PeruOfferBanner, { offerGradient: offerGradient, isSoldOut: isSoldOut, serviceItem: serviceItem, renderIcon: renderIcon, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, viewersConfig: viewersConfig, getAnimationIcon: getAnimationIcon, showLoginOption: showLoginOption, colors: colors, coachKey: coachKey, isExpand: isExpand, isNewUiEnabled: isNewUiEnabled })),
419
+ React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${(hasOfferText || isNewUiEnabled || hasDiscount || hasDpEnabled) &&
420
+ !isSoldOut
418
421
  ? "z-[3] rounded-[18px]"
419
422
  : "rounded-[10px] border border-[#ccc]"}`, style: serviceCardStyle },
420
423
  React.createElement("div", { className: " pt-[20px]", style: {
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -139,7 +139,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
139
139
  const grayscaleClass = isSoldOut ? "grayscale" : "";
140
140
  const isDiscountBelow20 = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) > 0 &&
141
141
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) < 20;
142
- const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && !isDiscountBelow20;
142
+ const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text);
143
143
  const isNewUiEnabledPeru = ((_b = (_a = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discounts) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.new_ui_enabled) === true;
144
144
  const isNewUiEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.new_ui_enabled) === true;
145
145
  const seats = removeDuplicateSeats
package/dist/components/ServiceItem/ServiceItemMobile.js CHANGED
@@ -32,11 +32,13 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
32
32
  const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
33
33
  const isLongOfferText = (((_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) === null || _d === void 0 ? void 0 : _d.length) || 0) > 35;
34
34
  const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true;
35
- const isDiscountBelow20 = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) > 0 && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) < 20;
36
- const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && !isDiscountBelow20;
35
+ const isDiscountBelow20 = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) > 0 &&
36
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) < 20;
37
+ const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text);
37
38
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
38
39
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
39
- const serviceCardStyle = (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) || ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
40
+ const serviceCardStyle = (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
41
+ ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
40
42
  ? {
41
43
  borderColor: isSoldOut ? "#ccc" : "transparent",
42
44
  borderStyle: "solid",
@@ -126,7 +128,8 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
126
128
  ? "mt-[20px]"
127
129
  : "mt-[10px]"} `, style: { zIndex: 1 } },
128
130
  React.createElement("div", { className: `z-1 ${((isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
129
- ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))) &&
131
+ ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
132
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))) &&
130
133
  !isSoldOut
131
134
  ? "rounded-[18px]"
132
135
  : "rounded-[10px] border border-[#ccc]"}`, style: Object.assign(Object.assign({}, serviceCardStyle), { backgroundColor: "#fff" }) },
@@ -163,7 +166,8 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
163
166
  }, isPeru: isPeru, femaleAnim: serviceItem.icons.femaleAnim, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, isTrain: isTrain })),
164
167
  React.createElement(ServiceBadgesMobile, { showTopLabel: showTopLabel || undefined, isSoldOut: isSoldOut, colors: colors, renderIcon: renderIcon, serviceItem: serviceItem, isConexion: isConexion, isAllinBus: isAllinBus, boardingName: boardingName })),
165
168
  hasOfferText &&
166
- (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1) &&
169
+ isNewUiEnabled &&
170
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 &&
167
171
  !isSoldOut &&
168
172
  !(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: {
169
173
  background: colors === null || colors === void 0 ? void 0 : colors.bottomStripColor,
@@ -180,7 +184,10 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
180
184
  lineHeight: 1.4,
181
185
  } },
182
186
  React.createElement("span", { className: "whitespace-nowrap min-[380px]:text-[12px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))))))),
183
- ((isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) || ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))) && !isSoldOut && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
187
+ ((isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
188
+ ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
189
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))) &&
190
+ !isSoldOut && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
184
191
  background: isSoldOut
185
192
  ? offerGradientWithOpacity
186
193
  : offerGradient,
@@ -232,7 +239,8 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
232
239
  transition: "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
233
240
  position: "relative",
234
241
  zIndex: hasOfferText ||
235
- ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents)) ||
242
+ ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
243
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents)) ||
236
244
  (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2)
237
245
  ? -2
238
246
  : -1,
@@ -240,14 +248,13 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
240
248
  React.createElement("div", { style: {
241
249
  overflow: "hidden",
242
250
  minHeight: 0,
243
- position: hasOfferText ||
244
- isNewUiEnabled ||
245
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
251
+ position: hasOfferText || isNewUiEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
246
252
  ? "relative"
247
253
  : undefined,
248
254
  zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ||
249
255
  (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
250
- ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
256
+ ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) &&
257
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
251
258
  ? -3
252
259
  : undefined,
253
260
  marginTop: hasOfferText ? "-15px" : "-10px",
package/dist/ui/OfferBanner.js CHANGED
@@ -59,7 +59,7 @@ const ViewersCount = ({ serviceItem, viewersConfig, getAnimationIcon, }) => {
59
59
  const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, showLoginModal, viewersConfig, getAnimationIcon, showLoginOption, isNewUiEnabled, colors, isLinatal, coachKey, isExpand, }) => {
60
60
  const isDiscountBelow20 = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) > 0 &&
61
61
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) < 20;
62
- const offerText = isDiscountBelow20 ? "" : (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "";
62
+ const offerText = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "";
63
63
  const isLegacyOffer = !!offerText &&
64
64
  isNewUiEnabled &&
65
65
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 &&
package/dist/ui/PeruOfferBanner.js CHANGED
@@ -60,8 +60,7 @@ const PeruOfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, sh
60
60
  const isDiscountBelow20 = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) > 0 &&
61
61
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) < 20;
62
62
  const offerText = isDiscountBelow20 ? "" : (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "";
63
- const isLegacyOffer = !!offerText &&
64
- !isNewUiEnabled;
63
+ const isLegacyOffer = !!offerText && !isNewUiEnabled;
65
64
  // const showViewers = serviceItem?.is_dp_enabled;
66
65
  const showViewers = isNewUiEnabled;
67
66
  const background = isLegacyOffer ? colors === null || colors === void 0 ? void 0 : colors.bottomStripColor : offerGradient;
@@ -71,7 +70,7 @@ const PeruOfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, sh
71
70
  return React.createElement(PopularServiceBanner, { getAnimationIcon: getAnimationIcon });
72
71
  }
73
72
  // If new UI is enabled, show offer with registro and countdown
74
- if (isNewUiEnabled && offerText) {
73
+ if (isNewUiEnabled || offerText || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value)) {
75
74
  return (React.createElement(OfferBannerContent, { offerText: offerText, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, showLoginOption: showLoginOption, getAnimationIcon: getAnimationIcon, hideRegister: hasDp, showLoginButton: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.show_register_button }));
76
75
  }
77
76
  // If new UI is disabled, show offer text only
@@ -81,7 +80,9 @@ const PeruOfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, sh
81
80
  return null;
82
81
  };
83
82
  return (React.createElement("div", { className: `text-white w-full absolute ${coachKey ? "-bottom-[32px]" : isExpand ? "-bottom-[32px]" : "-bottom-[40px]"} rounded-b-[14px] text-[14px] h-[58px] flex items-end pb-[7px]`, style: {
84
- background: ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))
83
+ background: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ||
84
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents) ||
85
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value)
85
86
  ? offerGradient
86
87
  : background,
87
88
  opacity: isSoldOut ? 0.5 : 1,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "10.4.22",
3
+ "version": "10.4.25",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/PeruServiceItemDesktop.tsx CHANGED
@@ -586,6 +586,22 @@ function PeruServiceItemDesktop({
586
586
  },
587
587
  ];
588
588
 
589
+ const seats = removeDuplicateSeats
590
+ ? serviceItem.seat_types?.filter(
591
+ (seat, index, self) =>
592
+ index === self.findIndex((s) => s.label === seat.label),
593
+ ) || []
594
+ : serviceItem.seat_types || [];
595
+
596
+ const discountedSeats = seats.map((seat) => ({
597
+ ...seat,
598
+ ...CommonService.calculateDiscountedPrice(seat.fare, serviceItem as any),
599
+ }));
600
+
601
+ const hasDiscount = discountedSeats.some(
602
+ (seat) => seat.originalPrice !== seat.discountedPrice,
603
+ );
604
+
589
605
  const otherItems = items.filter(
590
606
  (i) => i.key !== "pet" && i.key !== "flexible" && !!i.condition,
591
607
  );
@@ -598,7 +614,8 @@ function PeruServiceItemDesktop({
598
614
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
599
615
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
600
616
  const serviceCardStyle: React.CSSProperties =
601
- ((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
617
+ (hasOfferText || isNewUiEnabled || hasDpEnabled || hasDiscount) &&
618
+ !isSoldOut
602
619
  ? {
603
620
  borderColor: "transparent",
604
621
  borderStyle: "solid",
@@ -609,22 +626,6 @@ function PeruServiceItemDesktop({
609
626
  }
610
627
  : {};
611
628
 
612
- const seats = removeDuplicateSeats
613
- ? serviceItem.seat_types?.filter(
614
- (seat, index, self) =>
615
- index === self.findIndex((s) => s.label === seat.label),
616
- ) || []
617
- : serviceItem.seat_types || [];
618
-
619
- const discountedSeats = seats.map((seat) => ({
620
- ...seat,
621
- ...CommonService.calculateDiscountedPrice(seat.fare, serviceItem as any),
622
- }));
623
-
624
- const hasDiscount = discountedSeats.some(
625
- (seat) => seat.originalPrice !== seat.discountedPrice,
626
- );
627
-
628
629
  return (
629
630
  <div
630
631
  className={`relative hover:z-[150] ${(hasOfferText || hasDpEnabled || isNewUiEnabled) && !isSoldOut ? "mb-[65px]" : "mb-[20px]"} ${
@@ -635,27 +636,29 @@ function PeruServiceItemDesktop({
635
636
  : "mt-[20px]"
636
637
  } `}
637
638
  >
638
- {(serviceItem?.offer_text || hasDpEnabled) && !isSoldOut && (
639
- <PeruOfferBanner
640
- offerGradient={offerGradient}
641
- isSoldOut={isSoldOut}
642
- serviceItem={serviceItem}
643
- renderIcon={renderIcon}
644
- isLoggedIn={isLoggedIn}
645
- showLoginModal={showLoginModal}
646
- viewersConfig={viewersConfig}
647
- getAnimationIcon={getAnimationIcon}
648
- showLoginOption={showLoginOption}
649
- colors={colors}
650
- coachKey={coachKey}
651
- isExpand={isExpand}
652
- isNewUiEnabled={isNewUiEnabled}
653
- />
654
- )}
639
+ {(serviceItem?.offer_text || hasDpEnabled || hasDiscount) &&
640
+ !isSoldOut && (
641
+ <PeruOfferBanner
642
+ offerGradient={offerGradient}
643
+ isSoldOut={isSoldOut}
644
+ serviceItem={serviceItem}
645
+ renderIcon={renderIcon}
646
+ isLoggedIn={isLoggedIn}
647
+ showLoginModal={showLoginModal}
648
+ viewersConfig={viewersConfig}
649
+ getAnimationIcon={getAnimationIcon}
650
+ showLoginOption={showLoginOption}
651
+ colors={colors}
652
+ coachKey={coachKey}
653
+ isExpand={isExpand}
654
+ isNewUiEnabled={isNewUiEnabled}
655
+ />
656
+ )}
655
657
  <div
656
658
  id={`service-card-${serviceItem.id}`}
657
659
  className={`bg-white mx-auto relative ${
658
- ((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
660
+ (hasOfferText || isNewUiEnabled || hasDiscount || hasDpEnabled) &&
661
+ !isSoldOut
659
662
  ? "z-[3] rounded-[18px]"
660
663
  : "rounded-[10px] border border-[#ccc]"
661
664
  }`}
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -233,8 +233,9 @@ function ServiceItemPB({
233
233
  const isDiscountBelow20 =
234
234
  (serviceItem as any)?.discount_value > 0 &&
235
235
  (serviceItem as any)?.discount_value < 20;
236
- const hasOfferText = Boolean(serviceItem?.offer_text) && !isDiscountBelow20;
237
- const isNewUiEnabledPeru = serviceItem?.discounts?.[0]?.new_ui_enabled === true;
236
+ const hasOfferText = Boolean(serviceItem?.offer_text);
237
+ const isNewUiEnabledPeru =
238
+ serviceItem?.discounts?.[0]?.new_ui_enabled === true;
238
239
  const isNewUiEnabled = serviceItem?.new_ui_enabled === true;
239
240
 
240
241
  const seats = removeDuplicateSeats
package/src/components/ServiceItem/ServiceItemMobile.tsx CHANGED
@@ -92,12 +92,15 @@ function ServiceItemMobile({
92
92
  const isLongOfferText = (serviceItem?.offer_text?.length || 0) > 35;
93
93
  const hasDpEnabled = serviceItem?.is_dp_enabled === true;
94
94
 
95
- const isDiscountBelow20 = (serviceItem as any)?.discount_value > 0 && (serviceItem as any)?.discount_value < 20;
96
- const hasOfferText = Boolean(serviceItem?.offer_text) && !isDiscountBelow20;
95
+ const isDiscountBelow20 =
96
+ (serviceItem as any)?.discount_value > 0 &&
97
+ (serviceItem as any)?.discount_value < 20;
98
+ const hasOfferText = Boolean(serviceItem?.offer_text);
97
99
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
98
100
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
99
101
  const serviceCardStyle: React.CSSProperties =
100
- (isNewUiEnabled && serviceItem?.ui_type === 2) || (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)
102
+ (isNewUiEnabled && serviceItem?.ui_type === 2) ||
103
+ (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)
101
104
  ? {
102
105
  borderColor: isSoldOut ? "#ccc" : "transparent",
103
106
  borderStyle: "solid",
@@ -294,7 +297,8 @@ function ServiceItemMobile({
294
297
  <div
295
298
  className={`z-1 ${
296
299
  ((isNewUiEnabled && serviceItem?.ui_type === 2) ||
297
- (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)) &&
300
+ (serviceItem?.is_dp_enabled &&
301
+ serviceItem?.dp_discount_percents)) &&
298
302
  !isSoldOut
299
303
  ? "rounded-[18px]"
300
304
  : "rounded-[10px] border border-[#ccc]"
@@ -466,7 +470,8 @@ function ServiceItemMobile({
466
470
 
467
471
  {/* 🔹 EXPANDABLE DROPDOWN (below the card) */}
468
472
  {hasOfferText &&
469
- (isNewUiEnabled && serviceItem?.ui_type === 1) &&
473
+ isNewUiEnabled &&
474
+ serviceItem?.ui_type === 1 &&
470
475
  !isSoldOut &&
471
476
  !serviceItem?.is_dp_enabled && (
472
477
  <div
@@ -510,113 +515,119 @@ function ServiceItemMobile({
510
515
  )}
511
516
 
512
517
  {/* 🔹 EXPANDABLE DROPDOWN (below the card) */}
513
- {((isNewUiEnabled && serviceItem?.ui_type === 2) || (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)) && !isSoldOut && (
514
- <div
515
- className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
516
- style={{
517
- background: isSoldOut
518
- ? offerGradientWithOpacity
519
- : offerGradient,
520
- // opacity: isSoldOut ? 0.5 : 1,
521
- borderRadius: "0 0 14px 14px",
522
- zIndex: -1,
523
- }}
524
- >
518
+ {((isNewUiEnabled && serviceItem?.ui_type === 2) ||
519
+ (serviceItem?.is_dp_enabled &&
520
+ serviceItem?.dp_discount_percents)) &&
521
+ !isSoldOut && (
525
522
  <div
526
- className="flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]"
527
- style={{ lineHeight: 1.6 }}
523
+ className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
524
+ style={{
525
+ background: isSoldOut
526
+ ? offerGradientWithOpacity
527
+ : offerGradient,
528
+ // opacity: isSoldOut ? 0.5 : 1,
529
+ borderRadius: "0 0 14px 14px",
530
+ zIndex: -1,
531
+ }}
528
532
  >
529
- <div className="flex justify-between items-center">
530
- {serviceItem?.is_dp_enabled &&
531
- Object.keys(serviceItem?.dp_discount_percents ?? {})
532
- .length === 0 &&
533
- (serviceItem?.dp_discounted_seats ?? []).length === 0 ? (
534
- <div className="flex items-center gap-[6px]">
535
- {/* {renderIcon("whiteFireIcon", "14px")} */}
536
- <LottiePlayer
537
- animationData={serviceItem.icons.starAnimation}
538
- width="14px"
539
- height="14px"
540
- />
541
-
542
- <span className="text-[#fff]">Más elegido</span>
543
- </div>
544
- ) : (
545
- <div
546
- className={`flex ${(serviceItem?.offer_text || "").length > 10 ? "items-start" : "items-center"}`}
547
- >
548
- <div className={isLongOfferText ? "mt-[2px]" : ""}>
533
+ <div
534
+ className="flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]"
535
+ style={{ lineHeight: 1.6 }}
536
+ >
537
+ <div className="flex justify-between items-center">
538
+ {serviceItem?.is_dp_enabled &&
539
+ Object.keys(serviceItem?.dp_discount_percents ?? {})
540
+ .length === 0 &&
541
+ (serviceItem?.dp_discounted_seats ?? []).length === 0 ? (
542
+ <div className="flex items-center gap-[6px]">
543
+ {/* {renderIcon("whiteFireIcon", "14px")} */}
549
544
  <LottiePlayer
550
- animationData={serviceItem.icons.bombAnim}
545
+ animationData={serviceItem.icons.starAnimation}
551
546
  width="14px"
552
547
  height="14px"
553
548
  />
549
+
550
+ <span className="text-[#fff]">Más elegido</span>
554
551
  </div>
552
+ ) : (
555
553
  <div
556
- className={`ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`}
557
- style={{
558
- color: "#fff",
559
- lineHeight: 1.4,
560
- }}
554
+ className={`flex ${(serviceItem?.offer_text || "").length > 10 ? "items-start" : "items-center"}`}
561
555
  >
562
- <span className="whitespace-nowrap min-[380px]:text-[12px]">
563
- Termina en&nbsp;
564
- <span
565
- className="bold-text"
566
- ref={(node) =>
567
- commonService.startCountdown(node, 599)
568
- }
569
- style={{
570
- fontVariantNumeric: "tabular-nums",
571
- display: "inline-block",
572
- }}
556
+ <div className={isLongOfferText ? "mt-[2px]" : ""}>
557
+ <LottiePlayer
558
+ animationData={serviceItem.icons.bombAnim}
559
+ width="14px"
560
+ height="14px"
573
561
  />
574
- </span>
575
- </div>
576
- </div>
577
- )}
578
- <div
579
- className="flex flex-col items-end"
580
- style={{
581
- color: "#fff",
582
- }}
583
- >
584
- <div className="flex items-center">
585
- <div className="mr-[4px]">
586
- {" "}
587
- <LottiePlayer
588
- animationData={serviceItem.icons.dotAnimation}
589
- width="12px"
590
- height="12px"
591
- />
562
+ </div>
563
+ <div
564
+ className={`ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`}
565
+ style={{
566
+ color: "#fff",
567
+ lineHeight: 1.4,
568
+ }}
569
+ >
570
+ <span className="whitespace-nowrap min-[380px]:text-[12px]">
571
+ Termina en&nbsp;
572
+ <span
573
+ className="bold-text"
574
+ ref={(node) =>
575
+ commonService.startCountdown(node, 599)
576
+ }
577
+ style={{
578
+ fontVariantNumeric: "tabular-nums",
579
+ display: "inline-block",
580
+ }}
581
+ />
582
+ </span>
583
+ </div>
592
584
  </div>
593
- <span className="flex-1" style={{ lineHeight: 1.4 }}>
594
- <span
595
- className="bold-text"
596
- ref={(node) =>
597
- commonService.startViewerCount(node, viewersConfig)
598
- }
599
- style={{ fontVariantNumeric: "tabular-nums" }}
600
- />{" "}
601
- <span> viendo</span> |{" "}
602
- <span className="whitespace-nowrap">
603
- {/* {serviceItem?.is_dp_enabled ? null : "Quedan pocos • "} */}
585
+ )}
586
+ <div
587
+ className="flex flex-col items-end"
588
+ style={{
589
+ color: "#fff",
590
+ }}
591
+ >
592
+ <div className="flex items-center">
593
+ <div className="mr-[4px]">
594
+ {" "}
595
+ <LottiePlayer
596
+ animationData={serviceItem.icons.dotAnimation}
597
+ width="12px"
598
+ height="12px"
599
+ />
600
+ </div>
601
+ <span className="flex-1" style={{ lineHeight: 1.4 }}>
604
602
  <span
605
603
  className="bold-text"
606
604
  ref={(node) =>
607
- commonService.startComprandoCount(node, 4, 16)
605
+ commonService.startViewerCount(
606
+ node,
607
+ viewersConfig,
608
+ )
608
609
  }
609
610
  style={{ fontVariantNumeric: "tabular-nums" }}
610
611
  />{" "}
611
- comprando
612
+ <span> viendo</span> |{" "}
613
+ <span className="whitespace-nowrap">
614
+ {/* {serviceItem?.is_dp_enabled ? null : "Quedan pocos • "} */}
615
+ <span
616
+ className="bold-text"
617
+ ref={(node) =>
618
+ commonService.startComprandoCount(node, 4, 16)
619
+ }
620
+ style={{ fontVariantNumeric: "tabular-nums" }}
621
+ />{" "}
622
+ comprando
623
+ </span>
612
624
  </span>
613
- </span>
625
+ </div>
614
626
  </div>
615
627
  </div>
616
628
  </div>
617
629
  </div>
618
- </div>
619
- )}
630
+ )}
620
631
  <div
621
632
  style={{
622
633
  display: "grid",
@@ -627,7 +638,8 @@ function ServiceItemMobile({
627
638
  position: "relative",
628
639
  zIndex:
629
640
  hasOfferText ||
630
- (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents) ||
641
+ (serviceItem?.is_dp_enabled &&
642
+ serviceItem?.dp_discount_percents) ||
631
643
  (isNewUiEnabled && serviceItem?.ui_type === 2)
632
644
  ? -2
633
645
  : -1,
@@ -638,15 +650,14 @@ function ServiceItemMobile({
638
650
  overflow: "hidden",
639
651
  minHeight: 0,
640
652
  position:
641
- hasOfferText ||
642
- isNewUiEnabled ||
643
- serviceItem?.is_dp_enabled
653
+ hasOfferText || isNewUiEnabled || serviceItem?.is_dp_enabled
644
654
  ? "relative"
645
655
  : undefined,
646
656
  zIndex:
647
657
  serviceItem?.offer_text ||
648
658
  (isNewUiEnabled && serviceItem?.ui_type === 2) ||
649
- (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)
659
+ (serviceItem?.is_dp_enabled &&
660
+ serviceItem?.dp_discount_percents)
650
661
  ? -3
651
662
  : undefined,
652
663
  marginTop: hasOfferText ? "-15px" : "-10px",
package/src/ui/OfferBanner.tsx CHANGED
@@ -228,7 +228,7 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
228
228
  const isDiscountBelow20 =
229
229
  (serviceItem as any)?.discount_value > 0 &&
230
230
  (serviceItem as any)?.discount_value < 20;
231
- const offerText = isDiscountBelow20 ? "" : serviceItem?.offer_text || "";
231
+ const offerText = serviceItem?.offer_text || "";
232
232
 
233
233
  const isLegacyOffer =
234
234
  !!offerText &&
package/src/ui/PeruOfferBanner.tsx CHANGED
@@ -223,9 +223,7 @@ const PeruOfferBanner: React.FC<PeruOfferBannerProps> = ({
223
223
  (serviceItem as any)?.discount_value < 20;
224
224
  const offerText = isDiscountBelow20 ? "" : serviceItem?.offer_text || "";
225
225
 
226
- const isLegacyOffer =
227
- !!offerText &&
228
- !isNewUiEnabled;
226
+ const isLegacyOffer = !!offerText && !isNewUiEnabled;
229
227
 
230
228
  // const showViewers = serviceItem?.is_dp_enabled;
231
229
  const showViewers = isNewUiEnabled;
@@ -240,7 +238,7 @@ const PeruOfferBanner: React.FC<PeruOfferBannerProps> = ({
240
238
  }
241
239
 
242
240
  // If new UI is enabled, show offer with registro and countdown
243
- if (isNewUiEnabled && offerText) {
241
+ if (isNewUiEnabled || offerText || (serviceItem as any)?.discount_value) {
244
242
  return (
245
243
  <OfferBannerContent
246
244
  offerText={offerText}
@@ -272,7 +270,9 @@ const PeruOfferBanner: React.FC<PeruOfferBannerProps> = ({
272
270
  className={`text-white w-full absolute ${coachKey ? "-bottom-[32px]" : isExpand ? "-bottom-[32px]" : "-bottom-[40px]"} rounded-b-[14px] text-[14px] h-[58px] flex items-end pb-[7px]`}
273
271
  style={{
274
272
  background:
275
- (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)
273
+ serviceItem?.is_dp_enabled ||
274
+ serviceItem?.dp_discount_percents ||
275
+ (serviceItem as any)?.discount_value
276
276
  ? offerGradient
277
277
  : background,
278
278
  opacity: isSoldOut ? 0.5 : 1,