horacio/turnosxpress
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: plan management

Browse Source
This commit is contained in:
Horacio Daniel Ros
2026-07-17 21:28:41 -03:00
parent d6a4aab52b
commit 8d9a03cd23
21 changed files with 1355 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
txclient/src/app/landing/subscription/[planid]/page.tsx
+28 -8
View File
@@ -5,6 +5,7 @@ import SecurePage from "@core/app/components/Secure/Secure";
import { LOGIN_ACTIONS } from "@core/Store/LoginAction.Store";
import { useSessionStore } from "@core/Store/Sesion.Store";
import { useParams } from "next/navigation";
import { useSearchParams } from "next/navigation";
import { useEffect, useState, Suspense } from "react";
import {
CreateMPPreApprovalParams,
@@ -22,9 +23,11 @@ type UrlData = {
planid: string;
};
export default function SubscriptionAddPage() {
function SubscriptionAddContent() {
const data = useParams<UrlData>();
const searchParams = useSearchParams();
const id = data.planid;
const isRenewal = searchParams.get("renew") === "1";
const SessionInfo = useSessionStore();
const alert = useAlert();
const eventHandler = useEventHandlerStore();
@@ -33,6 +36,7 @@ export default function SubscriptionAddPage() {
const [plan, setPlan] = useState<IPlan | null>(null);
const [selectedMonths, setSelectedMonths] = useState<number>(1);
const [finalPrice, setFinalPrice] = useState<number>(0);
const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
const getPlanInfo = () => {
eventHandler.setEventType(EVENT_TYPES.LOADING);
@@ -71,6 +75,10 @@ export default function SubscriptionAddPage() {
}, [selectedMonths, plan]);
const getLink = () => {
if (isSubmitting) {
return;
}
if (SessionInfo.userId && SessionInfo.loged) {
const preApprovalData: CreateMPPreApprovalParams = {
planId: id,
@@ -79,6 +87,7 @@ export default function SubscriptionAddPage() {
};
eventHandler.setEventType(EVENT_TYPES.LOADING);
setIsSubmitting(true);
ApiRequest.post<MPPreApprovalResponse>("suscriptions/preapproval", preApprovalData)
.then(async (response) => {
@@ -95,6 +104,7 @@ export default function SubscriptionAddPage() {
alert.showError(error.format ? error.format() : "Ocurrió un error");
})
.finally(() => {
setIsSubmitting(false);
eventHandler.setEventType(EVENT_TYPES.SLEEP);
});
}
@@ -123,14 +133,16 @@ export default function SubscriptionAddPage() {
<div className={styles.leftPanel}>
<div style={{ marginBottom: "2rem" }}>
<span style={{ background: "rgba(255,255,255,0.2)", padding: "5px 12px", borderRadius: "20px", fontSize: "0.85rem", fontWeight: "bold", textTransform: "uppercase", letterSpacing: "1px" }}>
Resumen de contratación
{isRenewal ? "Resumen de renovación" : "Resumen de contratación"}
</span>
</div>
<h1 className={styles.title}>{plan?.name}</h1>
<p className={styles.subtitle}>
{plan?.price === 0
? "Activa tu plan de forma instantánea. Sin tarjetas de crédito, sin complicaciones."
: "Selecciona la duración de tu plan. ¡Aprovechá los descuentos exclusivos pagando por más meses por adelantado!"}
: isRenewal
? "Elegí cuántos meses querés sumar. El nuevo período se agrega al vencimiento actual cuando se apruebe el pago."
: "Selecciona la duración de tu plan. ¡Aprovechá los descuentos exclusivos pagando por más meses por adelantado!"}
</p>
{plan?.features && (
@@ -202,18 +214,18 @@ export default function SubscriptionAddPage() {
</div>
<div className={styles.actionButtons}>
<button className={styles.btnSecondary} onClick={() => goTo("/landing/pricing")}>
<button className={styles.btnSecondary} onClick={() => goTo("/landing/pricing")} disabled={isSubmitting}>
Volver
</button>
{plan?.price === 0 ? (
<button className={`${styles.btnPrimary} ${styles.btnFree}`} style={{ margin: 0 }} onClick={getLink}>
<button className={`${styles.btnPrimary} ${styles.btnFree}`} style={{ margin: 0 }} onClick={getLink} disabled={isSubmitting}>
Activar Gratis Ahora
</button>
) : (
<button className={styles.btnPrimary} onClick={getLink}>
<button className={styles.btnPrimary} onClick={getLink} disabled={isSubmitting}>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect><line x1="1" y1="10" x2="23" y2="10"></line></svg>
Pagar con MercadoPago
{isSubmitting ? "Generando pago..." : isRenewal ? "Extender con MercadoPago" : "Pagar con MercadoPago"}
</button>
)}
</div>
@@ -227,3 +239,11 @@ export default function SubscriptionAddPage() {
</Suspense>
);
}
export default function SubscriptionAddPage() {
return (
<Suspense fallback={<SuspenseLoading />}>
<SubscriptionAddContent />
</Suspense>
);
}