kupos-ui-components-lib 10.4.8 → 10.4.10

package/src/ui/FeatureServiceUI/FeatureServiceUi.tsx

@@ -471,7 +471,7 @@ const FeatureServiceUi = ({
                       // backgroundColor: "#fff",
                       border: "1px solid #363c48",
                       backgroundColor: "#1a202e",
-                      padding: "14px 10px",
+                      padding: "25px 10px",
                     }}
                   >
                     <img
@@ -548,7 +548,7 @@ const FeatureServiceUi = ({
                 }}
               >
                 <span
-                  className="text-[#FF8F45] bold-text text-[26px] leading-tight"
+                  className="text-[#FF8F45] bold-text text-[30px] leading-tight"
                   style={{
                     animation: "pulse-zoom 2s ease-in-out infinite",
                     whiteSpace: "nowrap",

package/src/ui/PeruOfferBanner.tsx

@@ -0,0 +1,298 @@
+import React from "react";
+import LottiePlayer from "../assets/LottiePlayer";
+import CommonService from "../utils/CommonService";
+import { ServiceItemProps } from "../components/ServiceItem/types";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+type ServiceItemSlice = Pick<
+  ServiceItemProps["serviceItem"],
+  | "is_dp_enabled"
+  | "offer_text"
+  | "dp_discount_percents"
+  | "dp_discounted_seats"
+  | "show_register_button"
+>;
+
+interface OfferBannerColors {
+  bottomStripColor?: string;
+}
+
+interface PeruOfferBannerProps {
+  offerGradient: string;
+  isSoldOut: boolean;
+  serviceItem: ServiceItemSlice;
+  renderIcon: (name: string, size: string) => React.ReactNode;
+  isLoggedIn: boolean;
+  showLoginModal: () => void;
+  viewersConfig: ServiceItemProps["viewersConfig"];
+  getAnimationIcon: (name: string) => unknown;
+  showLoginOption?: boolean;
+  colors: OfferBannerColors;
+  isLinatal?: boolean;
+  coachKey?: number;
+  isExpand?: any;
+  isNewUiEnabled?: boolean;
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+const OFFER_TEXT_MAX_LENGTH = 30;
+
+function truncateOfferText(text: string): string {
+  return text.length > OFFER_TEXT_MAX_LENGTH
+    ? `${text.slice(0, OFFER_TEXT_MAX_LENGTH)}...`
+    : text;
+}
+
+function hasDpDiscounts(serviceItem: ServiceItemSlice): boolean {
+  return (
+    Object.keys(serviceItem?.dp_discount_percents ?? {}).length > 0 ||
+    (serviceItem?.dp_discounted_seats ?? []).length > 0
+  );
+}
+
+// ─── Sub-components ───────────────────────────────────────────────────────────
+
+interface AnimationIconProps {
+  getAnimationIcon: PeruOfferBannerProps["getAnimationIcon"];
+  name: string;
+  width?: string;
+  height?: string;
+}
+
+const AnimationIcon: React.FC<AnimationIconProps> = ({
+  getAnimationIcon,
+  name,
+  width = "18px",
+  height = "18px",
+}) => (
+  <LottiePlayer
+    animationData={getAnimationIcon(name)}
+    width={width}
+    height={height}
+  />
+);
+
+// Shown when DP is enabled but no discounts / discounted seats are present
+const PopularServiceBanner: React.FC<{
+  getAnimationIcon: PeruOfferBannerProps["getAnimationIcon"];
+}> = ({ getAnimationIcon }) => (
+  <div className="flex items-center gap-[5px]">
+    <AnimationIcon getAnimationIcon={getAnimationIcon} name="starAnimation" />
+    <span>Servicio popular entre los usuarios</span>
+  </div>
+);
+
+// Shown when an offer text exists
+interface OfferBannerContentProps {
+  offerText: string;
+  isLoggedIn: boolean;
+  showLoginModal: () => void;
+  showLoginOption?: boolean;
+  getAnimationIcon: PeruOfferBannerProps["getAnimationIcon"];
+  hideRegister?: boolean;
+  showLoginButton?: boolean;
+}
+
+const OfferBannerContent: React.FC<OfferBannerContentProps> = ({
+  offerText,
+  isLoggedIn,
+  showLoginModal,
+  showLoginOption,
+  getAnimationIcon,
+  hideRegister,
+  showLoginButton,
+}) => (
+  <div className="flex items-center">
+    <AnimationIcon getAnimationIcon={getAnimationIcon} name="bombAnimation" />
+    <div className="flex items-center mt-[0px]">
+      <span
+        className="bold-text"
+        style={{ marginLeft: offerText ? "6px" : "3px" }}
+      >
+        {offerText}{" "}
+        {isLoggedIn && showLoginOption
+          ? null
+          : showLoginOption &&
+            showLoginButton && (
+              <span onClick={showLoginModal} className="cursor-pointer">
+                - registro
+              </span>
+            )}{" "}
+        &nbsp;
+      </span>{" "}
+      {offerText ? "| " : ""}
+      Termina en&nbsp;
+      <span
+        className="bold-text text-end"
+        ref={(node) => CommonService.startCountdown(node, 599)}
+        style={{ fontVariantNumeric: "tabular-nums", display: "inline-block" }}
+      />
+    </div>
+  </div>
+);
+
+// Shown for legacy promo offers
+interface LegacyOfferBannerProps {
+  offerText: string;
+  getAnimationIcon: PeruOfferBannerProps["getAnimationIcon"];
+}
+
+const LegacyOfferBanner: React.FC<LegacyOfferBannerProps> = ({
+  offerText,
+  getAnimationIcon,
+}) => (
+  <div className="flex items-center">
+    <AnimationIcon getAnimationIcon={getAnimationIcon} name="promoAnim" />
+    <div className="flex items-center mb-[2px]">
+      <span
+        className="bold-text"
+        style={{ marginLeft: offerText ? "6px" : "3px" }}
+      >
+        {offerText}
+      </span>
+    </div>
+  </div>
+);
+
+// Right-side viewers / buying count
+interface ViewersCountProps {
+  serviceItem: ServiceItemSlice;
+  viewersConfig: ServiceItemProps["viewersConfig"];
+  getAnimationIcon: PeruOfferBannerProps["getAnimationIcon"];
+}
+
+const ViewersCount: React.FC<ViewersCountProps> = ({
+  serviceItem,
+  viewersConfig,
+  getAnimationIcon,
+}) => {
+  const showScarcity = hasDpDiscounts(serviceItem);
+
+  return (
+    <div className="flex items-center">
+      <AnimationIcon
+        getAnimationIcon={getAnimationIcon}
+        name="dotAnimation"
+        width="12px"
+        height="12px"
+      />
+      <span className="ml-[6px]">
+        <span
+          className="bold-text"
+          ref={(node) => CommonService.startViewerCount(node, viewersConfig)}
+          style={{ fontVariantNumeric: "tabular-nums" }}
+        />{" "}
+        <span>
+          {viewersConfig?.label || " viendo"} |{" "}
+          <span>
+            {showScarcity && "Quedan pocos • "}
+            <span
+              className="bold-text"
+              ref={(node) => CommonService.startComprandoCount(node, 4, 16)}
+              style={{ fontVariantNumeric: "tabular-nums" }}
+            />{" "}
+            comprando
+          </span>
+        </span>
+      </span>
+    </div>
+  );
+};
+
+// ─── Main Component ───────────────────────────────────────────────────────────
+
+const PeruOfferBanner: React.FC<PeruOfferBannerProps> = ({
+  offerGradient,
+  isSoldOut,
+  serviceItem,
+  isLoggedIn,
+  showLoginModal,
+  viewersConfig,
+  getAnimationIcon,
+  showLoginOption,
+  colors,
+  isLinatal,
+  coachKey,
+  isExpand,
+  isNewUiEnabled,
+}) => {
+  const isDiscountBelow20 =
+    (serviceItem as any)?.discount_value > 0 &&
+    (serviceItem as any)?.discount_value < 20;
+  const offerText = isDiscountBelow20 ? "" : serviceItem?.offer_text || "";
+
+  const isLegacyOffer =
+    !!offerText &&
+    !isNewUiEnabled;
+
+  // const showViewers = serviceItem?.is_dp_enabled;
+  const showViewers = isNewUiEnabled;
+
+  const background = isLegacyOffer ? colors?.bottomStripColor : offerGradient;
+
+  const renderLeftContent = () => {
+    const hasDp = hasDpDiscounts(serviceItem);
+
+    if (serviceItem?.is_dp_enabled && !hasDp) {
+      return <PopularServiceBanner getAnimationIcon={getAnimationIcon} />;
+    }
+
+    // If new UI is enabled, show offer with registro and countdown
+    if (isNewUiEnabled && offerText) {
+      return (
+        <OfferBannerContent
+          offerText={offerText}
+          isLoggedIn={isLoggedIn}
+          showLoginModal={showLoginModal}
+          showLoginOption={showLoginOption}
+          getAnimationIcon={getAnimationIcon}
+          hideRegister={hasDp}
+          showLoginButton={serviceItem?.show_register_button}
+        />
+      );
+    }
+
+    // If new UI is disabled, show offer text only
+    if (offerText) {
+      return (
+        <LegacyOfferBanner
+          offerText={offerText}
+          getAnimationIcon={getAnimationIcon}
+        />
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <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={{
+        background:
+          (serviceItem?.is_dp_enabled && serviceItem?.dp_discount_percents)
+            ? offerGradient
+            : background,
+        opacity: isSoldOut ? 0.5 : 1,
+        zIndex: isLinatal ? "-1" : "0",
+      }}
+    >
+      <div className="flex items-center w-full gap-[20px] px-[15px] justify-between">
+        <div className="flex items-center justify-start">
+          {renderLeftContent()}
+        </div>
+        {showViewers && (
+          <ViewersCount
+            serviceItem={serviceItem}
+            viewersConfig={viewersConfig}
+            getAnimationIcon={getAnimationIcon}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default PeruOfferBanner;