🍪 nafann-cookie-manager

Package universel de gestion des cookies et pricing dynamique pour tous les e-commerces

🚀 Nouveautés de la v2.0

Version 2.0 - Code consolidé et optimisé ! ✨

• ✅ Plus de duplications - Code unifié et maintenable
• ✅ Support universel - Bing, WooCommerce, Shopify, Magento, PrestaShop
• ✅ Interface simplifiée - Composants modernes et intuitifs
• ✅ Types consolidés - Une seule source de vérité
• ✅ Performance optimisée - Hooks et adaptateurs unifiés

📦 Installation

npm install nafann-cookie-manager
# ou
yarn add nafann-cookie-manager

🚀 Démarrage Rapide

1. Configurer le Provider

import { UniversalCookieManagerProvider } from 'nafann-cookie-manager';

const config = {
  bing: {
    apiUrl: 'https://api.votre-site.com/api/v1',
    auth: {
      username: '[email protected]',
      password: 'votre-mot-de-passe'
    }
  }
};

function App() {
  return (
    <UniversalCookieManagerProvider config={config}>
      {/* Votre application */}
    </UniversalCookieManagerProvider>
  );
}

2. Utiliser le Pricing Dynamique

import { useDynamicPricing } from 'nafann-cookie-manager';

function ProductCard({ product }) {
  const { getDynamicPrice, addProducts } = useDynamicPricing();
  
  useEffect(() => {
    addProducts([product]);
  }, [product, addProducts]);
  
  const dynamicPrice = getDynamicPrice(product.id);
  const displayPrice = dynamicPrice || product.price;
  
  return <div>{displayPrice} XOF</div>;
}

📖 Guide complet : Voir GUIDE_UTILISATION.md

🏗️ Architecture Consolidée

Structure du Projet

src/
├── types/                          # Types TypeScript consolidés
│   ├── index.ts                   # Export unique de tous les types
│   └── universal.ts               # Tous les types en un seul endroit
├── hooks/                         # Hooks React unifiés
│   ├── useDynamicPricing.ts      # Hook universel consolidé
│   ├── useAnalytics.ts           # Analytics et tracking
│   ├── useAuth.ts                # Authentification
│   ├── useCart.ts                # Gestion du panier
│   ├── usePreferences.ts         # Préférences utilisateur
│   └── useEcommerceTracking.ts   # Tracking e-commerce
├── components/                    # Composants React
│   ├── DynamicPricingControl.tsx # Contrôle simplifié (nouveau)
│   ├── DynamicPricingDashboard.tsx # Dashboard complet
│   ├── EmailCaptureIntegration.tsx # Capture d'email
│   └── EmailCaptureModal.tsx     # Modal de capture
├── utils/                         # Utilitaires et adaptateurs
│   └── UniversalDataAdapter.ts   # Adaptateur universel (inclut Bing)
├── managers/                      # Gestionnaires métier
│   ├── CookieManager.ts          # Gestion des cookies
│   ├── DynamicPricingManager.ts # Pricing dynamique
│   └── EcommerceManager.ts       # Tracking e-commerce
├── context/                       # Contextes React
│   └── CookieManagerProvider.tsx # Provider principal
└── examples/                      # Exemples d'utilisation
    └── UniversalExample.tsx      # Exemple universel consolidé

🌐 Support Multi-E-commerce

Plateformes Supportées

| Plateforme | Statut | Détection Automatique | |------------|--------|----------------------| | Bing Epicerie | ✅ Complet | Structure inventory.currentStock | | WooCommerce | ✅ Complet | Structure stock_quantity | | Shopify | ✅ Complet | Structure inventory_quantity | | Magento | ✅ Complet | Structure qty | | PrestaShop | ✅ Complet | Structure quantity | | Générique | ✅ Complet | Structure adaptative |

Détection Automatique

Le système détecte automatiquement le type d'e-commerce basé sur la structure des données :

import { UniversalDataAdapter } from 'nafann-cookie-manager';

// Détection automatique
const ecommerceType = UniversalDataAdapter.detectEcommerceType(productData);
console.log(`Type détecté: ${ecommerceType}`); // BING, WOOCOMMERCE, SHOPIFY, etc.

🎯 Pricing Dynamique

Hook Universel

import { useDynamicPricing } from 'nafann-cookie-manager';

