kupos-ui-components-lib 10.2.10 → 10.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/components/ServiceItem/ServiceItemDesktop.js +6 -5
  2. package/dist/components/ServiceItem/ServiceItemMobile.js +18 -7
  3. package/dist/ui/OfferBanner.js +4 -4
  4. package/package.json +1 -1
  5. package/src/components/ServiceItem/ServiceItemDesktop.tsx +27 -22
  6. package/src/components/ServiceItem/ServiceItemMobile.tsx +104 -94
  7. package/src/ui/OfferBanner.tsx +5 -2
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -156,7 +156,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
156
156
  const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true;
157
157
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
158
158
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
159
- const serviceCardStyle = ((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
159
+ const serviceCardStyle = (isNewUiEnabled || hasDpEnabled) && !isSoldOut
160
160
  ? {
161
161
  borderColor: "transparent",
162
162
  borderStyle: "solid",
@@ -298,10 +298,11 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
298
298
  showTopLabel
299
299
  ? "mt-[25px]"
300
300
  : "mt-[20px]"} ` },
301
- ((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, isLinatal: isLinatal, coachKey: coachKey, isExpand: isExpand })),
302
- React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
301
+ ((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || hasDpEnabled || isNewUiEnabled) &&
302
+ !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, isLinatal: isLinatal, coachKey: coachKey, isExpand: isItemExpanded })),
303
+ React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${(isNewUiEnabled || hasDpEnabled) && !isSoldOut
303
304
  ? "z-[3] rounded-[18px]"
304
- : "rounded-[10px] border border-[#ccc]"}`, style: serviceCardStyle },
305
+ : "rounded-[10px] border border-[#ccc]"}`, style: Object.assign(Object.assign({}, serviceCardStyle), { zIndex: hasOfferText ? 1 : undefined }) },
305
306
  React.createElement("div", { className: " pt-[20px]", style: {
306
307
  padding: hasDpEnabled || (isNewUiEnabled && !isSoldOut)
307
308
  ? "20px 15px 10px 15px"
@@ -344,7 +345,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
344
345
  gridTemplateRows: isItemExpanded ? "1fr" : "0fr",
345
346
  transition: "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
346
347
  position: "relative",
347
- zIndex: hasDiscount || hasDpEnabled ? 0 : -1,
348
+ zIndex: hasDiscount || hasDpEnabled || hasOfferText ? 0 : -1,
348
349
  marginTop: isItemExpanded ? "" : "-10px",
349
350
  } },
350
351
  React.createElement("div", { style: Object.assign({ overflow: "hidden", minHeight: 0, marginTop: hasDpEnabled || hasDiscount ? "" : "-10px" }, (hasDpEnabled || hasDiscount
package/dist/components/ServiceItem/ServiceItemMobile.js CHANGED
@@ -30,10 +30,11 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
30
30
  const discountedSeats = seats.map((seat) => (Object.assign(Object.assign({}, seat), commonService.calculateDiscountedPrice(seat.fare, serviceItem))));
31
31
  const hasDiscount = discountedSeats.some((seat) => seat.originalPrice !== seat.discountedPrice);
32
32
  const isLongOfferText = (((_d = serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) === null || _d === void 0 ? void 0 : _d.length) || 0) > 35;
33
+ const hasDpEnabled = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) === true;
33
34
  const hasOfferText = Boolean(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text);
34
35
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
35
36
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
36
- const serviceCardStyle = (hasOfferText && isNewUiEnabled) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
37
+ const serviceCardStyle = isNewUiEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
37
38
  ? {
38
39
  borderColor: isSoldOut ? "#ccc" : "transparent",
39
40
  borderStyle: "solid",
@@ -166,9 +167,7 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
166
167
  lineHeight: 1.4,
167
168
  } },
168
169
  React.createElement("span", { className: "whitespace-nowrap min-[380px]:text-[12px]" }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))))))),
169
- (((serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) && isNewUiEnabled) ||
170
- (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)) &&
171
- !isSoldOut && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
170
+ (isNewUiEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)) && !isSoldOut && (React.createElement("div", { className: "px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]", style: {
172
171
  background: isSoldOut
173
172
  ? offerGradientWithOpacity
174
173
  : offerGradient,
@@ -219,13 +218,25 @@ function ServiceItemMobile({ serviceItem, onBookButtonPress, colors, busStage, o
219
218
  opacity: isItemExpanded ? 1 : 0,
220
219
  transition: "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
221
220
  position: "relative",
222
- zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ? -2 : -1,
221
+ zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ||
222
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled) ||
223
+ isNewUiEnabled
224
+ ? -2
225
+ : -1,
223
226
  } },
224
227
  React.createElement("div", { style: {
225
228
  overflow: "hidden",
226
229
  minHeight: 0,
227
- position: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "relative" : undefined,
228
- zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? -3 : undefined,
230
+ position: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ||
231
+ isNewUiEnabled ||
232
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
233
+ ? "relative"
234
+ : undefined,
235
+ zIndex: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ||
236
+ isNewUiEnabled ||
237
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.is_dp_enabled)
238
+ ? -3
239
+ : undefined,
229
240
  marginTop: (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) ? "-15px" : "-10px",
230
241
  } },
231
242
  React.createElement(ExpandedDropdownMobile, { serviceItem: serviceItem, isPeru: isPeru, petSeatInfo: serviceItem.pet_seat_info, petFriendlyAnim: serviceItem.icons.petFriendlyAnim, isSoldOut: isSoldOut, isChangeTicket: serviceItem.is_change_ticket === true, ladiesBookedSeats: serviceItem.ladies_booked_seats, isDpEnabled: serviceItem.is_dp_enabled, femaleAnim: serviceItem.icons.femaleAnim, flexibleAnim: serviceItem.icons.flexibleAnim, renderIcon: renderIcon, operatorLabel: operatorLabel })))))));
package/dist/ui/OfferBanner.js CHANGED
@@ -18,14 +18,14 @@ const AnimationIcon = ({ getAnimationIcon, name, width = "18px", height = "18px"
18
18
  const PopularServiceBanner = ({ getAnimationIcon }) => (React.createElement("div", { className: "flex items-center gap-[5px]" },
19
19
  React.createElement(AnimationIcon, { getAnimationIcon: getAnimationIcon, name: "starAnimation" }),
20
20
  React.createElement("span", null, "Servicio popular entre los usuarios")));
21
- const NewUiOfferBanner = ({ offerText, isLoggedIn, showLoginModal, showLoginOption, getAnimationIcon, hideRegister, }) => (React.createElement("div", { className: "flex items-center" },
21
+ const NewUiOfferBanner = ({ offerText, isLoggedIn, showLoginModal, showLoginOption, getAnimationIcon, hideRegister, isNewUiEnabled, }) => (React.createElement("div", { className: "flex items-center" },
22
22
  React.createElement(AnimationIcon, { getAnimationIcon: getAnimationIcon, name: "bombAnimation" }),
23
23
  React.createElement("div", { className: "flex items-center mt-[2px]" },
24
24
  React.createElement("span", { className: "bold-text", style: { marginLeft: offerText ? "6px" : "3px" } },
25
25
  truncateOfferText(offerText),
26
26
  " ",
27
27
  !hideRegister &&
28
- (isLoggedIn && showLoginOption
28
+ ((isLoggedIn && showLoginOption) || isNewUiEnabled
29
29
  ? null
30
30
  : showLoginOption && (React.createElement("span", { onClick: showLoginModal, className: "cursor-pointer" }, "- registro"))),
31
31
  " ",
@@ -66,8 +66,8 @@ const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, showLo
66
66
  return React.createElement(PopularServiceBanner, { getAnimationIcon: getAnimationIcon });
67
67
  }
68
68
  const hasDp = hasDpDiscounts(serviceItem);
69
- if (hasDp || (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text))) {
70
- return (React.createElement(NewUiOfferBanner, { offerText: serviceItem.offer_text || "", isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, showLoginOption: showLoginOption, getAnimationIcon: getAnimationIcon, hideRegister: hasDp }));
69
+ if (hasDp || isNewUiEnabled || (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text)) {
70
+ return (React.createElement(NewUiOfferBanner, { offerText: serviceItem.offer_text || "", isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, showLoginOption: showLoginOption, getAnimationIcon: getAnimationIcon, hideRegister: hasDp, isNewUiEnabled: isNewUiEnabled }));
71
71
  }
72
72
  if (isLegacyOffer) {
73
73
  return (React.createElement(LegacyOfferBanner, { offerText: serviceItem.offer_text, getAnimationIcon: getAnimationIcon }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "10.2.10",
3
+ "version": "10.3.1",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -269,8 +269,9 @@ function ServiceItemPB({
269
269
 
270
270
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
271
271
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
272
+
272
273
  const serviceCardStyle: React.CSSProperties =
273
- ((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
274
+ (isNewUiEnabled || hasDpEnabled) && !isSoldOut
274
275
  ? {
275
276
  borderColor: "transparent",
276
277
  borderStyle: "solid",
@@ -543,32 +544,36 @@ function ServiceItemPB({
543
544
  : "mt-[20px]"
544
545
  } `}
