kupos-ui-components-lib 9.9.7 → 9.9.9

package/src/ui/OfferBanner.tsx

@@ -19,6 +19,8 @@ interface OfferBannerProps {
   viewersConfig: ServiceItemProps["viewersConfig"];
   getAnimationIcon: (name: string) => any;
   showLoginOption?: boolean;
+  isNewUiEnabled?: boolean;
+  colors: any;
 }
 
 const OfferBanner: React.FC<OfferBannerProps> = ({
@@ -31,12 +33,17 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
   viewersConfig,
   getAnimationIcon,
   showLoginOption,
+  isNewUiEnabled,
+  colors,
 }) => {
   return (
     <div
-      className="text-white p-[10px_15px] text-left w-full flex items-center absolute -bottom-[36px] pt-[50px]  rounded-b-[14px] text-[14px]"
+      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={{
-        background: offerGradient,
+        background:
+          serviceItem?.offer_text && !isNewUiEnabled
+            ? colors?.bottomStripColor
+            : offerGradient,
         opacity: isSoldOut ? 0.5 : 1,
         // zIndex: 0,
       }}
@@ -56,7 +63,7 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
               {/* starAnimation */}
               <span>Servicio popular entre los usuarios</span>
             </div>
-          ) : (
+          ) : isNewUiEnabled && serviceItem?.offer_text ? (
             <div className="flex items-center">
               <LottiePlayer
                 animationData={getAnimationIcon("bombAnimation")}
@@ -73,18 +80,14 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
                   {(serviceItem?.offer_text || "").length > 30
                     ? (serviceItem?.offer_text || "").slice(0, 30) + "..."
                     : serviceItem?.offer_text || ""}{" "}
-                  {isLoggedIn && showLoginOption ? null : Object.keys(
-                      serviceItem?.dp_discount_percents ?? {},
-                    ).length > 0 ||
-                    (serviceItem?.dp_discounted_seats ?? []).length >
-                      0 ? null : (
+                  {isLoggedIn && showLoginOption ? null : (
                     <span onClick={showLoginModal} className="cursor-pointer">
                       - registro
                     </span>
                   )}{" "}
                   &nbsp;
                 </span>{" "}
-                {serviceItem?.offer_text ? "| " : ""}
+                {serviceItem?.offer_text ? "|" : ""}
                 Termina en&nbsp;
                 <span
                   className="bold-text text-end"
@@ -96,45 +99,70 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
                 />
               </div>
             </div>
+          ) : (
+            serviceItem?.offer_text &&
+            !isNewUiEnabled && (
+              <div className="flex items-center">
+                <LottiePlayer
+                  animationData={getAnimationIcon("promoAnim")}
+                  width="18px"
+                  height="18px"
+                />
+                <div className="flex items-center mt-[2px]">
+                  <span
+                    className="bold-text"
+                    style={{
+                      marginLeft: serviceItem?.offer_text ? "6px" : "3px",
+                    }}
+                  >
+                    {serviceItem?.offer_text || ""}
+                  </span>{" "}
+                </div>
+              </div>
+            )
           )}
         </div>
-        <div className="flex items-center">
-          {/* {renderIcon("personIcon", "16px")} */}
-          <LottiePlayer
-            animationData={getAnimationIcon("dotAnimation")}
-            width="12px"
-            height="12px"
-          />
+        {(isNewUiEnabled || serviceItem?.is_dp_enabled) && (
+          <div className="flex items-center">
+            {/* {renderIcon("personIcon", "16px")} */}
+            <LottiePlayer
+              animationData={getAnimationIcon("dotAnimation")}
+              width="12px"
+              height="12px"
+            />
 
-          <span className="ml-[6px]">
-            <span
-              className="bold-text"
-              ref={(node) =>
-                CommonService.startViewerCount(node, viewersConfig)
-              }
-              style={{ fontVariantNumeric: "tabular-nums" }}
-            />{" "}
-            {/* <span className="bold-text">personas</span>{" "} */}
-            <span>
-              {" "}
-              {viewersConfig?.label || " viendo"} |{" "}
-              <span className="">
-                {serviceItem?.is_dp_enabled &&
-                Object.keys(serviceItem?.dp_discount_percents ?? {}).length ===
-                  0 &&
-                (serviceItem?.dp_discounted_seats ?? []).length === 0
-                  ? null
-                  : "Quedan pocos • "}
-                <span
-                  className="bold-text"
-                  ref={(node) => CommonService.startComprandoCount(node, 4, 16)}
-                  style={{ fontVariantNumeric: "tabular-nums" }}
-                />{" "}
-                comprando
+            <span className="ml-[6px]">
+              <span
+                className="bold-text"
+                ref={(node) =>
+                  CommonService.startViewerCount(node, viewersConfig)
+                }
+                style={{ fontVariantNumeric: "tabular-nums" }}
+              />{" "}
+              {/* <span className="bold-text">personas</span>{" "} */}
+              <span>
+                {" "}
+                {viewersConfig?.label || " viendo"} |{" "}
+                <span className="">
+                  {serviceItem?.is_dp_enabled &&
+                  Object.keys(serviceItem?.dp_discount_percents ?? {})
+                    .length === 0 &&
+                  (serviceItem?.dp_discounted_seats ?? []).length === 0
+                    ? null
+                    : "Quedan pocos • "}
+                  <span
+                    className="bold-text"
+                    ref={(node) =>
+                      CommonService.startComprandoCount(node, 4, 16)
+                    }
+                    style={{ fontVariantNumeric: "tabular-nums" }}
+                  />{" "}
+                  comprando
+                </span>
               </span>
             </span>
-          </span>
-        </div>
+          </div>
+        )}
       </div>
     </div>
   );

package/src/ui/SeatSection/SeatSection.tsx

@@ -342,7 +342,7 @@ function SeatSection({
           {!isNaN(Number(dpDiscountPercent)) &&
             Number(dpDiscountPercent) > 0 && (
               <span
-                className="rounded-[100px] bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white"
+                className={`rounded-[100px] ${discountSeatPriceColor} bg-[#ff5964] px-[6px] text-[12px] bold-text leading-[20px] text-white`}
                 style={{
                   animation: "pulse-zoom 2s ease-in-out infinite",
                   whiteSpace: "nowrap",
@@ -384,7 +384,7 @@ function SeatSection({
           >
             <div
               className="absolute"
-              style={{ left: isPeru ? "-19px" : "-19px", bottom: "1px" }}
+              style={{ left: isPeru ? "-1px" : "-19px", bottom: "1px" }}
             >
               {renderIcon("fireIcon", "16px")}
             </div>
@@ -541,7 +541,7 @@ function SeatSection({
             <div
               className="absolute"
               style={{
-                left: isPeru ? "-18px" : "-18px",
+                left: isPeru ? "-1px" : "-18px",
                 bottom: "1px",
               }}
             >

package/src/utils/CommonService.ts

@@ -296,6 +296,9 @@ const commonService = {
       discount_type?: string;
       discount_value?: number;
       max_discount?: number;
+      discounts?: Array<{
+        new_ui_enabled?: boolean;
+      }>;
     },
   ): { originalPrice: number; discountedPrice: number } => {
     const price =
@@ -308,6 +311,16 @@ const commonService = {
     }
 
     const { discount_type, discount_value, max_discount } = serviceItem;
+    // Check if there's a discount with new_ui_enabled = true
+    const newUiEnabled = serviceItem.discounts?.some(
+      (d) => d.new_ui_enabled === true
+    );
+
+
+    // Only apply discount if new_ui_enabled is true OR if regular discount exists
+    if (!newUiEnabled && (!discount_type || discount_value == null)) {
+      return { originalPrice: price, discountedPrice: price };
+    }
 
     const fixedDiscount =
       discount_type === "fixed" && discount_value != null ? discount_value : 0;
@@ -335,10 +348,15 @@ const commonService = {
   ) => {
     if (!node || !viewersConfig) return;
 
+    const { min, max, interval = 5000 } = viewersConfig;
+    const configKey = `${min}-${max}-${interval}`;
+    if (node.dataset.viewerId && node.dataset.viewerConfig === configKey) {
+      return;
+    }
+
     const prevId = node.dataset.viewerId;
     if (prevId) clearInterval(Number(prevId));
 
-    const { min, max, interval = 5000 } = viewersConfig;
     const clamp = (v: number) => Math.min(max, Math.max(min, v));
     const initialValue = Math.floor(Math.random() * (max - min + 1)) + min;
 
@@ -353,6 +371,7 @@ const commonService = {
     }, interval);
 
     node.dataset.viewerId = String(id);
+    node.dataset.viewerConfig = configKey;
   },
 
   startCountdown: (
@@ -394,6 +413,11 @@ const commonService = {
   ) => {
     if (!node) return;
 
+    const configKey = `${min}-${max}`;
+    if (node.dataset.comprandoId && node.dataset.comprandoConfig === configKey) {
+      return;
+    }
+
     const prevId = node.dataset.comprandoId;
     if (prevId) clearInterval(Number(prevId));
 
@@ -414,6 +438,7 @@ const commonService = {
     }, 5000); // Update every 5 seconds
 
     node.dataset.comprandoId = String(id);
+    node.dataset.comprandoConfig = configKey;
   },
 };