ptechcore_ui 0.0.0

package/src/pages/pricings/CartPlan.tsx

@@ -0,0 +1,486 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import {
+    Check,
+    X,
+    Plus,
+    Minus,
+    ArrowLeft,
+    CreditCard,
+    Shield,
+    Clock,
+    Users,
+    Building2,
+    Zap,
+    Trash2
+} from 'lucide-react';
+import { useToast } from '../../contexts/ToastContext';
+import { useSession } from '../../contexts/SessionContext';
+import { ModuleServices, SubscriptionServices } from '../../services/PlanSubscriptionServices';
+import { Module, Plan } from '../../models/Plan';
+import { OrganizationServices } from '../../services/OrganizationServices';
+import PrimaryButton, { SecondaryButton } from '../../components/common/Buttons';
+
+interface CartItem {
+    type: 'plan' | 'module';
+    id: number;
+    name: string;
+    description: string;
+    price: number;
+    currency: string;
+    period: string;
+    quantity?: number;
+    features?: string[];
+}
+
+interface BillingInfo {
+    firstName: string;
+    lastName: string;
+    email: string;
+    phone: string;
+    company: string;
+    address: string;
+    city: string;
+    country: string;
+    billingPeriod: 'monthly' | 'yearly';
+}
+
+const CartPlan: React.FC = () => {
+    const [searchParams] = useSearchParams();
+    const [cartItems, setCartItems] = useState<CartItem[]>([]);
+    const [additionalModules, setAdditionalModules] = useState<Module[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [modulesLoading, setModulesLoading] = useState(true);
+    const [processingPayment, setProcessingPayment] = useState(false);
+    const [showBillingForm, setShowBillingForm] = useState(false);
+    const [billingInfo, setBillingInfo] = useState<BillingInfo>({
+        firstName: '',
+        lastName: '',
+        email: '',
+        phone: '',
+        company: '',
+        address: '',
+        city: '',
+        country: 'CI',
+        billingPeriod: 'monthly'
+    });
+
+    const navigate = useNavigate();
+    const { success, error: showError } = useToast();
+    const { loggedUser, token } = useSession();
+    const organizationId = Number(searchParams.get('org'));
+
+    useEffect(() => {
+        // Récupérer le plan sélectionné depuis les paramètres URL
+
+        const planId = searchParams.get('plan');
+        const planCode = searchParams.get('code');
+
+        if (planId && planCode) {
+            // Simuler la récupération des détails du plan sélectionné
+            const selectedPlan = getSelectedPlan(planId, planCode);
+            if (selectedPlan) {
+                setCartItems([selectedPlan]);
+            }
+        }
+
+        loadAdditionalModules();
+    }, [searchParams]);
+
+    const getSelectedPlan = (planId: string, planCode: string): CartItem | null => {
+        // Simuler la récupération du plan depuis les données existantes
+        const planData = {
+            'pro': {
+                id: 1,
+                name: 'Rewise Pro',
+                description: 'Améliorez la productivité et l\'apprentissage avec un accès supplémentaire.',
+                price: 100000,
+                currency: 'FCFA',
+                period: '/ mois',
+                features: ['1 entité', 'jusqu\'à 5 utilisateurs', 'CRM, Comptabilité et Facturation']
+            },
+            'max': {
+                id: 2,
+                name: 'Rewise Max',
+                description: 'Débloquez toutes les capacités avec un accès anticipé aux nouveaux produits.',
+                price: 200000,
+                currency: 'FCFA',
+                period: '/ mois',
+                features: ['jusqu\'à 3 entités', 'jusqu\'à 15 utilisateurs', 'CRM, Comptabilité et Facturation', '+1 module au choix']
+            }
+        };
+
+        const plan = planData[planId as keyof typeof planData];
+        return plan ? { type: 'plan', ...plan } : null;
+    };
+
+    const loadAdditionalModules = async () => {
+        if (!token) return;
+
+        try {
+            setModulesLoading(true);
+            const result = await ModuleServices.getActiveModules(token) as { data: Module[] };
+            setAdditionalModules(result.data || []);
+        } catch (error) {
+            showError('Erreur lors du chargement des modules');
+        } finally {
+            setModulesLoading(false);
+        }
+    };
+
+    const addModuleToCart = (module: Module) => {
+        const existingModule = cartItems.find(item => item.id === module.id && item.type === 'module');
+
+        if (existingModule) {
+            // Augmenter la quantité si le module existe déjà
+            setCartItems(prev => prev.map(item =>
+                item.id === module.id && item.type === 'module'
+                    ? { ...item, quantity: (item.quantity || 1) + 1 }
+                    : item
+            ));
+        } else {
+            // Ajouter le nouveau module
+            const moduleItem: CartItem = {
+                type: 'module',
+                id: module.id,
+                name: module.name,
+                description: module.description || '',
+                price: billingInfo.billingPeriod === 'monthly' ? module.price_monthly : module.price_yearly,
+                currency: 'FCFA',
+                period: billingInfo.billingPeriod === 'monthly' ? '/ mois' : '/ an',
+                quantity: 1
+            };
+            setCartItems(prev => [...prev, moduleItem]);
+        }
+    };
+
+    const removeModuleFromCart = (moduleId: number) => {
+        setCartItems(prev => prev.filter(item => !(item.id === moduleId && item.type === 'module')));
+    };
+
+    const updateModuleQuantity = (moduleId: number, quantity: number) => {
+        if (quantity <= 0) {
+            removeModuleFromCart(moduleId);
+            return;
+        }
+
+        setCartItems(prev => prev.map(item =>
+            item.id === moduleId && item.type === 'module'
+                ? { ...item, quantity }
+                : item
+        ));
+    };
+
+    const calculateTotal = () => {
+        return cartItems.reduce((total, item) => {
+            const quantity = item.quantity || 1;
+            return total + (item.price * quantity);
+        }, 0);
+    };
+
+    const calculateTax = (subtotal: number) => {
+        return subtotal * 0.18; // TVA 18%
+    };
+
+    const handleBillingInfoChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+        const { name, value } = e.target;
+        setBillingInfo(prev => ({ ...prev, [name]: value }));
+    };
+
+    const toggleBillingPeriod = () => {
+        const newPeriod = billingInfo.billingPeriod === 'monthly' ? 'yearly' : 'monthly';
+        setBillingInfo(prev => ({ ...prev, billingPeriod: newPeriod }));
+
+        // Mettre à jour les prix des modules dans le panier
+        setCartItems(prev => prev.map(item => {
+            if (item.type === 'module') {
+                const module = additionalModules.find(m => m.id === item.id);
+                if (module) {
+                    return {
+                        ...item,
+                        price: newPeriod === 'monthly' ? module.price_monthly : module.price_yearly,
+                        period: newPeriod === 'monthly' ? '/ mois' : '/ an'
+                    };
+                }
+            }
+            return item;
+        }));
+    };
+
+    const handleProcessPayment = async () => {
+        if (!token) {
+            showError('Vous devez être connecté pour effectuer un paiement');
+            return;
+        }
+
+        setProcessingPayment(true);
+        try {
+            // Simuler le traitement du paiement
+            await new Promise(resolve => setTimeout(resolve, 3000));
+            await OrganizationServices.subscribe(organizationId, {
+                plan: planItem!.id,
+                billing_cycle: billingInfo.billingPeriod,
+                extra_modules: moduleItems.map(item => item.id)
+            }, token);
+
+            success('Paiement effectué avec succès ! Votre plan sera activé sous peu.');
+            navigate('/organizations');
+        } catch (error) {
+            showError('Erreur lors du traitement du paiement');
+        } finally {
+            setProcessingPayment(false);
+        }
+    };
+
+    const subtotal = calculateTotal();
+    const tax = calculateTax(subtotal);
+    const total = subtotal + tax;
+
+    const planItem = cartItems.find(item => item.type === 'plan');
+    const moduleItems = cartItems.filter(item => item.type === 'module');
+
+    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">
+                {/* Header */}
+                <div className="flex items-center mb-8">
+                    <button
+                        onClick={() => navigate('/pricing')}
+                        className="flex items-center text-gray-600 hover:text-gray-900 transition-colors mr-4"
+                    >
+                        <ArrowLeft className="w-5 h-5 mr-2" />
+                        Retour aux plans
+                    </button>
+                    <h1 className="text-3xl font-bold text-gray-900">Votre commande</h1>
+                </div>
+
+                <div className="grid lg:grid-cols-3 gap-8">
+                    {/* Panier principal */}
+                    <div className="lg:col-span-2 space-y-6">
+                        {/* Plan s�lectionn� */}
+                        {planItem && (
+                            <div className="bg-white rounded-lg shadow-sm border p-6">
+                                <h2 className="text-xl font-semibold mb-4 flex items-center">
+                                    <Zap className="w-5 h-5 mr-2 text-blue-600" />
+                                    Plan sélectionné
+                                </h2>
+
+                                <div className="border rounded-lg p-4">
+                                    <div className="flex justify-between items-start">
+                                        <div className="flex-1">
+                                            <h3 className="font-semibold text-lg">{planItem.name}</h3>
+                                            <p className="text-gray-600 text-sm mt-1">{planItem.description}</p>
+                                            {planItem.features && (
+                                                <ul className="mt-3 space-y-1">
+                                                    {planItem.features.map((feature, index) => (
+                                                        <li key={index} className="flex items-center text-sm text-gray-700">
+                                                            <Check className="w-4 h-4 text-green-500 mr-2 flex-shrink-0" />
+                                                            {feature}
+                                                        </li>
+                                                    ))}
+                                                </ul>
+                                            )}
+                                        </div>
+                                        <div className="text-right ml-4">
+                                            <div className="text-xl font-bold">
+                                                {planItem.price.toLocaleString()} {planItem.currency}
+                                            </div>
+                                            <div className="text-sm text-gray-500">{planItem.period}</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+
+                        {/* Toggle p�riode de facturation */}
+                        <div className="bg-white rounded-lg shadow-sm border p-6">
+                            <h3 className="font-semibold mb-4">Période de facturation</h3>
+                            <div className="flex items-center space-x-4">
+                                <button
+                                    onClick={toggleBillingPeriod}
+                                    className={`px-4 py-2 rounded-lg transition-colors ${billingInfo.billingPeriod === 'monthly'
+                                        ? 'bg-[#6A8A82] text-white'
+                                        : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                                        }`}
+                                >
+                                    Mensuel
+                                </button>
+                                <button
+                                    onClick={toggleBillingPeriod}
+                                    className={`px-4 py-2 rounded-lg transition-colors ${billingInfo.billingPeriod === 'yearly'
+                                        ? 'bg-[#6A8A82] text-white'
+                                        : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                                        }`}
+                                >
+                                    Annuel
+                                    <span className="ml-2 text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">
+                                        -17%
+                                    </span>
+                                </button>
+                            </div>
+                        </div>
+
+                        {/* Modules dans le panier */}
+                        {moduleItems.length > 0 && (
+                            <div className="bg-white rounded-lg shadow-sm border p-6">
+                                <h2 className="text-xl font-semibold mb-4 flex items-center">
+                                    <Plus className="w-5 h-5 mr-2 text-green-600" />
+                                    Modules supplémentaires
+                                </h2>
+
+                                <div className="space-y-3">
+                                    {moduleItems.map((module) => (
+                                        <div key={module.id} className="flex items-center justify-between p-3 border rounded-lg">
+                                            <div className="flex-1">
+                                                <h4 className="font-medium">{module.name}</h4>
+                                                <p className="text-sm text-gray-600">{module.description}</p>
+                                            </div>
+
+                                            <div className="flex items-center space-x-3">
+                                                
+
+                                                <div className="text-right">
+                                                    <div className="font-semibold">
+                                                        {(module.price * (module.quantity || 1)).toLocaleString()} {module.currency}
+                                                    </div>
+                                                    <div className="text-sm text-gray-500">{module.period}</div>
+                                                </div>
+
+                                                <button
+                                                    onClick={() => removeModuleFromCart(module.id)}
+                                                    className="p-1 text-red-500 hover:text-red-700"
+                                                >
+                                                    <Trash2 className="w-4 h-4" />
+                                                </button>
+                                            </div>
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        )}
+
+                        {/* Modules disponibles */}
+                        <div className="bg-white rounded-lg shadow-sm border p-6">
+                            <h2 className="text-xl font-semibold mb-4">Ajouter des modules</h2>
+
+                            {modulesLoading ? (
+                                <div className="text-center py-8">
+                                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
+                                    <p className="text-gray-600">Chargement des modules...</p>
+                                </div>
+                            ) : (
+                                <div className=" gap-4">
+                                    {additionalModules.map((module) => {
+                                        const isInCart = cartItems.some(item => item.id === module.id && item.type === 'module');
+                                        const price = billingInfo.billingPeriod === 'monthly' ? module.price_monthly : module.price_yearly;
+
+                                        return (
+                                            <div key={module.id} className="border rounded-lg mb-2 p-4 hover:shadow-md transition-shadow">
+                                                <div className="flex justify-between items-start mb-2">
+                                                    <h3 className="font-medium">{module.name}</h3>
+                                                    <div className="text-right">
+                                                        <div className="font-semibold">
+                                                            {price.toLocaleString()} FCFA {billingInfo.billingPeriod === 'monthly' ? '/ mois' : '/ an'}
+                                                        </div>
+
+
+                                                    </div>
+                                                </div>
+
+                                                <p className="text-sm text-gray-600 mb-3">{module.description}</p>
+                                                <div className="flex justify-end items-start mb-2">
+                                                    <SecondaryButton onClick={() => addModuleToCart(module)} disabled={isInCart || !module.is_active} classname='py-2 px-4 rounded-lg font-medium transition-colors'>
+                                                        {isInCart ? 'Ajouté' : 'Ajouter au panier'}
+                                                    </SecondaryButton>
+                                                    
+                                                </div>
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            )}
+                        </div>
+                    </div>
+
+                    {/* R�sum� de commande */}
+                    <div className="lg:col-span-1">
+                        <div className="bg-white rounded-lg shadow-sm border p-6 sticky top-6">
+                            <h2 className="text-xl font-semibold mb-4">Résumé de la commande</h2>
+
+                            {/* Items */}
+                            <div className="space-y-3 mb-4">
+                                {cartItems.map((item) => (
+                                    <div key={`${item.type}-${item.id}`} className="flex justify-between text-sm">
+                                        <span>
+                                            {item.name}
+                                            {item.quantity && item.quantity > 1 && ` (x${item.quantity})`}
+                                        </span>
+                                        <span>{(item.price * (item.quantity || 1)).toLocaleString()} FCFA</span>
+                                    </div>
+                                ))}
+                            </div>
+
+                            <div className="border-t pt-4 space-y-2">
+                                <div className="flex justify-between text-sm">
+                                    <span>Sous-total</span>
+                                    <span>{subtotal.toLocaleString()} FCFA</span>
+                                </div>
+                                <div className="flex justify-between text-sm">
+                                    <span>TVA (18%)</span>
+                                    <span>{tax.toLocaleString()} FCFA</span>
+                                </div>
+                                <div className="flex justify-between font-semibold text-lg border-t pt-2">
+                                    <span>Total</span>
+                                    <span>{total.toLocaleString()} FCFA</span>
+                                </div>
+                            </div>
+
+                            {/* Garanties */}
+                            <div className="mt-6 pt-6 border-t">
+                                <div className="space-y-3 text-sm text-gray-600">
+                                    <div className="flex items-center">
+                                        <Shield className="w-4 h-4 mr-2 " />
+                                        Paiement 100% sécurisé
+                                    </div>
+                                    <div className="flex items-center">
+                                        <Clock className="w-4 h-4 mr-2" />
+                                        Activation immédiate
+                                    </div>
+                                    <div className="flex items-center">
+                                        <Users className="w-4 h-4 mr-2" />
+                                        Support client 24/7
+                                    </div>
+                                </div>
+                            </div>
+
+                            {/* Bouton de paiement */}
+
+                            <PrimaryButton onClick={handleProcessPayment} classname='w-full mt-6 py-3 center' disabled={processingPayment || cartItems.length === 0}>
+
+                                {processingPayment ? (
+                                    <>
+                                        <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+                                        Traitement...
+                                    </>
+                                ) : (
+                                    <>
+                                        <CreditCard className="w-5 h-5 mr-2" />
+                                        Procéder au paiement
+                                    </>
+                                )}
+
+                            </PrimaryButton>
+                            
+
+                            <p className="text-xs text-gray-500 mt-3 text-center">
+                                En procédant au paiement, vous acceptez nos conditions d'utilisation et notre politique de confidentialité.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CartPlan;