545
546
  >
546
- {(serviceItem?.offer_text || hasDpEnabled) && !isSoldOut && (
547
- <OfferBanner
548
- offerGradient={offerGradient}
549
- isSoldOut={isSoldOut}
550
- serviceItem={serviceItem}
551
- renderIcon={renderIcon}
552
- isLoggedIn={isLoggedIn}
553
- showLoginModal={showLoginModal}
554
- viewersConfig={viewersConfig}
555
- getAnimationIcon={getAnimationIcon}
556
- showLoginOption={showLoginOption}
557
- isNewUiEnabled={isNewUiEnabled}
558
- colors={colors}
559
- isLinatal={isLinatal}
560
- coachKey={coachKey}
561
- isExpand={isExpand}
562
- />
563
- )}
547
+ {(serviceItem?.offer_text || hasDpEnabled || isNewUiEnabled) &&
548
+ !isSoldOut && (
549
+ <OfferBanner
550
+ offerGradient={offerGradient}
551
+ isSoldOut={isSoldOut}
552
+ serviceItem={serviceItem}
553
+ renderIcon={renderIcon}
554
+ isLoggedIn={isLoggedIn}
555
+ showLoginModal={showLoginModal}
556
+ viewersConfig={viewersConfig}
557
+ getAnimationIcon={getAnimationIcon}
558
+ showLoginOption={showLoginOption}
559
+ isNewUiEnabled={isNewUiEnabled}
560
+ colors={colors}
561
+ isLinatal={isLinatal}
562
+ coachKey={coachKey}
563
+ isExpand={isItemExpanded}
564
+ />
565
+ )}
564
566
  <div
