kupos-ui-components-lib 10.4.27 → 10.4.29

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 (10) hide show
  1. package/dist/components/ServiceItem/ServiceItemDesktop.js +1 -1
  2. package/dist/ui/OfferBanner.d.ts +1 -0
  3. package/dist/ui/OfferBanner.js +5 -4
  4. package/dist/ui/PaymentCardMobile/PaymentCardMobile.js +1 -1
  5. package/dist/ui/SeatSection/SeatSection.js +18 -9
  6. package/package.json +1 -1
  7. package/src/components/ServiceItem/ServiceItemDesktop.tsx +1 -0
  8. package/src/ui/OfferBanner.tsx +6 -1
  9. package/src/ui/PaymentCardMobile/PaymentCardMobile.tsx +1 -1
  10. package/src/ui/SeatSection/SeatSection.tsx +17 -1
package/dist/components/ServiceItem/ServiceItemDesktop.js CHANGED
@@ -317,7 +317,7 @@ function ServiceItemPB({ serviceItem, onBookButtonPress, colors, metaData, child
317
317
  ((isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 && hasOfferText) ||
318
318
  (hasDpEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents)) ||
319
319
  (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2)) &&
320
- !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 })),
320
+ !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, isPeru: isPeru })),
321
321
  React.createElement("div", { id: `service-card-${serviceItem.id}`, className: `bg-white mx-auto relative ${((isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2) ||
322
322
  (hasDpEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.dp_discount_percents))) &&
323
323
  !isSoldOut
package/dist/ui/OfferBanner.d.ts CHANGED
@@ -20,6 +20,7 @@ interface OfferBannerProps {
20
20
  coachKey?: number;
21
21
  isExpand?: any;
22
22
  ui_type?: number;
23
+ isPeru?: boolean;
23
24
  }
24
25
  declare const OfferBanner: React.FC<OfferBannerProps>;
25
26
  export default OfferBanner;
package/dist/ui/OfferBanner.js CHANGED
@@ -18,7 +18,7 @@ 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, isNewUiEnabled, showLoginButton, ui_type, }) => (React.createElement("div", { className: "flex items-center" },
21
+ const NewUiOfferBanner = ({ offerText, isLoggedIn, showLoginModal, showLoginOption, getAnimationIcon, hideRegister, isNewUiEnabled, showLoginButton, ui_type, isPeru, }) => (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" } },
@@ -32,7 +32,8 @@ const NewUiOfferBanner = ({ offerText, isLoggedIn, showLoginModal, showLoginOpti
32
32
  "\u00A0"),
33
33
  " ",
34
34
  offerText && ui_type !== 2 ? "| " : ui_type === 2 ? "" : "",
35
- "Termina en\u00A0",
35
+ ui_type === 2 && isPeru ? offerText : "Termina en",
36
+ "\u00A0",
36
37
  React.createElement("span", { className: "bold-text text-end", ref: (node) => CommonService.startCountdown(node, 599), style: { fontVariantNumeric: "tabular-nums", display: "inline-block" } }))));
37
38
  const LegacyOfferBanner = ({ offerText, getAnimationIcon, }) => (React.createElement("div", { className: "flex items-center" },
38
39
  React.createElement(AnimationIcon, { getAnimationIcon: getAnimationIcon, name: "promoAnim" }),
@@ -56,7 +57,7 @@ const ViewersCount = ({ serviceItem, viewersConfig, getAnimationIcon, }) => {
56
57
  "comprando")))));
57
58
  };
58
59
  // ─── Main Component ───────────────────────────────────────────────────────────
59
- const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, showLoginModal, viewersConfig, getAnimationIcon, showLoginOption, isNewUiEnabled, colors, isLinatal, coachKey, isExpand, }) => {
60
+ const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, showLoginModal, viewersConfig, getAnimationIcon, showLoginOption, isNewUiEnabled, colors, isLinatal, coachKey, isExpand, isPeru, }) => {
60
61
  const isDiscountBelow20 = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) > 0 &&
61
62
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_value) < 20;
62
63
  const offerText = (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.offer_text) || "";
@@ -76,7 +77,7 @@ const OfferBanner = ({ offerGradient, isSoldOut, serviceItem, isLoggedIn, showLo
76
77
  return (React.createElement(LegacyOfferBanner, { offerText: offerText, getAnimationIcon: getAnimationIcon }));
77
78
  }
78
79
  if (hasDp || (isNewUiEnabled && (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 2)) {
79
- return (React.createElement(NewUiOfferBanner, { offerText: offerText, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, showLoginOption: showLoginOption, getAnimationIcon: getAnimationIcon, hideRegister: hasDp, isNewUiEnabled: isNewUiEnabled, showLoginButton: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.show_register_button, ui_type: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type }));
80
+ return (React.createElement(NewUiOfferBanner, { offerText: offerText, isLoggedIn: isLoggedIn, showLoginModal: showLoginModal, showLoginOption: showLoginOption, getAnimationIcon: getAnimationIcon, hideRegister: hasDp, isNewUiEnabled: isNewUiEnabled, showLoginButton: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.show_register_button, ui_type: serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type, isPeru: isPeru }));
80
81
  }
81
82
  return null;
82
83
  };
package/dist/ui/PaymentCardMobile/PaymentCardMobile.js CHANGED
@@ -448,7 +448,7 @@ export const PaymentCardMobile = (props) => {
448
448
  renderDiscount ? "" : "- ",
449
449
  currency ? currency : "",
450
450
  " ",
451
- CommonService.currency(discountAmount, currencySign))),
451
+ `-${CommonService.currency(discountAmount, currencySign)}`)),
452
452
  React.createElement("div", { className: "discount-label-wrapper", style: { marginTop: "2px" } },
453
453
  React.createElement("style", null, `
454
454
  .discount-label-wrapper .discount-row {
package/dist/ui/SeatSection/SeatSection.js CHANGED
@@ -329,18 +329,27 @@ function SeatSection({ seatTypes, availableSeats, isSoldOut, priceColor, currenc
329
329
  React.createElement("span", { className: "text-[13.33px] font-normal leading-[22px] text-[#ccc]" }, "Antes"))),
330
330
  React.createElement("div", { className: "col-start-1 row-start-3 flex h-[20px] items-end" },
331
331
  React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] text-[#464647]" }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 ? discountSeat.label : "Desde")),
332
- React.createElement("div", { className: "col-start-2 row-start-1 flex items-center justify-center absolute", style: { top: "-22px", left: "50%", transform: "translateX(-50%)" } }, (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 &&
333
- (discountValue != null || isMaxDiscountApplied) && (React.createElement("span", { className: "rounded-[100px] bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white", style: {
334
- animation: "pulse-zoom 2s ease-in-out infinite",
335
- whiteSpace: "nowrap",
336
- backgroundColor: discountSeatPriceColor,
337
- } }, isMaxDiscountApplied
338
- ? `${CommonService.currency(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.max_discount)} OFF`
339
- : `${discountValue}% OFF`))),
332
+ React.createElement("div", { className: "col-start-2 row-start-1 flex items-center justify-center absolute", style: { top: "-22px", left: "50%", transform: "translateX(-50%)" } },
333
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 &&
334
+ !isPeru &&
335
+ (discountValue != null || isMaxDiscountApplied) && (React.createElement("span", { className: "rounded-[100px] bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white", style: {
336
+ animation: "pulse-zoom 2s ease-in-out infinite",
337
+ whiteSpace: "nowrap",
338
+ backgroundColor: discountSeatPriceColor,
339
+ } }, isMaxDiscountApplied
340
+ ? `${CommonService.currency(serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.max_discount)} OFF`
341
+ : `${discountValue}% OFF`)),
342
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) !== 1 &&
343
+ isPeru &&
344
+ (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_display_badge) && (React.createElement("span", { className: "rounded-[100px] bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white", style: {
345
+ animation: "pulse-zoom 2s ease-in-out infinite",
346
+ whiteSpace: "nowrap",
347
+ backgroundColor: discountSeatCrossPriceColor,
348
+ } }, serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.discount_display_badge))),
340
349
  (serviceItem === null || serviceItem === void 0 ? void 0 : serviceItem.ui_type) === 1 ? null : (React.createElement("div", { className: "col-start-2 row-start-2 flex items-center justify-center ", style: { textAlign: "center" } },
341
350
  React.createElement("span", { className: "text-[13.33px] font-normal leading-[20px] relative whitespace-nowrap", style: {
342
351
  position: "relative",
343
- color: discountSeatPriceColor,
352
+ color: discountSeatCrossPriceColor,
344
353
  } },
345
354
  formatPrice(discountSeat.originalPrice),
346
355
  React.createElement("span", { style: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "kupos-ui-components-lib",
3
- "version": "10.4.27",
3
+ "version": "10.4.29",
4
4
  "description": "A reusable UI components package",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/src/components/ServiceItem/ServiceItemDesktop.tsx CHANGED
@@ -579,6 +579,7 @@ function ServiceItemPB({
579
579
  isLinatal={isLinatal}
580
580
  coachKey={coachKey}
581
581
  isExpand={isItemExpanded}
582
+ isPeru={isPeru}
582
583
  />
583
584
  )}
584
585
  <div
package/src/ui/OfferBanner.tsx CHANGED
@@ -35,6 +35,7 @@ interface OfferBannerProps {
35
35
  coachKey?: number;
36
36
  isExpand?: any;
37
37
  ui_type?: number;
38
+ isPeru?: boolean;
38
39
  }
39
40
 
40
41
  // ─── Helpers ──────────────────────────────────────────────────────────────────
@@ -97,6 +98,7 @@ interface NewUiOfferBannerProps {
97
98
  isNewUiEnabled?: any;
98
99
  showLoginButton?: boolean;
99
100
  ui_type?: number;
101
+ isPeru?: boolean;
100
102
  }
101
103
 
102
104
  const NewUiOfferBanner: React.FC<NewUiOfferBannerProps> = ({
@@ -109,6 +111,7 @@ const NewUiOfferBanner: React.FC<NewUiOfferBannerProps> = ({
109
111
  isNewUiEnabled,
110
112
  showLoginButton,
111
113
  ui_type,
114
+ isPeru,
112
115
  }) => (
113
116
  <div className="flex items-center">
114
117
  <AnimationIcon getAnimationIcon={getAnimationIcon} name="bombAnimation" />
@@ -130,7 +133,7 @@ const NewUiOfferBanner: React.FC<NewUiOfferBannerProps> = ({
130
133
  &nbsp;
131
134
  </span>{" "}
132
135
  {offerText && ui_type !== 2 ? "| " : ui_type === 2 ? "" : ""}
133
- Termina en&nbsp;
136
+ {ui_type === 2 && isPeru ? offerText : "Termina en"}&nbsp;
134
137
  <span
135
138
  className="bold-text text-end"
136
139
  ref={(node) => CommonService.startCountdown(node, 599)}
@@ -224,6 +227,7 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
224
227
  isLinatal,
225
228
  coachKey,
226
229
  isExpand,
230
+ isPeru,
227
231
  }) => {
228
232
  const isDiscountBelow20 =
229
233
  (serviceItem as any)?.discount_value > 0 &&
@@ -270,6 +274,7 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
270
274
  isNewUiEnabled={isNewUiEnabled}
271
275
  showLoginButton={serviceItem?.show_register_button}
272
276
  ui_type={serviceItem?.ui_type}
277
+ isPeru={isPeru}
273
278
  />
274
279
  );
275
280
  }
package/src/ui/PaymentCardMobile/PaymentCardMobile.tsx CHANGED
@@ -856,7 +856,7 @@ export const PaymentCardMobile: React.FC<PaymentSideBarProps> = (props) => {
856
856
  <span style={{ fontWeight: 700, color: "#e05252" }}>
857
857
  {renderDiscount ? "" : "- "}
858
858
  {currency ? currency : ""}{" "}
859
- {CommonService.currency(discountAmount, currencySign)}
859
+ {`-${CommonService.currency(discountAmount, currencySign)}`}
860
860
  </span>
861
861
  </div>
862
862
  <div
package/src/ui/SeatSection/SeatSection.tsx CHANGED
@@ -653,6 +653,7 @@ function SeatSection({
653
653
  style={{ top: "-22px", left: "50%", transform: "translateX(-50%)" }}
654
654
  >
655
655
  {serviceItem?.ui_type !== 1 &&
656
+ !isPeru &&
656
657
  (discountValue != null || isMaxDiscountApplied) && (
657
658
  <span
658
659
  className="rounded-[100px] bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white"
@@ -667,6 +668,21 @@ function SeatSection({
667
668
  : `${discountValue}% OFF`}
668
669
  </span>
669
670
  )}
671
+
672
+ {serviceItem?.ui_type !== 1 &&
673
+ isPeru &&
674
+ serviceItem?.discount_display_badge && (
675
+ <span
676
+ className="rounded-[100px] bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white"
677
+ style={{
678
+ animation: "pulse-zoom 2s ease-in-out infinite",
679
+ whiteSpace: "nowrap",
680
+ backgroundColor: discountSeatCrossPriceColor,
681
+ }}
682
+ >
683
+ {serviceItem?.discount_display_badge}
684
+ </span>
685
+ )}
670
686
  </div>
671
687
 
672
688
  {serviceItem?.ui_type === 1 ? null : (
@@ -678,7 +694,7 @@ function SeatSection({
678
694
  className="text-[13.33px] font-normal leading-[20px] relative whitespace-nowrap"
679
695
  style={{
680
696
  position: "relative",
681
- color: discountSeatPriceColor,
697
+ color: discountSeatCrossPriceColor,
682
698
  }}
683
699
  >
684
700
  {formatPrice(discountSeat.originalPrice)}