kupos-ui-components-lib 10.4.31 → 10.4.34

package/src/index.ts

@@ -25,6 +25,13 @@ import {
   ResponsiveFilterBar,
 } from "./components/FilterBar";
 
+//Import Discount Banner's
+import {
+  DiscountBannerDesktop,
+  DiscountBannerMobile,
+  ResponsiveDiscountBanner,
+} from "./components/DiscountBanners";
+
 // Import FilterSortBar components
 import { FilterSortBarMobile } from "./components/FilterSortBar";
 
@@ -38,6 +45,9 @@ import {
 // Import Modal components
 import { Modal, ModalHeader } from "./ui/Modal";
 
+// Import DiscountBanners components
+import { DiscountBanners } from "./ui/DiscountBanners";
+
 export {
   ServiceItemDesktop,
   ServiceItemMobile,
@@ -63,7 +73,6 @@ export {
   // FilterSortBar components
   FilterSortBarMobile,
 
-
   //Survey components
   SurveyDesktop,
   SurveyMobile,
@@ -72,6 +81,11 @@ export {
   // Modal components
   Modal,
   ModalHeader,
+
+  // DiscountBanners components
+  DiscountBannerMobile,
+  DiscountBannerDesktop,
+  ResponsiveDiscountBanner,
 };
 
 // Also export types
@@ -95,5 +109,22 @@ export type {
 } from "./components/FilterSortBar";
 export { DEFAULT_CATEGORY_LABELS } from "./components/FilterSortBar";
 export type { SurveyProps } from "./components/Survey/types";
-export type { ModalProps, ModalVariant, ModalSize, ModalHeaderProps } from "./ui/Modal";
-
+export type {
+  ModalProps,
+  ModalVariant,
+  ModalSize,
+  ModalHeaderProps,
+} from "./ui/Modal";
+export {
+  deriveDiscountCards,
+  CAMPAIGN_TYPE_LABELS,
+  CAMPAIGN_ART,
+  DEFAULT_BACKGROUND_IMAGES,
+  toImageUrl,
+} from "./ui/DiscountBanners";
+export type {
+  DiscountBannerCard,
+  DiscountBannerServiceItem,
+  DiscountBannersProps,
+  WowDealData,
+} from "./components/DiscountBanners";

package/src/types/images.d.ts

@@ -0,0 +1,12 @@
+// This package builds with plain `tsc`, which has no image loader, so the .png
+// imports in the components are left in the emitted JS as-is and resolved by the
+// CONSUMER's bundler. copy-assets.js mirrors src/assets into dist/assets, so the
+// relative specifiers still point at a real file from inside dist.
+//
+// Bundlers disagree on what the import evaluates to: webpack asset modules and
+// Vite hand back a URL string, while Next's image loader hands back a
+// StaticImageData object. The union covers both; use toImageUrl() to read it.
+declare module "*.png" {
+  const src: string | { src: string };
+  export default src;
+}

package/src/ui/DiscountBanners/DiscountBanners.tsx

@@ -0,0 +1,215 @@
+"use client";
+
+import React, { useMemo, useState } from "react";
+import { DiscountBannerCard, DiscountBannersProps } from "./types";
+import { deriveDiscountCards } from "./discountUtils";
+import {
+  CAMPAIGN_ART,
+  DEFAULT_BACKGROUND_IMAGES,
+  toImageUrl,
+} from "./defaultBackgrounds";
+
+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;
+  });
+}
+
+const DiscountBanners: React.FC<DiscountBannersProps> = ({
+  services = [],
+  wowDealData,
+  backgroundImages = [],
+  artIncludesChipPill,
+  accentColors = [],
+  label = DEFAULT_LABEL,
+  currencySign = "$",
+  size = "default",
+  selectedKey,
+  defaultSelectedKey = null,
+  onDiscountSelect,
+  className = "",
+  style,
+}) => {
+  const cards = useMemo(
+    () => deriveDiscountCards(services, wowDealData, currencySign),
+    [services, wowDealData, currencySign],
+  );
+
+  const [internalSelectedKey, setInternalSelectedKey] = useState<
+    string | null
+  >(defaultSelectedKey);
+
+  const isControlled = selectedKey !== undefined;
+  const activeKey = isControlled ? selectedKey : internalSelectedKey;
+
+  if (!cards.length) return null;
+
+  const handleCardClick = (card: DiscountBannerCard) => {
+    const nextKey = activeKey === card.key ? null : card.key;
+
+    if (!isControlled) {
+      setInternalSelectedKey(nextKey);
+    }
+
+    const selectedCard = nextKey
+      ? (cards.find((c) => c.key === nextKey) ?? null)
+      : null;
+    onDiscountSelect?.(selectedCard, selectedCard?.matchedServices ?? []);
+  };
+
+  const usingDefaultArt = !backgroundImages.length;
+  const defaultArt = resolveArt(cards);
+  const chipPillInArt = artIncludesChipPill ?? usingDefaultArt;
+  const sizeClasses = SIZE_CLASSES[size];
+
+  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={() => 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 DiscountBanners;

package/src/ui/DiscountBanners/defaultBackgrounds.ts

@@ -0,0 +1,42 @@
+import greenArt from "../../assets/images/discount/green.png";
+import yellowArt from "../../assets/images/discount/yellow.png";
+import blueArt from "../../assets/images/discount/blue.png";
+import lastMinuteArt from "../../assets/images/discount/last.png";
+import firstTimeArt from "../../assets/images/discount/first.png";
+import cashbackArt from "../../assets/images/discount/cash.png";
+import roundTripArt from "../../assets/images/discount/round.png";
+import promoCodeArt from "../../assets/images/discount/promo.png";
+import seatLevelArt from "../../assets/images/discount/seat.png";
+import instantArt from "../../assets/images/discount/instant.png";
+
+export type ImageRef =
+  | string
+  | { src?: string; default?: string | { src?: string } };
+
+export function toImageUrl(art: ImageRef): string {
+  if (typeof art === "string") return art;
+  if (art && typeof art === "object") {
+    if (typeof art.default === "string") return art.default;
+    if (art.default && typeof art.default === "object" && art.default.src) {
+      return art.default.src;
+    }
+    if (art.src) return art.src;
+  }
+  return "";
+}
+
+export const DEFAULT_BACKGROUND_IMAGES: string[] = [
+  greenArt,
+  yellowArt,
+  blueArt,
+].map(toImageUrl);
+
+export const CAMPAIGN_ART: Record<string, { image: string; accent: string }> = {
+  last_minute: { image: toImageUrl(lastMinuteArt), accent: "#4457C7" },
+  first_time: { image: toImageUrl(firstTimeArt), accent: "#D63384" },
+  cashback: { image: toImageUrl(cashbackArt), accent: "#0069D1" },
+  round_trip: { image: toImageUrl(roundTripArt), accent: "#5C8A00" },
+  promo_code: { image: toImageUrl(promoCodeArt), accent: "#E08A00" },
+  seat_level: { image: toImageUrl(seatLevelArt), accent: "#B87500" },
+  instant_discount: { image: toImageUrl(instantArt), accent: "#107E23" },
+};

package/src/ui/DiscountBanners/discountUtils.ts

@@ -0,0 +1,166 @@
+import CommonService from "../../utils/CommonService";
+import {
+  DiscountBannerCard,
+  DiscountBannerServiceItem,
+  WowDealData,
+} from "./types";
+
+const DESCUENTOS_ESPECIALES_KEY = "descuentos_especiales";
+const DESCUENTOS_ESPECIALES_LABEL = "Descuentos especiales";
+const REMATE_KEY = "remate";
+
+export const CAMPAIGN_TYPE_LABELS: Record<string, string> = {
+  last_minute: "Última hora",
+  first_time: "Primera compra",
+  cashback: "Cashback",
+  return_booking: "Pasaje de vuelta",
+  round_trip: "Ida y vuelta",
+  early_bird: "Compra anticipada",
+  promo_code: "Código promocional",
+  seat_level: "Descuento por asiento",
+  instant_discount: "Descuento inmediato",
+};
+const ACCENTED_CHARS: Record<string, string> = {
+  á: "a",
+  é: "e",
+  í: "i",
+  ó: "o",
+  ú: "u",
+  ü: "u",
+  ñ: "n",
+};
+
+function slugify(text: string): string {
+  return text
+    .trim()
+    .toLowerCase()
+    .replace(/[áéíóúüñ]/g, (char) => ACCENTED_CHARS[char] ?? char)
+    .replace(/[^a-z0-9]+/g, "_")
+    .replace(/^_+|_+$/g, "");
+}
+
+interface ServiceDiscount {
+  type: "percentage" | "fixed";
+  amount: number;
+}
+
+// Dynamic-pricing discounts store one percent per seat type; the best (lowest) one is what's advertised elsewhere in this library
+function getDpPercent(service: DiscountBannerServiceItem): number {
+  if (!service?.is_dp_enabled || !service?.dp_discount_percents) return 0;
+  const values = Object.values(service.dp_discount_percents)
+    .map(Number)
+    .filter((v) => isFinite(v) && v > 0);
+  return values.length ? Math.min(...values) : 0;
+}
+
+function getServiceDiscount(
+  service: DiscountBannerServiceItem,
+): ServiceDiscount | null {
+  const dpPercent = getDpPercent(service);
+  if (dpPercent > 0) return { type: "percentage", amount: dpPercent };
+
+  if (
+    service?.discount_type === "percentage" &&
+    service?.discount_value != null &&
+    service.discount_value > 0
+  ) {
+    return { type: "percentage", amount: Number(service.discount_value) };
+  }
+
+  if (
+    service?.discount_type === "fixed" &&
+    service?.discount_value != null &&
+    service.discount_value > 0
+  ) {
+    const rawDiscount = Number(service.discount_value);
+    const { max_discount } = service;
+    const amount =
+      max_discount != null && max_discount > 0
+        ? Math.min(rawDiscount, max_discount)
+        : rawDiscount;
+    return amount > 0 ? { type: "fixed", amount } : null;
+  }
+
+  return null;
+}
+
+function toDiscountLabel(
+  discount: ServiceDiscount,
+  currencySign: string,
+): string {
+  if (discount.type === "fixed") {
+    return `${CommonService.currencyRounded(discount.amount, currencySign)} de dcto`;
+  }
+  return `${Math.round(discount.amount)}% de dcto`;
+}
+
+// Groups services into one card per discount category. Remate/wow-deal is always the first card.
+export function deriveDiscountCards(
+  services: DiscountBannerServiceItem[] = [],
+  wowDealData?: WowDealData,
+  currencySign = "$",
+): DiscountBannerCard[] {
+  const cards = new Map<string, DiscountBannerCard>();
+
+  const wowServices = wowDealData?.services;
+  const hasWowDeal =
+    !!wowDealData &&
+    ((Array.isArray(wowServices) && wowServices.length > 0) ||
+      !!wowDealData.savings_percent);
+
+  if (hasWowDeal) {
+    const remateDiscount: ServiceDiscount = {
+      type: "percentage",
+      amount: Math.round(wowDealData!.savings_percent || 0),
+    };
+    cards.set(REMATE_KEY, {
+      key: REMATE_KEY,
+      subtitle: "Remate",
+      discountType: remateDiscount.type,
+      amount: remateDiscount.amount,
+      discountLabel: toDiscountLabel(remateDiscount, currencySign),
+      matchedServices: Array.isArray(wowServices) ? wowServices : [],
+      isWowDeal: true,
+    });
+  }
+
+  for (const service of services || []) {
+    const discount = getServiceDiscount(service);
+    if (!discount) continue;
+
+    const campaignType = service.discounts?.[0]?.campaign_type;
+    const campaignLabel = campaignType
+      ? CAMPAIGN_TYPE_LABELS[campaignType]
+      : undefined;
+
+    const category = campaignType
+      ? slugify(campaignType)
+      : service.offer_text
+        ? slugify(service.offer_text)
+        : DESCUENTOS_ESPECIALES_KEY;
+    const subtitle = campaignLabel || DESCUENTOS_ESPECIALES_LABEL;
+    const roundedAmount = Math.round(discount.amount);
+    const key = `${category}_${discount.type}_${roundedAmount}`;
+
+    const existing = cards.get(key);
+    if (existing) {
+      existing.matchedServices.push(service);
+    } else {
+      cards.set(key, {
+        key,
+        subtitle,
+        campaignType,
+        discountType: discount.type,
+        amount: roundedAmount,
+        discountLabel: toDiscountLabel(
+          { type: discount.type, amount: roundedAmount },
+          currencySign,
+        ),
+        matchedServices: [service],
+        isWowDeal: false,
+      });
+    }
+  }
+
+  return Array.from(cards.values());
+}

package/src/ui/DiscountBanners/index.ts

@@ -0,0 +1,14 @@
+export { default as DiscountBanners } from "./DiscountBanners";
+export { deriveDiscountCards, CAMPAIGN_TYPE_LABELS } from "./discountUtils";
+export {
+  CAMPAIGN_ART,
+  DEFAULT_BACKGROUND_IMAGES,
+  toImageUrl,
+} from "./defaultBackgrounds";
+export type { ImageRef } from "./defaultBackgrounds";
+export type {
+  DiscountBannerCard,
+  DiscountBannerServiceItem,
+  DiscountBannersProps,
+  WowDealData,
+} from "./types";

package/src/ui/DiscountBanners/types.ts

@@ -0,0 +1,53 @@
+import type { CSSProperties } from "react";
+import type { ImageRef } from "./defaultBackgrounds";
+
+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;
+}

package/src/ui/ServiceBadges/ServiceBadges.tsx

@@ -97,7 +97,7 @@ const ServiceBadges: React.FC<ServiceBadgesProps> = ({
           <div>{"Tren Express"}</div>
         </div>
       )}
-      {boardingName && isAllinBus && (
+      {boardingName && isAllinBus && !showTopLabel && (
         <div
           className={`flex items-center gap-[10px] py-[4px] px-[14px] rounded-[38px] text-[12.5px]  z-20`}
           style={{

package/src/ui/mobileweb/ServiceBadgesMobile.tsx

@@ -104,7 +104,7 @@ const ServiceBadgesMobile: React.FC<ServiceBadgesMobileProps> = ({
           <div>{"Tren Express"}</div>
         </div>
       )}
-      {boardingName && isAllinBus && (
+      {boardingName && isAllinBus && !showTopLabel && (
         <div
           className={`flex items-center gap-[2p x] py-[4px] px-[10px] rounded-[38px] min-[420]:text-[12px] text-[10px] h-[24px] z-20`}
           style={{