const MyComponent = () => {
  const {
    isRunning,
    isInitialized,
    products,
    promotions,
    detectedEcommerceType,
    start,
    stop,
    toggle,
    addProducts,
    updatePrices,
    simulateMarket
  } = useDynamicPricing({
    config: {
      updateInterval: 30000,        // 30 secondes
      enableRealTimeUpdates: true,
      enableMarketSimulation: true,
      simulationInterval: 300000,   // 5 minutes
      maxPriceChange: 15,           // 15% max
      minMargin: 20                 // 20% marge min
    },
    autoStart: false,
    onPriceUpdate: (productId, oldPrice, newPrice) => {
      console.log(`Prix mis à jour: ${oldPrice}€ → ${newPrice}€`);
    }
  });

  // Utilisation...
};

Composant de Contrôle Simplifié

import { DynamicPricingControl } from 'nafann-cookie-manager';

const MyPage = () => {
  return (
    <div>
      <h1>Mon E-commerce</h1>
      
      <DynamicPricingControl 
        title="Pricing Dynamique"
        showStats={true}
        className="my-4"
      />
      
      {/* Votre contenu... */}
    </div>
  );
};

Adaptateur Universel

import { UniversalDataAdapter } from 'nafann-cookie-manager';

// Adapter n'importe quel produit
const adaptedProduct = UniversalDataAdapter.adaptProduct(rawProductData);

// Créer un produit Bing avec pricing dynamique
const bingProduct = UniversalDataAdapter.createBingProductWithDynamicPricing(bingData);

// Convertir vers le format Bing
const bingFormat = UniversalDataAdapter.toBingProduct(adaptedProduct);

🍪 Gestion des Cookies

Configuration de Base

import { CookieManagerProvider, useCookieManager } from 'nafann-cookie-manager';

const App = () => {
  return (
    <CookieManagerProvider
      config={{
  analytics: {
          trackingId: 'GA-XXXXXXXXX',
    enableCrossDomain: true
  },
  cart: {
          storageKey: 'my-cart',
          expiryDays: 30
  },
  auth: {
          tokenKey: 'auth-token',
    secure: true
  },
  preferences: {
    defaultTheme: 'light',
    persistLocally: true
  }
      }}
    >
      <MyApp />
    </CookieManagerProvider>
  );
};

Utilisation des Hooks

const MyComponent = () => {
  const { set, get, getAll, remove } = useCookieManager();
  const { trackEvent, getData } = useAnalytics();
  const { setTheme, getTheme } = usePreferences();
  const { addToCart, getCart } = useCart();

  // Gestion des cookies
  set({
    name: 'user-preference',
    value: { theme: 'dark' },
    type: 'preferences',
    duration: 365 * 24 * 60 * 60 * 1000 // 1 an
  });

  // Tracking analytics
  trackEvent('product_view', { productId: '123' });

  // Préférences
  setTheme('dark');

  // Panier
  addToCart({ id: '123', quantity: 2 });
};

📊 Exemple Complet

Intégration dans un E-commerce

import React, { useEffect } from 'react';
import { 
  useDynamicPricing, 
  DynamicPricingControl,
  UniversalDataAdapter 
} from 'nafann-cookie-manager';

const EcommercePage = () => {
  const {
    isRunning,
    isInitialized,
    products,
    addProducts,
    start
  } = useDynamicPricing({
    autoStart: false,
    onPriceUpdate: (productId, oldPrice, newPrice) => {
      // Notification utilisateur
      showNotification(`Prix mis à jour: ${oldPrice}€ → ${newPrice}€`);
    }
  });

  // Charger les produits depuis votre API
  useEffect(() => {
    const loadProducts = async () => {
      const response = await fetch('/api/products');
      const rawProducts = await response.json();
      
      // Adapter automatiquement les produits
      const adaptedProducts = rawProducts.map(product => 
        UniversalDataAdapter.adaptProduct(product)
      );
      
      // Ajouter au système de pricing
      addProducts(adaptedProducts);
    };

    loadProducts();
  }, [addProducts]);

  // Démarrer le pricing dynamique
  useEffect(() => {
    if (isInitialized && !isRunning) {
      start();
    }
  }, [isInitialized, isRunning, start]);

  return (
    <div className="ecommerce-page">
      {/* Contrôle du pricing dynamique */}
      <DynamicPricingControl 
        title="Pricing Dynamique"
        showStats={true}
      />
      
      {/* Liste des produits avec prix dynamiques */}
      <div className="products-grid">
        {products.map(product => (
          <ProductCard 
            key={product.id}
            product={product}
            showDynamicPricing={true}
          />
        ))}
      </div>
    </div>
  );
};

