App updates: Enhance ux on Omi feedback feature.

jlmartinnavarro · Aug 22, 2024 · 767f29c · 767f29c
1 parent b3f2e09
commit 767f29c
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 41 deletions.
diff --git a/app/lib/pages/settings/page.dart b/app/lib/pages/settings/page.dart
@@ -1,3 +1,6 @@
+import 'dart:math';
+
+import 'package:awesome_notifications/awesome_notifications.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:friend_private/backend/preferences.dart';
@@ -8,6 +11,7 @@ import 'package:friend_private/pages/settings/privacy.dart';
 import 'package:friend_private/pages/settings/webview.dart';
 import 'package:friend_private/pages/settings/widgets.dart';
 import 'package:friend_private/pages/speaker_id/page.dart';
+import 'package:friend_private/services/notification_service.dart';
 import 'package:friend_private/utils/analytics/mixpanel.dart';
 import 'package:friend_private/utils/other/temp.dart';
 import 'package:friend_private/widgets/dialog.dart';
@@ -51,6 +55,27 @@ class _SettingsPageState extends State<SettingsPage> {
 
   @override
   Widget build(BuildContext context) {
+    Future<void> _showMockupOmiFeebackNotification() async {
+      var rdm = Random();
+      // 1.
+      NotificationService.instance.showNotification(
+          layout: NotificationLayout.BigText,
+          id: rdm.nextInt(1000) + 1,
+          title: "Omi",
+          body:
+              "i think it went super well! you were so passionate and clear about your vision for friend. i'm pretty sure kurt was really into it too. [sample]");
+
+      await Future.delayed(const Duration(seconds: 5));
+
+      // 2.
+      NotificationService.instance.showNotification(
+          layout: NotificationLayout.BigText,
+          id: rdm.nextInt(1000 + 1),
+          title: "Omi",
+          body:
+              "he seemed super engaged, asking all the right questions and stuff. plus, he was all like \"this is gonna be a fun little story\" at the end, so that's a good sign, right? [sample]");
+    }
+
     return PopScope(
         canPop: true,
         child: Scaffold(
@@ -105,10 +130,17 @@ class _SettingsPageState extends State<SettingsPage> {
                       });
                     },
                     onOptInEmotionalFeedback: () {
+                      var enabled = !SharedPreferencesUtil().optInEmotionalFeedback;
+                      SharedPreferencesUtil().optInEmotionalFeedback = enabled;
+
                       setState(() {
-                        optInEmotionalFeedback = !SharedPreferencesUtil().optInEmotionalFeedback;
-                        SharedPreferencesUtil().optInEmotionalFeedback = optInEmotionalFeedback;
+                        optInEmotionalFeedback = enabled;
                       });
+
+                      // Show a mockup notifications to help user understand about Omi Feedback
+                      if (enabled) {
+                        _showMockupOmiFeebackNotification();
+                      }
                     },
                     viewPrivacyDetails: () {
                       Navigator.of(context).push(MaterialPageRoute(builder: (c) => const PrivacyInfoPage()));

diff --git a/app/lib/pages/settings/widgets.dart b/app/lib/pages/settings/widgets.dart
@@ -265,43 +265,58 @@ getPreferencesWidgets({
     Padding(
       padding: const EdgeInsets.fromLTRB(0, 0, 8, 0),
       child: InkWell(
-        onTap: onOptInEmotionalFeedback,
+        onTap: (SharedPreferencesUtil().hasSpeakerProfile || optInEmotionalFeedback) ? onOptInEmotionalFeedback : null,
         child: Padding(
           padding: const EdgeInsets.symmetric(vertical: 12.0),
-          child: Row(
-            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.start,
+            crossAxisAlignment: CrossAxisAlignment.start,
             children: [
-              const Text(
-                'Enable Omi Feedback',
-                style: TextStyle(
-                  color: Color.fromARGB(255, 150, 150, 150),
-                  fontSize: 16,
-                ),
-              ),
-              const SizedBox(
-                width: 8,
-              ),
-              Container(
-                decoration: BoxDecoration(
-                  color: optInEmotionalFeedback
-                      ? const Color.fromARGB(255, 150, 150, 150)
-                      : Colors.transparent, // Fill color when checked
-                  border: Border.all(
-                    color: const Color.fromARGB(255, 150, 150, 150),
-                    width: 2,
+              Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  const Text(
+                    'Enable Omi Feedback',
+                    style: TextStyle(
+                      color: Color.fromARGB(255, 150, 150, 150),
+                      fontSize: 16,
+                    ),
                   ),
-                  borderRadius: BorderRadius.circular(12),
-                ),
-                width: 22,
-                height: 22,
-                child: optInEmotionalFeedback // Show the icon only when checked
-                    ? const Icon(
-                        Icons.check,
-                        color: Colors.white, // Tick color
-                        size: 18,
-                      )
-                    : null, // No icon when unchecked
+                  const SizedBox(
+                    width: 8,
+                  ),
+                  Container(
+                    decoration: BoxDecoration(
+                      color: optInEmotionalFeedback
+                          ? const Color.fromARGB(255, 150, 150, 150)
+                          : Colors.transparent, // Fill color when checked
+                      border: Border.all(
+                        color: const Color.fromARGB(255, 150, 150, 150),
+                        width: 2,
+                      ),
+                      borderRadius: BorderRadius.circular(12),
+                    ),
+                    width: 22,
+                    height: 22,
+                    child: optInEmotionalFeedback // Show the icon only when checked
+                        ? const Icon(
+                            Icons.check,
+                            color: Colors.white, // Tick color
+                            size: 18,
+                          )
+                        : null, // No icon when unchecked
+                  ),
+                ],
               ),
+              !SharedPreferencesUtil().hasSpeakerProfile
+                  ? const Text(
+                      'You need a Speech Profile to enable Omi Feedback.',
+                      style: TextStyle(
+                        fontSize: 14,
+                        color: Colors.white,
+                      ),
+                    )
+                  : const SizedBox(),
             ],
           ),
         ),

diff --git a/app/lib/services/notification_service.dart b/app/lib/services/notification_service.dart
@@ -73,6 +73,7 @@ class NotificationService {
     Map<String, String?>? payload,
     bool wakeUpScreen = false,
     NotificationSchedule? schedule,
+    NotificationLayout layout = NotificationLayout.Default,
   }) {
     _awesomeNotifications.createNotification(
       content: NotificationContent(
@@ -82,6 +83,7 @@ class NotificationService {
         title: title,
         body: body,
         payload: payload,
+        notificationLayout: layout,
       ),
     );
   }
@@ -142,28 +144,32 @@ class NotificationService {
   Future<void> listenForMessages() async {
     FirebaseMessaging.onMessage.listen((RemoteMessage message) {
       final data = message.data;
+      final noti = message.notification;
 
       // Plugin
       if (data.isNotEmpty && data['notification_type'] == 'plugin') {
-        _showForegroundNotification(message.notification);
+        if (noti != null) {
+          _showForegroundNotification(noti: noti);
+        }
         data['from_integration'] = data['from_integration'] == 'true';
         _serverMessageStreamController.add(ServerMessage.fromJson(data));
       }
 
       // Announcement likes
-      _showForegroundNotification(message.notification);
+      if (noti != null) {
+        _showForegroundNotification(noti: noti, layout: NotificationLayout.BigText);
+      }
     });
   }
 
   final _serverMessageStreamController = StreamController<ServerMessage>.broadcast();
 
   Stream<ServerMessage> get listenForServerMessages => _serverMessageStreamController.stream;
 
-  Future<void> _showForegroundNotification(RemoteNotification? notification) async {
-    if (notification != null) {
-      final id = Random().nextInt(10000);
-      showNotification(id: id, title: notification.title!, body: notification.body!);
-    }
+  Future<void> _showForegroundNotification(
+      {required RemoteNotification noti, NotificationLayout layout = NotificationLayout.Default}) async {
+    final id = Random().nextInt(10000);
+    showNotification(id: id, title: noti.title!, body: noti.body!, layout: layout);
   }
 }