feat: implement plan upgrade logic with prorated pricing and MercadoPago integration

txclient/src/app/landing/offer-appointments/CTABtn.tsx

@@ -4,20 +4,41 @@ import Link from "next/link";
 import { useSessionStore } from "@core/Store/Sesion.Store";
 import style from "./style.module.css";
 
-export default function CTABtn() {
+type CTABtnProps = {
+    className?: string;
+    secondaryClassName?: string;
+    signedOutText?: string;
+    signedInText?: string;
+    showSecondaryWhenSignedOut?: boolean;
+};
+
+export default function CTABtn({
+    className = style.ctaBtn,
+    secondaryClassName,
+    signedOutText = "Crear mi cuenta gratis",
+    signedInText = "Ver planes",
+    showSecondaryWhenSignedOut = false,
+}: CTABtnProps) {
     const SessionInfo = useSessionStore();
 
     if (SessionInfo.loged) {
         return (
-            <Link href="/landing/pricing" className={style.ctaBtn}>
-                Ver planes
+            <Link href="/landing/pricing" className={className}>
+                {signedInText}
             </Link>
         );
     }
 
     return (
-        <Link href="/landing/signup" className={style.ctaBtn}>
-            Crear mi cuenta gratis
-        </Link>
+        <>
+            <Link href="/landing/signup" className={className}>
+                {signedOutText}
+            </Link>
+            {showSecondaryWhenSignedOut && secondaryClassName && (
+                <Link href="/landing/pricing" className={secondaryClassName}>
+                    Ver Planes
+                </Link>
+            )}
+        </>
     );
 }

txclient/src/app/landing/offer-appointments/page.tsx

@@ -1,7 +1,6 @@
 import { Metadata } from "next";
 import AnimatedContainer from "@components/AnimatedConainer/AnimatedContainer";
 import style from "./style.module.css";
-import Link from "next/link";
 import HeaderConfProvider from "@core/app/components/HeaderConfProvider/HeaderConfProvider";
 import { ScrollToTop } from "@core/app/components/ScrollTop";
 import DefaultLoginAction from "@core/app/components/LoginAction/DefaultLoginAction";
@@ -42,12 +41,13 @@ export default function OfferAppointmentsPage() {
                     Olvidate del teléfono y los mensajes a deshora. Con nuestra plataforma, tus clientes pueden reservar turnos 24/7 de forma automática. Optimizá tu tiempo, reducí ausencias y llevá tu negocio al siguiente nivel.
                 </p>
                 <div className={style.btnGroup}>
-                    <Link href="/landing/signup" className={style.primaryBtn}>
-                        ¡Empezá Gratis Hoy!
-                    </Link>
-                    <Link href="/landing/pricing" className={style.secondaryBtn}>
-                        Ver Planes
-                    </Link>
+                    <CTABtn
+                        className={style.primaryBtn}
+                        secondaryClassName={style.secondaryBtn}
+                        signedOutText="¡Empezá Gratis Hoy!"
+                        signedInText="Ver planes"
+                        showSecondaryWhenSignedOut
+                    />
                 </div>
             </div>
 
@@ -86,7 +86,7 @@ export default function OfferAppointmentsPage() {
                     <div className={style.stepNumber}>1</div>
                     <div className={style.stepContent}>
                         <h3>Creá tu cuenta gratis</h3>
-                        <p>Registrate en segundos. Podés probar la plataforma completa sin compromisos ni tarjetas de crédito. <Link href="/landing/signup">Registrate acá</Link>.</p>
+                        <p>Registrate en segundos. Podés probar la plataforma completa sin compromisos ni tarjetas de crédito.</p>
                     </div>
                 </div>
 
@@ -128,4 +128,3 @@ export default function OfferAppointmentsPage() {
         </AnimatedContainer>
     );
 }
-