ptechcore_ui 0.0.0

package/src/pages/pricings/ListPricing.tsx

@@ -0,0 +1,321 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+    Check,
+    Star,
+    Sparkles,
+    X
+} from 'lucide-react';
+import { useToast } from '../../contexts/ToastContext';
+import { useSession } from '../../contexts/SessionContext';
+
+// Types pour les plans de pricing
+interface PricingFeature {
+    name: string;
+    included: boolean;
+    limit?: string;
+    special?: boolean;
+}
+
+interface PricingPlan {
+    id: string;
+    code?: string;
+    name: string;
+    description: string;
+    price: number;
+    originalPrice?: number;
+    currency: string;
+    period: string;
+    popular?: boolean;
+    features: PricingFeature[];
+    buttonText: string;
+    buttonVariant: 'primary' | 'secondary' | 'dark';
+}
+
+interface PricingCategory {
+    id: string;
+    name: string;
+    plans: PricingPlan[];
+}
+
+const ListPricing: React.FC<{ organizationId: number }> = ({ organizationId }) => {
+    const [selectedPlan, setSelectedPlan] = useState<string | null>(null);
+    const [loading, setLoading] = useState(false);
+    const [activeCategory, setActiveCategory] = useState<string>('personnel');
+
+    const navigate = useNavigate();
+    const { success, error: showError } = useToast();
+    const { loggedUser , token } = useSession();
+
+    // Plans de pricing par catégorie
+    const pricingCategories: PricingCategory[] = [
+        {
+            id: 'personnel',
+            name: 'Personnel',
+            plans: [
+                {
+                    id: 'pro',
+                    code: 'rewise_pro',
+                    name: 'Pro',
+                    description: 'Améliorez la productivité et l\'apprentissage avec un accès supplémentaire.',
+                    price: 100000,
+                    originalPrice: 83333,
+                    currency: 'FCFA',
+                    period: '/ mois',
+                    features: [
+                        { name: '1 entité', included: true },
+                        { name: 'jusqu\'à 5 utilisateurs', included: true },
+                        { name: 'CRM, Comptabilité et Facturation', included: true },
+                        { name: '+1 module au choix', included: false },
+
+
+                    ],
+                    buttonText: 'Obtenez Pro',
+                    buttonVariant: 'primary'
+                },
+                {
+                    id: 'max',
+                    code: 'rewise_max',
+                    name: 'Max',
+                    description: 'Débloquez toutes les capacités de Perplexity avec un accès anticipé aux nouveaux produits.',
+                    price: 200000,
+                    originalPrice: 166667,
+                    currency: 'FCFA',
+                    period: '/ mois',
+                    popular: true,
+                    features: [
+                        { name: 'jusqu\'à 3 entités', included: true },
+                        { name: 'jusqu\'à 15 utilisateurs', included: true },
+                        { name: 'CRM, Comptabilité et Facturation', included: true },
+                        { name: '+1 module au choix', included: true },
+                    ],
+                    buttonText: 'Obtenez Max',
+                    buttonVariant: 'dark'
+                }
+            ]
+        },
+        {
+            id: 'education',
+            name: 'Éducation',
+            plans: [
+                {
+                    id: 'student',
+                    name: 'Étudiant',
+                    description: 'Plan spécial pour les étudiants et enseignants.',
+                    price: 10.00,
+                    currency: '$US',
+                    period: '/ mois',
+                    features: [
+                        { name: 'Accès complet à la recherche académique', included: true },
+                        { name: 'Citations et références automatiques', included: true },
+                        { name: 'Collaboration en temps réel', included: true },
+                        { name: 'Support pédagogique', included: true }
+                    ],
+                    buttonText: 'Plan Étudiant',
+                    buttonVariant: 'primary'
+                }
+            ]
+        },
+        {
+            id: 'affaires',
+            name: 'Affaires',
+            plans: [
+                {
+                    id: 'business',
+                    name: 'Business',
+                    description: 'Solution complète pour les entreprises.',
+                    price: 50.00,
+                    currency: '$US',
+                    period: '/ mois',
+                    features: [
+                        { name: 'Gestion d\'équipe avancée', included: true },
+                        { name: 'API d\'entreprise', included: true },
+                        { name: 'Sécurité renforcée', included: true },
+                        { name: 'Support prioritaire 24/7', included: true },
+                        { name: 'Rapports et analytics', included: true }
+                    ],
+                    buttonText: 'Plan Business',
+                    buttonVariant: 'primary'
+                }
+            ]
+        }
+    ];
+
+    const handleSelectPlan = async (planId: string) => {
+        if (!token) {
+            showError('Vous devez être connecté pour sélectionner un plan');
+            navigate('/auth/login');
+            return;
+        }
+
+        setLoading(true);
+        setSelectedPlan(planId);
+
+        try {
+            // Simuler l'appel API pour sélectionner le plan
+            await new Promise(resolve => setTimeout(resolve, 1000));
+
+            // Trouver le plan sélectionné
+            const selectedPlanData = getCurrentPlans().find(plan => plan.id === planId);
+            if (selectedPlanData) {
+                // Redirection vers le panier avec les paramètres du plan
+                navigate(`/pricing/cart?org=${organizationId}&plan=${planId}&code=${selectedPlanData.code}`);
+            } else {
+                showError('Plan non trouvé');
+            }
+        } catch (error) {
+            showError('Erreur lors de la sélection du plan');
+            console.error(error);
+        } finally {
+            setLoading(false);
+            setSelectedPlan(null);
+        }
+    };
+
+    const getCurrentPlans = (): PricingPlan[] => {
+        const category = pricingCategories.find(cat => cat.id === activeCategory);
+        return category ? category.plans : [];
+    };
+
+    const getButtonStyles = (variant: string, isSelected: boolean) => {
+        const baseStyles = "w-full py-3 px-6 rounded-lg font-medium transition-all duration-200 flex items-center justify-center gap-2";
+
+        if (isSelected) {
+            return `${baseStyles} bg-gray-400 text-white cursor-not-allowed`;
+        }
+
+        switch (variant) {
+            case 'primary':
+                return `${baseStyles} bg-teal-600 text-white hover:bg-teal-700`;
+            case 'dark':
+                return `${baseStyles} bg-gray-800 text-white hover:bg-gray-900`;
+            default:
+                return `${baseStyles} bg-gray-100 text-gray-900 hover:bg-gray-200 border border-gray-300`;
+        }
+    };
+
+    return (
+        <div className="min-h-screen bg-gray-50 py-8">
+            <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+                {/* Category Tabs */}
+                {/* <div className="flex justify-center mb-12">
+          <div className="bg-gray-100 p-1 rounded-lg">
+            {pricingCategories.map((category) => (
+              <button
+                key={category.id}
+                onClick={() => setActiveCategory(category.id)}
+                className={`px-6 py-2 rounded-md font-medium transition-all duration-200 ${
+                  activeCategory === category.id
+                    ? 'bg-white text-teal-600 shadow-sm'
+                    : 'text-gray-600 hover:text-gray-900'
+                }`}
+              >
+                {category.name}
+              </button>
+            ))}
+          </div>
+        </div> */}
+
+                <h1 className='text-center text-3xl font-bold mb-8'>Choisissez votre plan</h1>
+                <p className='text-center text-gray-600 mb-12'>Sélectionnez le plan qui convient le mieux à vos besoins.</p>
+
+                {/* Pricing Cards */}
+                <div className="flex justify-center gap-8 mb-16">
+                    {getCurrentPlans().map((plan) => (
+                        <div
+                            key={plan.id}
+                            className={`relative bg-white rounded-2xl shadow-sm border transition-all duration-300 hover:shadow-md w-full max-w-md ${plan.popular
+                                    ? 'border-gray-300'
+                                    : 'border-gray-200'
+                                }`}
+                        >
+                            {/* Popular badge */}
+                            {plan.popular && (
+                                <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
+                                    <span className="bg-teal-100 text-teal-700 px-3 py-1 rounded-full text-sm font-medium">
+                                        Populaire
+                                    </span>
+                                </div>
+                            )}
+
+                            <div className="p-8">
+                                {/* Plan header */}
+                                <div className="mb-8">
+                                    <h3 className="text-2xl font-bold text-gray-900 mb-3">{plan.name}</h3>
+                                    <div className="mb-4">
+                                        <span className="text-3xl font-bold text-gray-900">
+                                            {plan.price.toFixed(2)} {plan.currency}
+                                        </span>
+                                        <span className="text-gray-600 ml-1">{plan.period}</span>
+                                        {plan.originalPrice && (
+                                            <div className="text-sm text-gray-500">
+                                                {plan.originalPrice.toFixed(2)} {plan.currency} lorsque facturé annuellement
+                                            </div>
+                                        )}
+                                    </div>
+                                    <p className="text-gray-600 text-sm leading-relaxed">{plan.description}</p>
+                                </div>
+
+                                {/* CTA Button */}
+                                <div className="mb-8">
+                                    <button
+                                        onClick={() => handleSelectPlan(plan.id)}
+                                        disabled={loading && selectedPlan === plan.id}
+                                        className={getButtonStyles(plan.buttonVariant, loading && selectedPlan === plan.id)}
+                                    >
+                                        {loading && selectedPlan === plan.id ? (
+                                            <>
+                                                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                                                Traitement...
+                                            </>
+                                        ) : (
+                                            plan.buttonText
+                                        )}
+                                    </button>
+                                </div>
+
+                                {/* Features list */}
+                                <ul className="space-y-3">
+                                    {plan.features.map((feature, index) => (
+                                        <li key={index} className="flex items-start gap-3">
+                                            {feature.included ? (
+                                                <Check className="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" />
+                                            ) : (
+                                                <X className="w-4 h-4 text-gray-500 mt-0.5 flex-shrink-0" />
+                                            )}
+                                            <span className="text-sm text-gray-700 leading-relaxed">
+                                                {feature.name}
+                                                {feature.limit && (
+                                                    <span className="text-gray-500"> ({feature.limit})</span>
+                                                )}
+                                            </span>
+                                        </li>
+                                    ))}
+                                </ul>
+
+                                {/* Footer note for specific plans */}
+                                {plan.id === 'pro' && (
+                                    <div className="mt-6 pt-6 border-t border-gray-100">
+                                        <p className="text-xs text-gray-500">
+                                            Abonné existant ? <a href="#" className="text-teal-600 hover:underline">Voir aide à la facturation</a>
+                                        </p>
+                                    </div>
+                                )}
+                                {plan.id === 'max' && (
+                                    <div className="mt-6 pt-6 border-t border-gray-100">
+                                        <p className="text-xs text-gray-500">
+                                            Pour un usage personnel uniquement, et sous réserve de notre <a href="#" className="text-gray-700 underline">politique</a>
+                                        </p>
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    ))}
+                </div>
+
+            </div>
+        </div>
+    );
+};
+
+export default ListPricing;