plus plus plus

lib/ui/mobile/premium/premium_inline.dart

@@ -62,7 +62,7 @@ class PremiumInline extends StatelessWidget {
     //         child: InkWell(
     //           borderRadius: BorderRadius.circular(16.0),
     //           onTap: () {
-    //             PremiumLockedFeatureUpsell.show(
+    //             PlusLockedFeaturePopup.show(
     //                 context: context, feature: _getFeature());
     //           },
     //         ),

lib/ui/mobile/premium/upsell.dart

@@ -1,4 +1,6 @@
+import 'package:flutter_svg/svg.dart';
 import 'package:refilc/icons/filc_icons.dart';
+import 'package:refilc_mobile_ui/common/bottom_sheet_menu/rounded_bottom_sheet.dart';
 import 'package:refilc_mobile_ui/premium/plus_screen.dart';
 import 'package:flutter/material.dart';
 
@@ -158,17 +160,141 @@ const Map<PremiumFeature, String> _featureDescriptions = {
   PremiumFeature.calendarSync: "Szinkronizáld az órarended reFilc+ Gold-al!",
 };
 
-class PremiumLockedFeatureUpsell extends StatelessWidget {
+// class PremiumLockedFeatureUpsell extends StatelessWidget {
-  const PremiumLockedFeatureUpsell({super.key, required this.feature});
+//   const PremiumLockedFeatureUpsell({super.key, required this.feature});
 
-  static void show(
+//   static void show(
-          {required BuildContext context, required PremiumFeature feature}) =>
+//           {required BuildContext context, required PremiumFeature feature}) =>
-      showDialog(
+//       showRoundedModalBottomSheet(context,
-          context: context,
+//           child: PremiumLockedFeatureUpsell(feature: feature));
-          builder: (context) => PremiumLockedFeatureUpsell(feature: feature));
+
+//   final PremiumFeature feature;
+
+//   IconData _getIcon() => _featureLevels[feature] == PremiumFeatureLevel.cap
+//       ? FilcIcons.kupak
+//       : _featureLevels[feature] == PremiumFeatureLevel.ink
+//           ? FilcIcons.tinta
+//           : FilcIcons.tinta;
+//   Color _getColor(BuildContext context) =>
+//       _featureLevels[feature] == PremiumFeatureLevel.gold
+//           ? const Color(0xFFC89B08)
+//           : Theme.of(context).brightness == Brightness.light
+//               ? const Color(0xff691A9B)
+//               : const Color(0xffA66FC8);
+//   String? _getAsset() => _featureAssets[feature];
+//   String _getTitle() => _featureTitles[feature]!;
+//   String _getDescription() => _featureDescriptions[feature]!;
+
+//   @override
+//   Widget build(BuildContext context) {
+//     final Color color = _getColor(context);
+
+//     return Dialog(
+//       child: Padding(
+//         padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 16.0),
+//         child: Column(
+//           mainAxisSize: MainAxisSize.min,
+//           crossAxisAlignment: CrossAxisAlignment.start,
+//           children: [
+//             // Title Bar
+//             Row(
+//               mainAxisAlignment: MainAxisAlignment.spaceBetween,
+//               children: [
+//                 Padding(
+//                   padding: const EdgeInsets.only(left: 8.0),
+//                   child: Icon(_getIcon()),
+//                 ),
+//                 IconButton(
+//                   onPressed: () => Navigator.of(context).pop(),
+//                   icon: const Icon(Icons.close),
+//                 ),
+//               ],
+//             ),
+
+//             // Image showcase
+//             if (_getAsset() != null)
+//               Padding(
+//                 padding: const EdgeInsets.only(top: 8.0),
+//                 child: Image.asset(_getAsset()!),
+//               ),
+
+//             // Dialog title
+//             Padding(
+//               padding: const EdgeInsets.only(top: 12.0),
+//               child: Text(
+//                 _getTitle(),
+//                 style: const TextStyle(
+//                   fontWeight: FontWeight.bold,
+//                   fontSize: 20.0,
+//                 ),
+//               ),
+//             ),
+
+//             // Dialog description
+//             Padding(
+//               padding: const EdgeInsets.only(top: 8.0),
+//               child: Text(
+//                 _getDescription(),
+//                 style: const TextStyle(
+//                   fontSize: 16.0,
+//                 ),
+//               ),
+//             ),
+
+//             // CTA button
+//             Padding(
+//               padding: const EdgeInsets.only(top: 8.0),
+//               child: SizedBox(
+//                 width: double.infinity,
+//                 child: TextButton(
+//                   style: ButtonStyle(
+//                       backgroundColor:
+//                           MaterialStatePropertyAll(color.withOpacity(.25)),
+//                       foregroundColor: MaterialStatePropertyAll(color),
+//                       overlayColor:
+//                           MaterialStatePropertyAll(color.withOpacity(.1))),
+//                   onPressed: () {
+//                     Navigator.of(context, rootNavigator: true)
+//                         .push(MaterialPageRoute(builder: (context) {
+//                       return const PlusScreen();
+//                     }));
+//                   },
+//                   child: const Text(
+//                     "Vigyél oda!",
+//                     style: TextStyle(
+//                       fontWeight: FontWeight.bold,
+//                       fontSize: 18.0,
+//                     ),
+//                   ),
+//                 ),
+//               ),
+//             ),
+//           ],
+//         ),
+//       ),
+//     );
+//   }
+// }
+
+class PlusLockedFeaturePopup extends StatelessWidget {
+  const PlusLockedFeaturePopup({super.key, required this.feature});
+
+  static void show({
+    required BuildContext context,
+    required PremiumFeature feature,
+  }) =>
+      showRoundedModalBottomSheet(
+        context,
+        child: PlusLockedFeaturePopup(
+          feature: feature,
+        ),
+        showHandle: false,
+      );
 
   final PremiumFeature feature;
 
+  PremiumFeatureLevel? _getFeatureLevel() => _featureLevels[feature];
+
   IconData _getIcon() => _featureLevels[feature] == PremiumFeatureLevel.cap
       ? FilcIcons.kupak
       : _featureLevels[feature] == PremiumFeatureLevel.ink
@@ -186,91 +312,181 @@ class PremiumLockedFeatureUpsell extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final Color color = _getColor(context);
+    final bool isGold = _getFeatureLevel() == PremiumFeatureLevel.gold;
 
-    return Dialog(
+    return Container(
+      decoration: BoxDecoration(
+        color: isGold ? const Color(0xFFF7EDD9) : const Color(0xFFDCDAF7),
+        borderRadius: const BorderRadius.vertical(
+          top: Radius.circular(12.0),
+        ),
+      ),
+      child: Stack(
+        children: [
+          SvgPicture.asset(
+            "assets/svg/mesh_bg.svg",
+            // ignore: deprecated_member_use
+            color: isGold ? const Color(0xFFf0dcb6) : const Color(0xFFbcb8f0),
+            width: MediaQuery.of(context).size.width,
+          ),
+          SizedBox(
+            width: MediaQuery.of(context).size.width,
             child: Padding(
-        padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 16.0),
+              padding: const EdgeInsets.all(18.0),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.center,
+                children: [
+                  Container(
+                    width: 40,
+                    height: 4,
+                    decoration: BoxDecoration(
+                      color: isGold
+                          ? const Color(0xFF341C01)
+                          : const Color(0xFF130667),
+                      borderRadius: BorderRadius.circular(
+                        2.0,
+                      ),
+                    ),
+                  ),
+                  const SizedBox(
+                    height: 38.0,
+                  ),
+                  Image.asset(
+                    'assets/images/plus_${isGold ? 'gold' : 'standard'}.png',
+                    width: 66,
+                    height: 66,
+                  ),
+                  const SizedBox(
+                    height: 55.0,
+                  ),
+                  Container(
+                    width: double.infinity,
+                    decoration: BoxDecoration(
+                      color: const Color(
+                        0xFFF7F9FC,
+                      ).withOpacity(0.7),
+                      borderRadius: const BorderRadius.vertical(
+                        top: Radius.circular(12.0),
+                        bottom: Radius.circular(6.0),
+                      ),
+                    ),
+                    padding: const EdgeInsets.all(14.0),
                     child: Column(
-          mainAxisSize: MainAxisSize.min,
                       crossAxisAlignment: CrossAxisAlignment.start,
                       children: [
-            // Title Bar
+                        Text(
-            Row(
+                          isGold ? 'reFilc+ Gold' : 'reFilc+',
-              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                          style: TextStyle(
-              children: [
+                            color: isGold
-                Padding(
+                                ? const Color(0xFFAD7637)
-                  padding: const EdgeInsets.only(left: 8.0),
+                                : const Color(0xFF7463E2),
-                  child: Icon(_getIcon()),
+                            fontSize: 14.0,
+                            fontWeight: FontWeight.w500,
+                          ),
+                        ),
+                        const SizedBox(
+                          height: 12.0,
+                        ),
+                        Text(
+                          _getTitle(),
+                          style: TextStyle(
+                            color: isGold
+                                ? const Color(0xFF341C01)
+                                : const Color(0xFF150D4E),
+                            fontSize: 20.0,
+                            fontWeight: FontWeight.w700,
+                          ),
+                        ),
+                        const SizedBox(
+                          height: 8.0,
+                        ),
+                        Text(
+                          _getDescription(),
+                          style: TextStyle(
+                            color: isGold
+                                ? const Color(0xFF341C01)
+                                : const Color(0xFF150D4E),
+                            fontSize: 14.0,
+                            fontWeight: FontWeight.w500,
                           ),
-                IconButton(
-                  onPressed: () => Navigator.of(context).pop(),
-                  icon: const Icon(Icons.close),
                         ),
                       ],
                     ),
-
-            // Image showcase
-            if (_getAsset() != null)
-              Padding(
-                padding: const EdgeInsets.only(top: 8.0),
-                child: Image.asset(_getAsset()!),
                   ),
-
+                  const SizedBox(
-            // Dialog title
+                    height: 6.0,
-            Padding(
-              padding: const EdgeInsets.only(top: 12.0),
-              child: Text(
-                _getTitle(),
-                style: const TextStyle(
-                  fontWeight: FontWeight.bold,
-                  fontSize: 20.0,
                   ),
-              ),
+                  Container(
-            ),
-
-            // Dialog description
-            Padding(
-              padding: const EdgeInsets.only(top: 8.0),
-              child: Text(
-                _getDescription(),
-                style: const TextStyle(
-                  fontSize: 16.0,
-                ),
-              ),
-            ),
-
-            // CTA button
-            Padding(
-              padding: const EdgeInsets.only(top: 8.0),
-              child: SizedBox(
                     width: double.infinity,
-                child: TextButton(
+                    decoration: BoxDecoration(
-                  style: ButtonStyle(
+                      color: const Color(
-                      backgroundColor:
+                        0xFFF7F9FC,
-                          MaterialStatePropertyAll(color.withOpacity(.25)),
+                      ).withOpacity(0.7),
-                      foregroundColor: MaterialStatePropertyAll(color),
+                      borderRadius: const BorderRadius.vertical(
-                      overlayColor:
+                        top: Radius.circular(6.0),
-                          MaterialStatePropertyAll(color.withOpacity(.1))),
+                        bottom: Radius.circular(12.0),
-                  onPressed: () {
+                      ),
+                    ),
+                    padding: const EdgeInsets.all(14.0),
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Text(
+                          'A reFilc+ 0.99 €, a reFilc+ Gold 2.99 €',
+                          style: TextStyle(
+                            color: isGold
+                                ? const Color(0xFF341C01)
+                                : const Color(0xFF150D4E),
+                            fontSize: 14.0,
+                            fontWeight: FontWeight.w600,
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                  const SizedBox(
+                    height: 24.0,
+                  ),
+                  GestureDetector(
+                    onTap: () {
                       Navigator.of(context, rootNavigator: true)
                           .push(MaterialPageRoute(builder: (context) {
                         return const PlusScreen();
                       }));
                     },
-                  child: const Text(
+                    child: Container(
-                    "Vigyél oda!",
+                      width: double.infinity,
+                      decoration: BoxDecoration(
+                        image: DecorationImage(
+                          image: AssetImage(
+                              'assets/images/btn_plus_${isGold ? 'gold' : 'standard'}.png'),
+                        ),
+                        borderRadius: BorderRadius.circular(12.0),
+                      ),
+                      padding: const EdgeInsets.all(16.0),
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.center,
+                        children: [
+                          Text(
+                            'Előfizetés',
                             style: TextStyle(
-                      fontWeight: FontWeight.bold,
+                              color: isGold
+                                  ? const Color(0xFF341C01)
+                                  : const Color(0xFF150D4E),
                               fontSize: 18.0,
+                              fontWeight: FontWeight.w500,
                             ),
                           ),
+                        ],
                       ),
                     ),
                   ),
                 ],
               ),
             ),
+          ),
+        ],
+      ),
     );
   }
 }

lib/ui/mobile/settings/app_icon_screen.dart

@@ -22,7 +22,7 @@ class PremiumCustomAppIconMenu extends StatelessWidget {
     //   onPressed: () {
     //     if (!Provider.of<PremiumProvider>(context, listen: false)
     //         .hasScope(PremiumScopes.changeAppIcon)) {
-    //       PremiumLockedFeatureUpsell.show(
+    //       PlusLockedFeaturePopup.show(
     //           context: context, feature: PremiumFeature.appiconchange);
     //       return;
     //     }

lib/ui/mobile/settings/modify_teacher_names.dart

@@ -32,7 +32,7 @@
 //       onPressed: () {
 //         // if (!Provider.of<PremiumProvider>(context, listen: false)
 //         //     .hasScope(PremiumScopes.renameTeachers)) {
-//         //   PremiumLockedFeatureUpsell.show(
+//         //   PlusLockedFeaturePopup.show(
 //         //       context: context, feature: PremiumFeature.teacherrename);
 //         //   return;
 //         // }
@@ -57,7 +57,7 @@
 //         onChanged: (v) async {
 //           // if (!Provider.of<PremiumProvider>(context, listen: false)
 //           //     .hasScope(PremiumScopes.renameTeachers)) {
-//           //   PremiumLockedFeatureUpsell.show(
+//           //   PlusLockedFeaturePopup.show(
 //           //       context: context, feature: PremiumFeature.teacherrename);
 //           //   return;
 //           // }

lib/ui/mobile/settings/submenu/calendar_sync.dart

@@ -34,7 +34,7 @@ class MenuCalendarSync extends StatelessWidget {
       onPressed: () async {
         if (!Provider.of<PremiumProvider>(context, listen: false)
             .hasScope(PremiumScopes.calendarSync)) {
-          return PremiumLockedFeatureUpsell.show(
+          return PlusLockedFeaturePopup.show(
               context: context, feature: PremiumFeature.calendarSync);
         }
 

lib/ui/mobile/settings/welcome_message.dart

@@ -31,7 +31,7 @@ class WelcomeMessagePanelButton extends StatelessWidget {
       onPressed: () {
         if (!Provider.of<PremiumProvider>(context, listen: false)
             .hasScope(PremiumScopes.welcomeMessage)) {
-          PremiumLockedFeatureUpsell.show(
+          PlusLockedFeaturePopup.show(
               context: context, feature: PremiumFeature.welcomeMessage);
           return;
         }