Added widget content option in alert_with_two_actions.dart

Add Pay with cake phone button action

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

@@ -1,3 +1,4 @@
+import 'package:cake_wallet/src/widgets/alert_with_two_actions.dart';
 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';
@@ -318,7 +319,29 @@ class PhoneNumberProductBodyState extends State<PhoneNumberProductBody> {
             }),
             const SizedBox(height: 24),
             PrimaryButton(
-              onPressed: () {},
+              onPressed: () {
+                showPopUp<void>(
+                    context: context,
+                    builder: (dialogContext) {
+                      return AlertWithTwoActions(
+                          alertTitle: S.of(context).confirm_payment,
+                          alertContent: S.of(context).confirm_delete_template,
+                          contentWidget: Column(
+                            mainAxisSize: MainAxisSize.min,
+                            children: [
+                              receiptRow(S.of(context).amount, phonePlanViewModel.totalPrice),
+                              receiptRow(S.of(context).cake_pay_balance, 100),
+                            ],
+                          ),
+                          isDividerExists: true,
+                          rightButtonText: S.of(context).ok,
+                          leftButtonText: S.of(context).cancel,
+                          actionRightButton: () {
+                            Navigator.of(dialogContext).pop();
+                          },
+                          actionLeftButton: () => Navigator.of(dialogContext).pop());
+                    });
+              },
               text: S.of(context).pay_with_cake_phone,
               color: Theme.of(context).accentTextTheme.caption.backgroundColor,
               textColor: Theme.of(context).primaryTextTheme.title.color,
@@ -384,4 +407,30 @@ class PhoneNumberProductBodyState extends State<PhoneNumberProductBody> {
       ),
     );
   }
+
+  Widget receiptRow(String title, double amount) {
+    return Padding(
+      padding: const EdgeInsets.only(top: 24),
+      child: Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: [
+        Text(
+          "$title:",
+          style: TextStyle(
+            fontSize: 16,
+            fontWeight: FontWeight.w500,
+            color: Theme.of(context).accentTextTheme.subhead.color,
+          ),
+        ),
+        Text(
+          "\$${amount.roundToDouble() == amount ? amount.round() : amount}",
+          style: TextStyle(
+            fontSize: 18,
+            fontWeight: FontWeight.w700,
+            color: Theme.of(context).primaryTextTheme.title.color,
+          ),
+        ),
+      ],
+    ),);
+  }
 }

lib/src/widgets/alert_with_two_actions.dart

@@ -5,13 +5,15 @@ import 'package:flutter/cupertino.dart';
 class AlertWithTwoActions extends BaseAlertDialog {
   AlertWithTwoActions({
     @required this.alertTitle,
-    @required this.alertContent,
     @required this.leftButtonText,
     @required this.rightButtonText,
     @required this.actionLeftButton,
     @required this.actionRightButton,
-    this.alertBarrierDismissible = true
-  });
+    this.alertBarrierDismissible = true,
+    this.isDividerExists = false,
+    this.alertContent,
+    this.contentWidget,
+  }) : assert(alertContent != null || contentWidget != null);
 
   final String alertTitle;
   final String alertContent;
@@ -20,6 +22,10 @@ class AlertWithTwoActions extends BaseAlertDialog {
   final VoidCallback actionLeftButton;
   final VoidCallback actionRightButton;
   final bool alertBarrierDismissible;
+  @override
+  final Widget contentWidget;
+  @override
+  final bool isDividerExists;
 
   @override
   String get titleText => alertTitle;

lib/src/widgets/base_alert_dialog.dart

@@ -11,6 +11,7 @@ class BaseAlertDialog extends StatelessWidget {
   VoidCallback get actionLeft => () {};
   VoidCallback get actionRight => () {};
   bool get barrierDismissible => true;
+  Widget get contentWidget => null;
 
   Widget title(BuildContext context) {
     return Text(
@@ -27,8 +28,8 @@ class BaseAlertDialog extends StatelessWidget {
   }
 
   Widget content(BuildContext context) {
-    return Text(
-      contentText,
+    return contentWidget ?? Text(
+      contentText.toString(),
       textAlign: TextAlign.center,
       style: TextStyle(
         fontSize: 16,

lib/view_model/cake_phone/phone_plan_view_model.dart

@@ -10,7 +10,7 @@ class PhonePlanViewModel = PhonePlanViewModelBase with _$PhonePlanViewModel;
 abstract class PhonePlanViewModelBase with Store {
   PhonePlanViewModelBase({this.selectedPlan}) {
     additionalSms = 0;
-    rateInCents = 20;
+    rateInCents = 20; // TODO: get from api
 
     servicePlans = [
       ServicePlan(id: "1", duration: 1, price: 20, quantity: 30),

res/values/strings_en.arb

@@ -567,5 +567,7 @@
   "then": "then",
   "per_message": "per message",
   "phone_number_country": "Phone Number Country",
-  "additional_sms_messages": "Additional SMS Messages"
+  "additional_sms_messages": "Additional SMS Messages",
+  "confirm_payment": "Confirm payment",
+  "cake_pay_balance": "CakePay Balance"
 }