waazi_sdk 0.13.0

SDK Flutter pour intégrer le support client Waazi dans votre application mobile. Centre d'aide, chat en temps réel, signalement de bugs.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:waazi_sdk/waazi_sdk.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Waazi.initialize(
    publishableKey: 'pk_live_waazi_xxxxxxxxxxxxxxxxxxxxx',
    config: const WaaziConfig(
      locale: 'fr',
      showLauncher: true,
      fabIcon: Icons.support_agent,
    ),
  );

  WaaziErrorCapture.enable();
  Waazi.enableShakeToReport();

  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ThemeMode _themeMode = ThemeMode.light;

  void _toggleTheme() {
    setState(() {
      _themeMode =
          _themeMode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
    });
  }

  bool get _isDark => _themeMode == ThemeMode.dark;

  @override
  Widget build(BuildContext context) {
    // Pass brightness to WaaziOverlay so the widget follows the app's theme
    return WaaziOverlay(
      brightness: _isDark ? Brightness.dark : Brightness.light,
      child: MaterialApp(
        title: 'Waazi SDK Example',
        debugShowCheckedModeBanner: false,
        navigatorObservers: [WaaziRouteObserver(hideOn: {'profile_screen'})],
        themeMode: _themeMode,
        theme: ThemeData(
          colorScheme:
              ColorScheme.fromSeed(seedColor: const Color(0xFFF97316)),
          useMaterial3: true,
        ),
        darkTheme: ThemeData(
          colorScheme: ColorScheme.fromSeed(
            seedColor: const Color(0xFFF97316),
            brightness: Brightness.dark,
          ),
          useMaterial3: true,
        ),
        home: HomeScreen(
          isDark: _isDark,
          onToggleTheme: _toggleTheme,
        ),
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final bool isDark;
  final VoidCallback onToggleTheme;

  const HomeScreen({
    super.key,
    required this.isDark,
    required this.onToggleTheme,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Ma Boutique'),
        backgroundColor: const Color(0xFFF97316),
        foregroundColor: Colors.white,
        actions: [
          IconButton(
            icon: Icon(isDark ? Icons.light_mode : Icons.dark_mode),
            onPressed: onToggleTheme,
            tooltip: isDark ? 'Mode clair' : 'Mode sombre',
          ),
        ],
      ),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          _buildCard(
            context,
            icon: Icons.shopping_bag_outlined,
            title: 'Mes commandes',
            subtitle: '3 commandes en cours',
            onTap: () => Navigator.push(
              context,
              MaterialPageRoute(builder: (_) => const OrderListScreen()),
            ),
          ),
          const SizedBox(height: 12),
          _buildCard(
            context,
            icon: Icons.person_outline,
            title: 'Mon profil',
            subtitle: 'Amadou Diallo',
            onTap: () => Navigator.push(
              context,
              MaterialPageRoute(builder: (_) => const ProfileScreen(), settings: const RouteSettings(name: 'profile_screen')),
            ),
          ),
          const SizedBox(height: 12),
          _buildCard(
            context,
            icon: Icons.help_outline,
            title: 'Centre d\'aide',
            subtitle: 'FAQ et articles',
            onTap: () => Waazi.showHelpCenter(context),
          ),
          const SizedBox(height: 12),
          _buildCard(
            context,
            icon: Icons.chat_bubble_outline,
            title: 'Contacter le support',
            subtitle: 'Chat en temps réel',
            onTap: () => Waazi.showNewConversation(context),
          ),
          const SizedBox(height: 12),
          _buildCard(
            context,
            icon: Icons.layers_outlined,
            title: 'Test Bottom Sheet',
            subtitle: 'Vérifier que le FAB passe derrière',
            onTap: () => showModalBottomSheet(
              context: context,
              builder: (_) => Container(
                height: 300,
                padding: const EdgeInsets.all(24),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text('Bottom Sheet de l\'app',
                        style: TextStyle(
                            fontSize: 18, fontWeight: FontWeight.w700)),
                    const SizedBox(height: 12),
                    const Text(
                        'Le FAB Waazi ne devrait pas être visible au-dessus de ce bottom sheet.'),
                    const Spacer(),
                    SizedBox(
                      width: double.infinity,
                      child: ElevatedButton(
                        onPressed: () => Navigator.pop(context),
                        child: const Text('Fermer'),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
          const SizedBox(height: 12),
          _buildCard(
            context,
            icon: Icons.open_in_new_rounded,
            title: 'Test Dialog',
            subtitle: 'Vérifier que le FAB passe derrière',
            onTap: () => showDialog(
              context: context,
              builder: (_) => AlertDialog(
                title: const Text('Dialog de l\'app'),
                content: const Text(
                    'Le FAB Waazi ne devrait pas être visible au-dessus de ce dialog.'),
                actions: [
                  TextButton(
                    onPressed: () => Navigator.pop(context),
                    child: const Text('Fermer'),
                  ),
                ],
              ),
            ),
          ),
          const SizedBox(height: 24),
          OutlinedButton(
            onPressed: () async {
              await Waazi.identify(
                userId: 'user_123',
                email: '[e-mail]',
                name: 'Amadou Diallo',
                phone: '[phone]',
              );
              if (context.mounted) {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('Utilisateur identifié')),
                );
              }
            },
            child: const Text('Identifier l\'utilisateur'),
          ),
          const SizedBox(height: 8),
          OutlinedButton(
            onPressed: () async {
              await Waazi.logout();
              if (context.mounted) {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('Déconnecté')),
                );
              }
            },
            child: const Text('Déconnexion'),
          ),
        ],
      ),
    );
  }

  Widget _buildCard(
    BuildContext context, {
    required IconData icon,
    required String title,
    required String subtitle,
    required VoidCallback onTap,
  }) {
    return Card(
      elevation: 0,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12),
        side: BorderSide(color: Theme.of(context).dividerColor),
      ),
      child: ListTile(
        leading: Icon(icon, color: const Color(0xFFF97316), size: 28),
        title: Text(title, style: const TextStyle(fontWeight: FontWeight.w600)),
        subtitle: Text(subtitle),
        trailing: const Icon(Icons.chevron_right),
        onTap: onTap,
      ),
    );
  }
}

