salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

STripe Paymen and PK payemtns and many othe rbacekd and froentened issues

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2026-01-07 05:51:36 +00:00
parent 87d1662a18
commit 0386d4bf33
24 changed files with 1079 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
frontend/src/pages/AuthPages/SignUp.tsx
View File

@@ -1,5 +1,5 @@
import { useEffect, useMemo, useState } from "react";
import { Link } from "react-router-dom";
import { Link, useNavigate } from "react-router-dom";
import PageMeta from "../../components/common/PageMeta";
import SignUpFormUnified from "../../components/auth/SignUpFormUnified";
@@ -19,6 +19,7 @@ interface Plan {
}
export default function SignUp() {
const navigate = useNavigate();
const planSlug = useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("plan") || "";
@@ -27,6 +28,38 @@ export default function SignUp() {
const [plans, setPlans] = useState<Plan[]>([]);
const [plansLoading, setPlansLoading] = useState(true);
const [selectedPlan, setSelectedPlan] = useState<Plan | null>(null);
const [geoChecked, setGeoChecked] = useState(false);
// Check geo location and redirect PK users to /signup/pk
// Using free public API: https://api.country.is (no signup required, CORS enabled)
useEffect(() => {
const checkGeoAndRedirect = async () => {
try {
// Free public geo API - no signup required
const response = await fetch('https://api.country.is/', {
signal: AbortSignal.timeout(3000), // 3 second timeout
});
if (response.ok) {
const data = await response.json();
const countryCode = data?.country;
if (countryCode === 'PK') {
// Preserve query params when redirecting
const queryString = window.location.search;
navigate(`/signup/pk${queryString}`, { replace: true });
return;
}
}
} catch (err) {
// Silently fail - continue with global signup
console.log('Geo detection failed, using global signup');
}
setGeoChecked(true);
};
checkGeoAndRedirect();
}, [navigate]);
useEffect(() => {
const fetchPlans = async () => {
@@ -68,6 +101,15 @@ export default function SignUp() {
fetchPlans();
}, [planSlug]);
// Don't render until geo check is complete (prevents flash)
if (!geoChecked) {
return (
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-brand-500"></div>
</div>
);
}
return (
<>
<PageMeta

116
frontend/src/pages/AuthPages/SignUpPK.tsx Normal file
View File

@@ -0,0 +1,116 @@
/**
* SignUpPK - Pakistan-specific signup page
* Shows Credit/Debit Card + Bank Transfer payment options
*
* Route: /signup/pk
*/
import { useEffect, useMemo, useState } from "react";
import { Link } from "react-router-dom";
import PageMeta from "../../components/common/PageMeta";
import SignUpFormUnified from "../../components/auth/SignUpFormUnified";
interface Plan {
id: number;
name: string;
slug: string;
price: string | number;
billing_cycle: string;
is_active: boolean;
max_users: number;
max_sites: number;
max_keywords: number;
max_ahrefs_queries: number;
included_credits: number;
features: string[];
}
export default function SignUpPK() {
const planSlug = useMemo(() => {
const params = new URLSearchParams(window.location.search);
return params.get("plan") || "";
}, []);
const [plans, setPlans] = useState<Plan[]>([]);
const [plansLoading, setPlansLoading] = useState(true);
const [selectedPlan, setSelectedPlan] = useState<Plan | null>(null);
useEffect(() => {
const fetchPlans = async () => {
setPlansLoading(true);
try {
const API_BASE_URL = import.meta.env.VITE_BACKEND_URL || "https://api.igny8.com/api";
const res = await fetch(`${API_BASE_URL}/v1/auth/plans/`);
const data = await res.json();
const allPlans = data?.results || [];
// Show all active plans (including free plan)
const publicPlans = allPlans
.filter((p: Plan) => p.is_active)
.sort((a: Plan, b: Plan) => {
const priceA = typeof a.price === 'number' ? a.price : parseFloat(String(a.price || 0));
const priceB = typeof b.price === 'number' ? b.price : parseFloat(String(b.price || 0));
return priceA - priceB;
});
setPlans(publicPlans);
// Auto-select plan from URL or default to first plan
if (planSlug) {
const plan = publicPlans.find((p: Plan) => p.slug === planSlug);
if (plan) {
setSelectedPlan(plan);
} else {
setSelectedPlan(publicPlans[0] || null);
}
} else {
setSelectedPlan(publicPlans[0] || null);
}
} catch (e) {
console.error('Failed to load plans:', e);
} finally {
setPlansLoading(false);
}
};
fetchPlans();
}, [planSlug]);
return (
<>
<PageMeta
title="Sign Up (Pakistan) - IGNY8"
description="Create your IGNY8 account and start building topical authority with AI-powered content"
/>
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
<div className="flex min-h-screen">
{/* Left Side - Signup Form with Pakistan-specific payment options */}
<SignUpFormUnified
plans={plans}
selectedPlan={selectedPlan}
onPlanSelect={setSelectedPlan}
plansLoading={plansLoading}
countryCode="PK"
/>
{/* Right Side - Pricing Plans */}
<div className="hidden lg:flex lg:w-1/2 bg-gradient-to-br from-brand-50 to-purple-50 dark:from-gray-900 dark:to-gray-800 p-8 xl:p-12 items-start justify-center relative">
{/* Logo - Top Right */}
<Link to="/" className="absolute top-6 right-6">
<img
src="/images/logo/IGNY8_LIGHT_LOGO.png"
alt="IGNY8"
className="h-12 w-auto"
/>
</Link>
<div className="w-full max-w-2xl mt-20">
{/* Pricing Plans Component Will Load Here */}
<div id="signup-pricing-plans" className="w-full">
{/* Plans will be rendered by SignUpFormUnified */}
</div>
</div>
</div>
</div>
</div>
</>
);
}

41
frontend/src/pages/Settings/Plans.tsx
View File

@@ -1,10 +1,12 @@
import { useState, useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';
import PageMeta from '../../components/common/PageMeta';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { fetchAPI } from '../../services/api';
import { PricingPlan } from '../../components/ui/pricing-table';
import PricingTable1 from '../../components/ui/pricing-table/pricing-table-1';
import { usePageLoading } from '../../context/PageLoadingContext';
import { useAuthStore } from '../../store/authStore';
interface Plan {
id: number;
@@ -105,6 +107,45 @@ export default function Plans() {
const toast = useToast();
const { startLoading, stopLoading } = usePageLoading();
const [plans, setPlans] = useState<Plan[]>([]);
const [searchParams, setSearchParams] = useSearchParams();
const { refreshUser } = useAuthStore();
// Handle payment success redirect from Stripe
useEffect(() => {
const success = searchParams.get('success');
const sessionId = searchParams.get('session_id');
if (success === 'true') {
// Clear the query params to avoid re-triggering
setSearchParams({});
// Refresh user data to get updated account status
refreshUser().then(() => {
toast.success('Payment successful! Your subscription is now active.');
}).catch((err) => {
console.error('Failed to refresh user after payment:', err);
// Still show success message since payment was processed
toast.success('Payment successful! Please refresh the page to see updates.');
});
}
}, [searchParams, setSearchParams, refreshUser, toast]);
// Handle PayPal success redirect
useEffect(() => {
const paypal = searchParams.get('paypal');
if (paypal === 'success') {
setSearchParams({});
refreshUser().then(() => {
toast.success('PayPal payment successful! Your subscription is now active.');
}).catch(() => {
toast.success('PayPal payment successful! Please refresh the page to see updates.');
});
} else if (paypal === 'cancel') {
setSearchParams({});
toast.info('Payment was cancelled.');
}
}, [searchParams, setSearchParams, refreshUser, toast]);
useEffect(() => {
loadPlans();

3
frontend/src/pages/account/PlansAndBillingPage.tsx
View File

@@ -36,6 +36,7 @@ import PageMeta from '../../components/common/PageMeta';
import PageHeader from '../../components/common/PageHeader';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { usePageLoading } from '../../context/PageLoadingContext';
import { formatCurrency } from '../../utils';
import {
getCreditBalance,
getCreditPackages,
@@ -711,7 +712,7 @@ export default function PlansAndBillingPage() {
<td className="px-6 py-3 text-gray-600 dark:text-gray-400">
{new Date(invoice.created_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
</td>
<td className="px-6 py-3 text-center font-semibold text-gray-900 dark:text-white">${invoice.total_amount}</td>
<td className="px-6 py-3 text-center font-semibold text-gray-900 dark:text-white">{formatCurrency(invoice.total_amount, invoice.currency)}</td>
<td className="px-6 py-3 text-center">
<Badge variant="soft" tone={invoice.status === 'paid' ? 'success' : 'warning'}>
{invoice.status}