kupos-ui-components-lib 9.9.1 → 9.9.2

package/src/ui/OfferBanner.tsx

@@ -18,7 +18,9 @@ interface OfferBannerProps {
   showLoginModal: any;
   viewersConfig: ServiceItemProps["viewersConfig"];
   getAnimationIcon: (name: string) => any;
-  showLoginOption?: boolean;
+  showLoginOption?: boolean
+  isNewUiEnabled?: boolean;
+  colors: any;
 }
 
 const OfferBanner: React.FC<OfferBannerProps> = ({
@@ -31,12 +33,14 @@ 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-[10px_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,
       }}
@@ -57,6 +61,7 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
               <span>Servicio popular entre los usuarios</span>
             </div>
           ) : (
+            (isNewUiEnabled && serviceItem?.offer_text) ? (
             <div className="flex items-center">
               <LottiePlayer
                 animationData={getAnimationIcon("bombAnimation")}
@@ -73,18 +78,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"
@@ -95,9 +96,28 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
                   }}
                 />
               </div>
-            </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>
+        {(isNewUiEnabled || serviceItem?.is_dp_enabled) && (
         <div className="flex items-center">
           {/* {renderIcon("personIcon", "16px")} */}
           <LottiePlayer
@@ -135,6 +155,7 @@ const OfferBanner: React.FC<OfferBannerProps> = ({
             </span>
           </span>
         </div>
+        )}
       </div>
     </div>
   );

package/src/ui/SeatSection/SeatSection.tsx

@@ -7,8 +7,6 @@ interface SeatType {
   label: string;
   fare: number;
   key: any;
-  apiSeatType?: string;
-  api_seat_type?: string;
 }
 
 interface SeatSectionProps {
@@ -23,15 +21,6 @@ interface SeatSectionProps {
   serviceItem?: any;
   renderIcon?: (iconKey: string, size?: string) => React.ReactNode;
   discountSeatPriceColor?: string;
-  isTrain?: boolean;
-  selectedSeatKey?: any;
-  onSeatSelect?: (
-    key: any,
-    price: number,
-    seatKey: string,
-    apiSeatType?: string,
-  ) => void;
-  topLabelColor?: string;
 }
 
 function getAllSeatTypes(seatTypes: SeatType[]) {
@@ -42,8 +31,6 @@ function getAllSeatTypes(seatTypes: SeatType[]) {
   let seatTypesWithPrices = seatTypes.filter(Boolean).map((val) => ({
     label: val?.label,
     price: val?.fare,
-    key: val?.key,
-    apiSeatType: val?.apiSeatType || val?.api_seat_type,
   }));
 
   seatTypesWithPrices.sort((a, b) => a.price - b.price);
@@ -51,7 +38,7 @@ function getAllSeatTypes(seatTypes: SeatType[]) {
   return seatTypesWithPrices;
 }
 
-function getSortedSeatTypes(seatTypes: SeatType[], isTrain: any) {
+function getSortedSeatTypes(seatTypes: SeatType[]) {
   if (!seatTypes?.length) {
     return [{ label: "Salon cama", price: 0 }];
   }
@@ -65,11 +52,7 @@ function getSortedSeatTypes(seatTypes: SeatType[], isTrain: any) {
     seatTypesWithPrices[2] = seatTypesWithPrices[premiumIndex];
   }
 
-  if (isTrain) {
-    seatTypesWithPrices = seatTypesWithPrices.slice(0, 4);
-  } else {
-    seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
-  }
+  seatTypesWithPrices = seatTypesWithPrices.slice(0, 2);
 
   const seenPrices = new Set<number>();
   seatTypesWithPrices = seatTypesWithPrices.filter((seat) => {
@@ -114,18 +97,14 @@ function SeatSection({
   priceColor,
   currencySign,
   removeDuplicateSeats,
-  selectedSeatKey,
-  onSeatSelect,
   isPeru,
   serviceItem,
   renderIcon,
   dpSeatColor,
   discountSeatPriceColor,
-  isTrain,
-  topLabelColor,
 }: SeatSectionProps): React.ReactElement {
   const uniqueSeats = getUniqueSeats(seatTypes);
-  const sortedSeatTypes = getSortedSeatTypes(seatTypes, isTrain);
+  const sortedSeatTypes = getSortedSeatTypes(seatTypes);
   const numberOfSeats = getNumberOfSeats(seatTypes);
   const isCentered = numberOfSeats < 2 || removeDuplicateSeats;
 
@@ -137,68 +116,22 @@ function SeatSection({
   const renderSeatNames = () => {
     const seats = removeDuplicateSeats ? uniqueSeats : sortedSeatTypes;
 
-    return seats.map((val, key: number) => {
-      return SEAT_EXCEPTIONS.includes(val.label) ? null : (
-        <div
-          className="flex items-center"
-          style={isTrain ? { cursor: "pointer" } : undefined}
-          onClick={
-            isTrain && !isSoldOut
-              ? () =>
-                  val.label === selectedSeatKey
-                    ? onSeatSelect?.(null, 0, "", "")
-                    : onSeatSelect?.(
-                        val.label,
-                        val.price,
-                        val.key,
-                        (val as any).apiSeatType,
-                      )
-              : undefined
-          }
+    return seats.map((val, key: number) =>
+      SEAT_EXCEPTIONS.includes(val.label) ? null : (
+        <span
+          key={key}
+          className={`flex items-center justify-between text-[13.33px] ${
+            isSoldOut ? "text-[#c0c0c0]" : ""
+          }`}
         >
-          {isTrain && (
-            <div
-              style={{
-                border: `1px solid ${val.label === selectedSeatKey ? topLabelColor : "#ccc"}`,
-                borderRadius: "50%",
-                width: "14px",
-                height: "14px",
-                minWidth: "14px",
-                marginRight: "10px",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-              }}
-            >
-              {val.label === selectedSeatKey && (
-                <div
-                  style={{
-                    backgroundColor: topLabelColor,
-                    borderRadius: "50%",
-                    width: "7px",
-                    height: "7px",
-                  }}
-                />
-              )}
-            </div>
-          )}
-          <span
-            key={key}
-            className={`flex items-center justify-between text-[13.33px] ${
-              isSoldOut ? "text-[#c0c0c0]" : ""
-            }`}
-          >
-            {typeof val.label === "string" || typeof val.label === "number"
-              ? removeDuplicateSeats && isPeru
-                ? CommonService.truncateSeatLabel(val.label)
-                : isTrain
-                  ? CommonService.truncateSeatLabel(val.label)
-                  : val.label
-              : null}
-          </span>
-        </div>
-      );
-    });
+          {typeof val.label === "string" || typeof val.label === "number"
+            ? removeDuplicateSeats && isPeru
+              ? CommonService.truncateSeatLabel(val.label)
+              : val.label
+            : null}
+        </span>
+      ),
+    );
   };
 
   const renderSeatPrices = () => {
@@ -344,7 +277,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",
@@ -386,7 +319,7 @@ function SeatSection({
           >
             <div
               className="absolute"
-              style={{ left: isPeru ? "-19px" : "-19px", bottom: "1px" }}
+              style={{ left: isPeru ? "-1px" : "-19px", bottom: "1px" }}
             >
               {renderIcon("fireIcon", "16px")}
             </div>
@@ -543,7 +476,7 @@ function SeatSection({
             <div
               className="absolute"
               style={{
-                left: isPeru ? "-18px" : "-18px",
+                left: isPeru ? "-1px" : "-18px",
                 bottom: "1px",
               }}
             >

package/src/utils/CommonService.ts

@@ -290,6 +290,9 @@ const commonService = {
       discount_type?: string;
       discount_value?: number;
       max_discount?: number;
+      discounts?: Array<{
+        new_ui_enabled?: boolean;
+      }>;
     },
   ): { originalPrice: number; discountedPrice: number } => {
     const price =
@@ -302,6 +305,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;
@@ -329,10 +342,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;
 
@@ -347,6 +365,7 @@ const commonService = {
     }, interval);
 
     node.dataset.viewerId = String(id);
+    node.dataset.viewerConfig = configKey;
   },
 
   startCountdown: (
@@ -388,6 +407,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));
 
@@ -408,6 +432,7 @@ const commonService = {
     }, 5000); // Update every 5 seconds
 
     node.dataset.comprandoId = String(id);
+    node.dataset.comprandoConfig = configKey;
   },
 };