Skip to main content
The getPlans function is the frontend service layer that provides pricing plan data. This function currently returns mock data but is structured to support future database or API integration.
This documentation covers the frontend service layer from the RespondeIA frontend repository. The pricing data is currently hardcoded in modules/prices/services/get-plans.ts.

​
Source Code

From modules/prices/services/get-plans.ts: 
import { Plan } from "../types/plan";

const MOCK_PLANS: Plan[] = [
  {
    id: "basico",
    name: "Básico",
    description: "Para negocios que recién comienzan",
    priceMonth: 29,
    priceYear: 23,
    features: ["1 número WhatsApp", "Hasta 500 mensajes", "Respuestas automáticas IA"],
    buttonText: "Comenzar prueba",
    highlight: false,
  },
  {
    id: "pro",
    name: "Pro",
    description: "Para pymes en crecimiento",
    priceMonth: 59,
    priceYear: 47,
    features: ["1 número WhatsApp", "Mensajes ilimitados", "IA personalizada avanzada", "CRM de contactos"],
    buttonText: "Comenzar prueba",
    highlight: true,
  },
  {
    id: "agencia",
    name: "Agencia",
    description: "Para agencias y revendedores",
    priceMonth: 149,
    priceYear: 119,
    features: ["Hasta 5 números", "Mensajes ilimitados", "Panel multi-cliente", "White-label"],
    buttonText: "Contactar ventas",
    highlight: false,
  },
];

export async function getPlans(): Promise<Plan[]> {
  try {
    return MOCK_PLANS;
  } catch (error) {
    console.error("Error al obtener los planes:", error);
    throw new Error("No se pudieron cargar los planes de precios.");
  }
}

​
Plan Interface

From modules/prices/types/plan.ts: 
export interface Plan {
  id: string;
  name: string;
  description: string;
  priceMonth: number;
  priceYear: number; // Base price for annual calculation
  features: string[];
  buttonText: string;
  highlight: boolean; // Whether to highlight in UI
}

export type BillingCycle = "monthly" | "annually";

​
Returns

Returns a Promise<Plan[]> - array of all available pricing plans.

​
Current Plans

The service returns three plans:
  1. Básico (29/month,29/month, 23/month annually)
    • For businesses just starting out
    • 1 WhatsApp number
    • Up to 500 messages
    • AI automatic responses
  2. Pro (59/month,59/month, 47/month annually) - Highlighted
    • For growing SMBs
    • 1 WhatsApp number
    • Unlimited messages
    • Advanced custom AI
    • Contact CRM
  3. Agencia (149/month,149/month, 119/month annually)
    • For agencies and resellers
    • Up to 5 numbers
    • Unlimited messages
    • Multi-client panel
    • White-label
[
  {
    "id": "basico",
    "name": "Básico",
    "description": "Para negocios que recién comienzan",
    "priceMonth": 29,
    "priceYear": 23,
    "features": [
      "1 número WhatsApp",
      "Hasta 500 mensajes",
      "Respuestas automáticas IA"
    ],
    "buttonText": "Comenzar prueba",
    "highlight": false
  },
  {
    "id": "pro",
    "name": "Pro",
    "description": "Para pymes en crecimiento",
    "priceMonth": 59,
    "priceYear": 47,
    "features": [
      "1 número WhatsApp",
      "Mensajes ilimitados",
      "IA personalizada avanzada",
      "CRM de contactos"
    ],
    "buttonText": "Comenzar prueba",
    "highlight": true
  },
  {
    "id": "agencia",
    "name": "Agencia",
    "description": "Para agencias y revendedores",
    "priceMonth": 149,
    "priceYear": 119,
    "features": [
      "Hasta 5 números",
      "Mensajes ilimitados",
      "Panel multi-cliente",
      "White-label"
    ],
    "buttonText": "Contactar ventas",
    "highlight": false
  }
]

​
Usage Example

​
In Server Components (Next.js App Router)

From app/(public)/pricing/page.tsx: 
import { useGetPricingPlans } from "@/modules/prices/hooks/useGetPricingPlans";
import { PricingScreen } from "@/modules/prices/screens/pricing-screen";

// ISR configuration: Revalidate every 24 hours
export const revalidate = 86400;

export default async function PricingPage() {
  const { plans } = await useGetPricingPlans();
  return <PricingScreen initialPlans={plans} />;
}

​
In Client Components

From modules/prices/screens/pricing-screen.tsx: 
"use client";

import { Plan } from "../types/plan";
import { usePricingPlans } from "../hooks/usePrincingPlans";

interface PricingScreenProps {
  initialPlans: Plan[];
}

export function PricingScreen({ initialPlans }: PricingScreenProps) {
  const { plans, isAnnual, toggleBilling } = usePricingPlans(initialPlans);

  return (
    <main className="min-h-screen bg-gray-50 py-20 px-4">
      <PricingGrid plans={plans} />
    </main>
  );
}

​
Notes

The pricing plans are currently hardcoded in get-plans.ts. The function is structured to easily support future database or API integration.
The pricing page uses ISR (Incremental Static Regeneration) with a 24-hour revalidation period to ensure optimal performance.
The highlight field marks the recommended plan (currently “Pro”). Only one plan should have highlight: true.

Plan Type Interface

TypeScript interface for Plan objects

usePricingPlans Hook

Client-side hook for managing pricing state

Pricing Components

UI components for displaying plans

Pricing Guide

Complete pricing documentation

Build docs developers (and LLMs) love

Get started for freeTalk to us