From 5c618d666355396d0f745e734acbc14d17f3b7be Mon Sep 17 00:00:00 2001
From: Juan Diego Moreno Upegui <juan42774@gmail.com>
Date: Sat, 4 Apr 2026 21:13:21 -0500
Subject: [PATCH] Feature: Added custom message for whatsapp when clicking in
 the button

---
 src/components/PricingCard.astro | 35 ++++++++++++++++++++++++++++----
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/components/PricingCard.astro b/src/components/PricingCard.astro
index 01dea19..3910298 100644
--- a/src/components/PricingCard.astro
+++ b/src/components/PricingCard.astro
@@ -1,6 +1,6 @@
 ---
 export interface PricingCardProps {
-    planType: string;
+    planType: "basic" | "intermediate" | "advanced";
     price: string;
     description: string;
     featuresTitle: string;
@@ -20,11 +20,38 @@ const {
     isBestPlan,
     class: className,
 } = Astro.props as PricingCardProps;
+
+function getPlanTypeText(planType: "basic" | "intermediate" | "advanced") {
+    switch (planType) {
+        case "basic":
+            return "Básico";
+        case "intermediate":
+            return "Intermedio";
+        case "advanced":
+            return "Avanzado";
+        default:
+            return planType;
+    }
+}
+
+function getPlanWhatsappMessage(planType: "basic" | "intermediate" | "advanced") {
+    switch (planType) {
+        case "basic":
+            return "Hola, estoy interesado en el Plan Básico de Naliia. ¿Podrían brindarme más información sobre este plan y cómo puedo adquirirlo?";
+        case "intermediate":
+            return "Hola, estoy interesado en el Plan Intermedio de Naliia. ¿Podrían brindarme más información sobre este plan y cómo puedo adquirirlo?";
+        case "advanced":
+            return "Hola, estoy interesado en el Plan Avanzado de Naliia. ¿Podrían brindarme más información sobre este plan y cómo puedo adquirirlo?";
+        default:
+            return "Hola, estoy interesado en uno de los planes de Naliia. ¿Podrían brindarme más información sobre los planes y cómo puedo adquirirlos?";
+    }
+}
+
 ---
 
 <div class:list={["pricing-card", className]} data-best-plan={isBestPlan}>
     <div class="pricing-card-header">
-        <p class="plan-type">{`Plan ${planType}`}</p>
+        <p class="plan-type">{`Plan ${getPlanTypeText(planType)}`}</p>
 
         <div class="price-and-description">
             <h4 class="price">{price}</h4>
@@ -47,8 +74,8 @@ const {
         </div>
     </div>
 
-    <button class="button call-to-action-button button-hover-effect"
-        >{buttonText}</button
+    <a href={`https://wa.me/573001158180?text=${encodeURIComponent(getPlanWhatsappMessage(planType))}`} target="_blank" class="button call-to-action-button button-hover-effect"
+        >{buttonText}</a
     >
 </div>