class OrderListScreen extends StatelessWidget {
  const OrderListScreen({super.key});

  @override
  Widget build(BuildContext context) {
    Waazi.setContext('screen', 'orders');
    Waazi.trackEvent('view_orders');

    return Scaffold(
      appBar: AppBar(
        title: const Text('Mes commandes'),
        backgroundColor: const Color(0xFFF97316),
        foregroundColor: Colors.white,
      ),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          _buildOrder(context, 'CMD-001', 'iPhone 15 Pro', 'En livraison',
              Colors.blue),
          _buildOrder(
              context, 'CMD-002', 'AirPods Pro', 'Livré', Colors.green),
          _buildOrder(context, 'CMD-003', 'MacBook Air M3', 'En préparation',
              Colors.orange),
        ],
      ),
    );
  }

  Widget _buildOrder(BuildContext context, String id, String name,
      String status, Color statusColor) {
    return Card(
      margin: const EdgeInsets.only(bottom: 12),
      elevation: 0,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12),
        side: BorderSide(color: Theme.of(context).dividerColor),
      ),
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Row(
          children: [
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(id,
                      style: TextStyle(
                          fontSize: 12,
                          color: Theme.of(context).textTheme.bodySmall?.color)),
                  const SizedBox(height: 4),
                  Text(name,
                      style: const TextStyle(
                          fontWeight: FontWeight.w600, fontSize: 16)),
                ],
              ),
            ),
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
              decoration: BoxDecoration(
                color: statusColor.withOpacity(0.1),
                borderRadius: BorderRadius.circular(20),
              ),
              child: Text(
                status,
                style: TextStyle(
                    color: statusColor,
                    fontSize: 13,
                    fontWeight: FontWeight.w500),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class ProfileScreen extends StatelessWidget {
  const ProfileScreen({super.key});

  @override
  Widget build(BuildContext context) {
    Waazi.setContext('screen', 'profile');
    Waazi.trackEvent('view_profile');

    return Scaffold(
      appBar: AppBar(
        title: const Text('Mon profil'),
        backgroundColor: const Color(0xFFF97316),
        foregroundColor: Colors.white,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            const CircleAvatar(
              radius: 40,
              backgroundColor: Color(0xFFF97316),
              child: Text('AD',
                  style: TextStyle(fontSize: 24, color: Colors.white)),
            ),
            const SizedBox(height: 16),
            const Text(
              'Amadou Diallo',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.w700),
            ),
            const SizedBox(height: 4),
            Text(
              '[e-mail]',
              style: TextStyle(
                  fontSize: 14,
                  color: Theme.of(context).textTheme.bodySmall?.color),
            ),
            const SizedBox(height: 32),
            SizedBox(
              width: double.infinity,
              child: ElevatedButton.icon(
                onPressed: () => Waazi.showMessenger(context),
                icon: const Icon(Icons.chat_bubble_outline),
                label: const Text('Contacter le support'),
                style: ElevatedButton.styleFrom(
                  backgroundColor: const Color(0xFFF97316),
                  foregroundColor: Colors.white,
                  padding: const EdgeInsets.symmetric(vertical: 14),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12),
                  ),
                ),
              ),
            ),
            const SizedBox(height: 12),
            SizedBox(
              width: double.infinity,
              child: OutlinedButton.icon(
                onPressed: () => Waazi.showHelpCenter(context),
                icon: const Icon(Icons.help_outline),
                label: const Text('Centre d\'aide'),
                style: OutlinedButton.styleFrom(
                  foregroundColor: const Color(0xFFF97316),
                  side: const BorderSide(color: Color(0xFFF97316)),
                  padding: const EdgeInsets.symmetric(vertical: 14),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}