import { Head, router } from '@inertiajs/react'; import { useState, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; import AuthenticatedLayout from '@/layouts/authenticated-layout'; import SubscriptionLayout from './subscription-layout'; interface Plan { id: number; name: string; description: string; number_of_users: number; status: boolean; free_plan: boolean; modules: string[]; package_price_yearly: number; package_price_monthly: number; storage_limit: number; trial: boolean; trial_days: number; } interface Module { module: string; alias: string; image: string; monthly_price: number; yearly_price: number; } interface Props { plan: Plan; activeModules: Module[]; userActiveModules: string[]; bankTransferEnabled: string; bankTransferInstructions: string; planExpireDate?: string; initialPeriod?: 'monthly' | 'yearly'; } export default function Subscribe({ plan, activeModules, userActiveModules, bankTransferEnabled, bankTransferInstructions, planExpireDate, initialPeriod = 'monthly' }: Props) { const { t } = useTranslation(); const [pricingPeriod, setPricingPeriod] = useState<'monthly' | 'yearly'>(initialPeriod); useEffect(() => { if (initialPeriod) { setPricingPeriod(initialPeriod); } }, [initialPeriod]); const handleSubscribe = (subscriptionData: any) => { console.log('Processing subscription:', subscriptionData); // Here you would make the API call to process the subscription router.post(route('subscriptions.store'), subscriptionData, { onSuccess: () => { // Handle successful subscription }, onError: (errors) => { console.error('Subscription failed:', errors); } }); }; return (
{/* Pricing Period Toggle */}
{/* Subscription Layout */}
); }