🔧 Configuration Avancée

Types de Cookies Supportés

type CookieType = 
  | 'analytics'      // Google Analytics, etc.
  | 'authentication' // Tokens d'auth
  | 'preferences'    // Thème, langue, etc.
  | 'cart'           // Panier d'achat
  | 'userTracking'   // Comportement utilisateur
  | 'emailCapture'   // Capture d'email
  | 'ecommerce'      // Données e-commerce
  | 'marketing'      // Marketing et publicité
  | 'performance'    // Métriques de performance
  | 'security';      // Sécurité et authentification

Configuration du Pricing Dynamique

interface DynamicPricingConfig {
  updateInterval: number;           // Intervalle de mise à jour (ms)
  enableRealTimeUpdates: boolean;   // Mises à jour en temps réel
  enableMarketSimulation: boolean;  // Simulation du marché
  simulationInterval: number;       // Intervalle de simulation (ms)
  maxPriceChange: number;           // Variation max en %
  minMargin: number;                // Marge minimale en %
  onPriceUpdate?: (productId: string, oldPrice: number, newPrice: number) => void;
  onMarketChange?: (marketData: MarketData) => void;
}

📈 Fonctionnalités Avancées

Tracking E-commerce Complet

• Navigation utilisateur : Pages vues, temps passé, scroll
• Interactions produit : Vues, ajouts au panier, wishlist
• Comportement d'achat : Panier abandonné, conversion
• Marketing : Attribution, campagnes, coupons
• Performance : Temps de chargement, erreurs
• Sécurité : Détection de bots, score de risque

Pricing Dynamique Intelligent

• Facteurs multiples : Stock, demande, concurrence, péremption
• Segmentation clients : Premium, Regular, Budget, Bulk
• Promotions automatiques : Flash sales, bundles, remises
• Simulation marché : Variations de prix en temps réel
• Marge garantie : Protection des marges minimales

🚀 Migration depuis la v1.x

Changements Majeurs

1. Hooks consolidés : useDynamicPricing remplace useUniversalDynamicPricing
2. Adaptateurs unifiés : UniversalDataAdapter inclut BingDataAdapter
3. Types consolidés : Tous les types dans types/universal.ts
4. Exemples simplifiés : Un seul exemple universel
5. Composants modernisés : Interface simplifiée et intuitive

Guide de Migration

// AVANT (v1.x)
import { useUniversalDynamicPricing } from 'nafann-cookie-manager';
import { BingDataAdapter } from 'nafann-cookie-manager';

// APRÈS (v2.0)
import { useDynamicPricing } from 'nafann-cookie-manager';
import { UniversalDataAdapter } from 'nafann-cookie-manager';

// Les méthodes Bing sont maintenant dans UniversalDataAdapter
const product = UniversalDataAdapter.createBingProductWithDynamicPricing(data);

👨‍💻 Développement

Vérification du code avant commit

⚠️ IMPORTANT : Avant de soumettre votre code, exécutez cette commande pour corriger automatiquement les erreurs de linting et vérifier que tout fonctionne :

npm run check

Cette commande :

1. ✅ Corrige automatiquement les erreurs de linting corrigeables
2. ✅ Vérifie le linting
3. ✅ Exécute les tests
4. ✅ Compile le projet

Commandes utiles

• npm run lint - Vérifier les erreurs de linting (sans corriger)
• npm run lint:fix - Corriger automatiquement les erreurs de linting
• npm run validate - Vérifier lint + tests + build
• npm run check - Recommandé : Corrige et valide tout

🤝 Contribution

Développement Local

# Cloner le projet
git clone https://github.com/your-org/cookie-manager.git
cd cookie-manager

# Installer les dépendances
npm install

# Démarrer le développement
npm run dev

# Construire le package
npm run build

# Tests
npm test

Structure des Branches

• main : Code de production
• develop : Développement en cours
• feature/* : Nouvelles fonctionnalités
• bugfix/* : Corrections de bugs

📄 Licence

MIT License - voir LICENSE pour plus de détails.

🆘 Support

• Documentation : docs.example.com
• Issues : GitHub Issues
• Discussions : GitHub Discussions
• Email : [email protected]

Fait avec ❤️ par l'équipe @ecommerce

Package universel pour tous vos besoins e-commerce ! 🚀