kupos-ui-components-lib 10.4.31 → 10.4.34

package/src/KuposUIComponent.tsx

@@ -10,6 +10,10 @@ import { CuponeraFilterBarProps } from "./components/CuponeraFilterBar/types";
 import { ResponsiveFilterBar } from "./components/FilterBar";
 import ResponsiveCuponeraFilterBar from "./components/CuponeraFilterBar/ResponsiveCuponeraFilterBar";
 import { ResponsiveSurvey, SurveyProps } from "./components/Survey";
+import {
+  DiscountBannersProps,
+  ResponsiveDiscountBanner,
+} from "./components/DiscountBanners";
 
 interface KuposUIComponentProps {
   typeOfComponent:
@@ -18,7 +22,8 @@ interface KuposUIComponentProps {
     | "servicelist"
     | "filterbar"
     | "survey"
-    | "cuponerafilterbar";
+    | "cuponerafilterbar"
+    | "discountbanners";
   variant?: "mobile" | "desktop";
 
   // Original ServiceItem props
@@ -165,6 +170,13 @@ export default function KuposUIComponent(
     case "survey":
       return <ResponsiveSurvey {...(restProps as unknown as SurveyProps)} />;
 
+    case "discountbanners":
+      return (
+        <ResponsiveDiscountBanner
+          {...(restProps as unknown as DiscountBannersProps)}
+        />
+      );
+
     default:
       return (
         <div className="error-message">

package/src/assets/images/index.ts

@@ -33,3 +33,17 @@ export const amenities = {
   // PNG
   "amenity-cortina": require("./amenities/amenity-cortina.png"),
 };
+
+
+export const backgroundImages = {
+  "discount-banner-1": require("./discount/green.png"),
+  "discount-banner-2": require("./discount/yellow.png"),
+  "discount-banner-3": require("./discount/blue.png"),
+  "discount-last-minute": require("./discount/last.png"),
+  "discount-first-time": require("./discount/first.png"),
+  "discount-cashback": require("./discount/cash.png"),
+  "discount-round-trip": require("./discount/round.png"),
+  "discount-promo-code": require("./discount/promo.png"),
+  "discount-seat-level": require("./discount/seat.png"),
+  "discount-instant": require("./discount/instant.png"),
+};

package/src/components/DiscountBanners/DiscountBannerDesktop.tsx

@@ -0,0 +1,240 @@
+"use client";
+
+import React from "react";
+import { DiscountBannerCard, DiscountBannersProps } from "./types";
+
+import {
+  CAMPAIGN_ART,
+  DEFAULT_BACKGROUND_IMAGES,
+  toImageUrl,
+} from "../../ui/DiscountBanners/defaultBackgrounds";
+import { deriveDiscountCards } from "../../ui/DiscountBanners";
+
+const DEFAULT_LABEL = "Oferta especial";
+const DEFAULT_ACCENT_PALETTE = [
+  "#107E23", // green (remate)
+  "#FFC000", // orange (primera compra)
+  "#0069D1", // blue (descuentos especiales)
+];
+
+const SIZE_CLASSES = {
+  default: {
+    card: "w-[200px] h-[80px] pt-[8px] pb-0 pl-[10px] pr-[8px]",
+    chip: "w-[81px] h-[17px] text-[9px] leading-[17px]",
+    column: "max-w-[116px] mt-[3px]",
+    discount: "text-[15px] leading-[17px]",
+    subtitle: "text-[12px] leading-[14px] mt-[1px]",
+    flameBadge: "text-[18px] leading-[16px]",
+    flamePercent: "text-[10px]",
+  },
+  compact: {
+    card: "w-[170px] h-[68px] pt-[7px] pb-0 pl-[8px] pr-[7px]",
+    chip: "w-[69px] h-[15px] text-[8px] leading-[15px]",
+    column: "max-w-[99px] mt-[2px]",
+    discount: "text-[13px] leading-[15px]",
+    subtitle: "text-[10.5px] leading-[12px] mt-[1px]",
+    flameBadge: "text-[13.5px] leading-[13.5px]",
+    flamePercent: "text-[8px]",
+  },
+};
+
+const FLAME_CENTER = { left: "76.8%", top: "56.4%" };
+
+const REMATE_KEY = "remate";
+
+function isRemateCard(card: DiscountBannerCard): boolean {
+  return card.isWowDeal || card.key === REMATE_KEY;
+}
+
+// Remate always takes the green flame. A campaign with its own art (CAMPAIGN_ART)
+// uses it. Anything left over — return_booking and early_bird, which have no art of
+// their own, plus unrecognised campaign types — alternates yellow, blue, yellow...
+// The ordinal counts only those leftovers, so the alternation is unaffected by how
+// many campaign-specific cards sit between them.
+type CardArt = { image: string; accent: string };
+
+const FALLBACK_ART: CardArt[] = [
+  { image: DEFAULT_BACKGROUND_IMAGES[1], accent: "#FFC000" },
+  { image: DEFAULT_BACKGROUND_IMAGES[2], accent: "#0069D1" },
+];
+const REMATE_ART: CardArt = {
+  image: DEFAULT_BACKGROUND_IMAGES[0],
+  accent: "#107E23",
+};
+
+function resolveArt(cards: DiscountBannerCard[]): CardArt[] {
+  let ordinal = 0;
+  return cards.map((card) => {
+    if (isRemateCard(card)) return REMATE_ART;
+    const campaignArt = card.campaignType
+      ? CAMPAIGN_ART[card.campaignType]
+      : undefined;
+    if (campaignArt) return campaignArt;
+    const art = FALLBACK_ART[ordinal % FALLBACK_ART.length];
+    ordinal += 1;
+    return art;
+  });
+}
+
+interface DiscountBannersDesktopState {
+  internalSelectedKey: string | null;
+}
+
+class DiscountBannersDesktop extends React.Component<
+  DiscountBannersProps,
+  DiscountBannersDesktopState
+> {
+  constructor(props: DiscountBannersProps) {
+    super(props);
+    this.state = {
+      internalSelectedKey: props.defaultSelectedKey ?? null,
+    };
+    this.handleCardClick = this.handleCardClick.bind(this);
+  }
+
+  handleCardClick(card: DiscountBannerCard) {
+    const { selectedKey, onDiscountSelect } = this.props;
+    const isControlled = selectedKey !== undefined;
+    const activeKey = isControlled
+      ? selectedKey
+      : this.state.internalSelectedKey;
+
+    const nextKey = activeKey === card.key ? null : card.key;
+
+    if (!isControlled) {
+      this.setState({ internalSelectedKey: nextKey });
+    }
+
+    const cards = deriveDiscountCards(
+      this.props.services ?? [],
+      this.props.wowDealData,
+      this.props.currencySign ?? "$",
+    );
+    const selectedCard = nextKey
+      ? (cards.find((c) => c.key === nextKey) ?? null)
+      : null;
+    onDiscountSelect?.(selectedCard, selectedCard?.matchedServices ?? []);
+  }
+
+  render() {
+    const {
+      services = [],
+      wowDealData,
+      backgroundImages = [],
+      artIncludesChipPill,
+      accentColors = [],
+      label = DEFAULT_LABEL,
+      currencySign = "$",
+      size = "default",
+      selectedKey,
+      className = "",
+      style,
+    } = this.props;
+
+    // Compute cards directly — no useMemo
+    const cards = deriveDiscountCards(services, wowDealData, currencySign);
+
+    if (!cards.length) return null;
+
+    const isControlled = selectedKey !== undefined;
+    const activeKey = isControlled
+      ? selectedKey
+      : this.state.internalSelectedKey;
+
+    const usingDefaultArt = !backgroundImages.length;
+    const defaultArt = resolveArt(cards);
+    const chipPillInArt = artIncludesChipPill ?? usingDefaultArt;
+    const sizeClasses = SIZE_CLASSES[size ?? "default"];
+
+    return (
+      <div
+        className={`kupos-discount-banners flex items-stretch gap-[10px] overflow-x-auto [scrollbar-width:none] ${className}`}
+        style={style}
+      >
+        {cards.map((card, index) => {
+          const isActive = activeKey === card.key;
+          const isDimmed = activeKey != null && !isActive;
+          const backgroundImage = usingDefaultArt
+            ? defaultArt[index].image
+            : toImageUrl(backgroundImages[index % backgroundImages.length]);
+          const accentColor = accentColors.length
+            ? accentColors[index % accentColors.length]
+            : usingDefaultArt
+              ? defaultArt[index].accent
+              : DEFAULT_ACCENT_PALETTE[index % DEFAULT_ACCENT_PALETTE.length];
+
+          const isFlameArt = backgroundImage === DEFAULT_BACKGROUND_IMAGES[0];
+          const showFlamePercent =
+            isRemateCard(card) &&
+            isFlameArt &&
+            card.discountType === "percentage" &&
+            card.amount > 0;
+
+          return (
+            <button
+              key={card.key}
+              type="button"
+              aria-pressed={isActive}
+              onClick={() => this.handleCardClick(card)}
+              className={`relative flex-shrink-0 flex flex-col items-start text-left border-none bg-transparent cursor-pointer bg-no-repeat transition-opacity duration-200 ease-in-out ${sizeClasses.card} ${
+                isDimmed ? "opacity-[0.65]" : "opacity-100"
+              }`}
+              style={{
+                backgroundImage: backgroundImage
+                  ? `url(${backgroundImage})`
+                  : undefined,
+                backgroundSize: "100% 100%",
+              }}
+            >
+              <span
+                className={`bold-text flex-shrink-0 rounded-full text-center text-[#464647] overflow-hidden whitespace-nowrap ${sizeClasses.chip}`}
+                style={
+                  chipPillInArt
+                    ? undefined
+                    : { backgroundColor: "rgba(255,255,255,0.55)" }
+                }
+              >
+                {label}
+              </span>
+              {showFlamePercent && (
+                <span
+                  className={`bold-text absolute text-[#ffffff] text-center pointer-events-none ${sizeClasses.flameBadge}`}
+                  style={{
+                    ...FLAME_CENTER,
+                    transform: "translate(-50%, -50%)",
+                    textShadow: "0 1px 2px rgba(0,0,0,0.28)",
+                    fontWeight: 900,
+                    whiteSpace: "nowrap",
+                  }}
+                >
+                  {card.amount}
+                  <span
+                    className={sizeClasses.flamePercent}
+                    style={{ fontWeight: 700 }}
+                  >
+                    %
+                  </span>
+                </span>
+              )}
+              <span className={`flex flex-col ${sizeClasses.column}`}>
+                <span
+                  className={`bold-text text-[#464647] ${sizeClasses.discount}`}
+                >
+                  {card.discountLabel}
+                </span>
+                <span
+                  className={`bold-text ${sizeClasses.subtitle}`}
+                  style={{ color: accentColor }}
+                >
+                  {card.subtitle}
+                </span>
+              </span>
+            </button>
+          );
+        })}
+      </div>
+    );
+  }
+}
+
+export default DiscountBannersDesktop;

package/src/components/DiscountBanners/DiscountBannerMobile.tsx

@@ -0,0 +1,234 @@
+"use client";
+
+import React from "react";
+import { DiscountBannerCard, DiscountBannersProps } from "./types";
+
+import {
+  CAMPAIGN_ART,
+  DEFAULT_BACKGROUND_IMAGES,
+  toImageUrl,
+} from "../../ui/DiscountBanners/defaultBackgrounds";
+import { deriveDiscountCards } from "../../ui/DiscountBanners";
+
+const DEFAULT_LABEL = "Oferta especial";
+const DEFAULT_ACCENT_PALETTE = [
+  "#107E23", // green (remate)
+  "#FFC000", // orange (primera compra)
+  "#0069D1", // blue (descuentos especiales)
+];
+
+const SIZE_CLASSES = {
+  default: {
+    card: "w-[200px] h-[80px] pt-[8px] pb-0 pl-[10px] pr-[8px]",
+    chip: "w-[81px] h-[17px] text-[9px] leading-[17px]",
+    column: "max-w-[116px] mt-[3px]",
+    discount: "text-[15px] leading-[17px]",
+    subtitle: "text-[12px] leading-[14px] mt-[1px]",
+    flameBadge: "text-[18px] leading-[16px]",
+    flamePercent: "text-[10px]",
+  },
+  compact: {
+    card: "w-[170px] h-[68px] pt-[7px] pb-0 pl-[8px] pr-[7px]",
+    chip: "w-[69px] h-[15px] text-[8px] leading-[15px]",
+    column: "max-w-[99px] mt-[2px]",
+    discount: "text-[13px] leading-[15px]",
+    subtitle: "text-[10.5px] leading-[12px] mt-[1px]",
+    flameBadge: "text-[13.5px] leading-[13.5px]",
+    flamePercent: "text-[8px]",
+  },
+};
+
+const FLAME_CENTER = { left: "76.8%", top: "56.4%" };
+
+const REMATE_KEY = "remate";
+
+function isRemateCard(card: DiscountBannerCard): boolean {
+  return card.isWowDeal || card.key === REMATE_KEY;
+}
+
+type CardArt = { image: string; accent: string };
+
+const FALLBACK_ART: CardArt[] = [
+  { image: DEFAULT_BACKGROUND_IMAGES[1], accent: "#FFC000" },
+  { image: DEFAULT_BACKGROUND_IMAGES[2], accent: "#0069D1" },
+];
+const REMATE_ART: CardArt = {
+  image: DEFAULT_BACKGROUND_IMAGES[0],
+  accent: "#107E23",
+};
+
+function resolveArt(cards: DiscountBannerCard[]): CardArt[] {
+  let ordinal = 0;
+  return cards.map((card) => {
+    if (isRemateCard(card)) return REMATE_ART;
+    const campaignArt = card.campaignType
+      ? CAMPAIGN_ART[card.campaignType]
+      : undefined;
+    if (campaignArt) return campaignArt;
+    const art = FALLBACK_ART[ordinal % FALLBACK_ART.length];
+    ordinal += 1;
+    return art;
+  });
+}
+
+interface DiscountBannersMobileState {
+  internalSelectedKey: string | null;
+}
+
+class DiscountBannersMobile extends React.Component<
+  DiscountBannersProps,
+  DiscountBannersMobileState
+> {
+  constructor(props: DiscountBannersProps) {
+    super(props);
+    this.state = {
+      internalSelectedKey: props.defaultSelectedKey ?? null,
+    };
+    this.handleCardClick = this.handleCardClick.bind(this);
+  }
+
+  handleCardClick(card: DiscountBannerCard) {
+    const { selectedKey, onDiscountSelect } = this.props;
+    const isControlled = selectedKey !== undefined;
+    const activeKey = isControlled
+      ? selectedKey
+      : this.state.internalSelectedKey;
+
+    const nextKey = activeKey === card.key ? null : card.key;
+
+    if (!isControlled) {
+      this.setState({ internalSelectedKey: nextKey });
+    }
+
+    const cards = deriveDiscountCards(
+      this.props.services ?? [],
+      this.props.wowDealData,
+      this.props.currencySign ?? "$",
+    );
+    const selectedCard = nextKey
+      ? (cards.find((c) => c.key === nextKey) ?? null)
+      : null;
+    onDiscountSelect?.(selectedCard, selectedCard?.matchedServices ?? []);
+  }
+
+  render() {
+    const {
+      services = [],
+      wowDealData,
+      backgroundImages = [],
+      artIncludesChipPill,
+      accentColors = [],
+      label = DEFAULT_LABEL,
+      currencySign = "$",
+      size = "default",
+      selectedKey,
+      className = "",
+      style,
+    } = this.props;
+
+    const cards = deriveDiscountCards(services, wowDealData, currencySign);
+
+    if (!cards.length) return null;
+
+    const isControlled = selectedKey !== undefined;
+    const activeKey = isControlled
+      ? selectedKey
+      : this.state.internalSelectedKey;
+
+    const usingDefaultArt = !backgroundImages.length;
+    const defaultArt = resolveArt(cards);
+    const chipPillInArt = artIncludesChipPill ?? usingDefaultArt;
+    const sizeClasses = SIZE_CLASSES[size ?? "default"];
+
+    return (
+      <div
+        className={`kupos-discount-banners flex items-stretch gap-[10px] overflow-x-auto [scrollbar-width:none] ${className}`}
+        style={style}
+      >
+        {cards.map((card, index) => {
+          const isActive = activeKey === card.key;
+          const isDimmed = activeKey != null && !isActive;
+          const backgroundImage = usingDefaultArt
+            ? defaultArt[index].image
+            : toImageUrl(backgroundImages[index % backgroundImages.length]);
+          const accentColor = accentColors.length
+            ? accentColors[index % accentColors.length]
+            : usingDefaultArt
+              ? defaultArt[index].accent
+              : DEFAULT_ACCENT_PALETTE[index % DEFAULT_ACCENT_PALETTE.length];
+
+          const isFlameArt = backgroundImage === DEFAULT_BACKGROUND_IMAGES[0];
+          const showFlamePercent =
+            isRemateCard(card) &&
+            isFlameArt &&
+            card.discountType === "percentage" &&
+            card.amount > 0;
+
+          return (
+            <button
+              key={card.key}
+              type="button"
+              aria-pressed={isActive}
+              onClick={() => this.handleCardClick(card)}
+              className={`relative flex-shrink-0 flex flex-col items-start text-left border-none bg-transparent cursor-pointer bg-no-repeat transition-opacity duration-200 ease-in-out ${sizeClasses.card} ${
+                isDimmed ? "opacity-[0.65]" : "opacity-100"
+              }`}
+              style={{
+                backgroundImage: backgroundImage
+                  ? `url(${backgroundImage})`
+                  : undefined,
+                backgroundSize: "100% 100%",
+              }}
+            >
+              <span
+                className={`bold-text flex-shrink-0 rounded-full text-center text-[#464647] overflow-hidden whitespace-nowrap ${sizeClasses.chip}`}
+                style={
+                  chipPillInArt
+                    ? undefined
+                    : { backgroundColor: "rgba(255,255,255,0.55)" }
+                }
+              >
+                {label}
+              </span>
+              {showFlamePercent && (
+                <span
+                  className={`bold-text absolute text-[#ffffff] text-center pointer-events-none ${sizeClasses.flameBadge}`}
+                  style={{
+                    ...FLAME_CENTER,
+                    transform: "translate(-50%, -50%)",
+                    textShadow: "0 1px 2px rgba(0,0,0,0.28)",
+                    fontWeight: 900,
+                    whiteSpace: "nowrap",
+                  }}
+                >
+                  {card.amount}
+                  <span
+                    className={sizeClasses.flamePercent}
+                    style={{ fontWeight: 700 }}
+                  >
+                    %
+                  </span>
+                </span>
+              )}
+              <span className={`flex flex-col ${sizeClasses.column}`}>
+                <span
+                  className={`bold-text text-[#464647] ${sizeClasses.discount}`}
+                >
+                  {card.discountLabel}
+                </span>
+                <span
+                  className={`bold-text ${sizeClasses.subtitle}`}
+                  style={{ color: accentColor }}
+                >
+                  {card.subtitle}
+                </span>
+              </span>
+            </button>
+          );
+        })}
+      </div>
+    );
+  }
+}
+
+export default DiscountBannersMobile;

package/src/components/DiscountBanners/ResponsiveDiscountBanner.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { DiscountBannersProps } from "../DiscountBanners/types";
+import DiscountBannersMobile from "./DiscountBannerMobile";
+import DiscountBannersDesktop from "./DiscountBannerDesktop";
+
+export default function ResponsiveDiscountBanner(props: DiscountBannersProps) {
+  const { variant } = props;
+
+  if (variant === "mobile") {
+    return (
+      <DiscountBannersMobile {...(props as unknown as DiscountBannersProps)} />
+    );
+  }
+
+  return <DiscountBannersDesktop {...props} />;
+}

package/src/components/DiscountBanners/index.ts

@@ -0,0 +1,16 @@
+import DiscountBannerDesktop from "./DiscountBannerDesktop";
+import DiscountBannerMobile from "./DiscountBannerMobile";
+import ResponsiveDiscountBanner from "./ResponsiveDiscountBanner";
+
+export {
+  DiscountBannerDesktop,
+  DiscountBannerMobile,
+  ResponsiveDiscountBanner,
+};
+
+export type {
+  DiscountBannerCard,
+  DiscountBannerServiceItem,
+  DiscountBannersProps,
+  WowDealData,
+} from "./types";

package/src/components/DiscountBanners/types.ts

@@ -0,0 +1,55 @@
+import type { CSSProperties } from "react";
+import { ImageRef } from "../../ui/DiscountBanners";
+
+export interface DiscountBannerServiceItem {
+  id?: string | number;
+  offer_text?: string;
+  is_dp_enabled?: boolean;
+  dp_discount_percents?: Record<string, number>;
+  dp_discounted_seats?: string[];
+  discount_type?: string;
+  discount_value?: number;
+  max_discount?: number;
+  discounts?: Array<{ new_ui_enabled?: boolean; campaign_type?: string }>;
+  [key: string]: any;
+}
+
+export interface WowDealData {
+  savings_percent?: number;
+  services?: any[];
+  final_price?: number;
+  original_price?: number;
+  [key: string]: any;
+}
+
+export interface DiscountBannerCard {
+  key: string;
+  subtitle: string;
+  campaignType?: string;
+  discountType: "percentage" | "fixed";
+  amount: number;
+  discountLabel: string;
+  matchedServices: DiscountBannerServiceItem[];
+  isWowDeal: boolean;
+}
+
+export interface DiscountBannersProps {
+  services?: DiscountBannerServiceItem[];
+  wowDealData?: WowDealData;
+  backgroundImages?: ImageRef[];
+  artIncludesChipPill?: boolean;
+  accentColors?: string[];
+  label?: string;
+  currencySign?: string;
+  size?: "default" | "compact";
+  selectedKey?: string | null;
+  defaultSelectedKey?: string | null;
+  onDiscountSelect?: (
+    card: DiscountBannerCard | null,
+    filteredServices: DiscountBannerServiceItem[],
+  ) => void;
+  className?: string;
+  style?: CSSProperties;
+  variant?: "mobile" | "desktop";
+  typeOfComponent?: string;
+}

package/src/components/ServiceItem/ServiceItemDesktop.tsx

@@ -520,6 +520,7 @@ function ServiceItemPB({
           isFlores={isFlores}
           isNewUiEnabled={isNewUiEnabledPeru}
           showLoginOption={showLoginOption}
+          priority_stage_ids={priority_stage_ids}
         />
       ) : isNewUi && !isTrain ? (
         <FeatureServiceUi

package/src/components/ServiceItem/ServiceItemMobile.tsx

@@ -68,7 +68,6 @@ function ServiceItemMobile({
   isPeruSite,
   priority_stage_ids,
 }: MobileServiceItemProps): React.ReactElement {
-  console.log("🚀 ~ ServiceItemMobile ~ serviceItem:", serviceItem);
   const isItemExpanded = serviceItem.id === isExpanded;
   const isPetSeat = (Object.keys(serviceItem?.pet_seat_info) || []).length > 0;
   const isNewUiEnabled = serviceItem?.discounts?.[0]?.new_ui_enabled === true;