PricingTable

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

import React from 'react';
import PricingTable from './components/PricingTable';
import { Plan } from './types';

const plans: Plan[] = [
    // Define your plans here
];

const handleSubscribe = (plan: Plan) => {
    console.log('Subscribe to plan:', plan);
};

const handleContactUs = () => {
    console.log('Contact us for more details.');
};

const handleTrial = (planCode: string) => {
    console.log('Start trial for plan:', planCode);
};

const PlansPage = () => {
    return (
        <div>
            <h1>Our Plans</h1>
            <PricingTable 
                onSubscribe={handleSubscribe} 
                onContactUs={handleContactUs} 
                onTrial={handleTrial} 
                plans={plans} 
            />
        </div>
    );
};

export default PlansPage;

import React from 'react';
import PlanCard from '../modules/PlanCard';
import { useRouter } from 'next/router';
import { Plan } from '../../types';
import { useBillingContext } from '@/billing-ui/context/BillingContext';

interface PricingTableProps {
    onSubscribe: (plan: Plan) => void;
    onContactUs: () => void;
    onTrial: (planCode: string) => void;
    plans: Plan[];
}

const PricingTable: React.FC<PricingTableProps> = ({ onSubscribe, onContactUs, onTrial, plans }) => {
    const { subscription } = useBillingContext();
    const router = useRouter();

    const handleContactUs = () => {
        onContactUs();
    };

    const handleSubscribe = (plan: Plan) => {
        if (onSubscribe) {
            onSubscribe(plan);
        } else {
            router.push({
                pathname: '/checkout',
                query: {
                    plan: JSON.stringify(plan),
                },
            });
        }
    };
    return (
        <div className="flex flex-shrink justify-center bg-background w-full h-full px-6 gap-4 my-6">
            {plans.length > 0 && subscription ? (
                plans.map((plan) => (
                    <div key={plan.name} className='w-full flex-shrink'>
                        <PlanCard
                            plan={plan}
                            onContactUs={handleContactUs}
                            onSubscribe={() => handleSubscribe(plan)}
                            onTrial={onTrial}
                        />
                    </div>
                ))
            ) : (
                <div className="flex items-center justify-center w-full h-full">
                    <div className="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-primary"></div>
                </div>
            )}
        </div>
    );
};

export default PricingTable;

const CustomizedPricingTable = () => {
    const customHandleSubscribe = (plan: Plan) => {
        console.log("Custom subscribe to plan:", plan);
    };

    return (
        <PricingTable 
            onSubscribe={customHandleSubscribe} 
            onContactUs={() => console.log("Custom contact us action")} 
            onTrial={(planCode: string) => console.log("Custom start trial for plan:", planCode)} 
            plans={customPlans} 
        />
    );
};

export default CustomizedPricingTable;