ManagePlans

import ManagePlans from './path/to/ManagePlans';

import React from 'react';
import ManagePlans from './components/ManagePlans';

const PlansPage = () => {
    return (
        <div>
            <h1>Our Plans</h1>
            <ManagePlans />
        </div>
    );
};

export default PlansPage;

import React, {useState} from 'react';
import PricingTable from './PricingTable';
import Link from 'next/link';
import CustomToggleButton from '../ui/CustomToggleButton';
import useBillingPlans from '@/billing-ui/hooks/useBillingPlans';
import {BILLING_CYCLES} from '../../types';
import {useBillingContext} from "@/billing-ui/context/BillingContext";

const ManagePlans: React.FC = () => {
    const {handleSelectPlan, handleContactUs, userToken} = useBillingContext();
    const [isMonthly, setIsMonthly] = useState(true);
    const {plans} = useBillingPlans(String(userToken), isMonthly ? BILLING_CYCLES.MONTHLY : BILLING_CYCLES.YEARLY);

    const handleToggle = () => {
        setIsMonthly((prev) => !prev);
    };

    return (
        <div className="min-h-screen flex flex-col justify-between">
            <div className="flex flex-col items-center py-8">
                <h1 className="text-3xl font-bold mb-4">Explore our plans</h1>
                <CustomToggleButton isMonthly={isMonthly} onToggle={handleToggle} />
                <div className="flex justify-center w-full px-6">
                    <PricingTable 
                        onSubscribe={handleSelectPlan} 
                        onContactUs={handleContactUs} 
                        plans={plans} 
                        onTrial={(planCode: string) => {
                            throw new Error('Function not implemented.');
                        }} 
                    />
                </div>
            </div>
            <div className="text-center pb-8">
                <Link href="/billing/manage-billing" className="text-primary">Manage billing</Link>
            </div>
        </div>
    );
};

export default ManagePlans;

const CustomizedManagePlans = () => {
    const customHandleSelectPlan = (planCode) => {
        console.log("Selected plan:", planCode);
        // Custom plan selection logic here
    };

    return (
        <div className="custom-container">
            <ManagePlans handleSelectPlan={customHandleSelectPlan} />
        </div>
    );
};

export default CustomizedManagePlans;