565
567
  id={`service-card-${serviceItem.id}`}
566
568
  className={`bg-white mx-auto relative ${
567
- ((hasOfferText && isNewUiEnabled) || hasDpEnabled) && !isSoldOut
569
+ (isNewUiEnabled || hasDpEnabled) && !isSoldOut
568
570
  ? "z-[3] rounded-[18px]"
569
571
  : "rounded-[10px] border border-[#ccc]"
570
572
  }`}
571
- style={serviceCardStyle}
573
+ style={{
574
+ ...serviceCardStyle,
575
+ zIndex: hasOfferText ? 1 : undefined,
576
+ }}
572
577
  >
573
578
  <div
574
579
  className=" pt-[20px]"
@@ -730,7 +735,7 @@ function ServiceItemPB({
730
735
  transition:
731
736
  "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
732
737
  position: "relative",
733
- zIndex: hasDiscount || hasDpEnabled ? 0 : -1,
738
+ zIndex: hasDiscount || hasDpEnabled || hasOfferText ? 0 : -1,
734
739
  marginTop: isItemExpanded ? "" : "-10px",
735
740
  }}
736
741
  >
package/src/components/ServiceItem/ServiceItemMobile.tsx CHANGED
@@ -87,12 +87,13 @@ function ServiceItemMobile({
87
87
  );
88
88
 
89
89
  const isLongOfferText = (serviceItem?.offer_text?.length || 0) > 35;
90
+ const hasDpEnabled = serviceItem?.is_dp_enabled === true;
90
91
 
91
92
  const hasOfferText = Boolean(serviceItem?.offer_text);
92
93
  const offerGradient = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"} 0%, ${colors.leftGradiantColor || "#ff8842"} 100%)`;
93
94
  const offerGradientWithOpacity = `linear-gradient(90deg, ${colors.rightGradiantColor || "#ff5964"}80 0%, ${colors.leftGradiantColor || "#ff8842"}80 100%)`;
94
95
  const serviceCardStyle: React.CSSProperties =
95
- (hasOfferText && isNewUiEnabled) || serviceItem?.is_dp_enabled
96
+ isNewUiEnabled || serviceItem?.is_dp_enabled
96
97
  ? {
97
98
  borderColor: isSoldOut ? "#ccc" : "transparent",
98
99
  borderStyle: "solid",
@@ -456,118 +457,113 @@ function ServiceItemMobile({
456
457
  )}
457
458
 
458
459
  {/* 🔹 EXPANDABLE DROPDOWN (below the card) */}
459
- {((serviceItem?.offer_text && isNewUiEnabled) ||
460
- serviceItem?.is_dp_enabled) &&
461
- !isSoldOut && (
460
+ {(isNewUiEnabled || serviceItem?.is_dp_enabled) && !isSoldOut && (
461
+ <div
462
+ className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
463
+ style={{
464
+ background: isSoldOut
465
+ ? offerGradientWithOpacity
466
+ : offerGradient,
467
+ // opacity: isSoldOut ? 0.5 : 1,
468
+ borderRadius: "0 0 14px 14px",
469
+ zIndex: -1,
470
+ }}
471
+ >
462
472
  <div
463
- className="px-[12px] pt-[22px] pb-[8px] relative -z-9 -mt-[15px]"
464
- style={{
465
- background: isSoldOut
466
- ? offerGradientWithOpacity
467
- : offerGradient,
468
- // opacity: isSoldOut ? 0.5 : 1,
469
- borderRadius: "0 0 14px 14px",
470
- zIndex: -1,
471
- }}
473
+ className="flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]"
474
+ style={{ lineHeight: 1.6 }}
472
475
  >
473
- <div
474
- className="flex flex-col gap-[8px] text-[12px] min-[420px]:text-[12px] text-[#464647]"
475
- style={{ lineHeight: 1.6 }}
476
- >
477
- <div className="flex justify-between items-center">
478
- {serviceItem?.is_dp_enabled &&
479
- Object.keys(serviceItem?.dp_discount_percents ?? {})
480
- .length === 0 &&
481
- (serviceItem?.dp_discounted_seats ?? []).length === 0 ? (
482
- <div className="flex items-center gap-[6px]">
483
- {/* {renderIcon("whiteFireIcon", "14px")} */}
476
+ <div className="flex justify-between items-center">
477
+ {serviceItem?.is_dp_enabled &&
478
+ Object.keys(serviceItem?.dp_discount_percents ?? {})
479
+ .length === 0 &&
480
+ (serviceItem?.dp_discounted_seats ?? []).length === 0 ? (
481
+ <div className="flex items-center gap-[6px]">
482
+ {/* {renderIcon("whiteFireIcon", "14px")} */}
483
+ <LottiePlayer
484
+ animationData={serviceItem.icons.starAnimation}
485
+ width="14px"
486
+ height="14px"
487
+ />
488
+
489
+ <span className="text-[#fff]">Más elegido</span>
490
+ </div>
491
+ ) : (
492
+ <div
493
+ className={`flex ${(serviceItem?.offer_text || "").length > 10 ? "items-start" : "items-center"}`}
494
+ >
495
+ <div className={isLongOfferText ? "mt-[2px]" : ""}>
484
496
  <LottiePlayer
485
- animationData={serviceItem.icons.starAnimation}
497
+ animationData={serviceItem.icons.bombAnim}
486
498
  width="14px"
487
499
  height="14px"
488
500
  />
489
-
490
- <span className="text-[#fff]">Más elegido</span>
491
501
  </div>
492
- ) : (
493
502
  <div
494
- className={`flex ${(serviceItem?.offer_text || "").length > 10 ? "items-start" : "items-center"}`}
503
+ className={`ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`}
504
+ style={{
505
+ color: "#fff",
506
+ lineHeight: 1.4,
507
+ }}
495
508
  >
496
- <div className={isLongOfferText ? "mt-[2px]" : ""}>
497
- <LottiePlayer
498
- animationData={serviceItem.icons.bombAnim}
499
- width="14px"
500
- height="14px"
509
+ <span className="whitespace-nowrap min-[380px]:text-[12px]">
510
+ Termina en&nbsp;
511
+ <span
512
+ className="bold-text"
513
+ ref={(node) =>
514
+ commonService.startCountdown(node, 599)
515
+ }
516
+ style={{
517
+ fontVariantNumeric: "tabular-nums",
518
+ display: "inline-block",
519
+ }}
501
520
  />
502
- </div>
503
- <div
504
- className={`ml-[4px] flex-1 outline-none ${isLongOfferText ? "mt-[2px]" : ""}`}
505
- style={{
506
- color: "#fff",
507
- lineHeight: 1.4,
508
- }}
509
- >
510
- <span className="whitespace-nowrap min-[380px]:text-[12px]">
511
- Termina en&nbsp;
512
- <span
513
- className="bold-text"
514
- ref={(node) =>
515
- commonService.startCountdown(node, 599)
516
- }
517
- style={{
518
- fontVariantNumeric: "tabular-nums",
519
- display: "inline-block",
520
- }}
521
- />
522
- </span>
523
- </div>
521
+ </span>
524
522
  </div>
525
- )}
526
- <div
527
- className="flex flex-col items-end"
528
- style={{
529
- color: "#fff",
530
- }}
531
- >
532
- <div className="flex items-center">
533
- <div className="mr-[4px]">
534
- {" "}
535
- <LottiePlayer
536
- animationData={serviceItem.icons.dotAnimation}
537
- width="12px"
538
- height="12px"
539
- />
540
- </div>
541
- <span className="flex-1" style={{ lineHeight: 1.4 }}>
523
+ </div>
524
+ )}
525
+ <div
526
+ className="flex flex-col items-end"
527
+ style={{
528
+ color: "#fff",
529
+ }}
530
+ >
531
+ <div className="flex items-center">
532
+ <div className="mr-[4px]">
533
+ {" "}
534
+ <LottiePlayer
535
+ animationData={serviceItem.icons.dotAnimation}
536
+ width="12px"
537
+ height="12px"
538
+ />
539
+ </div>
540
+ <span className="flex-1" style={{ lineHeight: 1.4 }}>
541
+ <span
542
+ className="bold-text"
543
+ ref={(node) =>
544
+ commonService.startViewerCount(node, viewersConfig)
545
+ }
546
+ style={{ fontVariantNumeric: "tabular-nums" }}
547
+ />{" "}
548
+ <span> viendo</span> |{" "}
549
+ <span className="whitespace-nowrap">
550
+ {/* {serviceItem?.is_dp_enabled ? null : "Quedan pocos • "} */}
542
551
  <span
543
552
  className="bold-text"
544
553
  ref={(node) =>
545
- commonService.startViewerCount(
546
- node,
547
- viewersConfig,
548
- )
554
+ commonService.startComprandoCount(node, 4, 16)
549
555
  }
550
556
  style={{ fontVariantNumeric: "tabular-nums" }}
551
557
  />{" "}
552
- <span> viendo</span> |{" "}
553
- <span className="whitespace-nowrap">
554
- {/* {serviceItem?.is_dp_enabled ? null : "Quedan pocos • "} */}
555
- <span
556
- className="bold-text"
557
- ref={(node) =>
558
- commonService.startComprandoCount(node, 4, 16)
559
- }
560
- style={{ fontVariantNumeric: "tabular-nums" }}
561
- />{" "}
562
- comprando
563
- </span>
558
+ comprando
564
559
  </span>
565
- </div>
560
+ </span>
566
561
  </div>
567
562
  </div>
568
563
  </div>
569
564
  </div>
570
- )}
565
+ </div>
566
+ )}
571
567
  <div
572
568
  style={{
573
569
  display: "grid",
@@ -577,15 +573,29 @@ function ServiceItemMobile({
577
573
  "grid-template-rows 0.3s ease-in-out, opacity 0.25s ease-in-out",
578
574
  position: "relative",
579
575
  zIndex:
580
- serviceItem?.offer_text || serviceItem?.is_dp_enabled ? -2 : -1,
576
+ serviceItem?.offer_text ||
577
+ serviceItem?.is_dp_enabled ||
578
+ isNewUiEnabled
579
+ ? -2
580
+ : -1,
581
581
  }}
582
582
  >
583
583
  <div
584
584
  style={{
585
585
  overflow: "hidden",
586
586
  minHeight: 0,
587
- position: serviceItem?.offer_text ? "relative" : undefined,
588
- zIndex: serviceItem?.offer_text ? -3 : undefined,
587
+ position:
588
+ serviceItem?.offer_text ||
589
+ isNewUiEnabled ||
590
+ serviceItem?.is_dp_enabled
591
+ ? "relative"
592
+ : undefined,
593
+ zIndex:
594
+ serviceItem?.offer_text ||
595
+ isNewUiEnabled ||
596
+ serviceItem?.is_dp_enabled
597
+ ? -3
598
+ : undefined,
589
599
  marginTop: serviceItem?.offer_text ? "-15px" : "-10px",
590
600
  }}
591
601
  >
package/src/ui/OfferBanner.tsx CHANGED
@@ -91,6 +91,7 @@ interface NewUiOfferBannerProps {
91
91
  showLoginOption?: boolean;
92
92
  getAnimationIcon: OfferBannerProps["getAnimationIcon"];
93
93
  hideRegister?: boolean;
94
+ isNewUiEnabled?: any;
94
95
  }
95
96
 
96
97
  const NewUiOfferBanner: React.FC<NewUiOfferBannerProps> = ({
@@ -100,6 +101,7 @@ const NewUiOfferBanner: React.FC<NewUiOfferBannerProps> = ({
100
101
  showLoginOption,
101
102
  getAnimationIcon,
102
103
  hideRegister,
104
+ isNewUiEnabled,
103
105
  }) => (
104
106
  <div className="flex items-center">
105
107
  <AnimationIcon getAnimationIcon={getAnimationIcon} name="bombAnimation" />
@@ -110,7 +112,7 @@ const NewUiOfferBanner: React.FC<NewUiOfferBannerProps> = ({
110
112
  >
111
113
  {truncateOfferText(offerText)}{" "}
112
114
  {!hideRegister &&
113
- (isLoggedIn && showLoginOption
115
+ ((isLoggedIn && showLoginOption) || isNewUiEnabled
114
116
  ? null
115
117
  : showLoginOption && (
116
118
  <span onClick={showLoginModal} className="cursor-pointer">
@@ -232,7 +234,7 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
232
234
 
233
235
  const hasDp = hasDpDiscounts(serviceItem);
234
236
 
235
- if (hasDp || (isNewUiEnabled && serviceItem?.offer_text)) {
237
+ if (hasDp || isNewUiEnabled || serviceItem?.offer_text) {
236
238
  return (
237
239
  <NewUiOfferBanner
238
240
  offerText={serviceItem.offer_text || ""}
@@ -241,6 +243,7 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
241
243
  showLoginOption={showLoginOption}
242
244
  getAnimationIcon={getAnimationIcon}
243
245
  hideRegister={hasDp}
246
+ isNewUiEnabled={isNewUiEnabled}
244
247
  />
245
248
  );
246
249
  }