Add view model to manage phone number product changes

lib/di.dart

@@ -5,6 +5,7 @@ import 'package:cake_wallet/monero/monero.dart';
 import 'package:cake_wallet/haven/haven.dart';
 import 'package:cake_wallet/bitcoin/bitcoin.dart';
 import 'package:cake_wallet/src/screens/dashboard/widgets/balance_page.dart';
+import 'package:cake_wallet/view_model/cake_phone/phone_plan_view_model.dart';
 import 'package:cw_core/unspent_coins_info.dart';
 import 'package:cake_wallet/core/backup_service.dart';
 import 'package:cw_core/wallet_service.dart';
@@ -642,5 +643,7 @@ Future setup(
   getIt.registerFactoryParam<FullscreenQRPage, String, bool>(
           (String qrData, bool isLight) => FullscreenQRPage(qrData: qrData, isLight: isLight,));
 
+  getIt.registerFactory(() => PhonePlanViewModel());
+
   _isSetupFinished = true;
 }

lib/router.dart

@@ -13,6 +13,7 @@ import 'package:cake_wallet/src/screens/seed/pre_seed_page.dart';
 import 'package:cake_wallet/src/screens/support/support_page.dart';
 import 'package:cake_wallet/src/screens/unspent_coins/unspent_coins_details_page.dart';
 import 'package:cake_wallet/src/screens/unspent_coins/unspent_coins_list_page.dart';
+import 'package:cake_wallet/view_model/cake_phone/phone_plan_view_model.dart';
 import 'package:cake_wallet/view_model/monero_account_list/account_list_item.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
@@ -430,7 +431,7 @@ Route<dynamic> createRoute(RouteSettings settings) {
 
     case Routes.phoneNumberProduct:
       return MaterialPageRoute<PhoneNumberProductPage>(
-        builder: (_) => PhoneNumberProductPage(),
+        builder: (_) => PhoneNumberProductPage(getIt.get<PhonePlanViewModel>()),
       );
 
     default:

lib/src/screens/cake_phone/cake_phone_products/phone_number_product_page.dart

@@ -1,5 +1,6 @@
 import 'package:cake_wallet/src/widgets/picker.dart';
 import 'package:cake_wallet/utils/show_pop_up.dart';
+import 'package:cake_wallet/view_model/cake_phone/phone_plan_view_model.dart';
 import 'package:country_pickers/country.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/cupertino.dart';
@@ -10,12 +11,15 @@ import 'package:cake_wallet/entities/service_plan.dart';
 import 'package:cake_wallet/src/widgets/primary_button.dart';
 import 'package:cake_wallet/src/screens/base_page.dart';
 import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart';
+import 'package:flutter_mobx/flutter_mobx.dart';
 
 class PhoneNumberProductPage extends BasePage {
-  PhoneNumberProductPage();
+  PhoneNumberProductPage(this.phonePlanViewModel);
+
+  final PhonePlanViewModel phonePlanViewModel;
 
   @override
-  Widget body(BuildContext context) => PhoneNumberProductBody();
+  Widget body(BuildContext context) => PhoneNumberProductBody(phonePlanViewModel);
 
   @override
   Widget middle(BuildContext context) {
@@ -31,43 +35,31 @@ class PhoneNumberProductPage extends BasePage {
 }
 
 class PhoneNumberProductBody extends StatefulWidget {
-  PhoneNumberProductBody();
+  PhoneNumberProductBody(this.phonePlanViewModel);
+
+  final PhonePlanViewModel phonePlanViewModel;
 
   @override
-  PhoneNumberProductBodyState createState() => PhoneNumberProductBodyState();
+  PhoneNumberProductBodyState createState() => PhoneNumberProductBodyState(phonePlanViewModel);
 }
 
 class PhoneNumberProductBodyState extends State<PhoneNumberProductBody> {
-  final List<ServicePlan> dummyPlans = [
+  PhoneNumberProductBodyState(this.phonePlanViewModel);
-    ServicePlan(id: "1", duration: 1, price: 20, quantity: 30),
-    ServicePlan(id: "2", duration: 3, price: 10, quantity: 60),
-    ServicePlan(id: "3", duration: 6, price: 9, quantity: 120),
-    ServicePlan(id: "4", duration: 12, price: 5, quantity: 200),
-  ];
 
-  Country selectedCountry = countryList.firstWhere((element) => element.iso3Code == "USA");
+  final PhonePlanViewModel phonePlanViewModel;
-
-  final int rateInCents = 20;
-
-  ServicePlan selectedPlan;
-
-  @override
-  void initState() {
-    super.initState();
-
-    selectedPlan = dummyPlans.first;
-  }
 
   @override
   Widget build(BuildContext context) {
     return Container(
       padding: EdgeInsets.only(top: 16),
       child: ScrollableWithBottomSection(
-        contentPadding: EdgeInsets.symmetric(horizontal: 24, vertical: 20).copyWith(right: 0),
+        contentPadding: EdgeInsets.symmetric(vertical: 20),
         content: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            Text(
+            Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 24),
+              child: Text(
                 S.of(context).initial_service_term,
                 style: TextStyle(
                   fontSize: 20,
@@ -76,8 +68,9 @@ class PhoneNumberProductBodyState extends State<PhoneNumberProductBody> {
                   fontFamily: 'Lato',
                 ),
               ),
+            ),
             Padding(
-              padding: const EdgeInsets.only(top: 8, bottom: 24, right: 24),
+              padding: const EdgeInsets.all(24).copyWith(top: 8),
               child: Text(
                 S.of(context).phone_number_promotion_text,
                 style: TextStyle(
@@ -87,15 +80,20 @@ class PhoneNumberProductBodyState extends State<PhoneNumberProductBody> {
                 ),
               ),
             ),
-            SingleChildScrollView(
+            Observer(builder: (_) {
+              return SingleChildScrollView(
                 scrollDirection: Axis.horizontal,
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 24),
                   child: Row(
-                children: dummyPlans.map((e) => planCard(e)).toList(),
+                    children: phonePlanViewModel.servicePlans.map((e) => planCard(e)).toList(),
                   ),
                 ),
+              );
+            }),
             const SizedBox(height: 40),
             Padding(
-              padding: const EdgeInsets.only(right: 24),
+              padding: const EdgeInsets.symmetric(horizontal: 24),
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
@@ -115,17 +113,19 @@ class PhoneNumberProductBodyState extends State<PhoneNumberProductBody> {
                         ),
                       ),
                     ),
-                    child: Text(
+                    child: Observer(builder: (_) {
-                      "${selectedPlan.quantity}, " +
+                      return Text(
+                        "${phonePlanViewModel.selectedPlan.quantity}, " +
                             "${S.of(context).then} " +
-                          "\$${(rateInCents / 100).toStringAsFixed(2)} " +
+                            "\$${(phonePlanViewModel.rateInCents / 100).toStringAsFixed(2)} " +
                             "${S.of(context).per_message}",
                         style: TextStyle(
                           fontSize: 16,
                           fontWeight: FontWeight.w700,
                           color: Theme.of(context).primaryTextTheme.title.color,
                         ),
-                    ),
+                      );
+                    }),
                   ),
                   const SizedBox(height: 24),
                   Text(
@@ -154,12 +154,10 @@ class PhoneNumberProductBodyState extends State<PhoneNumberProductBody> {
                               final Country _country = country as Country;
                               return "${_country.name} (+${_country.phoneCode})";
                             },
-                            selectedAtIndex: countryList.indexOf(selectedCountry),
+                            selectedAtIndex: countryList.indexOf(phonePlanViewModel.selectedCountry),
                             mainAxisAlignment: MainAxisAlignment.start,
                             onItemSelected: (Country country) {
-                              // TODO: update view model
+                              phonePlanViewModel.selectedCountry = country;
-                              selectedCountry = country;
-                              setState(() {});
                             },
                             images: countryList
                                 .map((e) => Image.asset(
@@ -183,10 +181,11 @@ class PhoneNumberProductBodyState extends State<PhoneNumberProductBody> {
                           ),
                         );
                       },
-                      child: Row(
+                      child: Observer(builder: (_) {
+                        return Row(
                           children: [
                             Image.asset(
-                            CountryPickerUtils.getFlagImageAssetPath(selectedCountry.isoCode),
+                              CountryPickerUtils.getFlagImageAssetPath(phonePlanViewModel.selectedCountry.isoCode),
                               height: 20.0,
                               width: 36.0,
                               fit: BoxFit.fill,
@@ -199,7 +198,7 @@ class PhoneNumberProductBodyState extends State<PhoneNumberProductBody> {
                                     child: Padding(
                                       padding: const EdgeInsets.only(left: 8, right: 6),
                                       child: Text(
-                                      selectedCountry.name,
+                                        phonePlanViewModel.selectedCountry.name,
                                         style: TextStyle(
                                           fontSize: 16,
                                           fontWeight: FontWeight.w700,
@@ -209,7 +208,7 @@ class PhoneNumberProductBodyState extends State<PhoneNumberProductBody> {
                                     ),
                                   ),
                                   Text(
-                                  "(+${selectedCountry.phoneCode})",
+                                    "(+${phonePlanViewModel.selectedCountry.phoneCode})",
                                     style: TextStyle(
                                       fontSize: 16,
                                       fontWeight: FontWeight.w400,
@@ -225,7 +224,8 @@ class PhoneNumberProductBodyState extends State<PhoneNumberProductBody> {
                               size: 16,
                             ),
                           ],
-                      ),
+                        );
+                      }),
                     ),
                   ),
                   const SizedBox(height: 49),
@@ -245,7 +245,9 @@ class PhoneNumberProductBodyState extends State<PhoneNumberProductBody> {
                         ),
                         child: Row(
                           children: [
-                            Container( // TODO: add action
+                            GestureDetector(
+                              onTap: () => phonePlanViewModel.removeAdditionalSms(),
+                              child: Container(
                                 padding: const EdgeInsets.all(8),
                                 margin: const EdgeInsets.all(4),
                                 decoration: BoxDecoration(
@@ -254,18 +256,23 @@ class PhoneNumberProductBodyState extends State<PhoneNumberProductBody> {
                                 ),
                                 child: Icon(Icons.remove, color: Colors.white, size: 15),
                               ),
+                            ),
                             Padding(
                               padding: const EdgeInsets.symmetric(horizontal: 16),
-                              child: Text(
+                              child: Observer(builder: (_) {
-                                "25", // TODO: get from view model
+                                return Text(
+                                  phonePlanViewModel.additionalSms.toString(),
                                   style: TextStyle(
                                     fontSize: 16,
                                     fontWeight: FontWeight.w700,
                                     color: Theme.of(context).primaryTextTheme.title.color,
                                   ),
+                                );
+                              }),
                             ),
-                            ),
+                            GestureDetector(
-                            Container( // TODO: add action
+                              onTap: () => phonePlanViewModel.addAdditionalSms(),
+                              child: Container(
                                 padding: const EdgeInsets.all(8),
                                 margin: const EdgeInsets.all(4),
                                 decoration: BoxDecoration(
@@ -274,6 +281,7 @@ class PhoneNumberProductBodyState extends State<PhoneNumberProductBody> {
                                 ),
                                 child: Icon(Icons.add, color: Colors.white, size: 15),
                               ),
+                            ),
                           ],
                         ),
                       ),
@@ -287,12 +295,13 @@ class PhoneNumberProductBodyState extends State<PhoneNumberProductBody> {
         bottomSectionPadding: EdgeInsets.only(bottom: 24, right: 24, left: 24),
         bottomSection: Column(
           children: <Widget>[
-            RichText(
+            Observer(builder: (_) {
+              return RichText(
                 text: TextSpan(
                   children: [
                     TextSpan(text: "${S.of(context).due_today} "),
                     TextSpan(
-                    text: "\$35.00 ",
+                      text: "\$${phonePlanViewModel.totalPrice}",
                       style: TextStyle(
                         fontWeight: FontWeight.w700,
                         color: Theme.of(context).primaryTextTheme.title.color,
@@ -305,7 +314,8 @@ class PhoneNumberProductBodyState extends State<PhoneNumberProductBody> {
                     fontFamily: 'Lato',
                   ),
                 ),
-            ),
+              );
+            }),
             const SizedBox(height: 24),
             PrimaryButton(
               onPressed: () {},
@@ -327,11 +337,11 @@ class PhoneNumberProductBodyState extends State<PhoneNumberProductBody> {
   }
 
   Widget planCard(ServicePlan e) {
+    final isSelected = phonePlanViewModel.selectedPlan == e;
     return GestureDetector(
       onTap: () {
-        if (e != selectedPlan) {
+        if (!isSelected) {
-          selectedPlan = e;
+          phonePlanViewModel.selectedPlan = e;
-          setState(() {});
         }
       },
       child: Container(
@@ -339,7 +349,7 @@ class PhoneNumberProductBodyState extends State<PhoneNumberProductBody> {
         padding: EdgeInsets.symmetric(horizontal: 10, vertical: 6),
         decoration: BoxDecoration(
           borderRadius: BorderRadius.all(Radius.circular(10)),
-          gradient: selectedPlan == e
+          gradient: isSelected
               ? LinearGradient(
                   colors: [
                     Theme.of(context).primaryTextTheme.subhead.color,
@@ -349,7 +359,7 @@ class PhoneNumberProductBodyState extends State<PhoneNumberProductBody> {
                   end: Alignment.bottomRight,
                 )
               : null,
-          color: selectedPlan == e ? null : Theme.of(context).primaryTextTheme.display3.decorationColor,
+          color: isSelected ? null : Theme.of(context).primaryTextTheme.display3.decorationColor,
         ),
         child: Column(
           children: [
@@ -357,7 +367,7 @@ class PhoneNumberProductBodyState extends State<PhoneNumberProductBody> {
               "\$${e.price}/${S.of(context).month}",
               style: TextStyle(
                 fontWeight: FontWeight.w500,
-                color: selectedPlan == e ? Colors.white : Theme.of(context).primaryTextTheme.title.color,
+                color: isSelected ? Colors.white : Theme.of(context).primaryTextTheme.title.color,
               ),
             ),
             Text(
@@ -365,7 +375,7 @@ class PhoneNumberProductBodyState extends State<PhoneNumberProductBody> {
               style: TextStyle(
                 fontSize: 10,
                 fontWeight: FontWeight.w500,
-                color: selectedPlan == e ? Colors.white : Theme.of(context).accentTextTheme.subhead.color,
+                color: isSelected ? Colors.white : Theme.of(context).accentTextTheme.subhead.color,
                 fontFamily: 'Lato',
               ),
             ),

lib/view_model/cake_phone/phone_plan_view_model.dart

@@ -0,0 +1,57 @@
+import 'package:cake_wallet/entities/service_plan.dart';
+import 'package:country_pickers/countries.dart';
+import 'package:country_pickers/country.dart';
+import 'package:mobx/mobx.dart';
+
+part 'phone_plan_view_model.g.dart';
+
+class PhonePlanViewModel = PhonePlanViewModelBase with _$PhonePlanViewModel;
+
+abstract class PhonePlanViewModelBase with Store {
+  PhonePlanViewModelBase({this.selectedPlan}) {
+    additionalSms = 0;
+    rateInCents = 20;
+
+    servicePlans = [
+      ServicePlan(id: "1", duration: 1, price: 20, quantity: 30),
+      ServicePlan(id: "2", duration: 3, price: 10, quantity: 60),
+      ServicePlan(id: "3", duration: 6, price: 9, quantity: 120),
+      ServicePlan(id: "4", duration: 12, price: 5, quantity: 200),
+      ServicePlan(id: "5", duration: 24, price: 2, quantity: 400),
+    ];
+    // TODO: servicePlans = _getServicesFromApi
+
+    selectedPlan ??= servicePlans.first;
+
+    selectedCountry = countryList.firstWhere((element) => element.iso3Code == "USA");
+  }
+
+  @observable
+  ServicePlan selectedPlan;
+
+  @observable
+  Country selectedCountry;
+
+  @observable
+  List<ServicePlan> servicePlans;
+
+  @observable
+  int additionalSms;
+
+  @observable
+  int rateInCents;
+
+  @computed
+  double get totalPrice => (selectedPlan?.price ?? 0)
+      + (additionalSms * ((rateInCents ?? 0) / 100)).toDouble();
+
+  @action
+  void addAdditionalSms() => additionalSms++;
+
+  @action
+  void removeAdditionalSms() {
+    if (additionalSms > 0) {
+      additionalSms--;
+    }
+  }
+}